/* =========================================================== Grundlagen == */
@font-face{
  font-family:'Schreck Serif';
  src:url('/assets/fonts/sourceserif.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Schreck Sans';
  src:url('/assets/fonts/sourcesans.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  /* Die Farben sind an den Fotos des Hauses abgenommen: das Blaugrau des
     Bergschattens am spaeten Nachmittag, das Orange des Alpengluehens am
     Wetterhorn, der warme Papierton des Altholzes am Chalet. Kein
     Korporativblau und kein Signalgelb - beides wuerde neben Schnee kalt
     und billig wirken. */
  --nacht:#1B2A38;
  --nacht-tief:#131E29;
  --nacht-hell:#2C4257;
  --fels:#46586A;
  /* Nachgemessen statt geschaetzt: das urspruengliche #B4531E kam auf dem
     zweiten Papierton (#EFEAE2) nur auf 4.18:1 - und genau dort stehen die
     Zwischentitel und die Telefonnummer. #A84B18 erreicht 4.76:1 auf
     Papier-2, 5.2:1 auf Papier und 5.7:1 fuer weisse Schrift auf dem
     Knopf. */
  --glut:#A84B18;
  --glut-hell:#E09055;     /* 5.6:1 auf Nacht */
  --firn:#8FB4C9;
  --papier:#F8F5F0;
  --papier-2:#EFEAE2;
  --papier-3:#E3DCD1;
  --tinte:#1D2228;
  --gedaempft:#55606B;
  --linie:#DCD4C8;
  --weiss:#fff;

  --serif:'Schreck Serif',Georgia,'Times New Roman',serif;
  --sans:'Schreck Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --breit:1180px;
  --schmal:70ch;
  --rand:clamp(1.15rem,4vw,2.5rem);
  --luft:clamp(3.5rem,8vw,6.5rem);
  --radius:3px;
  --schatten:0 1px 2px rgba(19,30,41,.05),0 8px 24px -12px rgba(19,30,41,.2);
  --schatten-hoch:0 2px 4px rgba(19,30,41,.07),0 18px 40px -16px rgba(19,30,41,.32);
  --kopfhoehe:70px;
}

*,*::before,*::after{box-sizing:border-box}

/* Das hidden-Attribut ist im Browser nur "display:none" mit der Staerke
   einer Typregel. JEDE eigene display-Regel schlaegt es - und dann steht
   ein Element dauerhaft offen, das versteckt sein sollte. Diese eine Zeile
   beendet die Sorte Fehler ein fuer alle Mal. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.menue-offen{overflow:hidden}

/* Lange zusammengesetzte Woerter sind im Deutschen die Regel, nicht die
   Ausnahme: "Datenschutzerklaerung" ist in der Ueberschriftengroesse
   breiter als ein 320-px-Schirm. Das Kaestchen der Ueberschrift wuchs
   dabei nicht mit - nur die Zeile ragte hinaus, und overflow-x:hidden am
   body verdeckte es. Gemeldet hat es nur die Breitenpruefung, als 20 px
   Ueberhang ohne schuldiges Element. */
h1,h2,h3,h4{
  overflow-wrap:break-word;
  hyphens:auto;
  font-family:var(--serif);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,1.3rem + 3.3vw,3.65rem)}
h2{font-size:clamp(1.62rem,1.2rem + 1.8vw,2.45rem)}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.48rem)}
h4{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:0}
p,li,dd,dt,address,figcaption{overflow-wrap:break-word}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--glut);text-underline-offset:.18em;
  text-decoration-thickness:.06em;text-decoration-color:rgba(168,75,24,.45)}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--glut);outline-offset:3px;border-radius:2px}

img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--linie);margin:var(--luft) 0}

.visuell-versteckt{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.sprung{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  background:var(--nacht);color:var(--papier);padding:.7rem 1.1rem;
  border-radius:var(--radius);transform:translateY(-160%);
  transition:transform .18s ease;text-decoration:none;font-weight:600}
.sprung:focus{transform:translateY(0)}

/* ============================================================== Raster == */
.inhalt{width:100%;max-width:var(--breit);margin-inline:auto;
  padding-inline:var(--rand)}
.eng{max-width:var(--schmal)}
.band{padding-block:var(--luft)}
.band--papier2{background:var(--papier-2)}
.band--dunkel{background:var(--nacht);color:var(--papier)}
.band--eng{padding-block:clamp(2.5rem,6vw,4rem)}

/* Ein dunkler Block braucht seine eigenen Textfarben, sonst erbt er die
   hellen Werte von :root und der Text verschwindet. */
.band--dunkel h1,.band--dunkel h2,.band--dunkel h3,.band--dunkel h4{
  color:var(--papier)}
/* :not(.knopf) ist Pflicht: ohne den Ausschluss gewinnt die Abschnittsregel
   (0,1,1) gegen .knopf (0,1,0), und der wichtigste Knopf der Seite -
   "Tisch reservieren" - bekaeme auf dunklem Grund Glut auf Glut. */
.band--dunkel a:not(.knopf){color:var(--glut-hell);
  text-decoration-color:rgba(224,144,85,.55)}
.band--dunkel .gedaempft{color:#BFC7CF}

.gedaempft{color:var(--gedaempft)}
.mini{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--glut);margin:0 0 .8rem}
.band--dunkel .mini{color:var(--glut-hell)}
.fuehrung{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.6;
  color:var(--gedaempft)}
.band--dunkel .fuehrung{color:#C7CFD7}

/* ============================================================== Knopf == */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:.98rem;
  line-height:1.2;padding:.92em 1.5em;border-radius:var(--radius);
  border:2px solid var(--glut);background:var(--glut);color:var(--weiss);
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,
             transform .16s ease,box-shadow .16s ease}
.knopf:hover{background:#83390F;border-color:#83390F;
  transform:translateY(-1px);box-shadow:var(--schatten)}
.knopf:active{transform:translateY(0)}
.knopf--leer{background:transparent;color:var(--nacht);
  border-color:rgba(27,42,56,.34)}
.knopf--leer:hover{background:rgba(27,42,56,.06);color:var(--nacht);
  border-color:var(--nacht)}
.band--dunkel .knopf--leer,.kopf--ueberbild .knopf--leer,
.held__text .knopf--leer{
  color:var(--papier);border-color:rgba(248,245,240,.52)}
.band--dunkel .knopf--leer:hover,.kopf--ueberbild .knopf--leer:hover,
.held__text .knopf--leer:hover{
  background:rgba(248,245,240,.13);color:var(--weiss);border-color:var(--papier)}
.knopf--klein{padding:.6em 1em;font-size:.9rem}
.knopf .symbol,.rufband .symbol{width:1.05em;height:1.05em;margin:0;
  color:currentColor;display:inline-block}
.knopf--voll{width:100%}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.knopfreihe--oben{margin-top:0;margin-bottom:1.6rem}

/* ============================================================= Kopfzeile == */
.kopf{position:sticky;top:0;z-index:80;background:var(--nacht);
  transition:background .25s ease,box-shadow .25s ease}
.kopf--ueberbild{position:fixed;left:0;right:0;background:transparent;
  background-image:linear-gradient(to bottom,rgba(11,18,26,.75),
                                   rgba(11,18,26,.3) 62%,transparent)}
.kopf--ueberbild.kopf--fest{position:sticky;background:var(--nacht);
  background-image:none;box-shadow:0 1px 0 rgba(248,245,240,.1),
                                   0 10px 30px -18px rgba(0,0,0,.7)}
.kopf__band{display:flex;align-items:center;gap:.75rem;
  width:100%;max-width:var(--breit);margin-inline:auto;
  padding:0 var(--rand);min-height:var(--kopfhoehe)}
/* min-width:0 ist hier kein Feinschliff, sondern Pflicht. Ohne sie wird das
   Flex-Element nie schmaler als sein Inhalt: bei 320 px Schirmbreite schob
   die gesperrte Unterzeile der Wortmarke den Menueknopf auf x=344 - also
   aus dem Bild. Gemeldet wurde nichts, weil overflow-x:hidden am body den
   Ueberhang verschluckt; das Menue war auf kleinen Telefonen schlicht nicht
   zu oeffnen. */
.kopf__marke{display:flex;align-items:center;gap:.6rem;flex:0 1 auto;
  min-width:0;padding:.6rem 0;text-decoration:none;color:var(--papier)}
.kopf__signet{width:34px;height:34px;flex:0 0 auto;display:block}
/* Die Wortmarke ist gesetzt, nicht gezeichnet - der Betrieb hat kein Logo.
   Siehe tools/build_logo.py. */
.wortmarke{display:block;line-height:1.05;min-width:0}
.wortmarke b{display:block;font-family:var(--serif);font-weight:600;
  font-size:1.18rem;letter-spacing:.02em;white-space:nowrap}
.wortmarke span{display:block;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;opacity:.8;margin-top:.2rem;
  white-space:nowrap}
/* Auf den schmalsten Telefonen bleibt nur der Name stehen. */
@media (max-width:23.5rem){.wortmarke span{display:none}}
.kopf__nav{margin-left:auto;display:none}
.kopf__nav ul{display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.kopf__nav a{display:block;padding:.55rem .7rem;border-radius:var(--radius);
  color:var(--papier);text-decoration:none;font-weight:500;font-size:.95rem;
  position:relative}
.kopf__nav a::after{content:'';position:absolute;left:.7rem;right:.7rem;
  bottom:.3rem;height:2px;background:var(--glut-hell);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.kopf__nav a:hover::after,.kopf__nav a[aria-current]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.kopf__nav a::after{transition:none}}
.kopf__tat{display:none;flex:0 0 auto}
.kopf__schalter{margin-left:auto;width:46px;height:46px;padding:0;
  display:grid;place-items:center;background:transparent;cursor:pointer;
  border:1px solid rgba(248,245,240,.32);border-radius:var(--radius)}
.kopf__balken{position:relative}
.kopf__balken,.kopf__balken::before,.kopf__balken::after{
  display:block;width:20px;height:2px;background:var(--papier);
  transition:transform .2s ease,opacity .15s ease}
.kopf__balken::before,.kopf__balken::after{content:'';position:absolute}
.kopf__balken::before{transform:translateY(-6px)}
.kopf__balken::after{transform:translateY(6px)}
.kopf__schalter[aria-expanded="true"] .kopf__balken{background:transparent}
.kopf__schalter[aria-expanded="true"] .kopf__balken::before{transform:rotate(45deg)}
.kopf__schalter[aria-expanded="true"] .kopf__balken::after{transform:rotate(-45deg)}

@media (min-width:64rem){
  .kopf__band{gap:1.2rem}
  .kopf__nav{display:block}
  .kopf__tat{display:inline-flex;margin-left:.5rem}
  .kopf__schalter{display:none}
  .wortmarke b{font-size:1.3rem}
  .wortmarke span{font-size:.78rem;letter-spacing:.14em}
}

/* --- Klappmenue -----------------------------------------------------------
   KEINE eigene display-Regel auf .menue - sonst schlaegt sie das
   [hidden]-Attribut und das Menue steht dauerhaft ueber der Seite. */
.menue{
  position:fixed;inset:0;z-index:90;background:var(--nacht-tief);
  padding:calc(var(--kopfhoehe) + 1.5rem) var(--rand) 2rem;
  overflow-y:auto;overscroll-behavior:contain;
  animation:menue-auf .2s ease}
@keyframes menue-auf{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.menue{animation:none}}
.menue ul{list-style:none;margin:0 0 2rem;padding:0}
.menue li+li{border-top:1px solid rgba(248,245,240,.13)}
.menue a{display:block;padding:.95rem 0;color:var(--papier);
  text-decoration:none;font-family:var(--serif);font-size:1.42rem;
  font-weight:600}
.menue a[aria-current]{color:var(--glut-hell)}
.menue__fuss{display:grid;gap:.7rem}
@media (min-width:64rem){.menue{display:none}}

/* ================================================================ Held == */
.held{position:relative;min-height:clamp(31rem,90svh,52rem);
  display:flex;align-items:flex-end;isolation:isolate;
  background:var(--nacht-tief)}
.held__bild{position:absolute;inset:0;z-index:-2;display:block;
  width:100%;height:100%}
/* Das <picture> zwischen Huelle und Bild braucht eine EIGENE Hoehe. Ohne sie
   ist es so hoch wie sein Inhalt, das img findet nichts, woran es sich
   ausrichten koennte, und object-fit greift still ins Leere - sichtbar wird
   das erst auf schmalen Schirmen. */
.held__bild picture{display:block;width:100%;height:100%}
/* picture braucht eine eigene Hoehe, sonst hat das img innen nichts, woran
   es sich ausrichtet, und object-fit greift still ins Leere. */
.held__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* Der Schleier ueber dem Foto ist gerechnet, nicht geschaetzt. Weisse
   Schrift braucht 4.5:1; gegen eine helle Stelle im Bild (Schnee, bis 255)
   heisst das, der Untergrund darf hoechstens etwa 118 sein. Mit der
   Grundfarbe rgb(11,18,26) ergibt das rund 0.57 Mindestdeckung, fuer den
   gedaempften Fliesstext (226,230,234) rund 0.65. Bei diesem Haus liegt
   ueberall Schnee - hier ist das kritischer als bei jedem anderen Motiv. */
.held::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,18,26,.95) 0%,
             rgba(11,18,26,.9) 40%,rgba(11,18,26,.74) 68%,
             rgba(11,18,26,.46) 87%,rgba(11,18,26,.64) 100%)}
/* Die flachen Koepfe der Unterseiten sind fast ganz mit Schrift gefuellt -
   dort muss die Deckung auch oben hoch bleiben. */
.held--klein::after{
  background:linear-gradient(to top,rgba(11,18,26,.95) 0%,
             rgba(11,18,26,.92) 55%,rgba(11,18,26,.84) 84%,
             rgba(11,18,26,.74) 100%)}
.held__text{padding-block:clamp(2.5rem,7vw,5rem) clamp(2.5rem,6vw,4.5rem);
  color:var(--papier);max-width:46rem}
.held__text h1{color:var(--weiss);margin-bottom:.35em;
  text-shadow:0 2px 14px rgba(6,11,16,.6)}
.held__text p{color:#E2E6EA;text-shadow:0 1px 10px rgba(6,11,16,.55);
  font-size:clamp(1.08rem,1rem + .45vw,1.34rem);line-height:1.55}
.held__ort{font-size:.83rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:#F0B07C;margin:0 0 1rem;
  text-shadow:0 1px 8px rgba(6,11,16,.7)}
/* Kopf ohne Foto - fuer die Seiten, deren bestes Bild zu klein waere.
   Die Polsterung kommt hier von .band--eng, darum nimmt .held__text ihre
   eigene zurueck; sonst stuende der Titel doppelt so tief im Block. */
.kopfblock{padding-block:clamp(3.2rem,8vw,5.5rem)}
.kopfblock .held__text{padding-block:0;max-width:44rem}
.kopfblock h1,.kopfblock p{text-shadow:none}
.kopfblock .status{margin-bottom:1.1rem}
.held--klein{min-height:clamp(19rem,48svh,27rem)}
.held--klein .held__text{max-width:40rem}

/* ============================================================== Status == */
/* "Jetzt geoeffnet" / "Saison geschlossen". Fuer ein Bergrestaurant ist das
   die wichtigste Auskunft der ganzen Seite - wer im Mai hochfaehrt, steht
   vor verschlossener Tuer. Ohne JavaScript bleibt das Feld versteckt und
   es fehlt nichts: die Zeiten stehen im Fuss jeder Seite. */
.status{display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(8,14,20,.7);border:1px solid rgba(248,245,240,.32);
  color:var(--papier);border-radius:100px;padding:.5rem .95rem .5rem .8rem;
  font-size:.93rem;font-weight:500;margin-bottom:1.3rem;
  backdrop-filter:blur(6px)}
.status__punkt{width:9px;height:9px;border-radius:50%;
  background:#7FC08A;flex:0 0 auto}
.status[data-zu="1"] .status__punkt{background:var(--glut-hell)}
/* Der Satz wird vom Skript gesetzt und ist mal kurz ("Jetzt geoeffnet"),
   mal lang ("Saisonpause - wieder ab 1. Juni"). Kein Umbruch mitten im
   Wort, aber umbrechen darf er: bei 320 px Schirmbreite passt der lange
   Satz sonst nicht in die Pille. */
.status__text{min-width:0}
/* Es gab hier eine helle Fassung .status--hell fuer den Kopfblock. Sie war
   unbrauchbar: der Status ist ein <p> und steht in .held__text, und
   .held__text p (0,1,1) schlaegt .status--hell (0,1,0). Die Schrift blieb
   damit hell und stand auf hellem Grund - gemessen 1.05:1, also
   unsichtbar. Statt die Spezifitaet hochzuruesten, benutzt der Kopfblock
   jetzt dieselbe dunkle Pille wie das Heldenbild. Eine Fassung weniger,
   eine Falle weniger. */

/* ========================================================== Merksaetze == */
/* Die drei Dinge, die man vor der Bergfahrt wissen muss. Ragt ueber die
   Kante des Heldenbildes, damit sie nicht zu uebersehen sind. */
.merk{display:grid;gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  box-shadow:var(--schatten-hoch)}
.merk>div{background:var(--weiss);padding:clamp(1.25rem,2.6vw,1.9rem)}
.merk h2{font-family:var(--sans);font-size:1.02rem;font-weight:700;
  letter-spacing:0;line-height:1.35;margin-bottom:.3em}
.merk p{font-size:.95rem;color:var(--gedaempft);margin:0}
.merk .symbol{margin-bottom:.7rem}
.merk--hoch{margin-top:calc(-1 * clamp(2rem,5vw,4rem));position:relative;
  z-index:2}

/* ============================================================== Karten == */
.karten{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
/* min(100%,..) statt eines nackten Minimums: im Grid ist die Mindestbreite
   sonst haerter als die Spalte, und die Kachel schiebt sich seitlich aus
   dem Bild. */
.karten--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.karten--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.karte{background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.3rem,2.6vw,1.9rem);
  box-shadow:var(--schatten)}
.karte h3{margin-bottom:.4em}
.karte p:last-child{margin-bottom:0}
.symbol{width:1.55rem;height:1.55rem;display:block;color:var(--glut);
  margin-bottom:.75rem;flex:0 0 auto}
.band--dunkel .symbol{color:var(--glut-hell)}
.band--dunkel .karte{background:rgba(248,245,240,.06);
  border-color:rgba(248,245,240,.18);color:var(--papier);box-shadow:none}

/* ========================================================== Zahlenband == */
/* Vertrauen in Zahlen, direkt neben dem Reservationsknopf: seit wann, wie
   hoch, wie viele Plaetze, wie bewertet. */
.zahlen{display:grid;gap:1px;background:rgba(248,245,240,.16);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
  border-block:1px solid rgba(248,245,240,.16)}
.zahlen div{background:var(--nacht);padding:1.4rem 1.1rem;text-align:center}
.zahlen b{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.1;
  color:var(--papier);font-variant-numeric:tabular-nums}
.zahlen span{display:block;font-size:.85rem;color:#BFC7CF;margin-top:.3rem}
.zahlen .stern{width:1rem;height:1rem;display:inline-block;
  color:var(--glut-hell);vertical-align:-.12em;margin:0}

/* ============================================================= Zweispalt == */
.zwei{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:52rem){
  .zwei{grid-template-columns:1fr 1fr}
  .zwei--bildlinks .zwei__bild{order:-1}
  .zwei--schmal{grid-template-columns:5fr 6fr}
}
.zwei__bild img{border-radius:var(--radius);box-shadow:var(--schatten-hoch)}

.gestapelt{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:52rem){.gestapelt--2{grid-template-columns:1fr 1fr}}

/* ================================================================ Saison == */
.saisons{display:grid;gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.saison{background:var(--weiss);border:1px solid var(--linie);
  border-left:4px solid var(--fels);border-radius:var(--radius);
  padding:clamp(1.25rem,2.6vw,1.7rem)}
.saison--jetzt{border-left-color:var(--glut);background:#FFFCF8}
.saison__kopf{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin-bottom:.5rem}
.saison__kopf .symbol{margin:0;width:1.3rem;height:1.3rem;color:var(--fels)}
.saison--jetzt .saison__kopf .symbol{color:var(--glut)}
.saison__name{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--fels)}
.saison--jetzt .saison__name{color:var(--glut)}
.saison__fahne{font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--glut);color:var(--weiss);
  padding:.16rem .5rem;border-radius:100px}
.saison h3{font-size:1.15rem;margin-bottom:.15em}
.saison__uhr{font-family:var(--serif);font-size:1.55rem;font-weight:600;
  margin:.35rem 0 .1rem;font-variant-numeric:tabular-nums;color:var(--nacht)}
.saison__tage{margin:0;font-size:.95rem;color:var(--gedaempft)}

/* Die Pausen zwischen den Saisons - im Bestand stand das nirgends. */
.pause{display:flex;gap:.8rem;align-items:flex-start;
  padding:.85rem 0;border-top:1px solid var(--linie)}
.pause:first-child{border-top:0}
.pause b{flex:0 0 auto;min-width:12rem;font-weight:600}
.pause span{color:var(--gedaempft)}
@media (max-width:34rem){.pause{flex-direction:column;gap:.15rem}
  .pause b{min-width:0}}

/* ================================================================ Hinweis == */
.hinweis{border:1px solid var(--glut);border-left-width:4px;
  background:#FCF3EA;border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.5rem);display:flex;gap:.95rem;
  align-items:flex-start}
.hinweis .symbol{margin:0;flex:0 0 auto;width:1.4rem;height:1.4rem;
  margin-top:.15rem}
.hinweis h2,.hinweis h3{font-family:var(--sans);font-size:1.02rem;
  font-weight:700;line-height:1.35;margin-bottom:.3em;color:#7C3A13}
.hinweis p{margin:0;color:#55402F}

/* ============================================================== Stichwort == */
/* Was auf der Karte steht - als Stichworte, weil keine Quelle Preise nennt.
   Lieber ehrlich knapp als eine erfundene Speisekarte. */
.stichworte{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;
  margin:0 0 1.2em;padding:0}
.stichworte li{background:var(--papier-2);border:1px solid var(--linie);
  border-radius:100px;padding:.4rem .95rem;font-size:.94rem;font-weight:500}
.band--dunkel .stichworte li{background:rgba(248,245,240,.09);
  border-color:rgba(248,245,240,.2);color:var(--papier)}

/* ================================================================ Liste == */
.haken{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:.55rem}
.haken li{position:relative;padding-left:1.7rem}
.haken li::before{content:'';position:absolute;left:.15rem;top:.62em;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--glut)}
.band--dunkel .haken li::before{background:var(--glut-hell)}
.haken--zwei{gap:.55rem 1.6rem}
@media (min-width:40rem){.haken--zwei{grid-template-columns:1fr 1fr}}

/* ================================================================ Galerie == */
/* Spalten statt Raster: die Aufnahmen sind teils quer, teils hoch. In einem
   Raster mit fester Zeilenhoehe bliebe unter jedem flacheren Bild ein Rest
   Hintergrund stehen - das sieht aus wie ein Ladefehler. */
.galerie{columns:2;column-gap:clamp(.6rem,1.6vw,1rem)}
@media (max-width:32rem){.galerie{columns:1}}
@media (min-width:52rem){.galerie{columns:3}}
.galerie__feld{margin:0 0 clamp(.6rem,1.6vw,1rem);position:relative;
  border-radius:var(--radius);overflow:hidden;background:var(--papier-3);
  break-inside:avoid;display:inline-block;width:100%}
.galerie__feld picture{display:block}
.galerie__feld img{width:100%;height:auto;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.galerie__feld:hover img,.galerie__feld:focus-within img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.galerie__feld img{transition:none}
  .galerie__feld:hover img{transform:none}}
.galerie__knopf{position:absolute;inset:0;width:100%;border:0;padding:0;
  background:transparent;cursor:zoom-in}
/* Die Beschriftung gehoert IN die Kachel, nicht darunter - sonst verrutscht
   die Zuordnung, sobald die Spalten anders umbrechen. */
.galerie__titel{position:absolute;left:0;right:0;bottom:0;
  padding:1.5rem .8rem .65rem;color:var(--weiss);font-size:.88rem;
  font-weight:500;pointer-events:none;
  text-shadow:0 1px 4px rgba(6,11,16,.75);
  background:linear-gradient(to top,rgba(11,18,26,.93) 0%,
             rgba(11,18,26,.85) 52%,transparent 100%)}

/* ================================================================== Lupe == */
.lupe{border:0;padding:0;background:transparent;max-width:min(94vw,1400px);
  max-height:94svh;overflow:visible}
.lupe::backdrop{background:rgba(8,14,20,.92)}
.lupe__figur{margin:0}
.lupe__figur img{max-width:min(94vw,1400px);max-height:82svh;
  width:auto;height:auto;border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lupe__figur figcaption{color:var(--papier);text-align:center;
  padding-top:.9rem;font-size:.95rem}
.lupe__zu{position:fixed;top:1rem;right:1rem;width:46px;height:46px;
  border-radius:50%;border:1px solid rgba(248,245,240,.35);
  background:rgba(11,18,26,.6);color:var(--papier);font-size:1.7rem;
  line-height:1;cursor:pointer;display:grid;place-items:center}
.lupe__zu:hover{background:rgba(11,18,26,.92)}

/* ============================================================== Anreise == */
.weg{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(1rem,2.4vw,1.5rem);counter-reset:weg}
@media (min-width:48rem){.weg{grid-template-columns:repeat(3,1fr)}}
.weg li{background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.25rem,2.6vw,1.8rem);
  position:relative;counter-increment:weg}
.weg li::before{content:counter(weg,decimal-leading-zero);
  position:absolute;top:1.1rem;right:1.2rem;font-family:var(--serif);
  font-size:1.5rem;font-weight:600;color:var(--papier-3)}
.weg h3{font-size:1.1rem;margin-bottom:.35em;padding-right:2rem}
.weg p{margin:0;color:var(--gedaempft);font-size:.97rem}

/* ============================================================== Kontakt == */
.kontaktfeld{background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--schatten)}
.kontaktfeld address{font-style:normal;line-height:1.75}
.kontaktfeld dt{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--gedaempft);margin-top:1.15rem}
.kontaktfeld dt:first-child{margin-top:0}
.kontaktfeld dd{margin:.15rem 0 0;font-size:1.08rem}
.kontaktfeld dd a{font-weight:600}

.formular{display:grid;gap:1rem}
.formular label{display:block;font-weight:600;font-size:.92rem;
  margin-bottom:.35rem}
.formular input,.formular textarea{
  width:100%;font:inherit;font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--weiss);color:var(--tinte)}
.formular textarea{min-height:8rem;resize:vertical}
.formular input:focus,.formular textarea:focus{border-color:var(--glut)}
@media (min-width:40rem){.formular--paar{grid-template-columns:1fr 1fr}}

/* ================================================================ Fuss == */
.fuss{background:var(--nacht-tief);color:#C3CBD3;
  padding-block:clamp(2.8rem,6vw,4.5rem) 0}
.fuss__gitter{display:grid;gap:clamp(1.8rem,4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.fuss__marke{display:flex;align-items:center;gap:.7rem;color:var(--papier);
  text-decoration:none;margin-bottom:1rem}
.fuss__signet{width:38px;height:38px;flex:0 0 auto}
.fuss__satz{max-width:26rem;font-size:.97rem}
.fuss__titel{font-family:var(--sans);font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--papier);
  margin-bottom:.9rem}
.fuss a{color:var(--papier);text-decoration-color:rgba(248,245,240,.34)}
.fuss a:hover{color:var(--glut-hell)}
.fuss address{font-style:normal;margin-bottom:.8rem}
.fuss__zeiten{margin:0;display:grid;gap:.75rem}
.fuss__zeiten dt{font-weight:600;color:var(--papier);font-size:.92rem}
.fuss__zeiten dd{margin:0;font-size:.92rem}
.fuss__klein{font-size:.88rem;margin-top:.9rem}
.fuss__nav{display:flex;flex-direction:column;gap:.4rem;font-size:.95rem}
.fuss__recht{display:flex;gap:.4rem 1.2rem;flex-wrap:wrap;margin-top:.4rem}
/* 24 px hohe Verweise trifft man am Telefon nicht zuverlaessig. Der
   Innenabstand macht die Flaeche 44 px hoch, der negative Aussenabstand
   holt den Zuwachs am Satzbild wieder weg. */
.fuss__recht a{display:inline-block;padding:.62rem 0;margin:-.62rem 0}
.fuss__zeile{border-top:1px solid rgba(248,245,240,.14);margin-top:2.6rem;
  padding-block:1.3rem;display:flex;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;font-size:.86rem}
.fuss__zeile p{margin:0}

/* ============================================================== Rufband == */
/* Auf dem Telefon der einzige Handgriff, der immer erreichbar bleibt. Auf
   dem Schreibtisch steht die Reservation in der Kopfzeile - dort ist das
   Band ueberfluessig. */
.rufband{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex}
.rufband{transform:translateY(110%);transition:transform .25s ease}
.rufband.ist-da{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.rufband{transition:none}}
.rufband a{flex:1 1 0;display:flex;align-items:center;justify-content:center;
  gap:.45rem;text-decoration:none;font-weight:700;font-size:.95rem;
  padding:.95rem .6rem calc(.95rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px -12px rgba(0,0,0,.6)}
.rufband a:first-child{background:var(--nacht);color:var(--papier)}
.rufband a:last-child{background:var(--glut);color:var(--weiss)}
@media (min-width:64rem){.rufband{display:none}}
/* Platz, damit das Rufband die letzte Zeile der Fusszeile nicht verdeckt. */
@media (max-width:63.99rem){
  .fuss__zeile{padding-bottom:calc(4.2rem + env(safe-area-inset-bottom))}}

/* ============================================================== Auftritt == */
/* Beim Scrollen einblenden. Die Startfassung liegt in .js-an, damit ohne
   JavaScript NICHTS versteckt bleibt - sonst waere die halbe Seite leer,
   wenn das Skript scheitert. */
.js-an .auf{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.js-an .auf.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-an .auf{opacity:1;transform:none;transition:none}}

/* ================================================================ Prosa == */
.prosa h2{margin-top:2.2em}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:1.8em}
.prosa ul,.prosa ol{padding-left:1.3em;margin:0 0 1.2em}
.prosa li{margin-bottom:.4em}
.prosa table{width:100%;border-collapse:collapse;margin:0 0 1.4em;
  font-size:.97rem}
.prosa th,.prosa td{text-align:left;padding:.6rem .7rem;
  border-bottom:1px solid var(--linie);vertical-align:top}
.prosa th{font-weight:700;background:var(--papier-2)}
.rollbar{overflow-x:auto;-webkit-overflow-scrolling:touch}

.abstand{margin-top:clamp(1.6rem,4vw,2.6rem)}
.abstand-klein{margin-top:clamp(1rem,2.4vw,1.6rem)}
.bildtext{font-size:.88rem;color:var(--gedaempft);margin:.6rem 0 0}
/* Auf dunklem Grund waere die Bildunterschrift mit 1.7:1 praktisch
   unsichtbar - sie erbt sonst die gedaempfte Farbe der hellen Flaechen. */
.band--dunkel .bildtext{color:#BFC7CF}
figure{margin:0}