/*
Theme Name: Villa Angelika Dresden
Theme URI: https://villa-angelika-dresden.de/
Author: Villa Angelika Dresden
Description: Individuelles WordPress-Theme für die Pension Villa Angelika Dresden. Stilvolle Villa-Optik mit dunkelgrünem Header, Gold-Akzenten und Zimmer-/Bewertungsübersicht.
Version: 1.9.9 (Banner-Pfad korrigiert)
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: villa-angelika
*/

/* -----------------------------------------------------
   0. Grundlagen / Variablen
----------------------------------------------------- */
:root{
	--va-dark: #1b2b24;
	--va-dark-2: #223a30;
	--va-gold: #b3925a;
	--va-gold-light: #c9a96e;
	--va-cream: #f7f4ee;
	--va-cream-2: #efe9dd;
	--va-text: #2b2b28;
	--va-text-light: #6b6a63;
	--va-white: #ffffff;
	--va-radius: 6px;
	--va-max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
	margin:0;
	font-family: "Jost","Helvetica Neue",Arial,sans-serif;
	color:var(--va-text);
	background:var(--va-cream);
	line-height:1.6;
	font-size:16px;
}

h1,h2,h3,h4{
	font-family: "Playfair Display","Georgia",serif;
	font-weight:600;
	margin:0 0 .5em;
	color:var(--va-dark);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--va-max); margin:0 auto; padding:0 24px; }

.eyebrow{
	text-transform:uppercase;
	letter-spacing:.15em;
	font-size:.78rem;
	color:var(--va-gold);
	font-weight:600;
	margin-bottom:.6em;
	display:block;
}

.btn{
	display:inline-block;
	padding:14px 28px;
	background:var(--va-dark);
	color:var(--va-white);
	border-radius:var(--va-radius);
	font-size:.85rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-weight:600;
	border:1px solid var(--va-dark);
	cursor:pointer;
	transition:background .2s ease, color .2s ease;
}
.btn:hover{ background:transparent; color:var(--va-dark); }
.btn-gold{ background:var(--va-gold); border-color:var(--va-gold); color:var(--va-dark);}
.btn-gold:hover{ background:transparent; color:var(--va-gold); }
.btn-outline{ background:transparent; color:var(--va-white); border-color:var(--va-white); }
.btn-outline:hover{ background:var(--va-white); color:var(--va-dark); }

/* -----------------------------------------------------
   1. Top-Leiste
----------------------------------------------------- */
.va-topbar{
	background:var(--va-dark);
	color:#cfd8d2;
	font-size:.8rem;
}
.va-topbar .container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-top:6px;
	padding-bottom:6px;
	flex-wrap:wrap;
	gap:8px;
}
.va-topbar-left{ display:flex; gap:24px; flex-wrap:wrap; }
.va-topbar a{ color:#cfd8d2; }
.va-topbar-right{ display:flex; gap:18px; align-items:center; }
.va-topbar-right a.is-current{ font-weight:600; text-decoration:underline; }

/* -----------------------------------------------------
   2. Header / Navigation
----------------------------------------------------- */
.va-header{
	background:var(--va-white);
	border-bottom:1px solid #eee;
}
.va-header .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:12px;
	padding-bottom:12px;
	gap:20px;
}
.va-logo{ display:flex; flex-direction:row; align-items:center; gap:12px; line-height:1.1; }
.va-logo .icon{
	display:flex;
	flex-shrink:0;
	width:34px;
	height:30px;
	color:var(--va-gold);
}
.va-logo .icon svg{ width:100%; height:100%; }
.va-logo .text{ display:flex; flex-direction:column; }
.va-logo .name{
	font-family:"Playfair Display",serif;
	font-weight:600;
	font-size:1.6rem;
	letter-spacing:.05em;
	color:var(--va-dark);
}
.va-logo .sub{
	font-size:.65rem;
	letter-spacing:.22em;
	color:var(--va-gold);
	text-transform:uppercase;
	margin-top:5px;
}
/* Falls ein echtes Logo-Bild (Custom Logo) statt des Text-Logos
   verwendet wird: Höhe begrenzen, damit der Header nicht durch ein
   zu groß hochgeladenes Bild unnötig hoch wird. */
.va-logo img,
.custom-logo-link img{
	max-height:58px;
	max-width:230px;
	width:auto;
	height:auto;
	display:block;
}

.va-nav{ display:flex; align-items:center; gap:28px; }
.va-nav ul{ display:flex; gap:22px; flex-wrap:nowrap; }
.va-nav ul li{ flex-shrink:0; }
.va-nav a{
	font-size:.85rem;
	text-transform:uppercase;
	letter-spacing:.03em;
	font-weight:500;
	color:var(--va-text);
	white-space:nowrap;
}
.va-nav a:hover{ color:var(--va-gold); }
.va-nav .current-menu-item > a{ color:var(--va-gold); }

.va-menu-toggle{ display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; }

/* -----------------------------------------------------
   3. Hero
----------------------------------------------------- */
.va-hero{
	position:relative;
	color:var(--va-white);
	background-color:var(--va-dark);
	background-image:
		linear-gradient(90deg, rgba(14,22,18,.94) 0%, rgba(14,22,18,.82) 30%, rgba(14,22,18,.35) 55%, rgba(14,22,18,0) 72%),
		var(--hero-img, none);
	background-size:cover;
	background-position:right center;
	padding-top:70px;
	padding-bottom:0;
}
.va-hero-inner{ max-width:var(--va-max); margin:0 auto; padding:60px 24px 48px; }
.va-hero h1{
	color:var(--va-white);
	font-size:clamp(2.2rem,4.5vw,3.4rem);
	max-width:620px;
	margin-bottom:.3em;
}
.va-hero .eyebrow-line{
	text-transform:uppercase;
	letter-spacing:.2em;
	font-size:.8rem;
	color:var(--va-gold-light);
	margin-bottom:18px;
}
.va-hero p.lead{
	max-width:520px;
	font-size:1.05rem;
	color:#e6e6e0;
	margin-bottom:32px;
}

.va-hero-features{
	display:flex;
	flex-wrap:wrap;
	gap:28px;
	margin-bottom:10px;
	max-width:640px;
}
.va-hero-features li{
	display:flex;
	align-items:center;
	gap:12px;
	font-size:.9rem;
	color:#e9e9e3;
}
.va-hero-features .icon{
	width:36px;height:36px;
	border:1px solid var(--va-gold-light);
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--va-gold-light);
	flex-shrink:0;
}

/* Booking bar */
.va-booking{
	background:var(--va-white);
	border-radius:var(--va-radius);
	box-shadow:0 20px 45px rgba(0,0,0,.18);
	margin:40px auto -60px;
	max-width:var(--va-max);
	padding:24px 28px;
	display:flex;
	gap:24px;
	align-items:flex-end;
	flex-wrap:wrap;
	position:relative;
}
.va-booking .field{ display:flex; flex-direction:column; gap:6px; min-width:150px; flex:1; }
.va-booking label{
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--va-text-light);
	font-weight:600;
}
.va-booking input, .va-booking select{
	border:1px solid #ddd;
	border-radius:4px;
	padding:12px 14px;
	font-family:inherit;
	font-size:.95rem;
	color:var(--va-text);
	background:var(--va-white);
}
.va-booking .submit-col{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.va-booking .submit-col small{ color:var(--va-text-light); font-size:.72rem; }

/* EasyBooking-Widget (easy-booking.at "smallSearch"): Felder nebeneinander
   statt untereinander. Das Widget lädt sein eigenes CSS asynchron nach
   ("loadCSS:true") und setzt dabei u.a. #smwrap sowie jede .row-fluid
   hart auf 300px Breite (ursprünglich als schmales Sidebar-Widget
   gedacht). Da dieses CSS zeitlich NACH unserem Theme-CSS eingefügt
   wird, gewinnt es bei gleicher Selektor-Spezifität automatisch –
   deshalb hier gezielt mit !important dagegenhalten. */
#ebSmallSearch, #ebSmallSearch #smwrap, #ebSmallSearch .row-fluid{ width:100% !important; max-width:none !important; }
/* Das Widget nutzt intern alte Bootstrap-2-Klassen (u.a. ".span6" für
   die Erwachsene-/Kinder-Felder), die von Haus aus eigene Außen-/Innen-
   abstände und Float-Positionierung mitbringen. Diese Reste sorgen für
   den leichten Höhenversatz gegenüber Anreise/Abreise – hier komplett
   neutralisiert, damit ausschließlich unser eigenes Zeilenraster (siehe
   --eb-label-h/--eb-field-h unten) die Positionierung bestimmt. */
#ebSmallSearch [class*="span"],
#ebSmallSearch .control-group{
	padding:0 !important;
	margin:0 !important;
	float:none !important;
	width:auto !important;
}
/* Feste Zeilenhöhen für Label-Zeile und Feld-Zeile: Damit "Zimmer" und
   "Erwachsene"/"Kinder" (die als schlichte <div>s statt echter <label>-
   Elemente vom Widget ausgegeben werden) exakt auf derselben Höhe wie
   "Anreise"/"Abreise" landen, bekommen ALLE Feldgruppen dieselben
   festen Zeilenhöhen statt sich unterschiedlich an ihren Inhalt
   anzupassen – das eliminiert den Versatz unabhängig von kleinen
   Unterschieden im Widget-eigenen Markup. */
#ebSmallSearch{ --eb-label-h:16px; --eb-field-h:44px; --eb-row-gap:6px; }
#ebSmallSearch label.control-label{
	display:block;
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--va-text-light);
	font-weight:600;
	line-height:var(--eb-label-h);
	margin:0;
}
/* Feste Höhe für Input UND Select: Browser rendern <select> nativ mit
   unterschiedlicher Höhe (Firefox/Chrome/Edge/Safari weichen hier trotz
   identischem CSS voneinander ab) – erst die feste Höhe sorgt für
   pixelgleiches Aussehen in allen Browsern. */
/* Das Widget lädt eigenes CSS, das u.a. einzelne Felder über eine
   ID-Regel (z. B. "#EBSM_numAdults") mit abweichender Höhe (30px statt
   44px), zusätzlichem Rand und größerer Schrift versieht. Eine ID-Regel
   ist mind. genauso spezifisch wie unsere Regel – bei Gleichstand
   gewinnt das später geladene Widget-CSS. Deshalb hier konsequent mit
   !important dagegengehalten (live an der echten Seite geprüft). */
#ebSmallSearch input, #ebSmallSearch select{
	box-sizing:border-box !important;
	height:44px !important;
	border:1px solid #ddd !important;
	border-radius:4px !important;
	padding:0 12px !important;
	margin:0 !important;
	font-family:inherit !important;
	font-size:.92rem !important;
	line-height:1.2 !important;
	float:none !important;
	vertical-align:top;
}
/* Die Zimmer-/Erwachsene-/Kinder-Dropdowns tragen vom Widget die
   Bootstrap-Klasse "pull-right" (float:right). Das ist der eigentliche
   Grund für den Versatz: ein schwebendes (float) Element in einer festen
   Grid-Zeile lässt Zeilenhöhen unvorhersehbar wachsen und verschiebt
   die Position. Mit !important sicher neutralisiert. */
#ebSmallSearch .pull-right{ float:none !important; }
#ebSmallSearch .errorMsg{ margin:4px 0 0; font-size:.75rem; color:#b3261e; }

/* Gesamte Buchungsleiste als EINE Zeile: Anreise, Abreise, Zimmer,
   Erwachsene, Kinder, Button. WICHTIG: bewusst OHNE display:contents
   gelöst (das Widget-Markup damit "aufzulösen" verhielt sich zwischen
   Firefox/Chrome/Edge unterschiedlich – u.a. Versatz in Firefox, Zeilen-
   umbruch in anderen Browsern). Stattdessen bleibt die Original-DOM-
   Struktur des Widgets unangetastet; jede der drei Gruppen (Termine,
   Zimmer-Personenzahl, Button) wird nur als EIN Block behandelt und
   diese drei Blöcke werden nebeneinandergestellt – funktioniert
   identisch in jedem Browser, weil nur einfaches, verschachteltes
   Flexbox zum Einsatz kommt. Zusätzlich mittig zentriert. */
#ebSmallSearch .form{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
	justify-content:center;
	gap:20px;
	margin:0;
}

/* Anreise / Abreise / Zimmer als ein Block (intern Label über Feld,
   beide Zeilen mit fester Höhe – siehe --eb-label-h/--eb-field-h oben) */
#ebSmallSearch .form > .control-group:first-of-type{
	display:grid;
	grid-template-columns:150px 150px 90px;
	grid-template-rows: var(--eb-label-h) var(--eb-field-h);
	row-gap:var(--eb-row-gap);
	column-gap:16px;
	align-items:stretch;
	flex:0 0 auto;
	margin:0;
}
#ebSmallSearch .form > .control-group:first-of-type > label:nth-child(1){ grid-column:1; grid-row:1; }
#ebSmallSearch .form > .control-group:first-of-type > .controls:nth-child(2){ grid-column:1; grid-row:2; margin:0; }
#ebSmallSearch .form > .control-group:first-of-type > .controls:nth-child(2) input{ width:150px; }
#ebSmallSearch .form > .control-group:first-of-type > label:nth-child(3){ grid-column:2; grid-row:1; }
#ebSmallSearch .form > .control-group:first-of-type > .controls:nth-child(4){ grid-column:2; grid-row:2; margin:0; }
#ebSmallSearch .form > .control-group:first-of-type > .controls:nth-child(4) input{ width:150px; }
/* "Zimmer" bleibt EIN Element, das über beide Gitterzeilen reicht und
   bekommt intern dasselbe feste Zeilenraster wie Anreise/Abreise –
   dadurch landen Label und Feld exakt auf derselben Höhe. */
#ebSmallSearch .control-group > .row-fluid.numRooms{
	grid-column:3; grid-row:1/3;
	display:grid;
	grid-template-rows: var(--eb-label-h) var(--eb-field-h);
	row-gap:var(--eb-row-gap);
	height:66px !important;
}
#ebSmallSearch .row-fluid.numRooms > div:first-child{
	grid-row:1;
	height:16px !important;
	overflow:hidden;
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--va-text-light);
	font-weight:600;
	line-height:16px !important;
	margin:0;
}
#ebSmallSearch .row-fluid.numRooms > div:last-child{ grid-row:2; }
#ebSmallSearch .row-fluid.numRooms select{ width:80px; }

/* Zimmer-Block (Erwachsene/Kinder): bleibt als ein zusammenhängender
   Block im Original-Markup, wird als Ganzes neben die Terminfelder
   gestellt. "Zimmer 1"-Überschrift ausgeblendet (für die kompakte
   Einzeilen-Leiste nicht nötig; bei mehreren Zimmern hier wieder
   einblenden). Jedes Feld (Erwachsene, Kinder) bekommt intern dasselbe
   feste Zeilenraster wie Anreise/Abreise/Zimmer. */
#ebSmallSearch .ebsmRooms{ flex:0 0 auto; }
#ebSmallSearch .control-group.EBSM_oneRoom{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
	gap:20px;
	margin:0;
}
#ebSmallSearch .control-group.EBSM_oneRoom > .row-fluid:first-child{ display:none; }
#ebSmallSearch .control-group.EBSM_oneRoom > .row-fluid:not(:first-child):not(.childrenDOBwrapper){
	display:grid;
	grid-template-rows: var(--eb-label-h) var(--eb-field-h);
	row-gap:var(--eb-row-gap);
	flex:0 0 auto;
	width:auto !important;
	height:66px !important;
	margin:0;
}
#ebSmallSearch .control-group.EBSM_oneRoom > .row-fluid:not(:first-child):not(.childrenDOBwrapper) > div:first-child{
	grid-row:1;
	height:16px !important;
	overflow:hidden;
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--va-text-light);
	font-weight:600;
	line-height:16px !important;
	margin:0;
}
#ebSmallSearch .control-group.EBSM_oneRoom > .row-fluid:not(:first-child):not(.childrenDOBwrapper) > div:last-child{ grid-row:2; }
#ebSmallSearch .control-group.EBSM_oneRoom > .row-fluid:not(:first-child):not(.childrenDOBwrapper) select{ width:80px; }

/* Button steht am Ende der Zeile, vertikal mittig zu den Feldern */
/* align-self:flex-end (nicht center!): Da die Label-Zeile über dem
   Eingabefeld sitzt, liegt die Mitte des gesamten 66px-Blocks NICHT auf
   Höhe der Eingabefelder, sondern etwas darüber. flex-end richtet den
   Button stattdessen an der Unterkante aus – exakt wie die Eingabe-
   felder selbst – und landet dadurch (live geprüft) fast pixelgenau auf
   deren Mitte. */
#ebSmallSearch .form > .control-group:last-of-type{ flex:0 0 auto; margin:0; align-self:flex-end; }
#ebSmallSearch button[type="submit"]{
	background:var(--va-dark);
	border:1px solid var(--va-dark);
	color:#fff;
	padding:12px 26px;
	border-radius:4px;
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:.85rem;
	cursor:pointer;
	float:none;
}

@media (max-width:900px){
	#ebSmallSearch .form{ gap:14px; }
}

/* -----------------------------------------------------
   4. Willkommen / Vorteile
----------------------------------------------------- */
.va-section{ padding:110px 0 70px; }
.va-section.tight{ padding-top:70px; }
.va-section-head{ text-align:center; max-width:680px; margin:0 auto 56px; }
.va-section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
.va-section-head p{ color:var(--va-text-light); }

.va-perks{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:36px;
	text-align:center;
}
.va-perks .icon{
	width:56px;height:56px;
	margin:0 auto 18px;
	border-radius:50%;
	border:1px solid var(--va-gold);
	color:var(--va-gold);
	display:flex;align-items:center;justify-content:center;
}
.va-perks h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.va-perks p{ font-size:.9rem; color:var(--va-text-light); margin:0; }

/* -----------------------------------------------------
   5. Zimmer
----------------------------------------------------- */
.va-rooms-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:40px;
	flex-wrap:wrap;
	gap:16px;
}
.va-rooms-head h2{ margin-bottom:.2em; }
.va-rooms-head p{ color:var(--va-text-light); margin:0; }

.va-rooms{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:28px;
}
.va-room-card{
	background:var(--va-white);
	border-radius:var(--va-radius);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(20,30,25,.06);
}
.va-room-card .thumb{
	aspect-ratio:4/3;
	background-size:cover;
	background-position:center;
}
.va-room-card .body{ padding:20px 22px 24px; }
.va-room-card .row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.va-room-card h3{ font-size:1.15rem; margin:0; }
.va-room-card .price{ color:var(--va-gold); font-weight:600; font-size:.95rem; white-space:nowrap; }
.va-room-card .meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--va-text-light); }
.va-room-card .meta span{ display:flex; align-items:center; gap:6px; }

/* EasyBooking-Wrapper: sorgt dafür, dass die per Shortcode eingebundenen
   EasyBooking-Widgets (Verfügbarkeitsprüfung / Zimmerliste) sich optisch
   in Karten- bzw. Buchungsleisten-Optik einfügen. Bei Bedarf hier gezielt
   an die tatsächlich ausgegebene Plugin-Markup anpassen. */
.va-booking:has(> :not(form)){ padding:24px 28px; }
.va-rooms-easybooking{
	background:var(--va-white);
	border-radius:var(--va-radius);
	padding:24px;
	box-shadow:0 10px 30px rgba(20,30,25,.06);
}

/* -----------------------------------------------------
   5b. Unterseiten: Galerie, Info-Boxen, Anreise, Karte
----------------------------------------------------- */
.va-gallery{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:16px;
	margin:32px 0;
}
.va-gallery a{
	display:block;
	aspect-ratio:4/3;
	border-radius:var(--va-radius);
	overflow:hidden;
	background-size:cover;
	background-position:center;
	box-shadow:0 6px 18px rgba(20,30,25,.08);
	transition:transform .2s ease;
}
.va-gallery a:hover{ transform:scale(1.02); }

.va-info-box{
	background:var(--va-white);
	border-left:4px solid var(--va-gold);
	border-radius:var(--va-radius);
	padding:24px 28px;
	margin:28px 0;
	box-shadow:0 6px 18px rgba(20,30,25,.05);
}
.va-info-box h3{ font-size:1.1rem; margin-bottom:10px; }
.va-info-box p{ color:var(--va-text-light); font-size:.92rem; margin:0 0 8px; }
.va-info-box p:last-child{ margin-bottom:0; }

.va-directions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:28px;
	margin:32px 0;
}
.va-directions .box{
	background:var(--va-white);
	border-radius:var(--va-radius);
	padding:24px 28px;
	box-shadow:0 6px 18px rgba(20,30,25,.05);
}
.va-directions h3{ display:flex; align-items:center; gap:10px; font-size:1.05rem; margin-bottom:12px; color:var(--va-gold); }
.va-directions p{ color:var(--va-text-light); font-size:.92rem; }

.va-map{
	border-radius:var(--va-radius);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(20,30,25,.08);
	margin:32px 0;
}
.va-map iframe{ display:block; width:100%; height:380px; border:0; }

.va-highlights{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px;
	margin:32px 0;
}
.va-highlights .card{
	background:var(--va-white);
	border-radius:var(--va-radius);
	overflow:hidden;
	box-shadow:0 6px 18px rgba(20,30,25,.06);
}
.va-highlights .card .icon-head{
	background:var(--va-dark);
	color:var(--va-gold-light);
	padding:20px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.va-highlights .card .body{ padding:18px 20px; }
.va-highlights .card h3{ font-size:1rem; margin-bottom:6px; }
.va-highlights .card p{ font-size:.88rem; color:var(--va-text-light); margin:0; }

/* Karten mit Foto: Bild links, Symbol/Text unverändert rechts daneben.
   Kartengröße/-abstand (Grid-Gap oben) bleibt für alle Karten gleich. */
.va-highlights .card.has-photo{
	display:flex;
	flex-direction:row;
	align-items:stretch;
}
.va-highlights .card.has-photo .photo{
	width:38%;
	flex-shrink:0;
	background-size:cover;
	background-position:center;
}
.va-highlights .card.has-photo .content{
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
}
.va-highlights .card.has-photo .icon-head{ padding:14px; }
.va-highlights .card .credit{
	margin-top:8px !important;
	font-size:.72rem !important;
	color:#b7bdb8 !important;
}
.va-highlights .card .credit a{ color:#b7bdb8; text-decoration:underline; }
.va-highlights .card .credit a:hover{ color:var(--va-gold); }

@media (max-width:640px){
	.va-highlights .card.has-photo{ flex-direction:column; }
	.va-highlights .card.has-photo .photo{ width:100%; height:140px; }
}

@media (max-width:900px){
	.va-gallery{ grid-template-columns:repeat(2, 1fr); }
	.va-directions{ grid-template-columns:1fr; }
	.va-highlights{ grid-template-columns:1fr; }
}

/* -----------------------------------------------------
   6. Dresden entdecken + Bewertungen
----------------------------------------------------- */
.va-split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:28px;
}
.va-discover{
	background:var(--va-white);
	border-radius:var(--va-radius);
	overflow:hidden;
	display:grid;
	grid-template-columns:220px 1fr;
	box-shadow:0 10px 30px rgba(20,30,25,.06);
}
.va-discover .img{ background-size:cover; background-position:center; }
.va-discover .content{ padding:28px; display:flex; flex-direction:column; justify-content:center; }
.va-discover p{ color:var(--va-text-light); font-size:.92rem; }

.va-reviews{
	background:var(--va-white);
	border-radius:var(--va-radius);
	padding:28px;
	box-shadow:0 10px 30px rgba(20,30,25,.06);
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}
.va-reviews .score{ display:flex; flex-direction:column; gap:4px; }
.va-reviews .score .num{ font-family:"Playfair Display",serif; font-size:2.4rem; color:var(--va-dark); }
.va-reviews .score .num small{ font-size:1rem; color:var(--va-text-light); }
.va-reviews .stars{ color:var(--va-gold); font-size:1.1rem; letter-spacing:2px; }
.va-reviews .source{ font-size:.8rem; color:var(--va-text-light); }
.va-reviews .source a{ color:var(--va-gold); text-decoration:underline; }
.va-reviews .source a:hover{ color:var(--va-dark); }
.va-reviews blockquote{ margin:0; font-style:italic; font-size:.92rem; color:var(--va-text); }
.va-reviews cite{ display:block; margin-top:10px; font-style:normal; font-size:.8rem; color:var(--va-text-light); }

/* Rotierendes Gäste-Zitat-Karussell */
.va-review-carousel{ position:relative; display:flex; flex-direction:column; min-height:120px; }
.va-review-carousel .slide{
	display:none;
	opacity:0;
	animation:va-fade .5s ease forwards;
}
.va-review-carousel .slide.is-active{ display:block; opacity:1; }
@keyframes va-fade{ from{ opacity:0; } to{ opacity:1; } }
.va-review-carousel .dots{
	display:flex;
	gap:8px;
	margin-top:18px;
}
.va-review-carousel .dot{
	width:8px;
	height:8px;
	border-radius:50%;
	border:1px solid var(--va-gold);
	background:transparent;
	padding:0;
	cursor:pointer;
	transition:background .2s ease;
}
.va-review-carousel .dot.is-active{ background:var(--va-gold); }

/* -----------------------------------------------------
   7. Feature-Leiste
----------------------------------------------------- */
.va-featurebar{
	background:var(--va-dark);
	color:#dfe6e2;
	padding:44px 0;
}
.va-featurebar .container{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
}
.va-featurebar .item{ display:flex; gap:14px; align-items:flex-start; }
.va-featurebar .icon{ color:var(--va-gold-light); flex-shrink:0; margin-top:2px; }
.va-featurebar strong{ display:block; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; color:var(--va-white); }
.va-featurebar span{ font-size:.82rem; color:#b9c2bd; }

/* -----------------------------------------------------
   8. CTA-Leiste
----------------------------------------------------- */
.va-cta{
	background:var(--va-gold);
	color:var(--va-dark);
	padding:26px 0;
}
.va-cta .container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:16px;
}
.va-cta p{ margin:0; font-family:"Playfair Display",serif; font-size:1.2rem; }
.va-cta .btn{ background:var(--va-dark); border-color:var(--va-dark); color:var(--va-white); }
.va-cta .btn:hover{ background:transparent; color:var(--va-dark); }

/* -----------------------------------------------------
   9. Footer
----------------------------------------------------- */
.va-footer{
	background:#152019;
	color:#a9b3ad;
	padding:60px 0 24px;
	font-size:.88rem;
}
/* Fußbereich als kompakter, mittig zentrierter Block statt volle
   Seitenbreite – schmaler als die restlichen Sektionen (var(--va-max)),
   dadurch bleibt links/rechts sichtbar Freiraum. */
.va-footer .container{
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	gap:32px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:36px;
	max-width:860px;
}
.va-footer-bottom.container{ max-width:860px; }
.va-footer h4{ color:var(--va-white); font-size:1rem; margin-bottom:16px; }
.va-footer .name{ font-family:"Playfair Display",serif; color:var(--va-white); font-size:1.3rem; margin-bottom:12px; }
.va-footer ul li{ margin-bottom:10px; }
.va-footer a:hover{ color:var(--va-gold-light); }
.va-footer-bottom{
	border-top:1px solid #263229;
	padding-top:20px;
	text-align:center;
	font-size:.78rem;
	color:#77827c;
}

/* -----------------------------------------------------
   10. Responsive
   Drei Stufen: Tablet-Querformat (<=1024px), Tablet-Hochformat/
   Nav-Umschaltung (<=900px), Smartphone (<=640px).
----------------------------------------------------- */
@media (max-width: 1024px){
	.va-perks{ grid-template-columns:repeat(2,1fr); }
	.va-rooms{ grid-template-columns:repeat(2,1fr); }
	.va-split{ grid-template-columns:1fr; }
	.va-featurebar .container{ grid-template-columns:repeat(2,1fr); }
	.va-footer .container{ grid-template-columns:1fr 1fr; }
	.va-discover{ grid-template-columns:1fr; }
	.va-discover .img{ height:200px; }
	.va-reviews{ grid-template-columns:1fr; gap:28px; }
	.va-section{ padding:80px 0 56px; }
}

/* Ab hier klappt die Navigation zum Hamburger-Menü um (Tablets im
   Hochformat haben oft nicht genug Platz für die volle Menüleiste). */
@media (max-width: 900px){
	.va-topbar-left{ display:none; }
	.va-header .container{ flex-wrap:wrap; row-gap:12px; }
	.va-nav ul{
		position:absolute; top:100%; left:0; right:0;
		background:var(--va-white);
		flex-direction:column;
		gap:4px;
		padding:16px 24px;
		display:none;
		border-bottom:1px solid #eee;
		box-shadow:0 16px 28px rgba(20,30,25,.1);
		z-index:20;
	}
	.va-nav ul li{ padding:10px 0; border-bottom:1px solid #f2f2ee; }
	.va-nav ul li:last-child{ border-bottom:0; }
	.va-nav.open ul{ display:flex; }
	.va-menu-toggle{ display:block; }
	.va-nav{ position:relative; width:auto; justify-content:flex-end; }
}

@media (max-width: 640px){
	.va-perks{ grid-template-columns:1fr; }
	.va-rooms{ grid-template-columns:1fr; }
	.va-featurebar .container{ grid-template-columns:1fr; gap:20px; }
	.va-footer .container{ grid-template-columns:1fr; gap:28px; }
	.va-hero h1{ font-size:1.9rem; }
	.va-hero p.lead{ font-size:.95rem; }
	.va-hero-features{ gap:14px 22px; }
	.va-hero-features li{ font-size:.85rem; }
	.va-cta .container{ flex-direction:column; align-items:flex-start; text-align:left; }
	.va-header .btn{ padding:10px 16px; font-size:.75rem; }
	.va-booking{ margin-bottom:-30px; padding:20px; }
	.va-booking .field{ min-width:100%; }
}

/* -----------------------------------------------------
   Einwilligungsbanner & Platzhalter für externe Inhalte
------------------------------------------------------ */
.va-consent[hidden]{ display:none; }
.va-consent{
	position:fixed; inset:0; z-index:99999;
	display:flex; align-items:flex-end; justify-content:center;
	background:rgba(15,25,20,.55); padding:16px;
}
.va-consent-box{
	background:#fff; color:var(--va-text, #333); max-width:640px; width:100%;
	border-radius:var(--va-radius, 8px); padding:24px 28px;
	box-shadow:0 20px 60px rgba(0,0,0,.35); max-height:92vh; overflow:auto;
}
.va-consent-box h2{ margin:0 0 10px; font-size:1.3rem; }
.va-consent-box p{ margin:0 0 12px; font-size:.92rem; line-height:1.55; }
.va-consent-row{ display:flex; gap:10px; align-items:flex-start; margin:0 0 10px; font-size:.88rem; cursor:pointer; }
.va-consent-row input{ margin-top:3px; width:18px; height:18px; flex-shrink:0; }
.va-consent-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 8px; }
.va-consent-actions .btn{ flex:1 1 150px; text-align:center; cursor:pointer; }
.va-consent-actions .va-consent-reject,
.va-consent-actions .va-consent-all,
.va-consent-actions .va-consent-save{ background:var(--va-dark, #1d2b24); color:#fff; border:2px solid var(--va-dark, #1d2b24); }
.va-consent-actions .va-consent-settings{ background:#fff; color:var(--va-dark, #1d2b24); border:2px solid var(--va-dark, #1d2b24); }
.va-consent-links{ font-size:.8rem !important; margin:6px 0 0 !important; }
.va-consent-links a{ color:inherit; }
body.va-consent-open{ overflow:hidden; }

.va-embed-ph{
	background:var(--va-cream-2, #f3efe6); border:1px dashed #c9c2b0; border-radius:var(--va-radius, 8px);
	padding:28px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.va-embed-ph p{ margin:0 0 12px; font-size:.9rem; max-width:480px; }
.va-embed-ph .small{ font-size:.78rem; margin:0; }
.va-embed-ph .btn{ cursor:pointer; }
.va-map .va-embed-ph{ min-height:380px; border-radius:0; }
.va-embed.is-loaded .va-embed-ph{ display:none; }
.va-eb-ph{ background:rgba(255,255,255,.92); }
@media (max-width:640px){
	.va-consent{ padding:0; }
	.va-consent-box{ border-radius:12px 12px 0 0; padding:20px; }
}

/* Dresden-Guides (PDF + QR-Code) */
.va-guides{ margin:56px 0 40px; }
.va-guides h2{ text-align:center; margin:0 0 10px; }
.va-guides .intro{ text-align:center; max-width:640px; margin:0 auto 28px; color:var(--va-text-light); }
.va-guide-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.va-guide-card{ background:var(--va-white); border-radius:var(--va-radius); box-shadow:0 8px 24px rgba(20,30,25,.07); padding:24px 26px; border-top:3px solid var(--va-gold); }
.va-guide-card h3{ margin:0 0 14px; font-size:1.2rem; }
.va-guide-card ul{ list-style:none; margin:0; padding:0; }
.va-guide-card li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #ece6d8; }
.va-guide-card li:first-child{ border-top:0; }
.va-guide-card .d{ font-weight:500; }
.va-guide-card .a{ display:flex; gap:8px; }
.va-guide-card .btn-dl,
.va-guide-card .btn-qr{ font:inherit; font-size:.8rem; letter-spacing:.06em; padding:8px 14px; border-radius:4px; border:2px solid var(--va-dark); cursor:pointer; text-decoration:none; line-height:1.2; }
.va-guide-card .btn-dl{ background:var(--va-dark); color:#fff; }
.va-guide-card .btn-qr{ background:#fff; color:var(--va-dark); }
.va-guide-card .btn-dl:hover,
.va-guide-card .btn-qr:hover{ background:var(--va-gold); border-color:var(--va-gold); color:#fff; }

.va-qr-modal[hidden]{ display:none; }
.va-qr-modal{ position:fixed; inset:0; z-index:99998; background:rgba(15,25,20,.65); display:flex; align-items:center; justify-content:center; padding:16px; }
.va-qr-box{ position:relative; background:#fff; border-radius:12px; padding:28px 26px 24px; width:min(360px,100%); text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.va-qr-box .x{ position:absolute; top:6px; right:10px; background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--va-dark); }
.va-qr-box .t{ margin:0 0 14px; font-size:1.05rem; padding:0 20px; }
.va-qr-box .code svg{ width:100%; height:auto; max-width:260px; display:block; margin:0 auto; }
.va-qr-box .hint{ margin:12px 0 14px; font-size:.88rem; color:var(--va-text-light); }
.va-qr-box .dl{ display:inline-block; background:var(--va-dark); color:#fff; padding:10px 18px; border-radius:4px; text-decoration:none; font-size:.9rem; }
body.va-qr-open{ overflow:hidden; }
@media print{ .va-qr-modal{ display:none !important; } }
.va-guides .va-guide-group{
	display:flex; align-items:center; gap:16px;
	margin:38px 0 18px; font-size:1.45rem; text-align:left;
}
.va-guides .va-guide-group::before{ content:""; width:36px; height:2px; background:var(--va-gold); }
.va-guides .va-guide-group::after{ content:""; flex:1; height:1px; background:#ddd5c3; }

/* Guides: Wetter-Motive in den weißen Karten */
.va-guide-grid.theme-sun .va-guide-card,
.va-guide-grid.theme-rain .va-guide-card{ position:relative; overflow:hidden; isolation:isolate; }
.va-guide-grid.theme-sun .va-guide-card > *,
.va-guide-grid.theme-rain .va-guide-card > *{ position:relative; z-index:1; }
.va-guide-grid.theme-sun .va-guide-card::before,
.va-guide-grid.theme-rain .va-guide-card::before{ content:""; position:absolute; z-index:0; pointer-events:none; }

.va-guide-grid.theme-sun .va-guide-card{ background:linear-gradient(135deg,#fffaf0 0%,#ffffff 55%); }
.va-guide-grid.theme-sun .va-guide-card::before{
	top:-46px; right:-46px; width:190px; height:190px; opacity:.55;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke='%23e8b84a' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M60 4v16M60 100v16M4 60h16M100 60h16M20 20l11 11M89 89l11 11M100 20L89 31M31 89L20 100'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='26' fill='%23f6c453'/%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%23e8b84a' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
	animation:va-sun-spin 90s linear infinite;
}
.va-guide-grid.theme-sun .va-guide-card::after{
	content:""; position:absolute; z-index:0; pointer-events:none; top:-90px; right:-90px; width:260px; height:260px;
	background:radial-gradient(circle,rgba(246,196,83,.28) 0%,rgba(246,196,83,0) 65%);
}
@keyframes va-sun-spin{ to{ transform:rotate(360deg); } }

.va-guide-grid.theme-rain .va-guide-card{ background:linear-gradient(180deg,#f3f7fb 0%,#ffffff 70%); }
.va-guide-grid.theme-rain .va-guide-card::before{
	inset:0; opacity:.38;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='110' viewBox='0 0 90 110'%3E%3Cg fill='%237fa8cc'%3E%3Cpath d='M18 6c4 8 6 12 3 15a5 5 0 0 1-8 0c-2-3 0-7 5-15z' transform='rotate(14 18 18)'/%3E%3Cpath d='M64 30c3 7 5 10 2.5 12.5a4.2 4.2 0 0 1-6.6 0c-1.7-2.5 0-6 4.1-12.5z' transform='rotate(14 64 40)'/%3E%3Cpath d='M38 66c4 8 6 12 3 15a5 5 0 0 1-8 0c-2-3 0-7 5-15z' transform='rotate(14 38 78)'/%3E%3Cpath d='M78 84c3 7 5 10 2.5 12.5a4.2 4.2 0 0 1-6.6 0c-1.7-2.5 0-6 4.1-12.5z' transform='rotate(14 78 94)'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 110px repeat;
	animation:va-rain-fall 7s linear infinite;
}
@keyframes va-rain-fall{ to{ background-position:-18px 110px; } }
@media (prefers-reduced-motion:reduce){
	.va-guide-grid.theme-sun .va-guide-card::before,
	.va-guide-grid.theme-rain .va-guide-card::before{ animation:none; }
}

/* Guides: Weihnachtsmotiv (Nachthimmel, Frauenkirche, Schnee) */
.va-guide-grid.theme-xmas .va-guide-card{
	position:relative; overflow:hidden; isolation:isolate; border-top-color:#e8c27a;
	background:#0c2150 url("assets/images/weihnachten-dresden.jpg") center/cover no-repeat;
	color:#fff;
}
.va-guide-grid.theme-xmas .va-guide-card > *{ position:relative; z-index:2; }
.va-guide-grid.theme-xmas .va-guide-card::before{
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:linear-gradient(90deg,rgba(5,12,34,.74) 0%,rgba(5,12,34,.42) 55%,rgba(5,12,34,.1) 100%);
}
.va-guide-grid.theme-xmas .va-guide-card::after{
	content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.8;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='14' r='2'/%3E%3Ccircle cx='96' cy='48' r='1.5'/%3E%3Ccircle cx='140' cy='20' r='2.2'/%3E%3Ccircle cx='60' cy='92' r='1.8'/%3E%3Ccircle cx='128' cy='110' r='2'/%3E%3Ccircle cx='30' cy='138' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px repeat;
	animation:va-snow 14s linear infinite;
}
@keyframes va-snow{ to{ background-position:-24px 160px; } }
.va-guide-grid.theme-xmas .va-guide-card h3{ color:#f5d58a; }
.va-guide-grid.theme-xmas .va-guide-card li{ border-top-color:rgba(255,255,255,.2); }
.va-guide-grid.theme-xmas .va-guide-card .d{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.va-guide-grid.theme-xmas .va-guide-card h3{ text-shadow:0 1px 8px rgba(0,0,0,.7); }
.va-guide-grid.theme-xmas .va-guide-card .btn-dl{ background:#e8c27a; border-color:#e8c27a; color:#10224f; }
.va-guide-grid.theme-xmas .va-guide-card .btn-qr{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.85); color:#fff; }
.va-guide-grid.theme-xmas .va-guide-card .btn-dl:hover,
.va-guide-grid.theme-xmas .va-guide-card .btn-qr:hover{ background:#fff; border-color:#fff; color:#10224f; }
@media (prefers-reduced-motion:reduce){ .va-guide-grid.theme-xmas .va-guide-card::after{ animation:none; } }

/* Straßenbahn-Box: Bleistiftskizze als Hintergrund */
.va-info-box.va-info-tram{
	position:relative; overflow:hidden; isolation:isolate;
	background:#fbfaf6 url("assets/images/strassenbahn-skizze.jpg") right center/cover no-repeat;
}
.va-info-box.va-info-tram::before{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(90deg,rgba(251,250,246,.93) 0%,rgba(251,250,246,.78) 45%,rgba(251,250,246,.45) 100%);
}
.va-info-box.va-info-tram > *{ position:relative; z-index:1; }
@media (max-width:700px){
	.va-info-box.va-info-tram::before{ background:rgba(251,250,246,.86); }
}