/* =====================================================================
   Die Speisekarte: heute auf der Seite, ganze Karte im Blatt.

   Vorher stand die vollständige Karte offen auf der Startseite. Mit der
   echten Karte des Honigtopf – Burger, Specials, vegan, Fritten,
   Wurstiges, Frittuur, Dips, Pizza, Extrazutaten, Fassbier – wären das
   über neunzig Zeilen mitten im Seitenfluss. Jetzt steht dort ein Kasten
   mit dem heutigen Tag, und die Karten kommen auf Klick – die Pizza über
   einen eigenen Knopf, weil es sie nur sonntags gibt.

   Warum diese Datei und nicht Inline-Stile wie im übrigen Export: das
   Blatt ist ein Dialog. Es braucht Zustände (offen/zu), einen Rückfall
   für schmale Geräte und `:hover`/`:focus-visible` – alles Dinge, die
   sich inline nicht ausdrücken lassen.

   Die Farbwerte kommen aus dem Design-System, dem Stilblatt unter
   `website/_ds`. (Diesen Pfad hier nicht mit Sternchen abkürzen: die
   Zeichenfolge Sternchen-Schrägstrich beendet den Kommentar mitten im
   Satz, und der Parser überspringt dann die erste Regel darunter. Genau
   das ist beim Schreiben dieser Datei passiert – das Blatt lag
   danach im Seitenfluss statt darüber.)
   Die Rückfallwerte dahinter greifen nur, wenn diese Datei ohne das
   Design-System geladen wird; dann sieht die Karte schlichter aus,
   aber lesbar.
   ===================================================================== */

/* --- Das Blatt selbst ---------------------------------------------- */

.ht-blatt {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 3vw, 40px);
}

/* `hidden` allein reichte nicht: das Attribut wird von `display: flex`
   überschrieben, weil eine Klasse spezifischer ist als das
   Browser-Standardblatt. */
.ht-blatt[hidden] { display: none; }

.ht-blatt__schatten {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 4, 0.82);
}

.ht-blatt__inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: 100%;
  overflow: hidden;
  background: #14100a;
  border: 1px solid rgba(246, 160, 107, 0.18);
  border-radius: clamp(0px, 2vw, 22px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* --- Kopf: Titel, Umschalter, Schließen ---------------------------- */

.ht-blatt__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: clamp(18px, 2.5vw, 28px);
  border-bottom: 1px solid rgba(246, 160, 107, 0.14);
  /* Der Kopf bleibt stehen, während die Karte darunter läuft – bei
     neunzig Zeilen wäre der Umschalter sonst nach zwei Wischern weg. */
  flex: 0 0 auto;
}

.ht-blatt__titel {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.05;
  color: #fbf1e2;
}

.ht-reiter { display: flex; gap: 8px; }

.ht-reiter button {
  padding: 9px 18px;
  font: inherit;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 15px;
  color: #e8d8c4;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(246, 160, 107, 0.28);
  border-radius: 999px;
}

.ht-reiter button:hover { border-color: var(--color-accent-400, #f6a06b); }

.ht-reiter button[aria-selected='true'] {
  color: #1a1206;
  background: var(--color-accent-500, #d67f48);
  border-color: transparent;
}

.ht-zu {
  width: 42px;
  height: 42px;
  font-size: 22px;
  line-height: 1;
  color: #e8d8c4;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(246, 160, 107, 0.28);
  border-radius: 999px;
}

.ht-zu:hover { border-color: var(--color-accent-400, #f6a06b); }

/* --- Der laufende Teil --------------------------------------------- */

.ht-blatt__karte {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(18px, 2.5vw, 30px);
}

.ht-blatt__fuss {
  flex: 0 0 auto;
  padding: 14px clamp(18px, 2.5vw, 30px) clamp(18px, 2.5vw, 26px);
  font-size: 13px;
  line-height: 1.5;
  color: #8d7a66;
  border-top: 1px solid rgba(246, 160, 107, 0.1);
}

/* --- Gruppen ------------------------------------------------------- */

/* Spalten und nicht ein Raster: eine Gruppe darf nicht in der Mitte
   umbrechen (`break-inside`), und die Höhen sind sehr verschieden –
   vier Burger gegen einundzwanzig Extrazutaten. */
.ht-gruppen {
  /* Als Langschreibweise: die Kurzform `columns: 2 340px` wurde vom
     Browser verworfen und es blieb bei einer Spalte. */
  column-width: 320px;
  column-gap: clamp(24px, 3vw, 48px);
}

.ht-gruppe {
  break-inside: avoid;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.ht-gruppe__titel {
  margin: 0 0 4px;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 24px;
  color: var(--color-accent-300, #ffc6a5);
}

.ht-gruppe__tage {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-400, #f6a06b);
}

.ht-gruppe__notiz {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #a2907a;
}

/* Was es heute nicht gibt, bleibt lesbar, tritt aber zurück. Ausblenden
   wäre falsch: wer am Freitag die Pizzakarte sucht, soll sie finden. */
.ht-gruppe--heute-nicht { opacity: 0.62; }

/* --- Zeilen -------------------------------------------------------- */

.ht-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ht-zeile {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.ht-zeile__name { color: #ede0cd; }

.ht-zeile__was {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: #a2907a;
}

/* Die Punktreihe wächst und schiebt den Preis an den rechten Rand. */
.ht-zeile__punkte {
  flex: 1 1 auto;
  min-width: 18px;
  border-bottom: 1px dotted rgba(246, 160, 107, 0.3);
}

.ht-zeile__preis {
  flex: 0 0 auto;
  font-family: var(--font-heading, Georgia, serif);
  color: var(--color-accent-400, #f6a06b);
  white-space: nowrap;
}

/* Mehrere Größen brauchen mehr Platz, als rechts in einer Zeile ist:
   "0,3 l 3,50 · 0,4 l 4,40 · Kranz 22,00". Sie stehen deshalb unter dem
   Namen, wie auf einer Getränkekarte. */
.ht-zeile--groessen { flex-direction: column; gap: 2px; }

.ht-zeile--groessen .ht-zeile__punkte { display: none; }

.ht-zeile--groessen .ht-zeile__preis { font-size: 14.5px; }

/* --- Kurze Listen: Dips, Extrazutaten ------------------------------ */

/* Einundzwanzig Extrazutaten als Zeilen mit Punktreihe wären eine halbe
   Seite. Als Aufzählung nebeneinander sind sie drei Zeilen. */
.ht-liste--kompakt {
  display: flex;
  flex-flow: row wrap;
  gap: 6px 14px;
}

.ht-liste--kompakt .ht-zeile { gap: 6px; }

.ht-liste--kompakt .ht-zeile__punkte { display: none; }

/* --- Termine im Blatt ----------------------------------------------
   Ein Termin ist kein Gericht: kein Preis am rechten Rand, keine
   Punktreihe. Wann, was, und was es kostet – untereinander, weil das
   die Reihenfolge ist, in der danach gefragt wird.
   -------------------------------------------------------------------- */

.ht-termine {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Eine Spalte, auch auf breiten Schirmen: Termine haben eine
     Reihenfolge, und in zwei Spalten liest man sie falsch. */
  max-width: 46rem;
}

.ht-termin {
  padding: 0 0 clamp(20px, 2.5vw, 28px);
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid rgba(246, 160, 107, 0.12);
}

.ht-termin:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.ht-termin__wann {
  margin: 0 0 2px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-400, #f6a06b);
}

.ht-termin__was {
  margin: 0;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 22px;
  line-height: 1.15;
  color: #fbf1e2;
}

.ht-termin__mehr {
  margin: 6px 0 0;
  line-height: 1.5;
  color: #cbb9a3;
}

.ht-termin__preis {
  margin: 6px 0 0;
  font-family: var(--font-heading, Georgia, serif);
  color: var(--color-accent-300, #ffc6a5);
}

/* --- Blatt ohne Inhalt ----------------------------------------------
   Der Events-Knopf steht auch da, wenn kein Termin eingetragen ist.
   "Gerade ist nichts geplant" ist eine Antwort auf die Frage des Gasts –
   und ein Knopf, der je nach Datenlage kommt und geht, sieht nach einem
   Fehler aus.
   -------------------------------------------------------------------- */

.ht-leer {
  margin: 0 0 10px;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  color: #fbf1e2;
}

.ht-leer__mehr {
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
  color: #cbb9a3;
}

/* --- Vom Tag im Blatt ---------------------------------------------- */

.ht-heute {
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 18px 20px;
  background: #1b1409;
  border: 1px solid rgba(246, 160, 107, 0.16);
  border-radius: 16px;
}

.ht-heute h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 20px;
  color: var(--color-accent-300, #ffc6a5);
}

.ht-heute p { margin: 0 0 6px; color: #ede0cd; }

.ht-heute p:last-child { margin-bottom: 0; }

.ht-heute__art { color: #a2907a; }

/* --- Die Knöpfe unter dem Kasten "Heute" ---------------------------- */

.ht-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ht-mehr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font: inherit;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 16px;
  color: #1a1206;
  cursor: pointer;
  background: var(--color-accent-500, #d67f48);
  /* Durchsichtiger Rand statt keiner: der Pizza-Knopf daneben hat einen
     echten, und ohne diese Zeile war die gefüllte Reihe 2 px höher als
     die einzelne in der Nachbarspalte – die Knöpfe lagen nicht auf einer
     Linie. */
  border: 1px solid transparent;
  border-radius: 999px;
}

.ht-mehr:hover { background: var(--color-accent-400, #f6a06b); }

.ht-mehr:active { background: var(--color-accent-600, #b2622d); }

/* Der Pizza-Knopf steht daneben, nicht darüber: die Pizza gibt es nur
   sonntags, die übrige Karte an sechs Tagen. Deshalb umrandet statt
   gefüllt – gleich erreichbar, aber nicht gleich laut. */
.ht-mehr--zweit {
  color: var(--color-accent-300, #ffc6a5);
  background: transparent;
  border: 1px solid rgba(246, 160, 107, 0.45);
}

.ht-mehr--zweit:hover {
  background: rgba(246, 160, 107, 0.12);
  border-color: var(--color-accent-400, #f6a06b);
}

.ht-mehr--zweit:active { background: rgba(246, 160, 107, 0.2); }

/* Auf dem Handy jeder Knopf über die ganze Breite und untereinander:
   zwei halbe Knöpfe nebeneinander sind auf 375 px zu schmal für
   "Pizza — nur sonntags". */
@media (max-width: 560px) {
  .ht-knoepfe { flex-direction: column; }
  .ht-mehr { width: 100%; justify-content: center; }
  .ht-gruppen { column-width: auto; column-count: 1; }
}

/* Solange das Blatt offen ist, soll die Seite darunter nicht mitlaufen. */
body.ht-blatt-offen { overflow: hidden; }