/* ----------------------------------------------------- */
/* 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --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;

  /* Ihre anderen body-Styles (diese sind OK): */
  font-family: var(--font-family-main);
  color: var(--color-mocca);
  line-height: 1.6;
  background-color: white;
}

main {
  flex-grow: 1 !important;
}

/* 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 */
}
/* ========================================================= */
/* HERO SECTION STYLING (MOBILE-FIRST)                       */
/* ========================================================= */

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

  /* Mobile-First: Hintergrundbild (Fallback) */
  background-image: url("../images/hero-mobil.webp");
  background-size: cover;
  background-position: center center;
}

/* Overlay (liegt über Bild ODER Video) */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(90, 134, 154, 0.4); /* Petrol-Overlay */
  z-index: 1;
}

/* Video-Styling (Standard = Versteckt) */
.background-video {
  display: none; /* Auf Mobile versteckt */

  /* Desktop-Positionierung (wird unten aktiviert) */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -100;
  transform: translate(-50%, -50%);
  object-fit: cover;

  /* * === DAS IST DIE LÖSUNG FÜR DEN "RAND" ===
   * Wir skalieren das Video leicht über 100%, 
   * um Ränder oder Letterboxing zu verstecken.
   */
  min-width: 101%;
  min-height: 101%;
  width: auto;
  height: auto;
}

/* Desktop-Anpassung: Video einblenden */
@media (min-width: 768px) {
  .hero-section {
    background-image: none; /* Fallback-Bild ausblenden */
  }
  .background-video {
    display: block; /* Video einblenden */
  }
}
.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);
}

/* ========================================================= */
/* 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 (LOGIK: 1 -> 2,3,4,5... Loop)  */
/* ========================================================= */

.subtitle-rotator {
  display: block;
  max-width: 90%;
  margin-top: 1em;
  position: relative;
  height: 3.2em;
  overflow: hidden;
}

/* Basis-Styling für alle rotierenden Untertitel */
.rotating-subtitle {
  display: block;
  text-align: left;
  font-size: 1.4em;
  font-weight: var(--font-weight-bold);
  color: white;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0; /* Standard: unsichtbar */
  animation-timing-function: ease-in-out;
}

/* --- KEYFRAMES --- */

/* Keyframe 1: NUR für den ersten Untertitel (LCP) */
/* Läuft 1x ab und bleibt dann unsichtbar */
@keyframes fadeOutFirst {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  } /* 3s Halten (von 15s) */
  25% {
    opacity: 0;
    transform: translateY(-20px);
  } /* Ausblenden */
  100% {
    opacity: 0;
  }
}

/* Keyframe 2: Für die 4er-Endlosschleife (2, 3, 4, 5) */
/* Dauer pro Phase: 25% (von 12s) */
@keyframes fadeInOutLoop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  8% {
    opacity: 1;
    transform: translateY(0);
  } /* Einblenden */
  25% {
    opacity: 1;
    transform: translateY(0);
  } /* Halten (3s) */
  33% {
    opacity: 0;
    transform: translateY(-20px);
  } /* Ausblenden */
  100% {
    opacity: 0;
  }
}

/* --- ZUWEISUNGEN --- */

/* Subtitle 1: Sofort sichtbar, spielt 1x "fadeOutFirst" */
.subtitle-1 {
  opacity: 1;
  transform: translateY(0);
  animation-name: fadeOutFirst;
  animation-duration: 15s; /* Nutzt die 5er-Basis (1x 3s halten) */
  animation-iteration-count: 1; /* WICHTIG: Läuft nur einmal */
  animation-fill-mode: forwards; /* WICHTIG: Bleibt am Ende unsichtbar */
}

/* Subtitles 2-5: Starten verzögert, laufen in Endlosschleife */
.subtitle-2,
.subtitle-3,
.subtitle-4,
.subtitle-5 {
  animation-name: fadeInOutLoop;
  animation-duration: 12s; /* Die 4er-Loop-Dauer (4 * 3s) */
  animation-iteration-count: infinite; /* Endlosschleife */
}

/* Verzögerungen für die Endlosschleife */
.subtitle-2 {
  animation-delay: 3s;
} /* Startet, wenn 1 ausblendet */
.subtitle-3 {
  animation-delay: 6s;
} /* 3s + 3s */
.subtitle-4 {
  animation-delay: 9s;
} /* 6s + 3s */
.subtitle-5 {
  animation-delay: 12s;
} /* 9s + 3s (startet Loop neu bei 15s) */

/* Responsive Anpassung (unverändert) */
@media (max-width: 767px) {
  .rotating-subtitle {
    font-size: 1.1em;
  }
  .subtitle-rotator {
    height: 2.8em;
  }
}
/* ----------------------------------------------------- */
/* 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: var(--color-mocca); /* 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: var(--color-mocca);
  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;
}

/* 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 */
  }
}

/* ========================================================= */
/* 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: var(--color-mocca); /* 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;
  }
}

/* ========================================================= */
/* STYLING FÜR USP-SEKTIONEN (z.B. Lage)                     */
/* ========================================================= */

.usp-lage {
  background-color: var(--color-sand);
  color: var(--color-mocca);
}

/* 1. DER FLEX-CONTAINER (STANDARD = MOBIL) */
.content-flex {
  display: flex;
  flex-direction: column; /* Standard: Elemente untereinander stapeln */
  gap: 2rem; /* Abstand zwischen Bild und Text */
}

/* 2. DAS BILD (STANDARD = MOBIL) */
.content-flex > img {
  width: 100%; /* Füllt 100% des .content-flex (der das padding vom .container hat) */
  height: auto; /* Behält das Seitenverhältnis bei */
  display: block;
  border-radius: 8px; /* Optional: Schöne abgerundete Ecken */
}

/* 3. DER TEXT-BLOCK (STANDARD = MOBIL) */
.content-flex > .usp-text-block {
  width: 100%; /* Stellt sicher, dass der Text auch 100% breit ist */
}

/* 4. DESKTOP-ANSICHT (ALLES ÜBER 768px BREITE) */
@media (min-width: 769px) {
  .content-flex {
    flex-direction: row; /* Elemente nebeneinander legen */
    align-items: center; /* Vertikal zentrieren */
  }

  /* Auf dem Desktop sollen sich Bild und Text den Platz 50/50 teilen */
  .content-flex > img,
  .content-flex > .usp-text-block {
    flex: 1; /* Kurzform für: flex-basis: 0, flex-grow: 1 */
  }
}

.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;
  margin-top: auto;
}

.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;
  }

  .main-footer {
    padding: 40px 0;
  }

  .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 {
  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 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 {
  /* Hier setzen wir NUR den vertikalen Abstand.
    Das 'padding-left' und 'padding-right' (der Rand) 
    kommt von der .container-Klasse, die Sie im HTML verwenden.
  */
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.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;
}

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

/* Ü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 h2 {
  color: var(--color-petrol);
  text-align: left;
  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 {
  background-color: white; /* Oder eine leichte Hintergrundfarbe wie --color-rauch */
}

.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 {
  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-top: 40px;
  background-color: white;
}

/* Stellt sicher, dass H2-Überschriften in dieser Sektion zentriert sind */
.info-section h2 {
  text-align: center;
  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 {
  background-color: white;
}

.faq-section h2 {
  text-align: center;
  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;
}

/* === EINHEITLICHER SEKTIONS-ABSTAND === */
.usp-section,
.booking-widget-section,
.zimmer-overview,
.info-section,
.testimonial-section,
.faq-section,
.legal-content-section,
.location-content-section,
.contact-content-section,
.error-page-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Entfernt das alte Padding vom Zimmer-Grid, da es jetzt die Sektion hat */
.zimmer-grid {
  padding: 0;
}
/* === EINHEITLICHER H2-ABSTAND === */
.booking-widget-section h2,
.zimmer-overview h2,
.usp-section h2,
.info-section h2,
.testimonial-section h2,
.faq-section h2 {
  margin-bottom: 40px; /* Erhöht von 30px (oder 0) auf 40px */
}

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

/* ========================================================= */
/* STYLING FÜR NEUEN BLOG-BEREICH                          */
/* ========================================================= */

/* --- 1. Blog-Übersichtsseite (blog.html) --- */

/* Header für die Blog-Seite (basiert auf location-content) */
.blog-overview-section h1 {
  color: var(--color-petrol);
  text-align: left;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-rauch);
  padding-bottom: 10px;
}

.blog-overview-section .intro-text {
  font-size: 1.1em;
  margin-bottom: 40px; /* Mehr Abstand zum Grid */
}

/* Anpassung der Zimmer-Kachel für Blog-Posts */
/* Wir nutzen .zimmer-card und .zimmer-grid weiter! */
.zimmer-card-content .post-meta {
  font-size: 0.85em;
  color: var(--color-petrol);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
  flex-grow: 0; /* Verhindert, dass dieses P-Tag den Platz füllt */
}

/* Überschreiben die Mindesthöhe der Zimmer-Beschreibung */
.zimmer-card-content p {
  min-height: auto;
}

/* --- 2. Blog-Einzelbeitragsseite (artikel.html) --- */

/* "Zurück"-Link */
.back-to-overview {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--color-petrol);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: color 0.3s;
}
.back-to-overview:hover {
  color: var(--color-mandarin);
  text-decoration: underline;
}

/* Haupt-Bild des Artikels */
.blog-feature-image {
  width: 100%;
  height: auto;
  max-height: 450px; /* Maximale Höhe */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 30px;
}

/* Styling für den Artikel-Text (basiert auf legal-content) */
.blog-post-content {
  line-height: 1.7;
  max-width: 800px; /* Optimale Lesebreite für Text */
}

.blog-post-content p {
  margin-bottom: 1.5em; /* Mehr Abstand für Lesbarkeit */
}

.blog-post-content h2 {
  color: var(--color-petrol);
  margin-top: 2.5em; /* Abstand über H2 */
  margin-bottom: 1em;
  border-bottom: 2px solid var(--color-rauch);
  padding-bottom: 10px;
}

.blog-post-content ul,
.blog-post-content ol {
  padding-left: 25px;
  margin-bottom: 1.5em;
}

.blog-post-content ul li {
  position: relative;
  padding-left: 10px;
  margin-bottom: 5px;
}
/* Nutzt Ihr CI-konformes Häkchen-Styling wieder */
.blog-post-content ul li::before {
  content: "✓";
  position: absolute;
  left: -15px;
  top: 0;
  color: var(--color-petrol);
  font-weight: bold;
}

.blog-post-content a {
  color: var(--color-petrol);
  text-decoration: underline;
  font-weight: var(--font-weight-bold);
}
.blog-post-content a:hover {
  color: var(--color-mandarin);
}
.blog-post-content strong {
  color: var(--color-mocca); /* Stärker als Mandarin im Fließtext */
  font-weight: var(--font-weight-bold);
}
.blog-post-content blockquote {
  border-left: 5px solid var(--color-petrol);
  padding-left: 20px;
  margin: 25px 0;
  font-style: italic;
  background-color: #fcfcfc;
  border-radius: 0 8px 8px 0;
}