/* ══════════════════════════════════════════════════════════════════════════
   ALTE LINDE — eigene Bauteile.

   Die Engine liefert Raster, Farben, Film und Uebergaenge. Was sie NICHT
   liefern kann, ist die Frage: wie sieht DIESES Haus aus? Bisher lag darueber
   nur die generische Zonen-Grammatik — Label, Ueberschrift, Text, Tabelle, und
   das fuenfmal hintereinander. Dadurch las sich die Seite wie ein Dokument.

   Hier stehen deshalb Bauteile, die es nur fuer dieses Haus gibt:
   Zimmerkarten statt Textliste, eine Karte die aussieht wie eine Karte,
   ein Manifest ohne Beiwerk. Jeder Abschnitt bekommt eine eigene Form.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ZIMMERKARTEN ─────────────────────────────────────────────────────────
   Zimmer sind das Produkt eines Hotels. Sie als Aufzaehlung zu zeigen war der
   groesste Fehler der ersten Fassung: der Gast entscheidet nach dem BILD. */
.zimmer{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(18px,2.4vw,34px); margin-top:clamp(34px,4vw,60px);
}
.zk{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  color:inherit; background:var(--wpanel,#fff); overflow:hidden;
  border:1px solid var(--wline); border-radius:2px;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.zk:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -30px rgba(0,0,0,.45); }
.zk .bild{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.zk .bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease);
}
.zk:hover .bild img{ transform:scale(1.05); }
/* Die Groesse gehoert aufs Bild, nicht in eine Zeile darunter — sie ist das
   erste Kriterium, nach dem ein Gast filtert. */
.zk .qm{
  position:absolute; left:0; bottom:0; padding:9px 16px;
  background:var(--ac); color:var(--onac);
  font-family:var(--fb); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.zk .txt{ padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:12px; flex:1; }
.zk .nm{ font-family:var(--fd); font-size:clamp(24px,2.2vw,31px); line-height:1.1; }
.zk .aus{ font-size:14px; line-height:1.62; color:var(--wmut); }
.zk .fuss{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--wline);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--fb); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.zk .pfeil{ transition:transform .4s var(--ease); }
.zk:hover .pfeil{ transform:translateX(6px); }

/* ── MANIFEST ─────────────────────────────────────────────────────────────
   Ein Abschnitt, der nichts erklaert und nichts auflistet. Nur ein Satz, gross.
   Ohne so einen Moment liest sich jede Seite wie eine Broschuere. */
.manifest{ text-align:center; }
.manifest p{
  font-family:var(--fd); font-weight:300;
  font-size:clamp(30px,4.4vw,64px); line-height:1.22; letter-spacing:-.02em;
  max-width:22ch; margin:0 auto; color:var(--wink);
}
.manifest p em{ font-style:italic; color:var(--acx); }
.manifest .quelle{
  margin-top:28px; font-family:var(--fb); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--wmut);
}

/* ── SPEISEKARTE ──────────────────────────────────────────────────────────
   Eine Karte soll aussehen wie eine Karte: Gericht links, Preis rechts,
   Fuehrungslinie dazwischen. Nicht wie eine Tabelle mit Ueberschriften. */
.karte{ margin-top:clamp(30px,3.4vw,48px); }
.karte .gang{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:0 14px;
  padding:20px 0; border-bottom:1px solid var(--wline);
}
.karte .gang:first-child{ border-top:1px solid var(--wline); }
.karte .g-nm{ font-family:var(--fd); font-size:clamp(20px,1.9vw,27px); line-height:1.25; }
.karte .g-pr{
  font-family:var(--fd); font-size:clamp(19px,1.7vw,25px); color:var(--acx);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.karte .g-be{ grid-column:1/-1; margin-top:6px; font-size:14.5px; line-height:1.6; color:var(--wmut); max-width:62ch; }

/* ── BUCHUNGSBAND ─────────────────────────────────────────────────────────
   Der Grund, warum ein Hotel eine Website hat. Auf dem Handy bleibt es unten
   stehen, damit die Buchung nie mehr als einen Daumen entfernt ist. */
.buchband{
  position:sticky; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,42px);
  background:var(--dark,#14140f); color:#f4f2ec;
  border-top:1px solid rgba(255,255,255,.14);
}
.buchband .txt{ font-family:var(--fb); font-size:13.5px; letter-spacing:.02em; }
.buchband .txt b{ font-weight:600; }
.buchband .btn{ flex:none; }
@media(max-width:640px){
  .buchband{ flex-direction:column; align-items:stretch; gap:10px; text-align:center; }
  .buchband .btn{ width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — das Haus zuerst, nicht ein Textblock ueber einem Bild.

   Gemessen war die Spanne 78 bis 11 px und alles brav in einer linken Spalte
   gestapelt. Beim Handbau Kubella reicht sie von 435 bis 29 px, und Elemente
   greifen ineinander. Ohne diesen Sprung wirkt jede Seite wie eine Broschuere,
   egal wie gut der Text ist.
   ══════════════════════════════════════════════════════════════════════════ */
.al-hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:1fr auto;
  padding:calc(var(--navh,84px) + 20px) var(--pad) 0;
}
.al-hero .oben{ align-self:center; max-width:min(94vw,1500px); width:100%; margin:0 auto; }

/* Die Zeile darueber ist eine Marke, kein Satz: klein, weit, in Versalien. */
.al-hero .marke{
  display:flex; align-items:center; gap:14px;
  font-family:var(--fb); font-size:clamp(10px,.85vw,12px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--acx);
}
.al-hero .marke::before{ content:""; width:clamp(28px,4vw,64px); height:1px; background:currentColor; opacity:.7; }

/* Der Name des Hauses so gross, wie das Fenster es zulaesst. Zwei Zeilen, die
   zweite eingerueckt — dadurch entsteht die Diagonale, die eine zentrierte
   Spalte nie hat. */
.al-hero h1{
  margin:clamp(14px,1.6vw,26px) 0 0;
  font-family:var(--fd); font-weight:300;
  font-size:clamp(52px,min(11.5vw,15.5vh),190px);
  line-height:.92; letter-spacing:-.035em;
}
.al-hero h1 .z2{ display:block; padding-left:clamp(0px,9vw,190px); font-style:italic; color:var(--acx); }

/* Untere Leiste: drei Fakten, ein Satz, die Aktionen. Sie sitzt am Fuss des
   Bildes und gibt dem Hero eine Kante statt eines ausgefransten Endes. */
.al-hero .unten{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:clamp(18px,3vw,60px);
  max-width:min(94vw,1500px); width:100%; margin:0 auto;
  padding:clamp(22px,3vh,44px) 0 clamp(26px,4vh,52px);
  border-top:1px solid rgba(255,255,255,.16);
}
.al-hero .fakten{ display:flex; flex-wrap:wrap; gap:clamp(20px,3.6vw,70px); }
.al-hero .fakt b{
  display:block; font-family:var(--fd); font-weight:300;
  font-size:clamp(26px,3vw,46px); line-height:1; color:var(--wink);
}
.al-hero .fakt span{
  display:block; margin-top:7px; font-family:var(--fb);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--wmut);
}
.al-hero .satz{
  grid-column:1/-1; max-width:52ch; margin-top:4px;
  font-size:clamp(15px,1.25vw,18px); line-height:1.62; color:var(--wmut);
}
.al-hero .tun{ display:flex; gap:12px; flex-wrap:wrap; max-width:min(44vw,520px); justify-content:flex-end; }
/* Die rechte Spalte ist auto-breit: jedes zusaetzliche Element darin nimmt der
   linken Spalte Platz weg. Als der Oeffnungsstatus dazukam, rutschten die
   Kennzahlen auf zwei Zeilen und der Satz in eine Schlucht — sichtbar als
   "alles verschoben". Deshalb oben ein Deckel, und der Umbruch auf eine
   Spalte kommt frueher: bei 820px war die Zweispaltigkeit bis 1100px hinauf
   schon zu eng. */
@media(max-width:1100px){
  .al-hero .unten{ grid-template-columns:1fr; }
  .al-hero .tun{ max-width:none; justify-content:flex-start; }
}
@media(max-width:820px){
  .al-hero h1 .z2{ padding-left:0; }
}

/* Scroll-Hinweis: eine duenne Linie, die einmal durchlaeuft. Kein Pfeil-Icon. */
.al-hero .hinweis{
  position:absolute; right:var(--pad); top:calc(var(--navh,84px) + 34px);
  writing-mode:vertical-rl; font-family:var(--fb); font-size:10px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--wmut);
  display:flex; align-items:center; gap:14px;
}
.al-hero .hinweis::after{
  content:""; width:1px; height:64px; background:linear-gradient(var(--acx),transparent);
  animation:allauf 2.6s var(--ease) infinite;
}
@keyframes allauf{ 0%{transform:scaleY(.2);transform-origin:top} 55%{transform:scaleY(1);transform-origin:top} 100%{transform:scaleY(0);transform-origin:bottom} }
@media(max-width:900px){ .al-hero .hinweis{ display:none; } }

/* Das Buchungsband klebt unten und ueberlagerte die Hero-Fusszeile: Satz und
   Knoepfe waren abgeschnitten. Der Hero muss den Platz kennen, den das Band
   einnimmt — als Variable, damit beides zusammen bleibt, wenn sich eines aendert. */
/* Startwert; haus.js misst die echte Hoehe und ueberschreibt ihn — gemessen
   waren es 81px, nicht 72, und der Hero rechnete deshalb 13px zu knapp. */
:root{ --bandh:84px; }
/* Auf schmalen Schirmen bricht das Band zweizeilig um und wird 120px hoch —
   gemessen ueberlappte es die Hero-Knoepfe um 9px. Mit Reserve statt knapp. */
@media(max-width:640px){ :root{ --bandh:136px; } }
.al-hero{ min-height:calc(100svh - var(--bandh)); }
.al-hero .unten{ padding-bottom:clamp(18px,2.4vh,32px); }
/* Diese Regel setzte padding-bottom:0 und schlug damit jede weiter oben
   gesetzte Reserve — gemessen ragten die Hero-Schaltflaechen 13px unter die
   Kante des Buchungsbands. Statt die Reserve zu streichen, wird sie hier
   gesetzt: ein kleiner Abstand ZUM Band, dessen Hoehe haus.js misst. */
body:has(.buchband) .al-hero{ padding-bottom:18px; }

/* ══════════════════════════════════════════════════════════════════════════
   LESBARKEIT UEBER DEM FILM.

   Text ueber einem Foto hat keinen festen Hintergrund: derselbe helle Satz,
   der ueber dem dunklen Nachthimmel sitzt, steht eine Sekunde spaeter ueber
   dem beleuchteten Giebel. Ein pauschaler Scrim ueber das ganze Bild wuerde
   das Foto toeten — deshalb liegt der Verlauf nur dort, wo Text steht.
   ══════════════════════════════════════════════════════════════════════════ */
.al-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(to right, rgba(16,18,15,.82) 0%, rgba(16,18,15,.62) 42%, rgba(16,18,15,0) 78%),
    linear-gradient(to top, rgba(16,18,15,.86) 0%, rgba(16,18,15,.30) 34%, rgba(16,18,15,0) 62%);
}
.al-hero > *{ position:relative; z-index:1; }

/* Gemessen 4.29 statt 4.5: die gedaempfte Schrift war eine Spur zu hell fuer
   die warme Papierflaeche. Kleine Korrektur, kein neuer Ton. */
.zone.paper, .zone.quiet{ --wmut:#4e5a4f; }
/* Und der Akzent im Abschluss-Abschnitt lag bei 2.83 statt 3.0. */
.zone.ink h2 .it{ color:#cfd8c6; }

/* ══════════════════════════════════════════════════════════════════════════
   ANORDNUNG — raus aus der gestapelten Spalte.

   Bis hierhin war jede Sektion eine mittige Spalte auf farbigem Grund, eine
   unter der anderen. Das ist der Grund, warum die Seite trotz guter Inhalte
   wie ein Dokument liest: es gibt keinen Wechsel im RAUM, nur im Text.

   Drei Bauteile dagegen:
     .voll     ein Bild ueber die ganze Breite, das die Spalte durchbricht
     .ansage   eine einzige Aussage, so gross wie die Seite es traegt
     .versatz  zwei Ebenen, die einander ueberlappen statt untereinander zu stehen
   ══════════════════════════════════════════════════════════════════════════ */

/* ── VOLLE BREITE ─────────────────────────────────────────────────────────
   Das Bild sprengt die Textspalte. Ohne diesen Bruch bleibt jede Seite ein
   Stapel gleich breiter Kaesten. */
.voll{ position:relative; padding:0; min-height:auto; }
.voll .bild{ position:relative; width:100%; height:clamp(340px,62vh,760px); overflow:hidden; }
.voll .bild img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Der Text sitzt IM Bild, unten links, auf einem Verlauf statt auf einer Flaeche. */
.voll .drin{
  position:absolute; inset:auto 0 0 0; padding:clamp(28px,5vw,80px) var(--pad);
  background:linear-gradient(to top, rgba(16,18,15,.88), rgba(16,18,15,.45) 46%, transparent);
  color:#f2f0e8;
}
.voll .drin h2{
  font-family:var(--fd); font-weight:300; margin:0;
  font-size:clamp(30px,4.6vw,74px); line-height:1.02; letter-spacing:-.028em;
  max-width:16ch;
}
.voll .drin h2 em{ font-style:italic; color:#cfd8c6; }
.voll .drin p{ margin:14px 0 0; max-width:46ch; font-size:clamp(14.5px,1.15vw,17px); line-height:1.62; color:rgba(242,240,232,.86); }

/* ── ANSAGE ───────────────────────────────────────────────────────────────
   Der Groessensprung, der bisher fehlte: von 127px im Hero auf bis zu 240px.
   Eine Seite braucht mindestens eine Stelle, an der die Schrift das Bild ist. */
.ansage{ text-align:center; padding-block:clamp(70px,11vh,180px); }
.ansage p{
  font-family:var(--fd); font-weight:300; margin:0;
  /* Gemessen war sie mit 113px KLEINER als der Hero (100-139px) — dann ist es
     kein Hoehepunkt, sondern eine Wiederholung. Jetzt deutlich darueber. */
  font-size:clamp(56px,min(17vw,24vh),260px); line-height:.86; letter-spacing:-.05em;
  color:var(--wink);
}
.ansage p em{ display:block; font-style:italic; color:var(--acx); }
.ansage .unter{
  margin-top:clamp(22px,3vh,44px); font-family:var(--fb);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--wmut);
}

/* ── VERSATZ ──────────────────────────────────────────────────────────────
   Zwei Ebenen, die ineinandergreifen: ein Bild und ein Textblock, der es
   ueberlappt. Auf schmalen Schirmen loest sich die Ueberlappung auf, sonst
   wird es unlesbar — Ueberlappung ist ein Effekt fuer Platz, nicht fuer alle. */
.versatz{ display:grid; grid-template-columns:1fr; gap:0; }
.versatz .gross{ position:relative; z-index:0; }
.versatz .gross img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.versatz .karte{
  position:relative; z-index:1; background:var(--wpanel2,#fff);
  padding:clamp(26px,3vw,52px); border:1px solid var(--wline);
}
@media(min-width:900px){
  .versatz{ grid-template-columns:1.35fr .9fr; align-items:center; }
  .versatz .karte{ margin-left:-14%; box-shadow:0 40px 90px -50px rgba(20,24,18,.55); }
}
.versatz .karte h2{
  font-family:var(--fd); font-weight:300; margin:0 0 14px;
  font-size:clamp(26px,2.6vw,42px); line-height:1.08;
}
.versatz .karte h2 em{ font-style:italic; color:var(--acx); }
.versatz .karte p{ margin:0; font-size:15.5px; line-height:1.68; color:var(--wmut); }
.versatz .karte .zahlen{ display:flex; gap:clamp(18px,2.6vw,44px); margin-top:24px; }
.versatz .karte .zahlen b{ display:block; font-family:var(--fd); font-size:clamp(24px,2.2vw,34px); line-height:1; color:var(--wink); }
.versatz .karte .zahlen span{ display:block; margin-top:6px; font-family:var(--fb); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--wmut); }


/* Der Versatz-Abschnitt stand in einer Zone mit voller Zonen-Polsterung — darueber
   und darunter blieb dadurch eine grosse leere Flaeche, und das Bild wirkte klein
   verloren in der Mitte. Die Zone gibt hier nur die Farbe, den Rhythmus macht
   das Bauteil selbst. */
.zone:has(> .versatz){ padding-block:clamp(48px,7vh,110px); min-height:auto; }
.versatz .gross img{ aspect-ratio:4/3; }
@media(min-width:900px){
  .versatz{ grid-template-columns:1.5fr .85fr; }
  .versatz .gross img{ aspect-ratio:16/11; }
}

/* ── BREITBILD ────────────────────────────────────────────────────────────
   GEMESSEN, nicht geraten: bei 1920px Fensterbreite trug die ruhige Zone
   760px Inhalt — 40 Prozent. Links und rechts je 580px leerer Grund. Die
   Seite war fuer 1280 gebaut und hoerte dort auf zu wachsen; auf dem Monitor,
   den ein Hotelier tatsaechlich hat, stand ein schmaler Streifen im Nichts.
   Das ist der messbare Kern von "zu leer, zu tot".

   Die Lesespalte wird dabei NICHT einfach breiter — ueber rund 75 Zeichen
   je Zeile findet das Auge den Zeilenanfang nicht mehr. Stattdessen bekommt
   die freie Flaeche eine Aufgabe: die Rubrik wandert als Marginalie nach
   links aussen, der Block sitzt asymmetrisch statt als Insel in der Mitte. */
@media(min-width:1500px){
  :root{ --h1-max:190px; }

  .zone .k          { max-width:min(92vw,1360px); }
  .zone.paper .k    { max-width:min(92vw,1460px); }
  .zone.ink .k      { max-width:min(90vw,1120px); }
  .k.wide,
  .zone.quiet .k.wide,
  .zone.ink .k.wide { max-width:min(94vw,1560px); }

  /* Marginalspalte — nur fuer linksbuendige Lesezonen, nicht fuer zentrierte
     und nicht fuer die Ansage, die ihre Wirkung aus der Mitte zieht. */
  .zone.quiet:not(.center):not(.ansage) .k:not(.wide){
    max-width:min(92vw,1300px);
    display:grid;
    grid-template-columns:250px minmax(0,780px);
    column-gap:clamp(48px,4.5vw,110px);
    align-items:start;
  }
  .zone.quiet:not(.center):not(.ansage) .k:not(.wide) > *{ grid-column:2; }
  .zone.quiet:not(.center):not(.ansage) .k:not(.wide) > .lbl{
    grid-column:1; grid-row:1 / span 20;
    display:block; margin:16px 0 0; line-height:1.9;
  }
  .zone.quiet:not(.center):not(.ansage) .k:not(.wide) > .lbl::before{
    display:block; width:64px; margin-bottom:16px;
  }

  /* Auch die grossen Bloecke duerfen die Breite nutzen. */
  .versatz{ grid-template-columns:1.6fr .9fr; gap:clamp(40px,3.5vw,72px); }
  .zimmer { grid-template-columns:repeat(4,1fr); }
  .gal    { columns:3; }
}

/* Bei 2200px und mehr laeuft sonst wieder alles auseinander. */
@media(min-width:2200px){
  .zone .k, .zone.paper .k, .k.wide,
  .zone.quiet .k.wide, .zone.ink .k.wide{ max-width:1680px; }
}

/* Antippbar: die Wortmarke war 15px hoch — auf dem Handy nicht zu treffen.
   Apple nennt 44px, Google 48dp als Mindestmass. */
nav .brand{ display:inline-flex; align-items:center; min-height:44px; }

/* ══ FUNKTIONEN ═══════════════════════════════════════════════════════════
   Vier Dinge, die der Gast heute nicht bekommt und die eine Seite von einer
   Visitenkarte unterscheiden. Logik in haus.js, hier nur das Aussehen. */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Ist gerade geoeffnet? ───────────────────────────────────────────────
   Die haeufigste Frage vor einem Anruf — bisher musste der Gast sie sich
   aus einer Tabelle selbst beantworten. */
.offenstatus{
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:9px 18px 9px 15px; border-radius:999px;
  border:1px solid var(--wline); background:var(--wpanel);
  font-family:var(--fb); font-size:13.5px; line-height:1.3;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.offenstatus i{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:#9aa08f; box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.offenstatus.an i{ background:#4f9d5d; animation:puls 2.6s ease-in-out infinite; }
@keyframes puls{
  0%,100%{ box-shadow:0 0 0 0 rgba(79,157,93,.55); }
  60%    { box-shadow:0 0 0 9px rgba(79,157,93,0); }
}
.offenstatus b{ font-weight:500; color:var(--wink); letter-spacing:.01em; }
.offenstatus span{ color:var(--wmut); font-size:12.5px; }
@media(prefers-reduced-motion:reduce){ .offenstatus.an i{ animation:none; } }

/* ── Speisekarte filtern ─────────────────────────────────────────────────
   Statt "PDF herunterladen und selber suchen". */
.kfilter{ margin:0 0 34px; display:grid; gap:16px; }
.ksuche input{
  width:100%; max-width:520px; padding:15px 20px;
  font-family:var(--fb); font-size:16px; color:var(--wink);
  background:var(--wpanel2); border:1px solid var(--wline); border-radius:4px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ksuche input:focus{
  outline:none; border-color:var(--acx);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acx) 18%, transparent);
}
.ksuche input::placeholder{ color:var(--wmut); opacity:.75; }
.kchips{ display:flex; flex-wrap:wrap; gap:9px; }
.kchips button{
  padding:9px 17px; border-radius:999px; cursor:pointer;
  font-family:var(--fb); font-size:13px; letter-spacing:.02em;
  color:var(--wmut); background:transparent; border:1px solid var(--wline);
  transition:all .28s var(--ease);
}
.kchips button:hover{ border-color:var(--wline2); color:var(--wink); }
.kchips button.on{ background:var(--ac); border-color:var(--ac); color:var(--onac); }
.ktreffer{ margin:0; font-family:var(--fb); font-size:13px; color:var(--wmut); }
.karte .gang[hidden]{ display:none; }

/* ── Feier-Assistent ─────────────────────────────────────────────────────
   Kapazitaets-Antwort sofort statt Rueckruf am Montag. */
.feier{ margin-top:34px; }
.fa-zeile{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.fa-zeile label{
  display:flex; flex-direction:column; gap:9px;
  font-family:var(--fb); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--wmut);
}
.fa-zeile select,.fa-zeile input{
  padding:14px 15px; font-family:var(--fb); font-size:16px; letter-spacing:0;
  text-transform:none; color:var(--wink);
  background:var(--wpanel2); border:1px solid var(--wline); border-radius:4px;
}
.fa-zeile select:focus,.fa-zeile input:focus{
  outline:none; border-color:var(--acx);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acx) 18%, transparent);
}
.fa-antwort{
  margin-top:28px; padding:26px 30px;
  background:var(--wpanel); border-left:2px solid var(--acx); border-radius:3px;
}
.fa-kopf{
  margin:0 0 14px; font-family:var(--fd); font-weight:300;
  font-size:clamp(22px,2.4vw,32px); line-height:1.15; color:var(--wink);
}
.fa-kopf b{ font-style:italic; font-weight:300; color:var(--acx); }
.fa-antwort ul{ margin:0; padding-left:20px; display:grid; gap:9px; }
.fa-antwort li{ font-size:15.5px; line-height:1.65; color:var(--wmut); }
.fa-antwort li b{ color:var(--wink); font-weight:500; }
.fa-tun{ margin-top:26px; display:flex; flex-wrap:wrap; gap:13px; }

@media(max-width:640px){
  .fa-antwort{ padding:20px 20px; }
  .offenstatus{ font-size:13px; padding:8px 15px 8px 13px; }
}

/* ── ZIMMER-DURCHGANG ─────────────────────────────────────────────────────
   Grosse Buehne links, Fakten rechts. Auf dem Handy untereinander, weil eine
   halbierte Bildbreite die Entscheidung eher erschwert als erleichtert. */
.zimmerwelt{ margin-top:34px; }

.zw-reiter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.zw-reiter button{
  flex:1 1 150px; min-width:0; cursor:pointer; text-align:left;
  padding:14px 18px; border-radius:4px;
  background:transparent; border:1px solid var(--wline);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.zw-reiter button b{
  display:block; font-family:var(--fb); font-weight:500; font-size:14.5px;
  color:var(--wink); letter-spacing:.01em;
}
.zw-reiter button span{
  display:block; margin-top:4px; font-family:var(--fb);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--wmut);
}
.zw-reiter button:hover{ border-color:var(--wline2); }
.zw-reiter button.on{ background:var(--ac); border-color:var(--ac); }
.zw-reiter button.on b{ color:var(--onac); }
.zw-reiter button.on span{ color:var(--onac); opacity:.72; }

.zw-kat{ display:grid; grid-template-columns:1fr; gap:28px; }
.zw-kat[hidden]{ display:none; }

.zw-buehne{ position:relative; overflow:hidden; border-radius:5px; background:var(--wpanel2); }
.zw-bilder{ position:relative; aspect-ratio:3/2; cursor:pointer; }
.zw-bilder img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease);
}
.zw-bilder img.on{ opacity:1; }

.zw-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:26px; line-height:1;
  color:#fff; background:rgba(18,22,18,.42); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--ease), background .3s var(--ease);
}
.zw-buehne:hover .zw-nav, .zw-nav:focus-visible{ opacity:1; }
.zw-nav:hover{ background:rgba(18,22,18,.72); }
.zw-zur{ left:14px; } .zw-vor{ right:14px; }
@media(hover:none){ .zw-nav{ opacity:1; } }

.zw-punkte{ position:absolute; left:0; right:0; bottom:14px; z-index:2; display:flex; justify-content:center; gap:7px; }
.zw-punkte i{
  width:7px; height:7px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.42); box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.zw-punkte i.on{ background:#fff; transform:scale(1.35); }

.zw-info{ display:flex; flex-direction:column; align-items:flex-start; }
.zw-haus{
  font-family:var(--fb); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acx);
}
.zw-info h3{
  margin:12px 0 0; font-family:var(--fd); font-weight:300;
  font-size:clamp(26px,2.9vw,42px); line-height:1.08; letter-spacing:-.02em; color:var(--wink);
}
.zw-satz{ margin:14px 0 0; max-width:44ch; font-size:16px; line-height:1.66; color:var(--wmut); }

.zw-daten{ margin:26px 0 0; display:grid; gap:0; width:100%; max-width:460px; }
.zw-daten > div{
  display:flex; justify-content:space-between; gap:20px;
  padding:13px 0; border-top:1px solid var(--wline);
}
.zw-daten dt{ font-family:var(--fb); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--wmut); }
.zw-daten dd{ margin:0; font-size:15.5px; color:var(--wink); text-align:right; }

.zw-merk{ margin:22px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.zw-merk li{
  padding:7px 14px; border-radius:999px; border:1px solid var(--wline);
  font-family:var(--fb); font-size:12.5px; color:var(--wmut);
}
.zw-info .btn{ margin-top:28px; }
.zw-hinweis{ margin:18px 0 0; font-family:var(--fb); font-size:12.5px; color:var(--wmut); }

@media(min-width:900px){
  .zw-kat{ grid-template-columns:1.35fr .95fr; gap:clamp(32px,3.5vw,64px); align-items:start; }
  .zw-bilder{ aspect-ratio:4/3; }
}
@media(min-width:1500px){
  .zw-kat{ grid-template-columns:1.5fr .85fr; }
  .zw-bilder{ aspect-ratio:16/10; }
}

/* ── BUCHUNGSMASCHINE AUF DER SEITE ───────────────────────────────────────
   Ein fremdes System in unserer Seite. Es bekommt eine ruhige Flaeche und
   eine ehrliche Wartemeldung — und wenn es nicht kommt, einen Ausweg. */
.ibe{
  position:relative; margin-top:32px; width:100%;
  min-height:clamp(560px,72vh,780px);
  border:1px solid var(--wline); border-radius:5px; overflow:hidden;
  background:var(--wpanel2);
}
.ibe iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  opacity:0; transition:opacity .6s var(--ease);
}
.ibe.da iframe{ opacity:1; }
.ibe-warte{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  text-align:center; padding:30px; transition:opacity .4s var(--ease);
}
.ibe.da .ibe-warte{ opacity:0; pointer-events:none; }
.ibe-warte p{ margin:0; font-family:var(--fb); font-size:14px; color:var(--wmut); }
.ibe-warte .btn{ display:none; }
/* Erst wenn es wirklich zaeh wird, den Ausweg zeigen — nicht sofort, das
   wirkt, als rechne man mit dem Ausfall. */
.ibe.zaeh .ibe-warte .btn{ display:inline-flex; }
.ibe.zaeh .ibe-punkt{ animation:none; opacity:.3; }
.ibe-punkt{
  width:9px; height:9px; border-radius:50%; background:var(--ac);
  animation:ibepuls 1.5s ease-in-out infinite;
}
@keyframes ibepuls{ 0%,100%{ transform:scale(.7); opacity:.45 } 50%{ transform:scale(1.15); opacity:1 } }
.ibe-fuss{ margin:16px 0 0; font-family:var(--fb); font-size:13px; color:var(--wmut); }
.ibe-fuss a{ color:var(--acx); text-decoration:underline; text-underline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .ibe-punkt{ animation:none } }

/* ── DIE GASTGEBER ────────────────────────────────────────────────────────
   Bei einem Familienbetrieb entscheidet nicht die Ausstattung, sondern wer
   einem die Tuer aufmacht. Das Portraet lag ungenutzt im Bestand. */
.gastgeber{ display:grid; gap:clamp(26px,3vw,54px); align-items:center; }
.gastgeber img{
  width:100%; height:auto; border-radius:4px;
  aspect-ratio:4/3; object-fit:cover; object-position:center 28%;
}
.gastgeber h2{ margin:14px 0 0; }
.gastgeber .cta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
@media(min-width:900px){
  .gastgeber{ grid-template-columns:.85fr 1.15fr; }
  .gastgeber img{ aspect-ratio:3/4; }
}

/* ── TELLER NEBEN DIE KARTE ───────────────────────────────────────────────
   Eine Speisekarte aus reinem Text verkauft nichts. Die Bilder, die wirklich
   Essen zeigen, gehoeren neben die Preise — nicht in eine Galerie ganz unten,
   wo sie niemand mehr sieht. */
.teller{
  margin:30px 0 34px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.teller figure{ margin:0; }
.teller img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block;
  transition:transform .6s var(--ease);
}
.teller figure:hover img{ transform:scale(1.03); }
.teller figcaption{
  margin-top:9px; font-family:var(--fb); font-size:12.5px; line-height:1.45; color:var(--wmut);
}

/* ── BILDER AUF DER KONTAKTSEITE ──────────────────────────────────────────
   Sie hatte kein einziges. Dabei ist genau hier der Moment, in dem jemand
   ueberlegt hinzufahren. */
.kontaktkopf, .anfahrtbild{ margin:0 0 28px; }
.anfahrtbild{ margin:28px 0 26px; }
.kontaktkopf img, .anfahrtbild img{
  width:100%; height:auto; display:block; border-radius:4px;
  aspect-ratio:21/9; object-fit:cover;
}
.anfahrtbild img{ aspect-ratio:16/9; }
.anfahrtbild figcaption{
  margin-top:11px; font-family:var(--fb); font-size:13px; color:var(--wmut);
}
@media(max-width:640px){
  .kontaktkopf img{ aspect-ratio:16/10; }
  .teller{ grid-template-columns:repeat(2,1fr); gap:11px; }
}

/* ── TAG UND ABEND ────────────────────────────────────────────────────────
   Ein Wischer, keine Ueberblendung: je Bildpunkt ist immer nur EIN Foto
   sichtbar, deshalb geistern die leicht abweichenden Ausschnitte nicht. */
.tagnacht{
  --tn:50%;
  position:relative; margin-top:32px; overflow:hidden; border-radius:5px;
  aspect-ratio:16/10; cursor:ew-resize; touch-action:pan-y;
  background:var(--wpanel2); user-select:none; -webkit-user-select:none;
}
.tagnacht img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%; display:block; pointer-events:none;
}
/* Die zweite Aufnahme wird von rechts freigelegt. clip-path statt width,
   damit das Bild NICHT gestaucht wird, sondern beschnitten. */
.tagnacht .tn-b{
  position:absolute; inset:0;
  clip-path:inset(0 0 0 var(--tn));
}
.tn-griff{
  position:absolute; top:0; bottom:0; left:var(--tn); z-index:3;
  width:44px; margin-left:-22px; padding:0; cursor:ew-resize;
  background:transparent; border:0; display:grid; place-items:center;
}
.tn-griff::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  margin-left:-1px; background:rgba(255,255,255,.9); box-shadow:0 0 14px rgba(0,0,0,.45);
}
.tn-griff i{
  position:relative; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.94); box-shadow:0 3px 18px rgba(0,0,0,.35);
  display:block;
}
/* Zwei Pfeilspitzen, gezeichnet statt als Zeichen gesetzt — dann sind sie
   in jeder Schrift gleich. */
.tn-griff i::before,.tn-griff i::after{
  content:""; position:absolute; top:50%; width:7px; height:7px;
  border-top:2px solid #1f2b22; border-right:2px solid #1f2b22;
}
.tn-griff i::before{ left:11px; transform:translateY(-50%) rotate(-135deg); }
.tn-griff i::after { right:11px; transform:translateY(-50%) rotate(45deg); }
.tn-griff:focus-visible i{ outline:3px solid var(--ac); outline-offset:3px; }

.tn-marke{
  position:absolute; bottom:16px; z-index:2;
  padding:7px 15px; border-radius:999px;
  font-family:var(--fb); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:rgba(16,20,16,.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.tn-tag  { left:16px; }
.tn-nacht{ right:16px; }
.tn-hinweis{ margin:16px 0 0; font-family:var(--fb); font-size:12.5px; color:var(--wmut); }

@media(max-width:640px){
  .tagnacht{ aspect-ratio:4/3; }
  .tn-marke{ font-size:10.5px; padding:6px 12px; bottom:12px; }
  .tn-tag{ left:12px } .tn-nacht{ right:12px }
}