/* ==========================================================================
   Irodion, Luenen. Die Seite. Redesign September 2026, "Die Glasaetzung".

   Man schaut durch die geaetzte Scheibe ins Haus. Die Scheibe ist das
   eine Bauteil dieser Welt: glattes Milchglas, 1px heller Rand, weicher
   getoenter Schatten, Ecken 0. Sie steht nur dort, wo etwas hinter ihr
   liegt: im Kopf und im Einstieg ueber der Fassade.

   Eine Achse: Die linke Kante der Scheibe im Einstieg ist die linke
   Kante jeder Sektion. Das Raster unten legt sie fest.
   ========================================================================== */


/* --- Das Raster -----------------------------------------------------------
   Fuenf Linien ueber die volle Breite:
   voll | inhalt ... scheibe (40 %) ... mitte (50 %) ... inhalt | voll
   Was an den Rand laufen soll, nimmt voll-start oder voll-end.          */

.raster {
  --innen: min(var(--breite), 100% - 2 * var(--rand));
  display: grid;
  grid-template-columns:
    [voll-start] minmax(var(--rand), 1fr)
    [inhalt-start] calc(var(--innen) * 0.4)
    [scheibe] calc(var(--innen) * 0.1)
    [mitte] calc(var(--innen) * 0.5)
    [inhalt-end] minmax(var(--rand), 1fr)
    [voll-end];
}
.raster > * { grid-column: inhalt; min-width: 0; }


/* --- Das Glas ------------------------------------------------------------- */

.glas {
  background-color: var(--glas-voll);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schatten);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glas {
    background-color: var(--glas);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glas {
    background-color: var(--glas-voll);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* --- Fotos: das Glas wird klar -------------------------------------------
   Unter jedem Foto liegt dieselbe Aufnahme in 40 Pixeln, weichgezeichnet,
   rund 270 Byte. Das ist die geaetzte Scheibe. Sobald das Foto geladen
   und im Bild ist, blendet es darueber auf, einmal, nur ueber opacity.
   Ohne JavaScript und bei reduzierter Bewegung steht es sofort klar da.
   Stirbt main.js, holt die Notfallregel die Fotos nach 2.5 Sekunden.    */

.frost {
  background-color: var(--leinen-tief);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.frost img,
.frost .klaert {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js-bereit .klaert {
  opacity: 0;
  transition: opacity var(--t-klar) var(--ease-aus);
}
.js-bereit .klaert.klar { opacity: 1; }
.js-bereit:not(.js-laeuft) .klaert { animation: notklar 0s 2.5s forwards; }
@keyframes notklar { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js-bereit .klaert { opacity: 1; transition: none; }
}


/* --- Bedienelemente -------------------------------------------------------
   Alles, was man drueckt, gibt nach: scale(0.97) in 160ms.              */

.ruf {
  display: inline-grid;
  gap: 0.2rem;
  padding: 0.85rem 1.4rem 0.95rem;
  background: var(--orange);
  color: var(--eiche);
  border-radius: var(--rund);
  text-decoration: none;
  transition: transform var(--t-druck) var(--ease-aus),
              background-color var(--t-druck) ease;
}
.ruf__was {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--eiche);
  line-height: 1.2;
}
/* Grosse Nummern stehen in Zodiak, wie die Ueberschriften. */
.ruf__nummer {
  font-family: var(--display);
  font-size: var(--s-2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ruf:active { transform: scale(0.97); }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  min-height: 3rem;
  background: var(--orange);
  color: var(--eiche);
  border: 0;
  border-radius: var(--rund);
  font: 600 1rem/1 var(--schrift);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-druck) var(--ease-aus),
              background-color var(--t-druck) ease;
}
.knopf:active { transform: scale(0.97); }

.textruf {
  display: inline-block;
  font-weight: 600;
  color: var(--eiche);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  .ruf:hover, .knopf:hover { background: var(--orange-hover); }
  .textruf:hover { text-decoration-thickness: 2px; }
}


/* ==========================================================================
   DER KOPF. Eine feste Milchglasleiste. Ueber der Fassade sieht man das
   Foto verschwommen durch, ueber dem Kalk ist sie fast still.
   ========================================================================== */

/* Der Kopf ist massiv und dunkel, wie der Balken ueber der Tuer: Eiche,
   darin der Name in Creme und der Anruf als heller Knopf. Kein Glas,
   Glas ueber flacher Farbe ist Dekoration. */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--kopf-h);
  background: var(--logoblau);
  color: var(--auf-eiche);
  border-bottom: 1px solid rgba(250, 245, 236, 0.1);
  box-shadow: 0 14px 30px -26px rgba(30, 52, 80, 0.7);
}
.kopf :focus-visible { outline-color: var(--auf-eiche); }
.kopf__innen {
  width: min(var(--breite), 100% - 2 * var(--rand));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--r-4);
}
.kopf__marke {
  display: block;
  margin-right: auto;
  padding-block: 0.5rem;
  color: var(--auf-eiche);
  transition: opacity var(--t-ui) var(--ease-aus), visibility 0s;
}
/* Solange der Name gross in der Scheibe steht, schweigt er im Kopf.
   Ein Name, einmal im Blick. Ohne JavaScript bleibt er im Kopf stehen. */
.kopf--name-im-glas .kopf__marke {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-ui) ease, visibility 0s var(--t-ui);
}
.logo {
  display: block;
  height: 1.375rem;
  width: auto;
  aspect-ratio: 1029 / 237;
}
.kopf__liste {
  display: flex;
  gap: var(--r-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Volles Creme, nicht das weiche Blaugrau: Halbtoene wirken auf dem Blau
   wie durchscheinend und billig. */
.kopf__liste a {
  color: var(--auf-eiche);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  font-size: 0.9375rem;
  font-weight: 600;
}
.kopf__heute {
  display: none;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--auf-eiche);
  white-space: nowrap;
}
/* Der Anruf. Ein Knopf in Orange mit dem Hoerer in Navy. Dahinter liegt
   die Nummer. */
.kopf__ruf {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.15rem;
  background: var(--orange);
  color: var(--eiche);
  border-radius: var(--rund);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-druck) var(--ease-aus),
              background-color var(--t-ui) ease,
              color var(--t-ui) ease;
}
.kopf__ruf:active { transform: scale(0.97); }
/* Im Knopf steht auf allen Breiten der Hoerer (Phosphor, gefuellt) und
   "Reservieren". Das aria-label nennt dazu die Nummer. */
.kopf__ruf { gap: 0.5rem; }
.kopf__ruf-kurz { display: inline-flex; }
.kopf__ruf-symbol { width: 1.125rem; height: 1.125rem; fill: currentColor; }
@media (min-width: 1001px) {
  .kopf__heute:not([hidden]) { display: block; }
}
@media (hover: hover) {
  .kopf__liste a:hover { text-decoration-line: underline; }
  .kopf__ruf:hover { background: var(--orange-hover); }
}
@media (max-width: 699px) {
  .kopf__innen { gap: var(--r-3); }
  .kopf__liste { gap: var(--r-3); }
  .kopf__weit { display: none; }
  .logo { height: 1.125rem; }
  .kopf__ruf { padding: 0 0.85rem; gap: 0.4rem; }
}
/* Am ganz schmalen Handy ruecken Liste und Knopf enger, damit Hoerer und
   "Reservieren" ganz im Bild stehen. */
@media (max-width: 419px) {
  .kopf__innen { gap: 0.4rem; }
  .kopf__liste { gap: 0.6rem; }
  .kopf__liste a,
  .kopf__ruf { font-size: 0.8125rem; }
  .kopf__ruf { padding: 0 0.6rem; gap: 0.3rem; }
  .kopf__ruf-symbol { width: 0.95rem; height: 0.95rem; }
  .logo { height: 0.95rem; }
}


/* ==========================================================================
   DER EINSTIEG. Fassade rechts ab der Scheibenlinie bis zum Rand, volle
   Hoehe. Die Scheibe links greift ueber die Fotokante.
   ========================================================================== */

.hero { position: relative; }
.hero picture { display: contents; }
.hero__bild {
  background-image: url(../assets/film/eintritt-quer-frost-2.webp);
}
/* Die Tuer steht rechts neben der Scheibe frei. Am hochkant gehaltenen
   Handy kommt das Hochformat, und die Tuer steht ueber der Kante, an der
   die Scheibe ins Foto greift. Die Bedingung steht zeichengleich in den
   <source>-Zeilen und in js/eintritt.js. */
.hero__bild img { object-position: 40% 50%; }
@media (max-width: 899px) and (orientation: portrait) {
  .hero__bild { background-image: url(../assets/film/eintritt-hoch-frost-2.webp); background-position: 50% 78%; }
  .hero__bild img { object-position: 50% 78%; }
}

/* EINTRETEN. Die Fahrt durch die Tuer. Sie existiert nur, wenn
   js/eintritt.js laeuft (Klasse js-eintritt). Die Ebene liegt ueber dem
   ganzen Einstieg. Am Anfang ist sie genau auf das Foto zugeschnitten
   und steht deckungsgleich darauf; beim Scrollen waechst sie zur vollen
   Flaeche, und der Film darin laeuft durch die Tuer bis in den Gang.
   Solange nicht gescrollt wird, zeigt der Einstieg das Foto selbst. */
.hero__bild { position: relative; z-index: 1; }
.hero__film,
.hero__gruss { display: none; }
/* Absolut gesetzte Ebenen in einem Raster erben sonst die Rasterspalte
   als Bezug und enden am Satzspiegel statt am Bildschirmrand. Mit
   grid-area: auto ist der ganze Einstieg ihr Bezug, Kante zu Kante. */
.hero__film,
.hero__gruss,
.name__linie { grid-area: auto; }
.js-eintritt .hero { min-height: max(100svh, 36rem); align-content: start; overflow: hidden; }
/* Der Pin-Platzhalter hinter dem Einstieg traegt Navy. Bruchteile von
   Pixeln liessen sonst am Ende der Fahrt eine helle Haarlinie zwischen
   Einstieg und dem Navy des naechsten Abschnitts stehen. */
.pin-spacer:has(> .hero) { background: var(--eiche); }
.js-eintritt .hero__film {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background: var(--eiche);
}
.js-eintritt .hero--faehrt .hero__film { visibility: visible; }
/* Die Kennzeichnung "Mit KI animiert". Nur dort, wo die Fahrt laeuft.
   Lage setzt js/eintritt.js per transform: unten links auf dem
   sichtbaren Bild, nie unter der Scheibe. */
.hero__ki { display: none; }
.js-eintritt .hero__ki {
  display: block;
  grid-area: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  background: rgba(30, 52, 80, 0.85);
  color: var(--auf-eiche);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.js-eintritt .hero--faehrt .hero__bild { visibility: hidden; }
/* Groesse und Lage setzt js/eintritt.js: genau die des Filmbilds. */
/* overflow: hidden, damit das Tuerfoto beim Hineinzoomen (Ersatzweg)
   nie unter dem Filmbild hervorschaut. */
.hero__film-bild {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: 0 0;
}
.hero__film-bild img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Der Film zeigt sich erst, wenn er auf der richtigen Stelle steht. Bis
   dahin traegt das Standbild darunter, Bild fuer Bild dasselbe. */
.hero__video { opacity: 0; }
.film-bereit .hero__video { opacity: 1; }
.hero__ende img { opacity: 0; }
/* Ist der Film bereit, zeigt er auch das letzte Bild selbst. Das Endbild
   ist nur der Ersatzweg, solange er laedt. */
.film-bereit .hero__ende img { visibility: hidden; }
.hero__schleier {
  position: absolute;
  inset: 0 0 auto;
  height: min(100%, 100svh);
  opacity: 0;
  background: linear-gradient(to top, rgba(30, 52, 80, 0.78) 0%, rgba(30, 52, 80, 0.35) 38%, rgba(30, 52, 80, 0) 62%);
}
.js-eintritt .hero__gruss {
  display: block;
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: max(var(--rand), (100% - var(--breite)) / 2);
  right: var(--rand);
  bottom: var(--r-6);
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-size: var(--s-4);
  line-height: var(--lh-kopf);
  letter-spacing: var(--tr-display);
  color: var(--auf-eiche);
  opacity: 0;
}
/* Zodiak liegt nur aufrecht vor. Der Gruss bleibt aufrecht, statt eine
   unechte Kursive zu zeigen. */
.hero__gruss i { font-style: normal; }
.hero__gruss span {
  display: block;
  margin-top: var(--r-2);
  font-family: var(--schrift);
  font-size: var(--s-2);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--auf-eiche);
}

.hero__scheibe {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-3) var(--r-4);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  container-type: inline-size;
}
.hero__logo {
  flex-basis: 100%;
  height: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem);
  width: auto;
  margin-bottom: var(--r-1);
  color: var(--logoblau);
}
/* Die Ueberschrift richtet sich nach der Breite der Scheibe: Das laengste
   Wort, "Roggenmarkt.", ist in Zodiak rund 6.9 Geviert breit und muss
   ganz hineinpassen. */
.hero__scheibe h1 {
  flex-basis: 100%;
  font-size: min(var(--s-4), 14cqi);
  margin: 0;
}
.hero__unter {
  flex-basis: 100%;
  font-size: var(--s-1);
  line-height: 1.45;
  color: var(--tinte);
  max-width: 34ch;
  margin: 0 0 var(--r-2);
  hyphens: none;
}

/* Die Scheibe steht vom ersten Bild an still da. Beim Laden bewegt sich
   nur das Foto dahinter: es wird klar. Ein Auftritt, nicht zwei. */

@media (min-width: 900px) {
  .hero {
    min-height: clamp(36rem, 100svh, 60rem);
    grid-template-rows: 1fr;
  }
  /* Das Querformat beginnt an der Scheibenlinie. Weiter links laege der
     Schirm mit dem Namen hinter dem Glas; so steht er frei daneben, und
     die Scheibe verschleiert nur den linken Rand des Hauses. */
  /* Das Tuerfoto beginnt bei 22 Prozent des Satzspiegels. So liegt die
     Scheibe zum groesseren Teil ueber dem echten, scharfen Foto, und die
     Tuer selbst (rechts davon) bleibt frei. */
  .hero__bild {
    grid-column: inhalt-start / voll-end;
    margin-left: calc(var(--innen) * 0.22);
    grid-row: 1;
    position: relative;
  }
  .hero__bild img {
    position: absolute;
    inset: 0;
  }
  .hero__scheibe {
    grid-column: inhalt-start / mitte;
    grid-row: 1;
    align-self: center;
    margin-top: var(--kopf-h);
  }
}
@media (max-width: 899px) {
  .js-eintritt .hero__gruss { bottom: auto; top: calc(100svh - 10.5rem); }
  .hero { padding-bottom: var(--r-5); }
  .hero__bild {
    grid-column: voll;
    height: 48svh;
    min-height: 17rem;
  }

  /* Die Scheibe greift genau so weit ins Foto, dass die Fotokante in die
     Luecke zwischen Logo und Ueberschrift faellt, nie hinter Text. */
  .hero__scheibe { margin-top: -4.25rem; }
  .hero__unter { font-size: 1.125rem; }
  .ruf { width: 100%; }
}


/* ==========================================================================
   WOHER DER NAME KOMMT
   ========================================================================== */

.name {
  position: relative;
  overflow: hidden;
  background: var(--eiche);
  color: var(--auf-eiche);
  padding-block: var(--r-7);
  row-gap: var(--r-5);
  align-items: center;
}
.name__kopf,
.name__text { position: relative; z-index: 1; }
.name h2 { color: var(--auf-eiche); }
.name h2,
.haus h2,
.nummer h2,
.feiern h2,
.draussen h2,
.zeiten h2,
.platz h2 {
  font-size: var(--s-3);
  margin-bottom: var(--r-4);
}
/* Ohne Bild: die Ueberschrift links auf der Achse, der Text rechts ab
   der Mitte. Am Handy untereinander. */
@media (min-width: 900px) {
  .name { align-items: start; }
  .name__kopf { grid-column: inhalt-start / scheibe; grid-row: 1; padding-right: var(--r-4); }
  .name h2 { margin-bottom: 0; }
  .name__text { grid-column: mitte / inhalt-end; grid-row: 1; }
}

/* Die Aetzlinie: das Theater aus der Folie an der Glaswand, hell auf
   Eiche wie die geaetzte Folie vor dem dunklen Holz. Gross, rechts
   angeschnitten, hinter dem Text. Eine Maske, damit die Farbe aus der
   Palette kommt. Sie zeichnet sich einmal von links nach rechts, wenn
   sie ins Bild kommt (main.js). Ohne JavaScript und bei reduzierter
   Bewegung steht sie sofort da. */
.name__linie {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -4vw;
  height: 130%;
  aspect-ratio: 1460 / 1540;
  transform: translateY(-50%);
  background: var(--auf-eiche);
  opacity: 0.3;
  pointer-events: none;
  -webkit-mask: url(../assets/bilder/theater-linie.svg) center / contain no-repeat;
          mask: url(../assets/bilder/theater-linie.svg) center / contain no-repeat;
}
.js-laeuft .name__linie {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1200ms var(--ease-aus);
}
.js-laeuft .name__linie.gezeichnet { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .js-laeuft .name__linie { clip-path: none; transition: none; }
}
/* Am Handy steht die Zeichnung unter dem Text, gross und rechts
   angeschnitten: Sichtbar sind die Sitzreihen des Halbrunds, das
   Erkennbare am Theater. Hinter der Ueberschrift war nur ein Stueck Fels
   zu sehen, das wie ein Fleck wirkte. */
@media (max-width: 899px) {
  .name { padding-top: var(--r-6); padding-bottom: 64vw; row-gap: 0; }
  .name__linie {
    top: auto;
    bottom: -70vw;
    left: -40vw;
    right: auto;
    height: auto;
    width: 124vw;
    transform: none;
  }
}
/* Am Handy steht die Zeichnung oben, ganz und ohne Anschnitt, in der
   Breite der Textspalte: das Halbrund der Sitzreihen mit Luft nach oben,
   damit es nicht wie ein Rest des Einstiegs wirkt. Die Ueberschrift
   steht auf dem unteren Teil, dort laeuft die Zeichnung ins Navy aus,
   bevor der Text beginnt. Das Tablet behaelt die Lage darueber. */
@media (max-width: 699px) {
  .name { padding-top: calc(var(--r-5) + 46vw); padding-bottom: var(--r-7); }
  .name__linie {
    top: var(--r-5);
    bottom: auto;
    left: 6vw;
    width: 88vw;
    -webkit-mask:
      url(../assets/bilder/theater-linie.svg) center / contain no-repeat,
      linear-gradient(var(--eiche) 40%, transparent 68%);
    -webkit-mask-composite: source-in;
            mask:
      url(../assets/bilder/theater-linie.svg) center / contain no-repeat,
      linear-gradient(var(--eiche) 40%, transparent 68%);
            mask-composite: intersect;
  }
}


/* ==========================================================================
   DAS HAUS. Text und Zeitleiste, dann das Haus in acht Bildern.
   ========================================================================== */

/* Das Haus steht auf Sand, wie die Sandsteinwand im Gastraum. */
.haus {
  background: var(--leinen-tief);
  padding-block: var(--r-7);
  row-gap: var(--r-6);
}
@media (min-width: 900px) {
  .haus__text { grid-column: inhalt-start / mitte; grid-row: 1; padding-right: var(--r-5); }
  .leiste { grid-column: mitte / inhalt-end; grid-row: 1; align-self: end; }
}

/* Die Zeitleiste. Eine Linie, vier Rauten. Die Raute ist das O aus dem
   Schriftzug. Jede Linie laeuft von ihrer Raute bis zur Mitte der
   naechsten, also geht sie durch, egal wie breit die Spalten werden. */
.leiste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.leiste__halt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.9rem var(--r-2) 0 0;
}
.leiste__halt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--leinen-tief);
  border: 2px solid var(--logoblau);
  transform: rotate(45deg);
  z-index: 1;
}
.leiste__halt:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: calc(0.625rem - 0.5px);
  width: 100%;
  height: 1px;
  background: var(--logoblau);
}
.leiste__jahr {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--logoblau);
}
.leiste__was { font-size: 0.9375rem; color: var(--tinte); }

@media (max-width: 599px) {
  .leiste { grid-template-columns: 1fr; }
  .leiste__halt {
    flex-direction: row;
    align-items: baseline;
    gap: var(--r-2);
    padding: 0 0 var(--r-3) 2rem;
  }
  .leiste__halt::before { top: 0.4rem; }
  .leiste__halt:not(:last-child)::after {
    left: calc(0.375rem - 0.5px);
    top: 0.775rem;
    width: 1px;
    height: 100%;
  }
}

/* ==========================================================================
   DER RUNDGANG. Elf Plaetze im Haus, gross und ohne Beschriftung.
   Grundfassung (Handy, ohne JS, reduzierte Bewegung): ein waagerechtes
   Band, das man wischt und das an jedem Foto einrastet. Das naechste Foto
   schaut an der Kante herein, damit man sieht, dass es weitergeht.
   Mit js/rundgang.js am Desktop: gepinnt, das Band folgt dem Scroll.
   ========================================================================== */

.rundgang {
  --achse: max(var(--rand), (100% - var(--breite)) / 2);
  --bildhoehe: min(62svh, 34rem);
  padding-block: var(--r-7);
  overflow: hidden;
}
.rundgang__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r-4);
  padding-inline: var(--achse);
  margin-bottom: var(--r-5);
}
.rundgang h2 { font-size: var(--s-3); }
.rundgang__zaehler {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--tinte-weich);
  white-space: nowrap;
}
.rundgang__bahn {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--achse);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rundgang__bahn::-webkit-scrollbar { display: none; }
.rundgang__bahn:focus-visible { outline-offset: -3px; }
.rundgang__liste {
  display: flex;
  align-items: flex-end;
  gap: var(--r-5);
  width: max-content;
  margin: 0;
  padding: 0 var(--achse);
  list-style: none;
}
.station {
  scroll-snap-align: start;
  flex: none;
}
.station figure { margin: 0; }
.station__bild {
  height: var(--bildhoehe);
  aspect-ratio: 3 / 4;
}
/* Alle Plaetze gleich gross, eckig, ohne Beschriftung; was darauf ist,
   sagt der alt-Text. */
.rundgang__fortschritt {
  display: none;
  height: 1px;
  margin: var(--r-5) var(--achse) 0;
  background: var(--linie);
}
.rundgang__fortschritt span {
  display: block;
  height: 100%;
  background: var(--eiche);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Am Handy ohne Hoehenversatz: alle Plaetze gleich gross, 82vw breit,
   der naechste schaut an der Kante herein. */
@media (max-width: 899px) {
  .rundgang { padding-block: var(--r-6); }
  .rundgang__kopf { margin-bottom: var(--r-4); }
  .rundgang__liste { align-items: flex-start; gap: var(--r-3); }
  .station { width: min(78vw, 24rem); }
  .station__bild {
    height: auto;
    width: 100%;
    aspect-ratio: 3 / 4;
  }
}

/* Am Desktop mit Bewegung: das Band wird gepinnt und folgt dem Scroll.
   Dann ist es kein Scrollbereich mehr, sondern eine Buehne. */
@media (min-width: 900px) {
  .js-rundgang .rundgang {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(var(--kopf-h) + var(--r-4)) var(--r-5);
  }
  .js-rundgang .rundgang__bahn { overflow: visible; scroll-snap-type: none; }
  .js-rundgang .rundgang__fortschritt { display: block; }
  .js-rundgang .rundgang__zaehler { display: none; }
}


/* ==========================================================================
   DIE NUMMER. Kartenblau, das Feld auf dichtem Glas.
   ========================================================================== */

.nummer {
  background: var(--logoblau);
  color: var(--auf-eiche);
  padding-block: var(--r-7);
  row-gap: var(--r-5);
  align-items: center;
}
.nummer h2 { color: var(--auf-eiche); }
/* Der Weg zur ganzen Karte, auch ohne JavaScript sichtbar. */
.nummer__karte { margin: var(--r-3) 0 0; }
.nummer .textruf { color: var(--auf-eiche); }
.nummer__text p {
  font-size: var(--s-1);
  line-height: 1.45;
  color: var(--auf-blau-weich);
  max-width: 32ch;
}
@media (min-width: 900px) {
  .nummer__text { grid-column: inhalt-start / scheibe; grid-row: 1; }
  .feldnr { grid-column: mitte / inhalt-end; grid-row: 1; }
}

/* Das Feld ist ein klar geschnittener Kalkblock auf dem Blau, kein Glas:
   hinter ihm liegt nichts, was eine Scheibe verschleiern koennte. */
.feldnr {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  background: var(--leinen);
  color: var(--tinte);
}
.feldnr[hidden] { display: none; }
.feldnr :focus-visible { outline-color: var(--logoblau); }
.feldnr__label {
  display: block;
  margin-bottom: var(--r-2);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--eiche);
}
.feldnr__zeile { display: flex; gap: 0.5rem; }
.feldnr__eingabe {
  flex: 1;
  min-width: 0;
  height: 4.25rem;
  padding: 0 1rem;
  font-family: var(--display);
  font-size: var(--s-3);
  color: var(--tinte);
  background: #FFFFFF;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  caret-color: var(--logoblau);
}
/* Der Platzhalter ist deutlich leiser als eine eingetippte Zahl. */
.feldnr__eingabe::placeholder { color: var(--feldrand); opacity: 1; }
.feldnr__eingabe:focus-visible { outline-offset: 0; }
.feldnr .knopf { height: 4.25rem; padding-inline: 1.75rem; }

/* Leer steht die Meldung nicht im Weg. Sagt sie etwas, hat sie zwei
   Zeilen Hoehe, damit nichts springt, wenn sie von einer auf zwei
   Zeilen waechst. */
.feldnr__status {
  min-height: 3.2em;
  margin: var(--r-3) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tinte);
}
.feldnr__status:empty { min-height: 0; margin: var(--r-4) 0 0; }
.feldnr__zur-karte {
  font-weight: 600;
  color: var(--eiche);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}
/* Die Empfehlungen stehen zwei mal zwei, gleich breit, jede auf einer
   Zeile. Nichts bricht um, nichts bleibt allein haengen. */
.feldnr__tipps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9375rem;
}
.feldnr__tipps-vor { grid-column: 1 / -1; font-weight: 500; }
.tipp {
  justify-content: center;
  padding: 0.45rem 0.75rem;
  font: 500 0.9375rem/1.2 var(--schrift);
  color: var(--tinte);
  background: transparent;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund);
  cursor: pointer;
  transition: transform var(--t-druck) var(--ease-aus),
              background-color var(--t-druck) ease;
}
.tipp .ziffer { color: var(--logoblau); font-weight: 600; margin-right: 0.3em; }
.tipp { white-space: nowrap; }
/* Am schmalen Handy passen die laengeren Namen nicht zu zweit in eine
   Zeile. Dann stehen die Empfehlungen untereinander, linksbuendig, die
   Nummern auf einer Flucht. */
@media (max-width: 519px) {
  .feldnr__tipps { grid-template-columns: minmax(0, 1fr); }
  .tipp { justify-content: flex-start; text-align: left; }
  .tipp .ziffer { display: inline-block; min-width: 2.4em; }
}
.tipp:active { transform: scale(0.97); }
@media (hover: hover) {
  .tipp:hover { background: #FFFFFF; }
}


/* ==========================================================================
   DIE KARTE. Nummer, Name, Preis in festen Spalten. Keine Linie je Zeile,
   nur unter den Gaengen, wie auf der gedruckten Karte.
   ========================================================================== */

.karte {
  padding-block: var(--r-7);
  row-gap: var(--r-5);
}
/* Als eigene Seite beginnt die Karte unter der festen Kopfleiste. */
.karte--seite { padding-top: calc(var(--kopf-h) + var(--r-6)); }
.karte--seite .brotkrumen { margin: 0 0 var(--r-3); }
.karte--seite h1 { font-size: var(--s-3); margin-bottom: 0; }
/* Das Nummernfeld auf der Speisekarte: ein Sandblock auf dem Kalk, etwas
   flacher als auf der Startseite, damit die Karte bald beginnt. */
.feldnr--karte {
  max-width: 36rem;
  margin-top: var(--r-5);
  padding: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  background: var(--leinen-tief);
  border: 1px solid var(--linie);
}
.feldnr--karte .feldnr__eingabe,
.feldnr--karte .knopf { height: 3.5rem; }
.feldnr--karte .feldnr__eingabe { font-size: var(--s-2); }
.feldnr--karte .feldnr__status { margin: var(--r-3) 0 0; min-height: 0; }
.feldnr--karte .feldnr__status:empty { margin: 0; }
.karte__kopf p { color: var(--tinte-weich); }

.karte__index {
  margin-bottom: var(--r-6);
  padding-block: var(--r-4);
  border-block: 1px solid var(--linie);
}
.karte__index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4 12rem;
  column-gap: var(--r-4);
}
.karte__index li { break-inside: avoid; }
.karte__index a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--logoblau);
  text-decoration: none;
}
@media (hover: hover) {
  .karte__index a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* Die Gaenge stehen in einer Spalte. In zwei Zeitungsspalten muesste
   man am Ende der linken Spalte sieben Bildschirme zurueck nach oben. */
.karte__gaenge { max-width: 46rem; }
/* Breit steht das Verzeichnis links daneben und bleibt beim Lesen
   stehen. So ist jeder Gang einen Klick entfernt. */
@media (min-width: 1100px) {
  .karte__inhalt {
    display: grid;
    grid-template-columns: 14rem minmax(0, 46rem);
    column-gap: var(--r-6);
    align-items: start;
  }
  .karte__index {
    position: sticky;
    top: calc(var(--kopf-h) + var(--r-4));
    max-height: calc(100vh - var(--kopf-h) - 2 * var(--r-4));
    overflow-y: auto;
    margin-bottom: 0;
    padding-block: 0;
    border-block: 0;
  }
  .karte__index ul { columns: auto; }
  .karte__index a { padding-block: 0.25rem; }
  /* Die Hinweise unter der Karte stehen in der Spalte der Gaenge. In der
     linken Spalte liefe das stehende Verzeichnis ueber sie hinweg. */
  .karte__index { grid-column: 1; grid-row: 1 / span 2; }
  .karte__gaenge { grid-column: 2; grid-row: 1; }
  .karte__noten { grid-column: 2; grid-row: 2; }
}
.gang {
  break-inside: avoid;
  padding-bottom: var(--r-6);
}
.gang__titel {
  font-size: var(--s-2);
  padding-bottom: var(--r-2);
  margin-bottom: var(--r-2);
  border-bottom: 2px solid var(--eiche);
}
.gang__liste { list-style: none; margin: 0; padding: 0; }
.gang__fuss {
  margin-top: var(--r-2);
  font-size: 0.9375rem;
  color: var(--tinte-weich);
}

.gericht {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.6rem;
}
/* Das gefundene Gericht. Eine eigene Ebene, die nur ueber opacity kommt. */
.gericht::before {
  content: '';
  position: absolute;
  inset: 0 -0.75rem;
  z-index: -1;
  background: var(--treffer);
  opacity: 0;
  transition: opacity var(--t-ui) ease;
}
.gericht.getroffen::before { opacity: 1; }

.gericht__nr {
  font-family: var(--ziffer);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--logoblau);
}
.gericht__name {
  font-weight: 600;
  line-height: 1.35;
}
.preis {
  font-family: var(--ziffer);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  min-width: 5ch;
}
.gericht .preis { grid-column: 3; }
.gericht__text {
  grid-column: 2 / 4;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinte-weich);
}

.gang--getraenke {
  padding-top: var(--r-4);
}
.getraenke {
  columns: 2 22rem;
  column-gap: var(--r-6);
}
.getraenke__block {
  break-inside: avoid;
  padding-bottom: var(--r-5);
}
.getraenke__titel {
  font-size: var(--s-1);
  margin-bottom: var(--r-2);
  /* Klein gesetzt reicht das dunkle Orange nicht fuer Fliesstextkontrast. */
  color: var(--tinte);
}
.getraenke__liste { list-style: none; margin: 0; padding: 0; }
.trank {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--r-3);
  padding-block: 0.45rem;
}
/* Der Name nimmt, was die Preise uebrig lassen, und bricht nur an
   Leerzeichen. Die Preise brechen nie, so bleibt die rechte Spalte fest. */
.trank__name { flex: 1 1 auto; min-width: 0; font-weight: 500; line-height: 1.35; hyphens: manual; }
.trank__preise {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 1.1rem;
}
.trank__paar {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}
.trank__menge { font-size: 0.8125rem; color: var(--tinte-weich); }

.karte__noten {
  margin-top: var(--r-3);
  padding-top: var(--r-4);
  border-top: 1px solid var(--linie);
  font-size: 0.9375rem;
  color: var(--tinte-weich);
}
.karte__noten p { max-width: 75ch; }


/* ==========================================================================
   FEIERN. Text links, die Tafel rechts bis an den Rand.
   ========================================================================== */

.feiern {
  background: var(--eiche);
  color: var(--auf-eiche);
  padding-block: var(--r-7);
  row-gap: var(--r-5);
  align-items: center;
}
.feiern h2,
.feiern .textruf { color: var(--auf-eiche); }
.feiern__text p { margin-bottom: var(--r-4); }
.feiern__bild { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .feiern__text { grid-column: inhalt-start / scheibe; grid-row: 1; }
  .feiern__bild {
    grid-column: mitte / voll-end;
    grid-row: 1;
    max-height: 46rem;
    width: 100%;
  }
}
@media (max-width: 899px) {
  .feiern__bild { grid-column: voll; }
}


/* ==========================================================================
   DRAUSSEN. Text oben, darunter ein versetztes Fotopaar.
   ========================================================================== */

.draussen {
  padding-block: var(--r-7);
  row-gap: var(--r-5);
}
/* Links der Text, auf der Achse und mittig zur Hoehe des Fotos. Rechts
   die Terrasse, gross und bis an den Rand. */
.draussen__bild--terrasse { aspect-ratio: 4 / 5; }
.draussen__bild--terrasse img { object-position: 50% 60%; }
@media (min-width: 900px) {
  .draussen { align-items: center; }
  .draussen__text { grid-column: inhalt-start / scheibe; grid-row: 1; }
  .draussen__bild--terrasse {
    grid-column: mitte / voll-end;
    grid-row: 1;
    max-height: 52rem;
    width: 100%;
  }
}
@media (max-width: 899px) {
  .draussen__bild--terrasse { grid-column: voll; order: 1; aspect-ratio: 1 / 1; }
}


/* ==========================================================================
   ZEITEN UND PLATZ. Die zwei Auskuenfte nebeneinander auf einem Block.
   ========================================================================== */

.auskunft {
  background: var(--leinen-tief);
  padding-block: var(--r-7);
  row-gap: var(--r-7);
}
@media (min-width: 900px) {
  .zeiten { grid-column: inhalt-start / mitte; grid-row: 1; padding-right: var(--r-6); }
  .platz  { grid-column: mitte / inhalt-end; grid-row: 1; }
}

/* Die Tabelle steht auf der Achse. Der heutige Tag ist am Wort "heute"
   und an der kraeftigeren Zeile zu erkennen, nicht an einer Flaeche,
   die ueber die Achse hinausragen muesste. */
.woche {
  width: 100%;
  margin: 0 0 var(--r-4);
  border-collapse: collapse;
}
.woche tr { border-bottom: 1px solid var(--linie); }
.woche th,
.woche td {
  padding: 0.65rem 0.75rem 0.65rem 0;
  text-align: left;
  vertical-align: baseline;
}
.woche th { font-weight: 600; white-space: nowrap; }
.woche td:last-child { padding-right: 0; }
.woche .spanne { display: inline-block; margin-right: 0.9rem; white-space: nowrap; }
/* Ruhetag als leise Marke auf Pfirsich. Die laute Marke gehoert dem
   heutigen Tag, denn der ist es, den man sucht. */
.woche__ruhe td { color: var(--tinte); }
.ruhetag {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  background: var(--treffer);
  color: var(--eiche);
  border-radius: 4px;
  font-weight: 600;
}
.woche tr[data-heute] { border-bottom-color: var(--logoblau); }
.woche tr[data-heute] th,
.woche tr[data-heute] td { color: var(--eiche); font-weight: 600; }
.woche__heute {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--eiche);
  background: var(--orange);
  border-radius: 4px;
}
.zeiten__kueche { color: var(--tinte-weich); }

/* Der Live-Status. Eine kleine Raute wie das O im Schriftzug: voll in
   Logoblau, wenn offen ist, hohl, wenn nicht. Der Text sagt es immer
   auch in Worten. Keine Bewegung. */
.live {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-weight: 500;
  color: var(--tinte);
}
.live[hidden] { display: none; }
.live__punkt {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid var(--logoblau);
  transform: rotate(45deg) translateY(-0.1rem);
}
.live[data-offen] .live__punkt { background: var(--logoblau); }
.hero__live {
  flex-basis: 100%;
  margin: calc(-1 * var(--r-2)) 0 var(--r-1);
  font-size: 0.9375rem;
}
.zeiten__live {
  margin: calc(-1 * var(--r-2)) 0 var(--r-4);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--s-1);
  line-height: 1.35;
  color: var(--eiche);
}

/* Der Abschluss: das Haus in voller Breite, flach geschnitten, damit
   Fassade und Schirme zusammen im Bild stehen. */
.auskunft__haus {
  grid-column: voll;
  position: relative;
  aspect-ratio: 21 / 9;
  max-height: 44rem;
  width: 100%;
  margin-bottom: calc(-1 * var(--r-7));
}
.auskunft__haus img { object-position: 50% 62%; }
.auskunft__haus figcaption {
  position: absolute;
  left: max(var(--rand), (100% - var(--breite)) / 2);
  bottom: var(--r-4);
  padding: 0.45rem 0.8rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinte);
  background: var(--leinen);
}
@media (max-width: 899px) {
  .auskunft__haus { aspect-ratio: 4 / 3; }
}

.platz__nummer {
  display: inline-block;
  margin-bottom: var(--r-3);
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--eiche);
  text-decoration: none;
  transition: transform var(--t-druck) var(--ease-aus);
}
.platz__nummer:active { transform: scale(0.97); }
@media (hover: hover) {
  .platz__nummer:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }
}
.platz__nach { color: var(--tinte-weich); margin-bottom: var(--r-4); }
.platz__mail { margin-bottom: var(--r-4); }
.platz__mail a,
.platz__ort a {
  color: var(--eiche);
  font-weight: 600;
}
/* Die Adresse bricht nie am Bindestrich. */
.platz__mail a { white-space: nowrap; }


/* ==========================================================================
   DER FUSS
   ========================================================================== */

.fuss {
  background: var(--eiche);
  color: var(--auf-eiche);
  padding-block: var(--r-6) var(--r-5);
}
.fuss__innen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--r-5) var(--r-4);
  font-size: 0.9375rem;
}
.fuss .logo { height: 1.75rem; color: var(--auf-eiche); }
.fuss__marke p { margin-top: var(--r-2); color: var(--auf-eiche-weich); }
.fuss__block p { margin: 0; color: var(--auf-eiche-weich); }
.fuss__block .fuss__titel {
  margin-bottom: var(--r-2);
  font-weight: 600;
  color: var(--auf-eiche);
}
/* Ruhige Spalten: Links ohne Unterstrich, jeder auf eigener Zeile; erst
   beim Darueberfahren unterstrichen. */
.fuss__block { display: flex; flex-direction: column; align-items: flex-start; }
.fuss__link {
  color: var(--auf-eiche);
  text-decoration: none;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  line-height: 1.9;
  white-space: nowrap;
}
/* Abstand nur nach einem Text, nicht direkt unter dem Spaltentitel. */
.fuss__block p:not(.fuss__titel) + .fuss__link { margin-top: var(--r-2); }
@media (hover: hover) {
  .fuss__link:hover { text-decoration-line: underline; }
}
.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Die letzte Zeile: links das Copyright, rechts der Hinweis auf die
   Agentur. Am Handy untereinander. */
.fuss__credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--r-1) var(--r-4);
  margin: var(--r-5) 0 0;
  padding-top: var(--r-3);
  border-top: 1px solid rgba(250, 245, 236, 0.14);
  font-size: 0.875rem;
  color: var(--auf-eiche-weich);
}
.fuss__credit p { margin: 0; color: inherit; }
.fuss__credit a {
  color: var(--auf-eiche);
  text-decoration: none;
  text-underline-offset: 0.3em;
}
@media (hover: hover) {
  .fuss__credit a:hover { text-decoration: underline; }
}
/* Am Tablet zwei mal zwei: Marke und Adresse, darunter Kontakt und Mehr.
   Mit auto-fit blieb dort "Mehr" allein in einer zweiten Zeile. */
@media (min-width: 600px) and (max-width: 1099px) {
  .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   NEBENSEITEN. Impressum, Datenschutz, 404.
   ========================================================================== */

.blatt,
.fehler {
  padding: var(--r-7) var(--rand);
}
.blatt__innen {
  max-width: 44rem;
  margin-inline: auto;
}
.blatt .logo-link,
.fehler .logo-link {
  display: inline-block;
  margin-bottom: var(--r-6);
  color: var(--logoblau);
}
.blatt .logo-link .logo,
.fehler .logo-link .logo { height: 1.5rem; }
/* Brotkrumen auf den Nebenseiten: klein, unter dem Logo. */
.brotkrumen {
  margin: calc(-1 * var(--r-4)) 0 var(--r-5);
  font-size: 0.9375rem;
  color: var(--tinte-weich);
}
.brotkrumen a { color: var(--eiche); }
/* "Datenschutzerklärung" ist ein langes Wort, getrennt wird nicht. Am
   schmalen Handy wird die Ueberschrift so klein, dass es ganz passt. */
.blatt h1 { font-size: min(var(--s-3), 7.8vw); margin-bottom: var(--r-5); }
.blatt h2 {
  font-size: var(--s-1);
  margin: var(--r-5) 0 var(--r-2);
  /* Klein gesetzt reicht das dunkle Orange nicht fuer Textkontrast. */
  color: var(--tinte);
}
.blatt a { color: var(--eiche); }
.blatt__abgesetzt {
  margin: var(--r-5) 0;
  padding: var(--r-3) var(--r-4);
  background: var(--leinen-tief);
  border: 1px solid var(--linie);
}
.blatt__abgesetzt h2 { margin-top: 0; }
.blatt__abgesetzt p { margin-bottom: 0; }
.blatt__stand { margin-top: var(--r-5); font-size: 0.9375rem; color: var(--tinte-weich); }
.zurueck { margin-top: var(--r-6); }

.fehler {
  min-height: 100svh;
  display: grid;
  place-items: center;
}
.fehler > div { max-width: 36rem; }
.fehler h1 { font-size: var(--s-4); margin-bottom: var(--r-4); }
.fehler a:not(.knopf):not(.logo-link) { color: var(--eiche); font-weight: 600; }