/*
 * Die öffentliche Seite — Gestaltung. Die Farben stammen aus den
 * Stylesheets der alten Website, damit die neue nicht wie ein
 * Fremdkörper aussieht.
 */

/*
 * Die Schriftdeklaration steht in schriften/schrift.css, mit den
 * unicode-range-Angaben je Schnitt: Sie hier zu wiederholen hieße, sie
 * zweimal zu pflegen.
 */
@import url('/schriften/schrift.css');

:root {
  --grund:        #14150f;
  --grund-2:      #1e2018;
  --flaeche:      #262920;
  --linie:        #3a3e31;
  --linie-stark:  #565c49;

  --text:         #e8e6e1;
  --text-2:       #b9b5aa;
  /* Gerechnet gegen die HELLSTE Stelle des Verlaufs (#2a2d22), nicht
     gegen Schwarz: Dort ist der Kontrast am schlechtesten, und dort
     steht der Fusstext. #8f8b80 kam auf 4,12:1 und faellt damit unter
     die 4,5:1, die lesbar heissen. */
  --text-3:       #a5a195;

  --gruen:        #acd904;   /* Hellgruen der alten Seite */
  --gruen-satt:   #7ba003;
  --gold:         #c09100;
  --warnung:      #ff8f6b;
  --warnung-grund:#3a1f18;

  --rund:         10px;      /* wie die Inhaltsflaeche der alten Seite */
  --rund-klein:   6px;
  --tippziel:     2.75rem;   /* 44 px — die kleinste Flaeche, die ein
                                Finger sicher trifft */
}

/* Die Schriftdeklaration steht in schriften/schrift.css, mit den
   unicode-range-Angaben je Schnitt. Sie hier zu wiederholen hiesse, sie
   zweimal zu pflegen — und beim naechsten Schnitt eine davon zu
   vergessen. */
*, *::before, *::after { box-sizing: border-box; }

/*
 * „hidden" heißt versteckt — auch hier. Die Vorgabe `display: none` des
 * Browsers ist die schwächste Regel im Feld.
 */
[hidden] { display: none !important; }

/* Ein Sprungziel darf nicht unter dem klebenden Kopf landen. */
/* Klebend ist nur die schmale Leiste mit Menue und Knopf (62 px
   nachgemessen, in jeder Breite gleich) — das Logoband rollt weg.
   Deshalb genuegt EIN Wert, und er ist klein. */
html { scroll-padding-top: 4.75rem; }


/*
 * --- Der Grund: Verlauf und Hopfenranken ---
 * Das Rezept stammt wörtlich aus der alten Seite (custom.css).
 */

body {
  margin: 0;
  background: var(--grund) linear-gradient(#000000, #2a2d22) fixed;
  color: var(--text);
  font: 300 1.0625rem/1.65 'Open Sans', system-ui, -apple-system, sans-serif;
  /* Zwei Zeilen, nicht eine dreiwertige: Ein Browser, der env() nicht
     kennt, verwirft die GANZE Deklaration — und dann klebt die Karte
     bei 320 px randlos an beiden Seiten. So bleibt wenigstens der
     seitliche Rand. */
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Der Fuss gehoert ans Ende der SEITE, nicht ans Ende des Textes.
     Auf einer kurzen Seite hing er sonst mitten im Bild, und darunter
     stand ein halber Schirm Hopfen ohne Inhalt. */
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/*
 * Die Ranken liegen auf zwei eigenen Elementen, nicht auf dem
 * Körperhintergrund: Der Inhaltskasten ist zu 80 % schwarz, und eine
 * leuchtende Dolde schimmerte hindurch.
 */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  /*
   * Die Breite wächst mit dem Rand, nicht mit dem Bild: Fest gesetzt
   * reichte die Ranke bei 1600 px Fensterbreite 250 px in die
   * Inhaltsfläche hinein.
   */
  width: min(464px, max(180px, calc((100vw - 74rem) / 2 + 40px)));
  height: min(1600px, 100vh);
  background-image: url('/gestaltung/bilder/hopfen.webp');
  background-repeat: no-repeat;
  /* `contain` und nicht die feste Bildbreite: Beschnitten endete die
     Ranke an einer senkrechten Kante mitten im Blatt, und das sah aus
     wie ein Darstellungsfehler. Vollstaendig und kleiner ist besser
     als gross und abgeschnitten. */
  background-size: contain;
  /*
   * Deckkraft 0,85: Bei 0,5 wirkte die Ranke fast schwarz, ganz ohne
   * Dämpfung steht sie zu hell.
   */
  opacity: .85;
}
/* Rechts oben, links unten — genau wie im Original. Auf der
   Startseite liegt die rechte zunaechst hinter dem Startbild und
   kommt beim Scrollen hervor; auf jeder Unterseite steht sie sofort
   da. */
body::before { right: 0; top: 0; background-position: right top; }
body::after  { left: 0;  bottom: 0; background-position: left bottom; }

/*
 * Erst auf dem Telefon treten sie ab. Die Grenze lag einmal bei 1400
 * Punkten — damit war auf jedem Tablet nichts mehr von der Ranke zu
 * sehen.
 */
@media (max-width: 599px) {
  body::before, body::after { display: none; }
}

/* Wer wenig Datenvolumen hat, bekommt keine 145 KB Zierrat. */
@media (prefers-reduced-data: reduce) {
  body::before, body::after { display: none; }
}

/*
 * Nur für Vorleseprogramme. clip-path und nicht display:none: Was nicht
 * dargestellt wird, bekommt keinen Fokus und wird übersprungen.
 */
/*
 * Nur für Vorleseprogramme sichtbar. Achtung: Das Element steht
 * absolut, sein Bezugsrahmen ist der nächste positionierte Vorfahre.
 */
.nurlesbar {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/*
 * Die Vorkehrung: Jeder Kasten, in dem ein versteckter Text vorkommt,
 * fängt ihn selbst ein.
 */
.knopf, .kontaktkachel, .tabellenrahmen { position: relative; }

a { color: var(--gruen); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 2px;
}


/*
 * --- Der Sprung an den Inhalt ---
 * Wer mit der Tastatur arbeitet, müsste sonst auf jeder Seite durch das
 * ganze Menü tabben.
 */

.sprungmarke {
  position: absolute; left: .5rem; top: .5rem; z-index: 50;
  padding: .6rem 1rem; border-radius: var(--rund-klein);
  background: var(--gruen); color: #14150f; font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.sprungmarke:focus { transform: translateY(0); }


/*
 * --- Kopf ---
 * Zwei Teile, und die Trennung ist der ganze Punkt: Das Logoband rollt
 * beim Scrollen weg, die Menüleiste klebt.
 */

/*
 * Klebend ist der <header>, und er liegt direkt im Körper: Ein
 * `position: sticky` klebt nur innerhalb seines Elternkastens.
 */
.kopf { position: sticky; top: 0; z-index: 30; }

.kopfband { background: rgba(0, 0, 0, .55); }
.kopfband__in {
  display: flex; justify-content: center;
  padding: 1.25rem 1rem .75rem;
}
.marke--voll .marke__bild {
  width: 400px; max-width: 100%; height: auto;
  /* Das Logo ist hell auf dunkel gezeichnet und braucht keinen Filter. */
}

.kopf__in {
  background: rgba(0, 0, 0, .82);
  border-bottom: 1px solid var(--linie);
  padding: .45rem 1rem;
  display: flex; align-items: center; justify-content: center;
}
/* Weichzeichnen nur, wo der Browser es kann — sonst bliebe die Leiste
   halbdurchsichtig ueber scharfem Text stehen, und das liest sich
   schlecht. */
@supports (backdrop-filter: blur(8px)) {
  .kopf__in { background: rgba(0, 0, 0, .68); backdrop-filter: blur(10px); }
}
/* Die zweite Zeile klebt mit — sie gehoert zum Kopf und ist die
   Navigation des Bereichs, in dem man gerade steht. */

.marke { display: flex; align-items: center; text-decoration: none; }
.marke:focus-visible { outline: 2px solid var(--gruen); outline-offset: 4px; }
/* Die Schriftzeile gibt es nur auf schmalen Geraeten — dort steht sie
   statt des grossen Logos (siehe unten). */
.marke--zeile { display: none; }


/* Der Reservierungsknopf im Kopf ist weg (Wunsch des Betriebs). Der
   Weg zum Formular fuehrt ueber den Menuepunkt „Reservierung" — so wie
   auf der alten Seite auch. Die Leiste traegt damit nur noch das
   Menue, und das steht mittig. */


/*
 * Das Menü: waagerecht, ohne Aufklappen. Sechs Punkte passen auf jedes
 * Gerät, wenn man sie schieben lässt.
 */
.menue { min-width: 0; max-width: 100%; }
.menue__liste {
  display: flex; gap: 0 1.75rem;
  margin: 0; padding: 0; list-style: none;
  /*
   * Schieben statt Umbrechen: Ein umbrechendes Menü macht die Leiste
   * mal ein-, mal zweizeilig, und der Inhalt darunter springt. Ab 900
   * Punkten wird daraus `overflow: visible`.
   */
  overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.menue__punkt { padding: 0; }
.menue__link {
  display: inline-block; padding: .55rem 0; white-space: nowrap;
  color: var(--text); text-decoration: none;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
}
.menue__link:hover { color: var(--gruen); }
.menue__link.ist-hier { color: var(--gruen); border-bottom-color: var(--gruen); }

/*
 * --- Das Untermenü ---
 * Es klappt unter seinem Hauptpunkt auf.
 */

/*
 * Wo das Untermenü hängt, hängt von der Breite ab. Der Grund ist
 * `overflow`: `.menue__liste` trägt auf schmalen Geräten `overflow-x:
 * auto`.
 */
.kopf__in { position: relative; }

/* Beschriftung und Klapp-Knopf bleiben auf EINER Zeile. Ohne diese
   Regel sind sie zwei Inline-Kaesten in einem schmalen Flex-Element und
   brechen um — auf dem Telefon standen die Pfeile in einer eigenen
   Zeile unter den Woertern, ohne erkennbaren Bezug. */
.menue__punkt { display: flex; align-items: center; white-space: nowrap; }

/* Der Klapp-Knopf. `hidden` bis das Skript ihn freigibt — ein Knopf,
   der nichts tut, ist schlimmer als keiner. */
.menue__klapp {
  /*
   * Der Pfeil ist klein, die Trefferfläche nicht: 44 Punkte sind die
   * kleinste Fläche, die ein Finger sicher trifft.
   */
  min-width: 2rem; min-height: var(--tippziel);
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; margin-left: .1rem;
  color: var(--text-2); cursor: pointer; font-size: .7rem; line-height: 1;
}
.menue__klapp:hover { color: var(--gruen); }
.menue__klapp[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }

.untermenue {
  list-style: none; margin: 0; padding: 0;
}
.menue__link--unter {
  display: block; padding: .3rem 0; white-space: nowrap;
  font-size: .9375rem; color: var(--text-2); text-decoration: none;
}
.menue__link--unter:hover  { color: var(--gruen); }
.menue__link--unter.ist-hier { color: var(--gruen); }

/* Mit Skript: der Aufklapper. Die Klasse setzt das Skript, nicht die
   Vorlage — ohne Skript greift keine dieser Regeln, und die Liste
   bleibt schlicht stehen. */
.hat-js .untermenue {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  display: none;
  padding: .6rem 1rem .8rem;
  /*
   * Deckend, nicht halbdurchsichtig: Selbst bei 0,96 war die
   * Überschrift der Seite durch den Kasten hindurch zu erkennen.
   */
  background: #0c0d09;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .5);
}
/* --- Der Klappknopf für Telefon und Tablet --- */
.hamburger {
  display: flex; align-items: center; gap: .55rem;
  min-height: var(--tippziel); padding: .35rem .7rem;
  border: 1px solid var(--linie-stark); border-radius: var(--rund-klein);
  background: transparent; color: var(--text);
  font: inherit; font-size: .9375rem; cursor: pointer;
}
.hamburger:hover { border-color: var(--gruen); color: var(--gruen); }
/* Die drei Striche: EIN Kasten mit Rahmen oben und unten und einem
   eigenen Hintergrund in der Mitte. Drei Elemente waeren drei
   Elemente fuer eine Zeichnung. */
.hamburger__striche,
.hamburger__striche::before,
.hamburger__striche::after {
  display: block; width: 1.15rem; height: 2px;
  background: currentColor; border-radius: 1px;
}
.hamburger__striche { position: relative; }
.hamburger__striche::before,
.hamburger__striche::after { content: ''; position: absolute; left: 0; }
.hamburger__striche::before { top: -6px; }
.hamburger__striche::after  { top:  6px; }

/* Der Knopf steht links, das Menue faellt darunter aus. */
.hat-hamburger .kopf__in { justify-content: flex-start; }
.hat-hamburger .menue { position: static; }

.hat-hamburger .menue__liste {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  flex-direction: column; align-items: stretch;
  gap: 0;
  padding: .5rem 1rem 1rem;
  /* Schieben braucht es hier nicht mehr — untereinander passt alles.
     Dafuer darf die Liste rollen, wenn sie laenger ist als der
     Bildschirm; ein Menue, dessen letzter Punkt unerreichbar unter dem
     Fensterrand liegt, ist kein Menue. */
  overflow-x: visible; overflow-y: auto;
  max-height: calc(100vh - 100%);
  -webkit-overflow-scrolling: touch;
  /* Deckend, aus demselben Grund wie beim Aufklappmenue. */
  background: #0c0d09;
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .5);
}
.hat-hamburger .menue__liste.ist-offen { display: flex; }

/* Im Klappmenue steht jeder Punkt in einer eigenen Zeile, ueber die
   volle Breite — auf dem Telefon wird mit dem Daumen getroffen, und
   ein Wort von 40 Punkten Breite ist kein Ziel. */
.hat-hamburger .menue__punkt { display: block; }
.hat-hamburger .menue__link {
  display: block; padding: .6rem 0;
  border-bottom: 0; border-left: 2px solid transparent; padding-left: .6rem;
}
.hat-hamburger .menue__link.ist-hier {
  border-bottom-color: transparent; border-left-color: var(--gruen);
}
/*
 * Die Unterpunkte stehen offen und eingerückt. Die kleinen Pfeile
 * daneben versteckt das Skript, nicht dieses Stilblatt.
 */
.hat-hamburger .untermenue {
  position: static; display: block;
  padding: 0 0 .35rem 1.4rem; margin: 0;
  background: none; border: 0; box-shadow: none;
  max-width: none; min-width: 0;
}
.hat-hamburger .menue__link--unter {
  padding: .5rem 0 .5rem .6rem;
  border-left: 2px solid var(--linie);
}
.hat-hamburger .menue__link--unter.ist-hier { border-left-color: var(--gruen); }

/* Senkrecht untereinander — so wie auf der alten Seite. Nebeneinander
   gesetzt las sich die Reihe wie eine zweite Hauptzeile: Sieben
   gleichrangige Woerter quer ueber den Kopf sagen nicht, dass sie zu
   einem Punkt darueber gehoeren. Untereinander sagt es die Form. */
.hat-js .untermenue.ist-offen { display: block; }
.hat-js .menue__link--unter { padding: .45rem 0; }

/*
 * Breit: unter dem eigenen Punkt. `top: 100%` ist der Kern der Sache —
 * zwischen Punkt und Kasten darf kein Totbereich liegen.
 */
@media (min-width: 900px) {
  /*
   * Kein Abschneiden mehr — dafür darf die Liste umbrechen. Ab 900
   * Punkten passen die Hauptpunkte ohnehin in eine Zeile.
   */
  .menue__liste {
    overflow: visible; flex-wrap: wrap; justify-content: center;
    gap: .15rem 1.75rem;
  }
  .menue__punkt { position: relative; }

  .hat-js .untermenue {
    left: 0; right: auto; top: 100%;
    min-width: 12rem; max-width: min(20rem, 90vw);
    /* Oben so viel Polsterung, wie die Leiste unter dem Punkt noch
       hat (.45rem), plus Luft. Damit steht der sichtbare Text unter
       der Trennlinie der Leiste, die Flaeche aber lueckenlos am
       Punkt. */
    padding: 1.05rem 1.1rem .8rem;
    border-top: 0;
    border-radius: 0 0 var(--rund) var(--rund);
  }
  /* Ein Punkt am rechten Rand liesse den Kasten aus dem Fenster
     laufen. Welcher das ist, weiss erst der Browser — die Klasse
     setzt das Skript nach dem Messen. */
  .hat-js .untermenue--links { left: auto; right: 0; }
}

/* Ein Hauptpunkt, in dessen Bereich man steht, bleibt markiert — auch
   wenn nicht er selbst, sondern eines seiner Kinder die Seite ist. */
.menue__punkt--hat > .menue__link { padding-right: 0; }

/*
 * Schmal — Telefon und hochkant gehaltenes Tablet. Die Grenze liegt bei
 * 900 Punkten, weil sie auf der alten Seite dort lag.
 */
@media (max-width: 899px) {
  /*
   * Statt des vollen Logos die bloße Schriftzeile, im selben Band und
   * damit ebenfalls nicht klebend.
   */
  .marke--voll  { display: none; }
  .marke--zeile { display: flex; }
  .marke--zeile .marke__bild { width: 335px; max-width: 100%; height: auto; }
  .kopfband__in { padding: .8rem 1rem .6rem; }

  .kopf__in {
    /*
     * `minmax(0, 1fr)` und nicht `1fr`: Die kleinste Größe einer
     * Rasterspalte ist von Haus aus ihr Inhalt — hier ein Menü mit fünf
     * Punkten.
     */
    padding: .4rem .75rem;
  }
  .menue__liste { padding-bottom: .15rem; }
}


/*
 * --- Das Startbild ---
 * Alle Bilder liegen übereinander; sichtbar ist, was `.ist-da` trägt.
 */

.startbild {
  position: relative;
  height: clamp(15rem, 46vh, 30rem);
  overflow: hidden;
  background: #000;
}
.startbild__buehne { position: absolute; inset: 0; }

.startbild__stueck {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .8s ease;
}
.startbild__stueck.ist-da { opacity: 1; }
/* Ohne Skript ist nur das erste Stueck im Baum, und das muss zu sehen
   sein — auch wenn `.ist-da` beim Umblenden noch nicht gesetzt waere. */
.startbild:not([data-startbild]) .startbild__stueck { opacity: 1; }

.startbild__bild {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}

/* Die Bildunterschrift steht auf einem eigenen dunklen Grund, nicht
   direkt auf dem Foto: Weisse Schrift auf einem hellen Bildbereich ist
   unlesbar, und welcher Bereich hell ist, weiss beim naechsten Bild
   niemand. Der Verlauf nach oben macht den Uebergang weich. */
.startbild__fahne {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* Unten so viel Platz, wie sich die Inhaltsflaeche darueberschiebt
     (2,5rem) plus Luft. Ohne das verschwand „Mehr dazu" hinter dem
     Kasten — der Knopf war da und nicht zu sehen. */
  padding: 3.5rem 0 4rem;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%,
                                      rgba(0,0,0,.65) 45%,
                                      rgba(0,0,0,0) 100%);
}
/* Der Text fluchtet mit der Textspalte darunter, nicht mit dem
   Bildrand: Zwei verschiedene linke Kanten uebereinander sehen aus
   wie ein Versehen. */
.startbild__fahne > * {
  display: block;
  max-width: 74rem;
  margin-left: auto; margin-right: auto;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}
.startbild__titel {
  font-size: clamp(1.25rem, 3.2vw, 2rem); font-weight: 400;
  line-height: 1.2; color: #fff;
}
.startbild__unter {
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem); color: #e2e0da;
  margin-top: .3rem;
}
.startbild__mehr {
  /* Kein `width: fit-content`: Zusammen mit den `margin: auto` der
     Regel darueber saesse der Link in der Mitte der Spalte statt an
     ihrem linken Rand — unter einer linksbuendigen Ueberschrift. */
  margin-top: .7rem; font-size: .9375rem; font-weight: 600;
  color: var(--gruen); text-decoration: underline;
  text-underline-offset: .35em; text-decoration-thickness: 1px;
}
.startbild__mehr:hover { color: #fff; }

.startbild__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--tippziel); height: var(--tippziel);
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff;
  font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.startbild__pfeil:hover { background: rgba(0, 0, 0, .78); }
.startbild__pfeil--zurueck { left: .5rem; }
.startbild__pfeil--vor     { right: .5rem; }

.startbild__punkte {
  position: absolute; right: clamp(1rem, 5vw, 3rem); top: .9rem;
  display: flex; gap: .45rem;
}
.startbild__punkt {
  /* Der sichtbare Punkt ist klein, die Trefferflaeche ist es nicht:
     Das Kaestchen misst 24 px, der Punkt darin 10. Ein 10-px-Ziel
     trifft auf dem Telefon niemand. */
  width: 1.5rem; height: 1.5rem; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.startbild__punkt::after {
  content: ''; width: .625rem; height: .625rem; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  transition: background .2s;
}
.startbild__punkt.ist-da::after { background: var(--gruen); }
.startbild__punkt:hover::after  { background: #fff; }

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


/* --- Inhalt ---------------------------------------------------------- */

/* Der Inhaltsbereich hat dieselbe Breite wie Kopf und Fuss, damit die
   Ueberschrift senkrecht unter dem Hausnamen beginnt. Die LESBARE
   Breite begrenzt der Text selbst — eine Zeile mit hundert Zeichen
   liest niemand gern, ein Kachelraster darf dagegen breiter sein. */
/*
 * Die Inhaltsfläche. `rgba(0,0,0,0.8)` und 10 px Radius — wörtlich die
 * Regel der alten Seite (.tm-content in custom.css).
 */
.inhalt {
  /*
   * `width: min(…)` statt `max-width` plus Seitenrand: Der Körper ist
   * eine Flexspalte, und dort verhindern automatische Seitenränder das
   * Strecken.
   */
  width: min(74rem, 100% - 1.5rem);
  margin: 2.5rem auto 3.5rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: rgba(0, 0, 0, .8);
  border-radius: var(--rund);
}
/* Direkt unter dem Startbild rueckt die Flaeche hoch und schiebt sich
   ein Stueck darueber — so haengen Bild und Text zusammen, statt als
   zwei Bloecke uebereinanderzuliegen. */
.startbild + .inhalt {
  margin-top: -2.5rem;
  position: relative; z-index: 1;
}
@media (max-width: 40rem) {
  .inhalt { margin-top: 1.25rem; margin-bottom: 2rem; }
  .startbild + .inhalt { margin-top: -1.25rem; }
}

/* Die Lesebreite gilt für den Text, nicht für den Kasten. */
.seite__titel,
.seite__untertitel { max-width: var(--lesebreite, 60rem); }


/* --- Die Startseite: Text und Kachelspalte ---------------------------- */

.startseite {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) 19rem;
  align-items: start;
}
/* Unter 60rem untereinander. `minmax(min(19rem, 100%), …)` waere hier
   falsch — die Spalte soll dann die volle Breite bekommen, nicht 19rem
   davon. */
@media (max-width: 60rem) {
  .startseite { grid-template-columns: minmax(0, 1fr); }
}

.kachelspalte { display: grid; gap: 1rem; }

.kontaktkachel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.25rem 1.35rem;
}
.kontaktkachel__titel {
  margin: 0 0 .6rem; font-size: 1.0625rem; font-weight: 600;
  color: var(--gold); letter-spacing: .02em;
}
.kontaktkachel p { margin: .5rem 0; }
.kontaktkachel .knopf { width: 100%; justify-content: center; }
.kontaktkachel__nummer {
  font-size: 1.375rem; font-weight: 400; line-height: 1.3;
}
.kontaktkachel__nummer a { color: var(--text); text-decoration: none; }
.kontaktkachel__nummer a:hover { color: var(--gruen); }
.kontaktkachel__notiz {
  font-size: .875rem; color: var(--text-3); line-height: 1.5;
}

.zeitentafel { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.zeitentafel th, .zeitentafel td {
  padding: .3rem 0; text-align: left; vertical-align: top;
  font-weight: 400;
}
.zeitentafel th { color: var(--text-2); padding-right: .75rem; }
.zeitentafel td { text-align: right; white-space: nowrap; }
.ruhetag { color: var(--text-3); }

.anschrift { font-style: normal; line-height: 1.6; }

/* Die Notiz der Redaktion — der Absatz, den kein Programm kennen kann:
   die durchgehend warme Kueche, der Hinweis auf kurzfristige
   Aenderungen. Sie steht ruhiger als die Zahlen darueber, damit die
   Zahlen die Zahlen bleiben. */
.kontaktkachel__notiz {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--linie);
  font-size: .875rem; color: var(--text-3); line-height: 1.55;
}
/* Die erste Kachel hat keine Zahlen ueber der Notiz, wenn sie „frei"
   ist — dann waere der Trennstrich ein Strich unter nichts. */
.kontaktkachel--frei .kontaktkachel__notiz { margin-top: 0; padding-top: 0; border-top: 0; }
.kontaktkachel__notiz > :first-child { margin-top: 0; }
.kontaktkachel__notiz > :last-child  { margin-bottom: 0; }
.kontaktkachel__notiz a { color: var(--text-2); }
.kontaktkachel__notiz a:hover { color: var(--gruen); }


/*
 * --- „Aktuell" ---
 * Anreißer mit Bild, zwei Sätzen und einem Knopf. Zwei nebeneinander;
 * ab dreien lässt sich blättern.
 */

/* KEIN eigener Kasten: Die Reihe steht INNERHALB der Inhaltsflaeche,
   und die ist schon schwarz mit Radius. Ein zweiter Kasten darin ergab
   einen Rahmen im Rahmen — im Bild sofort zu sehen, im Quelltext
   nicht. Was sie braucht, ist ein Strich darueber. */
.aktuell {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--linie);
}
.aktuell__kopf {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;
}
.aktuell__titel {
  margin: 0; font-size: 1.5rem; font-weight: 400; color: var(--gold);
  margin-right: auto;
}
.aktuell__steuer { display: flex; gap: .4rem; }
.aktuell__pfeil {
  width: var(--tippziel); height: var(--tippziel);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linie); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: var(--text);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.aktuell__pfeil:hover:not(:disabled) { border-color: var(--gruen); color: var(--gruen); }
.aktuell__pfeil:disabled { opacity: .35; cursor: default; }

.aktuell__liste {
  display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.aktuell__stueck {
  /* Zwei nebeneinander. `flex: 0 0` und nicht `1 1`: Bei drei Stuecken
     sollen zwei zu sehen sein und das dritte angeschnitten — sonst
     schrumpfen alle drei und niemand merkt, dass es weitergeht. */
  flex: 0 0 calc((100% - 1.25rem) / 2);
  scroll-snap-align: start; min-width: 0;
}
@media (max-width: 46rem) {
  .aktuell__stueck { flex-basis: min(20rem, 88%); }
}

.anriss {
  height: 100%;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linie); border-radius: var(--rund);
  overflow: hidden;
}
.anriss__bild { display: block; }
.anriss__bild img {
  display: block; width: 100%; height: 11rem; object-fit: cover;
}
/*
 * `flex: 1` ist der Teil, ohne den die Zeile darunter nichts tut: Der
 * Textblock war nur so hoch wie sein Inhalt, und `margin: auto 0 0` am
 * Knopf griff ins Leere.
 */
.anriss__text {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem 1.15rem 1.25rem;
}
.anriss__titel { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.anriss__titel a { color: var(--gruen); text-decoration: none; }
.anriss__titel a:hover { text-decoration: underline; }
.anriss__satz {
  margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.55;
}
/* Der Knopf sitzt unten, auch wenn der Text darueber kuerzer ist als
   im Nachbarn — sonst tanzen die Knoepfe auf verschiedenen Hoehen. */
.anriss__mehr { margin: auto 0 0; padding-top: .35rem; }

/*
 * Das Kachelraster unter dem Text einer Übersichtsseite: dieselben
 * `.anriss`-Kacheln wie in der Reihe „Aktuell", nur in einer anderen
 * Hülle.
 */
.kachelraster { margin-top: clamp(2rem, 5vw, 3.25rem); }
.kachelraster__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Die Kachel fuellt ihre Rasterzelle ganz aus — `.anriss` traegt schon
   `height: 100%`, aber das greift nur, wenn das `li` selbst hoch ist. */
.kachelraster__stueck { display: flex; }
.kachelraster__stueck > .anriss { width: 100%; }

/* Wie der Text INNEN aussieht, steht in inhalt.css — dieselbe Datei,
   die der Editor lädt. Hier steht nur, wie breit er sein darf. */

.karte {
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.5rem;
}
.karte--fertig { border-color: var(--gruen-satt); }
/*
 * Was erfasst wurde: Datum, Uhrzeit, Personenzahl. Etwas größer als der
 * Fließtext und mit festen Ziffernbreiten.
 */
.karte--fertig .erfasst {
  font-size: 1.125rem; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  margin-top: -.25rem;
}
.karte h2 { margin-top: 0; font-weight: 400; font-size: 1.375rem; }

.block + .block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.block__titel {
  margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 600;
  color: var(--gruen); letter-spacing: .01em;
}

.leise { color: var(--text-2); }
.hilfe { margin: .35rem 0 0; font-size: .875rem; color: var(--text-3); line-height: 1.5; }


/* --- Felder ---------------------------------------------------------- */

/* min-width: 0 an den Kindern, sonst schrumpft ein <input> nicht unter
   seine Standardbreite von zwanzig Zeichen und schiebt die Zeile bei
   320 px aus dem Bild. Genau dieser Fehler ist im Redaktionsbereich
   schon einmal aufgetreten. */
.reihe { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.reihe > .feld { flex: 1 1 11rem; min-width: 0; }
.reihe > .feld--schmal { flex: 0 1 8rem; min-width: 0; }
/* Mit Plus und Minus daneben braucht die Personenspalte mehr Platz.
   Die Klasse setzt das Skript, das die Knoepfe baut — ohne Skript
   bleibt die Spalte schmal, weil dort nur die Zahl steht. */
.reihe > .feld--schmal.feld--zahl { flex: 0 1 13rem; }

/*
 * Minus — Zahl — Plus. Die Knöpfe sind so hoch wie das Feld und so
 * breit wie ein Daumen (--tippziel).
 */
.zahlsteller { display: flex; align-items: stretch; gap: .375rem; }
.zahlsteller > input { text-align: center; min-width: 0; flex: 1 1 auto; }
.zahlpfeil {
  flex: 0 0 var(--tippziel);
  min-height: var(--tippziel);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--rund-klein);
  cursor: pointer;
  /* Ein langer Tipp auf dem iPad soll nicht die Textauswahl aufrufen —
     das Feld daneben ist dann markiert, und der Gast wundert sich. */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.zahlpfeil:hover { border-color: var(--gruen); color: var(--gruen); }
.zahlpfeil:active { background: var(--grund-2); }

.feld { margin-bottom: 1.125rem; }
.feld label {
  display: block; margin-bottom: .3rem;
  font-size: .9375rem; font-weight: 400; color: var(--text-2);
}
.pflicht { color: var(--gruen); }

.feld input, .feld select, .feld textarea {
  width: 100%; min-height: var(--tippziel);
  padding: .6rem .75rem;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--rund-klein);
  /* 16px, sonst zoomt iOS beim Antippen in das Feld hinein */
  /*
   * font-family und font-size getrennt, nicht als font-Kurzform: Die
   * Kurzform nimmt für die Schriftfamilie kein inherit an, und eine
   * ungültige Kurzform wird ganz verworfen.
   */
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  font-weight: 400;
}
.feld textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); }

/*
 * --- Das Datumsfeld und sein Kalenderknopf ---
 * Safari auf dem Mac zeichnet an einem `type="date"` kein Symbol,
 * Chrome und Firefox schon.
 */
.feld__mitknopf { display: flex; gap: .4rem; align-items: stretch; }
.feld__mitknopf input { min-width: 0; }

.feld__mitknopf.hat-knopf input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.kalenderknopf {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tippziel); min-height: var(--tippziel);
  padding: 0;
  background: var(--flaeche); color: var(--text-2);
  border: 1px solid var(--linie-stark); border-radius: var(--rund-klein);
  cursor: pointer;
}
.kalenderknopf:hover  { color: var(--text); border-color: var(--gruen); }
.kalenderknopf:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 2px;
}

/* Wo das eingebaute Symbol stehen bleibt (Firefox, und ueberall ohne
   Skript), ist es auf dunklem Grund sonst schwarz auf schwarz. */
.feld input[type="date"]::-webkit-calendar-picker-indicator,
.feld input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.6);
}

.feld.ist-falsch input, .feld.ist-falsch select, .feld.ist-falsch textarea {
  border-color: var(--warnung); background: var(--warnung-grund);
}
.feldfehler {
  margin: .35rem 0 0; font-size: .875rem; color: var(--warnung); line-height: 1.5;
}

/*
 * --- „Das wird knapp" ---
 * In Gold und mit Streifen, nicht in Rot: Es ist kein Fehler.
 */
.knapphinweis {
  margin: 0 0 1.2rem;
  padding: .7rem .9rem;
  background: var(--grund-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  color: var(--gold);
  font-size: .9375rem;
  line-height: 1.55;
}


/*
 * --- Der Köder ---
 * Nicht display:none — manche Skripte lassen aus, was ausgeblendet ist.
 * Aus dem Bild geschoben ist es für Menschen ebenso unsichtbar.
 */
.koeder {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}


/* --- Meldungen ------------------------------------------------------- */

.meldung {
  margin: 0 0 1.25rem; padding: .875rem 1rem;
  border-radius: var(--rund-klein); border: 1px solid transparent;
  line-height: 1.55;
}
.meldung--fehler {
  background: var(--warnung-grund); border-color: var(--warnung); color: var(--text);
}
.meldung__titel {
  margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 600; color: var(--warnung);
}
/* Der Fokusring an der Ueberschrift, wenn jemand aus der Adresszeile
   auf #fehlerliste springt. Ohne ihn weiss niemand, wo er gelandet ist. */
.meldung__titel:focus-visible { outline: 2px solid var(--warnung); outline-offset: 3px; }
.fehlerliste { margin: 0; padding-left: 1.25rem; }
.fehlerliste li { margin: .25rem 0; }
.fehlerliste a { font-weight: 600; }
.meldung__zusatz { margin: .6rem 0 0; font-size: .9375rem; color: var(--text-2); }


/* --- Knoepfe --------------------------------------------------------- */

.absenden { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }

.knopf {
  display: inline-block; min-height: var(--tippziel);
  padding: .7rem 1.6rem;
  background: var(--gruen); color: #14150f;   /* schwarz auf gruen: 11,1:1 */
  border: 1px solid var(--gruen); border-radius: var(--rund-klein);
  font-family: inherit; font-size: 1rem; line-height: 1.4; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--gruen-satt); border-color: var(--gruen-satt); }
.knopf--leise {
  background: transparent; color: var(--gruen); border-color: var(--linie-stark);
}
.knopf--leise:hover { background: var(--flaeche); border-color: var(--gruen); }


/* --- Fuss ------------------------------------------------------------ */

.fuss {
  margin: 2rem 0 0; text-align: center;
  font-size: .9375rem; color: var(--text-3); line-height: 1.8;
}


/* --- Schmale Geraete -------------------------------------------------- */

@media (max-width: 30rem) {
  .karte { padding: 1.125rem; }
  /* Nebeneinander bleibt nur, was nebeneinander lesbar ist. */
  .reihe { display: block; }
  .knopf { display: block; width: 100%; text-align: center; }
}


/* --- Drucken ---------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .karte { border-color: #999; background: #fff; }
  .knopf, .koeder { display: none; }
  a { color: #000; }
}


/* =====================================================================
   Die Seiten der Website
   ===================================================================== */

.seite__bild {
  display: block; width: 100%; height: auto;
  border-radius: var(--rund); margin-bottom: 1.5rem;
}
.seite__titel {
  margin: 0 0 1.25rem; font-weight: 300; font-size: 2.125rem; line-height: 1.15;
}

/*
 * Der Fließtext. Alles hier ist eine Regel für den Text, keine Regel im
 * Text: Die Redaktion setzt keine Farben und keine Größen.
 */

/* Bilder im Text: nie breiter als der Text, und die alten
   width/height-Angaben sind bei der Uebernahme ohnehin gefallen. */

/* Tabellen im Text: Der Rahmen scrollt, nicht die Seite. */




/* --- Der Fuss --------------------------------------------------------- */

/*
 * Der Fuß steht auf einem eigenen dunklen Streifen über die volle
 * Breite: Ohne ihn lag der Fußtext direkt auf den Hopfenranken.
 */
.fussstreifen {
  background: rgba(0, 0, 0, .78);
  border-top: 1px solid var(--linie);
  /* `auto` und nicht `flex: 1` auf dem Inhalt: Der Fuss rutscht ans
     Ende der Seite, ohne dass die Inhaltsflaeche darueber auf
     Bildschirmhoehe aufgeblasen wird. Ein leerer schwarzer Kasten von
     600 px sieht aus, als fehlte etwas. */
  margin-top: auto;
}
.seitenfuss {
  max-width: 74rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  justify-content: space-between; align-items: flex-start;
  font-size: .9375rem; color: var(--text-3); line-height: 1.7;
}
.seitenfuss__haus { margin: 0; }
.seitenfuss__haus strong { color: var(--text-2); font-weight: 600; }
.seitenfuss a { color: var(--text-2); }
.seitenfuss a:hover { color: var(--gruen); }
.seitenfuss__links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

.knopf--klein { padding: .45rem .9rem; font-size: .9375rem; }


@media (max-width: 30rem) {
  /*
   * Nachgemessen auf 390 px, der häufigsten Telefonbreite: Mit 1,1 rem
   * Abstand steht „Jobs" angeschnitten am Rand.
   */
  .menue__liste { gap: 0 .95rem; }
  .seite__titel { font-size: 1.75rem; }
  /* Der Reservierungsknopf oben bleibt ein Knopf, auch wenn die Regel
     weiter oben aus jedem .knopf einen Block macht — sonst nimmt er die
     halbe Kopfzeile ein. */
}

/* Der Untertitel unter der Ueberschrift — ruhiger als der Titel, aber
   groesser als der Fliesstext. */
.seite__untertitel {
  max-width: 44rem;
  margin: -.4rem 0 1.4rem;
  font-size: 1.1875rem;
  font-weight: 300;
  color: var(--text-2);
}

/*
 * Das Band über einer Karte, die gerade nicht gilt. In Gold, nicht in
 * Rot: Es ist keine Fehlermeldung.
 */
.zeitband {
  max-width: 44rem;
  margin: 0 0 1.6rem;
  padding: .6rem .9rem;
  background: var(--grund-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  color: var(--gold);
  font-size: .9375rem;
}


/*
 * --- Die Karte ---
 * Speise- und Getränkekarten kommen aus Daten, nicht als Tabelle im
 * Fließtext.
 *
 * HIER STEHT KEINE SCHRIFTGRÖSSE. Größen, Zeilenabstände und Farben der
 * Kartentexte kommen aus KARTESTIL in kern/kartestil.php und werden von
 * kartestil_css() erzeugt — dieselbe Tabelle, aus der das PDF seine
 * Punkte nimmt. Stünden sie hier noch einmal, wäre die Tabelle nur eine
 * Behauptung: Am Bildschirm sähe die Karte aus wie die Abschrift, im
 * PDF wie das Original.
 *
 * Was hier steht, ist der Bau: Abstände zwischen den Blöcken, die
 * Aufteilung in Name und Preis, die Linien.
 */

.speisekarte {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--linie);
  /*
   * KEINE EIGENE SCHRIFT MEHR. „Auf der Website soll die Schrift wie
   * der Rest der Website sein. Nur auf den Ausdrucken muss hier die
   * Crimson verwendet werden."
   *
   * Die Karte erbt damit die Hausschrift vom Seitenkörper wie jeder
   * andere Text. Die Schriftwahl in der Redaktion steuert nur noch
   * das PDF; was je Karte am Bildschirm ankommt, ist allein die
   * Akzentfarbe (kartestil_eigenschaften()).
   */
}

/*
 * Die Akzentfarben auf dunklem Grund. Gespeichert ist nur der Name
 * (kern/karte.php, KARTE_FARBEN); die Werte stehen hier, weil sie zum
 * Medium gehören — das PDF hat für dieselben Namen eigene, hellere
 * Gegenstücke auf Weiß.
 */
.speisekarte {
  --karte-gruen:   #acd904;
  --karte-orange:  #ffa726;
  --karte-blau:    #7fb4ff;
  --karte-rot:     #ff8a7a;
  --karte-gold:    #e0b13a;
  --karte-violett: #cba6f7;
  /* Die beiden Grautöne für Allergenziffern und Fußnoten. Gemessen
     gegen #2a2d22 — den hellsten Punkt des Seitenverlaufs, also den
     ungünstigsten Grund: hellgrau 8,1:1, grau 5,6:1. */
  --karte-grau:     #a8a49a;
  --karte-hellgrau: #c9c5ba;
  --karte-akzent:  var(--karte-gruen);
}

.speisekarte__titel { margin: 0 0 .25rem; }
.speisekarte__unter { margin: 0 0 1.5rem; }

/*
 * Die Bausteine stehen als FOLGE untereinander — Überschriften und
 * Gerichte in einer Reihe, nicht Gerichte in Gruppen. Deshalb hier
 * keine Liste mehr: Eine Aufzählung, in die zwischendurch eine
 * Überschrift gehört, ist keine.
 *
 * Die Abstände einzelner Bausteine kommen aus der Karte selbst und
 * stehen im Stilblock an der Seite (kartestil_abstaende()). Was hier
 * steht, ist der Grundabstand — er gilt, wo nichts anderes gesagt
 * wurde.
 */
.speisekarte__folge { margin: 0; }
.speisekarte__ueberschrift {
  margin: 2.25rem 0 .35rem;
}
/* Die erste Überschrift braucht den Vorlauf nicht: Über ihr steht
   schon der Titel der Karte. */
.speisekarte__ueberschrift:first-child { margin-top: 0; }
.speisekarte__hinweis { margin: -.2rem 0 .75rem; }

/*
 * Der Freitext. Schriftgröße, Zeilenabstand und Farbe kommen aus
 * KARTESTIL und stehen im Stilblock an der Seite; hier steht nur der
 * Abstand, der gilt, solange der Baustein keinen eigenen nennt.
 *
 * Die Größenstufen und Farben IM Text stehen ebenfalls dort — und
 * zwar nur die, die diese Karte wirklich benutzt.
 */
.speisekarte__text { margin: .9rem 0; }
.speisekarte__text:first-child { margin-top: 0; }

/* Name links, Preise rechts — und dazwischen der Platz, der übrig ist.
   Führungspunkte gibt es mit Absicht keine: Auf dem Telefon bricht der
   Preis unter den Namen, und eine Punktreihe ins Leere sieht dann aus
   wie ein Darstellungsfehler. */
.speisekarte__pos {
  display: flex; flex-wrap: wrap; gap: .15rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linie);
}
/* Die Linie trennt zwei Gerichte. Vor einer Überschrift und am Ende
   der Karte trennt sie nichts mehr. */
.speisekarte__pos:last-child { border-bottom: 0; }
.speisekarte__pos:has(+ .speisekarte__ueberschrift) { border-bottom: 0; }
.speisekarte__wort { flex: 1 1 18rem; min-width: 0; }
.speisekarte__name { display: block; }
.speisekarte__satz { display: block; margin-top: .15rem; }

/* Die Preisspalte. `tabular-nums` stellt die Ziffern auf gleiche Breite —
   ohne das steht das Komma jeder Zeile woanders, und genau deswegen
   waren die Preise auf der alten Karte rechtsbündig gesetzt. */
.speisekarte__preise {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: .1rem;
  font-variant-numeric: tabular-nums;
}
.speisekarte__preis { white-space: nowrap; }
.speisekarte__menge { color: var(--text-2); font-size: .9375rem; margin-right: .5rem; }

.speisekarte__fuss { margin: 1.25rem 0 0; }

@media (max-width: 34rem) {
  /* Auf dem Telefon steht der Preis unter dem Namen, links ausgerichtet
     wie er — rechtsbündig hinge er allein am Rand, und das Auge sucht
     die Zuordnung. */
  .speisekarte__preise { align-items: flex-start; margin-top: .2rem; }
}

/* Die Knoepfe unter der Karte: „als PDF" und, wo es sie gibt, die
   Bestellliste. Abstand nach oben wie die Legende, damit sie nicht am
   Fusstext kleben. */
.speisekarte__pdf {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.75rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}