/* ----------------------------------------------------- */
/* 1. GRUNDLAGEN (Basierend auf Corporate Design) */
/* ----------------------------------------------------- */

:root {
  /* Farben gemäß CI-Manual (Hex-Codes aus CMYK/RGB-Tabelle) */
  --color-petrol: #5a869a; /* Primärfarbe für Logo & Akzente */
  --color-sand: #b5ad98; /* Helle Hintergrundfarbe */
  --color-mocca: #5f4c44; /* Dunkler Text / Footer */
  --color-mandarin: #f6ad59; /* Sekundärfarbe für CTAs (Akzent) */
  --color-rauch: #cbc5b3; /* Hellgrau/Neutral */

  /* Typografie gemäß CI-Manual */
  --font-family-main: "Open Sans", sans-serif; /* Open Sans ist die Unternehmensschrift [cite: 31, 33] */
  --font-weight-regular: 400; /* Open Sans Regular [cite: 34, 43] */
  --font-weight-bold: 700; /* Open Sans Bold [cite: 34, 37, 46] */
}

/* --- FOOTER AM UNTEREN RAND FIXIEREN --- */

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Behalten Sie Ihre anderen body-Styles hier, z.B. font-family */
  font-family: var(--font-family-main);
  color: var(--color-mocca);
  line-height: 1.6;
  background-color: white;
}

main {
  flex-grow: 1; /* Dieses Element dehnt sich aus */
}

/* Globales Reset und Schriftart-Einbindung */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------- */
/* 2. TYPOGRAFIE HIERARCHIE (Für Struktur & Lesbarkeit) */
/* ----------------------------------------------------- */

/* Headline 1: Kernbotschaft über dem Hero-Video */
h1 {
  font-size: 2em;
  font-weight: var(
    --font-weight-bold
  ); /* Bold für Wortmarke/Wichtige Titel [cite: 37] */
  margin-bottom: 0.5em;
  color: white; /* Über dem Video muss es weiß sein */
}
/* Wählt alle <dt> (Begriffe) aus */
dt {
  font-weight: bold;
  color: #333;
}

/* Wählt alle <dd> (Beschreibungen) aus */
dd {
  margin-left: 0; /* SEHR WICHTIG: Die Standard-Einrückung des Browsers entfernen */
  color: #666;
  margin-bottom: 1rem; /* Fügt Abstand zwischen den einzelnen Beschreibungen hinzu */
}

/* ========================================================= */
/* STYLING FÜR DIE KREATIVE GARNI HEADLINE                   */
/* ========================================================= */

/* Container für die gesamte Headline */
.garni-headline {
  text-align: left; /* Zentriert den gesamten Block */
  line-height: 1.15; /* Etwas enger */
  position: relative; /* Wichtig für die Positionierung von 'garni' */
  display: inline-block; /* Verhindert volle Breite, zentriert sich im Parent */
}

/* Styling für "HOTEL" */
.garni-hotel {
  display: block; /* Eigene Zeile */
  font-size: 2em; /* Größe für Mobile (Anpassen) */
  font-weight: var(--font-weight-bold);
  color: var(--color-petrol);
  letter-spacing: 0.05em;
  position: relative; /* Bezugspunkt für 'garni' */
}

/* Styling für "FÄHRHAUS" */
.garni-faehrhaus {
  display: block; /* Eigene Zeile unter HOTEL */
  font-size: 2em; /* GLEICHE Größe wie HOTEL (Anpassen) */
  font-weight: var(--font-weight-bold);
  color: var(--color-petrol);
  letter-spacing: 0.05em;
  margin-top: -0.1em; /* Etwas näher an HOTEL (Anpassen) */
}

/* Styling für das gedrehte "garni" (Cross-Browser Fix V4) */
.garni-rotated {
  display: inline-block;
  position: absolute;

  /* == HORIZONTALE POSITION ANPASSEN == */
  /* Positioniert den Drehpunkt (unten links) am rechten Rand von HOTEL */
  left: 100%;
  /* Kleiner negativer Margin, um es leicht nach links zu ziehen, 
       damit die Kante von 'garni' an HOTEL andockt */
  margin-left: -8.3em; /* <-- ANPASSEN (-0.1em, -0.3em...) */

  /* == VERTIKALE POSITION ANPASSEN == */
  /* Richtet die Unterkante von 'garni' (vor Drehung) an der Unterkante von HOTEL aus */
  bottom: 12.65em; /* <-- ANPASSEN (0em, 0.2em...) */

  /* Drehung und Ursprung an der unteren linken Ecke */
  transform: rotate(-90deg);
  transform-origin: bottom left;

  /* Schrift und Farbe */
  font-size: 0.5em; /* Relative Größe (Anpassen!) */
  font-weight: var(--font-weight-bold); /* Oder Regular */
  color: var(--color-mandarin);
  text-transform: lowercase;
  letter-spacing: 0.1em; /* Höhe anpassen */

  /* Sicherstellen, dass keine anderen Margins stören */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0; /* Wird durch 'bottom' gesteuert */
}

/* === MEDIA QUERIES ANPASSEN === */
/* Da sich Schriftgrößen ändern, müssen auch die relativen Werte angepasst werden */

@media (min-width: 768px) {
  .garni-hotel,
  .garni-faehrhaus {
    font-size: 4em; /* Größer auf Desktop */
  }
  .garni-rotated {
    font-size: 1em; /* Auch größer */
    /* NEU: Überschreibe Margins/Bottom für Desktop */
    /* Passe diese Werte an, bis es auf Desktops passt! */
    margin-left: -8.4em; /* Beispiel-Wert */
    bottom: 9.15em; /* Beispiel-Wert */
  }
}

/* ========================================================= */
/* ROTATING SUBTITLES STYLING                              */
/* ========================================================= */

/* Container für die rotierenden Untertitel */
.subtitle-rotator {
  display: block;
  max-width: 90%;
  margin-top: 1em; /* Abstand zur Haupt-Headline */
  position: relative; /* Wichtig für absolute Positionierung der Kinder */
  height: 3.2em; /* Angepasste Höhe für größere Schrift */
  overflow: hidden; /* Versteckt Untertitel außerhalb */
  /* Die Zentrierung erfolgt durch text-align: center im Parent (.hero-content) */
}

/* Basis-Styling für alle rotierenden Untertitel */
.rotating-subtitle {
  display: block;
  text-align: left;
  font-size: 1.4em; /* Größere Schriftgröße (Basis für Desktop) */
  font-weight: var(--font-weight-bold);
  color: white; /* Fallback */

  /* Positioniert alle Untertitel übereinander */
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0; /* Startet unsichtbar */

  /* Animations-Definition */
  animation-name: fadeInOut;
  animation-duration: 12s; /* Gesamtdauer: 4 Untertitel * 3s pro Phase (Anpassen!) */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; /* Endlosschleife */
}

/* Keyframes für Einblenden, Halten, Ausblenden */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(20px);
  } /* Start: Unsichtbar & unten */
  8% {
    opacity: 1;
    transform: translateY(0);
  } /* Einblenden & nach oben bewegen */
  25% {
    opacity: 1;
    transform: translateY(0);
  } /* Sichtbar halten */
  33% {
    opacity: 0;
    transform: translateY(-20px);
  } /* Ausblenden & nach oben bewegen */
  100% {
    opacity: 0;
  } /* Rest der Zeit unsichtbar */
}

/* Zeitliche Verzögerung für jeden Untertitel */
.subtitle-1 {
  animation-delay: 0s;
}
.subtitle-2 {
  animation-delay: 3s;
} /* Startet nach sichtbarer Phase von 1 (12s * 25%) */
.subtitle-3 {
  animation-delay: 6s;
} /* Startet nach sichtbarer Phase von 2 */
.subtitle-4 {
  animation-delay: 9s;
} /* Startet nach sichtbarer Phase von 3 */

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 767px) {
  .rotating-subtitle {
    font-size: 1.1em; /* Kleinere Schrift auf Mobile */
  }
  .subtitle-rotator {
    height: 2.8em; /* Angepasste Containerhöhe für Mobile */
  }
}

/* ----------------------------------------------------- */
/* 3. CONVERSION & BUTTONS (Mobile First & Umsatz-Fokus) */
/* ----------------------------------------------------- */

/* Standard CTA Button-Styling */
.cta-button {
  display: inline-block;
  padding: 12px 25px;
  background-color: var(--color-mandarin); /* Akzentfarbe für CTAs */
  color: white; /* Dunkle Schrift auf hellem Akzent */
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  transition: background-color 0.3s;
  text-transform: uppercase;
}

.cta-button:hover {
  background-color: #f8c085; /* Eine leicht hellere/dunklere Schattierung von Mandarin */
}

/* Der Sticky CTA Button (siehe HTML-Vorschlag) */
.sticky-cta-button {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  background-color: var(--color-mandarin); /* MUSS die Akzentfarbe sein */
  color: white;
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------- */
/* 4. LAYOUT HELFER (Für Mobile Struktur) */
/* ----------------------------------------------------- */

.container {
  /* Sorgt für seitliche Abstände auf kleinen Bildschirmen */

  /* Diese Zeilen stellen sicher, dass der Container zentriert ist */
  width: 100%;
  max-width: 1200px; /* oder was auch immer Ihre maximale Seitenbreite ist */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box; /* Wichtig, damit padding funktioniert */
  /* Diese Zeilen fügen den seitlichen Rand hinzu */
  padding-left: 1rem; /* z.B. 16px */
  padding-right: 1rem; /* z.B. 16px */
}

/* Mobile-First Grid für Zimmer-Kacheln */
.zimmer-grid {
  display: flex;
  flex-direction: column; /* Standard: Untereinander auf Mobile */
  gap: 20px;
  padding: 20px 0;
}

/* Media Query für Desktop-Layouts */
@media (min-width: 768px) {
  .zimmer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
/* --- 1. HEADER-STYLING --- */

/* ========================================================= */
/* STYLING FÜR HEADER TOP-BAR (KONTAKT)                      */
/* ========================================================= */

.header-top-bar {
  /* Elegante, dunkle CI-Farbe als Hintergrund */
  background-color: var(--color-mocca);
  padding: 8px 0;
  font-size: 0.85em;
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtile Trennlinie */
}

.top-bar-content {
  display: flex;
  justify-content: flex-end; /* Richtet Inhalt rechts aus */
  align-items: center;
  gap: 20px;
  padding: 0; /* Container-Padding (20px) entfernen */
}

.header-top-bar a {
  color: white; /* Helle Schrift auf dunklem Grund */
  text-decoration: none;
  transition: color 0.3s ease;
}

.header-top-bar a:hover {
  color: var(--color-mandarin); /* CI-Akzentfarbe im Hover */
}

/* ========================================================= */
/* STYLING FÜR STICKY NAV-WRAPPER (LOGO + MENÜ)              */
/* ========================================================= */

.main-nav-wrapper {
  /* Erbt den Header-Hintergrund */
  background-color: var(--color-petrol);
  padding: 10px 0;

  /* HIER KOMMEN DIE STICKY-EIGENSCHAFTEN HIN */
  position: sticky;
  top: 0;
  z-index: 900;

  /* Sanfter Schatten, wenn es über Content scrollt */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ========================================================= */
/* RESPONSIVE: TOP-BAR AUF MOBILE AUSBLENDEN                 */
/* ========================================================= */

@media (max-width: 767px) {
  /* Blendet die Kontakt-Leiste auf Mobilgeräten aus,
     um wertvollen Platz zu sparen (Kontakt ist im Menü/Footer) */
  .header-top-bar {
    display: none;
  }
}

.header-flex {
  display: flex;
  justify-content: space-between; /* Logo links, Menü rechts */
  align-items: center;
}

/* --- Logo Styling (CI-Konform) --- */

logo {
  /* Diese Regeln sind nun weniger relevant, da das Bild das Styling übernimmt */
  font-size: 0; /* Textgröße auf 0 setzen, um sicherzustellen, dass kein überflüssiger Text angezeigt wird */
  padding-left: 5%;
  text-decoration: none;
  line-height: 0; /* Verhindert ungewollte Abstände um das Bild */
}

.logo img {
  /* Stellt sicher, dass das Bild auf mobilen Geräten nicht zu groß wird */
  max-width: 100%;
  height: auto;
  display: block;
}

/* Der km-Signet Span kann jetzt komplett entfernt oder geleert werden */
.km-signet {
  display: none;
}

/* Desktop Anpassung */
@media (min-width: 768px) {
  .logo {
    padding-left: 0;
  }
}

#menu-list {
  list-style: none;
  display: none; /* Mobile: Liste standardmäßig ausblenden */
  position: absolute; /* Kann zum Fullscreen-Menü werden */
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--color-petrol);
}

#menu-list.is-open {
  display: block;
}

#menu-list a {
  display: block;
  padding: 15px 5%;
  color: white;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---  GRUNDSTYLING DER BALKEN --- */

.nav-toggle {
  /* Wichtig: Positionierung muss relativ sein, damit die Spans richtig zentriert werden */
  position: relative;
  width: 30px; /* Breite des Icons */
  height: 20px; /* Höhe des Icons */
  padding: 0;
  cursor: pointer;
  /* Entfernt den default Button-Look */
  background: none;
  border: none;
}

.nav-toggle .bar {
  display: block;
  width: 100%;
  height: 3px; /* Dicke der Balken */
  background-color: white;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out; /* Animation für den X-Effekt */
}

/* Positionierung der einzelnen Balken */
.top-bar {
  top: 0;
}
.middle-bar {
  top: 50%;
  transform: translateY(-50%);
}
.bottom-bar {
  bottom: 0;
}

/* --- 2. TRANSFORMATION ZUM "X" (Öffnen-Zustand) --- */

/* Wenn die Klasse 'is-open' gesetzt ist, transformieren wir die Balken: */
#menu-list.is-open + .nav-toggle .top-bar {
  transform: rotate(45deg) translate(5px, 5px); /* Drehen und verschieben für X-Form */
}

#menu-list.is-open + .nav-toggle .middle-bar {
  opacity: 0; /* Mittleren Balken ausblenden */
}

#menu-list.is-open + .nav-toggle .bottom-bar {
  transform: rotate(-45deg) translate(5px, -5px); /* Drehen und verschieben für X-Form */
}

/* WICHTIG: Korrektur der CSS-Regel */
/* Da der Button VOR der Liste im HTML steht, MUSS das CSS so lauten (für den :hover state): */
.main-nav .nav-toggle[aria-expanded="true"] .top-bar {
  transform: rotate(45deg) translate(5px, 5px);
}
.main-nav .nav-toggle[aria-expanded="true"] .middle-bar {
  opacity: 0;
}
.main-nav .nav-toggle[aria-expanded="true"] .bottom-bar {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Desktop Anpassungen */
@media (min-width: 768px) {
  .nav-toggle {
    display: none; /* Hamburger-Icon ausblenden */
  }
  #menu-list {
    position: static;
    display: flex; /* Liste nebeneinander anzeigen */
    width: auto;
  }
  #menu-list li {
    margin-left: 20px;
  }
  #menu-list a {
    border-top: none;
    padding: 0;
  }
  .km-signet {
    display: inline; /* Signet auf Desktop anzeigen */
  }
}

/* --- HERO SECTION STYLING --- */

.hero-section {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  /* 1. Das Video auf Mobilgeräten komplett ausblenden */
  .background-video {
    display: none;
  }

  /* 2. Stattdessen ein Hintergrundbild für die Sektion definieren */
  .hero-section {
    /* Ersetze dies mit dem Pfad zu einem Bild, 
      das gut im Hochformat funktioniert.
    */
    background-image: url("../images/hero-mobil.webp");
    background-size: cover;
    background-position: center center;
  }
}

/* Video Styling */
.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100; /* Legt das Video in den Hintergrund */
  transform: translate(-50%, -50%);
  object-fit: cover; /* Stellt sicher, dass das Video den Container füllt (keine schwarzen Balken) */
}

/* NEU: Das Overlay über dem Video */
.hero-section::before {
  content: ""; /* Erforderlich für Pseudo-Elemente */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Wähle deine Overlay-Farbe und Transparenz */
  /* Option 1: Dunkles Overlay (Standard) */
  /* background-color: rgba(172, 108, 34, 0.3); 40% schwarze Transparenz */

  /* Option 2: CI-Farbe Mocca als Overlay (eleganter) */
  /* background-color: rgba(95, 76, 68, 0.5); /* 50% Mocca Transparenz */

  /* Option 3: CI-Farbe Petrol als Overlay (maritimer) */
  background-color: rgba(90, 134, 154, 0.4); /* 40% Petrol Transparenz */

  z-index: 1; /* Muss ÜBER dem Video (z-index: -100) liegen */
}

.hero-content {
  position: absolute;
  z-index: 10;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  width: 90%;
  max-width: 700px;
  padding: 20px;
}

.hero-content h1 {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ========================================================= */
/* EVIIVO WIDGET STYLING (CI-KONFORM & RESPONSIVE)           */
/* ========================================================= */

/* --- CI & MOBILE FIRST BASIS --- */

/* Der Hauptcontainer der Suchleiste */
.ev-searchbox {
  /* Schriftart-Anpassung: Nutzt die System-Fonts */
  font-family: var(--font-family-main);

  /* Hintergrund: Standardmäßig Weiß für Klarheit */
  background-color: white;

  /* Innenabstand und Schatten */
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Dezenter Schatten */
  width: 100%; /* Wichtig: Mobile volle Breite */

  /* Flex-Container für mobiles Layout */
  display: flex;
  flex-direction: column; /* Mobile: Elemente untereinander stapeln */
  gap: 15px; /* Abstand zwischen den Elementen */
}

/* Formular-Container nutzen Flexbox */
#ev-availabilitySearchResults {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- LAYOUT DER FELDER (MOBILE) --- */

.ev-searchbox .ev-options {
  margin: 0;
  display: block; /* Volle Breite auf Mobile */
  width: 100%;
}

/* Modul für Erwachsene und Kinder */
.mod-options {
  display: flex; /* Erwachsene und Kinder nebeneinander */
  gap: 15px;
  width: 100%;
}
.ev-adults,
.ev-children {
  flex-grow: 1;
}

/* --- TYPOGRAFIE & FORMULARFELDER --- */

.ev-searchbox .ev-label {
  /* Etiketten: Dunkler Text und dicker (Bold) */
  display: block;
  margin: 0 0 5px 0;
  font-size: 0.9em;
  font-weight: var(--font-weight-bold);
  color: var(--color-mocca);
}

.ev-searchbox .ev-input,
.ev-searchbox .ev-select {
  /* Eingabefelder: Sauberes Design */
  font-size: 1em;
  padding: 12px; /* Größeres Padding für bessere mobile Bedienung */
  width: 100%;
  border: 1px solid var(--color-rauch); /* Helle, neutrale Ränder */
  border-radius: 4px;
}

/* --- BUCHUNGS-BUTTON (WICHTIGSTE ANPASSUNG: AKZENTFARBE MANDARIN) --- */

.ev-searchbox .ev-button {
  background-color: var(--color-mandarin);
  color: white; /* Dunkle Schrift auf hellem Akzent */
  padding: 12px;
  font-size: 1.1em;
  font-weight: var(--font-weight-bold);
  margin-top: 10px;
  border-radius: 4px;
  width: 100%; /* Volle Breite auf Mobile */
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.ev-searchbox .ev-button:hover {
  background-color: #f8c085; /* Leicht hellerer Ton bei Hover */
}

/* --- FEHLER & HINWEISE --- */

.ev-searchbox .ev-invalid {
  /* Fehlerhafte Felder: Roter Rand */
  border: 2px solid rgb(255, 0, 0);
}

.ev-searchbox .s-ev-num-nights {
  /* Anzahl Nächte: CI-Petrol-Farbe */
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  color: var(--color-petrol);
  text-align: center;
  margin-top: 10px;
}

/* Anpassung des jQuery UI Kalender-Headers an CI */
.ui-widget-header {
  background: var(--color-petrol) !important;
  border: 1px solid var(--color-petrol) !important;
  color: white !important;
}

/* --- DESKTOP ANPASSUNG (Horizontal Layout ab 600px) --- */

@media (min-width: 600px) {
  #ev-availabilitySearchResults {
    flex-direction: row; /* Felder nebeneinander */
    align-items: flex-end;
  }
  .ev-searchbox .ev-options {
    /* Standardmäßig 4 Spalten auf Desktop */
    flex: 1 1 20%;
  }
  /* Button nimmt nur den Platz ein, den er braucht */
  .ev-searchbox .ev-button {
    width: auto;
    flex: 0 0 auto;
  }
}

/* --- BILDDARSTELLUNG IN DER USP SEKTION --- */

.usp-section {
  padding: 40px 0; /* Standard-Abstand für alle USP-Sektionen */
}
/* Dann die spezifische Regel für den Hintergrund */
.usp-lage {
  background-color: var(--color-sand);
}

.content-flex {
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  gap: 2rem; /* Der Abstand zwischen Bild und Text */
  flex-wrap: wrap;
}

/* Dieser Teil ist für die mobile Ansicht */
@media (max-width: 768px) {
  .content-flex {
    flex-direction: column; /* Stapelt Bild und Text untereinander */
  }
}

.usp-image {
  /* Mobile-First: Bild nimmt die gesamte verfügbare Breite ein */
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 20px 0;
}

/* Desktop-Anpassung (Bild im Flex-Layout) */
@media (min-width: 768px) {
  .content-flex {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 40px;
  }

  .content-flex > img,
  .content-flex > .usp-text-block {
    /* * Sag beiden Elementen: "Versucht 400px breit zu sein."
   * Wenn nicht genug Platz für 2x 400px ist, wird umgebrochen.
   */
    flex-basis: 400px;

    /* Sag beiden Elementen: "Wachst, um den übrigen Platz zu füllen." */
    flex-grow: 1;
  }

  /* Dies stellt sicher, dass das Bild seinen Container auch füllt */
  .content-flex > img {
    width: 100%;
    max-width: 100%; /* Verhindert, dass es überläuft */
    height: auto; /* Behält das Seitenverhältnis bei */
    display: block;
  }

  .usp-image {
    /* Das Bild nimmt 50% des Flex-Containers ein */
    flex: 1 1 50%;
    margin: 0;
    /* Positioniert das Bild auf der rechten Seite, wie geplant */
    order: 2;

    /* Setzt eine maximale Höhe, damit das Bild nicht zu riesig wird */
    max-height: 400px;
    object-fit: cover; /* Stellt sicher, dass das Bild den Container füllt, ohne verzerrt zu werden */
  }

  .usp-text-block {
    /* Der Text nimmt die anderen 50% ein */
    flex: 1 1 50%;
    order: 1;
    text-align: left; /* Stellt sicher, dass Text/Listen immer linksbündig sind */
  }
}

.usp-target-grid {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Dieser Wert steuert den Abstand */
}

/* --- ZUSÄTZLICHES STYLING FÜR LAGE/KOMFORT --- */

.usp-text-block ul {
  list-style: none; /* Definiert als Standard: Entfernt die Standard-Bullets */
  padding-left: 0; /* Entfernt den Standard-Einzug (links) */
  margin: 15px 0;
}

.usp-text-block ul li {
  padding: 5px 0;
  color: var(--color-mocca);
  font-weight: var(--font-weight-regular);

  /* Beibehaltung der CI-konformen Petrol-Kreise (Pseudo-Element) */
  position: relative;
  padding-left: 20px;
}

/* Zentriert den Button innerhalb des linksbündigen Textblocks */
.usp-text-block .cta-button {
  display: block; /* Macht den Button zu einem Block-Element */
  width: fit-content; /* Button ist nur so breit wie sein Inhalt */

  /* Der Trick zum Zentrieren: 
       Setzt den oberen Abstand auf 20px, unten auf 0, 
       und links/rechts auf 'auto' (zentriert) */
  margin: 20px auto 0;
}

/* (Optional) Styling für den sekundären Button (falls noch nicht definiert) */
.cta-secondary {
  background-color: #50788a; /* CI-Farbe Petrol */
  color: white;
}
.cta-secondary:hover {
  background-color: #4a768a; /* Dunklerer Petrol-Ton */
}

/* --- ZIMMER-KACHELN STYLING (MIT BILD-CONTAINER) --- */

.zimmer-card {
  border: 1px solid var(--color-rauch);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex; /* Stellt sicher, dass Kachel-Inhalt korrekt fließt */
  flex-direction: column;
}

/* 1. Der neue Bild-Container (Aspect Ratio 16:9) */
.zimmer-image-container {
  position: relative;
  width: 100%;
  /* Dies erzwingt ein 16:9 Seitenverhältnis (9 / 16 = 0.5625) */
  padding-top: 56.25%;
  overflow: hidden;
}

/* 2. Das Bild innerhalb des Containers */
.zimmer-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Stellt sicher, dass das Bild den Container füllt, auch wenn es beschnitten wird */
  object-fit: cover;
  display: block;
}

/* 3. Der Text-Container */
.zimmer-card-content {
  padding: 20px;
  text-align: left;
  /* Stellt sicher, dass alle Text-Container gleich hoch wachsen */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Button wird nach unten gedrückt */
}

.zimmer-card h3 {
  color: var(--color-mocca);
  margin-top: 0;
}

.zimmer-card p {
  padding: 0; /* Padding wird jetzt vom .zimmer-card-content übernommen */
  margin-bottom: 15px;
  font-size: 0.95em;
  min-height: 4em;
  flex-grow: 1; /* Stellt sicher, dass der Text den Platz füllt */
}

/* --- FOOTER STYLING (Basierend auf CI Mocca) --- */

.main-footer {
  background-color: var(--color-mocca); /* Dunkle Farbe */
  color: white; /* Helle Schriftfarbe */
  padding: 40px 0;
  font-size: 0.9em;
}

.main-footer .container {
  display: flex;
  flex-direction: column; /* Mobile: Alles untereinander */
  gap: 30px; /* Abstand zwischen den Blöcken */
  text-align: center;
}

.main-footer p {
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Links im Footer (CI-Farbe Mandarin) */
.main-footer a {
  color: white; /* Akzentfarbe für Links */
  text-decoration: underline;
  transition: color 0.3s;
}

.main-footer a:hover {
  color: var(--color-mandarin); /* Hellerer Hover-Effekt */
  text-decoration: none;
}

/* Desktop-Anpassung: Layout nebeneinander */
@media (min-width: 768px) {
  .main-footer .container {
    flex-direction: row; /* Desktop: Elemente in einer Reihe */
    justify-content: space-between;
    text-align: left;
  }

  .footer-block {
    flex: 1; /* Sorgt dafür, dass alle Blöcke gleich viel Platz einnehmen */
  }
}

/* ========================================================= */
/* STYLING FÜR RECHTLICHE SEITEN (Impressum, Datenschutz)     */
/* ========================================================= */

.legal-content-section {
  padding: 40px 0;
  line-height: 1.7; /* Bessere Lesbarkeit für lange Texte */
}

.legal-content-section h2 {
  /* Nutzt das H2-Styling, das wir bereits definiert haben */
  color: var(--color-petrol);
  text-align: left; /* Überschreibt ggf. Zentrierung */
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-rauch);
  padding-bottom: 10px;
}

.legal-content-section p {
  margin-bottom: 1.5em; /* Abstand zwischen Absätzen */
}

.legal-content-section a {
  /* Stellt sicher, dass Links im Text CI-konform sind */
  color: var(--color-petrol);
  text-decoration: underline;
}

.legal-content-section a:hover {
  color: var(--color-mandarin);
}

.legal-content-section strong {
  color: var(--color-mandarin);
}

/* ========================================================= */
/* STYLING FÜR LAGE & ANFAHRT SEITE (2-Spalten-Layout)        */
/* ========================================================= */

.location-content-section {
  padding: 40px 0;
}

.location-content-section h1 {
  color: var(--color-petrol);
  text-align: left;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-rauch);
  padding-bottom: 10px;
}

.location-content-section .intro-text {
  font-size: 1.1em;
  margin-bottom: 30px;
}

.location-flex-container {
  display: flex;
  flex-direction: column; /* Mobile: Untereinander */
  gap: 30px;
}

/* Überschriften in beiden Spalten (Text & Karte) */
.location-details h3,
.location-map-column h3 {
  color: var(--color-mocca);
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Der responsive 16:9 iframe-Container */
.location-map {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspekt */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-rauch);
}

.location-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Desktop-Anpassung: 2 Spalten Layout (50/50) */
@media (min-width: 768px) {
  .location-flex-container {
    flex-direction: row; /* Desktop: Nebeneinander */
  }

  /* Spalte 1: Text (Links, 50% Breite) */
  .location-details {
    flex: 1 1 50%; /* 50% Breite */
    order: 1; /* Links */
  }

  /* Spalte 2: Karte (Rechts, 50% Breite) */
  .location-map-column {
    flex: 1 1 50%; /* 50% Breite */
    order: 2; /* Rechts */
  }

  /* DIESE REGEL IST ENTSCHEIDEND FÜR DIE AUSRICHTUNG:
    Sie sorgt dafür, dass die H3 ("Karte") den gleichen
    oberen Abstand hat wie die H3 ("Anschrift").
  */
  .location-map-column h3 {
    margin-top: 20px;
  }
}

/* ========================================================= */
/* STYLING FÜR KONTAKT SEITE                                 */
/* ========================================================= */

.contact-content-section {
  padding: 40px 0;
}

.contact-content-section h2 {
  color: var(--color-petrol);
  text-align: left;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-rauch);
  padding-bottom: 10px;
}

.contact-content-section .intro-text {
  font-size: 1.1em;
  margin-bottom: 30px;
}

.contact-flex-container {
  display: flex;
  flex-direction: column; /* Mobile: Untereinander */
  gap: 30px;
}

.contact-block {
  padding: 20px;
  border: 1px solid var(--color-rauch);
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-block h3 {
  color: var(--color-mocca);
  margin-top: 0;
  margin-bottom: 15px;
}

/* Styling für Tel/Mail Links */
.contact-highlight {
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}
.contact-highlight a {
  color: var(--color-petrol);
  text-decoration: none;
}
.contact-highlight a:hover {
  color: var(--color-mandarin);
}

/* Desktop-Anpassung: 3 Spalten Layout */
@media (min-width: 768px) {
  .contact-flex-container {
    flex-direction: row; /* Desktop: Nebeneinander */
  }
  .contact-block {
    flex: 1 1 33%; /* 33% Breite */
  }
}

/* ========================================================= */
/* STYLING FÜR GÄSTEBEWERTUNGEN (TESTIMONIALS)             */
/* ========================================================= */

.testimonial-section {
  padding: 40px 0;
  background-color: white; /* Oder eine leichte Hintergrundfarbe wie --color-rauch */
}

.testimonial-section h2 {
  /* Nutzt das bestehende H2-Styling */
  margin-bottom: 30px;
}

.testimonial-grid {
  display: flex;
  flex-direction: column; /* Mobile: Untereinander */
  gap: 20px;
}

.testimonial-card {
  background-color: #f9f9f9; /* Leichter Hintergrund für die Karte */
  border-left: 5px solid var(--color-petrol); /* CI-Akzent an der Seite */
  padding: 20px;
  border-radius: 8px;
  margin: 0; /* Entfernt Standard-Blockquote-Margin */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.testimonial-card p {
  font-style: italic;
  margin-bottom: 15px;
  color: var(--color-mocca);
  quotes: "“" "”" "‘" "’"; /* Fügt Anführungszeichen hinzu */
}
.testimonial-card p::before {
  content: open-quote;
  font-size: 1.5em;
  line-height: 0;
  margin-right: 5px;
  vertical-align: -0.3em;
  color: var(--color-petrol);
}
.testimonial-card p::after {
  content: close-quote;
  font-size: 1.5em;
  line-height: 0;
  margin-left: 5px;
  vertical-align: -0.3em;
  color: var(--color-petrol);
}

.testimonial-card footer {
  text-align: right;
}

.testimonial-card cite {
  font-weight: var(--font-weight-bold);
  color: var(--color-mocca);
  font-style: normal;
}

.testimonial-source {
  display: block;
  font-size: 0.9em;
  color: #888;
}

/* Desktop-Anpassung: Nebeneinander */
@media (min-width: 768px) {
  .testimonial-grid {
    flex-direction: row; /* Desktop: Nebeneinander */
  }
  .testimonial-card {
    flex: 1; /* Alle Karten nehmen gleich viel Platz ein */
  }
}

/* ========================================================= */
/* ERGÄNZUNG LAGE & ANFAHRT: RESPONSIVE KARTE                 */
/* ========================================================= */

/* Passt den Container .location-map an, um die
  Karte im 16:9-Format responsiv darzustellen.
  Ergänzt die bestehenden Regeln aus Zeile 848.
*/
.location-map {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspekt */
  height: 0;
  overflow: hidden;
  border-radius: 8px; /* Passt zum Rest des Designs */
  background: var(--color-rauch); /* Lade-Hintergrund (CI-konform) */
}

.location-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ========================================================= */
/* LAGE & ANFAHRT: CTA-BUTTONS (Route/Anruf)                 */
/* ========================================================= */

.location-cta-links {
  margin-top: 25px; /* Abstand nach oben (zur Adresse) */
  margin-bottom: 20px; /* Abstand nach unten (zum nächsten H3) */
  display: flex;
  flex-direction: column; /* Mobile: Buttons untereinander */

  /* HIER IST DAS "PADDING" DAS SIE WOLLTEN: */
  gap: 15px; /* Erzeugt 15px Abstand ZWISCHEN den Buttons */
}

/* Desktop-Anpassung: Buttons nebeneinander */
@media (min-width: 768px) {
  .location-cta-links {
    flex-direction: row; /* Desktop: Nebeneinander */
  }
}

/* ========================================================= */
/* STYLING FÜR LAGE & UMGEBUNG SEITE                          */
/* ========================================================= */

.umgebung-flex-container {
  display: flex;
  flex-direction: column; /* Mobile: Bild unter dem Text */
  gap: 20px;
  margin-bottom: 30px;
  align-items: flex-start; /* Stellt sicher, dass Spalten oben beginnen */
}

.umgebung-text {
  flex: 1 1 50%; /* 50% Breite */
  order: 2; /* Mobile: Text kommt nach dem Bild (falls gewünscht) */
}

.umgebung-text h2,
.umgebung-text h3 {
  color: var(--color-mocca);
  margin-top: 0; /* Entfernt oberen Abstand, da Container Abstand hat */
  margin-bottom: 10px;
}

.umgebung-image {
  flex: 1 1 50%; /* 50% Breite */
  order: 1; /* Mobile: Bild kommt vor dem Text */
}

.umgebung-image img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Passt zum Design */
  display: block;
  object-fit: cover; /* Stellt sicher, dass das Bild gut aussieht */
  max-height: 350px; /* Verhindert riesige Bilder */
}

/* Listen-Styling für Business-Punkte */
.location-content-section ul {
  list-style-type: none; /* Entfernt Standard-Punkte */
  padding-left: 0;
  margin: 20px 0;
}
.location-content-section ul li {
  position: relative;
  padding-left: 25px; /* Platz für das Icon */
  margin-bottom: 10px;
  line-height: 1.5;
}
/* Fügt ein CI-konformes "Häkchen" oder Punkt hinzu */
.location-content-section ul li::before {
  content: "✓"; /* Oder "•" */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-petrol); /* CI-Farbe */
  font-weight: bold;
}

/* Desktop-Anpassung: 2 Spalten Layout */
@media (min-width: 768px) {
  .umgebung-flex-container {
    flex-direction: row; /* Desktop: Nebeneinander */
    gap: 40px;
    align-items: center; /* Zentriert die Spalten vertikal */
  }

  .umgebung-text {
    order: 1; /* Desktop: Text links */
  }

  .umgebung-image {
    order: 2; /* Desktop: Bild rechts */
  }

  /* Diese Klasse dreht die Reihenfolge auf Desktop (Bild links, Text rechts) */
  .umgebung-flex-container.reverse-desktop {
    flex-direction: row;
  }
  .umgebung-flex-container.reverse-desktop .umgebung-text {
    order: 2; /* Text rechts */
  }
  .umgebung-flex-container.reverse-desktop .umgebung-image {
    order: 1; /* Bild links */
  }
}

/* ========================================================= */
/* STYLING FÜR 404 FEHLERSEITE (Konzept: km 404)            */
/* ========================================================= */

.error-page-section {
  padding: 40px 0;
  display: flex;
  flex-direction: column; /* Mobile: Untereinander */
  align-items: center;
  text-align: center;
  gap: 30px;
  min-height: 60vh; /* Sorgt für vertikale Zentrierung */
  justify-content: center;
}

/* Der visuelle "km 404" Block (wie ein Rhein-Schild) */
.error-visual {
  position: relative;
  background-color: var(--color-petrol); /* CI-Farbe Petrol */
  color: white;
  padding: 30px 40px;
  border-radius: 8px;
  min-width: 250px;
  line-height: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Das "km" Label oben im Schild */
.error-km-label {
  display: block;
  font-size: 1.5em;
  font-weight: var(--font-weight-bold);
  color: var(--color-mandarin); /* CI-Akzent Mandarin */
  text-align: left;
  border-bottom: 2px solid var(--color-rauch);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* Die "404" Zahl */
.error-404 {
  font-size: 8em; /* RIESIG */
  font-weight: var(--font-weight-bold);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Der Textblock rechts */
.error-text {
  flex-basis: 50%;
}

.error-text h1 {
  color: var(--color-petrol); /* CI-Farbe Petrol */
  text-align: center;
  border: none;
  margin-bottom: 10px;
}

.error-text .intro-text {
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
  color: var(--color-mocca); /* CI-Textfarbe */
  margin-bottom: 15px;
}

.error-text p {
  margin-bottom: 25px;
  color: var(--color-mocca);
}

/* Desktop-Layout: 2 Spalten */
@media (min-width: 768px) {
  .error-page-section {
    flex-direction: row; /* Desktop: Nebeneinander */
    gap: 50px;
    text-align: left;
  }

  .error-visual {
    flex: 0 0 300px; /* Nimmt 300px Breite ein */
  }

  .error-text {
    flex-basis: 50%; /* Nimmt 50% Breite ein */
  }

  .error-text h1 {
    text-align: left;
    margin-top: 0;
  }
}

/* ========================================================= */
/* STYLING FÜR NEUEN INFO-ABSCHNITT (ZIELGRUPPEN)            */
/* ========================================================= */

/* Definiert den Abstand für die neue Sektion */
.info-section {
  padding: 40px 0;
  background-color: white;
}

/* Stellt sicher, dass H2-Überschriften in dieser Sektion zentriert sind */
.info-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--color-petrol);
}

/* Definiert das Styling für die H3-Überschriften 
  innerhalb der wiederverwendeten .testimonial-card 
*/
.testimonial-card h3 {
  color: var(--color-mocca);
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.3em;
}

/* Passt den Abstand von Absätzen an, 
  die einer H3 folgen (für bessere Lesbarkeit) 
*/
.testimonial-card h3 + p {
  margin-top: 0;
}

/* Sorgt für einen klaren Abstand zwischen den Absätzen in der Karte */
.testimonial-card p {
  margin-bottom: 1em;
}

/* Entfernt kursiven Stil und Anführungszeichen,
   die von .testimonial-card geerbt wurden */
.info-section .testimonial-card p {
  font-style: normal;
}
.info-section .testimonial-card p::before,
.info-section .testimonial-card p::after {
  content: none;
}

/* ========================================================= */
/* MIKROANIMATION FÜR ZIELGRUPPEN-ICONS                      */
/* ========================================================= */

/* 1. Basis-Styling: Animation vorbereiten (sanfter Übergang) */
.usp-icon-container svg {
  fill: var(--color-petrol);
  /* Sorgt dafür, dass die Animation 0.3s dauert und nicht "springt" */
  transition: transform 0.3s ease-out;
}

/* 2. Hover-Effekt: Die eigentliche Animation */
/* Wenn die *Karte* gehovert wird, bewegt sich das SVG */
.usp-target-card:hover .usp-icon-container svg {
  /* Bewegt das Icon 8 Pixel nach rechts */
  transform: translateX(8px);
}

/* ========================================================= */
/* STYLING FÜR FAQ-SEKTION (ACCORDION)                       */
/* ========================================================= */

.faq-section {
  padding: 40px 0;
  background-color: white;
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--color-petrol);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

/* Das einzelne Frage-Element */
.faq-item {
  border: 1px solid var(--color-rauch);
  border-radius: 8px;
  margin-bottom: 15px;
  /* Sanftes Öffnen/Schließen (falls Browser unterstützt) */
  transition: max-height 0.3s ease;
  overflow: hidden; /* Wichtig für die Animation */
}

/* Die klickbare Frage (Summary) */
.faq-question {
  display: block; /* Wichtig, um volles Element zu stylen */
  padding: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-mocca);
  cursor: pointer;
  position: relative; /* Für das + / - Icon */

  /* Standard-Pfeil (Marker) des <details>-Elements entfernen */
  list-style: none; /* Firefox */
}
.faq-question::-webkit-details-marker {
  display: none; /* Chrome/Safari */
}

/* Der Antwort-Container */
.faq-answer {
  padding: 0 20px 20px 20px;
  color: var(--color-mocca);
  line-height: 1.7;
}

.faq-answer p {
  margin: 0;
}

/* --- Dynamisches + / - Icon --- */

/* Das "+"-Icon (geschlossen) */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: 300; /* Dünneres Plus */
  color: var(--color-petrol);
  transition: transform 0.2s ease-in-out;
}

/* Das "-"-Icon (geöffnet) */
.faq-item[open] > .faq-question::after {
  content: "−"; /* Längerer Minus-Strich */
  transform: translateY(-50%) rotate(180deg);
}

/* Optional: Hintergrund-Highlight für geöffnete Frage */
.faq-item[open] {
  background-color: #fcfcfc;
}
.faq-item[open] > .faq-question {
  color: var(--color-petrol);
}
/* ========================================================= */
/* STYLING FÜR TOP-BAR ICONS & KLINGEL-ANIMATION (V2)        */
/* ========================================================= */

/* 1. Die "Klingel" Animation (Schütteln-Pause-Loop) */
@keyframes phone-ring {
  /* Start: Still */
  0% {
    transform: rotate(0);
  }

  /* Shake 1 */
  10% {
    transform: rotate(15deg);
  }
  15% {
    transform: rotate(-15deg);
  }

  /* Shake 2 */
  20% {
    transform: rotate(15deg);
  }
  25% {
    transform: rotate(-15deg);
  }

  /* Shake 3 */
  30% {
    transform: rotate(15deg);
  }
  35% {
    transform: rotate(0);
  } /* Zurück zur Ruheposition */

  /* Pause (von 35% bis 100%) */
  100% {
    transform: rotate(0);
  }
}

/* 2. Styling für die Links in der Top-Bar */
.top-bar-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 3. Styling für alle Icons in der Top-Bar */
.icon-top-bar,
.icon-phone-ring {
  flex-shrink: 0;
  vertical-align: middle;
}

/* 4. Die Animation auf das Telefon-Icon anwenden */
.icon-phone-ring {
  /* Animation: Name, Dauer (z.B. 4s), Timing, Wiederholung 
    Die 4s geben der "Pause" (35%-100%) genügend Zeit.
  */
  animation: phone-ring 4s linear infinite;
  transform-origin: center;
}

/* 5. (Optional) Animation pausieren, wenn man darüber fährt */
.top-bar-link a:hover .icon-phone-ring {
  animation-play-state: paused;
}