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

:root{
  /* Die Farben stammen aus den Fotos des Hauses: das Tannengruen der
     Schlucht, das Kupfer des Herbstlaubs und der Sonnenschirme, der
     Papierton der alten Zeitungsausschnitte. */
  --tanne:#1E3229;
  --tanne-tief:#152520;
  --tanne-hell:#2F4A3C;
  --moos:#4A6552;
  --kupfer:#9C4A15;
  --kupfer-hell:#D48950;
  --papier:#FAF6EF;
  --papier-2:#F2EAD9;
  --papier-3:#E8DEC8;
  --tinte:#1F1C17;
  --gedaempft:#57503F;
  --linie:#DED3BC;
  --weiss:#fff;

  --serif:'Chasten Serif',Georgia,'Times New Roman',serif;
  --sans:'Chasten 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(31,28,23,.05),0 8px 24px -12px rgba(31,28,23,.18);
  --schatten-hoch:0 2px 4px rgba(31,28,23,.06),0 18px 40px -16px rgba(31,28,23,.28);
  --kopfhoehe:68px;
}

*,*::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 eigentlich versteckt sein sollte. Hier
   waren das die "Jetzt"-Fahne an den Saisonkarten (display:inline-block)
   und das Statusfeld im Held (display:inline-flex): beide Fahnen standen
   gleichzeitig da. Diese 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;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.menue-offen{overflow:hidden}

h1,h2,h3,h4{
  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.15rem,1.35rem + 3.3vw,3.7rem)}
h2{font-size:clamp(1.65rem,1.2rem + 1.8vw,2.5rem)}
h3{font-size:clamp(1.2rem,1.06rem + .6vw,1.5rem)}
h4{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--kupfer);text-underline-offset:.18em;
  text-decoration-thickness:.06em;text-decoration-color:rgba(156,74,21,.42)}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--kupfer);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(--tanne);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(--tanne);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{color:var(--papier)}
/* :not(.knopf) ist hier Pflicht: ohne den Ausschluss gewinnt die
   Abschnittsregel (0,1,1) gegen .knopf (0,1,0), und der wichtigste Knopf der
   Seite - "Tisch reservieren" - bekommt auf dunklem Grund Kupfer auf Kupfer.
   Lesbar war er dann nicht mehr. */
.band--dunkel a:not(.knopf){color:var(--kupfer-hell);
  text-decoration-color:rgba(212,137,80,.55)}
.band--dunkel .gedaempft{color:#C9C2B0}

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

/* ============================================================== 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(--kupfer);background:var(--kupfer);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:#843D10;border-color:#843D10;
  transform:translateY(-1px);box-shadow:var(--schatten)}
.knopf:active{transform:translateY(0)}
.knopf--leer{background:transparent;color:var(--tanne);
  border-color:rgba(30,50,41,.34)}
.knopf--leer:hover{background:rgba(30,50,41,.06);color:var(--tanne);
  border-color:var(--tanne)}
.band--dunkel .knopf--leer,.kopf--ueberbild .knopf--leer,
.held__text .knopf--leer{
  color:var(--papier);border-color:rgba(250,246,239,.5)}
.band--dunkel .knopf--leer:hover,.kopf--ueberbild .knopf--leer:hover,
.held__text .knopf--leer:hover{
  background:rgba(250,246,239,.12);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}

/* ============================================================= Kopfzeile == */
.kopf{position:sticky;top:0;z-index:80;background:var(--tanne);
  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(12,22,18,.72),
                                   rgba(12,22,18,.28) 62%,transparent)}
.kopf--ueberbild.kopf--fest{position:sticky;background:var(--tanne);
  background-image:none;box-shadow:0 1px 0 rgba(250,246,239,.1),
                                   0 10px 30px -18px rgba(0,0,0,.7)}
.kopf__band{display:flex;align-items:center;gap:1.5rem;
  width:100%;max-width:var(--breit);margin-inline:auto;
  padding:0 var(--rand);min-height:var(--kopfhoehe)}
.kopf__marke{display:flex;align-items:center;flex:0 0 auto;padding:.7rem 0}
.kopf__logo{display:block}
.kopf__logo img{width:clamp(178px,20vw,250px);height:auto}
.kopf__nav{margin-left:auto;display:none}
.kopf__nav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.kopf__nav a{display:block;padding:.55rem .78rem;border-radius:var(--radius);
  color:var(--papier);text-decoration:none;font-weight:500;font-size:.96rem;
  position:relative}
.kopf__nav a::after{content:'';position:absolute;left:.78rem;right:.78rem;
  bottom:.3rem;height:2px;background:var(--kupfer-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)}
.kopf__tel{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(250,246,239,.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:62rem){
  .kopf__nav{display:block}
  .kopf__tel{display:inline-flex;margin-left:.4rem}
  .kopf__schalter{display:none}
}

/* --- Klappmenue -----------------------------------------------------------
   KEINE eigene display-Regel auf .menue - sonst schlaegt sie das
   [hidden]-Attribut, und das Menue steht dauerhaft offen ueber der Seite.
   Sichtbar/unsichtbar macht allein das Attribut; hier wird nur gestaltet. */
.menue{
  position:fixed;inset:0;z-index:90;background:var(--tanne-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(250,246,239,.13)}
.menue a{display:block;padding:.95rem 0;color:var(--papier);
  text-decoration:none;font-family:var(--serif);font-size:1.45rem;
  font-weight:600}
.menue a[aria-current]{color:var(--kupfer-hell)}
.menue__fuss{display:grid;gap:.7rem}
@media (min-width:62rem){.menue{display:none}}

/* ================================================================ Held == */
.held{position:relative;min-height:clamp(30rem,88svh,50rem);
  display:flex;align-items:flex-end;isolation:isolate;
  background:var(--tanne-tief)}
.held__bild{position:absolute;inset:0;z-index:-2;display:block;
  width:100%;height:100%}
/* picture braucht eine eigene Hoehe, sonst hat das img innen nichts, woran
   es sich ausrichten kann, und object-fit greift still ins Leere. */
.held__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* Der Schleier ueber dem Foto ist keine Geschmacksfrage, sondern gerechnet.
   Weisse Schrift braucht 4.5:1; gegen eine helle Stelle im Bild (bis 255)
   heisst das, der Untergrund darf hoechstens etwa 118 sein. Mit der
   Grundfarbe rgb(12,22,18) ergibt das eine Mindestdeckung von rund 0.57,
   fuer den gedaempften Fliesstext (232,226,212) rund 0.64. Darunter liegen
   die Werte nur dort, wo keine Schrift steht.

   Zuvor lag die Deckung auf Hoehe der Ueberschrift bei etwa 0.3 - gemessen
   kamen 2.2:1 heraus. Im Bildschirmfoto sah es trotzdem gut aus, weil die
   Ueberschrift zufaellig ueber einem dunklen Waldstueck lag. */
.held::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,22,18,.94) 0%,
             rgba(12,22,18,.88) 38%,rgba(12,22,18,.72) 66%,
             rgba(12,22,18,.44) 86%,rgba(12,22,18,.62) 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(12,22,18,.94) 0%,
             rgba(12,22,18,.9) 55%,rgba(12,22,18,.8) 84%,
             rgba(12,22,18,.7) 100%)}
.held__text{padding-block:clamp(2.5rem,7vw,5rem) clamp(2.5rem,6vw,4.5rem);
  color:var(--papier);max-width:44rem}
.held__text h1{color:var(--weiss);margin-bottom:.35em;
  text-shadow:0 2px 14px rgba(8,14,11,.55)}
.held__text p{color:#E8E2D4;text-shadow:0 1px 10px rgba(8,14,11,.5);font-size:clamp(1.08rem,1rem + .45vw,1.34rem);
  line-height:1.55}
.held__ort{font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#E9B384;margin:0 0 1rem;
  text-shadow:0 1px 8px rgba(8,14,11,.6)}
.held--klein{min-height:clamp(19rem,46svh,26rem)}
.held--klein .held__text{max-width:38rem}

/* ============================================================== Status == */
.status{display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(10,18,14,.66);border:1px solid rgba(250,246,239,.3);
  color:var(--papier);border-radius:100px;padding:.5rem .95rem .5rem .8rem;
  font-size:.93rem;font-weight:500;margin-bottom:1.4rem;
  backdrop-filter:blur(6px)}
.status__punkt{width:9px;height:9px;border-radius:50%;
  background:#8FB98C;flex:0 0 auto}
.status[data-zu="1"] .status__punkt{background:#D08A45}
.status--hell{background:var(--papier-2);border-color:var(--linie);
  color:var(--tinte);backdrop-filter:none}

/* ============================================================== Karten == */
.karten{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.karten--3{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.karten--2{grid-template-columns:repeat(auto-fit,minmax(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}
/* Die Symbole sind selbst gezeichnetes SVG (tools/symbole.py) und folgen
   ueber currentColor der Textfarbe. Textzeichen wie ⛰ sahen auf jedem
   Betriebssystem anders aus - flach, farbig, verschieden gross. */
.symbol{width:1.55rem;height:1.55rem;display:block;color:var(--kupfer);
  margin-bottom:.75rem;flex:0 0 auto}
.band--dunkel .symbol{color:var(--kupfer-hell)}
.band--dunkel .karte{background:rgba(250,246,239,.06);
  border-color:rgba(250,246,239,.18);color:var(--papier);box-shadow:none}
.band--dunkel .karte h3{color:var(--papier)}

/* Merkkarten direkt unter dem Held: die drei Dinge, die man wissen muss,
   bevor man losgeht. */
.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(16rem,1fr))}
.merk>div{background:var(--papier);padding:clamp(1.25rem,2.6vw,1.8rem)}
.merk h2{font-family:var(--sans);font-size:1rem;font-weight:700;
  letter-spacing:.01em;line-height:1.35;margin-bottom:.3em}
.merk p{font-size:.96rem;color:var(--gedaempft);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}}

/* ================================================================ Zeiten == */
.zeiten{display:grid;gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.zeit{background:var(--weiss);border:1px solid var(--linie);
  border-left:4px solid var(--kupfer);border-radius:var(--radius);
  padding:clamp(1.25rem,2.6vw,1.7rem)}
.zeit--jetzt{border-left-color:var(--moos);background:#FCFBF7}
.zeit__saison{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--kupfer);margin:0 0 .35rem;
  display:flex;align-items:center;gap:.55rem}
.zeit--jetzt .zeit__saison{color:var(--moos)}
.zeit h3{font-size:1.18rem;margin-bottom:.15em}
.zeit__tage{margin:0;font-weight:600;color:var(--tanne)}
.zeit__uhr{font-family:var(--serif);font-size:1.6rem;font-weight:600;
  margin:.3rem 0 .1rem;font-variant-numeric:tabular-nums}
.zeit__ruhe{font-size:.94rem;color:var(--gedaempft);margin:.45rem 0 0}
.zeit__jetzt-fahne{font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--moos);color:var(--weiss);
  padding:.16rem .5rem;border-radius:100px}

/* ================================================================ Hinweis == */
.hinweis{border:1px solid var(--kupfer);border-left-width:4px;
  background:#FDF4EC;border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.5rem)}
.hinweis h2{font-family:var(--sans);font-size:1.02rem;font-weight:700;
  line-height:1.35;margin-bottom:.3em;color:#7E3B10}
.hinweis p{margin:0;color:#5E402B}

/* ================================================================ Galerie == */
/* Spalten statt Raster: die Aufnahmen sind teils quer, teils hoch. In einem
   Raster mit fester Zeilenhoehe bleibt unter jedem flacheren Bild ein Rest
   Hintergrund stehen - das sah aus wie ein Ladefehler. Mit columns behaelt
   jedes Bild sein Verhaeltnis und es entstehen keine Luecken. */
/* Spalten taugen fuer viele Bilder mit gemischten Verhaeltnissen. Bei
   wenigen Bildern gleichen Zuschnitts verteilt der Umbruch sie ungleich -
   vier Kacheln auf drei Spalten wurden zu 2+2+0, und rechts blieb eine
   leere Spalte stehen. Fuer solche Gruppen gibt es .galerie--raster. */
.galerie--raster{display:grid;gap:clamp(.6rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.galerie--raster .galerie__feld{margin:0;display:block}
.galerie--raster .galerie__feld picture{display:block;height:100%}
.galerie--raster .galerie__feld img{height:100%;object-fit:cover}
.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(8,14,11,.7);
  background:linear-gradient(to top,rgba(12,22,18,.92) 0%,
             rgba(12,22,18,.84) 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(10,18,15,.9)}
.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(250,246,239,.35);
  background:rgba(12,22,18,.6);color:var(--papier);font-size:1.7rem;
  line-height:1;cursor:pointer;display:grid;place-items:center}
.lupe__zu:hover{background:rgba(12,22,18,.9)}

/* ================================================================ Presse == */
.presse{columns:1;column-gap:clamp(1rem,2.4vw,1.6rem)}
@media (min-width:38rem){.presse{columns:2}}
@media (min-width:62rem){.presse{columns:3}}
.presse__stueck{break-inside:avoid;margin:0 0 clamp(1rem,2.4vw,1.6rem);
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);
  display:inline-block;width:100%}
.presse__knopf{display:block;width:100%;border:0;padding:0;
  background:transparent;cursor:zoom-in}
.presse__knopf img{width:100%;height:auto;transition:opacity .2s ease}
.presse__knopf:hover img{opacity:.88}
.presse__zeile{padding:.75rem .95rem;border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  flex-wrap:wrap}
.presse__blatt{font-weight:600;font-size:.95rem}
.presse__datum{font-size:.86rem;color:var(--gedaempft);
  font-variant-numeric:tabular-nums}

/* ============================================================== Zeitstrahl == */
.strahl{list-style:none;margin:0;padding:0;position:relative}
.strahl::before{content:'';position:absolute;left:7px;top:.6rem;bottom:.6rem;
  width:2px;background:var(--linie)}
.strahl li{position:relative;padding:0 0 1.9rem 2.6rem}
.strahl li:last-child{padding-bottom:0}
.strahl li::before{content:'';position:absolute;left:0;top:.52rem;
  width:16px;height:16px;border-radius:50%;background:var(--papier);
  border:3px solid var(--kupfer)}
.strahl__jahr{display:block;font-family:var(--serif);font-weight:600;
  font-size:1.16rem;color:var(--tanne);margin-bottom:.12rem}
.strahl p{margin:0;color:var(--gedaempft)}

/* ================================================================ 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(--kupfer)}
.band--dunkel .haken li::before{background:var(--kupfer-hell)}

/* ============================================================== 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:.82rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--gedaempft);margin-top:1.1rem}
.kontaktfeld dt:first-child{margin-top:0}
.kontaktfeld dd{margin:.15rem 0 0;font-size:1.08rem}
.kontaktfeld dd a{font-weight:600}

/* ================================================================ Fuss == */
.fuss{background:var(--tanne-tief);color:#CFC8B6;
  padding-block:clamp(2.8rem,6vw,4.5rem) 0;margin-top:0}
.fuss__gitter{display:grid;gap:clamp(1.8rem,4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.fuss__logo img{width:220px;height:auto;margin-bottom:1rem}
.fuss__satz{max-width:26rem;font-size:.97rem}
.fuss__titel{font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--papier);
  margin-bottom:.9rem}
.fuss a{color:var(--papier);text-decoration-color:rgba(250,246,239,.34)}
.fuss a:hover{color:var(--kupfer-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. Mit dem
   Innenabstand wird die Flaeche 44 px hoch, ohne dass sich am Satzbild
   etwas aendert - der negative Aussenabstand holt den Zuwachs zurueck. */
.fuss__recht a{display:inline-block;padding:.62rem 0;margin:-.62rem 0}
.fuss__zeile{border-top:1px solid rgba(250,246,239,.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 Nummer in der Kopfzeile, dort ist das Band
   ueberfluessig. */
.rufband{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--kupfer);color:var(--weiss);text-decoration:none;
  font-weight:700;padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px -12px rgba(0,0,0,.55);
  transform:translateY(110%);transition:transform .25s ease}
.rufband.ist-da{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.rufband{transition:none}}
@media (min-width:62rem){.rufband{display:none}}
/* Platz, damit das Rufband die letzte Zeile der Fusszeile nicht verdeckt. */
@media (max-width:61.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)}
.bildtext{font-size:.88rem;color:var(--gedaempft);margin:.6rem 0 0}
/* Auf dunklem Grund war die Bildunterschrift mit 1.70:1 praktisch
   unsichtbar - sie erbte die gedaempfte Farbe der hellen Flaechen. */
.band--dunkel .bildtext{color:#C9C2B0}
figure{margin:0}