/* ===================================================================
   Speisekarte — Webseite, Aufbau 1:1 nach der Taverne Mykonos
   ===================================================================
   Erwartet das Geruest aus index.html (Kopf, Fuss, Leiste) und die
   Marken-Token. Nur die Karte selbst steht hier.
   ------------------------------------------------------------------- */

/* --- Hero: Text links, Bild rechts -------------------------------- */
.k-hero {
  position: relative;
  background: radial-gradient(120% 90% at 18% 0%, var(--bg-2), var(--bg-0) 72%);
  color: var(--text);
  padding-top: calc(var(--nav-h) + 54px);
  padding-bottom: 64px;
}
.k-hero__innen {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.k-hero .eyebrow { display: flex; align-items: center; gap: 12px; }
.k-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; margin: 14px 0 18px;
}
.k-hero h1 em { font-style: normal; color: var(--accent); }
.k-hero__satz {
  color: var(--text-soft); line-height: 1.75; max-width: 52ch;
  margin: 0 0 30px; font-size: 16.5px;
}
.k-hero__satz a { color: var(--accent); text-underline-offset: 3px; }
.k-hero__tun { display: flex; flex-wrap: wrap; gap: 10px; }

/* Der Bogenrahmen — dieselbe Form wie die Bildrahmen der Startseite. */
.k-hero__bild { position: relative; }
.k-hero__bild img {
  display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  border-radius: 180px 180px 18px 18px;
  border: 8px solid var(--surface-2);
}
.k-plakette {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  z-index: 2; background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 9px 20px; border-radius: 999px;
  white-space: nowrap;
}

/* --- Das Blatt: Rubrikenspalte links, Karte rechts ---------------- */
.k-blatt { background: var(--surface); color: var(--ink); padding: 8px 0 72px; }
.k-raster { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 56px; }

.k-spalte { position: sticky; top: calc(var(--nav-h) + 22px); align-self: start;
  max-height: calc(100vh - var(--nav-h) - 44px); overflow-y: auto;
  scrollbar-width: thin; padding-bottom: 12px; }
.k-spalte__kopf {
  margin: 22px 0 10px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft); opacity: .8;
}
.k-spalte__kopf:first-child { margin-top: 0; }
.k-spalte__liste { list-style: none; margin: 0; padding: 0; }
.k-spalte__liste a {
  display: block; padding: 7px 12px; border-radius: 9px;
  font-size: 14px; line-height: 1.35; color: var(--ink-soft);
  text-decoration: none;
}
.k-spalte__liste a:hover { color: var(--ink); background: var(--surface-2); }
.k-spalte__liste a.ist-hier {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink); font-weight: 600;
}

/* --- Rubriken ----------------------------------------------------- */
.k-bereich {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 36px); color: var(--ink);
  margin: 56px 0 0; padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.k-bereich:first-child { margin-top: 30px; }

.k-gruppe { margin: 44px 0 0; scroll-margin-top: calc(var(--nav-h) + 26px); }
.k-zaehler {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .18em;
  color: var(--ink-soft); opacity: .75; font-variant-numeric: tabular-nums;
}
.k-gruppe__titel {
  font-family: var(--font-display); font-weight: 400; font-size: 29px;
  color: var(--ink); margin: 0 0 10px; line-height: 1.15;
}
.k-gruppe .maeander { margin-bottom: 12px; }
.k-unterzeile { margin: 0 0 4px; font-size: 14.5px; color: var(--ink-soft); font-style: italic; }
.k-liste { list-style: none; margin: 14px 0 0; padding: 0; }

.k-zeile {
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.k-oben { display: flex; align-items: baseline; gap: 14px; }
.k-titel {
  flex: 1 1 auto; font-family: var(--font-display); font-weight: 400;
  font-size: 19px; color: var(--ink); line-height: 1.25;
}
.k-nr {
  display: inline-block; min-width: 2.2em; font-family: var(--font-sans);
  font-size: 14px; font-weight: 700; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.k-menge {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 400;
  color: var(--ink-soft); padding-inline-start: 8px;
}
.k-preis {
  flex: none; font-family: var(--font-display); font-size: 18px;
  color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.k-text {
  margin: 4px 0 0; font-size: 14px; line-height: 1.55;
  color: var(--ink-soft); max-width: 62ch;
}

/* --- Bilder zwischen den Rubriken --------------------------------- */
.k-bild { margin: 30px 0 0; }
.k-bild img {
  display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: 16px;
}

/* --- Hinweise als Klappe ------------------------------------------ */
.k-klappe {
  margin: 48px 0 0; background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 12px;
}
.k-klappe summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 22px; cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none;
}
.k-klappe summary::-webkit-details-marker { display: none; }
.k-klappe summary svg { flex: none; transition: transform .2s ease; color: var(--ink-soft); }
.k-klappe[open] summary svg { transform: rotate(180deg); }
.k-klappe__inhalt { padding: 0 22px 20px; }
.k-klappe__inhalt p { margin: 0 0 9px; color: var(--ink-soft); line-height: 1.65; font-size: 14.5px; }
.k-klappe__inhalt p:last-child { margin: 0; }

/* --- Schlusskarte -------------------------------------------------- */
.k-schluss { background: var(--bg-0); color: var(--text); padding: 18px 0 86px; }
.k-karte {
  max-width: 720px; margin: 0 auto; text-align: center;
  padding: 46px 40px 44px; border-radius: 22px;
  background: var(--bg-1); border: 1px solid var(--line);
}
.k-karte .eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; }
.k-karte h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 12px;
}
.k-karte p { color: var(--text-soft); line-height: 1.7; margin: 0 auto 26px; max-width: 48ch; }
.k-karte .k-hero__tun { justify-content: center; }

/* --- Schmale Schirme ---------------------------------------------- */
@media (max-width: 1080px) {
  .k-raster { grid-template-columns: 186px minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 900px) {
  .k-hero__innen { grid-template-columns: 1fr; gap: 38px; }
  .k-hero__bild { order: -1; max-width: 420px; margin: 0 auto; }
  .k-hero { padding-top: calc(var(--nav-h) + 30px); padding-bottom: 44px; }
  /* Auf dem Handy gibt es keine Spalte daneben — die Rubriken werden zu
     einem waagerechten Band, das unter der Kopfzeile klebt.
     minmax(0, 1fr) ist Pflicht, nicht Geschmack: ein blosses `1fr` heisst
     `minmax(auto, 1fr)`, und die Mindestbreite des Bandes ist die Summe
     seiner 22 nicht umbrechenden Glieder. Gemessen bei 390 px Fenster
     waren die Zeilen dadurch 2687 px breit. */
  .k-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .k-spalte, .k-inhalt { min-width: 0; }
  .k-spalte {
    position: sticky; top: var(--nav-h); z-index: 30; max-height: none;
    overflow: visible; margin: 0 calc(var(--pad-inline, 16px) * -1) 18px;
    background: var(--surface); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .k-spalte nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 10px var(--pad-inline, 16px); }
  .k-spalte nav::-webkit-scrollbar { display: none; }
  .k-spalte__kopf { margin: 0; align-self: center; white-space: nowrap; padding-inline-end: 4px; }
  .k-spalte__liste { display: flex; gap: 6px; }
  .k-spalte__liste a { white-space: nowrap; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
  .k-bereich:first-child { margin-top: 8px; }
  .k-schluss { padding-bottom: calc(86px + var(--leiste-h, 57px)); }
  .k-karte { padding: 34px 22px 32px; }
}