/* ============================================================================
   Goetheruh · Bauteile
   Grundordnung, Kopf, Erstes Viewport, Felder, Formular, Fuß, Speisekarte.
   ========================================================================= */

/* --- 0 · Grundordnung und Browseroberflächen ----------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* Die Bildlaufleiste gehört zur Gestaltung, nicht dem Browser. */
  scrollbar-color: var(--ton-dunkel) var(--steinzeug);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--leinen);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  font-weight: 380;
  line-height: 1.62;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--kobalt); color: var(--leinen); }
.feld--wald ::selection, .fuss ::selection, .karte-blatt ::selection {
  background: var(--messing); color: var(--wald-tief);
}

:focus-visible {
  outline: 2px solid var(--kobalt);
  outline-offset: 3px;
  border-radius: 1px;
}
.feld--wald :focus-visible, .kopf :focus-visible, .fuss :focus-visible,
.karte-blatt :focus-visible { outline-color: var(--messing); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }
p a, .fliess a, .rechtstext a {
  color: var(--kobalt);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--kobalt) 42%, transparent);
  transition: text-decoration-color var(--schnell) var(--weich);
}
p a:hover, .fliess a:hover, .rechtstext a:hover { text-decoration-color: currentColor; }

input, textarea, select, button { font: inherit; color: inherit; }
input, textarea { caret-color: var(--kobalt); }

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

.sprung {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--kobalt); color: var(--leinen);
  padding: .85rem 1.4rem; font-weight: 600; letter-spacing: .01em;
}
.sprung:focus { transform: translateY(0); }

.bahn { width: 100%; max-width: var(--bahn); margin-inline: auto;
        padding-inline: var(--rand); }
.bahn--weit { max-width: 88rem; }

/* --- 1 · Schriftrollen --------------------------------------------------- */

/* Drei Abstände tragen die ganze Seite: 1,6rem von einer Abschnitts-
   überschrift zu ihrem Text, 0,9rem von einer Unterüberschrift zu ihrem,
   2,5rem von einer Überschrift zu einem abgesetzten Block darunter. Wer
   eine neue Überschrift setzt, nimmt einen dieser drei Werte. */
.anzeige {
  font-family: var(--anzeige);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.021em;
  text-wrap: balance;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
/* Drei Anzeigegrößen, mehr nicht: der Titel ganz oben, jede Abschnitts-
   überschrift, jede Unterüberschrift. Vorher gab es fünf — eine eigene für
   die Uhrzeit, eine vierte Stufe für die Kästen —, und genau das las sich
   uneinheitlich. Die Uhrzeit und die Rufnummer greifen jetzt auf dieselben
   zwei Stufen zurück. */
.h-riese { font-size: clamp(2.6rem, 1.35rem + 5.4vw, 5.1rem); }
.h-gross { font-size: clamp(2rem, 1.28rem + 3.1vw, 3.5rem); }
.h-mittel { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.75rem);
            letter-spacing: -.016em; line-height: 1.2; }

/* Und eine einzige Auszeichnungszeile: die kleine Versalzeile über einem
   Wert. Vorher hatte jede Stelle ihre eigene Größe (.655 / .68 / .72 rem)
   und ihre eigene Sperrung. */
.marke-klein,
.band__kopf, .daten__kopf, .zeiten__tag, .zeiten__sonder dt,
.woche__name, .fuss__kopf, .beschriftung, .platz__was, .zitat figcaption {
  font-family: var(--grotesk);
  font-size: .7rem; font-weight: 620;
  letter-spacing: .17em; text-transform: uppercase;
  line-height: 1.4;
}

.fliess { max-width: var(--bahn-eng); }
.fliess p + p { margin-top: 1em; }
.gross-satz {
  font-size: clamp(1.08rem, 1rem + .38vw, 1.3rem);
  line-height: 1.58; color: var(--nuss);
}
.neben { color: var(--nuss-hell); }
.feld--wald .neben { color: var(--ton); }

.zahl { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1; }

/* --- 2 · Das Gitterwerk --------------------------------------------------- */
/* Das Tragwerk des Goetheturms als Fläche: Pfosten, Riegel, Streben.
   Es liegt nur auf den grünen Feldern — der Turm steht im Wald.             */

.textur--ruhig { opacity: .8; }
@media (max-width: 40rem) { .textur { opacity: .78; } }
.textur {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.textur .grund { width: 100%; height: 100%; }

/* --- 3 · Kopf ------------------------------------------------------------ */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--wald-tief);
  color: var(--leinen);
  border-bottom: var(--haar) solid var(--wald-linie);
}
.kopf__in {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem);
  min-height: 4.5rem;
}

.marke { display: flex; align-items: baseline; gap: .7rem;
         text-decoration: none; flex: 0 1 auto; min-width: 0;
         padding-block: .3rem; }
.marke__wort {
  font-family: var(--anzeige); font-weight: 600;
  font-size: 1.32rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--leinen); line-height: 1;
}
.marke__zusatz {
  font-size: .72rem; font-weight: 560; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ton); line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.5vw, 1.7rem);
       margin-left: auto; }
.nav__a {
  position: relative;
  font-size: .755rem; font-weight: 580; letter-spacing: .11em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ton); padding-block: .5rem;
  transition: color var(--schnell) var(--weich);
}
.nav__a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .1rem;
  height: var(--haar); background: var(--messing);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mittel) var(--aus);
}
.nav__a:hover, .nav__a[aria-current='page'] { color: var(--leinen); }
.nav__a:hover::after, .nav__a[aria-current='page']::after { transform: scaleX(1); }

.kopf__ruf {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 620; letter-spacing: .02em;
  text-decoration: none; color: var(--leinen); white-space: nowrap;
}
.kopf__ruf svg { width: 1rem; height: 1rem; flex: none; }
.kopf__ruf:hover { color: var(--messing); }

.klapp {
  display: none; margin-left: auto;
  align-items: center; gap: .55rem;
  background: none; border: var(--haar) solid var(--wald-linie);
  color: var(--leinen); padding: .55rem .85rem; cursor: pointer;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; border-radius: var(--kante);
}
.klapp svg { width: 1.05rem; height: 1.05rem; }
.klapp__zu { display: none; }
.klapp[aria-expanded='true'] .klapp__auf { display: none; }
.klapp[aria-expanded='true'] .klapp__zu { display: block; }

.nav--lade {
  display: none; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--wald-tief);
  border-top: var(--haar) solid var(--wald-linie);
  padding: .5rem var(--rand) 1.5rem;
}
.nav--lade .nav__a {
  padding: .95rem 0; border-bottom: var(--haar) solid var(--wald-hell);
  font-size: .82rem;
}
.nav--lade .nav__a::after { display: none; }
.nav--lade[data-offen='true'] { display: flex; }

/* Die Unterzeile der Wortmarke braucht rund 110 px. Gemessen bricht die
   Navigation ab 1140 px um, ab 1160 px läuft sie einzeilig — 74rem lässt
   dazwischen Luft. Darunter weicht lieber die Unterzeile als die Navigation. */
@media (max-width: 74rem) { .marke__zusatz { display: none; } }
@media (max-width: 62rem) {
  .kopf .nav:not(.nav--lade) { display: none; }
  .kopf__ruf { display: none; }
  .klapp { display: inline-flex; }
}
@media (min-width: 62.0625rem) { .nav--lade { display: none !important; } }

/* --- 4 · Erstes Viewport ------------------------------------------------- */

.erst {
  position: relative;
  background: var(--wald-tief);
  color: var(--leinen);
  overflow: hidden;
  isolation: isolate;

  /* Ein einziges Maß für den ganzen Titelbereich. Überschrift, Fließtext,
     Knöpfe und Abstände leiten sich davon ab, damit sie beim Mitwachsen
     nicht auseinanderlaufen.

     Vorher wuchs die Überschrift mit 5.4vw, der Fließtext mit 0.4vw: auf
     375 px standen 42 px über 17 px, auf 1024 px schon 77 px über 20 px.
     Genau dazwischen — Tablet, kleiner Laptop — wirkte der Titel erschlagend
     und der Satz darunter verloren. Die Kurve ist jetzt flacher und läuft
     früher aus. */
  --titel: clamp(2.5rem, 1.9rem + 3.2vw, 4.6rem);
  --satz:  clamp(1.08rem, 1rem + .62vw, 1.4rem);
  --luft:  clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
}
/* Das Bild liegt hinter dem ganzen Abschnitt, die Schrift darauf. Ein
   Schleier aus Waldgrün hält sie lesbar: quer verlaufend, solange der Text
   links neben dem Motiv steht, senkrecht, sobald er darauf sitzt. */
.erst__grund { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.erst__grund img, .erst__grund .platz {
  width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0; box-shadow: none;
}
.erst__grund::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 24, 16, .34), rgba(12, 24, 16, 0) 22%,
                    rgba(12, 24, 16, 0) 72%, rgba(12, 24, 16, .42)),
    linear-gradient(97deg, rgba(12, 24, 16, .94) 0%, rgba(12, 24, 16, .86) 28%,
                    rgba(12, 24, 16, .54) 64%, rgba(12, 24, 16, .4) 100%);
}
.erst__wort { max-width: 46rem; }

.erst__in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6.5rem);
  min-height: min(78vh, 44rem);
}
.erst h1 { font-size: var(--titel); max-width: 15ch; }
.erst__sub {
  margin-top: calc(var(--luft) * .85); max-width: 42ch;
  font-size: var(--satz);
  line-height: 1.56; color: var(--leinen);
}
.erst__tat {
  margin-top: calc(var(--luft) * 1.35);
  display: flex; flex-wrap: wrap; gap: .85rem;
}
/* Die Knoepfe im Titelbereich tragen mehr Flaeche als sonst auf der Seite:
   unter einer Ueberschrift von bis zu 74 px wirkt der Normalknopf verloren.
   Schrift und Polsterung wachsen mit demselben Mass wie alles andere hier. */
.erst .erst__tat .knopf {
  font-size: clamp(.78rem, .745rem + .14vw, .87rem);
  padding: calc(var(--luft) * .52) calc(var(--luft) * 1.02);
}

@media (max-width: 64rem) {
  /* Schmaler steht die Schrift über dem Bild statt daneben, der Schleier
     läuft also senkrecht — quer gäbe es hier keine freie Seite, auf der das
     Foto durchkäme.

     Dass er dünn bleiben darf, liegt an der Textfarbe: der Absatz steht
     im Titelbereich in Leinen statt im sonst üblichen Ton. Auf der
     hellsten Stelle des Fotos käme Ton bei dieser Deckung nur auf 3,5:1,
     Leinen dagegen auf 5,9:1. Der Schleier darf dafür von .74 auf .64
     zurück — spürbar mehr Foto bei besserem Kontrast. */
  .erst__grund::after {
    background:
      linear-gradient(180deg, rgba(12, 24, 16, .64), rgba(12, 24, 16, .68) 42%,
                      rgba(12, 24, 16, .86));
  }
  .erst__wort { max-width: none; }
  .erst h1 { max-width: 18ch; }
}

@media (max-width: 30rem) {
  /* Auf dem Telefon darf der Titelbereich nicht die ganze Höhe fressen —
     was darunter kommt, soll angeschnitten sichtbar sein. */
  .erst__in { min-height: min(68vh, 30rem); }
  .erst h1 { max-width: none; }
  .erst .erst__tat .knopf { flex: 1 1 100%; }
}

/* --- 5 · Das Band: heute geöffnet, Küche, Ort ---------------------------- */

.band {
  position: relative; z-index: 3;
  background: var(--wald);
  border-top: var(--haar) solid var(--wald-linie);
  color: var(--leinen);
}
.band__in {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.band__zelle {
  padding: 1.4rem clamp(1.25rem, 3vw, 2.2rem);
  border-left: var(--haar) solid var(--wald-linie);
}
.band__zelle:first-child { border-left: 0; padding-left: var(--rand); }
.band__zelle:last-child { padding-right: var(--rand); }
.band__kopf { color: var(--ton); }
.band__wert { margin-top: .5rem; font-size: .96rem; font-weight: 500;
              line-height: 1.4; }
.band__wert b { font-weight: 640; }

.puls {
  display: inline-block; width: .48rem; height: .48rem; border-radius: 50%;
  background: var(--messing); margin-right: .5rem; vertical-align: .05em;
}
.puls--zu { background: var(--ton-dunkel); }

/* --- 5b · Die beiden bedienbaren Bandzellen ------------------------------
   „Heute" klappt die ganze Woche auf, „Hier finden Sie uns" führt zur
   Karte. „Empfohlen" bleibt ein reiner Text — nicht alles, was in einer
   Reihe steht, muss ein Knopf sein.                                      */

.band__schalter {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; color: inherit; font: inherit;
  position: relative; padding-right: 1.9rem;
}
.band__schalter .band__wert { display: block; }
.band__pfeil {
  position: absolute; right: 0; top: .3rem;
  width: 1.05rem; height: 1.05rem; color: var(--ton);
  transition: transform var(--mittel) var(--aus), color var(--schnell) var(--weich);
}
.band__schalter[aria-expanded='true'] .band__pfeil { transform: rotate(180deg); }
.band__schalter:hover .band__pfeil { color: var(--leinen); }
.band__schalter:hover .band__wert b { color: var(--messing); }

.band__zelle--verweis {
  text-decoration: none; color: inherit; display: block;
  transition: background var(--schnell) var(--weich);
}
.band__zelle--verweis:hover { background: rgba(247, 242, 232, .05); }
.band__hinweis {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .7rem;
  font-size: .78rem; font-weight: 640; letter-spacing: .12em;
  text-transform: uppercase; color: var(--messing);
}
.band__hinweis svg { width: .9rem; height: .9rem; flex: none; }
.band__zelle--verweis:hover .band__hinweis { color: var(--apfelwein); }

/* Die Woche. Ohne Skript steht sie offen — dann geht nichts verloren. */
.band__woche {
  border-top: var(--haar) solid var(--wald-linie);
  padding-block: clamp(1.5rem, 3vw, 2.1rem);
}
.band__woche[hidden] { display: none; }
.band__woche-lage {
  margin-bottom: 1.1rem; font-size: .95rem; color: var(--leinen);
}
.band__woche-lage[hidden] { display: none; }
.band__woche-lage b { color: var(--messing); }
.band__woche-note {
  margin-top: 1.2rem; font-size: .85rem; line-height: 1.55; color: var(--ton);
  max-width: 62ch;
}
.band__woche-note a { color: var(--messing); text-decoration-color:
  color-mix(in srgb, var(--messing) 45%, transparent); }

.woche {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--haar); background: var(--wald-linie);
  border: var(--haar) solid var(--wald-linie);
}
.woche__tag {
  background: var(--wald); padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.woche__name { color: var(--ton); }
.woche__zeit { font-size: .88rem; color: var(--leinen); }
.woche__tag[data-heute-tag='true'] { background: var(--wald-hell); }
.woche__tag[data-heute-tag='true'] .woche__name { color: var(--messing); }
.woche__tag[data-zu='true'] .woche__zeit { color: var(--ton-dunkel); }

@media (max-width: 62rem) {
  .woche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .woche { grid-template-columns: minmax(0, 1fr); }
  .woche__tag { flex-direction: row; justify-content: space-between;
                align-items: baseline; }
}

@media (max-width: 52rem) {
  .band__in { grid-template-columns: minmax(0, 1fr); }
  .band__zelle { border-left: 0; border-top: var(--haar) solid var(--wald-linie);
                 padding-inline: var(--rand); }
  .band__zelle:first-child { border-top: 0; }
}

/* --- 6 · Felder ---------------------------------------------------------- */

.feld { position: relative; padding-block: clamp(4rem, 8vw, var(--r9)); }
/* Der Fuß bringt oben eigene Luft mit. Der letzte Abschnitt davor braucht
   unten weniger — sonst klafft zwischen Inhalt und Fuß eine Lücke, die auf
   jeder Seite anders groß ausfällt. */
main > .feld:last-child { padding-bottom: clamp(3rem, 5.5vw, 4.5rem); }
.feld--leinen { background: var(--leinen); }
.feld--stein { background: var(--steinzeug); }
.feld--wald {
  background: var(--wald-tief); color: var(--leinen);
  overflow: hidden; isolation: isolate;
}
.feld--wald .h-gross, .feld--wald .h-mittel { color: var(--leinen); }
.feld > .bahn { position: relative; z-index: 2; }

.feld__titel { max-width: 20ch; color: var(--nuss); }
.feld--wald .feld__titel { color: var(--leinen); }

/* Überschrift bekommt mehr Luft über sich als unter sich. */
.abstand-oben { margin-top: clamp(3rem, 5vw, 4.5rem); }
.nach-titel { margin-top: 1.6rem; }

.linie {
  height: var(--haar); background: var(--ton-linie); border: 0; margin: 0;
}
.feld--wald .linie { background: var(--wald-linie); }

/* --- 7 · Knöpfe ---------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  font-size: .78rem; font-weight: 640; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  border: var(--haar) solid transparent; border-radius: var(--kante);
  cursor: pointer; white-space: nowrap;
  transition: background var(--schnell) var(--weich),
              border-color var(--schnell) var(--weich),
              color var(--schnell) var(--weich),
              transform var(--schnell) var(--weich),
              box-shadow var(--mittel) var(--aus);
}
.knopf svg { width: 1rem; height: 1rem; flex: none; }
/* Eine E-Mail-Adresse in Versalien liest sich wie ein Zuruf und ist
   schwerer zu erfassen. Der Knopf behaelt Gewicht und Laufweite, nur die
   Grossschreibung faellt weg. */
.knopf--wort { text-transform: none; letter-spacing: .04em; }
.knopf:active { transform: translateY(1px); }

.knopf--tat {
  background: var(--kobalt); color: var(--leinen);
  box-shadow: var(--heben-1);
}
.knopf--tat:hover { background: var(--kobalt-tief); box-shadow: var(--heben-2); }

.knopf--rand {
  background: transparent; color: var(--leinen);
  border-color: color-mix(in srgb, var(--ton) 55%, transparent);
}
.knopf--rand:hover { border-color: var(--ton); background: rgba(247, 242, 232, .07); }

.knopf--hell {
  background: transparent; color: var(--nuss);
  border-color: var(--ton-dunkel);
}
.knopf--hell:hover { background: var(--steinzeug); border-color: var(--nuss); }

.knopf[disabled], .knopf[aria-disabled='true'] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Textverweis mit wanderndem Pfeil */
.weiter {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 640; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--kobalt);
  padding-bottom: .3rem;
  border-bottom: var(--haar) solid color-mix(in srgb, var(--kobalt) 35%, transparent);
  transition: border-color var(--schnell) var(--weich);
}
.feld--wald .weiter { color: var(--messing);
  border-bottom-color: color-mix(in srgb, var(--messing) 40%, transparent); }
.weiter svg { width: .95rem; height: .95rem;
              transition: transform var(--mittel) var(--aus); }
.weiter:hover { border-bottom-color: currentColor; }
.weiter:hover svg { transform: translateX(.28rem); }

/* --- 8 · Zwei Räume ------------------------------------------------------ */

/* Überschrift und Vorspann stehen mittig über den drei Flächen. */
.ort__kopf { max-width: 56rem; margin-inline: auto; text-align: center; }
.ort__kopf .fliess { max-width: none; margin-top: 1.6rem; }
.ort__kopf .fliess p + p { margin-top: 1.1rem; }

/* --- 8b · Der Vorhang ----------------------------------------------------
   Zwei Bilder übereinander, das obere über eine weiche Maske aufgezogen.
   Der Regler darüber ist ein echtes <input type="range">: er lässt sich
   ziehen, mit den Pfeiltasten bedienen und wird vorgelesen.

   Ohne Skript steht der Vorhang auf der Hälfte, beide Bilder sind scharf
   und beide Texte lesbar — die Unschärfe hängt an der Klasse .js und kommt
   erst dazu, wenn jemand sie auch wegziehen kann.                        */

.vorhang {
  --teil: 50%;
  --anteil: .5;
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(2.8rem, 4.5vw, 4rem);
  min-height: clamp(24rem, 40vw, 31rem);
  border: var(--haar) solid var(--ton-linie);
  border-radius: var(--kante);
  background: var(--wald-tief);
}
/* Jede Haelfte ist ein eigener Stapel. Ohne das lag der Text der unteren
   Haelfte (z-index 2) ueber dem Bild der oberen (z-index auto) — die
   verdeckte Seite schien durch das Bild hindurch. Jetzt deckt die obere
   Haelfte die untere vollstaendig ab, Bild samt Text. */
.vorhang__blatt { position: absolute; inset: 0; isolation: isolate; }
.vorhang__blatt--innen { z-index: 1; }
.vorhang__blatt--sommer { z-index: 2; }
/* Die Maske schneidet und weicht die Kante zugleich auf. */
.vorhang__blatt--sommer {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--teil) - 4%),
                                      transparent var(--teil));
  mask-image: linear-gradient(90deg, #000 calc(var(--teil) - 4%),
                              transparent var(--teil));
}

.vorhang__bild { position: absolute; inset: 0; overflow: hidden; }
.vorhang__bild img, .vorhang__bild .platz {
  width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0;
  /* Etwas größer als der Rahmen: sonst zeigt die Unschärfe die Kante. */
  transform: scale(1.06);
}
/* Solange kein Foto da ist, gehoert der Bildplatz über den Schleier —
   sonst steht die Maßangabe unlesbar im Dunkeln. */
.vorhang__bild .platz {
  position: relative; z-index: 1;
  border-color: rgba(210, 197, 175, .5); color: var(--ton);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px,
      rgba(247, 242, 232, .06) 11px 12px);
}
/* Ein Schleier, damit die Schrift auf jedem Foto steht. */
.vorhang__bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 26, 18, .82),
                              rgba(14, 26, 18, .5) 58%, rgba(14, 26, 18, .3));
}
.vorhang__blatt--innen .vorhang__bild::after {
  background: linear-gradient(270deg, rgba(14, 26, 18, .82),
                              rgba(14, 26, 18, .5) 58%, rgba(14, 26, 18, .3));
}

.vorhang__text {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.6rem, 3.2vw, 2.8rem);
  color: var(--leinen); text-align: center;
}
.vorhang__text--links { left: 0; }
.vorhang__text--rechts { right: 0; }
.vorhang__text h3 { color: var(--leinen); }
.vorhang__text p {
  margin-top: .9rem; color: var(--ton); line-height: 1.6;
  max-width: 34ch; margin-inline: auto;
}

/* Der Regler liegt unsichtbar über der ganzen Fläche; sichtbar ist der
   Griff daneben. So zieht man am Bild und nicht an einem Bedienteil. */
.vorhang__regler {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; opacity: 0; cursor: ew-resize;
}
.vorhang__regler::-webkit-slider-thumb {
  -webkit-appearance: none; width: 3.5rem; height: 20rem;
}
.vorhang__regler::-moz-range-thumb {
  width: 3.5rem; height: 20rem; border: 0; border-radius: 0;
}
.vorhang__griff {
  position: absolute; top: 50%; left: var(--teil); z-index: 4;
  transform: translate(-50%, -50%);
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--leinen); color: var(--nuss);
  box-shadow: var(--heben-2);
  pointer-events: none;
}
.vorhang__griff::before {
  content: ''; position: absolute; left: 50%; top: -40rem; bottom: -40rem;
  width: 2px; margin-left: -1px;
  background: rgba(247, 242, 232, .7);
}
.vorhang__griff svg { width: 1.2rem; height: 1.2rem; position: relative; }
.vorhang__regler:focus-visible ~ .vorhang__griff {
  outline: 2px solid var(--kobalt); outline-offset: 3px;
}

/* Mit Skript: die abgewandte Hälfte tritt zurück. Der Text verschwindet
   ganz, bevor die Maske ihn mitten im Wort abschneiden könnte — deshalb
   die steile Kurve und nicht ein gemächliches Abblenden. */
.js .vorhang__blatt--sommer .vorhang__bild img,
.js .vorhang__blatt--sommer .vorhang__bild .platz {
  filter: blur(calc((1 - var(--anteil)) * 9px));
}
.js .vorhang__blatt--innen .vorhang__bild img,
.js .vorhang__blatt--innen .vorhang__bild .platz {
  filter: blur(calc(var(--anteil) * 9px));
}
.js .vorhang__blatt--sommer .vorhang__text {
  opacity: clamp(0, calc((var(--anteil) - .2) * 4), 1);
}
.js .vorhang__blatt--innen .vorhang__text {
  opacity: clamp(0, calc((.8 - var(--anteil)) * 4), 1);
}

/* Der Waldspielpark darunter: ohne Bild, mittig, wie der Kopf darüber. */
.familie {
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  max-width: 56rem; margin-inline: auto; text-align: center;
}
.familie h3 { color: var(--nuss); }
.familie p {
  margin-top: .9rem; color: var(--nuss-hell); line-height: 1.6;
  max-width: 62ch; margin-inline: auto;
}
.familie__weiter { margin-top: 1.5rem; }
.familie__weiter .weiter { margin-inline: auto; }

@media (max-width: 48rem) {
  /* Zu schmal zum Ziehen: aus dem Vorhang werden zwei Karten untereinander,
     Bild oben, Text darunter auf hellem Grund — also scharf, voll deckend
     und in dunkler Schrift. */
  .vorhang {
    min-height: 0; display: flex; flex-direction: column;
    background: none; border: 0; border-radius: 0;
  }
  .vorhang__blatt {
    position: relative; inset: auto;
    -webkit-mask-image: none; mask-image: none;
    background: var(--steinzeug);
    border: var(--haar) solid var(--ton-linie);
    border-radius: var(--kante); overflow: hidden;
  }
  .vorhang__blatt--sommer { order: -1; margin-bottom: 1.2rem; }
  .vorhang__bild { position: relative; aspect-ratio: 4 / 3; }
  .vorhang__bild::after { display: none; }
  .vorhang__bild img, .vorhang__bild .platz { transform: none; }
  .vorhang__bild .platz {
    border-color: var(--ton-dunkel); color: var(--nuss-hell);
    background:
      repeating-linear-gradient(135deg, transparent 0 11px,
        color-mix(in srgb, var(--ton-dunkel) 16%, transparent) 11px 12px);
  }
  .vorhang__text {
    position: relative; top: auto; bottom: auto; width: 100%;
    padding: clamp(1.4rem, 5vw, 2rem);
  }
  .vorhang__text h3 { color: var(--nuss); }
  .vorhang__text p { color: var(--nuss-hell); }
  /* Diese beiden müssen so genau treffen wie die Regeln oben, sonst
     bleiben Unschärfe und Deckung aus der Vorhangfassung stehen. */
  .js .vorhang__blatt--sommer .vorhang__bild img,
  .js .vorhang__blatt--sommer .vorhang__bild .platz,
  .js .vorhang__blatt--innen .vorhang__bild img,
  .js .vorhang__blatt--innen .vorhang__bild .platz { filter: none; }
  .js .vorhang__blatt--sommer .vorhang__text,
  .js .vorhang__blatt--innen .vorhang__text { opacity: 1; }
  .vorhang__regler, .vorhang__griff { display: none; }
}

/* --- 9 · Das Zitat ------------------------------------------------------- */

.zitat { text-align: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.zitat blockquote {
  font-family: var(--anzeige); font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 1.02rem + 1.55vw, 2.15rem);
  line-height: 1.34; letter-spacing: -.014em;
  color: var(--nuss); max-width: 24ch; margin-inline: auto;
  text-wrap: balance;
}
.zitat figcaption { margin-top: 1.6rem; color: var(--nuss-hell); }
.zitat__strich {
  width: 2.5rem; height: var(--haar); background: var(--ton-dunkel);
  margin: 0 auto 2.2rem;
}

/* --- 10 · Speisen und Getränke ------------------------------------------- */

/* Der Kiosk sitzt unter dem Fließtext im Speisenabschnitt: eigener
   Gedanke, eigene Überschrift, aber kein eigener Abschnitt — er gehört
   zur Küche. */
.kiosk {
  margin-top: clamp(2.4rem, 3.6vw, 3.1rem);
  max-width: 38ch;
}
.kiosk h3 { color: var(--leinen); }
.kiosk p { margin-top: .9rem; color: var(--ton); line-height: 1.6; }

.anfrage__verweis {
  margin-top: 1.1rem; font-size: .92rem; color: var(--nuss-hell);
}
.anfrage__verweis a { font-weight: 560; }

.kueche__gitter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}

/* Zwei Bilder als Einblick in die Karte. Gleiches Format wie in der Galerie,
   damit Aufnahmen aus demselben Satz hier und dort passen. */
.schau { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.schau .platz, .schau .foto {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--kante);
}

@media (max-width: 58rem) {
  .kueche__gitter { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}

/* --- 11 · Öffnungszeiten ------------------------------------------------- */

/* Oben mittig die Zeiten, darunter der Reservierungskasten über die ganze
   Breite. Vorher standen beide nebeneinander, und neben der kurzen rechten
   Spalte blieb links eine große Lücke stehen. */
.zeiten__kopf { max-width: 54rem; margin-inline: auto; text-align: center; }
.zeiten__kopf .feld__titel { max-width: none; }
.zeiten__kopf .zeiten__note { margin-inline: auto; }
.uhrzeit {
  font-family: var(--anzeige); font-weight: 650;
  white-space: nowrap;
  font-size: clamp(2rem, 1.28rem + 3.1vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--messing);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  margin-top: .8rem;
}
.zeiten__note { margin-top: 1.5rem; color: var(--ton); max-width: 40ch; }

.merk {
  border: var(--haar) solid var(--wald-linie);
  background: rgba(247, 242, 232, .045);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--kante);
}
.merk--breit {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding: clamp(1.8rem, 3.4vw, 2.8rem);
}
/* Die Regelliste links ist deutlich länger als der Hinweis rechts. Ein
   Haarstrich trägt den Zwischenraum, und die rechte Spalte sitzt auf halber
   Höhe — so bleibt neben den Regeln keine leere Fläche stehen. */
.merk__gitter {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  /* Der Zwischenraum trennt die beiden Spalten; ein Strich dazwischen war
     zu viel und stand quer im Kasten. */
  column-gap: clamp(2.4rem, 5vw, 3.6rem);
}
.merk__gitter > :last-child {
  display: flex; flex-direction: column; justify-content: center;
}
.merk__tat {
  margin-top: 1.7rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 1rem 1.7rem;
}

/* Die Reservierungsregeln stehen jetzt hier, im Kasten bei den
   Öffnungszeiten — und nur noch hier. Vorher kamen sie ein zweites Mal
   im Anfrageabschnitt, das war die Wiederholung, die aufgefallen ist. */
.merk__regeln { margin-top: .9rem; }
.merk__regeln li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem;
  padding: .5rem 0; font-size: .92rem; line-height: 1.5; color: var(--ton);
}
.merk__regeln li::before {
  content: ''; width: .38rem; height: .38rem; margin-top: .55rem;
  background: var(--messing); transform: rotate(45deg);
}
.merk__dank { margin-top: .9rem; font-style: italic; }

/* Feiertage und Ausnahmen stehen untereinander unter der großen Uhrzeit,
   in derselben Mittelachse wie alles darüber — jeder Satz auf einer Zeile,
   solange die Spalte breit genug ist. */
.zeiten__sonder { margin-top: 2.5rem; }
.zeiten__sonder dt { color: var(--kobalt); font-size: 1.05rem; }
.zeiten__sonder dd {
  margin: .5rem 0 0; font-size: .95rem; line-height: 1.55;
  color: var(--nuss-hell);
}
.zeiten__sonder dd + dt { margin-top: 1.5rem; }
.merk h3 { color: var(--leinen); }
.merk p { margin-top: .9rem; color: var(--ton); font-size: .96rem; }

@media (max-width: 58rem) {
  .merk__gitter { grid-template-columns: minmax(0, 1fr); }
  .merk__gitter > :last-child { margin-top: 2.2rem; }
}


/* --- 12 · Bildplätze ----------------------------------------------------- */

.platz {
  position: relative;
  border: 1.5px dashed var(--ton-dunkel);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      color-mix(in srgb, var(--ton-dunkel) 16%, transparent) 11px 12px);
  border-radius: var(--kante);
  display: grid; place-content: center; text-align: center;
  padding: 2rem 1.5rem; gap: .55rem;
  color: var(--nuss-hell);
}
.feld--wald .platz, .erst .platz, .karte-kopf .platz {
  border-color: var(--ton-dunkel);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      rgba(247, 242, 232, .07) 11px 12px);
  color: var(--ton);
}
.feld--wald .platz svg, .erst .platz svg { opacity: .7; }
.platz svg { width: 1.6rem; height: 1.6rem; margin-inline: auto; opacity: .55; }
.platz__mass { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .8; }
.platz--breit { aspect-ratio: 16 / 9; }
.platz--hoch { aspect-ratio: 4 / 5; }
.platz--quadrat { aspect-ratio: 1; }

/* --- 13 · Feiern --------------------------------------------------------- */

/* Links das Bild, rechts der Text — beide Spalten gleich hoch. Das Bild
   zieht sich über die ganze Höhe, und weil unten in beiden Spalten die
   Fußzeile sitzt (Blätterleiste links, Knöpfe rechts), stehen die beiden
   auf einer Linie. */
.feier__gitter {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch;
}
.feier__gitter > * { display: flex; flex-direction: column; min-width: 0; }
.feier__tat { margin-top: auto; padding-top: 2.2rem; }
/* --- 13b · Die Galerie ---------------------------------------------------
   Eine seitlich scrollbare Spur mit Einrastpunkten. Ohne Skript kann man
   wischen und mit der Tastatur scrollen — es geht kein Bild verloren, auch
   wenn die Knöpfe nichts tun.                                            */

.galerie {
  position: relative;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}

.galerie__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: clamp(.8rem, 2vw, 1.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Füllt die Spalte; der Mindestwert hält das Hochformat, falls die
     Textspalte daneben einmal kürzer ausfällt. */
  flex: 1; min-height: clamp(26rem, 42vw, 38rem);
}
.galerie__spur::-webkit-scrollbar { display: none; }
.galerie__spur:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 4px; }

.galerie__bild { scroll-snap-align: start; min-width: 0; }
/* Der Knopf ist nur Träger: er trägt keine eigene Gestalt, sondern zeigt
   mit dem Zeiger an, dass das Bild sich aufziehen lässt. */
.galerie__lupe {
  display: block; width: 100%; height: 100%; padding: 0;
  background: none; border: 0; cursor: zoom-in;
}
.galerie__lupe:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; }
.galerie__bild .platz, .galerie__bild .foto {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  border-radius: var(--kante);
}

/* Die Blätterleiste steht unten in der Spalte und ist so hoch wie ein Knopf
   (3,3rem) — damit liegt sie auf einer Linie mit „Anfrage senden" daneben. */
.galerie__steuer {
  margin-top: 1.1rem; min-height: 3.3rem;
  display: flex; align-items: center; gap: 1rem;
}
.galerie__pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  background: transparent; cursor: pointer;
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante); color: var(--nuss);
  transition: background var(--schnell) var(--weich),
              border-color var(--schnell) var(--weich),
              color var(--schnell) var(--weich);
}
.galerie__pfeil svg { width: 1.05rem; height: 1.05rem; }
.galerie__pfeil--zurueck svg { transform: rotate(180deg); }
.galerie__pfeil:hover:not([disabled]) {
  background: var(--leinen); border-color: var(--nuss); color: var(--nuss);
}
.galerie__pfeil[disabled] { opacity: .35; cursor: not-allowed; }

.galerie__punkte {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-right: auto;
}
.galerie__punkt {
  width: .5rem; height: .5rem; padding: 0; cursor: pointer;
  background: var(--ton-dunkel); border: 0;
  transform: rotate(45deg);
  transition: background var(--schnell) var(--weich),
              transform var(--mittel) var(--aus);
}
.galerie__punkt[data-hier='true'] {
  background: var(--kobalt); transform: rotate(45deg) scale(1.35);
}
.galerie__punkt:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; }

.galerie__zaehler {
  font-size: .78rem; font-weight: 560; color: var(--nuss-hell);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 34rem) {
  .galerie__punkte { display: none; }
  .galerie__zaehler { margin-right: auto; }
}

/* Drei Spalten, zwei Zeilen, alle Felder gleich breit — nebeneinander
   gesetzt ergaben die sechs Wörter sonst eine versetzte Treppe. */
.anlaesse {
  margin-top: 2rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.anlass {
  font-size: .75rem; font-weight: 560; letter-spacing: .045em;
  text-align: center;
  padding: .55rem .8rem;
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante);
  color: var(--nuss);
  background: var(--leinen);
}
@media (max-width: 58rem) {
  /* Einspaltig gibt es keine Textspalte mehr, an der sich die Höhe messen
     könnte — also bestimmt das Seitenverhältnis sie: Hochformat wie oben. */
  .feier__gitter { grid-template-columns: minmax(0, 1fr); }
  .galerie__spur { flex: none; min-height: 0; aspect-ratio: 4 / 5; }
  /* Über die ganze Breite würde das Hochformat auf dem Tablet höher als der
     Bildschirm. 30rem sind genug. */
  .galerie { max-width: 30rem; }
  .feier__tat { margin-top: 0; }
}
@media (max-width: 34rem) {
  .anlaesse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 14 · Anreise -------------------------------------------------------- */

.weg__gitter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
}
.skizze {
  width: 100%; height: auto;
  border: var(--haar) solid var(--ton-linie);
  background: var(--steinzeug);
  border-radius: var(--kante);
}
.skizze__note {
  margin-top: .8rem; font-size: .78rem; color: var(--nuss-hell);
}

/* Die rechte Spalte der Anreise: oben die gezeichnete Lage, darunter das
   Luftbild von Google, darunter rechts der Verweis dorthin. */
.weg__rechts > * + * { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* --- 14b · Die Karte ------------------------------------------------------
   Zwei Klicks: erst die Vorschau mit der Frage, dann erst Google. Vor dem
   Klick geht keine Anfrage nach außen — deshalb steht der <iframe> in
   einem <template> und nicht im Dokument.                                */

.karte { position: relative; }
.karte__vorschau, .karte__rahmen {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border: var(--haar) solid var(--ton-linie);
  border-radius: var(--kante);
}
/* Auf schmalen Geräten wird der Rahmen quadratisch. Google haelt den
   Mittelpunkt stets in der Rahmenmitte — ein flacher Rahmen wuerde auf dem
   Telefon zu wenig Umgebung zeigen. */
@media (max-width: 34rem) {
  .karte__vorschau, .karte__rahmen { aspect-ratio: 1 / 1; }
}
.karte__vorschau {
  display: grid; place-content: center; justify-items: center;
  gap: .9rem; padding: 2rem 1.5rem; text-align: center;
  background: var(--steinzeug);
  background-image:
    repeating-linear-gradient(135deg, transparent 0 13px,
      color-mix(in srgb, var(--ton-dunkel) 13%, transparent) 13px 14px);
}
.karte__pin { width: 1.8rem; height: 1.8rem; color: var(--nuss-hell); opacity: .7; }
.karte__frage {
  font-size: .86rem; line-height: 1.5; color: var(--nuss-hell);
  max-width: 34ch;
}
.karte__rahmen { border: var(--haar) solid var(--ton-linie); }
.daten { margin-top: 2rem; }
.daten li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 1rem; padding: 1.1rem 0;
  border-top: var(--haar) solid var(--ton-linie);
}
.daten li:last-child { border-bottom: var(--haar) solid var(--ton-linie); }
.daten svg { width: 1.2rem; height: 1.2rem; margin-top: .22rem; color: var(--nuss-hell); }
.daten__kopf { color: var(--nuss-hell); }
.daten__wert { margin-top: .3rem; font-size: 1rem; line-height: 1.5; }
.daten__wert a { text-decoration: none; font-weight: 560; }
.daten__wert a:hover { text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 58rem) { .weg__gitter { grid-template-columns: minmax(0, 1fr); } }

/* --- 15 · Anfrage -------------------------------------------------------- */

/* Der Abschnitt steht in einer Spalte: oben mittig die Ansprache, darunter
   das Formular über die ganze Bahn. Nebeneinander war das Formular schmal
   und die Felder standen gestapelt — quer liest es sich in einem Zug. */
.anfrage__kopf { max-width: 58rem; margin-inline: auto; text-align: center; }
.anfrage__sub {
  margin-top: 1.6rem; font-size: 1rem; line-height: 1.65;
  color: var(--nuss-hell);
}

.regeln { margin-top: 2rem; }
.regeln li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem;
  padding: .8rem 0; font-size: .93rem; line-height: 1.55;
  color: var(--nuss-hell);
  border-top: var(--haar) solid var(--ton-linie);
}
.regeln li::before {
  content: ''; width: .42rem; height: .42rem; margin-top: .58rem;
  background: var(--kobalt); transform: rotate(45deg);
}

.formular {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  background: var(--leinen);
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante-gross);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: var(--heben-2);
}
.formular__kopf { padding-bottom: 1.4rem; border-bottom: var(--haar) solid var(--ton-linie); }
.formular__kopf p { margin-top: .9rem; font-size: .85rem; color: var(--nuss-hell); }

.reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.reihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reihe--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feldgruppe { margin-top: 1.4rem; }
.feldgruppe--eng { margin-top: 1.1rem; }

.beschriftung { display: block; margin-bottom: .45rem; color: var(--nuss); }
.beschriftung .pflicht { color: var(--kobalt); }

.eingabe {
  width: 100%;
  background: var(--steinzeug);
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante);
  padding: .78rem .85rem;
  font-size: .95rem; font-weight: 400;
  color: var(--tinte);
  transition: border-color var(--schnell) var(--weich),
              background var(--schnell) var(--weich),
              box-shadow var(--schnell) var(--weich);
}
.eingabe::placeholder { color: #7d7263; }   /* 4,52:1 auf steinzeug */
.eingabe:hover { border-color: var(--nuss-hell); }
.eingabe:focus {
  outline: none; background: var(--leinen);
  border-color: var(--kobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kobalt) 18%, transparent);
}
.eingabe[aria-invalid='true'] { border-color: var(--fehler); }
textarea.eingabe { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
select.eingabe {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nuss) 50%),
    linear-gradient(135deg, var(--nuss) 50%, transparent 50%);
  background-position: right 1.05rem center, right .78rem center;
  background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat;
}
select.eingabe:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--kobalt) 50%),
    linear-gradient(135deg, var(--kobalt) 50%, transparent 50%);
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55;
  filter: sepia(1) saturate(.45) hue-rotate(340deg) brightness(.55);
  transition: opacity var(--schnell) var(--weich);
}
input[type='date']:hover::-webkit-calendar-picker-indicator,
input[type='time']:hover::-webkit-calendar-picker-indicator { opacity: .9; }
input[type='number']::-webkit-inner-spin-button { opacity: .5; }

.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- 15b · Aufenthaltsdauer ----------------------------------------------
   Fährt aus, sobald es um eine Feier, eine Gruppe oder ein Meeting geht.
   Ohne Skript steht der Regler von Anfang an da — er schadet nie.        */

/* Auf- und Zuklappen laeuft ueber [hidden] — der Endzustand haengt damit
   nie an einer Animation, die vielleicht nicht laeuft. Die Einblendung
   selbst ist ein einmaliger Uebergang aus [data-neu] heraus; bleibt der
   aus, steht das Feld eben sofort da. Ohne Skript ist es immer sichtbar. */
.dauer { margin-top: 1.5rem; }
.dauer[hidden] { display: none; }
.dauer__innen {
  opacity: 1; transform: none;
  transition: opacity var(--mittel) var(--weich),
              transform var(--mittel) var(--aus);
}
.dauer[data-neu='true'] .dauer__innen {
  opacity: 0; transform: translateY(-10px);
}

.dauer__innen > .beschriftung { margin-bottom: .7rem; }

/* Der Regler: 1 rem Polsterung links und rechts, der Griff ist 1,15 rem
   breit. Sein Mittelpunkt wandert damit von 1,575 rem bis Breite minus
   1,575 rem. Wert und Skala rechnen mit genau dieser Strecke — so steht die
   Zahl immer über dem Griff und die Skalenstriche genau unter ihm. */
.dauer__regler {
  --anteil: .4;
  position: relative;
  padding: 3rem 1rem .4rem;
  background: var(--steinzeug);
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante);
}
.dauer__wert {
  position: absolute; top: .7rem;
  left: calc(1.575rem + (100% - 3.15rem) * var(--anteil));
  /* Mittig über dem Griff, aber nie über den Kasten hinaus: ganz links
     steht die Zahl mit der linken Kante am Griff, ganz rechts mit der
     rechten — dazwischen wandert sie gleichmäßig durch die Mitte. */
  transform: translateX(calc(var(--anteil) * -100%));
  font-family: var(--anzeige); font-weight: 650;
  font-size: 1.32rem; letter-spacing: -.02em; color: var(--nuss);
  white-space: nowrap; pointer-events: none;
}

.dauer__skala {
  display: flex; justify-content: space-between;
  margin: .2rem 0 0;
  padding-inline: calc(.575rem - 1.1ch);
  font-size: .7rem; font-weight: 560; color: var(--nuss-hell);
  font-variant-numeric: tabular-nums;
}
.dauer__skala span { width: 2.2ch; text-align: center; }
.dauer__note { margin-top: .8rem; font-size: .82rem; color: var(--nuss-hell); }

/* Der Regler selbst. Vollständig gezeichnet: eine Schiene aus Ton, der
   gelaufene Teil in Kobalt, ein eckiger Griff mit 2 px Kante wie alles
   andere auf dieser Seite. --gelaufen setzt das Skript. */
.regler {
  --gelaufen: 40%;
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 3rem; margin: 0;
  background: transparent; cursor: pointer;
}
.regler:focus { outline: none; }

.regler::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg,
    var(--kobalt) 0 var(--gelaufen), var(--ton-dunkel) var(--gelaufen) 100%);
}
.regler::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.7rem; margin-top: -.73rem;
  border-radius: var(--kante);
  background: var(--leinen);
  border: 2px solid var(--kobalt);
  box-shadow: var(--heben-1);
  transition: border-color var(--schnell) var(--weich),
              box-shadow var(--schnell) var(--weich);
}
.regler:hover::-webkit-slider-thumb { border-color: var(--kobalt-tief); }
.regler:active::-webkit-slider-thumb { box-shadow: var(--heben-2); }
.regler:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--kobalt); outline-offset: 3px;
}

.regler::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--ton-dunkel);
}
.regler::-moz-range-progress {
  height: 4px; border-radius: 2px; background: var(--kobalt);
}
.regler::-moz-range-thumb {
  width: 1.15rem; height: 1.7rem;
  border-radius: var(--kante);
  background: var(--leinen);
  border: 2px solid var(--kobalt);
  box-shadow: var(--heben-1);
}
.regler:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--kobalt); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dauer__innen { transition: none; }
}

.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl label {
  display: inline-block; cursor: pointer;
  padding: .52rem 1rem;
  font-size: .8rem; font-weight: 500;
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante);
  background: var(--steinzeug); color: var(--nuss);
  transition: background var(--schnell) var(--weich),
              border-color var(--schnell) var(--weich),
              color var(--schnell) var(--weich);
}
.wahl label:hover { border-color: var(--nuss); }
.wahl input:checked + label {
  background: var(--wald); border-color: var(--wald); color: var(--leinen);
}
.wahl input:focus-visible + label { outline: 2px solid var(--kobalt); outline-offset: 2px; }

.haken { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem;
         align-items: start; margin-top: 1.6rem; }
.haken input {
  appearance: none; width: 1.5rem; height: 1.5rem; margin: .04rem 0 0;
  border: var(--haar) solid var(--ton-dunkel); border-radius: var(--kante);
  background: var(--steinzeug); cursor: pointer; flex: none;
  transition: background var(--schnell) var(--weich),
              border-color var(--schnell) var(--weich);
}
.haken input:checked {
  background: var(--kobalt) no-repeat center / .85rem .85rem;
  border-color: var(--kobalt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F2E8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.6 5.2 5.2L20 6.6'/%3E%3C/svg%3E");
}
.haken label { font-size: .85rem; line-height: 1.5; color: var(--nuss-hell); cursor: pointer; }

.formular__fuss {
  margin-top: 1.8rem; padding-top: 1.5rem;
  border-top: var(--haar) solid var(--ton-linie);
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.formular__fuss .knopf { flex: 0 0 auto; }

.meldung {
  margin-top: 1.2rem; padding: .95rem 1.1rem;
  border-radius: var(--kante);
  font-size: .89rem; line-height: 1.5;
  border-left: var(--haar) solid;
}
.meldung[hidden] { display: none; }
.meldung--gut { background: color-mix(in srgb, var(--wald) 10%, var(--leinen));
                border-color: var(--wald); color: var(--wald-tief); }
.meldung--schlecht { background: color-mix(in srgb, var(--fehler) 8%, var(--leinen));
                     border-color: var(--fehler); color: var(--fehler); }
.honig { position: absolute; left: -9999px; opacity: 0; }

@media (max-width: 58rem) {
  .reihe--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  /* Auf dem Telefon steht alles untereinander. */
  .reihe, .reihe--drei, .reihe--vier { grid-template-columns: minmax(0, 1fr); }
  .formular__fuss { flex-direction: column-reverse; align-items: stretch; }
  .formular__fuss .knopf { width: 100%; }
}

/* --- 16 · Fuß ------------------------------------------------------------ */

.fuss {
  background: var(--wald-tief); color: var(--ton);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
  font-size: .89rem;
}
.fuss__gitter {
  display: grid;
  /* Vier Spalten: links die Marke mit Anschrift, Kontakt und Knopf — sie
     trägt am meisten und bekommt deshalb das Anderthalbfache. Rechts
     daneben Social Media (schmal, nur zwei Zeichen), Jobs (ein Satz,
     braucht Zeilenlänge) und die Öffnungszeiten. */
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
}
/* Ein Takt für die ganze Fußzeile: 1,1rem zwischen zwei Blöcken, egal ob
   nach einer Versalzeile, nach der Wortmarke oder nach der Anschrift. */
.fuss { --fuss-takt: 1.1rem; }
.fuss__kopf { color: var(--leinen); margin-bottom: var(--fuss-takt); }
/* Alle Zeilen der Fußzeile laufen im selben Zeilenabstand — auch die
   verlinkten. 1,7 × 0,89rem sind 24,2 px, der Anfassbereich ist damit auch
   ohne zusätzliche Polsterung groß genug. Vorher standen Rufnummer und
   E-Mail um 10 px weiter auseinander als die Zeilen daneben. */
.fuss__liste { line-height: 1.7; }
.fuss__liste a { display: inline-block; min-height: 1.5rem; }
.fuss__unten a {
  display: inline-block; padding-block: .28rem; min-height: 1.5rem;
}
.fuss a { text-decoration: none; transition: color var(--schnell) var(--weich); }
.fuss a:hover { color: var(--leinen); text-decoration: underline;
                text-underline-offset: .2em; }
.fuss__marke .marke__wort { font-size: 1.5rem; }
.fuss__adresse { margin-top: var(--fuss-takt); line-height: 1.7; }
.fuss__liste--marke { margin-top: var(--fuss-takt); }
.fuss__satz { line-height: 1.7; max-width: 32ch; }
/* Im Fließtext muss der Verweis als solcher zu sehen sein — in den Listen
   darüber trägt ihn die Stelle, hier nicht. */
.fuss__satz a { text-decoration: underline; text-underline-offset: .2em; }

/* Facebook und Instagram: nur das Zeichen, kein Rahmen.
   Die Höhe des Anfassbereichs ist bewusst dieselbe wie beim Knopf daneben
   (.knopf: .95rem Polsterung oben und unten plus .78rem Zeile ≈ 3.29rem).
   Wer die Knopfpolsterung ändert, sollte diesen Wert mitziehen. */
.fuss__sozial {
  display: flex; gap: .3rem; margin-left: -.55rem;
  /* Der Anfassbereich ist 3,29rem hoch, das Zeichen darin 2,1rem — oben
     bleiben also 0,6rem Luft. Die wird abgezogen, damit das Zeichen auf
     derselben Höhe sitzt wie die Schrift in den Spalten daneben. */
  margin-top: calc(var(--fuss-takt) - 1.7rem);
}
.fuss__sozial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.29rem; height: 3.29rem;
  color: var(--ton);
  transition: color var(--schnell) var(--weich),
              transform var(--schnell) var(--weich);
}
.fuss__sozial a:hover { color: var(--leinen); }
.fuss__sozial a:active { transform: translateY(1px); }
.fuss__sozial svg { width: 2.1rem; height: 2.1rem; stroke-width: 1.5; }
.fuss__unten {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: var(--haar) solid var(--wald-hell);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .78rem; color: color-mix(in srgb, var(--ton) 82%, var(--wald-tief));
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }

@media (max-width: 74rem) {
  /* Nebeneinander wird es zu eng. Die Marke legt sich über die ganze
     Breite, darunter stehen die drei Kästen gleichmäßig — das ist
     symmetrischer, als sie um die Marke herum zu stapeln. */
  .fuss__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; margin-bottom: 1.4rem; }
}
@media (max-width: 62rem) {
  .fuss__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 34rem) {
  .fuss__gitter { grid-template-columns: minmax(0, 1fr); }
  .fuss__marke { grid-column: auto; }
}

/* --- 17 · Speisekarte ---------------------------------------------------- */

.karte-kopf {
  background: var(--wald-tief); color: var(--leinen);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative; overflow: hidden; isolation: isolate;
}
.karte-kopf .bahn { position: relative; z-index: 2; }
.karte-kopf h1 { margin-top: 1.2rem; }
.karte-kopf p { margin-top: 1.3rem; max-width: 46ch; color: var(--ton); }
.karte-nav {
  position: sticky; top: 4.5rem; z-index: 60;
  background: var(--wald); border-bottom: var(--haar) solid var(--wald-linie);
}
.karte-nav ul {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  padding-inline: var(--rand);
  max-width: var(--bahn); margin-inline: auto;
}
.karte-nav ul::-webkit-scrollbar { display: none; }
.karte-nav a {
  display: block; white-space: nowrap; text-decoration: none;
  padding: .95rem 1.05rem;
  font-size: .69rem; font-weight: 620; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ton);
  border-bottom: 2px solid transparent;
  transition: color var(--schnell) var(--weich),
              border-color var(--schnell) var(--weich);
}
.karte-nav a:first-child { padding-left: 0; }
.karte-nav__teiler {
  align-self: center; flex: none; margin-inline: .9rem;
  width: var(--haar); height: 1.1rem; background: var(--wald-linie);
}
.karte-nav a:hover { color: var(--leinen); }
.karte-nav a[data-hier='true'] { color: var(--leinen); border-bottom-color: var(--messing); }

/* Auf einem Schirm, der breit genug ist, stehen alle zwoelf Rubriken
   nebeneinander — nichts rutscht nach links hinaus, und die Leiste muss
   sich beim Blaettern nicht mehr mitbewegen.
//
   Das Mitfuehren schaltet sich dadurch von selbst ab: goetheruh.js steigt
   aus, sobald `scrollWidth - clientWidth` null ist. Es bleibt genau dort,
   wo es gebraucht wird — auf dem Telefon, wo die Leiste nicht auf einmal
   ins Bild passt und man sonst nicht sieht, in welchem Teil der Karte man
   liest. `overflow-x: auto` bleibt deshalb stehen: kaeme je eine Rubrik
   dazu, waere die Leiste wieder schiebbar statt abgeschnitten.

   Die Schwellen sind gemessen, nicht geschaetzt. Die zwoelf Namen samt
   Laufweite und Luecken brauchen 1243 px in der kompakten und 1404 px in
   der vollen Stufe; darum greift die eine ab 1280, die andere ab 1440. */
@media (min-width: 80rem) {
  .karte-nav ul {
    max-width: none;
    padding-inline: 1.5rem;
    gap: 18px;
    justify-content: space-between;
  }
  .karte-nav a {
    padding-inline: 0;
    font-size: .62rem; letter-spacing: .11em;
  }
  .karte-nav a:first-child { padding-left: 0; }
  .karte-nav__teiler { margin-inline: 0; }
}

@media (min-width: 90rem) {
  .karte-nav ul { padding-inline: 2rem; gap: 20px; }
  .karte-nav a { font-size: .69rem; letter-spacing: .12em; }
}

.karte-blatt {
  background: var(--wald-tief); color: var(--leinen);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
}
.karte-gruppe {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--leinen);
  padding-bottom: 1.1rem; margin-bottom: 2.6rem;
  border-bottom: 2px solid var(--messing);
}
.karte-gruppe + .karte-spalten { margin-top: 0; }
.karte-gruppe--zwei { margin-top: clamp(3rem, 5vw, 4.5rem); }

.karte-spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.rubrik { margin-bottom: clamp(2.8rem, 5vw, 4rem); }
/* Die letzte Rubrik einer Spalte schleppt keinen Abstand hinter sich her —
   den Abschluss setzt der Block darunter. */
.karte-spalte > .rubrik:last-child { margin-bottom: 0; }
.rubrik__titel {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--leinen);
  padding-bottom: .9rem;
  border-bottom: var(--haar) solid var(--wald-linie);
}
.rubrik__note { margin-top: .9rem; font-size: .82rem; color: var(--ton); }

.gericht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0 1rem;
  align-items: baseline;
  padding: .78rem 0;
  border-bottom: var(--haar) solid color-mix(in srgb, var(--wald-linie) 55%, transparent);
}
.gericht__name { font-size: .98rem; font-weight: 420; line-height: 1.4; }
.gericht__mass {
  font-size: .84rem; color: var(--ton);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  min-width: 2.4rem; text-align: right;
}
.gericht__preis {
  font-size: .95rem; font-weight: 580; color: var(--messing);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  min-width: 3.6rem; text-align: right;
}
.gericht__dazu {
  grid-column: 1 / -1; margin-top: .28rem;
  font-size: .82rem; line-height: 1.45; color: var(--ton);
}
.veg {
  display: inline-block; vertical-align: -.14em; margin-left: .45rem;
  width: .88rem; height: .88rem; color: var(--messing);
}
/* Der Abschluss der Karte: eine Linie, darunter Hinweise und Handlungen
   in einer Kadenz, die sich aus derselben Skala speist wie der Rest. */
.karte-schluss {
  margin-top: clamp(2.5rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 2.4vw, 1.75rem);
  border-top: var(--haar) solid var(--wald-linie);
}
.karte-legende {
  display: flex; flex-wrap: wrap; gap: .7rem 2.25rem;
  font-size: .8rem; line-height: 1.5; color: var(--ton);
}
.karte-legende span { display: inline-flex; align-items: center; gap: .5rem; }

.karte-tat {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.karte-stand {
  margin-top: 1rem; font-size: .78rem; color: var(--ton);
  font-variant-numeric: tabular-nums;
}
.karte-stand[hidden] { display: none; }

@media (max-width: 58rem) {
  .karte-spalten { grid-template-columns: minmax(0, 1fr); }
  .karte-spalte > .rubrik:last-child { margin-bottom: clamp(2.8rem, 5vw, 4rem); }
  .karte-spalte:last-child > .rubrik:last-child { margin-bottom: 0; }
}
@media (max-width: 34rem) {
  .karte-tat { flex-direction: column; align-items: stretch; }
}

/* --- 18 · Rechtstexte ---------------------------------------------------- */

.rechtstext { max-width: 42rem; }
.rechtstext h2 { margin-top: clamp(2.5rem, 4vw, 3.5rem); color: var(--nuss); }
.rechtstext h3 { margin-top: 2rem; color: var(--nuss); }
.rechtstext p, .rechtstext ul { margin-top: 1rem; }
.rechtstext ul { padding-left: 1.2rem; list-style: disc; }
.rechtstext li { margin-top: .4rem; }
.rechtstext dl { margin: 1rem 0 0; }
.rechtstext dt { font-weight: 620; margin-top: 1rem; color: var(--nuss); }
.rechtstext dd { margin: .2rem 0 0; }

/* --- 19 · Auftritt: einmal, ruhig, aus sichtbarem Grundzustand ----------- */

@media (prefers-reduced-motion: no-preference) {
  .js .auf {
    opacity: .001;
    transform: translateY(14px);
    transition: opacity var(--lang) var(--aus), transform var(--lang) var(--aus);
  }
  .js .auf[data-da='true'] { opacity: 1; transform: none; }
  .js .auf:nth-child(2) { transition-delay: 70ms; }
  .js .auf:nth-child(3) { transition-delay: 140ms; }
}

/* --- 24 · Druck und PDF --------------------------------------------------
   Aus dieser Ansicht entsteht auch karte/speisekarte.pdf. Sie traegt die
   Farben des Hauses, aber auf hellem Grund: eine Karte, die man ausdrucken
   und auf den Tisch legen kann. Messing wird dafuer abgedunkelt — #C08A2E
   erreicht auf Leinen nur 2,72 : 1, #7A5310 erreicht 6,13 : 1.          */

@media print {
  @page { size: A4; margin: 15mm 13mm 14mm; }

  :root { --druck-messing: #7A5310; }

  .kopf, .karte-nav, .sprung, .textur, .knopf, .weiter,
  .karte-tat, .karte-stand, .fuss { display: none !important; }
  /* Auch die Legende am Fuss: ihre fuenf Angaben stehen beim Druck schon
     in der Kopfzeile aus .nur-druck. Seit die Preisangabe und der
     Aenderungsvorbehalt vom Kopf nach unten gewandert sind, stuenden sie
     sonst zweimal auf dem Blatt. */
  .karte-legende { display: none !important; }

  html, body, .karte-blatt, .karte-kopf {
    background: var(--leinen) !important;
    color: var(--tinte) !important;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .bahn { max-width: none; padding-inline: 0; }

  .karte-kopf { padding-block: 0 4mm; }
  .karte-kopf h1 { color: var(--wald-tief) !important; font-size: 19pt;
                   margin-top: 0; }
  /* Die Angaben stehen schon in .nur-druck — nicht doppelt. */
  .karte-kopf > .bahn > p { display: none; }

  .nur-druck { display: block !important; margin-top: 2mm; }
  /* Ohne das erbt der Absatz die 46ch aus der Bildschirmansicht und bricht
     siebenzeilig um — das kostet eine ganze Seite. */
  .nur-druck p { font-size: 8pt; line-height: 1.45; color: var(--nuss-hell);
                 max-width: none !important; }
  .nur-druck p + p { margin-top: 1mm; }

  .karte-blatt { padding-block: 0; }
  .karte-gruppe {
    color: var(--wald-tief) !important; font-size: 13pt;
    border-bottom-color: var(--nuss) !important;
    padding-bottom: 1.6mm; margin-bottom: 4mm;
  }
  .karte-gruppe--zwei { margin-top: 0; break-before: page; }

  /* Im Druck fliesst die Karte im Zeitungssatz statt im festen Raster:
     nur so fuellen sich die Seiten dicht, und der Umbruch ueber mehrere
     Blaetter funktioniert. Die feste Spaltenaufteilung des Bildschirms
     wird dafuer aufgeloest. */
  .karte-spalten {
    display: block !important;
    columns: 2; column-gap: 8mm; column-fill: auto;
  }
  .karte-spalte { display: contents; }
  .rubrik { break-inside: avoid; margin-bottom: 4mm !important; }
  .rubrik__titel {
    break-after: avoid;
    color: var(--wald-tief) !important; font-size: 10pt;
    border-bottom-color: var(--ton-dunkel) !important; padding-bottom: 1.2mm;
  }
  .rubrik__note, .gericht__dazu, .gericht__mass {
    color: var(--nuss-hell) !important; font-size: 7.5pt;
  }
  .gericht { padding: 1.15mm 0; border-bottom-color: var(--ton-linie) !important; }
  .gericht__name { color: var(--tinte) !important; font-size: 8.6pt;
                   line-height: 1.3; }
  .gericht__preis {
    color: var(--druck-messing) !important; font-size: 8.6pt; font-weight: 620;
  }
  .gericht__dazu { margin-top: .3mm; line-height: 1.3; }
  .veg { color: var(--druck-messing) !important; }

  /* Die Hinweise stehen im Druck oben im Kopf — der Abschlussblock mit
     Legende und Knöpfen würde sonst eine dritte, fast leere Seite
     erzwingen. */
  .karte-schluss { display: none !important; }

  /* Rechtstexte und Startseite drucken schlicht. */
  .feld--wald, .erst, .band { background: var(--leinen) !important;
                              color: var(--tinte) !important; }
  .platz, .skizze, .zeichen { display: none !important; }
}

/* Nur im Druck sichtbar. */
.nur-druck { display: none; }


/* --- 20 · Zeichenvorrat -------------------------------------------------- */
/* Ein Duktus für alles: 1,6 px, runde Enden, kein Flächensymbol. */

.ikon {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.zeichen {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.veg { stroke-width: 1.8; }

/* --- 21 · Öffnungszeiten auf hellem Grund -------------------------------- */

.zeiten__tag { margin-top: 2.5rem; color: var(--kobalt); font-size: 1.05rem; }
.uhrzeit--hell { color: var(--nuss); margin-top: 1rem; }
.zeiten__note--hell { color: var(--nuss-hell); }

.merk--wald {
  background: var(--wald-tief); border-color: var(--wald-tief);
  color: var(--leinen); box-shadow: var(--heben-2);
  position: relative; overflow: hidden; isolation: isolate;
}
.merk--wald h3 { color: var(--leinen); }
.merk--wald p { color: var(--ton); }
/* Nur der Inhalt wird angehoben — die Textur muss absolut im Hintergrund
   liegen bleiben. Ohne das :not() überschrieb diese Regel ihr
   position:absolute, und die Grafik schob den Text nach unten. */
.merk--wald > *:not(.textur) { position: relative; z-index: 2; }
.merk__ruf {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-family: var(--anzeige); font-weight: 650;
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.75rem);
  letter-spacing: -.02em; color: var(--messing);
  font-variant-numeric: tabular-nums;
}
.merk__ruf svg { width: 1.15rem; height: 1.15rem; opacity: .85; }
.merk__ruf:hover { color: var(--apfelwein); }

/* --- 22 · Lageskizze ----------------------------------------------------- */

.skizze__weg {
  fill: none; stroke: var(--nuss-hell); stroke-opacity: .5;
  stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9;
}
/* Der Wendelsweg: ein breiter heller Strich mit einer Mittellinie darauf,
   am Knoten ein Kreisel aus demselben Material. */
.skizze__strasse {
  fill: none; stroke: var(--leinen); stroke-width: 15;
  stroke-linecap: round;
}
.skizze__strasse-kreisel { fill: var(--leinen); }
.skizze__strasse-mitte {
  fill: none; stroke: var(--nuss-hell); stroke-opacity: .45;
  stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 9 11;
}
.skizze__kreisel-insel { fill: var(--wald); fill-opacity: .5; }
/* Das Heckenlabyrinth: eine Hecke, deshalb kräftig und mit runden Ecken. */
/* Waldwege: schmaler als die Strassen, ohne Mittellinie. */
.skizze__waldweg {
  fill: none; stroke: var(--leinen); stroke-opacity: .72;
  stroke-width: 5; stroke-linecap: round;
}
/* Die Parkmöglichkeiten. */
.skizze__p rect { fill: var(--kobalt); }
.skizze__p text {
  font-family: var(--grotesk); font-size: 16px; font-weight: 700;
  letter-spacing: 0; fill: var(--leinen);
}
/* Der Wald steht als Fläche, nicht als Umriss: die drei Kreise einer Krone
   überlappen sich, deshalb liegt die Durchsicht auf der Gruppe und nicht auf
   den einzelnen Formen — sonst würden die Überschneidungen dunkler. */
.skizze__wald { fill: var(--wald); stroke: none; }
.skizze__baum { opacity: .26; }
.skizze__flaeche {
  fill: var(--wald); fill-opacity: .1;
  stroke: var(--wald); stroke-opacity: .3; stroke-width: 1.4;
}
.skizze__spiel {
  fill: none; stroke: var(--wald); stroke-opacity: .62;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.skizze__turm {
  fill: none; stroke: var(--nuss); stroke-opacity: .78;
  stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
}
/* Streben und Geländerstäbe tragen nicht, sie füllen — also dünner. */
.skizze__strebe { stroke-width: 1.3; stroke-opacity: .55; }
.skizze__haus {
  fill: var(--leinen); stroke: var(--nuss); stroke-opacity: .82;
  stroke-width: 2; stroke-linejoin: round;
}
.skizze__pfeil {
  fill: none; stroke: var(--nuss-hell); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.skizze__schrift {
  font-family: var(--grotesk);
  font-size: 12px; font-weight: 620; letter-spacing: .13em;
  text-transform: uppercase;
  fill: var(--nuss-hell);
}
.skizze__schrift--stark {
  font-size: 16px; letter-spacing: .1em; fill: var(--kobalt); font-weight: 700;
}
.skizze__schrift--leise { font-size: 10.5px; opacity: .78; letter-spacing: .1em; }

/* Auf dem Telefon ist die Skizze nur noch gut 330 px breit. Die Schrift wird
   in Zeichenmaßen angegeben und schrumpft mit — also hier gegensteuern und
   die reine Beiwerkzeile weglassen. */
@media (max-width: 34rem) {
  .skizze__schrift { font-size: 16px; }
  .skizze__schrift--stark { font-size: 20px; }
  .skizze__schrift--leise { font-size: 13px; }
  .skizze__kopfzeile { display: none; }
}

/* --- 23 · Kleinigkeiten -------------------------------------------------- */

.karte-nav ul { list-style: none; margin: 0; }
.rubrik ul { margin-top: .2rem; }
.rubrik li:last-child { border-bottom: 0; }
.gericht__name .veg { color: var(--messing); }
.formular fieldset { min-width: 0; }

/* ============================================================================
   Die Lupe · ein Bild der Galerie im Großformat
   Derselbe waldgrüne Schleier wie bei der Tagesabsage. Das Bild bekommt die
   ganze Fläche, die der Bildschirm hergibt; geschlossen wird über den Knopf,
   den Schleier und Escape.
   ========================================================================= */

.lupe {
  position: fixed; inset: 0; z-index: 110;
  display: grid; grid-template-rows: 1fr auto;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(24, 42, 31, .88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: zutafel-auf .24s cubic-bezier(.2, .7, .3, 1) both;
}
.lupe[data-ruhig] { animation: none; }

.lupe__blatt {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 0; height: 100%;
}
.lupe__blatt img, .lupe__blatt .platz {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--kante);
  box-shadow: var(--heben-dunkel);
}
.lupe__blatt .platz {
  width: min(32rem, 100%); aspect-ratio: 4 / 5; height: auto;
  /* Der Platzhalter ist sonst durchsichtig und die Seite schiene durch. */
  background-color: var(--wald-tief);
  border-color: var(--wald-linie); color: var(--ton);
}

.lupe__fuss {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
  color: var(--ton);
}
.lupe__zaehler {
  font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 5ch;
  text-align: center;
}

.lupe__knopf, .lupe__zu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: none;
  background: transparent; cursor: pointer;
  border: var(--haar) solid var(--wald-linie);
  border-radius: var(--kante); color: var(--leinen);
  transition: background var(--schnell) var(--weich),
              border-color var(--schnell) var(--weich);
}
.lupe__knopf:hover:not([disabled]), .lupe__zu:hover {
  background: rgba(247, 242, 232, .12); border-color: var(--ton);
}
.lupe__knopf[disabled] { opacity: .3; cursor: not-allowed; }
.lupe__knopf svg, .lupe__zu svg { width: 1.15rem; height: 1.15rem; }
.lupe__knopf--zurueck svg { transform: rotate(180deg); }

.lupe__zu { position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: clamp(1rem, 3vw, 2.5rem); }

@media (max-width: 34rem) {
  .lupe__knopf, .lupe__zu { width: 2.75rem; height: 2.75rem; }
}

/* ============================================================================
   Tagesabsage · die Einblendung „heute geschlossen"
   Kein graues Rechteck: der Schleier ist Waldgrün, das Blatt Leinen, die
   Schrift die der Seite. Wegklickbar über den Knopf, den Schleier und Escape.
   ========================================================================= */

.zutafel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--rand);
  background: rgba(24, 42, 31, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: zutafel-auf .28s cubic-bezier(.2, .7, .3, 1) both;
}
.zutafel[data-ruhig] { animation: none; }

@keyframes zutafel-auf { from { opacity: 0; } to { opacity: 1; } }

.zutafel__blatt {
  width: min(30rem, 100%);
  background: var(--leinen);
  border: var(--haar) solid var(--ton-dunkel);
  border-radius: var(--kante-gross);
  box-shadow: var(--heben-dunkel);
  padding: var(--r5) var(--r4) var(--r4);
  text-align: center;
}

.zutafel__kopf {
  font-family: var(--anzeige);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2rem);
  line-height: 1.15;
  color: var(--nuss);
  margin: 0;
  text-wrap: balance;
}

.zutafel__text {
  font-family: var(--grotesk);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--nuss-hell);
  margin: var(--r2) auto var(--r4);
  max-width: 30ch;
}

.zutafel__weg { min-width: 12rem; }

/* Speisekarte als PDF — steht nur da, wenn das Portal eine hinterlegt hat. */
.karte-pdf { margin-top: 1.4rem; }

/* Vergrößerter Bildausschnitt aus dem Portal: Der Rahmen beschneidet,
   das Bild darin ist skaliert. Ohne Vergrößerung steht das Bild allein. */
.ausschnitt { display: block; overflow: hidden; border-radius: var(--kante); }
.ausschnitt img { width: 100%; height: 100%; object-fit: cover; }