/* =====================================================================
   HOTEL SCHÖN – gemeinsames Stylesheet für alle Seiten
   Stand 29.09.2026 · Vorbild: Mechanik von thechedielgouna.com/de,
   Inhalte, Farben, Schriften und Bilder vom Hotel Schön.

   Grundsätze
   - Eine Farbwelt, bewusst ohne Dark Mode (Entscheidung 29.09.2026).
   - Alle Maße kommen aus den Tokens unten. Seiten bringen KEIN eigenes
     <style> mit. Fehlt etwas, wird es hier als Baustein ergänzt und auf
     der Musterseite bausteine.html gezeigt.
   - Lesbarer Text nur in Marine, Braun oder Eiche dunkel auf Creme.
   - Keine Rundungen, keine Schatten. Verläufe nur oben in der Bühne
     und unten auf Bildkacheln.

   Inhalt
    0  Schriften
    1  Tokens
    2  Grundlagen
    3  Helfer (Platzhalter, Foto, Ornamentband, Einblenden)
    4  Typografie und Raster
    5  Buttons und Links
    6  Kopfzeile
    7  Seitenmenü
    8  Fußzeile
    9  Mobile Leiste
   10  Fenster (Karte, Galerie), Cookie-Hinweis, „Seite folgt“
   11  Bausteine
       11.1  Bühne (Film, Bildwechsel, Galerie)
       11.2  Punkte, Pfeile, Lupe
       11.3  Buchungsleiste
       11.4  Einleitung
       11.5  Angebotskacheln (Arrangements)
       11.6  Zimmer-Slider
       11.7  Instagram
       11.8  Symbol-Leiste (Nähe)
       11.9  Links-Rechts-Blöcke
       11.10 Termine
       11.11 Akkordeon
       11.12 Zimmer im Überblick (Text + Symbolraster)
       11.13 Ausstattungsliste
       11.14 Bildpaar
       11.15 Zitat-Kasten
       11.16 Buchen am Rand
       11.17 Bildkacheln (Das könnte Ihnen auch gefallen)
       11.18 Nächster Schritt
       11.29 Portrait-Raster
       11.30 Ortszeilen
       11.37 Schnellwahl
       11.38 Berühmte Gäste
       11.39 Varianten eines Zimmertyps
       11.40–11.50 Ergänzungen 30.09.2026: Film, Zimmer-Slider mittig,
             Speisekarte, Hausschnitt, Filter, Haften, Zimmerseiten kompakt,
             Varianten-Slider, Schwarz-Weiß, Zeitreise-Ende, Tagebuch
       11.51–11.58 Hausansicht, Beiträge, Kennzahlen, Lagen, Zwei Texte,
             Weinliste mit Bestellung, Kontakt mit Portrait, Stelle/Eignung
   12  Druck
   13  Nur für die Musterseite bausteine.html
   ===================================================================== */


/* ---------- 0  Schriften (selbst gehostet, Datenschutz) ---------- */
@font-face{font-family:"Lato";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/Lato-300.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Lato-400.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Lato-700.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/Spectral-300.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Spectral-400.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Spectral-500.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Spectral-600.woff2) format("woff2")}
@font-face{font-family:"Great Vibes";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/GreatVibes-400.woff2) format("woff2")}


/* ---------- 1  Tokens ----------
   Layout: zentrierte Textspalte 1.140 px in viel Creme-Weißraum, große
   Bausteine bis 1.400 px, Bilder randlos. Handy und Tablet schalten nur
   Tokens um, die Bausteine selbst bleiben gleich. */
:root{
  /* Farben (Markenkit, entschieden 29.09.2026) */
  --creme:#FFF6EC;    /* Seitengrund, Kopfzeile gescrollt, Dropdown */
  --marine:#153254;   /* Überschriften, Haupt-Buttons, Fußzeile */
  --braun:#392206;    /* Fließtext, Button-Hover-Fläche */
  --eiche-d:#7A5634;  /* Gutscheine-Block, Link-Hover, Menü gescrollt */
  --eiche-h:#E6D5BC;  /* Button-Hover-Schrift, Felder, hinterlegte Kästen */
  --taube:#6A83A0;    /* 1-px-Linien, Rahmen, Icons – nie Text */
  --eiche:#A87E52;    /* Zierlinien, Pins – kein Text unter 24 px */
  --greige:#CCC7BD;   /* Bild-Platzhalter, Ornamentband */
  --oliv:#767C5F;     /* Kategorie-Chips, sparsam */
  --orange:#E55E24;   /* nur Punkte („Neu“, Kalender) */
  --marine-85:rgba(21,50,84,.85);
  --marine-60:rgba(21,50,84,.6);
  --marine-0:rgba(21,50,84,0);
  --creme-hauch:rgba(255,246,236,.5);
  /* Bildkante: feine Verblendung am Rand + sehr weicher Schatten (Vorbild Raffles, seit 30.09.2026) */
  --kante-innen:inset 0 0 0 1px rgba(21,50,84,.07),inset 0 0 22px rgba(21,50,84,.17);
  --kante-aussen:0 1px 2px rgba(57,34,6,.06),0 14px 30px -16px rgba(21,50,84,.38);

  /* Schriften */
  --sans:"Lato","Helvetica Neue",Arial,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --script:"Great Vibes","Brush Script MT",cursive;

  /* Typo-Skala (Desktop) */
  --fs-h1:41px;   --lh-h1:49px;    /* Lato Light, Versalien: H1 und Sektionstitel */
  --fs-sub:24px;  --lh-sub:48px;   /* Spectral Medium: Unterzeile */
  --fs-h2:37px;   --lh-h2:49px;    /* Spectral Light: Zwischenüberschrift */
  --fs-h3:28px;   --lh-h3:36px;    /* Spectral Light: Kacheltitel */
  --fs-text:18px; --lh-text:38px;  /* Lato Light: Fließtext */
  --fs-klein:15px;                 /* kleinste Schrift auf der Website */

  /* Raster */
  --spalte:1140px;  /* Textspalte */
  --text:760px;     /* Lesebreite Fließtext (Bestätigung offen) */
  --gross:1400px;   /* große Bausteine */
  --rand:24px;      /* Seitenrand */

  /* Abstände zwischen Sektionen */
  --sek:100px;      /* Sektion oben und unten */
  --block:140px;    /* zwischen großen Blöcken */
  --nach:154px;     /* nach Bausteinen */

  /* Kopfzeile */
  --kopf-h:136px;
  --kopf-h-fest:103px;
  --logo-b:210px;
  --logo-b-fest:171px;

  /* Bewegung */
  --t:.35s ease-in-out;   /* jedes Hover */
  --t-ein:.75s ease;      /* Einblenden */
  --t-slide:.6s ease;     /* Slider */

  /* Ebenen */
  --z-kopf:100; --z-rand:90; --z-leiste:130; --z-cookie:140; --z-deck:150; --z-menu:160; --z-fenster:170; --z-skip:200;

  /* Ornamentband (Motiv noch offen – zurückhaltendes Bogen-Fries) */
  --band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='26' viewBox='0 0 80 26'%3E%3Cg fill='none' stroke='%23CCC7BD' stroke-width='1.1'%3E%3Cpath d='M0 13c10-10 30-10 40 0s30 10 40 0'/%3E%3Cpath d='M0 13c10 10 30 10 40 0s30-10 40 0'/%3E%3C/g%3E%3Ccircle cx='20' cy='13' r='1.7' fill='%23CCC7BD'/%3E%3Ccircle cx='60' cy='13' r='1.7' fill='%23CCC7BD'/%3E%3C/svg%3E");
  --band-dunkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='26' viewBox='0 0 80 26'%3E%3Cg fill='none' stroke='%23E6D5BC' stroke-opacity='.45' stroke-width='1.1'%3E%3Cpath d='M0 13c10-10 30-10 40 0s30 10 40 0'/%3E%3Cpath d='M0 13c10 10 30 10 40 0s30-10 40 0'/%3E%3C/g%3E%3Ccircle cx='20' cy='13' r='1.7' fill='%23E6D5BC' fill-opacity='.45'/%3E%3Ccircle cx='60' cy='13' r='1.7' fill='%23E6D5BC' fill-opacity='.45'/%3E%3C/svg%3E");

  color-scheme:light;
}
/* Tablet 768–1.023 px */
@media (max-width:1023px){
  :root{--sek:80px;--block:90px;--nach:100px;--rand:20px;--kopf-h:65px;--kopf-h-fest:65px;--logo-b:171px;--logo-b-fest:171px}
}
/* Handy bis 767 px */
@media (max-width:767px){
  :root{
    --fs-h1:35px;--lh-h1:42px;--fs-sub:18px;--lh-sub:36px;--fs-h2:28px;--lh-h2:38px;--fs-h3:26px;--lh-h3:34px;
    --fs-text:16px;--lh-text:34px;
    --sek:64px;--block:60px;--nach:72px;--rand:16px;
    --kopf-h:85px;--kopf-h-fest:58px;--logo-b:171px;--logo-b-fest:132px;
  }
}


/* ---------- 2  Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--kopf-h-fest)}
body{margin:0;background:var(--creme);color:var(--braun);font:300 var(--fs-text)/var(--lh-text) var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--marine);text-decoration:none;transition:color var(--t),opacity var(--t)}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:300;text-wrap:balance}
ul,ol{list-style:none;margin:0;padding:0}
figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--marine);outline-offset:3px}
[hidden]{display:none!important}


/* ---------- 3  Helfer ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Sichtbarer Platzhalter für fehlende Angaben – nie schätzen */
.platzhalter{border-bottom:1px dashed var(--eiche-d);cursor:help;color:var(--eiche-d)}

/* Bild-Platzhalter: <div class="foto" data-motiv="Foto: …"> */
.foto{position:relative;background:var(--greige);overflow:hidden}
.foto::after{content:attr(data-motiv);position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font:300 var(--fs-klein)/24px var(--sans);letter-spacing:.3px;color:var(--braun)}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto.sw img,img.sw{filter:grayscale(1)}

/* Ornamentband 26 px */
.band{height:26px;background:var(--band) repeat-x center / 80px 26px}
.band.dunkel{background-image:var(--band-dunkel)}

/* Skip-Link */
.skip{position:fixed;top:-60px;left:24px;z-index:var(--z-skip);background:var(--marine);color:var(--creme);padding:12px 24px;font:500 var(--fs-klein)/1 var(--serif);letter-spacing:.37px;text-transform:uppercase;transition:top .3s ease}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px));color:var(--creme)}

/* Einblenden beim Scrollen: 0,75 s ease, 50 px von unten.
   Ohne JavaScript bleibt alles sichtbar (Klasse .js setzt site.js). */
.rv{transition:opacity var(--t-ein),transform var(--t-ein)}
.js .rv:not(.in){opacity:0;transform:translateY(50px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.js .rv:not(.in){opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}


/* ---------- 4  Typografie und Raster ---------- */
/* H1 und Sektionstitel: Lato Light, Versalien */
.h-gross{font:300 var(--fs-h1)/var(--lh-h1) var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--marine);text-align:center}
/* Unterzeile unter H1: Spectral Medium */
.unterzeile{font:500 var(--fs-sub)/var(--lh-sub) var(--serif);letter-spacing:.55px;color:var(--marine);text-align:center}
/* Zwischenüberschrift, Blocktitel: Spectral Light */
.h-serif{font:300 var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:.55px;color:var(--marine)}
/* Kacheltitel */
.h-kachel{font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
/* Kleine Versal-Zeile über Titeln (z. B. „Haupthaus · Aufzug“) */
.ueberzeile{display:block;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1.62px;text-transform:uppercase;color:var(--eiche-d)}
/* Zierwort in Great Vibes – höchstens eines pro Seite */
.zierwort{font:400 44px/1 var(--script);color:var(--eiche-d)}

/* Abstände in Titelgruppen */
.h-gross+.unterzeile{margin-top:15px}
.unterzeile+.text,.h-gross+.text{margin-top:30px}

/* Textspalte */
.text{max-width:var(--text);margin-inline:auto}
.text.schmal{max-width:680px}
.text p+p,.text p+ul,.text ul+p{margin-top:20px}
.text strong,.text b{font-weight:400}

/* Raster */
.spalte{max-width:var(--spalte);margin-inline:auto;padding-inline:var(--rand)}
.spalte-gross{max-width:var(--gross);margin-inline:auto;padding-inline:max(var(--rand),min(80px,4vw))}
.sek{padding-block:var(--sek)}
.titelblock{display:grid;justify-items:center;text-align:center}

@media (max-width:767px){
  /* Sektionstitel auf dem Handy linksbündig, H1 und Titelblöcke bleiben zentriert */
  .h-gross{letter-spacing:.5px;text-align:left}
  h1.h-gross,.titelblock .h-gross,.einleitung .h-gross,.schritt .h-gross{text-align:center}
  .text{text-align:center}
}


/* ---------- 5  Buttons und Links ---------- */
/* Eckig, 48 px, Spectral Medium 15 px Versalien, 9-px-Winkel als Pfeil */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 50px 0 30px;background:var(--marine);color:var(--creme);font:500 var(--fs-klein)/1 var(--serif);letter-spacing:.37px;text-transform:uppercase;position:relative;white-space:nowrap;text-align:center;transition:background var(--t),color var(--t)}
.btn::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;border-right:1.3px solid currentColor;border-top:1.3px solid currentColor;transform:translateY(-55%) rotate(45deg)}
.btn:hover{background:var(--braun);color:var(--eiche-h)}
.btn:active{background:var(--eiche-d);color:var(--creme)}
/* ohne Pfeil (Formulare, Fenster) */
.btn.ohne{padding-right:30px}
.btn.ohne::after{display:none}
/* zweite Wahl neben einem Haupt-Button */
.btn.zweit{background:var(--eiche-d)}
/* Umriss (Cookie-Hinweis) */
.btn.umriss{background:transparent;color:var(--marine);box-shadow:inset 0 0 0 1px var(--marine)}
.btn.umriss:hover{background:var(--marine);color:var(--creme)}

/* Hinweis unter jedem Buchungs-Button */
.direkt{display:block;margin-top:12px;font:300 var(--fs-klein)/24px var(--sans);color:var(--eiche-d)}

/* „Entdecken“-Link: feine Linie, beim Hover läuft ein heller Schimmer darüber */
.entdecken{position:relative;display:inline-block;padding-bottom:7px;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1.62px;text-transform:uppercase;color:var(--marine);transition:color var(--t)}
.entdecken::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--taube) 0,var(--taube) 38%,var(--eiche) 45%,var(--eiche-h) 50%,var(--eiche) 55%,var(--taube) 62%,var(--taube) 100%);background-size:300% 100%;background-position:100% 0;transition:background-position .7s cubic-bezier(.4,0,.2,1)}
.entdecken:hover,.kachel:hover .entdecken,.kachel.hov .entdecken{color:var(--eiche-d)}
.entdecken:hover::after,.kachel:hover .entdecken::after,.kachel.hov .entdecken::after{background-position:0 0}
.entdecken.hell{color:var(--creme)}
.entdecken.hell:hover{color:var(--eiche-h)}

/* Link im Fließtext */
.link{color:var(--marine);border-bottom:1px solid var(--taube)}
.link:hover{color:var(--eiche-d);border-color:var(--eiche-d)}

/* PDF-Link */
.pdf{display:inline-flex;align-items:center;gap:10px;font:500 var(--fs-klein)/1.2 var(--serif);color:var(--marine)}
.pdf svg{width:14px;height:17px;fill:var(--eiche-d);transition:fill var(--t)}
.pdf:hover svg{fill:var(--orange)}
.pdf .groesse{font:300 var(--fs-klein) var(--sans);color:var(--eiche-d);letter-spacing:.2px}

/* Button-Gruppen */
.knoepfe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 30px}
.quer{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px}


/* ---------- 6  Kopfzeile ----------
   Drei Zustände: über der Bühne transparent (136 px) · gescrollt oder
   Maus darüber Creme (103 px) · Tablet/Handy einzeilig.
   Seiten ohne Bühne setzen <body data-kopf="hell">. */
.kopf{position:fixed;left:0;right:0;top:0;z-index:var(--z-kopf);padding-top:env(safe-area-inset-top,0px);color:var(--creme);background:transparent;transition:background var(--t),color var(--t)}
.kopf-oben{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;height:83px;transition:height var(--t)}
.ko-links{display:flex;align-items:center;gap:22px;padding-left:24px;font:300 var(--fs-klein)/1 var(--sans);letter-spacing:1.62px;text-transform:uppercase}
.ko-links .strich{width:1px;height:22px;background:currentColor;opacity:.7}
.ko-links a,.ko-links button{display:inline-flex;align-items:center;gap:10px;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;transition:color var(--t)}
.ko-links a:hover,.ko-links button:hover{color:var(--eiche-h)}
.kopf.hell .ko-links a:hover,.kopf.hell .ko-links button:hover{color:var(--eiche-d)}
.ko-links .burger,.ko-links .sprache-m{display:none}
/* Wortmarke in der Schrift des Logos: „hotel“ als Schreibschrift, „SCHÖN“ als Serifen-Versalien */
.logo{display:grid;justify-items:center;align-self:center;color:inherit;line-height:1;--lw:var(--logo-b);width:var(--lw);transition:width var(--t)}
.logo:hover{color:inherit}
.logo .wm-h{font:400 calc(var(--lw) * .155) var(--script);letter-spacing:.02em;margin-bottom:calc(var(--lw) * -.03)}
.logo .wm-s{font:400 calc(var(--lw) * .158) var(--serif);letter-spacing:calc(var(--lw) * .035);padding-left:calc(var(--lw) * .035);text-transform:uppercase}
/* Farbblöcke rechts */
.ko-rechts{display:flex;justify-content:flex-end}
.farbblock{display:inline-flex;align-items:center;justify-content:center;width:195px;color:var(--creme);font:300 16px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;transition:background var(--t),color var(--t),width var(--t)}
.farbblock.gut{background:var(--eiche-d)}
.farbblock.buch{background:var(--marine)}
.farbblock:hover{background:var(--braun);color:var(--eiche-h)}
.kopf.hell .farbblock{color:var(--creme)}
.kopf.hell .farbblock:hover{color:var(--eiche-h)}
/* Menüzeile */
.kopf-menu{display:flex;align-items:stretch;height:53px;border-top:.8px solid var(--creme);border-bottom:.8px solid var(--creme);transition:height var(--t),border-color var(--t)}
.kopf-menu>ul{display:flex;flex:1;justify-content:space-between;padding-inline:16px}
.kopf-menu>ul>li>a{display:flex;align-items:center;height:100%;padding:0 22px;white-space:nowrap;color:inherit;font:300 var(--fs-klein)/1 var(--sans);letter-spacing:1.62px;text-transform:uppercase;transition:background var(--t),color var(--t)}
.kopf-menu>ul>li:hover>a,.kopf-menu>ul>li:focus-within>a{background:var(--marine);color:var(--creme)}
.kopf.fest .kopf-menu>ul>li:hover>a,.kopf.fest .kopf-menu>ul>li:focus-within>a{background:var(--eiche-d)}
/* Aktive Seite: keine Fläche, nur eine feine Linie unter dem Wort (dezenter als der Hover-Block) */
.kopf-menu>ul>li>a{position:relative}
.kopf-menu>ul>li.aktiv>a::after{content:"";position:absolute;left:22px;right:22px;bottom:11px;height:1.5px;background:currentColor;transform-origin:left;transition:background var(--t),transform var(--t)}
.kopf.hell .kopf-menu>ul>li.aktiv>a::after{background:var(--eiche)}
.kopf.fest .kopf-menu>ul>li.aktiv>a::after{bottom:6px}
@media (max-width:1200px){.kopf-menu>ul>li.aktiv>a::after{left:10px;right:10px}}
.kopf.hell .kopf-menu>ul>li.aktiv:hover>a::after,.kopf.hell .kopf-menu>ul>li.aktiv:focus-within>a::after{background:var(--eiche-h)}
/* Sprachwahl */
.sprache{position:relative;display:flex;align-items:center;border-left:.8px solid currentColor;padding:0 26px 0 22px;font:300 var(--fs-klein)/1 var(--sans);letter-spacing:1px;text-transform:uppercase}
.sprache>button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;color:inherit;transition:background var(--t),color var(--t)}
.sprache>button::after{content:"";width:6px;height:6px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.sprache:hover>button,.sprache:focus-within>button,.sprache.offen>button{background:var(--marine);color:var(--creme)}
.kopf.fest .sprache:hover>button,.kopf.fest .sprache.offen>button{background:var(--eiche-d)}
.sprache:hover>button::after,.sprache:focus-within>button::after,.sprache.offen>button::after{transform:translateY(2px) rotate(-135deg)}
.sprache ul{position:absolute;top:100%;left:22px;min-width:64px;background:var(--marine);color:var(--creme);padding:6px 0;opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t)}
.kopf.fest .sprache ul{background:var(--eiche-d)}
.sprache:hover ul,.sprache:focus-within ul,.sprache.offen ul{opacity:1;visibility:visible}
.sprache ul a{display:block;padding:8px 14px;color:inherit}
.sprache ul a:hover{color:var(--eiche-h)}
.sprache ul a[aria-current]{text-decoration:underline;text-underline-offset:4px}
/* Mega-Dropdown: volle Breite, drei Spalten, Ornamentband unten */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--creme);color:var(--marine);opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t)}
.kopf-menu>ul>li:hover .mega,.kopf-menu>ul>li:focus-within .mega{opacity:1;visibility:visible}
.mega-in{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,420px);justify-content:center;padding:14px 0 24px}
/* Übersichts-Link: Name der Seite, führt ganz nach oben */
.mega-titel{display:flex;align-items:center;gap:12px;width:max-content;margin:26px auto 0;padding-bottom:6px;font:300 25px/1.3 var(--serif);letter-spacing:.3px;color:var(--marine);position:relative;transition:color var(--t)}
.mega-titel::before{content:"";position:absolute;left:0;right:22px;bottom:0;height:1px;background:var(--eiche);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.mega-titel::after{content:"";width:8px;height:8px;border-top:1.2px solid currentColor;border-right:1.2px solid currentColor;transform:rotate(45deg);transition:transform var(--t)}
.mega-titel:hover{color:var(--eiche-d)}
.mega-titel:hover::before{transform:scaleX(1)}
.mega-titel:hover::after{transform:translateX(4px) rotate(45deg)}
/* nach einem Klick schließt das Dropdown, bis die Maus den Punkt verlässt */
.kopf-menu>ul>li.zu .mega{opacity:0!important;visibility:hidden!important}
.mega-in ul{padding:0 24px}
.mega-in ul+ul{border-left:1px solid var(--taube)}
.mega-in a{display:block;text-align:center;font:300 17px/44px var(--sans);color:var(--marine);letter-spacing:.2px}
.mega-in a:hover{color:var(--eiche-d)}
/* Gescrollt / Hover */
.kopf.hell{background:var(--creme);color:var(--marine)}
.kopf.hell .kopf-menu{border-color:var(--taube)}
.kopf.fest .kopf-oben{height:66px}
.kopf.fest .logo{--lw:var(--logo-b-fest)}
.kopf.fest .kopf-menu{height:37px;border-color:transparent}
/* Seiten ohne Bühne: Inhalt beginnt unter der Kopfzeile */
body[data-kopf="hell"] main{padding-top:var(--kopf-h)}
/* Ruhige Kopfzeile (Zimmerseiten, <body data-kopf="ruhig">): über dem Foto nur
   Logo, Anreise und zwei schlanke Links; Menüzeile, Linien und Farbflächen
   erscheinen erst beim Hover über die Kopfzeile oder beim Scrollen. */
body[data-kopf="ruhig"] .kopf:not(.hell) .kopf-menu{height:0;border-color:transparent;overflow:hidden}
body[data-kopf="ruhig"] .kopf:not(.hell) .farbblock{background:transparent;width:auto;padding:0 26px;font-size:var(--fs-klein)}
body[data-kopf="ruhig"] .kopf:not(.hell) .farbblock.buch span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
body[data-kopf="ruhig"] .kopf:not(.hell) .farbblock:hover{background:rgba(21,50,84,.35);color:var(--creme)}
body[data-kopf="ruhig"] .buehne::before{height:26%;background:linear-gradient(to bottom,rgba(21,50,84,.55),var(--marine-0))}
/* Sprungziele landen sichtbar unter der festen Kopfzeile */
main [id]{scroll-margin-top:calc(var(--kopf-h-fest) + 24px)}

/* Burger (Tablet/Handy) */
.burger span{display:block;width:24px;height:1.4px;background:currentColor;transition:transform var(--t)}
.burger span+span{margin-top:6px}
.burger:hover span:first-child{transform:translateY(-2px)}
.burger:hover span:last-child{transform:translateY(2px)}

/* sieben Menüpunkte (seit 30.09.2026): enger setzen, bevor es eng wird;
   unter 1.200 px entfallen „& Terrasse“ und „entdecken“ (.m-lang) */
@media (min-width:1024px) and (max-width:1299px){.kopf-menu .m-lang{display:none}}
@media (max-width:1440px){.kopf-menu>ul{padding-inline:8px}.kopf-menu>ul>li>a{padding:0 14px;letter-spacing:1.2px}}
@media (max-width:1380px){.kopf-menu>ul>li>a{padding:0 9px;letter-spacing:.8px}}
@media (max-width:1200px){
  .kopf-menu>ul>li>a{padding:0 7px;letter-spacing:.4px}
  .kopf-menu>ul{padding-inline:4px}
  .sprache{padding:0 12px 0 10px}
  .farbblock{width:160px;font-size:var(--fs-klein);letter-spacing:1px}
}
/* Tablet: Menü-Symbol · Sprache · Pin | Logo | zwei Blöcke */
@media (max-width:1023px){
  .kopf-menu{display:none}
  .kopf-oben,.kopf.fest .kopf-oben{height:var(--kopf-h)}
  .ko-links{padding-left:12px;gap:14px}
  .ko-links .seit,.ko-links .strich{display:none}
  .ko-links .pinbtn span{display:none}
  .ko-links .burger{display:grid;width:44px;height:44px;place-items:center;align-content:center;padding:0;color:inherit}
  .ko-links .sprache-m{display:flex;position:relative;align-items:center;border:0;padding:0}
  .ko-links .sprache-m>button{height:34px}
  .ko-links .sprache-m ul{left:0}
  .farbblock{width:150px;letter-spacing:.8px}
}
/* Handy: Menü-Symbol | Logo | Sprache; Blöcke wandern in die Leiste unten */
@media (max-width:767px){
  .kopf{border-bottom:2px solid transparent;transition:background var(--t),color var(--t),border-color var(--t)}
  .kopf.fest{border-bottom-color:var(--eiche)}
  .kopf.fest .kopf-oben{height:calc(var(--kopf-h-fest) - 2px)}
  .ko-links{display:contents}
  .ko-links .pinbtn,.ko-rechts{display:none}
  .ko-links .burger{grid-column:1;grid-row:1;align-self:center;margin-left:8px}
  .kopf-oben .logo{grid-column:2;grid-row:1}
  .ko-links .sprache-m{grid-column:3;grid-row:1;justify-self:end;align-self:center;margin-right:12px}
  .ko-links .sprache-m ul{left:auto;right:0}
}


/* ---------- 7  Seitenmenü (Tablet und Handy) ---------- */
.deck{position:fixed;inset:0;z-index:var(--z-deck);background:var(--marine-60);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
.deck.offen{opacity:1;visibility:visible}
.seitenmenu{position:fixed;top:0;bottom:0;left:0;z-index:var(--z-menu);width:85%;max-width:430px;background:var(--creme);color:var(--marine);transform:translateX(-100%);transition:transform .2s ease;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 70px) 0 calc(env(safe-area-inset-bottom,0px) + 80px)}
.seitenmenu.offen{transform:none}
.seitenmenu .zu{position:absolute;top:env(safe-area-inset-top,0px);left:0;width:54px;height:54px;display:grid;place-items:center;background:var(--eiche-h);color:var(--marine);transition:background var(--t),color var(--t)}
.seitenmenu .zu:hover{background:var(--eiche-d);color:var(--creme)}
.seitenmenu .haupt>li{border-bottom:1px solid var(--taube)}
.seitenmenu .haupt>li:first-child{border-top:1px solid var(--taube)}
.seitenmenu .zm{display:flex;align-items:stretch}
.seitenmenu .zm>a{flex:1;min-width:0;display:flex;align-items:center;padding:16px 12px 16px 24px;font:400 21px/24px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--marine);transition:color var(--t)}
.seitenmenu .zm>a:hover,.seitenmenu .haupt>li.aktiv .zm>a{color:var(--eiche-d)}
.seitenmenu .haupt>li.aktiv .zm>a span{box-shadow:inset 0 -1.5px 0 var(--eiche)}
.seitenmenu .zm>button{flex:none;width:62px;display:grid;place-items:center;border-left:1px solid rgba(106,131,160,.35);color:var(--marine);transition:background var(--t),color var(--t)}
.seitenmenu .zm>button::after{content:"";width:9px;height:9px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.seitenmenu .zm>button:hover{background:var(--eiche-h)}
.seitenmenu .haupt>li.offen .zm>button::after{transform:translateY(2px) rotate(-135deg)}
.seitenmenu .unter{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t)}
.seitenmenu .unter>div{overflow:hidden}
.seitenmenu li.offen .unter{grid-template-rows:1fr}
.seitenmenu .unter ul{padding:0 0 12px}
.seitenmenu .unter a{display:block;padding:9px 24px 9px 44px;font:300 18px/24px var(--sans);color:var(--marine);transition:background var(--t),color var(--t)}
.seitenmenu .unter a:hover,.seitenmenu .unter a[aria-current]{background:var(--eiche-d);color:var(--creme)}
.seitenmenu .neben{padding:24px 24px 0;display:grid;gap:14px;font:300 17px/24px var(--sans)}
.seitenmenu .neben a,.seitenmenu .neben button{color:var(--marine);text-align:left;font:inherit}
.seitenmenu .neben a:hover,.seitenmenu .neben button:hover{color:var(--eiche-d)}
.seitenmenu .neben .sprachen{display:flex;gap:16px;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1px;text-transform:uppercase}
.seitenmenu .aktion{margin:24px 24px 0;display:grid;gap:0;justify-items:start}


/* ---------- 8  Fußzeile ---------- */
.fuss{position:relative;background:var(--marine);color:var(--creme);font:400 16px/24px var(--serif);letter-spacing:.37px}
.fuss .luft{position:absolute;inset:0;overflow:hidden}
.fuss .luft img{width:100%;height:100%;object-fit:cover;opacity:.15}
.fuss .luft .foto{position:absolute;inset:0;background:transparent}
.fuss .luft .foto::after{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 24px 76px;color:var(--eiche-h);opacity:.5}
.fuss .band{position:relative;z-index:1}
.fuss-in{position:relative;z-index:1;display:grid;grid-template-columns:40% 1fr;max-width:var(--gross);margin-inline:auto;padding:100px 60px 90px}
.fuss a{color:var(--creme);transition:opacity var(--t)}
.fuss a:hover{opacity:.8}
.fuss-links{display:grid;gap:14px;justify-items:center;align-content:start;text-align:center;padding-right:60px;border-right:1px solid var(--creme-hauch)}
.fuss-links .haus{width:230px;max-width:100%;height:auto;margin-bottom:10px}
.fuss .platzhalter{color:var(--eiche-h);border-color:var(--eiche-h)}
.fuss-links b{font-weight:600}
.fuss-rechts{padding-left:60px;display:grid;gap:40px;align-content:start;min-width:0}
.fuss-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.fuss-spalten h4{font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1.62px;text-transform:uppercase;color:var(--eiche-h);margin-bottom:14px}
.fuss-spalten ul{display:grid;gap:8px}
.rechtszeile{position:relative;z-index:1;border-top:1px solid rgba(255,246,236,.25);padding:20px 60px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font:400 var(--fs-klein)/24px var(--serif)}
.rechtszeile ul{display:flex;flex-wrap:wrap;gap:6px 22px}
@media (max-width:1023px){
  .fuss-in{grid-template-columns:1fr;padding:75px 20px 65px;gap:40px;text-align:center}
  .fuss-links{padding-right:0;border-right:0;border-bottom:1px solid var(--creme-hauch);padding-bottom:40px}
  .fuss-rechts{padding-left:0;justify-items:center}
  .rechtszeile{padding-inline:20px;justify-content:center;text-align:center}
}
@media (max-width:767px){
  .fuss{font-size:var(--fs-klein)}
  .fuss-spalten{grid-template-columns:1fr;gap:28px}
  .rechtszeile{padding-bottom:20px}
}


/* ---------- 8b  Fußzeile: Linkgruppen (seit 30.09.2026) ----------
   Desktop und Tablet: drei offene Spalten. Handy: jede Gruppe ist eine Zeile
   mit Winkel und klappt auf (wie das Akkordeon), Kontakt steht kompakt darüber. */
.fuss-gruppe h4 button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:default;text-align:left}
.fuss-gruppe .winkel{display:none;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t);flex:none}
@media (max-width:1023px){.fuss-gruppe h4 button{justify-content:center}}
@media (max-width:767px){
  .fuss-in{padding:56px var(--rand) 36px;gap:30px}
  .fuss-links{gap:10px;padding-bottom:0;border-bottom:0}
  .fuss-links .haus{width:160px;margin-bottom:6px}
  .fuss-rechts{justify-items:stretch}
  .fuss-spalten{gap:0;text-align:left;border-bottom:1px solid var(--creme-hauch)}
  .fuss-gruppe{border-top:1px solid var(--creme-hauch)}
  .fuss-spalten .fuss-gruppe h4{margin:0}
  .fuss-gruppe h4 button{justify-content:space-between;min-height:56px;padding:4px 4px;cursor:pointer}
  .fuss-gruppe .winkel{display:block}
  .js .fuss-gruppe ul{display:none}
  .js .fuss-gruppe.offen ul{display:grid}
  .fuss-gruppe.offen .winkel{transform:rotate(-135deg) translate(-2px,-2px)}
  .fuss-gruppe ul{grid-template-columns:1fr 1fr;gap:4px 18px;padding:0 4px 20px}
  .fuss-gruppe ul a{display:block;padding:6px 0;font-size:16px}
  .fuss .luft .foto::after{display:none}
  .rechtszeile{flex-direction:column-reverse;align-items:center;gap:14px;padding-top:22px}
  .rechtszeile ul{justify-content:center;gap:4px 18px}
}

/* ---------- 8a  Flaschenpost vom Rhein (Newsletter, direkt über der Fußzeile) ---------- */
.flaschenpost{background:var(--eiche-h);padding:84px var(--rand) 90px;text-align:center}
.fp-in{max-width:720px;margin-inline:auto;display:grid;justify-items:center}
.flaschenpost svg{width:54px;height:54px;stroke:var(--eiche-d);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.flaschenpost:hover svg>*{stroke-dasharray:1;animation:zeichnen 1.1s ease-out both}}
.flaschenpost .h-serif{color:var(--marine)}
.flaschenpost .fp-text{margin-top:12px;max-width:600px;font:300 17px/32px var(--sans);color:var(--braun)}
.fp-form{display:grid;grid-template-columns:1fr auto;gap:0;width:100%;max-width:560px;margin-top:30px;text-align:left}
.fp-form label{grid-column:1/-1;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d);margin-bottom:8px}
.fp-form input{width:100%;height:48px;border:1px solid var(--taube);border-right:0;border-radius:0;background:var(--creme);color:var(--braun);padding:0 16px;font:400 16px var(--sans)}
.fp-form input:focus{outline:3px solid var(--marine);outline-offset:2px}
.flaschenpost .fp-hinweis{margin-top:14px;font:300 var(--fs-klein)/24px var(--sans);color:var(--eiche-d)}
.flaschenpost .fp-hinweis a{border-bottom:1px solid currentColor}
.flaschenpost .ok{margin-top:18px;font:400 16px/26px var(--serif);color:var(--marine)}
@media (max-width:767px){
  .flaschenpost{padding:60px var(--rand) 64px}
  .fp-form{grid-template-columns:1fr;gap:10px}
  .fp-form input{border-right:1px solid var(--taube)}
  .fp-form .btn{width:100%}
}

/* ---------- 9  Mobile Leiste unten (bis 767 px) ---------- */
.mobilbar{display:none}
@media (max-width:767px){
  body{padding-bottom:calc(55px + env(safe-area-inset-bottom,0px))}
  .mobilbar{display:grid;grid-template-columns:55px 55px 1fr;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-leiste);height:calc(55px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--creme);border-top:1px solid var(--taube)}
  .mobilbar a,.mobilbar button{display:grid;place-items:center;color:var(--marine);font:300 16px/1 var(--sans);letter-spacing:1.62px;text-transform:uppercase;height:55px;transition:background var(--t),color var(--t)}
  .mobilbar a+a,.mobilbar button{border-left:1px solid var(--taube)}
  .mobilbar .buch{background:var(--marine);color:var(--creme);border:0}
  .mobilbar .buch:hover{background:var(--braun);color:var(--eiche-h)}
}


/* ---------- 10  Fenster, Cookie-Hinweis, „Seite folgt“ ---------- */
.fenster{position:fixed;inset:0;z-index:var(--z-fenster);background:rgba(21,50,84,.8);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.fenster.offen{opacity:1;visibility:visible}
.fenster-in{position:relative;background:var(--creme);color:var(--marine);width:min(1100px,100%);max-height:calc(100svh - 40px);overflow:auto;padding:15px;transform:scale(.8);transition:transform .3s ease}
.fenster.offen .fenster-in{transform:none}
.fenster .zu{position:absolute;right:0;top:0;width:54px;height:54px;display:grid;place-items:center;color:var(--marine);background:var(--creme);z-index:3;transition:color var(--t)}
.fenster .zu:hover{color:var(--eiche-d)}
/* Karte */
.karte-flaeche{position:relative;min-height:560px;display:grid;grid-template-columns:1fr 320px}
.karte-bild{position:relative;background:var(--eiche-h);display:grid;place-items:center;padding:30px;text-align:center;font:300 16px/29px var(--sans);color:var(--braun)}
.karte-bild>div{display:grid;justify-items:center;gap:14px;max-width:420px}
.karte-bild .pin-hotel{width:40px;height:60px;color:var(--marine)}
.karte-bild iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.karte-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.karte-liste{padding:34px 30px;display:grid;gap:4px;align-content:start}
.karte-liste h3{font:300 25px/33px var(--serif);margin-bottom:12px}
.karte-liste li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--taube);font:300 16px/26px var(--sans);color:var(--braun)}
.karte-liste li b{font-weight:400;color:var(--marine)}
.karte-liste li svg{width:18px;height:26px;flex:none;color:var(--eiche)}
.karte-liste li:nth-child(2) svg{color:var(--marine)}
.karte-liste li.kopfzeile{display:block;border:0;padding:0}
.karte-liste li.fusszeile{border:0}
/* Galerie */
.galerie-fenster .fenster-in{width:min(1100px,100%)}
.gal-buehne{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--greige);overflow:hidden}
.gal-buehne .gal-dia{position:absolute;inset:0;opacity:0;transition:opacity var(--t-slide)}
.gal-buehne .gal-dia.aktiv{opacity:1}
.gal-buehne img{width:100%;height:100%;object-fit:cover}
.gal-buehne .foto{position:absolute;inset:0}
.gal-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;background:var(--creme);color:var(--marine);display:grid;place-items:center;z-index:2;transition:color var(--t)}
.gal-pfeil svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.gal-pfeil:hover{color:var(--eiche-d)}
.gal-pfeil.links{left:0}.gal-pfeil.rechts{right:0}
.gal-etikett{position:absolute;left:15px;bottom:15px;z-index:2;background:var(--creme);color:var(--marine);padding:16px 20px;display:grid;gap:8px}
.gal-etikett h3{font:300 24px/30px var(--serif);color:var(--marine)}
.gal-etikett .zeile{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1px;text-transform:uppercase}
.gal-etikett .zeile a:not(.btn){color:var(--marine);border-bottom:1px solid var(--taube)}
.gal-etikett .zeile a:not(.btn):hover{color:var(--eiche-d)}
.gal-punkte{position:absolute;right:20px;bottom:20px;z-index:2;display:flex;gap:10px}
@media (max-width:1023px){
  .karte-flaeche{grid-template-columns:1fr}
  .karte-bild{min-height:320px}
}
@media (max-width:767px){
  .fenster{padding:10px}
  .karte-liste{padding:24px 16px}
  .gal-etikett{position:static;padding:14px 0 0}
  .gal-punkte{bottom:12px;right:12px}
}

/* Cookie-Hinweis */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cookie);background:var(--creme);color:var(--braun);border-top:1px solid var(--taube);padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto;gap:16px 40px;align-items:center;font:300 var(--fs-klein)/24px var(--sans)}
.cookie .knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cookie .knoepfe .btn{min-width:170px}
.cookie a{color:var(--eiche-d);border-bottom:1px solid currentColor}
@media (max-width:1023px){.cookie{grid-template-columns:1fr}.cookie .knoepfe{justify-content:start}}
@media (max-width:767px){
  .cookie{bottom:calc(55px + env(safe-area-inset-bottom,0px));padding-bottom:16px;gap:12px}
  .cookie .knoepfe{grid-template-columns:1fr}
  .cookie .knoepfe .btn{min-width:0;width:100%}
}

/* Hinweis für Links auf Seiten, die noch gebaut werden */
.folgt-hinweis{position:fixed;left:50%;bottom:28px;z-index:var(--z-fenster);transform:translate(-50%,20px);background:var(--marine);color:var(--creme);padding:12px 22px;font:300 var(--fs-klein)/24px var(--sans);letter-spacing:.3px;opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t),visibility var(--t);pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.folgt-hinweis.zeigen{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (max-width:767px){.folgt-hinweis{bottom:calc(70px + env(safe-area-inset-bottom,0px))}}


/* =====================================================================
   11  BAUSTEINE
   ===================================================================== */

/* ---------- 11.1  Bühne ----------
   <section class="buehne"> volle Fensterhöhe, Marine-Verlauf oben
   (85 % → transparent, obere 35 %), Ornamentband unten.
   Varianten: .film (Startseite), .galerie-buehne (Zimmerseiten). */
.buehne{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--marine)}
.buehne::before{content:"";position:absolute;left:0;right:0;top:0;height:35%;background:linear-gradient(to bottom,var(--marine-85),var(--marine-0));z-index:2;pointer-events:none}
.buehne>.band{position:absolute;left:0;right:0;bottom:0;z-index:4;background-color:var(--creme)}
.schiene{display:flex;height:100%;transition:transform var(--t-slide);will-change:transform}
.schiene.sofort{transition:none}
.buehne .schiene{position:absolute;inset:0}
.dia{flex:0 0 100%;position:relative;height:100%;min-width:0;overflow:hidden}
.dia>img,.dia>.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Hochformat mit Person: Ausschnitt weiter oben ansetzen, damit der Kopf im Bild bleibt */
.dia>img.oben{object-position:50% 22%}
/* Bildunterschrift in der Bühne */
.dia .bu{position:absolute;left:24px;bottom:56px;z-index:3;max-width:min(560px,70%);color:var(--creme);font:300 var(--fs-klein)/22px var(--sans);letter-spacing:.3px;opacity:.9;text-shadow:0 1px 6px rgba(21,50,84,.6)}
/* Hinweis auf fehlenden Film */
.buehne .hinweis{position:absolute;left:24px;bottom:56px;z-index:3;font:300 var(--fs-klein)/24px var(--sans);color:var(--creme);opacity:.8}
.buehne .hinweis .platzhalter{color:inherit;border-color:currentColor}
/* Scroll-Pfeil schwebt 8 px (2,5 s) */
.pfeil-runter{position:absolute;left:50%;bottom:44px;z-index:3;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;color:var(--creme);animation:schweben 2.5s cubic-bezier(.455,.03,.515,.955) infinite;transition:opacity var(--t)}
.pfeil-runter:hover{opacity:.8;color:var(--creme)}
.pfeil-runter svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.2}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
/* Galerie-Bühne: etwas niedriger, mit Pfeilen und Lupe */
.galerie-buehne{height:min(100svh,760px);min-height:520px;background:var(--greige)}
/* Lebendige Bühne (.lebendig, Zimmerseiten): statt Lupe und starrer Pfeile
   ein runder Zeiger, der der Maus folgt („Zurück“ / „Weiter“), langsames
   Heranzoomen des aktuellen Fotos, Zähler und Fortschrittsstriche unten
   links, „Alle Fotos“ unten rechts. Pfeil-Buttons bleiben für Tastatur und
   Screenreader, sichtbar nur mit Fokus. */
.lebendig .dia>img{transform:scale(1.001);transition:transform 9s cubic-bezier(.2,.6,.3,1)}
.lebendig .dia.jetzt>img{transform:scale(1.07)}
.lebendig .pfeil{opacity:0;pointer-events:none}
.lebendig .pfeil:focus-visible{opacity:1;pointer-events:auto}
.zeiger{position:absolute;left:0;top:0;z-index:6;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:7px;color:var(--marine);background:var(--creme);pointer-events:none;opacity:0;transform:translate3d(-200px,-200px,0);transition:opacity .4s ease,scale .3s ease;will-change:transform}
.zeiger .zp{width:18px;height:1px;background:currentColor;position:relative;transition:transform var(--t)}
.zeiger .zp::before{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.zeiger.links .zp{transform:rotate(180deg)}
/* Beschriftung im Zeiger bewusst klein (12 px, Entscheidung 30.09.2026): nur Zierde, aria-hidden */
.zeiger .zt{font:400 12px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase}
/* kleiner Zeiger auf Bildern im Inhalt: nur Pfeil */
.zeiger.klein{width:54px;height:54px;margin:-27px 0 0 -27px;gap:0}
.zeiger.klein .zt{display:none}
.zeigt>.zeiger{opacity:.95}
.zeigt>.zeiger.druck{scale:.88}
@media (hover:hover) and (pointer:fine){.zeigt{cursor:none}}
@media (hover:none){.zeiger{display:none}}
.lebendig .zaehler{position:absolute;left:clamp(16px,3vw,40px);bottom:54px;z-index:5;color:var(--creme);font:300 var(--fs-klein)/1 var(--sans);letter-spacing:1.6px;text-shadow:0 1px 6px rgba(21,50,84,.5)}
.lebendig .zaehler b{font:400 22px/1 var(--serif);letter-spacing:.5px;margin-right:4px}
.lebendig>.punkte{left:calc(clamp(16px,3vw,40px) + 96px);right:auto;bottom:40px;gap:6px}
.lebendig>.punkte button{position:relative;width:40px;height:44px;border:0;border-radius:0;background:none!important}
.lebendig>.punkte button::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,246,236,.45)}
.lebendig>.punkte button::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:2px;background:var(--creme);transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
.lebendig>.punkte button:hover::after{transform:scaleX(.4)}
.lebendig>.punkte button[aria-current]::after{transform:scaleX(1)}
.lebendig .alle-fotos{position:absolute;right:clamp(16px,3vw,40px);bottom:48px;z-index:5;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 4px;color:var(--creme);font:500 var(--fs-klein)/1 var(--serif);letter-spacing:.37px;text-transform:uppercase;text-shadow:0 1px 6px rgba(21,50,84,.5)}
.lebendig .alle-fotos svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform var(--t)}
.lebendig .alle-fotos span{position:relative;padding-bottom:3px}
.lebendig .alle-fotos span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t)}
.lebendig .alle-fotos:hover span::after{transform:scaleX(1);transform-origin:left}
.lebendig .alle-fotos:hover svg{transform:rotate(90deg)}
@media (max-width:767px){
  .zeiger{display:none}
  .lebendig .zaehler{left:16px;bottom:86px}
  .lebendig>.punkte{left:auto;right:16px;transform:none;bottom:74px}
  .lebendig>.punkte button{width:26px}
  .lebendig .alle-fotos{right:auto;left:16px;bottom:30px;height:40px}
}
@media (prefers-reduced-motion:reduce){.lebendig .dia>img,.lebendig .dia.jetzt>img{transform:none;transition:none}}
@media (max-width:767px){
  .buehne{height:calc(100svh - 55px - env(safe-area-inset-bottom,0px))}
  .galerie-buehne{height:min(calc(100svh - 55px),760px)}
  .pfeil-runter{display:none}
  .dia .bu,.buehne .hinweis{left:16px;bottom:88px}
}

/* ---------- 11.2  Punkte, Pfeile, Lupe (für alle Slider) ---------- */
.punkte{position:absolute;right:40px;bottom:50px;z-index:5;display:flex;gap:10px}
.punkte button,.gal-punkte button{width:15px;height:15px;border:.8px solid var(--creme);border-radius:50%;transition:background var(--t)}
.punkte button:hover,.punkte button[aria-current],.gal-punkte button:hover,.gal-punkte button[aria-current]{background:var(--creme)}
.pfeil{position:absolute;top:50%;z-index:5;width:60px;height:60px;transform:translateY(-50%);display:grid;place-items:center;color:var(--creme);transition:color var(--t)}
.pfeil::before{content:"";width:22px;height:22px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(4px) rotate(45deg)}
.pfeil.rechts::before{transform:translateX(-4px) rotate(-135deg)}
.pfeil.links{left:clamp(8px,3vw,40px)}
.pfeil.rechts{right:clamp(8px,3vw,40px)}
.pfeil:hover{color:var(--eiche-h)}
/* Lupe: Fläche dunkelt ab (Marine 50 %), Kreis erscheint */
.lupe{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:var(--marine-0);transition:background var(--t);cursor:zoom-in;color:var(--creme)}
.lupe span{width:54px;height:54px;border:2px solid var(--creme);border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity var(--t)}
.lupe svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.lupe:hover{background:rgba(21,50,84,.5)}
.lupe:hover span,.lupe:focus-visible span{opacity:1}
@media (max-width:767px){
  .punkte{right:auto;left:50%;transform:translateX(-50%);bottom:44px}
  .lupe{background:none!important}
  .lupe span{opacity:1}
}

/* ---------- 11.3  Buchungsleiste (später Mews-Einbettung) ---------- */
.buchung{padding:60px var(--rand) 0}
.bu-kasten{max-width:var(--spalte);margin-inline:auto;border:1px solid var(--taube);display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:stretch}
.bu-feld{display:grid;gap:4px;padding:16px 28px;border-right:1px solid var(--taube);min-width:0}
.bu-feld label{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.62px;text-transform:uppercase;color:var(--eiche-d)}
.bu-feld input,.bu-feld select{width:100%;min-width:0;border:0;background:transparent;font:400 20px/32px var(--serif);color:var(--marine);padding:0;border-radius:0;appearance:none;-webkit-appearance:none}
.bu-feld select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23153254' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center}
.bu-feld input:focus,.bu-feld select:focus{outline:3px solid var(--marine);outline-offset:2px}
.bu-btn{display:flex;align-items:stretch;min-width:0}
.bu-btn .btn{height:auto;padding:0 34px}
.buchung>.direkt{text-align:center;margin-top:14px}
@media (max-width:767px){
  .buchung{padding-top:40px}
  .bu-kasten{grid-template-columns:1fr 1fr}
  .bu-feld{padding:12px 16px}
  .bu-feld:nth-child(2){border-right:0}
  .bu-feld:nth-child(3){border-top:1px solid var(--taube)}
  .bu-btn{border-top:1px solid var(--taube)}
  .bu-btn .btn{width:100%;padding:0 24px}
}

/* ---------- 11.4  Einleitung (H1, Unterzeile, Text) ---------- */
.einleitung{padding:70px var(--rand) var(--sek);text-align:center}
.einleitung .emblem{display:block;width:210px;max-width:60%;height:auto;margin:0 auto 34px}
.einleitung .h-gross{max-width:var(--spalte);margin-inline:auto}
.einleitung .unterschrift{margin-top:30px}
@media (max-width:767px){.einleitung{padding-top:56px}.einleitung .emblem{width:170px}}

/* ---------- 11.5  Angebotskacheln (Arrangements) ---------- */
.kacheln-sek{padding:var(--sek) var(--rand)}
.kacheln{max-width:1315px;margin:60px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 30px}
.kachel{display:grid;align-content:start;color:var(--marine)}
.kachel .k-bild{position:relative;aspect-ratio:3/2;max-width:100%;overflow:hidden;background:var(--greige)}
.kachel .k-bild .foto{position:absolute;inset:0}
.kachel .k-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.kachel:hover .k-bild img,.kachel.hov .k-bild img{transform:scale(1.04)}
.kachel h3{margin-top:24px;font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
.kachel p{margin-top:10px;font:300 16px/28px var(--sans);color:var(--braun)}
.kachel .entdecken{margin-top:18px;justify-self:start}
@media (max-width:1280px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}}
@media (max-width:767px){.kacheln{grid-template-columns:1fr;gap:44px;margin-top:40px}}
.kacheln.drei{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px}
.lr-block .inhalt .knoepfe{justify-content:flex-start;margin-top:26px}
@media (max-width:767px){.lr-block .inhalt .knoepfe{justify-content:center}}
.termine>.h-gross{margin-bottom:10px}
.lr-bloecke>.unterzeile+.lr-block{margin-top:80px}
@media (max-width:767px){.lr-bloecke>.unterzeile+.lr-block{margin-top:44px}}
@media (max-width:899px){.kacheln.drei{grid-template-columns:1fr;max-width:560px}}

/* ---------- 11.6  Zimmer-Slider (2,1 Karten, Endlosschleife) ---------- */
.zimmer{padding-block:var(--sek);overflow:hidden}
.zi-kopf{padding-inline:var(--zl,24px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.zi-kopf .h-gross{text-align:left}
.zi-steuer{display:flex;align-items:center;gap:22px;flex:none}
.zi-zahl{display:flex;align-items:center;gap:14px;font:300 17px/1 var(--serif);color:var(--marine);font-variant-numeric:tabular-nums}
.zi-leiste{position:relative;width:120px;height:1px;background:var(--greige);overflow:hidden}
.zi-leiste span{position:absolute;left:0;top:0;bottom:0;background:var(--marine);transition:width 1s cubic-bezier(.77,0,.175,1)}
.zi-steuer button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--taube);color:var(--marine);transition:background var(--t),color var(--t),border-color var(--t)}
.zi-steuer button:hover{background:var(--marine);border-color:var(--marine);color:var(--creme)}
.zi-steuer svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4}
.zi-buehne{position:relative;margin-top:50px;touch-action:pan-y;cursor:grab}
.zi-buehne.zieht{cursor:grabbing}
.zi-spur{display:flex;gap:15px;transition:transform 1s cubic-bezier(.77,0,.175,1);will-change:transform}
.zi-spur.sofort,.zi-buehne.zieht .zi-spur{transition:none}
.zi-karte{flex:0 0 var(--kw,548px);width:var(--kw,548px);user-select:none}
.zi-bild{position:relative;aspect-ratio:548/501;max-width:100%;overflow:hidden;background:var(--greige);display:block;width:100%;text-align:left}
.zi-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.06);opacity:.7;transition:transform 1.6s cubic-bezier(.22,.61,.36,1),opacity 1s ease}
.zi-bild .foto{position:absolute;inset:0;opacity:.7;transition:opacity 1s ease}
.zi-karte.aktiv .zi-bild img{transform:scale(1);opacity:1}
.zi-karte.aktiv .zi-bild .foto{opacity:1}
.zi-bild::before{content:"";position:absolute;inset:0;background:var(--marine);opacity:0;transition:opacity var(--t);z-index:1}
.zi-bild .zi-lupe{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:2px solid var(--creme);border-radius:50%;display:grid;place-items:center;color:var(--creme);opacity:0;transition:opacity var(--t);z-index:2}
.zi-bild .zi-lupe svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.zi-karte.aktiv .zi-bild:hover::before,.zi-karte.aktiv.hov .zi-bild::before{opacity:.45}
.zi-karte.aktiv .zi-bild:hover .zi-lupe,.zi-karte.aktiv.hov .zi-bild .zi-lupe{opacity:1}
.zi-text{margin-top:28px;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.zi-karte.aktiv .zi-text{opacity:1;transform:none;transition:opacity .7s ease .45s,transform .7s cubic-bezier(.22,.61,.36,1) .45s;pointer-events:auto}
.zi-text h3{margin-top:4px;font:300 30px/40px var(--serif);color:var(--marine)}
.zi-text p{margin-top:8px;font:300 16px/28px var(--sans);color:var(--braun);max-width:520px}
.zi-text .zi-preis{margin-top:8px;font:400 16px/24px var(--serif);color:var(--braun)}
.zi-text .zi-preis b{font:600 20px/24px var(--serif);color:var(--marine)}
.zi-btns{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin-top:22px}
@media (max-width:767px){
  .zi-kopf{flex-wrap:wrap}
  .zi-steuer{gap:14px}
  .zi-leiste{width:60px}
  .zi-buehne{margin-top:34px}
  .zi-text h3{font-size:26px;line-height:34px}
  .zi-btns{gap:20px}
}

/* ---------- 11.7  Instagram (lädt erst nach Zustimmung) ---------- */
.instagram{padding-top:var(--sek)}
.insta-kopf{text-align:center;padding-inline:var(--rand)}
.insta-kopf .h-gross{text-align:center}
.insta-tag{margin-top:10px;font:400 17px/29px var(--serif);color:var(--eiche-d)}
.insta-icons{display:flex;justify-content:center;gap:16px;margin-top:26px}
.insta-icons a{width:44px;height:44px;border:1px solid var(--marine);border-radius:50%;display:grid;place-items:center;color:var(--marine);transition:background var(--t),color var(--t)}
.insta-icons a:hover{background:var(--marine);color:var(--creme)}
.insta-raster{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:50px;padding-inline:20px}
.post{position:relative;display:block;aspect-ratio:1;max-width:100%;overflow:hidden;background:var(--greige);color:var(--creme)}
.post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post .art{position:absolute;right:12px;top:12px;z-index:2;opacity:.9}
.post .art svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.post .cap{position:absolute;inset:0;background:rgba(21,50,84,.8);display:grid;align-content:center;gap:10px;padding:22px;text-align:center;font:300 var(--fs-klein)/24px var(--sans);opacity:0;transition:opacity .3s ease}
.post .cap b{font:400 16px/24px var(--serif);display:block}
.post:hover .cap,.post.hov .cap,.post:focus-visible .cap{opacity:1}
.insta-zustimmung{position:absolute;inset:0;z-index:4;background:rgba(255,246,236,.92);display:grid;place-items:center;text-align:center;padding:24px}
.insta-zustimmung div{max-width:560px;display:grid;gap:18px;justify-items:center;font:300 16px/29px var(--sans);color:var(--braun)}
@media (max-width:767px){.insta-raster{grid-template-columns:1fr 1fr;gap:12px;padding-inline:16px}}

/* ---------- 11.8  Symbol-Leiste (eine Zeile, z. B. Startpunkte ab Hotel) ----------
   Jedes Feld ist ein Link zum passenden Abschnitt. Hover: Eiche-hell-Fläche
   steigt von unten auf, das Symbol hebt sich und zeichnet sich neu, ein
   feiner Strich wächst unter dem Text. Beim Einblenden nacheinander (Stufen). */
.symbolleiste{margin-top:40px}
.symbolleiste .rahmen{border-top:1px solid var(--taube);border-bottom:1px solid var(--taube);display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.symbolleiste .feld{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:start;gap:8px;padding:28px 14px 30px;text-align:center;color:var(--marine);border-left:1px solid var(--taube);overflow:hidden}
.symbolleiste .feld:first-child{border-left:0}
.symbolleiste .feld::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--eiche-h);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.symbolleiste .feld::after{content:"";position:absolute;left:50%;bottom:16px;width:28px;height:1px;background:var(--eiche-d);transform:translateX(-50%) scaleX(0);transition:transform var(--t)}
.symbolleiste .feld svg{width:44px;height:38px;stroke:var(--taube);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.2,.7,.2,1),stroke var(--t)}
.symbolleiste .feld b{font:400 16px/24px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--marine)}
.symbolleiste .feld span{font:400 16px/24px var(--serif);letter-spacing:.2px;color:var(--braun)}
.symbolleiste .feld em{font-style:normal;color:var(--eiche-d)}
.symbolleiste .feld:hover::before,.symbolleiste .feld.hov::before,.symbolleiste .feld:focus-visible::before{transform:scaleY(1)}
.symbolleiste .feld:hover::after,.symbolleiste .feld.hov::after,.symbolleiste .feld:focus-visible::after{transform:translateX(-50%) scaleX(1)}
.symbolleiste .feld:hover svg,.symbolleiste .feld.hov svg,.symbolleiste .feld:focus-visible svg{transform:translateY(-5px);stroke:var(--eiche-d)}
.symbolleiste .feld:focus-visible{outline-offset:-3px}
/* nacheinander einblenden */
.symbolleiste .feld.rv:nth-child(2){transition-delay:.08s}.symbolleiste .feld.rv:nth-child(3){transition-delay:.16s}
.symbolleiste .feld.rv:nth-child(4){transition-delay:.24s}.symbolleiste .feld.rv:nth-child(5){transition-delay:.32s}
.symbolleiste .feld.rv:nth-child(6){transition-delay:.4s}
.symbolleiste .feld.rv.in{transition-delay:0s}
/* Symbol zeichnet sich beim Hover neu (Symbolleiste und Symbolraster der Zimmer) */
@keyframes zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .symbolleiste .feld:hover svg>*,.symbole li:hover svg>*{stroke-dasharray:1;animation:zeichnen .9s ease-out both}
}
@media (max-width:1023px){
  .symbolleiste .rahmen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .symbolleiste .feld:nth-child(3n+1){border-left:0}
  .symbolleiste .feld:nth-child(n+4){border-top:1px solid var(--taube)}
}
@media (max-width:767px){
  .symbolleiste{margin-top:32px}
  .symbolleiste .rahmen{grid-template-columns:1fr 1fr}
  .symbolleiste .feld{padding:20px 8px 26px}
  .symbolleiste .feld:nth-child(n){border-left:1px solid var(--taube)}
  .symbolleiste .feld:nth-child(odd){border-left:0}
  .symbolleiste .feld:nth-child(n+3){border-top:1px solid var(--taube)}
  .symbolleiste .feld::after{bottom:12px}
}

/* ---------- 11.9  Links-Rechts-Blöcke (B2): Bild-Slider + Text, abwechselnd ----------
   Kompakt (seit 30.09.2026): Block max. 1.080 px breit, Bild 4:3, ein Absatz
   Text – ein Block passt mit Luft auf einen Bildschirm. */
.lr-bloecke{padding-block:var(--sek) var(--nach)}
.lr-bloecke>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto var(--sek)}
.lr-block{display:flex;align-items:center;max-width:1080px;margin-inline:auto}
.lr-block+.lr-block{margin-top:110px}
.lr-block .bilder{position:relative;flex:none;width:46%;aspect-ratio:4/3;background:var(--greige);overflow:hidden}
.lr-block .bilder .schiene{position:absolute;inset:0}
.lr-block .bilder .punkte{bottom:18px;right:18px}
.lr-block .inhalt{flex:1;display:flex;flex-direction:column;padding:0 0 0 64px;min-width:0}
.lr-block:nth-of-type(2n) .bilder{order:1}
.lr-block:nth-of-type(2n) .inhalt{order:0;padding:0 64px 0 0}
.lr-block h3{font:300 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:.4px;color:var(--marine);margin-bottom:14px}
.lr-block p{font-size:17px;line-height:32px}
.lr-block p+p{margin-top:14px}
.lr-block .weg{position:relative;margin-top:24px;padding-top:18px;display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:start;font:400 15px/25px var(--serif);color:var(--braun)}
.lr-block .weg::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--taube);opacity:.6}
.lr-block .weg svg{width:20px;height:20px;stroke:var(--eiche);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.lr-block .weg b{font:400 var(--fs-klein) var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--marine);display:block;margin-bottom:2px}
/* Bild zoomt beim Hover über den Block sanft auf */
.lr-block .dia>img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.lr-block:hover .dia>img{transform:scale(1.04)}
@media (max-width:1023px){
  .lr-block .inhalt{padding-left:36px}
  .lr-block:nth-of-type(2n) .inhalt{padding:0 36px 0 0}
  .lr-block+.lr-block{margin-top:80px}
}
@media (max-width:767px){
  .lr-block{flex-direction:column;align-items:stretch}
  .lr-block .bilder,.lr-block .inhalt,.lr-block:nth-of-type(2n) .inhalt{width:100%;padding:0}
  .lr-block .bilder{max-width:100%}
  .lr-block:nth-of-type(2n) .bilder{order:0}
  .lr-block .inhalt{padding-top:22px;text-align:center}
  .lr-block .weg{text-align:left;margin-top:20px}
  .lr-block .bilder .punkte{left:50%;right:auto;transform:translateX(-50%);bottom:16px}
  .lr-block+.lr-block{margin-top:56px}
}

/* ---------- 11.10  Termine (Liste mit orangem Kalenderpunkt) ---------- */
.termine{padding-bottom:var(--sek)}
.termine ol{max-width:960px;margin:40px auto 0;border-top:1px solid var(--taube)}
.termine li{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--taube);align-items:baseline}
.termine .wann{position:relative;padding-left:22px;font:400 var(--fs-klein) var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--marine)}
.termine .wann::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;background:var(--orange);transform:translateY(-50%)}
.termine .was b{display:block;font:400 22px/32px var(--serif);color:var(--marine);letter-spacing:.2px}
.termine .was span{font:300 16px/28px var(--sans)}
@media (max-width:767px){.termine li{grid-template-columns:1fr;gap:4px;text-align:left}}
/* Jahreskalender: drei Spalten, Linie oben färbt sich beim Hover */
.termine ol.jahr{max-width:var(--spalte);margin:50px auto 0;border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 50px;counter-reset:m}
.jahr li{position:relative;display:block;padding:26px 0 34px;border-top:1px solid var(--taube);border-bottom:0;text-align:left}
.jahr li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--eiche);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.jahr li:hover::after{transform:scaleX(1)}
.jahr .was{display:block;margin-top:14px}
.jahr .was b{font:300 25px/32px var(--serif);letter-spacing:.2px}
.jahr .was>span{display:block;margin-top:8px;font:300 16px/29px var(--sans);color:var(--braun)}
.jahr .was .entdecken{margin-top:10px}
.jahr li.haus .wann{color:var(--eiche-d)}
@media (max-width:1023px){.termine ol.jahr{grid-template-columns:1fr 1fr;gap:0 36px}}
@media (max-width:640px){.termine ol.jahr{grid-template-columns:1fr}.jahr li{padding:22px 0 26px}}

/* ---------- 11.11  Akkordeon (B4) ---------- */
.akkordeon{max-width:calc(var(--gross) - 220px);margin-inline:auto;padding-inline:var(--rand)}
.akkordeon>.h-gross{margin-bottom:40px}
.akkordeon .zeile{border-top:1px solid var(--taube)}
.akkordeon .zeile:last-child{border-bottom:1px solid var(--taube)}
.akkordeon .zeile>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:31px 0 35px;font:400 25px/31px var(--serif);color:var(--marine);letter-spacing:.2px;transition:color var(--t)}
.akkordeon .zeile>button:hover{color:var(--eiche-d)}
.akkordeon .winkel{width:12px;height:12px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform var(--t);margin-right:6px;flex:none}
.akkordeon .zeile>button[aria-expanded="true"] .winkel{transform:rotate(-135deg)}
.akkordeon .inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t)}
.akkordeon .inhalt>div{overflow:hidden}
.akkordeon .inhalt.offen{grid-template-rows:1fr}
.akkordeon .inhalt p,.akkordeon .inhalt ul{max-width:var(--text)}
.akkordeon .inhalt>div>:last-child{padding-bottom:30px}
.akkordeon .inhalt p+p{margin-top:16px}
.akkordeon .inhalt li{position:relative;padding-left:18px}
.akkordeon .inhalt li::before{content:"";position:absolute;left:0;top:17px;width:4px;height:4px;border-radius:50%;background:var(--braun);transition:background var(--t)}
.akkordeon .inhalt li:hover::before{background:var(--eiche-d)}
.akkordeon .nachweise{font:300 var(--fs-klein)/26px var(--sans);letter-spacing:.2px;columns:2;column-gap:40px;max-width:1100px!important}
.akkordeon .nachweise li{break-inside:avoid;padding-bottom:6px}
.akkordeon .nachweise li::before{top:11px}
.akkordeon .nachweise a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
  .akkordeon .zeile>button{font-size:19px;line-height:27px;padding:22px 0 24px}
  .akkordeon .nachweise{columns:1}
}

/* ---------- 11.12  Zimmer im Überblick: Text neben Symbolraster ---------- */
.ueberblick{display:grid;grid-template-columns:minmax(0,755px) minmax(300px,1fr);gap:clamp(40px,6vw,90px);align-items:center;margin-top:60px;text-align:left}
.einleitung .ueberblick{max-width:var(--spalte);margin-inline:auto}
.ueberblick .text{max-width:none;margin:0}
.symbole{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.symbole li{display:flex;align-items:center;gap:14px;font:400 var(--fs-klein)/22px var(--sans);color:var(--marine)}
.symbole svg{width:40px;height:40px;flex:none;stroke:var(--taube);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1023px){.ueberblick{grid-template-columns:1fr}.symbole{max-width:560px;width:100%;justify-self:center}}
@media (max-width:767px){.ueberblick .text{text-align:center}}

/* ---------- 11.13  Ausstattungsliste (drei Spalten, Punkt färbt sich beim Hover) ---------- */
.ausstattung{padding-block:var(--sek)}
.einleitung+.ausstattung{padding-top:0}
.ausstattung>.h-serif{text-align:center}
.liste{columns:3;column-gap:50px;max-width:var(--spalte);margin:44px auto 0}
.liste li{break-inside:avoid;position:relative;padding:0 0 6px 22px;font:300 17px/32px var(--sans);color:var(--braun)}
.liste li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--marine);transition:background var(--t)}
.liste li:hover::before{background:var(--eiche-d)}
@media (max-width:1023px){.liste{columns:2}}
@media (max-width:640px){.liste{columns:1;max-width:520px}}
/* Annehmlichkeiten in Gruppen (Vorbild Chedi): Versalzeile über kurzer Liste */
.gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 56px;max-width:var(--spalte);margin:44px auto 0;text-align:left}
.gruppen .ueberzeile{padding-bottom:12px;border-bottom:1px solid rgba(106,131,160,.5)}
.gruppen .liste{columns:1;margin:16px 0 0;max-width:none}
.gruppen .liste li{font-size:16px;line-height:30px}
.gruppen .liste li::before{top:12px}
@media (max-width:1023px){.gruppen{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gruppen{grid-template-columns:1fr;max-width:520px}}

/* ---------- 11.14  Bildpaar (schmal + breit) ---------- */
.bildpaar{display:grid;grid-template-columns:431fr 743fr;gap:10px;max-width:1184px;margin-inline:auto}
.bildpaar figure{position:relative;aspect-ratio:431/553;overflow:hidden;background:var(--greige);max-width:100%}
.bildpaar figure+figure{aspect-ratio:743/553}
.bildpaar img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.bildpaar{grid-template-columns:1fr}.bildpaar figure,.bildpaar figure+figure{aspect-ratio:4/3}}

/* ---------- 11.15  Zitat-Kasten (hinterlegt in Eiche hell) ---------- */
.zitat-sek{padding-top:var(--nach)}
.zitat-kasten{background:var(--eiche-h);padding:clamp(36px,5vw,64px) clamp(24px,5vw,72px);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,60px);align-items:center;max-width:var(--spalte);margin-inline:auto}
.zitat-kasten blockquote{font:300 24px/40px var(--serif);font-style:italic;color:var(--marine);border-left:1px solid var(--taube);padding-left:28px}
.zitat-kasten cite{display:block;font:400 var(--fs-klein)/26px var(--sans);letter-spacing:1px;text-transform:uppercase;font-style:normal;margin-top:16px;color:var(--eiche-d)}
.zitat-kasten .h-serif+p{margin-top:14px}
.zitat-kasten p{font-size:17px;line-height:32px}
@media (max-width:767px){.zitat-kasten{grid-template-columns:1fr;text-align:center}.zitat-kasten blockquote{border-left:0;padding-left:0}}

/* ---------- 11.16  Buchen am Rand (Desktop, erscheint nach der Bühne) ---------- */
.rand{position:fixed;right:0;top:45%;z-index:var(--z-rand);display:none;transform:translateX(110%);transition:transform var(--t)}
.rand.sichtbar{transform:none}
.rand .griff{writing-mode:vertical-rl;transform:rotate(180deg);background:var(--marine);color:var(--creme);padding:26px 0;width:56px;display:flex;align-items:center;justify-content:center;font:500 var(--fs-klein) var(--serif);letter-spacing:.37px;text-transform:uppercase;transition:background var(--t),color var(--t)}
.rand .griff:hover{background:var(--braun);color:var(--eiche-h)}
.rand .feld{position:absolute;right:56px;top:50%;transform:translateY(-50%) translateX(12px);width:290px;background:var(--creme);border:1px solid var(--taube);padding:26px 28px;opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t),visibility 0s var(--t)}
.rand.offen .feld{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity var(--t),transform var(--t)}
.rand .name{font:300 24px/32px var(--serif);color:var(--marine)}
.rand .preis{font:400 16px/28px var(--serif);color:var(--braun);margin:6px 0 18px}
.rand .preis b{font-weight:600;font-size:20px;color:var(--marine)}
.rand .btn{width:100%}
@media (min-width:1024px){.rand{display:block}}

/* ---------- 11.17  Bildkacheln (B1): Titel auf dem Bild, Text beim Hover ---------- */
.bildkacheln-sek{padding-block:var(--nach)}
.bildkacheln-sek>.linie{max-width:1315px;margin:0 auto 55px;border-top:1px solid rgba(168,126,82,.5)}
.bildkacheln-sek>.h-gross{margin-bottom:55px}
.bildkacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1315px;margin-inline:auto}
.bildkachel{position:relative;display:block;aspect-ratio:392/444;max-width:100%;overflow:hidden;background:var(--greige);color:var(--creme)}
.bildkachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bildkachel .schleier{position:absolute;inset:0;background:linear-gradient(to top,var(--marine-60),var(--marine-0) 50%);transition:background var(--t)}
.bildkachel .bk-inhalt{position:absolute;inset:0;display:grid;align-content:end;justify-items:center;text-align:center;padding:28px 24px;gap:6px}
.bildkachel .bk-titel{font:300 25px/33px var(--serif);transition:transform var(--t)}
.bildkachel .bk-ueber{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;opacity:0;transition:opacity var(--t);position:relative;padding-top:14px}
.bildkachel .bk-ueber::before{content:"";position:absolute;left:50%;top:0;width:52px;height:1px;background:var(--creme);transform:translateX(-50%)}
.bildkachel .bk-kurz{font:300 var(--fs-klein)/26px var(--sans);opacity:0;max-height:0;overflow:hidden;transition:opacity var(--t),max-height var(--t)}
.bildkachel .entdecken{margin-top:8px}
.bildkachel:hover .schleier,.bildkachel.hov .schleier,.bildkachel:focus-visible .schleier{background:var(--marine-60)}
.bildkachel:hover .bk-titel,.bildkachel.hov .bk-titel{transform:translateY(-8px)}
.bildkachel:hover .bk-ueber,.bildkachel:hover .bk-kurz,.bildkachel.hov .bk-ueber,.bildkachel.hov .bk-kurz,.bildkachel:focus-visible .bk-ueber,.bildkachel:focus-visible .bk-kurz{opacity:1;max-height:120px}
/* immer in EINER Reihe (Entscheidung 30.09.2026): Tablet enger, Handy als Wischreihe */
@media (max-width:1319px){.bildkacheln{gap:18px}.bildkachel .bk-titel{font-size:22px;line-height:29px}.bildkachel .bk-inhalt{padding:22px 16px}}
@media (max-width:767px){
  .bildkacheln{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--rand));padding:0 var(--rand) 6px;scrollbar-width:none}
  .bildkacheln::-webkit-scrollbar{display:none}
  .bildkachel{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:center}
  .bildkachel .bk-ueber,.bildkachel .bk-kurz{opacity:1;max-height:120px}
  .bildkachel .schleier{background:var(--marine-60)}
}

/* ---------- 11.18  Nächster Schritt (jede Unterseite endet so) ---------- */
.schritt{text-align:center;padding:var(--sek) var(--rand) var(--nach)}
.schritt .h-serif{text-align:center}
.schritt .emblem{display:block;width:150px;height:auto;margin:0 auto 28px;opacity:.95}
@media (max-width:767px){.schritt .emblem{width:120px}}
.schritt .h-serif+p{margin-top:20px}
.schritt .knoepfe{margin-top:34px}
.schritt .direkt{margin-top:14px}
.schritt .quer{margin-top:44px}
.schritt+.bildkacheln-sek{padding-top:0}
.mehr-link{text-align:center;margin-top:50px}


/* ---------- 11.21  Öffnungszeiten: Wochenleiste + Tageslauf ----------
   Wochenleiste: sieben Tage, Ruhetag gedämpft, der heutige Tag bekommt einen
   orangen Punkt (site.js). Tageslauf: Zeitachse 8–22 Uhr, Balken über die
   Klassen .von-H / .bis-H (volle Stunden), keine style-Attribute nötig. */
.oeffnung{padding-block:var(--sek) var(--sek)}
.oeffnung>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto var(--sek);opacity:.6}
.woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));max-width:1080px;margin:50px auto 0;border:1px solid rgba(106,131,160,.5)}
.tag{position:relative;display:grid;justify-items:center;gap:6px;padding:22px 6px 20px;border-left:1px solid rgba(106,131,160,.5);text-align:center;transition:background var(--t)}
.tag:first-child{border-left:0}
.tag b{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.62px;text-transform:uppercase;color:var(--marine)}
.tag>span{font:400 19px/26px var(--serif);color:var(--marine)}
.tag.zu{background:rgba(204,199,189,.28)}
.tag.zu>span{color:var(--eiche-d);font-style:italic}
.tag:not(.zu):hover{background:var(--eiche-h)}
.tag .kurz{display:none}
.tag.heute::after{content:"Heute";position:absolute;left:50%;top:-12px;transform:translateX(-50%);padding:0 8px;background:var(--creme);font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1px;color:var(--eiche-d)}
.tag.heute{box-shadow:inset 0 -2px 0 var(--orange)}
.tageslauf{max-width:1080px;margin:56px auto 0}
.tl-kopf,.tl>li{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 28px;align-items:center}
.tl-achse,.tl-spur{display:grid;grid-template-columns:repeat(14,minmax(0,1fr))}
.tl-achse{position:relative;padding-bottom:8px}
.tl-achse span{grid-column:span 2;font:400 var(--fs-klein)/1 var(--sans);color:var(--eiche-d);letter-spacing:.5px}
.tl-achse .ende{position:absolute;right:0;bottom:8px;grid-column:auto}
.tl>li{padding:14px 0;border-top:1px solid rgba(106,131,160,.35)}
.tl>li:last-child{border-bottom:1px solid rgba(106,131,160,.35)}
.tl-name b{display:block;font:400 20px/28px var(--serif);color:var(--marine)}
.tl-name span{display:block;margin-top:2px;font:300 var(--fs-klein)/22px var(--sans);color:var(--braun)}
.tl-spur{position:relative;height:40px;background-image:linear-gradient(to right,rgba(106,131,160,.28) 1px,transparent 1px);background-size:calc(100% / 7) 100%;border-right:1px solid rgba(106,131,160,.28)}
.tl-balken{grid-row:1;align-self:center;height:32px;display:flex;align-items:center;justify-content:center;background:var(--marine);color:var(--creme);font:400 var(--fs-klein)/1 var(--sans);letter-spacing:.4px;white-space:nowrap;overflow:hidden;transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tl-balken.eiche{background:var(--eiche-d)}
.tl-balken.leicht{background:repeating-linear-gradient(135deg,rgba(168,126,82,.35) 0 6px,rgba(168,126,82,.12) 6px 12px)}
.js .tageslauf.rv:not(.in) .tl-balken{transform:scaleX(0)}
.tl>li:hover .tl-balken{filter:brightness(1.12)}
.von-8{grid-column-start:1}.von-9{grid-column-start:2}.von-10{grid-column-start:3}.von-11{grid-column-start:4}.von-12{grid-column-start:5}.von-13{grid-column-start:6}.von-14{grid-column-start:7}.von-15{grid-column-start:8}.von-16{grid-column-start:9}.von-17{grid-column-start:10}.von-18{grid-column-start:11}.von-19{grid-column-start:12}.von-20{grid-column-start:13}.von-21{grid-column-start:14}
.bis-9{grid-column-end:2}.bis-10{grid-column-end:3}.bis-11{grid-column-end:4}.bis-12{grid-column-end:5}.bis-13{grid-column-end:6}.bis-14{grid-column-end:7}.bis-15{grid-column-end:8}.bis-16{grid-column-end:9}.bis-17{grid-column-end:10}.bis-18{grid-column-end:11}.bis-19{grid-column-end:12}.bis-20{grid-column-end:13}.bis-21{grid-column-end:14}.bis-22{grid-column-end:15}
.oeffnung-fuss{max-width:1080px;margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 30px;font:300 var(--fs-klein)/26px var(--sans);color:var(--eiche-d)}
@media (max-width:1023px){.tl-kopf,.tl>li{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:767px){
  .woche{margin-top:36px}
  .tag{padding:16px 2px 14px;gap:4px}
  .tag>span{font-size:15px;line-height:22px}
  .tag .uhr,.tag .lang,.tl-balken .uhr{display:none}
  .tag .kurz{display:inline}
  .tl-kopf{grid-template-columns:1fr}
  .tl-kopf>span:first-child{display:none}
  .tl>li{grid-template-columns:1fr;gap:10px}
  .tl-achse span{font-size:15px}
  .tl-achse .ende{display:none}
  .oeffnung-fuss{justify-content:center;text-align:center}
}

/* ---------- 11.21b  Formular neben einem hinterlegten Kasten (Tisch + Feiern) ---------- */
.tisch-sek{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);max-width:1080px;margin-inline:auto;padding-block:var(--sek) var(--nach);align-items:start}
.tisch-block .h-serif{margin-bottom:14px}
.tisch-block .direkt{display:block;margin-top:12px}
.feiern-kasten{background:var(--eiche-h);padding:clamp(32px,4vw,52px);display:grid;gap:16px;justify-items:start;box-shadow:var(--kante-aussen)}
.feiern-kasten p{font:300 17px/31px var(--sans)}
.feiern-kasten .knoepfe{margin-top:6px}
@media (max-width:900px){.tisch-sek{grid-template-columns:minmax(0,1fr)}}

/* ---------- 11.22  Formular (Beschriftung über den Feldern) ---------- */
.formular-intro{font:300 17px/30px var(--sans);margin-bottom:22px}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.formular .breit{grid-column:1/-1}
.f-feld{display:grid;gap:6px;min-width:0}
.f-feld label{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d)}
.f-feld input,.f-feld select,.f-feld textarea{width:100%;min-width:0;height:48px;border:1px solid var(--taube);border-radius:0;background:var(--creme);color:var(--braun);padding:0 14px;font:400 16px var(--sans);appearance:none;-webkit-appearance:none;transition:border-color var(--t),background var(--t)}
.f-feld select{background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23153254' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 14px center}
.f-feld textarea{height:auto;min-height:96px;padding:12px 14px;line-height:26px;resize:vertical}
.f-feld input:hover,.f-feld select:hover,.f-feld textarea:hover{border-color:var(--eiche-d)}
.f-feld input:focus,.f-feld select:focus,.f-feld textarea:focus{outline:3px solid var(--marine);outline-offset:1px;background:#fff}
.f-feld [aria-invalid="true"]{border-color:var(--orange)}
.tisch-block .ok{margin-top:18px;font:400 17px/28px var(--serif);color:var(--marine)}
@media (max-width:560px){.formular{grid-template-columns:1fr}.formular .btn{width:100%}}

/* ---------- 11.23  Kapitel-Wahl (vier Sprungfelder mit römischer Ziffer) ---------- */
.kapitelwahl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;margin:10px auto 0;border-top:1px solid var(--taube);border-bottom:1px solid var(--taube)}
.kapitelwahl a{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:start;gap:6px;padding:26px 14px 28px;text-align:center;border-left:1px solid rgba(106,131,160,.5);overflow:hidden}
.kapitelwahl a:first-child{border-left:0}
.kapitelwahl a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--eiche-h);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.kapitelwahl a:hover::before,.kapitelwahl a:focus-visible::before{transform:scaleY(1)}
.kapitelwahl .roem{font:300 40px/1 var(--serif);color:var(--eiche);transition:transform .45s cubic-bezier(.2,.7,.2,1),color var(--t)}
.kapitelwahl a:hover .roem{transform:translateY(-4px);color:var(--eiche-d)}
.kapitelwahl b{font:400 18px/26px var(--serif);color:var(--marine)}
.kapitelwahl a>span:last-child{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1px;color:var(--eiche-d)}
@media (max-width:767px){.kapitelwahl{grid-template-columns:1fr 1fr}.kapitelwahl a:nth-child(3){border-left:0}.kapitelwahl a:nth-child(n+3){border-top:1px solid rgba(106,131,160,.5)}}

/* ---------- 11.24  Zeitreise (Zeitleiste, abwechselnd links/rechts) ----------
   <ol class="zl"> mit <li class="haus|ort [gross] [heute] [ausblick]">: .zl-jahr + .zl-inhalt.
   Mittellinie füllt sich beim Scrollen (site.js setzt --fort), Punkte: Haus =
   Marine gefüllt, Ort = Ring. Bilder schwarz-weiß, beim Hover in Farbe. */
.zeitreise{position:relative;max-width:1180px;margin-inline:auto;padding:var(--sek) var(--rand) var(--nach)}
.zl-legende{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:.5px;color:var(--eiche-d)}
.zl-legende .p{width:12px;height:12px;border-radius:50%;display:inline-block}
.zl-legende .p.ort{margin-left:22px}
.p.haus,.zl>li.haus::after{background:var(--marine);box-shadow:0 0 0 4px var(--creme),0 0 0 5px var(--marine)}
.p.ort,.zl>li.ort::after{background:var(--creme);border:1.5px solid var(--taube)}
.kapitel{position:relative;z-index:1;text-align:center;margin:90px auto 60px;max-width:640px;padding:18px 24px;background:var(--creme)}
.kapitel:first-of-type{margin-top:50px}
.kapitel .ueberzeile{color:var(--eiche-d)}
.kapitel .h-serif{margin-top:6px}
.zl{position:relative}
.zl::before,.zl::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.zl::before{background:rgba(106,131,160,.35)}
.zl::after{background:var(--eiche);bottom:auto;height:calc(var(--fort,0) * 100%);transition:height .15s linear}
.zl>li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:start;padding:0 0 64px}
.zl>li::after{content:"";position:absolute;left:50%;top:26px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);z-index:1;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.zl>li:hover::after{transform:translateX(-50%) scale(1.35)}
.zl>li.gross::after{width:16px;height:16px;top:24px}
.zl-jahr{grid-column:1;justify-self:end;text-align:right;font:300 56px/1 var(--serif);letter-spacing:-.5px;color:var(--marine);padding-top:6px;transition:color var(--t)}
.zl-jahr small{font-size:24px;letter-spacing:0;color:var(--eiche-d);margin-right:4px}
.zl>li.ort .zl-jahr{color:var(--taube)}
.zl>li.gross .zl-jahr{font-size:76px}
.zl-inhalt{grid-column:3;max-width:470px}
.zl>li:nth-child(even) .zl-jahr{grid-column:3;justify-self:start;text-align:left;grid-row:1}
.zl>li:nth-child(even) .zl-inhalt{grid-column:1;grid-row:1;justify-self:end;text-align:right}
.zl-art{display:block;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.62px;text-transform:uppercase;color:var(--eiche-d)}
.zl>li.ort .zl-art{color:var(--taube)}
.zl-inhalt h3{margin-top:8px;font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
.zl-inhalt p{margin-top:10px;font:300 17px/31px var(--sans)}
.zl-inhalt figure{position:relative;margin-top:20px;aspect-ratio:4/3;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.zl-inhalt figure::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.zl-inhalt figure img,.zl-inhalt figure .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zl-inhalt figure img{filter:grayscale(1) sepia(.18) contrast(.95);transform:scale(1.02);transition:filter 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.zl>li:hover figure img{filter:none;transform:scale(1.05)}
.zl-inhalt figure.zeichnung{aspect-ratio:auto;background:none;box-shadow:none;margin-top:10px}
.zl-inhalt figure.zeichnung::after{display:none}
.zl-inhalt figure.zeichnung img{position:static;height:auto;max-width:300px;filter:none;transform:none}
.zl>li:nth-child(even) figure.zeichnung img{margin-left:auto}
.zl-inhalt .zierwort{margin-top:14px;font-size:40px;line-height:1.1}
.zl>li.heute .zl-jahr{color:var(--eiche-d)}
.zl>li.ausblick{opacity:.8}
.zl>li.ausblick .zl-jahr{font-style:italic}
.zl-zitat{padding:30px 0 90px}
.quellen-sek{padding-bottom:var(--sek)}
@media (max-width:1023px){.zl>li{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)}.zl-jahr{font-size:44px}.zl>li.gross .zl-jahr{font-size:56px}}
@media (max-width:767px){
  .zeitreise{padding-inline:16px}
  .zl::before,.zl::after{left:7px;transform:none}
  .zl>li,.zl>li:nth-child(even){display:block;padding:0 0 48px 34px}
  .zl>li::after{left:7px;top:10px}
  .zl>li:hover::after{transform:translateX(-50%) scale(1.2)}
  .zl-jahr,.zl>li:nth-child(even) .zl-jahr{justify-self:start;text-align:left;font-size:40px;padding-top:0}
  .zl-inhalt,.zl>li:nth-child(even) .zl-inhalt{justify-self:start}
  .zl>li.gross .zl-jahr{font-size:48px}
  .zl-inhalt,.zl>li:nth-child(even) .zl-inhalt{text-align:left;max-width:none;margin-top:10px}
  .zl>li:nth-child(even) figure.zeichnung img{margin-left:0}
  .kapitel{margin:60px auto 40px;padding:12px 0}
}

/* ---------- 11.25  Gastgeber (Bild + Text + zwei Personen) ---------- */
.gastgeber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:start;max-width:1080px;margin-inline:auto;padding-block:20px var(--sek)}
.gastgeber-bild{position:sticky;top:calc(var(--kopf-h-fest) + 30px);aspect-ratio:4/5;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.gastgeber-bild::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.gastgeber-bild img,.gastgeber-bild .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gastgeber-text .h-serif{margin:8px 0 18px}
.gastgeber-text>p{font:300 17px/32px var(--sans)}
.gastgeber-text>p+p{margin-top:14px}
.gastgeber-text>p.gastgeber-schluss{font:400 20px/34px var(--serif);color:var(--marine);margin-top:22px}
.personen{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(106,131,160,.5)}
.person b{display:block;font:400 21px/28px var(--serif);color:var(--marine)}
.person>span{display:block;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d);margin-top:2px}
.person p{margin-top:10px;font:300 16px/29px var(--sans)}
.gastgeber-text>p.zierwort{margin-top:26px;font:400 44px/1.1 var(--script);color:var(--eiche-d)}
@media (max-width:900px){.gastgeber{grid-template-columns:1fr}.gastgeber-bild{position:relative;top:auto;aspect-ratio:4/3}}
@media (max-width:560px){.personen{grid-template-columns:1fr}}

/* ---------- 11.26  Team nach Bereichen (drei Karten mit Teamfoto und Namen) ---------- */
.team-sek{padding-block:0 var(--sek)}
.team-sek>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto var(--sek);opacity:.6}
.team-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1180px;margin:54px auto 0}
.team-karte figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen);margin-bottom:22px}
.team-karte figure::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.team-karte figure img,.team-karte figure .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.team-karte:hover figure img{transform:scale(1.04)}
.team-karte h3{margin-top:6px;font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
.team-karte>p{margin-top:10px;font:300 16px/29px var(--sans)}
.namen{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.namen li{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px;border:1px solid rgba(106,131,160,.5);font:400 17px/24px var(--serif);color:var(--marine);transition:background var(--t),border-color var(--t)}
.namen li:hover{background:var(--eiche-h);border-color:var(--eiche-h)}
.namen li.lang{flex-basis:100%;border-color:var(--eiche);background:rgba(230,213,188,.45)}
.namen li span{font:300 var(--fs-klein)/22px var(--sans);color:var(--eiche-d)}
@media (max-width:1023px){.team-raster{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.team-raster{grid-template-columns:1fr;gap:50px}}

/* ---------- 11.27  Partner (schlichte Liste) ---------- */
.partner-sek{max-width:1080px;margin-inline:auto;padding-block:var(--sek) 0;text-align:center}
.partner{display:flex;flex-wrap:wrap;justify-content:center;margin-top:30px;border-top:1px solid rgba(106,131,160,.5);border-bottom:1px solid rgba(106,131,160,.5)}
.partner li{flex:1 1 240px;display:grid;gap:4px;padding:24px 20px;border-left:1px solid rgba(106,131,160,.5)}
.partner li:first-child{border-left:0}
.partner b{font:400 20px/28px var(--serif);color:var(--marine)}
.partner span{font:300 var(--fs-klein)/24px var(--sans);color:var(--braun)}
.jobs-hinweis{max-width:760px;margin-inline:auto;padding-top:var(--sek)}
.jobs-hinweis .feiern-kasten{justify-items:center;text-align:center}
@media (max-width:640px){.partner li{border-left:0;border-top:1px solid rgba(106,131,160,.5)}.partner li:first-child{border-top:0}}

/* ---------- 11.28  Familienalbum (kleine Abzüge mit weißem Rand, leicht gedreht) ---------- */
.album{position:relative;z-index:1;margin:30px auto 100px;text-align:center;background:var(--creme);padding:30px 0}
.album .ueberzeile{color:var(--eiche-d);margin-bottom:34px}
.album-reihe{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:34px 26px}
.album figure{width:196px;background:#fff;padding:10px 10px 12px;box-shadow:0 1px 2px rgba(57,34,6,.08),0 12px 26px -12px rgba(21,50,84,.35);transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.album figure:nth-child(even){transform:rotate(1.8deg);margin-top:18px}
.album figure:nth-child(3n){transform:rotate(-1deg)}
.album figure:hover{transform:rotate(0) translateY(-6px) scale(1.04);box-shadow:0 2px 4px rgba(57,34,6,.1),0 22px 40px -14px rgba(21,50,84,.45);z-index:2;position:relative}
.album img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%;filter:sepia(.35) contrast(.95)}
.album figcaption{margin-top:10px;font:italic 400 var(--fs-klein)/21px var(--serif);color:var(--braun);text-align:left}
@media (max-width:767px){.album figure{width:calc(50% - 15px)}.album-reihe{gap:24px 16px}}

/* ---------- 11.29  Portrait-Raster (kleines Bild neben 2–3 Sätzen, zwei Spalten) ----------
   Bilder in Schwarz-Weiß, beim Hover (Touch: erster Tipp) kommen die Farben
   zurück. Desktop und Tablet zwei Spalten, Handy eine. */
.portraits-sek{padding-block:0}
.portraits-sek>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto var(--sek);opacity:.6}
.portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;max-width:1180px;margin:54px auto 0}
.portrait{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:30px;align-content:start;scroll-margin-top:calc(var(--kopf-h-fest) + 30px)}
.portrait figure{grid-row:1/span 4;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen);margin-top:4px}
.portrait figure::after,.ortszeile figure::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.portrait img,.ortszeile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1);transition:filter .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.portrait:hover img,.portrait.hov img,.ortszeile:hover img,.ortszeile.hov img{filter:grayscale(0);transform:scale(1.04)}
.portrait h3{margin-top:2px;font:300 25px/32px var(--serif);color:var(--marine)}
.portrait>p{margin-top:8px;font:300 16px/28px var(--sans)}
.portrait>p em{font-style:italic;font-family:var(--serif);font-weight:400;color:var(--marine)}
.spur{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:12px;border-top:1px solid rgba(106,131,160,.5);font:400 var(--fs-klein)/24px var(--serif);color:var(--marine)}
.spur svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--eiche);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t)}
.portrait:hover .spur svg{transform:translateY(-3px)}
@media (max-width:1023px){.portraits{gap:48px 36px}.portrait{grid-template-columns:120px minmax(0,1fr);column-gap:22px}}
@media (max-width:767px){
  .portraits{grid-template-columns:1fr;gap:40px}
  .portrait{grid-template-columns:104px minmax(0,1fr);column-gap:18px}
  .portrait figure{grid-row:1/span 3}
  .portrait h3{font-size:23px;line-height:30px}
  .portrait .spur{grid-column:1/-1}
}

/* ---------- 11.30  Ortszeilen (Jahr · Bild · Text, auf Eiche hell) ----------
   Für Geschichten, die direkt im Ort spielen, gern mit Zitat. */
.dichtung-sek{background:var(--eiche-h);padding:var(--sek) var(--rand);margin-top:var(--block)}
.ortszeilen{max-width:1080px;margin:54px auto 0;border-top:1px solid var(--taube)}
.ortszeile{display:grid;grid-template-columns:110px 124px minmax(0,1fr);gap:0 40px;scroll-margin-top:calc(var(--kopf-h-fest) + 30px);align-items:start;padding:40px 0;border-bottom:1px solid var(--taube)}
.ortszeile .jahr small{font-size:.45em;margin-right:4px}
.ortszeile .jahr{font:300 44px/1 var(--serif);color:var(--eiche-d);padding-top:6px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ortszeile:hover .jahr{transform:translateY(-4px)}
.ortszeile figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.ortszeile h3{margin-top:4px;font:300 27px/35px var(--serif);color:var(--marine)}
.ortszeile p{margin-top:10px;font:300 17px/31px var(--sans)}
.ortszeile blockquote{margin-top:16px;font:italic 300 21px/34px var(--serif);color:var(--marine);border-left:1px solid var(--eiche);padding-left:22px}
.ortszeile blockquote+p{margin-top:14px}
.dichtung-sek .auch{max-width:760px;margin:40px auto 0;text-align:center;font:300 16px/29px var(--sans)}
.dichtung-sek .auch b{font:400 17px/29px var(--serif);color:var(--marine)}
@media (max-width:1023px){.ortszeile{grid-template-columns:84px 112px minmax(0,1fr);gap:0 26px}.ortszeile .jahr{font-size:36px}}
@media (max-width:767px){
  .ortszeile{grid-template-columns:104px minmax(0,1fr);gap:0 18px;padding:30px 0}
  .ortszeile figure{grid-column:1;grid-row:1/span 2;margin-top:4px}
  .ortszeile .jahr{grid-column:2;font-size:30px;padding-top:0}
  .ortszeile .oz-text{grid-column:2}
  .ortszeile h3{font-size:23px;line-height:30px}
  .ortszeile p{font-size:16px;line-height:28px}
  .ortszeile blockquote{font-size:18px;line-height:30px;padding-left:16px}
}

/* ---------- 11.31  Kennzahlen (Gesamtkapazität auf einen Blick) ----------
   Fünf große Zahlen in Spectral Light zwischen Taubenblau-Linien.
   Hover: Zahl wird Eiche dunkel, oben wächst eine feine Eiche-Linie. */
.zahlen-sek{padding-block:10px var(--sek)}
.zahlen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:var(--spalte);margin-inline:auto;border-top:1px solid var(--taube);border-bottom:1px solid var(--taube)}
.zahl{position:relative;display:grid;justify-items:center;align-content:start;padding:34px 12px 30px;text-align:center;border-left:1px solid rgba(106,131,160,.5)}
.zahl:first-child{border-left:0}
.zahl::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--eiche);transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.zahl:hover::before{transform:scaleX(1)}
.zahl .wert{font:300 58px/1 var(--serif);color:var(--marine);letter-spacing:-.5px;white-space:nowrap;transition:color var(--t)}
.zahl .wert small{font-size:22px;letter-spacing:0;margin-right:6px}
.zahl:hover .wert{color:var(--eiche-d)}
.zahl b{margin-top:16px;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--marine)}
.zahl span{margin-top:4px;font:400 var(--fs-klein)/22px var(--serif);color:var(--braun)}
.zahlen-fuss{max-width:var(--spalte);margin:18px auto 0;padding-inline:var(--rand);text-align:center;font:300 var(--fs-klein)/24px var(--sans);color:var(--eiche-d)}
.zahl.rv:nth-child(2){transition-delay:.08s}.zahl.rv:nth-child(3){transition-delay:.16s}.zahl.rv:nth-child(4){transition-delay:.24s}.zahl.rv:nth-child(5){transition-delay:.32s}
@media (max-width:1023px){
  .zahlen{grid-template-columns:repeat(6,minmax(0,1fr))}
  .zahl{grid-column:span 2}
  .zahl:nth-child(4){grid-column:2/span 2;border-left:0}
  .zahl:nth-child(n+4){border-top:1px solid rgba(106,131,160,.5)}
}
@media (max-width:767px){
  .zahlen{grid-template-columns:1fr 1fr}
  .zahl,.zahl:nth-child(4){grid-column:auto;padding:24px 8px 22px}
  .zahl:nth-child(odd){border-left:0}
  .zahl:nth-child(4){border-left:1px solid rgba(106,131,160,.5)}
  .zahl:nth-child(n+3){border-top:1px solid rgba(106,131,160,.5)}
  .zahl:last-child{grid-column:1/-1}
  .zahl .wert{font-size:46px}
  .zahl .wert small{font-size:18px}
}

/* ---------- 11.32  Formate (drei Größen nebeneinander, die mittlere hervorgehoben) ----------
   Karte mit Umfang, Titel, Satz, kurzer Liste und Link. Hover: Karte hebt sich
   4 px, Rand wird Eiche. .format.haus ist hinterlegt und trägt eine Fahne. */
.formate-sek{padding-block:var(--sek) var(--nach)}
.formate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1180px;margin:60px auto 0;align-items:stretch}
.format{position:relative;display:flex;flex-direction:column;padding:44px 36px 34px;border:1px solid rgba(106,131,160,.5);text-align:left;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.format:hover,.format.hov{border-color:var(--eiche);transform:translateY(-4px);box-shadow:var(--kante-aussen)}
.format.haus{background:var(--eiche-h);border-color:var(--eiche-h);box-shadow:var(--kante-aussen)}
.format .fahne{position:absolute;top:0;left:36px;transform:translateY(-50%);background:var(--marine);color:var(--creme);padding:3px 14px;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1.35px;text-transform:uppercase;white-space:nowrap}
.format .umfang{font:300 44px/1 var(--serif);color:var(--marine);white-space:nowrap}
.format .umfang small{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d);margin-left:10px}
.format h3{margin-top:18px;font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
.format>p{margin-top:12px;font:300 16px/29px var(--sans)}
.format .liste{columns:1;margin:18px 0 0;max-width:none}
.format .liste li{font-size:16px;line-height:29px}
.format .liste li::before{top:12px}
.format .entdecken{align-self:flex-start;margin-top:auto}
.format .liste+.entdecken{margin-top:26px}
.format .format-fuss{margin-top:auto;padding-top:26px}
.format .umfang small.vor{margin:0 8px 0 0}
@media (max-width:1023px){.formate{grid-template-columns:1fr;max-width:620px;gap:44px}}
@media (max-width:767px){.formate{margin-top:44px}.format{padding:40px 24px 30px}.format .fahne{left:24px}}

/* ---------- 11.33  Das ganze Haus (Buyout): Bild-Slider, darüber versetzt ein Kasten ----------
   Bild links über sieben Spalten, Kasten in Eiche hell rechts darübergelegt.
   Darin eine Raumfolge in drei Schritten (I–III). */
.buyout{max-width:var(--gross);margin-inline:auto;padding:var(--sek) max(var(--rand),min(80px,4vw)) var(--nach);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.buyout-bild{grid-column:1/9;grid-row:1;position:relative;aspect-ratio:10/9;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.buyout-bild .schiene{position:absolute;inset:0}
.buyout-bild .punkte{bottom:18px;left:18px;right:auto}
.buyout-bild::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:var(--kante-innen)}
.buyout-text{grid-column:7/13;grid-row:1;position:relative;z-index:5;background:var(--eiche-h);padding:clamp(36px,4vw,58px);box-shadow:var(--kante-aussen)}
.buyout-text .h-serif{margin:8px 0 16px}
.buyout-text>p{font:300 17px/31px var(--sans)}
.buyout-text>p+p{margin-top:14px}
.raumfolge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px;counter-reset:rf}
.raumfolge li{position:relative;padding-top:16px;border-top:1px solid rgba(106,131,160,.7);counter-increment:rf;transition:border-color var(--t)}
.raumfolge li::before{content:counter(rf,upper-roman);display:block;font:400 var(--fs-klein)/22px var(--serif);letter-spacing:1px;color:var(--eiche-d)}
.raumfolge li:hover{border-color:var(--eiche-d)}
.raumfolge b{display:block;font:400 20px/28px var(--serif);color:var(--marine)}
.raumfolge span{display:block;margin-top:2px;font:300 var(--fs-klein)/23px var(--sans)}
.buyout-text .knoepfe{justify-content:flex-start;margin-top:30px}
.buyout-notiz{margin-top:20px;font:400 var(--fs-klein)/24px var(--serif);font-style:italic;color:var(--eiche-d)}
@media (max-width:1023px){
  .buyout{grid-template-columns:1fr}
  .buyout-bild,.buyout-text{grid-column:1;grid-row:auto}
  .buyout-bild{aspect-ratio:4/3}
  .buyout-text{margin:-70px 28px 0}
}
@media (max-width:767px){
  .buyout-text{margin:-40px 0 0;padding:32px 22px}
  .raumfolge{grid-template-columns:1fr;gap:14px}
  .buyout-text .knoepfe{justify-content:center}
  .buyout-text .btn{width:100%}
}

/* ---------- 11.34  Sitzarrangements (kleine Grundriss-Skizzen) ----------
   Vier Felder zwischen Linien; die Skizze zeichnet sich beim Hover neu. */
.aufstellungen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--spalte);margin:56px auto 0;border-top:1px solid var(--taube);border-bottom:1px solid var(--taube)}
.aufstellung{display:grid;justify-items:center;align-content:start;gap:6px;padding:32px 18px 30px;text-align:center;border-left:1px solid rgba(106,131,160,.5);transition:background var(--t)}
.aufstellung:first-child{border-left:0}
.aufstellung:hover{background:rgba(230,213,188,.45)}
.aufstellung svg{width:128px;height:84px;margin-bottom:10px;stroke:var(--taube);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t)}
.aufstellung:hover svg{stroke:var(--eiche-d)}
.aufstellung b{font:400 21px/28px var(--serif);color:var(--marine)}
.aufstellung span{font:300 var(--fs-klein)/24px var(--sans)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.aufstellung:hover svg>*{stroke-dasharray:1;animation:zeichnen .9s ease-out both}}
@media (max-width:1023px){.aufstellungen{grid-template-columns:1fr 1fr}.aufstellung:nth-child(3){border-left:0}.aufstellung:nth-child(n+3){border-top:1px solid rgba(106,131,160,.5)}}
@media (max-width:767px){.aufstellung{padding:24px 10px 22px}.aufstellung svg{width:104px;height:68px}}

/* ---------- 11.35  Pauschale (hinterlegter Kasten: Titel links, Leistungen rechts) ---------- */
.pauschale{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);max-width:1080px;margin:70px auto 0;background:var(--eiche-h);padding:clamp(32px,4vw,56px);box-shadow:var(--kante-aussen);align-items:start;text-align:left}
.pauschale .h-serif{margin-top:8px}
.pauschale .preis{margin-top:16px;font:400 20px/30px var(--serif);color:var(--marine)}
.pauschale .preis+p{margin-top:10px;font:300 16px/28px var(--sans)}
.pauschale .liste{columns:1;margin:0;max-width:none}
.pauschale .liste li{font-size:16px;line-height:30px}
.pauschale .liste li::before{top:12px}
@media (max-width:767px){.pauschale{grid-template-columns:1fr;text-align:center}.pauschale .liste{text-align:left;max-width:420px;margin-inline:auto}}

/* ---------- 11.36  Ansprechpartner (im Kasten neben einem Formular) ---------- */
.ansprech{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;width:100%;margin-top:8px;padding-top:22px;border-top:1px solid rgba(106,131,160,.6)}
.ansprech figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.ansprech figure img,.ansprech figure .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ansprech figure .foto::after{padding:8px;line-height:20px}
.ansprech b{display:block;font:400 22px/28px var(--serif);color:var(--marine)}
.ansprech .rolle{display:block;margin-top:2px;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d)}
.kontaktwege{display:grid;gap:6px;margin-top:12px}
.kontaktwege a{display:inline-flex;align-items:center;gap:8px;font:400 16px/26px var(--serif);color:var(--marine);white-space:nowrap}
.kontaktwege a:hover{color:var(--eiche-d)}
.kontaktwege svg{width:18px;height:18px;flex:none;stroke:var(--eiche-d);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:420px){.ansprech{grid-template-columns:88px minmax(0,1fr);gap:16px}}

/* ---------- 11.39  Varianten eines Zimmertyps (zwei Karten mit Bild + Wunsch-Kasten) ----------
   Für Kategorien, die nur gemeinsam buchbar sind (z. B. Großes Doppel- oder
   Twin-Zimmer): .formate.zwei mit .format-bild oben in jeder Karte, römische
   Ziffer als .umfang. Darunter .wunsch (hinterlegt), wie man die Wunschlage
   bei der Buchung angibt. Hover: Karte hebt sich, Foto zoomt leicht heran. */
.formate.zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px}
.format .format-bild{position:relative;margin:-44px -36px 30px;aspect-ratio:3/2;overflow:hidden;background:var(--greige)}
.format .format-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.3,1)}
.format:hover .format-bild img,.format.hov .format-bild img{transform:scale(1.04)}
.format .format-bild::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.wunsch{max-width:1080px;margin:40px auto 0;background:var(--eiche-h);padding:36px clamp(24px,5vw,64px);box-shadow:var(--kante-aussen);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center;text-align:left}
.wunsch .h-kachel{margin-top:6px}
.wunsch p{font:300 17px/31px var(--sans)}
.wunsch p+p{margin-top:10px}
@media (max-width:1023px){.formate.zwei{grid-template-columns:1fr;max-width:620px}.wunsch{max-width:620px;grid-template-columns:1fr;text-align:center}}
@media (max-width:767px){.format .format-bild{margin:-40px -24px 26px}.wunsch{padding:30px 22px}}

/* Einleitung mit Knöpfen (z. B. „Anfrage senden“ + Telefon) */
.einleitung .knoepfe{margin-top:40px}

/* ---------- 11.37  Schnellwahl (Sprungleiste in Zeilen: Gruppe links, kleine Köpfe rechts) ---------- */
.schnellwahl{max-width:1300px;margin:0 auto var(--sek);border-top:1px solid var(--taube);border-bottom:1px solid var(--taube)}
.sw-gruppe{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:10px 22px;padding:18px 6px}
.sw-gruppe+.sw-gruppe{border-top:1px solid rgba(106,131,160,.5)}
.sw-gruppe ul{display:flex;flex-wrap:wrap;gap:10px 18px}
.sw-gruppe a{display:flex;align-items:center;gap:8px;font:400 var(--fs-klein)/20px var(--serif);color:var(--marine)}
.sw-bild{position:relative;flex:none;display:block;width:40px;height:50px;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.sw-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1);transition:filter .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.sw-gruppe a b{font:300 22px/1 var(--serif);color:var(--eiche-d);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sw-gruppe a:hover{color:var(--eiche-d)}
.sw-gruppe a:hover img,.sw-gruppe a:focus-visible img{filter:grayscale(0);transform:scale(1.08)}
.sw-gruppe a:hover b{transform:translateY(-3px)}
@media (max-width:1023px){.sw-gruppe{grid-template-columns:1fr}}
@media (max-width:767px){
  .sw-gruppe{padding:16px 0}
  .sw-gruppe ul{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sw-gruppe ul::-webkit-scrollbar{display:none}
  .sw-gruppe li{flex:none}
}

/* ---------- 11.38  Berühmte Gäste (Jahr, Name, ein bis zwei Sätze; drei Spalten) ---------- */
.gaeste-sek{padding:var(--sek) var(--rand) 0;scroll-margin-top:var(--kopf-h-fest)}
.gaeste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin:54px auto 0;border-top:1px solid var(--taube)}
.gast{position:relative;padding:32px 30px 34px;border-bottom:1px solid var(--taube);border-left:1px solid rgba(106,131,160,.5);isolation:isolate;overflow:hidden}
.gast:nth-child(3n+1){border-left:0}
.gast::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--eiche-h);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gast:hover::before,.gast.hov::before{transform:scaleY(1)}
.gast .jahr{display:flex;align-items:center;gap:10px;font:300 34px/1 var(--serif);color:var(--eiche-d)}
.gast .jahr svg{width:22px;height:22px;stroke:var(--eiche);fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.gast h3{margin-top:14px;font:300 23px/30px var(--serif);color:var(--marine)}
.gast p{margin-top:8px;font:300 16px/28px var(--sans)}
.gast .ort{display:block;margin-top:12px;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d)}
.gaeste-hinweis{max-width:760px;margin:26px auto 0;text-align:center;font:300 var(--fs-klein)/26px var(--sans);color:var(--braun)}
@media (max-width:1023px){.gaeste{grid-template-columns:1fr 1fr}.gast:nth-child(3n+1){border-left:1px solid rgba(106,131,160,.5)}.gast:nth-child(2n+1){border-left:0}}
@media (max-width:767px){.gaeste{grid-template-columns:1fr}.gast{border-left:0!important;padding:26px 4px 28px}}

/* ---------- 11.19  Bildkante (alle Inhaltsbilder, nicht die Bühne) ----------
   Feine Verblendung am Rand und ein sehr weicher Schatten, damit Fotos sich
   vom Creme abheben (Vorbild Raffles). Neue Bildbausteine hier ergänzen. */
.lr-block .bilder,.bildpaar figure,.kachel .k-bild,.zi-bild,.bildkachel{box-shadow:var(--kante-aussen)}
.lr-block .bilder::after,.bildpaar figure::after,.kachel .k-bild::after,.zi-bild::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:var(--kante-innen)}
.bildkachel .schleier{box-shadow:var(--kante-innen)}

/* ---------- 11.20  Logo im Seitenmenü (Tablet und Handy) ---------- */
.seitenmenu .haus-logo{display:block;width:150px;height:auto;margin:30px auto 0;opacity:.9}

/* =====================================================================
   Ergänzungen 30.09.2026 (Feedback Robin)
   ===================================================================== */

/* ---------- 11.40  Film (Startseite) ----------
   <section class="buehne film"> mit Bildern: ruhiger Film aus langsamen
   Zooms, alle 7 s das nächste Bild (site.js). Optional <video data-film
   muted loop playsinline poster="…"><source src="img/film.mp4"></video>:
   sobald es läuft, ersetzt es die Bilder. Pause-Taste .film-pause. */
.film .dia>img{transform:scale(1.001);transition:transform 9s linear}
.film .dia.jetzt>img{transform:scale(1.07)}
.film.pausiert .dia.jetzt>img{transform:scale(1.035);transition-duration:1.2s}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity 1.2s ease}
.film.mit-video video{opacity:1}
.film.mit-video .punkte,.film.mit-video .hinweis{display:none}
.film-pause{position:absolute;right:40px;bottom:84px;z-index:5;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,246,236,.7);border-radius:50%;color:var(--creme);transition:background var(--t),color var(--t)}
.film-pause:hover{background:var(--creme);color:var(--marine)}
.film-pause::before,.film-pause::after{content:"";width:2px;height:12px;background:currentColor;margin:0 2px}
.film-pause{grid-auto-flow:column;justify-content:center}
.film.pausiert .film-pause::after{display:none}
.film.pausiert .film-pause::before{width:0;height:0;margin:0 0 0 3px;background:none;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
@media (max-width:767px){.film-pause{right:16px;bottom:88px}}
@media (prefers-reduced-motion:reduce){.film .dia>img,.film .dia.jetzt>img{transform:none;transition:none}}

/* ---------- 11.41  Zimmer-Slider mittig ----------
   Aktive Karte in der Mitte, Titel und Steuerung darüber zentriert,
   Text unter der aktiven Karte ebenfalls mittig. */
.zi-kopf{flex-direction:column;align-items:center;justify-content:flex-start;padding-inline:var(--rand)}
.zi-kopf .h-gross{text-align:center}
.zi-kopf .zi-steuer{margin-top:4px}
.zi-text{text-align:center}
.zi-text p{margin-inline:auto}
.zi-btns{justify-content:center}
.zi-karte .direkt{display:block;text-align:center}

/* ---------- 11.42  Speisekarte ansehen (B-Karte) ----------
   Links die Kapitel (springen zur Seite), Download als PDF; rechts die
   Seite als Bild zum Blättern, Klick öffnet sie groß (Galerie-Fenster). */
.karte-sek{padding-block:var(--sek)}
.karte-sek+.lr-bloecke{padding-top:0}
.einleitung+.bildkacheln-sek{padding-top:0}
.bildkacheln-sek+.haften{padding-top:20px}
.karte-sek>.h-gross{margin-bottom:10px}
.karte-blick{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,560px);gap:clamp(36px,6vw,90px);justify-content:center;align-items:start;max-width:1080px;margin:56px auto 0}
.karte-kapitel{position:sticky;top:calc(var(--kopf-h-fest) + 30px)}
.karte-kapitel ol{border-top:1px solid var(--taube)}
.karte-kapitel li{border-bottom:1px solid rgba(106,131,160,.5)}
.karte-kapitel button{position:relative;width:100%;display:flex;align-items:baseline;gap:14px;padding:13px 4px;text-align:left;font:300 20px/28px var(--serif);color:var(--marine);transition:color var(--t),padding var(--t)}
.karte-kapitel button span{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1px;color:var(--eiche-d);font-variant-numeric:tabular-nums;min-width:20px}
.karte-kapitel button::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--eiche-d);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.karte-kapitel button:hover{color:var(--eiche-d);padding-left:10px}
.karte-kapitel button[aria-current]{color:var(--eiche-d)}
.karte-kapitel button[aria-current]::after{transform:scaleX(1)}
.karte-laden{margin-top:30px;display:grid;gap:10px;justify-items:start}
.karte-laden .klein{font:300 var(--fs-klein)/24px var(--sans);color:var(--braun)}
.karte-seiten{position:relative}
.karte-seiten .rahmen{position:relative;aspect-ratio:1100/1556;overflow:hidden;background:#fff;box-shadow:var(--kante-aussen)}
.karte-seiten .schiene{position:absolute;inset:0}
.karte-seiten .dia>img{object-fit:contain;background:#fff}
.karte-seiten .rahmen::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen);z-index:4}
.karte-leiste{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.karte-leiste .zi-steuer{gap:14px}
.karte-leiste .gross-ansehen{display:inline-flex;align-items:center;gap:10px;font:500 var(--fs-klein)/1 var(--serif);letter-spacing:.37px;text-transform:uppercase;color:var(--marine);min-height:44px}
.karte-leiste .gross-ansehen svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform var(--t)}
.karte-leiste .gross-ansehen:hover{color:var(--eiche-d)}
.karte-leiste .gross-ansehen:hover svg{transform:scale(1.15)}
@media (max-width:900px){
  .karte-blick{grid-template-columns:minmax(0,1fr);max-width:560px;gap:26px}
  .karte-kapitel{position:static}
  .karte-kapitel ol{display:flex;gap:8px;overflow-x:auto;border:0;padding-bottom:4px;scrollbar-width:none}
  .karte-kapitel ol::-webkit-scrollbar{display:none}
  .karte-kapitel li{border:0;flex:none}
  .karte-kapitel button{padding:8px 14px;border:1px solid var(--taube);font-size:17px;line-height:24px;gap:8px}
  .karte-kapitel button:hover{padding-left:14px}
  .karte-kapitel button::after{display:none}
  .karte-kapitel button[aria-current]{background:var(--marine);border-color:var(--marine);color:var(--creme)}
  .karte-kapitel button[aria-current] span{color:var(--eiche-h)}
  .karte-laden{order:3;justify-items:center;text-align:center}
}
/* Kleiner Link unter der Einleitung / in Blöcken („Zur Speisekarte“) */
.einleitung .links-reihe,.inhalt .links-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:34px}
.inhalt .links-reihe{justify-content:flex-start;margin-top:22px}
@media (max-width:767px){.inhalt .links-reihe{justify-content:center}}

/* ---------- 11.43  Hausschnitt (Was liegt wo?) ----------
   Zwei Häuser (.hs-haus) nebeneinander, je Dach + Etagen (.hs-etage.e2/.e1/.e0)
   mit gleicher Mindesthöhe, damit die Etagen auf einer Linie liegen.
   Zimmer als Links, darunter der Rhein. Handy: Häuser untereinander. */
.lage-sek{padding-block:var(--sek)}
.lage-sek>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto 70px}
.hausschnitt{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 18px;max-width:1080px;margin:56px auto 0}
.hs-dach{position:relative;padding:74px 22px 18px;text-align:center;color:var(--marine)}
.hs-dach::before{content:"";position:absolute;left:0;right:0;top:0;height:56px;background:var(--marine);clip-path:polygon(0 100%,8% 38%,40% 38%,50% 0,60% 38%,92% 38%,100% 100%)}
.hs-haus.neben .hs-dach::before{clip-path:polygon(0 100%,12% 34%,88% 34%,100% 100%);background:var(--eiche-d)}
.hs-dach b{display:block;font:300 28px/34px var(--serif)}
.hs-dach span{display:block;margin-top:4px;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d)}
.hs-etage{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;border-top:1px solid var(--taube);background:rgba(230,213,188,.35);padding:16px 20px 16px 0;border-left:2px solid var(--marine)}
.hs-haus.neben .hs-etage{border-left-color:var(--eiche-d)}
.hs-etage.e2{min-height:150px}.hs-etage.e1{min-height:200px}.hs-etage.e0{min-height:120px}
/* Etagen beider Häuser auf einer Linie (Subgrid) */
@supports (grid-template-rows:subgrid){.hausschnitt{grid-template-rows:repeat(5,auto)}.hs-haus{display:grid;grid-row:span 5;grid-template-rows:subgrid}.hs-rhein{grid-row:6}}
.lr-bloecke+.lage-sek{padding-top:10px}
@media (max-width:767px){.hausschnitt{grid-template-rows:none}.hs-haus{display:block;grid-row:auto}.hs-rhein{grid-row:auto}}
.hs-nr{justify-self:end;text-align:right;font:300 26px/1 var(--serif);color:var(--eiche-d)}
.hs-nr small{display:block;margin-top:6px;font:400 13px/1 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--braun)}
.hs-etage ul{display:grid;gap:8px}
.hs-etage a,.hs-etage .raum{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font:400 18px/26px var(--serif);color:var(--marine);transition:color var(--t),transform var(--t)}
.hs-etage a:hover{color:var(--eiche-d);transform:translateX(4px)}
.hs-etage .raum{color:var(--braun);font-weight:300}
.hs-etage em{font:400 13px/20px var(--sans);font-style:normal;letter-spacing:1px;text-transform:uppercase;color:var(--eiche-d)}
.hs-zugang{display:flex;gap:10px;align-items:center;padding:14px 4px 0;font:400 var(--fs-klein)/22px var(--sans);color:var(--braun);border-top:1px solid var(--taube)}
.hs-zugang svg{flex:none;width:22px;height:22px;stroke:var(--eiche);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hs-rhein{grid-column:1/-1;margin-top:26px;display:flex;align-items:center;gap:14px;justify-content:center;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--taube)}
.hs-rhein svg{width:120px;height:14px;stroke:var(--taube);fill:none;stroke-width:1.4}
.lage-hinweise{max-width:1080px;margin:50px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.lage-hinweise div{border-top:1px solid var(--eiche);padding-top:18px}
.lage-hinweise h3{font:300 22px/30px var(--serif);color:var(--marine)}
.lage-hinweise p{margin-top:8px;font:300 16px/29px var(--sans)}
@media (max-width:900px){.lage-hinweise{grid-template-columns:1fr;max-width:620px;gap:22px}}
@media (max-width:767px){
  .hausschnitt{grid-template-columns:1fr;gap:34px}
  .hs-dach{padding:60px 12px 12px}
  .hs-dach::before{height:44px}
  .hs-etage.e2,.hs-etage.e1,.hs-etage.e0{min-height:0}
  .hs-etage{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:14px 14px 14px 0}
  .hs-nr{font-size:22px}
  .hs-etage a,.hs-etage .raum{font-size:17px;line-height:24px}
  .hs-rhein{margin-top:0}
}

/* ---------- 11.44  Zimmer-Übersicht: Filter und Einträge ----------
   Filter: <div class="filter" data-filter-gruppe> mit Knöpfen data-filter="…";
   Einträge: .lr-block.zi-eintrag data-merkmale="balkon aufzug …". */
.filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1080px;margin:0 auto}
.filter button{min-height:44px;padding:0 20px;border:1px solid var(--taube);font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--marine);transition:background var(--t),color var(--t),border-color var(--t)}
.filter button:hover{border-color:var(--marine)}
.filter button[aria-pressed=true]{background:var(--marine);border-color:var(--marine);color:var(--creme)}
.filter-zahl{text-align:center;margin-top:16px;font:400 var(--fs-klein)/22px var(--serif);color:var(--eiche-d)}
.zi-liste{padding-top:60px}
.zi-liste .lr-block .bilder{order:0}
.zi-liste .lr-block .inhalt{order:1;padding:0 0 0 64px}
.zi-liste .lr-block.gespiegelt .bilder{order:1}
.zi-liste .lr-block.gespiegelt .inhalt{order:0;padding:0 64px 0 0}
.zi-liste .lr-block.aus{display:none}
.zi-liste .lr-block+.lr-block{margin-top:90px}
.zi-liste .lr-block .bilder{aspect-ratio:5/4}
.zi-eintrag .ueberzeile{color:var(--eiche-d)}
.zi-eintrag h3{margin-top:6px}
.zi-eintrag .vorteil{font:400 19px/30px var(--serif)!important;color:var(--marine)}
.zi-eintrag .fakten{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(106,131,160,.6)}
.zi-eintrag .fakten li{display:flex;align-items:center;gap:8px;font:400 var(--fs-klein)/22px var(--serif);color:var(--braun)}
.zi-eintrag .fakten svg{width:22px;height:22px;stroke:var(--taube);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zi-eintrag .zi-btns{justify-content:flex-start;margin-top:24px}
.zi-eintrag .preis{margin-top:14px;font:400 16px/24px var(--serif);color:var(--braun)}
@media (max-width:1023px){.zi-liste .lr-block .inhalt{padding-left:36px}.zi-liste .lr-block.gespiegelt .inhalt{padding:0 36px 0 0}.zi-liste .lr-block+.lr-block{margin-top:70px}}
@media (max-width:767px){
  .zi-liste .lr-block .inhalt,.zi-liste .lr-block.gespiegelt .inhalt{padding:22px 0 0;order:1}
  .zi-liste .lr-block.gespiegelt .bilder{order:0}
  .zi-liste .lr-block+.lr-block{margin-top:56px}
  .zi-eintrag .fakten,.zi-eintrag .zi-btns{justify-content:center}
  .filter{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--rand));padding:0 var(--rand) 4px;scrollbar-width:none}
  .filter::-webkit-scrollbar{display:none}
  .filter button{flex:none}
}

/* ---------- 11.45  Haften (Bild steht, Text läuft) ----------
   Wie bei „Gastgeber & Team“: <section class="haften"> mit
   .haften-bild (bleibt beim Scrollen stehen) und .haften-text. */
.haften{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:start;max-width:1080px;margin-inline:auto;padding-block:var(--sek)}
.haften-bild{position:sticky;top:calc(var(--kopf-h-fest) + 30px);aspect-ratio:4/5;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.haften-bild::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.haften-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.haften-bild img.wechsel{opacity:0;transition:opacity .8s ease}
.haften-bild img.wechsel.an{opacity:1}
.haften-text .h-serif{margin:8px 0 18px}
.haften-text>p,.haften-abschnitt p{font:300 17px/32px var(--sans)}
.haften-text>p+p,.haften-abschnitt p+p{margin-top:14px}
.haften-abschnitt{padding-top:34px;margin-top:34px;border-top:1px solid rgba(106,131,160,.5)}
.haften-abschnitt h3{font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine);margin:4px 0 12px}
.haften-abschnitt .ueberzeile{color:var(--eiche-d)}
.haften-abschnitt .entdecken{margin-top:18px}
@media (max-width:900px){.haften{grid-template-columns:1fr}.haften-bild{position:relative;top:auto;aspect-ratio:4/3}}
/* Gastgeber kurz (Startseite): Text mittig neben dem Bild */
.gastgeber.kurz{align-items:center;padding-block:10px var(--sek)}
.gastgeber.kurz .gastgeber-bild{position:relative;top:auto}
.gastgeber-text .entdecken{margin-top:22px}
/* Portraits bei den Personen */
.person figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--greige);margin-bottom:16px;box-shadow:var(--kante-aussen)}
.person figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.person:hover figure img{transform:scale(1.04)}

/* ---------- 11.46  Zimmerseiten kompakter (main.zimmerseite) ---------- */
.zimmerseite{--sek:72px;--nach:96px}
@media (max-width:1023px){.zimmerseite{--sek:60px;--nach:76px}}
@media (max-width:767px){.zimmerseite{--sek:48px;--nach:56px}}
.zimmerseite .ausstattung{padding-bottom:24px}
.zimmerseite .formate-sek{padding-bottom:var(--sek)}
.zimmerseite .formate-sek+.ausstattung{padding-top:10px}
.zimmerseite .ausstattung+.schritt{padding-top:44px;padding-bottom:64px}
.zimmerseite .schritt .emblem{width:120px;margin-bottom:22px}
.zimmerseite .schritt .knoepfe{margin-top:26px}
.zimmerseite .bildkacheln-sek>.linie{margin-bottom:44px}
.zimmerseite .bildkacheln-sek>.h-gross{margin-bottom:40px}
.zimmerseite .mehr-link{margin-top:36px}
.zimmerseite .ueberblick{margin-top:44px}

/* ---------- 11.47  Varianten mit Bildern zum Durchschalten ----------
   .format-bild enthält einen kleinen Slider (.schiene[data-slider] + .punkte). */
.format .format-bild .schiene{position:absolute;inset:0}
.format .format-bild .dia>img{transition:transform .9s cubic-bezier(.2,.6,.3,1)}
.format:hover .format-bild .dia>img{transform:scale(1.04)}
.format .format-bild .punkte{right:16px;bottom:14px;gap:8px}
.format .format-bild .punkte button{width:12px;height:12px}
.format .format-bild .pfeil{width:44px;height:44px;opacity:0;transition:opacity var(--t),color var(--t)}
.format .format-bild .pfeil::before{width:16px;height:16px}
.format:hover .format-bild .pfeil,.format .format-bild .pfeil:focus-visible{opacity:1}
.format .format-bild .zaehler{position:absolute;left:16px;bottom:12px;z-index:5;color:var(--creme);font:300 var(--fs-klein)/1 var(--sans);letter-spacing:1.4px;text-shadow:0 1px 6px rgba(21,50,84,.6)}
@media (hover:none){.format .format-bild .pfeil{opacity:1}}

/* ---------- 11.48  Schwarz-Weiß in der Bühne (Geschichte) ---------- */
.dia.sw>img{filter:grayscale(1) contrast(1.04)}

/* ---------- 11.49  Zeitreise: Ende ohne Leerraum, Foto „heute“ in Farbe ---------- */
.zeitreise{padding-bottom:var(--sek)}
.zl:last-of-type>li:last-child{padding-bottom:0}
.zeitreise+.schritt{padding-top:30px}
.zl>li.heute figure img{filter:none;transform:none}
.zl>li.heute figure{aspect-ratio:4/5;max-width:340px}
.zl>li.heute:nth-child(even) figure{margin-left:auto}
@media (max-width:767px){.zl>li.heute:nth-child(even) figure{margin-left:0}}

/* ---------- 11.50  Überblick-Kacheln (Unser Haus): drei große Wege ---------- */
.bildkachel.sw img{filter:grayscale(1) sepia(.15);transition:filter 1s ease}
.bildkachel.sw:hover img,.bildkachel.sw.hov img{filter:none}
.bildkachel img.oben{object-position:50% 25%}
/* Tagebuch der Verwandlung */
.tagebuch{max-width:var(--spalte);margin:0 auto;padding:var(--sek) var(--rand)}
.tagebuch>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto 70px;opacity:.6}
.tagebuch>.text{margin:26px auto 0;text-align:center}
.tagebuch .eintraege{max-width:900px;margin:44px auto 0;border-top:1px solid var(--taube)}
.tagebuch .eintrag{display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;padding:28px 0;border-bottom:1px solid rgba(106,131,160,.5)}
.tagebuch .eintrag .wann{font:300 24px/32px var(--serif);color:var(--eiche-d)}
.tagebuch .eintrag h3{font:300 24px/32px var(--serif);color:var(--marine)}
.tagebuch .eintrag p{margin-top:8px;font:300 17px/31px var(--sans)}
.tagebuch .eintrag.kommt .wann::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-left:10px;vertical-align:middle}
@media (max-width:767px){.tagebuch .eintrag{grid-template-columns:1fr;gap:6px}}

/* =====================================================================
   Ergänzungen 30.09.2026, zweite Runde
   ===================================================================== */

/* ---------- 11.51  Hausansicht (Was liegt wo, schlicht) ----------
   Ein Foto des ganzen Hauses mit zwei Marken, darunter zwei knappe Spalten. */
.hausansicht{position:relative;max-width:1080px;margin:50px auto 0;aspect-ratio:1100/700;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.hausansicht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hausansicht::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--kante-innen)}
.hausansicht .marke{position:absolute;top:8%;z-index:2;display:inline-flex;flex-direction:column;align-items:center;gap:0;padding:8px 16px;background:var(--creme);color:var(--marine);font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.6px;text-transform:uppercase;transform:translateX(-50%)}
.hausansicht .marke::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:46px;background:var(--creme)}
.hausansicht .marke.haupt{left:40%}
.hausansicht .marke.gast{left:84%}
.lage-kurz{max-width:1080px;margin:34px auto 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 60px}
.lage-kurz h3{font:300 24px/32px var(--serif);color:var(--marine);padding-bottom:10px;border-bottom:1px solid var(--eiche);margin-bottom:10px}
.lage-kurz h3 span{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d);margin-left:10px}
.lage-kurz p{font:300 16px/29px var(--sans);margin-top:6px}
.lage-kurz p b{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1px;color:var(--eiche-d);margin-right:8px}
.lage-kurz a{color:var(--marine);border-bottom:1px solid rgba(21,50,84,.3);transition:color var(--t),border-color var(--t)}
.lage-kurz a:hover{color:var(--eiche-d);border-color:var(--eiche-d)}
@media (max-width:767px){.hausansicht{aspect-ratio:4/3}.hausansicht .marke{font-size:13px;padding:6px 10px}.hausansicht .marke.gast{left:82%}.lage-kurz{grid-template-columns:1fr}}

/* ---------- 11.52  Beiträge (Tagebuch als Posts) ---------- */
.beitraege{max-width:1180px;margin:50px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 30px;text-align:left}
.beitrag{display:flex;flex-direction:column;align-items:flex-start}
.beitrag-bild{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--greige);margin-bottom:18px;box-shadow:var(--kante-aussen)}
.beitrag-bild img,.beitrag-bild .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.beitrag:hover .beitrag-bild img{transform:scale(1.04)}
.beitrag-datum{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d)}
.beitrag h3{margin-top:6px;font:300 25px/33px var(--serif);color:var(--marine)}
.beitrag p{margin-top:8px;font:300 16px/29px var(--sans)}
.beitrag .entdecken{margin-top:14px}
.beitrag.kommt{padding:26px 26px 28px;border:1px dashed var(--taube);align-self:start}
.beitrag-status{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font:400 13px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--marine)}
.beitrag-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
@media (max-width:1023px){.beitraege{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.beitraege{grid-template-columns:1fr;gap:40px}}

/* ---------- 11.53  Kennzahlen (Weingut) ---------- */
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;margin:0 auto;border-top:1px solid var(--taube);border-bottom:1px solid var(--taube)}
.kennzahlen div{padding:26px 16px;text-align:center}
.kennzahlen div+div{border-left:1px solid rgba(106,131,160,.5)}
.kennzahlen b{display:block;font:300 44px/1.1 var(--serif);color:var(--marine)}
.kennzahlen span{display:block;margin-top:6px;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d)}
@media (max-width:767px){.kennzahlen{grid-template-columns:1fr 1fr}.kennzahlen div:nth-child(3){border-left:0}.kennzahlen div:nth-child(n+3){border-top:1px solid rgba(106,131,160,.5)}.kennzahlen b{font-size:34px}}

/* ---------- 11.54  Lagen (Karten mit Rebsorte) ---------- */
.lagen-sek{padding-block:var(--sek)}
.lagen{max-width:1080px;margin:50px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--taube)}
.lage{position:relative;padding:28px 26px 30px;border-bottom:1px solid var(--taube);isolation:isolate;overflow:hidden}
.lage:not(:nth-child(3n+1)){border-left:1px solid rgba(106,131,160,.5)}
.lage::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--eiche-h);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lage:hover::before{transform:scaleY(1)}
.lage .ort{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d)}
.lage h3{margin-top:4px;font:300 25px/32px var(--serif);color:var(--marine)}
.lage .sorte{margin-top:6px;font:400 16px/24px var(--serif);color:var(--marine)}
.lage p{margin-top:8px;font:300 16px/28px var(--sans)}
@media (max-width:1023px){.lagen{grid-template-columns:1fr 1fr}.lage:not(:nth-child(3n+1)){border-left:0}.lage:nth-child(2n){border-left:1px solid rgba(106,131,160,.5)}}
@media (max-width:640px){.lagen{grid-template-columns:1fr}.lage:nth-child(2n){border-left:0}}

/* ---------- 11.55  Zwei Spalten Text (Rebsorten) ---------- */
.zwei-texte{max-width:1080px;margin:50px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:30px 70px}
.zwei-texte h3{font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine);margin-bottom:10px}
.zwei-texte .ueberzeile{color:var(--eiche-d)}
.zwei-texte p{font:300 17px/31px var(--sans)}
.zwei-texte p+p{margin-top:12px}
@media (max-width:767px){.zwei-texte{grid-template-columns:1fr}}

/* ---------- 11.56  Weinliste mit Bestellung ----------
   Klassisch wie die gedruckte Weinpreisliste: Kapitel (Weiß trocken, Restsüße,
   Spätburgunder, Weißherbst, Sekt, Weinbrand), je Wein Jahrgang + Nr. der
   Preisliste, Lage, Rebsorte/Prädikat, Geschmack, Beschreibung, Analyse;
   rechts Preis mit Literpreis und Menge (+/−). Oben eine mitlaufende Leiste
   mit Kapiteln und – sobald gewählt – Flaschen, Summe, Karton-Hinweis.
   Unten Warenkorb und Formular. Große, gut lesbare Schrift. */
.wein-sek{padding-block:var(--sek)}
/* Mitlaufende Leiste: Kapitel oben (sticky), Auswahl unten (fest, nur im Weinbereich) */
.wein-kapitel{position:sticky;top:var(--kopf-h-fest);z-index:5;max-width:1080px;margin:40px auto 0;background:var(--creme);border-top:1px solid var(--taube);border-bottom:1px solid var(--eiche)}
.wk-links{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}
.wk-links::-webkit-scrollbar{display:none}
.wk-links a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--marine);white-space:nowrap;transition:background var(--t),color var(--t)}
.wk-links a+a{border-left:1px solid rgba(106,131,160,.35)}
.wk-links a:hover,.wk-links a.aktiv{background:var(--marine);color:var(--creme)}
.wk-korb{position:fixed;left:50%;bottom:28px;z-index:var(--z-rand);width:min(1080px,calc(100% - 2 * var(--rand)));display:flex;align-items:stretch;min-height:58px;background:var(--creme);border:1px solid var(--eiche);box-shadow:var(--kante-aussen);color:var(--marine);opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.wein-kapitel.gewaehlt.im-bereich:not(.am-ziel) .wk-korb{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .35s ease,transform .35s ease}
.wk-korb>span:not(.wk-los){display:flex;align-items:center;padding:0 22px;white-space:nowrap}
.wk-korb .wk-zahl{font:400 18px/1 var(--serif);background:var(--eiche-h)}
.wk-korb .wk-summe{font:500 20px/1 var(--serif);border-right:1px solid rgba(106,131,160,.4)}
.wk-korb .wk-karton{flex:1;font:300 var(--fs-klein)/1 var(--sans);color:var(--braun)}
.wk-korb .wk-los{margin-left:auto;display:flex;align-items:center;gap:12px;white-space:nowrap;padding:0 30px 0 28px;background:var(--marine);color:var(--creme);font:500 var(--fs-klein)/1 var(--serif);letter-spacing:.37px;text-transform:uppercase;transition:background var(--t),color var(--t)}
.wk-korb .wk-los::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.wk-korb:hover .wk-los{background:var(--braun);color:var(--eiche-h)}
@media (max-width:767px){
  .wein-kapitel{margin-inline:calc(var(--rand) * -1)}
  .wk-links a{min-height:48px;padding:0 14px}
  .wk-korb{bottom:calc(55px + env(safe-area-inset-bottom,0px) + 10px);min-height:52px}
  .wk-korb>span:not(.wk-los){padding:0 14px}
  .wk-korb>span.wk-karton{display:none}
  .wk-korb>span.wk-summe{flex:1;border-right:0}
  .wk-korb .wk-los{padding:0 16px}
}
@media print{.wk-korb{display:none}}

/* Weinliste als kompakte Tabelle (Kopfzeile läuft in der Kapitel-Leiste mit) */
.weinliste{max-width:1080px;margin:0 auto}
.wz-kopfzeile,.wein-zeile{display:grid;grid-template-columns:34px 86px minmax(0,1fr) 108px 88px 236px;column-gap:14px;align-items:center}
.wz-kopfzeile{min-height:38px;border-top:1px solid rgba(106,131,160,.35);font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--eiche-d)}
.wz-kopfzeile span:last-child{text-align:right;padding-right:4px}
.weingruppe{scroll-margin-top:calc(var(--kopf-h-fest) + 100px)}
.wg-titel{display:flex;align-items:baseline;gap:14px;padding:34px 0 8px;border-bottom:1px solid var(--eiche);font:300 24px/30px var(--serif);color:var(--marine)}
.wg-titel span{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--eiche-d)}
.wein-zeile{position:relative;padding:9px 0;border-bottom:1px solid rgba(106,131,160,.3);transition:background var(--t)}
.wein-zeile::before{content:"";position:absolute;left:-12px;top:-1px;bottom:-1px;width:2px;background:var(--eiche);transform:scaleY(0);transition:transform var(--t)}
.wein-zeile:hover{background:rgba(230,213,188,.25)}
.wein-zeile:has(.gewaehlt){background:rgba(230,213,188,.5)}
.wein-zeile:has(.gewaehlt)::before{transform:scaleY(1)}
.wz-nr{font:400 var(--fs-klein)/1 var(--sans);color:var(--eiche-d);padding-left:2px}
.wz-jahr{font:400 18px/1 var(--serif);color:var(--marine)}
.wz-wein h4{font:400 18px/25px var(--serif);color:var(--marine)}
.wz-wein p{font:300 var(--fs-klein)/22px var(--sans);color:var(--braun)}
.wz-notiz{font-family:var(--serif);font-weight:400;color:var(--eiche-d)}
.wz-ges{font:400 var(--fs-klein)/1 var(--sans);letter-spacing:.8px;color:var(--marine)}
.wz-alk{font:300 var(--fs-klein)/1 var(--sans);color:var(--braun);white-space:nowrap}
.wz-kauf{display:grid;gap:6px}
.wz-kauf .wein{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.wz-preis{text-align:right;font:400 18px/1 var(--serif);color:var(--marine);white-space:nowrap}
.wz-preis small{display:block;margin-top:4px;font:300 var(--fs-klein)/1 var(--sans);color:var(--braun)}
.menge{display:inline-flex;align-items:center;border:1px solid rgba(106,131,160,.6);background:var(--creme)}
.menge button{width:36px;height:36px;display:grid;place-items:center;font:300 20px/1 var(--sans);color:var(--marine);transition:background var(--t),color var(--t)}
.menge button:hover{background:var(--marine);color:var(--creme)}
.menge input{width:38px;height:36px;border:0;border-left:1px solid rgba(106,131,160,.4);border-right:1px solid rgba(106,131,160,.4);background:var(--creme);text-align:center;font:400 17px var(--serif);color:var(--marine);-moz-appearance:textfield}
.menge input::-webkit-outer-spin-button,.menge input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wein.gewaehlt .menge{border-color:var(--marine)}
.wein.gewaehlt .menge input{background:var(--marine);color:var(--creme)}
@media (max-width:1023px){
  .wz-kopfzeile,.wein-zeile{grid-template-columns:28px 84px minmax(0,1fr) 98px 76px 222px;column-gap:10px}
  .wz-kopfzeile{letter-spacing:.2px}
}
@media (max-width:767px){
  .wz-kopfzeile{display:none}
  .wein-zeile{grid-template-columns:48px auto minmax(0,1fr);column-gap:0;row-gap:2px;padding:12px 0;align-items:start}
  .wein-zeile::before{left:-8px}
  .wz-jahr{grid-column:1;grid-row:1;padding-top:4px}
  .wz-nr{grid-column:1;grid-row:2;padding-top:4px}
  .wz-nr::before{content:"Nr. "}
  :lang(en) .wz-nr::before{content:"No. "}
  .wz-wein{grid-column:2/4;grid-row:1}
  .wz-ges{grid-column:2;grid-row:2;padding-top:4px;line-height:22px}
  .wz-alk{grid-column:3;grid-row:2;padding-top:4px;line-height:22px}
  .wz-ges:not(:empty)+.wz-alk:not(:empty)::before{content:"·";margin:0 8px}
  .wz-kauf{grid-column:2/4;grid-row:3;margin-top:8px}
  .wz-kauf .wein{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .wz-preis{text-align:left}
  .wz-preis small{font-size:15px}
  .menge button{width:44px;height:44px}
  .menge input{height:44px;width:44px}
}

/* Warenkorb und Formular */
.bestell-kasten{max-width:1080px;margin:50px auto 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);background:var(--eiche-h);padding:clamp(28px,4vw,52px);box-shadow:var(--kante-aussen);scroll-margin-top:calc(var(--kopf-h-fest) + 24px)}
.warenkorb h3{font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
.warenkorb ul{margin-top:14px}
.warenkorb li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(122,86,52,.25);font:400 16px/24px var(--serif);color:var(--marine)}
.warenkorb li span:last-child{white-space:nowrap}
.warenkorb .leer{font:300 16px/28px var(--sans);color:var(--braun);border:0}
.warenkorb .summe{display:flex;justify-content:space-between;margin-top:14px;font:500 20px/28px var(--serif);color:var(--marine)}
.warenkorb .versand{margin-top:8px;font:300 var(--fs-klein)/24px var(--sans);color:var(--braun)}
.bestell-kasten .formular .f-feld input,.bestell-kasten .formular .f-feld select,.bestell-kasten .formular .f-feld textarea{background:var(--creme)}
.bestell-kasten .ok{margin-top:16px;font:400 17px/28px var(--serif);color:var(--marine)}
.bestell-kasten .fehler{margin-top:12px;font:400 16px/26px var(--serif);color:var(--eiche-d)}
@media (max-width:900px){.bestell-kasten{grid-template-columns:1fr}}
@media (max-width:767px){.formular{grid-template-columns:1fr}}

/* Bedingungen + Kontakt im Bestellkasten */
.warenkorb .bedingungen{margin-top:18px;display:grid;gap:4px}
.warenkorb .bedingungen li{display:block;padding:0 0 0 14px;border:0;position:relative;font:300 var(--fs-klein)/24px var(--sans);color:var(--braun)}
.warenkorb .bedingungen li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:1px;background:var(--eiche-d)}
.wg-kontakt{margin-top:24px;padding-top:18px;border-top:1px solid rgba(122,86,52,.3);scroll-margin-top:calc(var(--kopf-h-fest) + 24px)}
.wg-kontakt p{margin-top:4px;font:400 16px/26px var(--serif);color:var(--marine)}

/* Lagen-Tafel: zwei Orte nebeneinander, Lagen als ruhige Liste (Weingut) */
.lagen-tafel{max-width:1080px;margin:50px auto 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--eiche)}
.lt-ort{padding:30px 40px 34px 0}
.lt-ort+.lt-ort{padding:30px 0 34px 40px;border-left:1px solid rgba(106,131,160,.45)}
.lt-kopf b{display:block;margin-top:4px;font:300 var(--fs-h3)/var(--lh-h3) var(--serif);color:var(--marine)}
.lt-text{margin-top:10px;font:300 16px/28px var(--sans);color:var(--braun)}
.lagen-tafel dl{margin-top:18px}
.lagen-tafel dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid rgba(106,131,160,.3)}
.lagen-tafel dt{font:400 18px/26px var(--serif);color:var(--marine)}
.lagen-tafel dd{font:300 var(--fs-klein)/26px var(--sans);color:var(--braun)}
@media (max-width:900px){.lagen-tafel{grid-template-columns:1fr}.lt-ort,.lt-ort+.lt-ort{padding:26px 0;border-left:0}.lt-ort+.lt-ort{border-top:1px solid rgba(106,131,160,.45)}}
@media (max-width:480px){.lagen-tafel dl div{grid-template-columns:1fr;gap:0}}

/* Weinprobe-Angebote (kleine Preisliste im Textblock) */
.probe-liste{margin:16px 0 18px;border-top:1px solid rgba(106,131,160,.35)}
.probe-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:10px 0;border-bottom:1px solid rgba(106,131,160,.35)}
.probe-liste b{font:400 18px/26px var(--serif);color:var(--marine)}
.probe-liste span{grid-column:1;font:300 var(--fs-klein)/22px var(--sans);color:var(--braun)}
.probe-liste em{grid-column:2;grid-row:1/3;align-self:center;font:400 18px/1 var(--serif);font-style:normal;color:var(--marine)}

/* Kennzahlen direkt unter der Einleitung */
.einleitung .kennzahlen{margin-top:56px}
.einleitung+.lagen-sek{padding-top:10px}

/* ---------- 11.57  Kontakt mit Portrait (Weingut, Jobs) ---------- */
.kontakt-karte{max-width:880px;margin:50px auto 0;display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:center}
.kontakt-karte figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--greige);box-shadow:var(--kante-aussen)}
.kontakt-karte figure img,.kontakt-karte figure .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kontakt-karte .ueberzeile{color:var(--eiche-d)}
.kontakt-karte h3{margin-top:4px;font:300 var(--fs-h2)/var(--lh-h2) var(--serif);color:var(--marine)}
.kontakt-karte p{margin-top:12px;font:300 17px/31px var(--sans)}
.kontakt-karte .zeilen{margin-top:18px;display:grid;gap:10px}
.kontakt-karte .zeilen a,.kontakt-karte .zeilen span{display:inline-flex;align-items:center;gap:12px;font:400 19px/28px var(--serif);color:var(--marine)}
.kontakt-karte .zeilen svg{width:22px;height:22px;stroke:var(--eiche);fill:none;stroke-width:1.6;flex:none}
.kontakt-karte .zeilen a:hover{color:var(--eiche-d)}
@media (max-width:767px){.kontakt-karte{grid-template-columns:1fr;max-width:420px;text-align:center}.kontakt-karte figure{max-width:260px;margin:0 auto}.kontakt-karte .zeilen{justify-items:center}}

/* ---------- 11.58  Stelle (Jobs) und Eignung (Hunde) ---------- */
.stelle{max-width:1080px;margin:0 auto;padding-block:var(--sek)}
.stelle-kopf{text-align:center}
.stelle-kopf .fahnen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.stelle-kopf .fahnen span{padding:6px 14px;border:1px solid var(--taube);font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--marine)}
.eignung{max-width:1080px;margin:44px auto 0;border-top:1px solid var(--taube)}
.eignung li{display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1.4fr);gap:8px 28px;align-items:baseline;padding:18px 4px;border-bottom:1px solid rgba(106,131,160,.45)}
.eignung .zi{font:400 19px/28px var(--serif);color:var(--marine)}
.eignung .zi a{border-bottom:1px solid rgba(21,50,84,.3)}
.eignung .zi a:hover{color:var(--eiche-d)}
.eignung .ja,.eignung .nein,.eignung .frage{display:inline-flex;align-items:center;gap:10px;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase}
.eignung .ja{color:var(--marine)}.eignung .nein{color:var(--eiche-d)}.eignung .frage{color:var(--braun)}
.eignung .ja::before,.eignung .nein::before,.eignung .frage::before{content:"";width:10px;height:10px;border-radius:50%}
.eignung .ja::before{background:var(--marine)}
.eignung .nein::before{border:1.5px solid var(--eiche-d)}
.eignung .frage::before{border:1.5px dashed var(--braun)}
.eignung p{font:300 16px/28px var(--sans)}
@media (max-width:767px){.eignung li{grid-template-columns:1fr}}
.regeln{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.regeln div{border-top:1px solid var(--eiche);padding-top:18px}
.regeln h3{font:300 24px/32px var(--serif);color:var(--marine)}
.regeln p{margin-top:8px;font:300 16px/29px var(--sans)}
@media (max-width:900px){.regeln{grid-template-columns:1fr;max-width:620px}}

.liste.einspaltig{columns:1;margin:14px 0 0;max-width:none}
.stelle .haften{padding-top:44px}
.hunde-sek{padding-block:var(--sek)}
.hunde-sek .regeln{margin-top:44px}
.hunde-sek+.hunde-sek{padding-top:0}
.hunde-sek>.linie,.lagen-sek>.linie,.wein-sek>.linie{height:1px;background:var(--taube);max-width:1080px;margin:0 auto 70px;opacity:.6}

/* ---------- 11.59  Bestätigung nach dem Absenden (.ok.danke) ----------
   Formular verschwindet, an seiner Stelle ein ruhiger Dank. .gesendet = direkt
   über einen Formular-Dienst verschickt, sonst Hinweis auf das E-Mail-Programm. */
.danke{margin-top:6px;padding:28px 30px;background:var(--creme);border-top:2px solid var(--eiche);box-shadow:var(--kante-aussen);outline:none}
.danke .danke-titel{display:block;font:300 28px/36px var(--serif);color:var(--marine)}
.danke p{margin-top:10px;font:300 17px/30px var(--sans);color:var(--braun)}
.danke .ok-gesendet{display:none}
.danke.gesendet .ok-gesendet{display:block}
.danke.gesendet .ok-mail{display:none}
.danke [data-zurueck]{margin-top:16px;font:500 var(--fs-klein)/1 var(--serif);letter-spacing:.37px;text-transform:uppercase;color:var(--marine);border-bottom:1px solid currentColor;padding:4px 0}
.danke [data-zurueck]:hover{color:var(--eiche-d)}
:lang(en) .tag.heute::after{content:"Today"}


/* ---------- 11.60  Rechtstexte (Impressum, Datenschutz, AGB, Barrierefreiheit) ----------
   Ruhige Lesespalte, Sprungliste oben, nummerierte Absätze hängend. */
.rechtstext{max-width:calc(var(--text) + 2 * var(--rand));margin-inline:auto;padding:0 var(--rand) var(--sek);font:300 17px/32px var(--sans);color:var(--braun)}
.rechtstext .stand{display:block;text-align:center;font:400 var(--fs-klein)/24px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d);margin-bottom:40px}
.rechtstext h2{font:300 30px/40px var(--serif);color:var(--marine);margin:64px 0 14px;padding-top:26px;border-top:1px solid var(--taube)}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext h3{font:400 21px/30px var(--serif);color:var(--marine);margin:34px 0 8px}
.rechtstext p+p,.rechtstext p+ul,.rechtstext ul+p,.rechtstext ol+p,.rechtstext p+ol{margin-top:14px}
.rechtstext b,.rechtstext strong{font-weight:400;color:var(--marine)}
.rechtstext a{border-bottom:1px solid rgba(21,50,84,.35);word-break:break-word}
.rechtstext a:hover{color:var(--eiche-d);border-color:currentColor}
.rechtstext ol{counter-reset:abs;display:grid;gap:12px}
.rechtstext ol>li{counter-increment:abs;position:relative;padding-left:34px}
.rechtstext ol>li::before{content:counter(abs) ".";position:absolute;left:0;top:0;font:400 16px/32px var(--serif);color:var(--eiche-d)}
.rechtstext ul{display:grid;gap:8px;margin-top:10px}
.rechtstext ul>li{position:relative;padding-left:20px}
.rechtstext ul>li::before{content:"";position:absolute;left:2px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--eiche)}
.rechtstext .adresse{padding:26px 30px;background:var(--eiche-h);font:400 18px/32px var(--serif);color:var(--marine)}
.rechtstext .adresse b{font-weight:500}
.rechtstext .adresse+.adresse{margin-top:20px}
.rechtstext .tabelle{overflow-x:auto;margin-top:18px}
.rechtstext table{width:100%;border-collapse:collapse;font:300 16px/26px var(--sans)}
.rechtstext th,.rechtstext td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid rgba(106,131,160,.5)}
.rechtstext th{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d);border-bottom-color:var(--taube)}
.rechtstext td:first-child{color:var(--marine);font-weight:400;width:48%}
.sprungliste{max-width:calc(var(--text) + 2 * var(--rand));margin:0 auto 70px;padding:0 var(--rand)}
.sprungliste ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--taube)}
.sprungliste li{border-bottom:1px solid rgba(106,131,160,.45)}
.sprungliste a{display:flex;gap:12px;padding:12px 2px;font:400 17px/26px var(--serif);color:var(--marine)}
.sprungliste a span{color:var(--eiche-d);min-width:30px}
.sprungliste a:hover{color:var(--eiche-d)}
@media (max-width:767px){
  .rechtstext{font-size:16px;line-height:30px;text-align:left}
  .rechtstext h2{font-size:25px;line-height:34px;margin-top:48px}
  .rechtstext td:first-child{width:auto}
  .sprungliste ol{grid-template-columns:1fr}
}

/* ---------- 11.61  Aktuelle Hinweise (datierter Kasten, z. B. Sperrungen) ---------- */
.hinweise{max-width:1080px;margin:0 auto;padding:40px 44px 44px;background:var(--eiche-h);border-top:2px solid var(--eiche)}
.hinweise .h-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:22px}
.hinweise .h-kopf h2{font:300 var(--fs-h2)/var(--lh-h2) var(--serif);color:var(--marine)}
.hinweise .h-kopf .ueberzeile{color:var(--eiche-d)}
.hinweise ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.hinweise li{position:relative;padding-left:24px;font:300 16px/28px var(--sans);color:var(--braun)}
.hinweise li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.hinweise li b{display:block;font:400 19px/28px var(--serif);color:var(--marine);margin-bottom:2px}
.hinweise li a{border-bottom:1px solid rgba(21,50,84,.35)}
.hinweise .h-fuss{margin-top:26px;font:300 var(--fs-klein)/24px var(--sans);color:var(--eiche-d)}
@media (max-width:767px){.hinweise{padding:30px 22px 32px}.hinweise ul{grid-template-columns:1fr}}

/* ---------- 11.62  Fahrplan-Tabelle (Fähren, Zeiten) ---------- */
.fahrplan{max-width:1080px;margin:40px auto 0;overflow-x:auto}
.fahrplan table{width:100%;min-width:640px;border-collapse:collapse;font:300 16px/26px var(--sans);color:var(--braun)}
.fahrplan th,.fahrplan td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid rgba(106,131,160,.5)}
.fahrplan thead th{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d);border-bottom:1px solid var(--taube)}
.fahrplan tbody th{font:400 19px/28px var(--serif);color:var(--marine);width:30%}
.fahrplan tbody th span{display:block;font:300 var(--fs-klein)/24px var(--sans);color:var(--braun)}
.fahrplan tbody tr{transition:background var(--t)}
.fahrplan tbody tr:hover{background:rgba(230,213,188,.45)}
.fahrplan .zu{color:var(--eiche-d)}
.fahrplan-fuss{max-width:1080px;margin:16px auto 0;font:300 var(--fs-klein)/24px var(--sans);color:var(--eiche-d)}
.fahrplan-fuss a{border-bottom:1px solid currentColor}
@media (max-width:767px){
  .fahrplan table{min-width:0}
  .fahrplan thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fahrplan table,.fahrplan tbody,.fahrplan tr,.fahrplan th,.fahrplan td{display:block;width:auto}
  .fahrplan tbody tr{padding:18px 0;border-bottom:1px solid rgba(106,131,160,.5)}
  .fahrplan tbody tr:first-child{border-top:1px solid var(--taube)}
  .fahrplan th,.fahrplan td,.fahrplan tbody th{border:0;padding:0;width:auto}
  .fahrplan td{margin-top:10px}
  .fahrplan td[data-label]::before{content:attr(data-label);display:block;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--eiche-d)}
}

/* ---------- 11.63  Kontaktwege (drei Felder mit Symbol, Knopf darunter) ---------- */
.kontaktwege-sek{padding-block:var(--sek)}
.wege{max-width:1080px;margin:44px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.weg-feld{display:grid;align-content:start;justify-items:center;text-align:center;gap:10px;padding:34px 24px 30px;border-top:1px solid var(--eiche);transition:background var(--t)}
.weg-feld:hover{background:rgba(230,213,188,.5)}
.weg-feld svg{width:40px;height:40px;stroke:var(--eiche-d);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.weg-feld h3{font:300 26px/34px var(--serif);color:var(--marine)}
.weg-feld p{font:300 16px/28px var(--sans)}
.weg-feld .gross{font:400 20px/30px var(--serif);color:var(--marine)}
.weg-feld .gross a{border-bottom:1px solid rgba(21,50,84,.3)}
.weg-feld .gross a:hover{color:var(--eiche-d)}
.weg-feld .knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
@media (max-width:900px){.wege{grid-template-columns:1fr;max-width:520px;gap:0}}

/* ---------- 11.64  Schritte (drei nummerierte Felder, z. B. Gutschein) ---------- */
.schritte{max-width:1080px;margin:44px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;counter-reset:s}
.schritte li{counter-increment:s;border-top:1px solid var(--eiche);padding-top:18px}
.schritte li::before{content:counter(s,upper-roman);display:block;font:300 34px/1 var(--serif);color:var(--eiche-d);margin-bottom:12px}
.schritte h3{font:300 24px/32px var(--serif);color:var(--marine)}
.schritte p{margin-top:8px;font:300 16px/29px var(--sans)}
@media (max-width:900px){.schritte{grid-template-columns:1fr;max-width:620px}}
.auf-einen-blick{padding:0 var(--rand) var(--sek)}

/* ---------- 12  Druck ---------- */
@media print{
  .kopf,.mobilbar,.cookie,.fenster,.seitenmenu,.deck,.skip,.rand,.folgt-hinweis{display:none!important}
  .js .rv:not(.in){opacity:1;transform:none}
  .buehne{height:60vh}
}


/* ---------- 13  Nur für die Musterseite bausteine.html ---------- */
.muster-kapitel{padding-block:var(--sek) 0}
.muster-kapitel>.h-gross{margin-bottom:12px}
.muster-kapitel>.muster-hinweis{text-align:center;margin-bottom:50px}
.muster-hinweis{font:300 16px/28px var(--sans);color:var(--braun)}
.muster-hinweis code,.muster-code{font:400 14px/22px ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--eiche-d);background:var(--eiche-h);padding:1px 6px}
.muster-farben{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.muster-farbe{display:grid;gap:10px;font:300 var(--fs-klein)/22px var(--sans)}
.muster-farbe i{display:block;aspect-ratio:3/2;max-width:100%;border:1px solid rgba(21,50,84,.12)}
.muster-farbe b{font-weight:400;color:var(--marine)}
.muster-reihe{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px 40px;align-items:baseline;padding-block:22px;border-top:1px solid var(--taube)}
.muster-reihe:last-child{border-bottom:1px solid var(--taube)}
.muster-reihe>.muster-code{justify-self:start}
.muster-reihe>div{min-width:0;text-align:left}
.muster-reihe .h-gross,.muster-reihe .unterzeile{text-align:left}
.muster-knoepfe{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:center}
.muster-tabelle{width:100%;border-collapse:collapse;font:300 16px/26px var(--sans)}
.muster-tabelle th,.muster-tabelle td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--taube)}
.muster-tabelle th{font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.35px;text-transform:uppercase;color:var(--eiche-d)}
.muster-tabelle td:first-child{color:var(--marine);font-weight:400;white-space:nowrap}
.muster-scroll{overflow-x:auto}
.muster-demo{border:1px dashed var(--greige);padding:40px var(--rand);margin-top:24px}
@media (max-width:1023px){.muster-farben{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.muster-farben{grid-template-columns:1fr 1fr}.muster-reihe{grid-template-columns:1fr}}

/* =====================================================================
   Ergänzungen 30.09.2026, dritte Runde
   ===================================================================== */

/* ---------- 11.65  Speisekarte: Zusatzzeile im Kapitel (z. B. „ab 14 Uhr“) ---------- */
.karte-kapitel button:has(i){flex-wrap:wrap;row-gap:0}
.karte-kapitel button i{flex-basis:100%;padding-left:34px;margin-top:-2px;font:400 var(--fs-klein)/22px var(--sans);font-style:normal;letter-spacing:.3px;color:var(--braun)}
.karte-kapitel button[aria-current] i{color:var(--eiche-d)}
@media (max-width:900px){.karte-kapitel button:has(i){flex-wrap:nowrap}.karte-kapitel button i{flex-basis:auto;margin:0 0 0 6px;padding-left:0}.karte-kapitel button[aria-current] i{color:var(--eiche-h)}}

/* ---------- 11.66  Tagesplan (Programm Tag für Tag, z. B. Adventswochenende) ----------
   <ol class="tagesplan"> › <li> (.extra für optionale Tage) › .tp-tag, .marke-extra, h3, ul › li › b + Text */
.tagesplan-sek{padding-top:var(--sek)}
.tagesplan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,36px);max-width:var(--gross);margin:50px auto 0;text-align:left}
.tagesplan>li{position:relative;padding:22px 0 26px;border-top:1px solid var(--taube);transition:border-color var(--t)}
.tagesplan>li:hover{border-top-color:var(--eiche-d)}
.tagesplan>li.extra{padding:22px 22px 26px;background:var(--eiche-h);border-top-color:var(--eiche-d)}
.tagesplan .tp-tag{display:block;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--eiche-d)}
.tagesplan .marke-extra{position:absolute;top:-14px;left:22px;padding:3px 10px;background:var(--creme);border:1px solid var(--eiche-d);font:400 var(--fs-klein)/20px var(--sans);letter-spacing:.4px;color:var(--eiche-d)}
.tagesplan h3{margin:10px 0 14px;font:300 28px/36px var(--serif);color:var(--marine)}
.tagesplan ul{display:grid;gap:12px}
.tagesplan ul li{font:300 16px/27px var(--sans);color:var(--braun)}
.tagesplan ul b{display:block;font:400 var(--fs-klein)/22px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--marine)}
@media (max-width:1023px){.tagesplan{grid-template-columns:1fr 1fr;gap:0 28px}}
@media (max-width:640px){.tagesplan{grid-template-columns:1fr}.tagesplan>li.extra{margin-bottom:6px}}

/* ---------- 11.67  Hervorgehobene Zeile im Kasten (z. B. Zusatznacht) ---------- */
.buyout-text .plus-nacht{margin-top:18px;padding:4px 0 4px 18px;border-left:2px solid var(--eiche-d);font:300 16px/28px var(--sans)}
.buyout-text .plus-nacht b{font-weight:400;color:var(--marine)}
@media (max-width:767px){.buyout-text .plus-nacht{text-align:left}}

/* ---------- 11.68  Pfotenspur (Grafik auf „Ruhige Hunde willkommen“) ---------- */
.pfoten{display:block;width:min(460px,86%);height:auto;margin:0 auto 34px;color:var(--eiche);fill:currentColor}
@media (max-width:767px){.pfoten{width:min(320px,86%);margin-bottom:26px}}

/* ---------- 11.69  Lange Button-Texte auf schmalen Handys umbrechen statt überstehen ---------- */
@media (max-width:420px){.btn{white-space:normal;max-width:100%;padding-block:12px;line-height:22px}}