/* =====================================================================
   BLUEMELE.DE
   Ferienhaus Bluemele, Bluemele 20, 88175 Scheidegg

   FARBEN
   Die Werte stammen aus der Logodatei, nicht aus einer Liste: mit
   System.Drawing die haeufigsten Farbtoene ausgezaehlt. Das Gruen ist
   deutlich dunkler und das Gold deutlich satter als die Ausgangswerte
   im Auftrag (#1E4034 / #B59A55).

   Gemessene Kontraste (WCAG 2.1, berechnet - nicht geschaetzt):
     Weiss    auf Tannengruen #0C2F25   14,49 : 1   traegt
     Tinte    auf Papier      #FAF7F1   13,57 : 1   traegt
     Gruen    auf Papier                13,55 : 1   traegt
     Tinte    auf Gold        #B79030    4,87 : 1   traegt
     Weiss    auf Gold                   2,98 : 1   TRAEGT NICHT
     Gold     auf Papier                 2,79 : 1   TRAEGT NICHT
     Gedaempft auf Papier                5,67 : 1   traegt

   Daraus zwei Regeln, die das ganze Blatt tragen:
   1. Auf Gold steht NIE weisse Schrift, und Gold steht nie als Schrift
      auf Papier. Gold ist Zierde: Linien, Flaechenkanten, Zierstriche.
   2. Wo ein Symbol Bedeutung traegt, wird nicht das Logo-Gold benutzt,
      sondern --gold-symbol (#9C7826, 3,83 : 1) - Symbole brauchen 3 : 1.

   Gruen ist die Aktionsfarbe, Gold ist Zierde. Nie beide als
   angrenzende Flaechen.
   Kein Blau. Einzige Ausnahme: der Booking.com-Schriftzug bei den
   Bewertungen, damit die fremde Quelle erkennbar bleibt.
   ===================================================================== */

/* ------------------------------------------------------ Grundwerte */
:root {
  /* Aus dem Logo ausgelesen */
  --gruen:        #0C2F25;
  --gruen-tief:   #08211A;   /* Hover, Fusszeile. Weiss darauf 16,9 : 1 */
  --gold:         #B79030;   /* Zierde. NIE als Schrift auf Papier      */
  --gold-symbol:  #9C7826;   /* Symbole auf Papier, 3,83 : 1            */

  /* Ergaenzend */
  --papier:       #FAF7F1;
  --stein:        #EDE7DA;
  --tinte:        #242B25;
  --gedaempft:    #5A6560;   /* 5,67 : 1 auf Papier                     */
  --salbei:       #DDE6E1;   /* Flaechen, aus dem Gruen abgeleitet      */
  --salbei-tief:  #C9D8CF;   /* Kalenderfelder                          */
  --weiss:        #FFFFFF;
  --linie:        #E2DCCF;
  --booking:      #003580;   /* Fremdmarke, siehe Kopfkommentar         */
  --whatsapp:      #1FAA53;  /* Fremdmarke: der Knopf soll als WhatsApp */
  --whatsapp-tief: #199447;  /* erkennbar sein                          */

  --schrift-titel: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-text:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rund:      14px;
  --rund-klein: 8px;
  --spur:      1180px;
  --luft:      clamp(1rem, 3vw, 2rem);
  --schatten:      0 1px 2px rgba(12, 47, 37, .06), 0 4px 16px rgba(12, 47, 37, .07);
  --schatten-hoch: 0 2px 6px rgba(12, 47, 37, .10), 0 12px 32px rgba(12, 47, 37, .13);
}

/* ------------------------------------------------------ Zuruecksetzen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Seitlicher Ueberlauf ist der haeufigste Fehler auf schmalen Schirmen.
     Hier wird er nicht versteckt, sondern verhindert - jedes breite
     Element bekommt weiter unten seinen eigenen Rollbereich. */
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.18;
  color: var(--gruen);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }
a  { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gruen-tief); }
img { max-width: 100%; height: auto; display: block; }
/* figure und blockquote tragen im Browser einen kraeftigen Rand
   (figure: margin 1em 40px). In einem Raster macht das die Karte 80 px
   schmaler als ihre Spur - der Abstand daneben sieht dann aus wie ein
   falsch gesetztes gap. Einmal hier zuruecksetzen statt an jeder
   einzelnen Stelle daran denken zu muessen. */
figure, blockquote { margin: 0; }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.container { width: min(100% - 2 * var(--luft), var(--spur)); margin-inline: auto; }
.muted { color: var(--gedaempft); }
.klein { font-size: .9rem; }
.mittig { text-align: center; }
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gruen); color: var(--weiss);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--rund-klein) 0;
}
.sprunglink:focus { left: 0; }

/* Der Zierstrich in Gold - Zierde, kein Text, deshalb unbedenklich */
.zierstrich {
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--gold); margin: 0 0 1.1rem;
}
.mittig .zierstrich { margin-inline: auto; }

.eyebrow {
  display: block;
  font-family: var(--schrift-titel);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: .45rem;
}

section { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
section.eng { padding-block: clamp(1.8rem, 4vw, 3rem); }
/* Stossen zwei Abschnitte MIT DERSELBEN Flaechenfarbe aneinander, addieren
   sich unten und oben zu rund 125 px, ohne dass ein Farbwechsel die Pause
   erklaert - es sieht aus wie ein Loch im Satz. Dann faellt der obere
   Abstand weg und die beiden lesen sich als ein Block.
   Der erste Abschnitt nach dem Kopf braucht oben ebenfalls weniger Luft,
   weil die Merkmalzeile schon eine Trennlinie zieht. */
.flaeche + .flaeche,
.flaeche-stein + .flaeche-stein,
.flaeche-gruen + .flaeche-gruen { padding-top: 0; }
.merkmalzeile + section { padding-top: clamp(2rem, 4.5vw, 3.2rem); }
.flaeche { background: var(--salbei); }
.flaeche-stein { background: var(--stein); }
.flaeche-gruen { background: var(--gruen); color: var(--papier); }
.flaeche-gruen h1, .flaeche-gruen h2, .flaeche-gruen h3 { color: var(--weiss); }
.flaeche-gruen a { color: var(--weiss); }
.flaeche-gruen .muted { color: rgba(250, 247, 241, .78); }

/* ------------------------------------------------------------ Knoepfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem;
  padding: .78rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gruen); color: var(--weiss); border-color: var(--gruen); }
.btn-primary:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); color: var(--weiss); }
.btn-secondary { background: transparent; color: var(--gruen); border-color: var(--gruen); }
.btn-secondary:hover { background: var(--gruen); color: var(--weiss); }
.btn-block { width: 100%; }
.btn-klein { padding: .55rem 1rem; font-size: .92rem; }
/* Auf gruener Flaeche kehrt sich der Knopf um */
.flaeche-gruen .btn-primary { background: var(--weiss); color: var(--gruen); border-color: var(--weiss); }
.flaeche-gruen .btn-primary:hover { background: var(--papier); color: var(--gruen-tief); }
.flaeche-gruen .btn-secondary { color: var(--weiss); border-color: rgba(255,255,255,.6); }
.flaeche-gruen .btn-secondary:hover { background: var(--weiss); color: var(--gruen); }

/* ------------------------------------------------------------- Kopf */
/* Das Logo ist ein gestapeltes Zeichen (Marke ueber Schriftzug), rund
   1,1 : 1. Ein breites Kopflogo wie bei rosenalm.de gibt es nicht.
   Deshalb steht der Kopf hier MITTIG - so wirkt das hohe Zeichen
   beabsichtigt und nicht wie ein Fremdkoerper in einer Zeile. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 241, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linie);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .6rem;
}
.brand { display: inline-block; flex: 0 0 auto; }
.brand img { width: 104px; height: auto; }
.site-nav { display: flex; align-items: center; gap: .35rem; }
.site-nav a {
  font-family: var(--schrift-titel); font-weight: 500; font-size: .97rem;
  color: var(--tinte); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--rund-klein);
}
.site-nav a:hover { background: var(--salbei); color: var(--gruen); }
/* Spezifitaet beachten: .site-nav a ist (0,1,1) und schlaegt .btn-primary
   (0,1,0). Der Knopf im Menue braucht deshalb die doppelte Auszeichnung. */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover { color: var(--weiss); background: var(--gruen); }
.site-nav a.btn-primary:hover { background: var(--gruen-tief); }
.site-nav a[aria-current="page"] {
  color: var(--gruen); background: var(--salbei);
}
.nav-cta { display: none; }
.header-cta { flex: 0 0 auto; }
.cta-kurz { display: none; }
.nav-toggle {
  display: none;
  background: transparent; border: 1.5px solid var(--linie);
  border-radius: var(--rund-klein);
  width: 44px; height: 44px; padding: 9px; color: var(--gruen); cursor: pointer;
}
.nav-toggle svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: .7rem var(--luft) 1.1rem;
    box-shadow: var(--schatten);
    display: none;
  }
  /* KLASSENNAME BEACHTEN: js/main.js setzt open, nicht offen. Hier
     stand offen - der Knopf schaltete aria-expanded um, das Menue blieb
     aber auf display:none. Auf dem Handy war die Seite dadurch ausser
     ueber das Logo nicht navigierbar. */
  .site-nav.open { display: flex; }
  .site-nav a { padding: .75rem .6rem; font-size: 1.05rem; }
  .nav-cta { display: inline-flex; margin-top: .5rem; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .brand img { width: 88px; }
}
@media (max-width: 380px) {
  .brand img { width: 74px; }
}

/* -------------------------------------------------------------- Hero
   Bauart wie auf rosenalm.de: das Foto liegt VOLLFLAECHIG hinter dem
   Inhalt, nicht als eigener Bildblock darueber. Der Text, die Knoepfe und
   die Auszeichnungen stehen auf dem Bild. Dadurch wird deutlich mehr vom
   Motiv sichtbar, weil das Bild die ganze Hoehe des Abschnitts fuellt
   statt nur einen zugeschnittenen Streifen. */
.hero { position: relative; background: var(--gruen-tief); color: var(--weiss); overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Etwas oberhalb der Mitte beschnitten: dort steht das Haus vor der
     Wiese, weiter unten kaeme nur noch Vordergrund ins Bild. */
  object-position: center 45%;
}
/* Verlauf sorgt fuer lesbaren Text, egal wie hell das Foto an der Stelle
   ist. Links am dichtesten, weil dort Ueberschrift und Knoepfe stehen. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,33,26,.88) 0%, rgba(8,33,26,.72) 42%, rgba(8,33,26,.30) 78%, rgba(8,33,26,.18) 100%),
    linear-gradient(to top, rgba(8,33,26,.55), transparent 45%);
}
.hero-inner {
  position: relative; z-index: 1;
  padding: clamp(4.5rem, 11vw, 8rem) 0 clamp(3.2rem, 7vw, 4.5rem);
}
.hero h1 { color: var(--weiss); margin: .5rem 0 .7rem; max-width: 16ch; }
.hero .eyebrow { color: #D8C79A; }
.hero-sub {
  color: #E6E3DC; max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-actions .btn-hell { background: var(--weiss); color: var(--gruen); border-color: var(--weiss); }
.hero-actions .btn-hell:hover { background: var(--papier); color: var(--gruen-tief); border-color: var(--papier); }
.hero-actions .btn-outline {
  background: transparent; color: var(--weiss);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45);
  border-color: transparent;
}
.hero-actions .btn-outline:hover {
  background: rgba(255,255,255,.12); color: var(--weiss);
  box-shadow: inset 0 0 0 1.5px var(--weiss);
}

/* Auszeichnungen: gleichwertige Spalten, durch feine Linien getrennt.
   Sie stehen auf dem Bild, nicht in einer eigenen Leiste darunter. */
.hero-trust {
  list-style: none;
  padding: 1.6rem 0 0;
  margin: 2.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 2.6rem;
}
.hero-trust li { display: grid; gap: .18rem; position: relative; }
.hero-trust li + li::before {
  content: ""; position: absolute;
  left: -1.3rem; top: .1rem; bottom: .1rem;
  width: 1px; background: rgba(255, 255, 255, .18);
}
.trust-icon { width: 22px; height: 22px; color: var(--gold); margin-bottom: .28rem; }
.trust-stars { display: flex; gap: 2px; margin-bottom: .34rem; height: 22px; align-items: center; }
.trust-stars svg { width: 13px; height: 13px; color: var(--gold); }
.trust-source {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #B8B2A6;
}
.trust-award {
  font-family: var(--schrift-titel);
  font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: var(--weiss);
}
@media (max-width: 720px) {
  .hero-trust { grid-template-columns: 1fr; gap: 1.15rem; }
  .hero-trust li + li::before { left: 0; right: 0; top: -.6rem; bottom: auto; width: auto; height: 1px; }
}

/* Vorteile: Karten, die halb in den Hero ragen - der Uebergang wirkt
   dadurch verbunden statt wie ein abgetrennter Balken. */
.vorteile-streifen { padding: 0 0 1rem; }
.vorteile-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem; margin-top: -2.6rem;
  position: relative; z-index: 2;
}

/* ---------------------------------------------------- Vertrauenskacheln */
.vertrauen {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  /* Ein Raster streckt alle Kacheln auf die Hoehe der groessten. Die
     Texte sind unterschiedlich lang - ohne align-items: stretch waere
     der Rahmen sonst unterschiedlich hoch. Hier ist stretch gewollt. */
  align-items: stretch;
}
.vertrauen-kachel {
  /* KEIN <figure>: figure traegt im Browser margin: 1em 40px. Wird das
     nicht zurueckgesetzt, ist die Kachel 80 px schmaler als ihre Spur
     und zwischen zwei Kacheln klafft eine Luecke von 99 px statt der
     19, die das gap vorgibt. Deshalb schlicht ein <div>. */
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.2rem 1.15rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.vertrauen-kachel svg { width: 26px; height: 26px; color: var(--gold-symbol); }
.vertrauen-kachel strong { font-family: var(--schrift-titel); color: var(--gruen); font-size: 1.02rem; }
.vertrauen-kachel p { margin: 0; font-size: .93rem; color: var(--gedaempft); }

/* ------------------------------------------------------- Abschnittkopf */
.abschnittkopf { max-width: 62ch; margin-bottom: 2rem; }
.abschnittkopf.mittig { margin-inline: auto; }
.abschnittkopf p { color: var(--gedaempft); font-size: 1.05rem; margin-bottom: 0; }
.section-mehr { margin-top: 1.6rem; }

/* ------------------------------------------------------- Wohnungsliste */
/* Sechs Angebote, kein Filter: der Gast sieht alles auf einen Blick.
   Die haeufigste Klage in den Bewertungen ist die Verwechslung der
   Wohnungen. Deshalb traegt jede Karte gross und links ihre Kennung
   (0.1, 0.2, 1.1 + 1.2, 2.1, 2.2, OG + DG) und eine Zeile Klartext
   zur Kueche. */
/* Zwei Kacheln nebeneinander. Vorher lagen sie einzeln untereinander und
   waren dadurch sehr gross - bei sechs Angeboten wurde die Seite
   unnoetig lang und man musste scrollen, um zu vergleichen. */
.wohnungsliste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  /* NICHT align-items: start - die Kacheln sollen sich auf die Hoehe der
     hoechsten strecken, damit die Reihe eine gemeinsame Unterkante hat. */
  align-items: stretch;
}
@media (max-width: 1080px) { .wohnungsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .wohnungsliste { grid-template-columns: 1fr; } }
.wohnung-karte {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: box-shadow .18s ease, transform .18s ease;
}
.wohnung-karte:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); }
.wohnung-karte-bild { position: relative; background: var(--salbei); }
.wohnung-karte-bild img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.wohnung-kennung {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--gruen); color: var(--weiss);
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1rem;
  letter-spacing: .02em;
  padding: .34rem .72rem; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(8,33,26,.3);
}
/* Der Textteil traegt den Rest der Hoehe. Damit die Kacheln in einer
   Reihe gleich hoch werden UND der Knopf trotzdem unten sitzt, wandert
   der Kalender per margin-top: auto nach unten - der Leerraum entsteht
   dann zwischen Angaben und Kalender statt unter dem Knopf. */
.wohnung-karte-text {
  padding: 1.1rem 1.15rem 1.2rem;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}
.wohnung-karte-text h3 { font-size: 1.08rem; }
.wohnung-karte-text .cal-halter { margin-top: auto; }
.wohnung-karte-text h3 { margin-bottom: .25rem; }
.wohnung-etage { font-size: .88rem; color: var(--gedaempft); margin-bottom: .7rem; }
.wohnung-eckdaten {
  display: flex; flex-wrap: wrap; gap: .35rem .95rem;
  font-size: .93rem; margin-bottom: .7rem;
}
.wohnung-eckdaten span { display: inline-flex; align-items: center; gap: .35rem; }
.wohnung-eckdaten svg { width: 17px; height: 17px; color: var(--gold-symbol); flex: 0 0 auto; }

/* Die Kuechenzeile. Zweithaeufigste Klage nach der Verwechslung:
   "Auf Booking.com war ein Backofen genannt. Leider war lediglich eine
   Mikrowelle." Deshalb steht sie WEIT OBEN und nicht am Ende einer
   Ausstattungsliste - und sie ist farblich klar getrennt. */
.kuechenzeile {
  display: flex; align-items: flex-start; gap: .55rem;
  background: var(--salbei);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  padding: .6rem .8rem;
  font-size: .93rem;
  margin-bottom: .8rem;
}
.kuechenzeile svg { width: 18px; height: 18px; color: var(--gruen); flex: 0 0 auto; margin-top: .16rem; }
.kuechenzeile.knapp { background: #F5EEDF; border-left-color: var(--gold-symbol); }

.hinweiszeile {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .89rem; color: var(--gedaempft);
  margin-bottom: .8rem;
}
.hinweiszeile svg { width: 16px; height: 16px; color: var(--gold-symbol); flex: 0 0 auto; margin-top: .18rem; }

/* Der Knopf steht direkt unter dem Kalender, nicht unten am Kachelrand:
   der Kalender schiebt sich per margin-top: auto schon nach unten, ein
   zweites margin-top: auto hier hat den Knopf oben angeheftet und
   darunter eine Luecke gelassen. */
.wohnung-karte-fuss { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.wohnung-karte-fuss .btn { width: 100%; }

@media (max-width: 760px) {
  .wohnung-karte { grid-template-columns: 1fr; }
  .wohnung-karte-bild img { min-height: 200px; max-height: 240px; }
}

/* ------------------------------------------------ Wohnungsseite: Kopf */
/* Die Wohnungsseite hatte an mehreren Stellen zu viel Luft: Abschnitte
   erben das Abschnittspolster (bis 69 px oben UND unten) und trugen
   zusaetzlich einen eigenen Abstand darunter. Zwischen Galerie, Kopf,
   3D-Rundgang und Ausstattung standen dadurch teils 130 px.
   Hier wird das Polster fuer die Wohnungsseite einmal zurueckgenommen
   und der Abstand ueber margin gefuehrt - ein Mass statt zweier. */
.unit-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.2rem; align-items: end; padding-block: 1.3rem .2rem; }
.unit-facts { color: var(--gedaempft); margin-bottom: 0; }
@media (max-width: 820px) { .unit-head { grid-template-columns: 1fr; align-items: start; } }

.unit-columns {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2.4rem; align-items: start;
  padding-block: 1.4rem 2rem;
}
@media (max-width: 980px) { .unit-columns { grid-template-columns: 1fr; } }
/* Die Abschnitte IN der linken Spalte sind keine <section> mit Polster,
   sondern Bloecke mit einer feinen Trennlinie - so wie auf rosenalm.de. */
.unit-section { margin: 0 0 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.unit-section:first-child { border-top: 0; padding-top: 0; }
.unit-section:last-child { margin-bottom: 0; }
.unit-section h2 { font-size: 1.4rem; }
/* Der Buchungsabschnitt ist ein eigenes <section> - dort das Polster
   knapp halten, sonst klafft es ueber und unter dem Werkzeug. */
section.unit-section { padding-block: 1.8rem; margin-bottom: 0; }

.booking-column { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 1.1rem; }
@media (max-width: 980px) { .booking-column { position: static; } }
.booking-card {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.3rem; box-shadow: var(--schatten);
}
.booking-card-title { font-family: var(--schrift-titel); font-weight: 600; color: var(--gruen); font-size: 1.08rem; margin-bottom: .8rem; }
.benefits { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.benefits li { position: relative; padding-left: 1.6rem; font-size: .94rem; }
.benefits li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.booking-card-alt { display: block; text-align: center; margin-top: .7rem; font-size: .9rem; }
/* Belegungsplan in der rechten Spalte, direkt unter dem Buchen-Feld */
.belegung-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--schatten);
}
.belegung-karte .card-cal { margin-top: .5rem; border: 0; padding: 0; background: none; }
.belegung-karte .card-cal:hover { background: none; }

/* ----------------------------------------------------------- Galerie */
/* Ein grosses Bild links, vier kleine rechts - Bauart wie rosenalm.de.
   Der Knopf "Weitere N Bilder anzeigen" liegt unten rechts auf der
   Galerie, nicht als Schleier ueber der letzten Kachel: so ist auf allen
   fuenf Bildern etwas zu erkennen. */
.unit-gallery {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  /* UNTEN OHNE Polster. Die Galerie ist ein <section> und erbt sonst
     rund 69 px Polster nach unten - der Knopf haengt mit
     "bottom: 14px" dann 55 px UNTER dem Bild statt darauf.
     Den Abstand zum Folgeabschnitt liefert dessen eigenes Polster. */
  padding-block: 1.2rem 0;
}
.gallery-all {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .95);
  color: var(--gruen);
  font-family: var(--schrift-titel); font-weight: 600; font-size: .93rem;
  border: 0; border-radius: 999px;
  padding: .6rem 1.05rem;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(8, 33, 26, .28);
  transition: background .15s ease, transform .12s ease;
}
.gallery-all:hover { background: var(--weiss); transform: translateY(-1px); }
.gallery-all svg { width: 17px; height: 17px; }
.unit-gallery a {
  display: block; overflow: hidden; border-radius: var(--rund-klein);
  background: var(--salbei);
}
.unit-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.unit-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .4s ease; }
.unit-gallery a:first-child img { aspect-ratio: 8/6.2; }
.unit-gallery a:hover img { transform: scale(1.04); }
@media (max-width: 760px) {
  .unit-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .unit-gallery a:first-child { grid-column: span 2; grid-row: auto; }
}

/* ---------------------------------------------------------- Lightbox */
/* ACHTUNG: js/main.js schaltet die Ansicht ueber das hidden-ATTRIBUT,
   nicht ueber eine Klasse. Hier stand vorher "display: none" mit einer
   Klasse .offen zum Aufklappen - die es in main.js gar nicht gibt.
   Damit blieb display:none dauerhaft aktiv und die Lightbox oeffnete nie,
   obwohl sie im DOM lag und ihr hidden korrekt entfernt wurde.
   Deshalb: offen ist der Normalfall, [hidden] blendet aus. Das explizite
   display:none ist noetig, weil display:flex die Voreinstellung des
   Browsers fuer [hidden] sonst ueberschreibt. */
/* Die Klassennamen kommen aus js/main.js (lb-leiste, lb-buehne, lb-bild,
   lb-streifen, lb-mini …). Hier standen vorher eigene Namen
   (lightbox-schliessen, lightbox-vor …), die es dort gar nicht gibt -
   die Ansicht war deshalb voellig ungestylt. */
body.lb-offen { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  /* DECKEND, nicht rgba(...,.96): der Seitenkopf steht in Papierweiss
     und ist so gross, dass schon vier Prozent Rest die Navigation
     lesbar durchscheinen liessen. */
  background: #071A14;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.lightbox[hidden] { display: none; }
.lb-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1rem; color: #E8E6E1;
}
.lb-zaehler { font-size: .85rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lb-schliessen, .lb-nav {
  appearance: none; border: 0;
  background: rgba(255, 255, 255, .12); color: var(--weiss);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lb-schliessen { width: 2.2rem; height: 2.2rem; }
.lb-schliessen .lb-zeichen { font-size: 1.5rem; line-height: 1; margin-top: -3px; }
.lb-schliessen:hover, .lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-buehne {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 0 1rem;
}
.lb-bild { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--rund-klein); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; }
.lb-nav .lb-zeichen { font-size: 1.7rem; line-height: 1; margin-top: -3px; }
.lb-zurueck { left: .6rem; }
.lb-vor { right: .6rem; }
.lb-streifen { display: flex; gap: 6px; overflow-x: auto; padding: .7rem 1rem 1rem; scrollbar-width: thin; }
.lb-mini {
  appearance: none; border: 0; padding: 0; background: none;
  flex: 0 0 auto; width: 74px; height: 50px;
  border-radius: 5px; overflow: hidden; cursor: pointer;
  opacity: .45;
  outline: 2px solid transparent; outline-offset: 1px;
  transition: opacity .15s ease, outline-color .15s ease;
}
.lb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-mini:hover { opacity: .8; }
.lb-mini.ist-aktiv { opacity: 1; outline-color: var(--gold); }
@media (max-width: 700px) {
  .lb-mini { width: 56px; height: 40px; }
  .lb-nav { width: 2.4rem; height: 2.4rem; }
  .lb-buehne { padding: 0 .4rem; }
  .gallery-all { right: 10px; bottom: 10px; padding: .42rem .7rem; font-size: .78rem; gap: .35rem; }
  .gallery-all svg { width: 15px; height: 15px; }
}

/* ------------------------------------------------------- Ausstattung */
.ausstattung-gruppe { margin-bottom: 1.5rem; }
.ausstattung-gruppe h3 { font-size: 1.02rem; margin-bottom: .6rem; }
.ausstattung-liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .45rem 1.2rem;
}
.ausstattung-liste li { display: flex; align-items: flex-start; gap: .55rem; font-size: .95rem; }
.ausstattung-liste svg { width: 18px; height: 18px; color: var(--gold-symbol); flex: 0 0 auto; margin-top: .18rem; }
.ausstattung-liste li.fehlt { color: var(--gedaempft); }
.ausstattung-liste li.fehlt svg { color: var(--gedaempft); }

/* --------------------------------------------------- Belegungsplan
   ACHTUNG: Die Klassennamen kommen aus js/main.js und heissen cal-*,
   NICHT kalender-*. Beim ersten Anlauf stand hier ein eigenes Schema -
   die Kalender wurden zwar gebaut und mit echten Smoobu-Daten gefuellt,
   waren aber vollkommen ungestylt. Wer hier etwas aendert, prueft die
   Namen in main.js nach.

   Freie und belegte Tage muessen sich UNTERSCHEIDEN, nicht nur nuanciert
   anders wirken. Zwei helle Toene kamen auf 1,02 : 1 - farblich also
   identisch. Deshalb ist "belegt" bewusst deutlich dunkler:

     frei    #DFEAE3, Text #0C2F25    11,74 : 1
     belegt  #5E6F66, Text weiss       5,33 : 1
     frei gegen belegt                 4,32 : 1
     vorbei  #F2EFE8, Text #6B675E     4,91 : 1

   Zusaetzlich traegt "belegt" einen Durchstrich - die Unterscheidung
   haengt damit nicht allein an der Farbe. */
.card-cal {
  display: block; margin-top: .8rem;
  padding: .45rem .65rem .5rem;
  border: 1px solid var(--linie); border-radius: var(--rund-klein);
  background: var(--papier);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.card-cal:hover { border-color: var(--gruen); background: #FCFBF7; }
.cal-kopf {
  display: grid; grid-template-columns: 1.6rem 1fr 1.6rem;
  align-items: center; gap: .2rem; margin-bottom: .35rem;
}
.cal-monat {
  font-family: var(--schrift-titel); font-weight: 600; font-size: .82rem;
  color: var(--tinte); text-align: center; white-space: nowrap;
}
.cal-nav {
  appearance: none; border: 0; background: none; padding: 0;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  color: var(--gedaempft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.cal-nav-zeichen { font-size: 1.05rem; line-height: 1; margin-top: -2px; }
.cal-nav:hover { background: var(--salbei); color: var(--gruen); }
.cal-nav:disabled { opacity: .25; cursor: default; background: none; color: var(--gedaempft); }
/* Die Blaetter-Knoepfe stehen bewusst AUSSERHALB des Links -
   ein <button> in einem <a> ist unzulaessig. */
.cal-link { display: block; text-decoration: none; color: inherit; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: .58rem; color: var(--gedaempft); text-align: center; padding-bottom: .15rem; }
.cal-tag {
  /* Echte Quadrate, ohne Hoehendeckel: mit sieben Spalten und sechs
     Reihen ergibt das Gitter dadurch ein nahezu quadratisches Feld
     unter Bild und Angaben - so wie gewuenscht. Ein max-height wuerde
     die Felder zu flachen Rechtecken stauchen. */
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: .68rem; font-variant-numeric: tabular-nums; line-height: 1;
}
.cal-leer { background: none; }
.cal-frei { background: #DFEAE3; color: #0C2F25; }
.cal-belegt {
  background: #5E6F66; color: #FFFFFF;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .7);
}
/* Wechseltage, geteilt entlang der Diagonalen - Richtung genau wie in
   Smoobus eigenem Widget (singleCalendarWidget.css: "to right bottom",
   erste Farbe oben links):
   ANREISE = Vormittag frei, ab Mittag belegt -> hell oben links.
   ABREISE = Vormittag belegt, ab Mittag frei -> dunkel oben links. */
.cal-anreise { background: linear-gradient(to right bottom, #DFEAE3 50%, #5E6F66 50%); color: #0C2F25; }
.cal-abreise { background: linear-gradient(to right bottom, #5E6F66 50%, #DFEAE3 50%); color: #0C2F25; }
.cal-vorbei { background: #F2EFE8; color: #6B675E; }
.cal-heute { box-shadow: inset 0 0 0 1.5px var(--gruen); font-weight: 700; }
.cal-laedt { background: var(--linie); color: transparent; animation: calPuls 1.1s ease-in-out infinite; }
@keyframes calPuls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cal-laedt { animation: none; } }
.cal-fuss {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .4rem; margin-top: .45rem; padding-top: .4rem;
  border-top: 1px solid var(--linie);
  font-size: .72rem; color: var(--gedaempft);
}
.cal-cta { font-family: var(--schrift-titel); font-weight: 600; color: var(--gruen); white-space: nowrap; }
.cal-hinweis { font-size: .72rem; color: var(--gedaempft); }
/* Auf der Wohnungsseite steht der Plan gross und ohne Kartenrahmen */
#wohnungKalender .card-cal { max-width: 380px; }

/* --------------------------------------------------- 3D-Rundgang
   Matterport wird erst auf Klick geladen: der Rahmen zieht sonst auf
   jeder Wohnungsseite mehrere Megabyte nach, auch bei Gaesten, die ihn
   gar nicht oeffnen. Bis dahin steht ein Standbild mit Abspielknopf. */
.rundgang { position: relative; border-radius: var(--rund); overflow: hidden; background: var(--gruen-tief); }
.rundgang-flaeche { position: relative; aspect-ratio: 16/10; }
.rundgang-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rundgang-start {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: .8rem;
  border: 0; padding: 0; cursor: pointer;
  background: transparent; color: var(--weiss);
  align-content: center;
}
.rundgang-start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rundgang-start::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,33,26,.32), rgba(8,33,26,.62));
}
.rundgang-start span { position: relative; z-index: 2; }
.rundgang-knopf {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--gruen);
  display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(8,33,26,.4);
  transition: transform .16s ease;
}
.rundgang-start:hover .rundgang-knopf { transform: scale(1.08); }
.rundgang-knopf svg { width: 26px; height: 26px; }
.rundgang-text { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.02rem; text-shadow: 0 1px 8px rgba(8,33,26,.6); }

/* Die Gaestemappe ist ein Handy-Standbild im Hochformat - es darf nicht
   in ein Querformat gequetscht werden. Klein gehalten: es ist ein Beleg,
   kein Motiv. Bild und Knopf fuehren beide zur echten Beispielmappe. */
.gaestemappe-block {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
}
@media (max-width: 640px) {
  .gaestemappe-block { grid-template-columns: 1fr; justify-items: start; }
}
.gaestemappe-bild { display: block; }
.gaestemappe-bild img {
  width: 180px; border-radius: var(--rund-klein);
  box-shadow: var(--schatten-hoch);
  transition: transform .16s ease;
}
.gaestemappe-bild:hover img { transform: translateY(-2px); }
.gaestemappe-block h3 { margin-bottom: .4rem; }

/* ------------------------------------------------------- Buchungstool
   Smoobu setzt die Hoehe seines Rahmens selbst und meldet sie per
   postMessage nach - bei der Suchmaske sind das rund 145 px.
   Vorher stand hier min-height: 460px als Platzhalter fuers Laden. Der
   blieb aber auch DANACH stehen: unter dem Werkzeug klafften auf der
   Startseite ueber 300 px Leere.
   Den Platzhalter per :has(iframe) ganz wegzunehmen war auch falsch -
   der Rahmen wird mit 16 px eingesetzt und erst danach von Smoobu auf
   seine Hoehe gebracht; dazwischen fiel das Werkzeug in sich zusammen.
   Deshalb ein fester, knapper Platzhalter in der Groesse der fertigen
   Maske: kein Zusammenfallen, kein Loch.

   ZUR BREITE: Smoobu bricht seine Maske SELBST um - nachgemessen, die
   Rahmenhoehe waechst von 144 px (eine Zeile, ab rund 1000 px Breite)
   auf 265 px (zwei Zeilen, ab rund 760 px). Eine Mindestbreite von
   660 px stand hier vorher und war ein Fehler: in einer 343 px breiten
   Spalte zwang sie den Rahmen auf 660 px, und der Halter musste
   waagrecht rollen. Genau das war das "funktioniert nicht responsiv".
   Also KEINE Mindestbreite - der Rahmen folgt seiner Spalte.

   Smoobu setzt ausserdem selbst max-width: 1000px auf den Rahmen. In
   der 1180 px breiten Spur stand er dadurch linksbuendig, rechts blieben
   180 px leer - das war das "zu weit am Rand". Deshalb mittig stellen.
   KEIN eigener Kartenrahmen drumherum: Smoobu zeichnet bereits ein
   weisses Feld mit Rahmen, ein zweites daeussen ergibt Karte in Karte. */
.booking-embed { min-height: 150px; }
.booking-embed iframe { display: block; margin-inline: auto; }
/* Der Smoobu-Knopf traegt Heimatel-Gold. Der Rahmen hier nimmt es auf,
   damit das fremde Werkzeug nicht wie ein Fremdkoerper wirkt. */
.booking-embed iframe { width: 100%; border: 0; border-radius: var(--rund); }

/* ------------------------------------------------------ Bewertungen */
.bewertungsband { overflow: hidden; }
/* KEIN scroll-snap. Das Laufband in js/main.js schiebt scrollLeft Bild
   fuer Bild weiter; ein Rasterzwang zieht bei jedem Schritt auf den
   naechsten Rasterpunkt zurueck, und das Band steht faktisch still.
   Genau daran lag es, dass die Bewertungen sich nicht bewegt haben.
   Angehalten wird beim Hovern - das macht main.js selbst. */
.bewertungslauf {
  display: grid; grid-auto-flow: column;
  /* FESTE Spurbreite. minmax(0, 300px) laesst alle Spuren zusammenfallen
     und dann scrollt das Band ueberhaupt nicht mehr. */
  grid-auto-columns: 290px;
  gap: .8rem;
  overflow-x: auto;
  padding-block: .4rem 1rem;
  scrollbar-width: none;
  /* Alle Karten gleich hoch: das Raster streckt sie auf die Hoehe der
     laengsten. Damit unten kein Loch bleibt, sitzt die Quellzeile per
     margin-top: auto am Fuss - so stehen alle Quellzeilen auf einer
     Linie und der Ausgleich liegt zwischen Zitat und Quelle. */
  align-items: stretch;
}
.bewertungslauf::-webkit-scrollbar { display: none; }
.bewertung {
  /* PFLICHT: <figure> traegt im Browser margin: 1em 40px. Ohne das
     Zuruecksetzen ist die Karte 80 px schmaler als ihre 290-px-Spur
     (gemessen: 210 px), und zwischen zwei Karten klaffen 93 px statt
     der 13, die das gap vorgibt. Genau so sah es aus. */
  margin: 0;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.05rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.bewertung blockquote { margin: 0; }
.bewertung figcaption { margin-top: auto; padding-top: .5rem; }
.bewertung-note {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--schrift-titel); font-weight: 700; color: var(--gruen);
}
.bewertung-note svg { width: 17px; height: 17px; color: var(--gold-symbol); }
.bewertung blockquote { margin: 0; font-size: .96rem; line-height: 1.6; }
.bewertung figcaption, .bewertung .quelle {
  margin-top: auto; font-size: .84rem; color: var(--gedaempft);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.booking-wort {
  font-weight: 700; color: var(--booking); letter-spacing: -.01em;
}

/* ---------------------------------------------------- Haeuser-Slider */
/* Bauart eins zu eins von rosenalm.de: Pfeilknoepfe, Anhalten beim
   Hovern, Ziehen mit der Maus. Steht WEIT UNTEN - wer hier ankommt, hat
   das Bluemele schon gesehen. */
.haeuser-band { position: relative; }
.haeuser-lauf {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 230px;   /* feste Spur, siehe Bewertungsband */
  gap: .8rem;
  overflow-x: auto;           /* kein scroll-snap, siehe Bewertungsband */
  padding-block: .3rem 1rem;
  scrollbar-width: none;
  align-items: stretch;   /* alle Karten gleich hoch, siehe Bewertungsband */
}
.haeuser-lauf::-webkit-scrollbar { display: none; }

.haus-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.haus-karte:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); }
.haus-karte img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.haus-karte-text { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.haus-karte-text strong { font-family: var(--schrift-titel); color: var(--gruen); font-size: 1rem; }
.haus-karte-ort { font-size: .82rem; color: var(--gedaempft); }
.haus-karte-zeile { font-size: .88rem; }
.band-knopf {
  position: absolute; top: 38%; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--weiss); border: 1px solid var(--linie);
  color: var(--gruen); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--schatten);
}
.band-knopf:hover { background: var(--gruen); color: var(--weiss); }
.band-knopf[hidden] { display: none; }
.band-zurueck { left: -14px; }
.band-vor { right: -14px; }
@media (max-width: 1240px) { .band-zurueck { left: 4px; } .band-vor { right: 4px; } }

/* -------------------------------------------------------------- FAQ */
.faq-gruppe { margin-bottom: 2rem; }
.faq details {
  border: 1px solid var(--linie); border-radius: var(--rund-klein);
  background: var(--weiss); margin-bottom: .6rem;
}
.faq summary {
  cursor: pointer; padding: .9rem 1.1rem; list-style: none;
  font-family: var(--schrift-titel); font-weight: 600; color: var(--gruen);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold-symbol); border-bottom: 2px solid var(--gold-symbol);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 1.1rem 1rem; }
.faq details > div p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Textseite */
.textseite { max-width: 74ch; }
.textseite h2 { margin-top: 2rem; }
.textseite h3 { margin-top: 1.4rem; }

/* ---------------------------------------------------------- Tabellen */
/* Breite Inhalte rollen in ihrem EIGENEN Bereich - der Seitenkoerper
   darf nie waagrecht rollen. */
/* Die Vergleichstabelle ist das schnellste Werkzeug gegen die haeufigste
   Klage - die Verwechslung der Wohnungen. Sie soll deshalb wie ein Blatt
   wirken, nicht wie eine nackte Datenausgabe:
   Karte mit Rahmen, Kennung als Marke in eigener Spalte, Zahlen rechts
   und in Ziffern gleicher Breite, Zeilen im Wechsel hinterlegt. */
.tabelle-rollt {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
table.uebersicht { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 680px; }
table.uebersicht th, table.uebersicht td {
  text-align: left; padding: .72rem .9rem; vertical-align: middle;
}
table.uebersicht thead th {
  font-family: var(--schrift-titel);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gedaempft);
  padding-block: .85rem .6rem;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.uebersicht tbody tr + tr { border-top: 1px solid #F1EDE4; }
table.uebersicht tbody tr:nth-child(even) { background: #FCFAF6; }
table.uebersicht tbody tr:hover { background: var(--salbei); }
/* Zahlenspalten rechts und in Ziffern gleicher Breite - sonst tanzen
   25/50/150/350 im Blocksatz durcheinander. */
table.uebersicht .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Die Kennung als Marke, genau wie auf der Kachel */
.tab-kennung {
  display: inline-block; min-width: 3.6rem; text-align: center;
  background: var(--gruen); color: var(--weiss);
  font-family: var(--schrift-titel); font-weight: 700; font-size: .82rem;
  padding: .22rem .55rem; border-radius: 999px;
  margin-right: .6rem;
}
.tab-name { font-weight: 600; color: var(--gruen); text-decoration: none; }
.tab-name:hover { text-decoration: underline; text-underline-offset: 3px; }
table.uebersicht th[scope="row"] { font-weight: 400; white-space: nowrap; }
/* "Kochnische" gegen "vollwertig": der Unterschied muss auf einen Blick
   sichtbar sein, ohne dass dort ein "kein" steht. */
.tab-kueche { display: inline-block; font-size: .88rem; padding: .18rem .55rem; border-radius: 999px; }
.tab-kueche.voll  { background: var(--salbei); color: var(--gruen); font-weight: 600; }
.tab-kueche.knapp { background: #F5EEDF; color: #6B5A2E; }
/* Verweis nach oben beim Kombi-Angebot: keine Marke, nur ein Hinweis */
.tab-kueche.verweis { background: none; color: var(--gedaempft); padding-inline: 0; }
table.uebersicht .ja   { color: var(--gruen); font-weight: 700; }
table.uebersicht .nein { color: #B9B3A6; }

/* ------------------------------------------------------- Bildbaender */
.bildpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.bildpaar img { border-radius: var(--rund); width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.bild-mit-text { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.bild-mit-text img { border-radius: var(--rund); width: 100%; }
/* Bilder in den Wechselabschnitten bekommen ein festes Seitenverhaeltnis,
   sonst springt die Zeilenhoehe je nach Hoch- oder Querformat. */
.bild-rund { border-radius: var(--rund); width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.bild-mit-text.gedreht > :first-child { order: 2; }
@media (max-width: 820px) {
  .bild-mit-text { grid-template-columns: 1fr; }
  .bild-mit-text.gedreht > :first-child { order: 0; }
}

/* Der Lageplan ist eine Hilfe fuer die Anreise, kein Aushaengeschild.
   Deshalb steht er am Ende von /haus/ und schmaler als die Spur. */
.lageplan-halter { max-width: 720px; }
.lageplan { border-radius: var(--rund); border: 1px solid var(--linie); width: 100%; }
.lageplan-legende {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .6rem 1.4rem; margin-top: 1rem; font-size: .93rem;
}
.lageplan-legende span { display: inline-flex; align-items: flex-start; gap: .5rem; }
.lageplan-legende svg { width: 18px; height: 18px; color: var(--gold-symbol); flex: 0 0 auto; margin-top: .16rem; }

/* ------------------------------------------------------- Region */
.region-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.2rem; }
.region-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden;
  display: flex; flex-direction: column;
}
.region-karte img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.region-karte-text { padding: .95rem 1.05rem 1.1rem; }
.region-karte-text h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.region-karte-text p { font-size: .92rem; color: var(--gedaempft); margin: 0; }
.region-karte-weg { font-size: .85rem; color: var(--gruen); margin-top: .5rem !important; font-weight: 600; }

/* -------------------------------------------------------- Kontakt */
.kontakt-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.kontakt-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.3rem;
}
.kontakt-karte svg { width: 26px; height: 26px; color: var(--gold-symbol); margin-bottom: .5rem; }
.kontakt-karte h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.kontakt-karte p { font-size: .94rem; margin-bottom: .7rem; }

/* ------------------------------------------------------- Fusszeile */
.site-footer { background: var(--gruen-tief); color: rgba(250,247,241,.86); margin-top: 0; }
.site-footer a { color: var(--weiss); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 2rem; padding-block: clamp(2.2rem, 5vw, 3.4rem);
  align-items: start;
}
.footer-logo { width: 180px; height: auto; margin-bottom: .9rem; }
.footer-brand p { font-size: .93rem; margin: 0; color: rgba(250,247,241,.78); }
.footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .4rem 1.2rem; }
.footer-links a { font-size: .94rem; }
.footer-social { display: flex; gap: .7rem; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  display: grid; place-items: center; color: var(--weiss);
}
.footer-social a:hover { background: rgba(255,255,255,.14); }
.footer-social svg { width: 19px; height: 19px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-block: 1rem 1.4rem;
  font-size: .87rem; color: rgba(250,247,241,.7);
}
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ------------------------------------------------------ WhatsApp-Knopf
   WhatsApp-Gruen wie auf rosenalm.de, nicht Tannengruen: der Knopf soll
   als das erkannt werden, was er ist. Ein Markenzeichen in fremder Farbe
   kostet mehr, als die Farbtreue einbringt. */
.whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--whatsapp); color: var(--weiss);
  display: grid; place-items: center;
  box-shadow: var(--schatten-hoch);
  transition: transform .16s ease;
}
.whatsapp-fab:hover { color: var(--weiss); transform: scale(1.07); }
.btn-whatsapp { background: var(--whatsapp); color: var(--weiss); border-color: var(--whatsapp); }
.btn-whatsapp:hover { background: var(--whatsapp-tief); color: var(--weiss); border-color: var(--whatsapp-tief); }

/* ------------------------------------------------------- Brotkrumen */
.breadcrumb { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .87rem; padding-top: 1rem; color: var(--gedaempft); }
.breadcrumb a { color: var(--gedaempft); text-decoration: none; }
.breadcrumb a:hover { color: var(--gruen); text-decoration: underline; }
.breadcrumb .sep { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }

/* ------------------------------------------------------------- 404 */
.fehlerseite { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.fehlerseite .zierstrich { margin-inline: auto; }

/* Hinweis unter dem 3D-Rundgang - er steht bewusst nicht im Rahmen,
   sondern darunter, damit er auch vor dem Start gelesen wird. */
.rundgang-hinweis { margin-top: .9rem; margin-bottom: 0; }

/* Einleitung direkt ueber der Vergleichstabelle: schmaler Satzspiegel
   fuer den Text, danach nur eine kurze Pause bis zur Tabelle. */
.abschnittkopf.schmal { max-width: 58ch; margin-bottom: 1.4rem; }

/* -------------------------------- Bewertung im Wohnungskopf
   Vorher stand hier nur der Text "Booking-Bewertung 9,1" - eine Zahl
   ohne Halt. Jetzt ein kleines Feld mit Stern und Quelle, das auf die
   Stimmen der Gaeste auf der Startseite fuehrt. */
.unit-head-cta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.unit-note {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 999px; padding: .42rem .95rem .42rem .7rem;
  text-decoration: none; color: inherit;
  box-shadow: var(--schatten);
  transition: border-color .15s ease, transform .12s ease;
}
.unit-note:hover { border-color: var(--gruen); transform: translateY(-1px); color: inherit; }
.unit-note-zahl {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.15rem;
  color: var(--gruen); line-height: 1;
}
.unit-note-zahl svg { width: 17px; height: 17px; color: var(--gold-symbol); }
.unit-note-text { display: grid; line-height: 1.15; }
.unit-note-text strong { font-size: .72rem; font-weight: 600; color: var(--gedaempft); }
.unit-note-text .booking-wort { font-size: .74rem; }
.unit-dtv {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--gedaempft);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .42rem .8rem; background: var(--weiss);
}
.unit-dtv svg { width: 15px; height: 15px; color: var(--gold-symbol); }

/* Der 3D-Rundgang stand zwischen zwei vollen Abschnittspolstern.
   Er ist ein Block wie die anderen in der linken Spalte. */
.rundgang { margin-top: .2rem; }

/* Das Kachelbild ist selbst ein Verweis - Zeigefinger und Hover wie bei
   der Ueberschrift, damit sichtbar wird, dass es klickbar ist. */
a.wohnung-karte-bild { display: block; overflow: hidden; }
a.wohnung-karte-bild img { transition: transform .35s ease; }
.wohnung-karte:hover a.wohnung-karte-bild img { transform: scale(1.03); }

/* ------------------------------------------------ Ziehen der Baender
   Beide Baender lassen sich mit der Maus verschieben. Die Klasse heisst
   in js/main.js "wird-gezogen" - eine frueher hier stehende Regel
   ".haeuser-lauf.zieht" hat nie gegriffen, weil es die Klasse nicht gibt.
   touch-action: pan-y laesst das senkrechte Scrollen der Seite auf dem
   Handy unangetastet; waagrecht uebernimmt das Band. */
.bewertungslauf,
.haeuser-lauf { cursor: grab; touch-action: pan-y; }
.bewertungslauf.wird-gezogen,
.haeuser-lauf.wird-gezogen { cursor: grabbing; }
/* Waehrend des Ziehens keine Textmarkierung - sonst faerbt sich beim
   Wischen der halbe Zitattext blau. */
.wird-gezogen, .wird-gezogen * { user-select: none; }

/* --------------------------- Nachtrag: Klassen aus js/main.js
   Diese vier setzt main.js, im Blatt fehlten sie bisher ganz - die
   betroffenen Stellen blieben dadurch unformatiert.
   .cal-zahl        Zahl der freien Naechte in der Kalenderfusszeile
   .cal-zahl-voll   dieselbe Zahl, wenn nichts mehr frei ist
   .card-cal-ohne   Ersatzkachel, wenn der Belegungsplan nicht geladen
                    werden kann (altes Geraet, kein fetch)
   .ist-klon        die Kopien im Laufband; rein optisch, ohne eigene Regel */
.cal-zahl { font-size: .72rem; font-weight: 600; color: var(--gold-symbol); white-space: nowrap; }
.cal-zahl-voll { color: var(--gedaempft); font-weight: 500; }
.card-cal-ohne .cal-kopf { display: block; }
.card-cal-ohne .cal-monat { text-align: left; }
.card-cal-ohne .cal-fuss { justify-content: center; }