/* =========================================================================
   San Remo — Speisekarte

   Ergänzt `styles.css`, ersetzt nichts. Kein Token, kein Radius und keine
   Schriftgröße wird hier neu erfunden — alles kommt aus dem Tokenblock der
   Hauptdatei.

   NICHT AUS DER VORLAGE. scoopa.framer.website hat keine Speisekartenseite;
   dort endet das Kapitel mit dem Kartenstapel. Diese Seite ist am 04.09.2026
   dazugebaut, weil der Betrieb eine echte, gedruckte Karte hat. Der Aufbau
   folgt dem Muster von Maison Ardoise (Kapitelkopf, Sprungleiste, ein Kapitel
   je Kartenteil), die Gestaltung ist die dieser Seite.

   Die Kapitelkarten der Startseite (`.kapitel*`) stehen in `styles.css` —
   sie werden auf beiden Seiten gebraucht.
   ====================================================================== */

/* ------------------------------------------------------- Seitenkopf --- */

.kartenkopf {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 160px 40px 72px;
  background: var(--grund);
}

/* Der Inhalt muss über den Wellenbahnen liegen, sonst laufen sie durch die
   Schrift. Der Bereich selbst trägt dafür `position: relative` (oben). */
.kartenkopf__innen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 760px;
  text-align: center;
}

.kartenkopf__lead { max-width: 560px; }

/* Sprungleiste: elf Pillen. Sie ist kein Ersatz für die Kopfnavigation,
   sondern der Weg innerhalb einer sehr langen Seite. */
.kartennav { width: 100%; margin-top: 12px; }

.kartennav__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.kartennav__liste a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-pille);
  background: var(--chip-flaeche);
  box-shadow: inset 0 0 0 1px var(--kante-chip);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--dunkel);
  transition: background-color 0.2s cubic-bezier(0.44, 0, 0.56, 1),
              color 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.kartennav__liste a:hover { background: var(--rot); color: var(--grund); }

/* ---------------------------------------------------------- Kapitel --- */

.gang {
  /* Die Kopfleiste ist eine schwebende Pille und deckt beim Sprung sonst
     die Kapitelüberschrift ab. 110px ist ihre Höhe samt Abstand. */
  scroll-margin-top: 110px;
  padding: 72px 40px;
  background: var(--grund);
}
.gang--gedreht { background: var(--grund-zwei); }

.gang__innen {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: var(--schale);
  margin: 0 auto;
}

/* Der Kapitelkopf ist zugleich der Griff des <details>. Auf breiten
   Schirmen sieht man ihm das nicht an — dort stehen alle Kapitel offen und
   der Pfeil ist weg. */
.gang__falt { display: block; }

.gang__kopf {
  display: flex;
  align-items: center;
  gap: 28px;
  cursor: pointer;
  list-style: none;
}
.gang__kopf::-webkit-details-marker { display: none; }

.gang__kopftext {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  /* Ohne `min-width: 0` nimmt ein Flex-Element mindestens die Breite seines
     laengsten Wortes ein — es schrumpft nicht unter den Inhalt. Bei 320px
     drueckte „Frische Joghurtbecher" die Kopfzeile auseinander und schob den
     Aufklapp-Pfeil 49px aus der Seite. Aufgefallen erst mit
     `pruefe-breiten.mjs`; die drei Breiten der Abnahme (1440/1024/390) zeigen
     es nicht, weil es unterhalb von 390 anfaengt. */
  min-width: 0;
}

/* Der Pfeil steht nur dort, wo tatsächlich geklappt wird. */
.gang__caret {
  display: none;
  margin-left: auto;
  color: var(--rot);
  transition: transform 0.2s cubic-bezier(0.44, 0, 0.56, 1);
}
.gang__caret svg { width: 22px; height: 22px; }

/* Das runde Zuordnungsbild — ein Bild je Kapitel, keins je Position. Das
   war die ausdrückliche Vorgabe: es soll zeigen, wovon die Rede ist. */
.gang__bild {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: var(--schatten-rund);
}
.gang__bild img { width: 100%; height: 100%; object-fit: cover; }

.gang__nummer { color: var(--schrift-zwei); }

.gang__titel {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variation-settings: 'opsz' 96, 'wght' 800;
  font-weight: 400;
  /* „Frische Joghurtbecher" passt auf einem 320px-Schirm nicht in eine Zeile. */
  overflow-wrap: break-word;
}

/* Zwei Spalten, weil elf Kapitel untereinander sonst eine sehr lange Seite
   ergeben. Die Positionen laufen spaltenweise weiter — `columns` und nicht
   `grid`, damit unterschiedlich hohe Einträge dicht stehen. */
.gang__liste {
  margin-top: 36px;
  columns: 2;
  column-gap: 56px;
}

.gericht {
  /* Verhindert, dass eine Position zwischen den Spalten zerrissen wird. */
  break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kante);
}

.gericht__kopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.gang__pos {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--dunkel);
}

.gericht__preis {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--rot);
  white-space: nowrap;
}

.gericht__unter {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--schrift-zwei);
}
.gericht__unter sup {
  /* 0.75 statt 0.68: bei 14px Grundschrift sind das 10,5 statt 9,5px. Die
     Ziffern sind eine Pflichtangabe nach der Zusatzstoff-Verordnung — sie
     duerfen klein sein, aber lesbar bleiben. */
  font-size: 0.75em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

/* --------------------------------------------------- Kleingedrucktes --- */

.kartenfuss {
  display: flex;
  justify-content: center;
  padding: 80px 40px 96px;
  background: var(--dunkel);
  color: var(--grund);
}

.kartenfuss__innen {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: var(--schale);
}

.kartenfuss__spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.kartenfuss__block { display: flex; flex-direction: column; gap: 14px; }

.kartenfuss__titel {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--schrift-hell-drei);
}

/* Dreizehn Ziffern in drei Spalten — eine einzelne Kolonne aus dreizehn
   sehr kurzen Zeilen liest sich schlechter als drei kurze Blöcke. */
.kartenfuss__stoffe {
  /* Spaltenbreite statt Spaltenzahl: der Browser nimmt so viele, wie
     hineinpassen. Mit einer festen Zahl brach „8 — mit Milcheiweiss
     (Fleischerzeugnissen)" bei 320px aus der Seite heraus — 145px Spalte,
     laengeres Wort. Aufgefallen mit pruefe-breiten.mjs. */
  columns: 190px;
  column-gap: 24px;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.7;
  color: var(--schrift-hell-halb);
}
.kartenfuss__stoffe li { break-inside: avoid; }

.kartenfuss__hinweise {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--schrift-hell-drei);
}

.kartenfuss__gutschein {
  margin-top: 6px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--sand);
}

.kartenfuss__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}
/* Auf der dunklen Fläche trägt der Umrissknopf die helle Kante. */
.kartenfuss .knopf--umriss { color: var(--grund); }
.kartenfuss .knopf--umriss::after { border-color: var(--strich-hell); }
.kartenfuss .knopf--umriss:hover { background: var(--rand-hell-kraeftig); color: var(--dunkel); }

/* --------------------------------------------------------- Tablet ----- */

@media (min-width: 810px) and (max-width: 1199.98px) {
  .kartenkopf { padding: 140px 32px 60px; }
  .gang { padding: 60px 32px; }
  .gang__liste { column-gap: 40px; }
  .kartenfuss { padding: 68px 32px 80px; }
  .kartenfuss__spalten { gap: 36px; }
}

/* ---------------------------------------------------------- Phone ----- */

@media (max-width: 809.98px) {
  /* 48px Luft unter der Kopfleiste, wie Start- und Sortenseite. Vorher 120px
     Polster: der Inhalt fing auf dem Telefon 120px unter der Leiste an, die
     anderen Seiten bei 48. Gemeldet vom Betreiber am 04.09.2026 („die Schrift
     ist so leicht unten statt oben direkt der Seite"), nachgemessen mit
     pruefe-breiten.mjs. */
  .kartenkopf { padding: 48px 20px 48px; }
  .kartenkopf__innen { align-items: flex-start; text-align: left; }
  .kartennav__liste { justify-content: flex-start; }

  .gang { padding: 48px 20px; scroll-margin-top: 88px; }
  .gang__innen { gap: 24px; }
  /* Auf dem Telefon ist der Kopf der Griff: Bild links, Text rechts, Pfeil
     am Rand. Untereinander gestapelt waere der Griff hoeher als der Inhalt,
     den er aufklappt. */
  .gang__kopf { gap: 16px; align-items: flex-start; }
  .gang__bild { width: 84px; height: 84px; }
  /* Unter 400px bleiben neben Bild und Pfeil nur rund 140px fuer den Titel. */
  .gang__titel { font-size: clamp(24px, 7.5vw, 34px); }
  .gang__caret { display: block; align-self: center; }
  .gang__falt[open] .gang__caret { transform: rotate(180deg); }
  .gang__vorspann { display: none; }
  .gang__falt[open] .gang__vorspann { display: block; }
  .gang__liste { margin-top: 24px; }
  /* Eine Spalte: bei 390px bleiben für zwei je 175px, und dann steht der
     Preis unter der Position statt daneben. */
  .gang__liste { columns: 1; }

  .kartenfuss { padding: 56px 20px 72px; }
  .kartenfuss__spalten { grid-template-columns: 1fr; gap: 32px; }
}