/* ============================================================
   MARTIN'S KITCHEN — Gemeinsame Styles (Screen)
   Design-Tokens & Templates gemäss concepts/STYLEGUIDE.md
   Druckversion (@media print) bleibt unverändert pro Rezept-Datei.
   ============================================================ */

/* Schriften — lokal gehostet (seit 2026-09-27) statt von Google Fonts:
   sonst ging bei jedem Seitenaufruf die IP-Adresse der Besucher an Google.
   Dateien in fonts/, 1:1 so, wie Google sie ausliefert (gleiche woff2-
   Dateien, gleiche unicode-range), nur die Subsets latin + latin-ext.
   Pfade relativ zu dieser Datei — gelten deshalb für jede Seitentiefe.
   Manrope 800 nur für die Wortmarke auf der Startseite; der Browser lädt
   eine Schriftdatei erst, wenn sie tatsächlich gebraucht wird. */
/* Fraunces 300-700 — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces 300-700 — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 400 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 400 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 500 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 500 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 600 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 600 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope 800 — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/manrope-800-latin-ext.woff2) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope 800 — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/manrope-800-latin.woff2) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #050506; }

:root {
  --bg: #100f0d;
  --surface: #171511;
  --surface-raised: #201d18;
  --border: #2b2721;
  --gold: #d4ac4e;
  --gold-soft: #ad893c;
  --text: #ece6d8;
  --muted: #746c5c;
  --font-display: 'Fraunces', serif;
  --font-body: 'Karla', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 20px;
  --space-5: 32px; --space-6: 48px; --space-7: 72px;
  --radius: 3px;
}

body { background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; }
a { color: inherit; }

/* --- Hamburger-Menü (auf jeder Seite) --- */
.menu-btn {
  position: fixed; top: var(--space-4); left: var(--space-4); z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.menu-btn:hover { border-color: var(--gold-soft); }
.menu-btn svg { width: 16px; height: 16px; }
.menu-btn svg rect { fill: var(--muted); }
.menu-panel {
  position: fixed; top: calc(var(--space-4) + 48px); left: var(--space-4); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 190px; padding: var(--space-2); box-shadow: 0 10px 30px #00000066;
}
.menu-panel[hidden] { display: none; }
.menu-panel a {
  display: block; padding: 9px 12px; border-radius: 4px;
  font-family: var(--font-body); font-size: 14px; color: var(--text); text-decoration: none;
}
.menu-panel a:hover { background: #ffffff0c; color: var(--gold); }
/* Der Favoriten-Eintrag führt zu Rezepten, die drei darunter zu Erklärtexten
   — die Linie hält Martins bewusste 3er-Struktur des Info-Teils als Gruppe
   sichtbar, statt das Menü auf vier gleichwertige Einträge aufzuweichen
   (siehe common.menu_panel_html). */
.menu-panel .menu-favoriten {
  display: flex; align-items: center; gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  border-radius: 4px 4px 0 0; padding-bottom: 11px; margin-bottom: var(--space-1);
  color: var(--gold);
}
.menu-panel .menu-favoriten svg { flex: none; }

/* --- Druck-Button (spiegelbildlich oben rechts) --- */
.print-btn {
  position: fixed; top: var(--space-4); right: var(--space-4); z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.print-btn:hover { border-color: var(--gold-soft); }
.print-btn svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-btn:hover svg { stroke: var(--gold); }

/* --- Teilen-Button (links neben dem Druck-Button) --- */
.share-btn {
  position: fixed; top: var(--space-4); right: calc(var(--space-4) + 48px); z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.share-btn:hover { border-color: var(--gold-soft); }
.share-btn svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn:hover svg { stroke: var(--gold); }
.share-btn.copied svg { stroke: var(--gold); }

/* --- Masthead (Unterseiten, siehe common.masthead_html) --- */
.masthead {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; color: var(--muted);
  margin: 0 0 var(--space-5);
  /* In derselben Zeile wie die fixierten Knöpfe (seit 2026-09-25, erst mobil,
     am selben Tag auch Desktop): vorher stand er in einer eigenen Zeile
     darunter. Der negative margin-top hebt ihn vom Wrap-/Recipe-Padding
     (--space-7, mobil --space-6, siehe 480px-Blöcke) auf Knopfhöhe (top:
     --space-4), min-height = Knopfhöhe zentriert ihn daneben, das seitliche
     Padding hält die Linien vom ☰-Knopf fern (bei schmalen Fenstern reicht
     .wrap bis an den Rand). Bewusst nicht über ein kleineres .wrap-Padding —
     das schöbe auf der Startseite (kein Masthead) die Wortmarke an den Knopf. */
  margin-top: calc(var(--space-4) - var(--space-7)); min-height: 40px;
  padding: 0 56px; white-space: nowrap;
}
/* Rezeptseite: rechts sitzen Teilen + Drucken (bis 108px vom Rand), deshalb
   beidseitig mehr Platz — symmetrisch, damit der Schriftzug mittig bleibt. */
.recipe .masthead { padding: 0 96px; }
.masthead::before, .masthead::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--border); }

/* --- Zurück-Link --- */
.back-link {
  display: block; width: fit-content; margin: 0 auto var(--space-5);
  font-family: var(--font-body); font-size: 12px; color: #cfcac0; text-decoration: none;
  border: 1px solid #ffffff33; padding: 7px 14px; border-radius: 20px;
}
.back-link:hover { border-color: var(--gold-soft); color: var(--gold); }

/* ============================================================
   REZEPTSEITE — "Speisekarte, dezent"
   ============================================================ */
.recipe {
  max-width: 620px; margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-7);
}

.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--space-2); text-align: center;
}
h1.title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 6vw, 46px); line-height: 1.05;
  margin: 0 0 var(--space-3); color: var(--text); text-align: center;
}
.favorit { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.intro {
  font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.55;
  color: var(--muted); max-width: 46ch; margin: 0 auto var(--space-3); text-align: center;
}
.intro[hidden] { display: none; }
.meta { display: flex; justify-content: center; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); flex-wrap: wrap; }
.meta[hidden] { display: none; }
.meta span:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--border); }

.nutrition { display: flex; justify-content: center; gap: 12px; font-size: 11.5px; color: var(--muted); opacity: .8; margin-bottom: var(--space-3); flex-wrap: wrap; font-family: var(--font-mono); }
.nutrition[hidden] { display: none; }
.nutrition span:not(:last-child)::after { content: "·"; margin-left: 12px; color: var(--border); }

.source-line { text-align: center; font-size: 12px; font-style: italic; color: var(--muted); opacity: .75; margin: 0 0 var(--space-5); }
.source-line[hidden] { display: none; }
.source-line a { color: inherit; }

.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); justify-content: center; }
.tags[hidden] { display: none; }
.tag {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--gold-soft);
  padding: 4px 10px; border-radius: 20px;
}

.hero-photo { margin: 0 0 var(--space-5); border-radius: var(--radius); overflow: hidden; }
.hero-photo[hidden] { display: none; }
.hero-photo img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }

.process-photos { display: flex; gap: var(--space-3); margin: var(--space-2) 0 var(--space-6); }
.process-photos[hidden] { display: none; }
.process-photo { flex: 1; }
.process-photo .frame { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.process-photo .frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.process-photo figcaption { text-align: center; font-size: 11.5px; font-style: italic; color: var(--muted); margin-top: 6px; }

section { margin-bottom: var(--space-6); }
section[hidden] { display: none; }
section > h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  margin: 0 0 var(--space-4); color: var(--text);
  text-align: center; display: flex; align-items: center; gap: var(--space-3);
  font-variant: small-caps; letter-spacing: .04em;
}
section > h2::before, section > h2::after { content: ""; flex: 1; height: 1px; background: var(--gold-soft); }

.ingredient-group { margin-bottom: var(--space-3); }
.ingredient-group h3 {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--space-1); font-weight: 600;
}
.ingredient-group h3[hidden] { display: none; }
.ingredient-group ul { list-style: none; margin: 0; padding: 0; }
.ingredient-group li {
  display: flex; gap: var(--space-2); padding: 5px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.4;
}
.ingredient-group li:last-child { border-bottom: none; }
.qty {
  font-family: var(--font-mono); font-size: 12px; color: var(--gold);
  min-width: 62px; flex-shrink: 0; text-align: right; padding-top: 1px;
}
.name em { color: var(--muted); font-style: italic; }

.prep ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.prep li {
  counter-increment: step; position: relative;
  padding: var(--space-3) 0 var(--space-3) 40px;
  border-bottom: 1px solid var(--border);
  font-size: 16.5px; line-height: 1.65;
}
.prep li:last-child { border-bottom: none; }
.prep li::before {
  content: counter(step); position: absolute; left: 0; top: var(--space-3);
  font-family: var(--font-mono); font-size: 13px; color: var(--gold);
  width: 26px; text-align: right;
}
.step-label { font-weight: 600; color: var(--text); }
.step-text { color: var(--muted); }

.pairs p { margin: 0; font-size: 16.5px; color: var(--muted); line-height: 1.6; }

.tips .tip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.tips .tip:last-child { margin-bottom: 0; }
.tips .tip h3 { font-family: var(--font-display); font-weight: 600; font-size: 17.5px; color: var(--gold); margin: 0 0 6px; }
.tips .tip p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text); opacity: .9; }

@media (max-width: 480px) {
  .recipe { padding: var(--space-6) var(--space-4); }
  .process-photos { flex-direction: column; }
}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.wrap { max-width: 900px; margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-7); }

/* Abstände der Startseite in zwei Stufen (2026-09-25): zwischen den Gruppen
   (Hero/Suche → Kacheln → Neuste Rezepte) --space-5, innerhalb der Kachel-
   Gruppe (Favoriten ↔ Kapitel, Kapitel untereinander) 10px. Vorher fünf
   verschiedene Werte, u. a. zweimal 48px — auf dem iPhone viel zu luftig. */
.hero { text-align: center; margin-bottom: var(--space-5); }
.hero .title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(38px, 7vw, 58px); margin: 0 0 var(--space-3); color: var(--text);
}
.hero .title .accent { color: var(--gold); }
.hero.wordmark .title { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.hero .tagline { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--muted); margin: 0 0 var(--space-3); }
/* Sammlungs-Zeile ("59 Rezepte · letztes neues Rezept am …", von build-index.py
   gesetzt): Mono wie .chapter-tile-count — Zählwerte sind auf der Seite
   durchgehend Mono. Der Abstand zum Suchfeld sitzt hier, die Tagline darüber
   hat deshalb nur noch --space-3; ist die Zeile mal leer (kein einziges
   publiziertes Rezept), rückt der Hero entsprechend enger zusammen.
   Farbe volles --gold (Martins Entscheid 2026-08-16, nach Variantenvergleich
   --muted/75% → --gold-soft → --gold): die ersten beiden Stufen waren ihm am
   Bildschirm zu zurückhaltend. Damit steht im oberen Seitendrittel dreimal
   derselbe Goldton ("kitchen" in der Wortmarke, diese Zeile, "NEUSTE REZEPTE")
   — bewusst in Kauf genommen, die Wortmarke hält ihren Rang über Schriftgrösse
   und Manrope-800 statt über die Farbe. */
.hero .collection-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--gold); margin: 0 0 var(--space-5);
}

.search-wrap { display: flex; justify-content: center; margin-bottom: var(--space-4); }
/* Auf der Startseite sitzt das Suchfeld im Hero, dessen margin-bottom trägt
   den Abstand. Auf den Kapitel-Seiten steht .search-wrap ohne Hero: dort
   --space-4 bis "Filter anzeigen" (bis 2026-09-25 --space-6, zu luftig). */
.hero .search-wrap { margin-bottom: 0; }
.search-inner { position: relative; width: 100%; max-width: 420px; }
.search-inner input {
  width: 100%;
  font-family: var(--font-body);
  /* Mindestens 16px: iOS Safari zoomt beim Fokussieren automatisch in ein
     Eingabefeld hinein, wenn dessen Schrift kleiner ist — die Seite blieb
     danach vergrössert und rechts abgeschnitten stehen (gefunden 2026-08-31
     auf dem iPhone). Bewusst in der Grundregel, nicht nur im 480px-Block:
     im Querformat (844px) greift der Media Query nicht. */
  font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  padding: 12px 20px; outline: none;
}
.search-inner input::placeholder { color: var(--muted); }
.search-inner input:focus { border-color: var(--gold-soft); }

.search-results {
  text-align: left; /* .hero vererbt center - lange Titel brachen sonst mittig um */
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px #00000066;
  /* Scrollbar statt abgeschnitten: die Trefferliste ist im JS auf 50 gedeckelt,
     die Höhe entspricht weiterhin rund acht Zeilen. min(..., 55vh) fängt das
     iPhone im Querformat mit offener Tastatur ab. */
  max-height: min(340px, 55vh); overflow-y: auto; overflow-x: hidden;
}
.search-results[hidden] { display: none; }
.search-results a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: 10px 14px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: #ffffff0c; }
.search-results .sr-title { font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.search-results .sr-kapitel { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.search-results .sr-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); font-style: italic; }

/* --- Filter-Pills, wiederverwendet für den Tag-Filter auf Kapitel-Seiten --- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-4); }
.filter-pills button {
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
}
.filter-pills button.active { color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 600; }
/* Achse "Auszeichnung": eine einzige Pille mit Krone (favorit ist ein
   Boolean, kein Vokabular — siehe filter_groups_html). Im aktiven Zustand
   liegt die Krone auf goldenem Grund, deshalb dort dunkle Kontur. */
.filter-pills button.pill-favorit { display: inline-flex; align-items: center; gap: 6px; }
.filter-pills button.pill-favorit svg { flex: none; }
.filter-pills button.pill-favorit.active svg { stroke: var(--bg); }

/* --- Favoriten-Kachel (Startseite), über der Kapitel-Reihe ---
   Entscheid 2026-09-25: bewusst breiter, mit Krone und goldenem Rand statt
   als achte Kachel in der Reihe — die Favoriten sind ein eigener Weg in die
   Sammlung, kein weiteres Kapitel. Als gleich aussehende Kachel ginge das
   zwischen sieben Geschwistern optisch unter.
   Seit 2026-09-26 in denselben Massen wie die Kapitel-Kacheln (Padding,
   15px-Titel, gleiche Höhe; Krone 18px): die grössere erste Fassung wirkte
   zu wuchtig. Abheben tut sie sich über Gold, Krone und goldenen Rand —
   Variantenvergleich, Martins Wahl. */
.favoriten-tile-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.favoriten-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--gold-soft); border-radius: var(--radius);
  background: var(--surface); text-decoration: none;
}
.favoriten-tile:hover { border-color: var(--gold); background: var(--surface-raised); }
.favoriten-tile-icon { display: flex; flex: none; }
.favoriten-tile-icon svg { width: 18px; height: 18px; }
.favoriten-tile-text { display: flex; flex-direction: column; gap: 2px; }
.favoriten-tile-name {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  line-height: 1.2; color: var(--gold);
}
.favoriten-tile-count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em;
  color: var(--muted); opacity: .85;
}

/* --- Kapitel-Kacheln (Startseite), rein typografisch, textbreit --- */
.chapter-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: var(--space-5); }
.chapter-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 18px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  transition: border-color .15s ease;
}
.chapter-tile:hover { border-color: var(--gold-soft); }
.chapter-tile-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.2; }
.chapter-tile-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; color: var(--muted); opacity: .75; }

.section-label { text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-4); }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4); text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--gold-soft); }
.card .thumb {
  aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; margin-bottom: 6px;
  background: var(--surface);
}
.card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card .favorit-badge { display: flex; }
.card .eyebrow { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-align: left; margin: 0; }
/* overflow-wrap: lange, unteilbare Titelwörter ("Eierschwämmliragout") ragen
   sonst aus der schmalen Handy-Spalte heraus — siehe .recipe-grid im
   480px-Block. Bewusst OHNE hyphens: auto (Variantenvergleich 2026-08-31):
   das trennte auch Titel, die ohnehin sauber umbrachen ("Avocado-Thunfisch-
   Sa-lat"), und Safari/Chrome trennen nach unterschiedlichen Mustern. */
.card .name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; margin: 0;
  overflow-wrap: break-word; }
.card .gastrezept-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--gold-soft);
  border: 1px solid var(--gold-soft); border-radius: 999px; padding: 4px 12px;
  align-self: flex-start;
  /* Kein white-space: nowrap (gefunden 2026-08-31): die Pill ist bei langen
     Namen ~167px breit und ragte damit auf schmalen Geräten (≤375px) aus der
     Karte. Bricht jetzt bei Bedarf zwischen "Gastrezept ·" und dem Namen um. */
  white-space: normal; max-width: 100%; overflow-wrap: break-word;
}
.card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; margin-bottom: 0; justify-content: flex-start; }
.card .tag { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); padding: 2px 8px; border-radius: 12px; }
.card .added { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); opacity: .7; margin-top: auto; padding-top: 6px; }

/* --- Favoriten-Seite (favoriten/index.html) ---
   Die Gruppen-Überschriften nutzen das bestehende `section > h2`-Motiv
   (Fraunces, small-caps, dünne Goldlinien links/rechts) — dasselbe, das auf
   jeder Rezeptseite "Zutaten"/"Zubereitung" trägt. Kein eigenes Markup. */
.favoriten-intro {
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
  max-width: 44ch; margin: var(--space-3) auto 0;
}
.favoriten-gruppe:last-child { margin-bottom: 0; }

.empty-state { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 17px; padding: var(--space-6) 0; }
.empty-state[hidden] { display: none; }

@media (max-width: 480px) {
  .wrap { padding: var(--space-6) var(--space-3); }
  /* minmax(0, 1fr), nicht 1fr: "1fr" heisst minmax(auto, 1fr) — die Untergrenze
     ist dann die min-content-Breite der Karte (längstes unteilbares Titelwort).
     War es breiter als die halbe Zeile, zog diese Spalte Breite von der anderen
     ab und das Grid wurde breiter als der Container (auf dem iPhone rechts aus
     dem Bild geragt, gefunden 2026-08-31). */
  .recipe-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
  /* Kachel bleibt textbreit und zentriert, wie die Kapitel-Kacheln darunter
     — nur durch Krone und goldenen Rand schwerer gewichtet. ⚠️ Hier stand
     bis 2026-09-25 abends `width: 100%`: über die volle Spaltenbreite
     gezogen wirkte die Kachel auf dem echten iPhone unangenehm breit, weil
     Krone und Text am linken Rand klebten und rechts eine grosse leere
     Fläche stehen blieb — neben der textbreiten Kapitel-Reihe darunter fiel
     das als Fremdkörper auf (Martins Befund am Gerät, am gerenderten
     Variantenvergleich entschieden). Innenabstand wie die Kapitel-Kacheln. */
  .favoriten-tile-wrap { margin-bottom: var(--space-2); }
  /* Mobile Abstände (2026-09-25): Hero → Kacheln --space-4, Kacheln unter-
     einander 8px, vor "Neuste Rezepte" --space-5 (neuer Abschnitt). Karten-
     Innenabstand 12px statt 20px — gilt auch auf Kapitel-/Favoriten-Seite,
     in der ~180px schmalen Spalte machte das Padding die Bilder sonst klein. */
  .hero { margin-bottom: var(--space-4); }
  .hero .collection-meta { margin-bottom: var(--space-4); }
  .chapter-tiles { gap: var(--space-2); margin-bottom: var(--space-5); }
  .chapter-tile { padding: 8px 14px; }
  .section-label { margin-bottom: var(--space-3); }
  .card { padding: var(--space-3); }
  .favoriten-tile { padding: 8px 14px; }   /* wie .chapter-tile hier */
  .favoriten-intro { font-size: 13px; }
  /* 17px statt 19px: in der halb so breiten Spalte brechen sonst 15 Titelwörter
     der Sammlung hart mitten im Wort um ("Kräuterspargel", "Lammnierstück");
     bei 17px sind es noch 6. Entscheid 2026-08-31 nach Variantenvergleich. */
  .card .name { font-size: 17px; }
  /* In 11px Mono ist die Zeile ~360px breit und bräche auf schmalen Geräten
     (iPhone SE: 375px - 2×12px Padding = 351px) bzw. bei langen Monatsnamen
     wie "September" um. 10px hält sie einzeilig; bricht sie auf sehr schmalen
     Geräten trotzdem, sorgt line-height für einen sauberen zweizeiligen Satz. */
  .hero .collection-meta { font-size: 10px; line-height: 1.5; }
  /* Masthead auf Knopfhöhe, siehe Grundregel — hier nur das kleinere Padding. */
  .masthead { margin-top: calc(var(--space-4) - var(--space-6)); }
  /* Kopf der Unterseiten straffer: 20 statt 32px zwischen Masthead,
     Zurück-Link und Titel; auf den Kapitel-Seiten 12 statt 48px zwischen
     Suchfeld und "Filter anzeigen". .hero .search-wrap (Startseite) ist
     spezifischer und bleibt bei 0. */
  .masthead { margin-bottom: var(--space-4); }
  .back-link { margin-bottom: var(--space-4); }
  .search-wrap { margin-bottom: var(--space-3); }
}

/* ============================================================
   KAPITEL-SEITE — eigene Seite pro Kapitel (kapitel/<slug>/index.html)
   ============================================================ */
.kapitel-header { text-align: center; margin-bottom: var(--space-4); }
.kapitel-header h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 6vw, 46px); line-height: 1.05; margin: 0 0 var(--space-2); color: var(--text);
}
.kapitel-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); opacity: .8; margin: 0; }

.load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-6); }
.load-more-wrap[hidden] { display: none; }
.load-more {
  font-family: var(--font-body); font-size: 13.5px; letter-spacing: .03em; color: var(--text);
  background: transparent; border: 1px solid var(--border); padding: 11px 28px;
  border-radius: 20px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.load-more:hover { border-color: var(--gold-soft); color: var(--gold); }

.filter-toggle-wrap { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.filter-toggle {
  font-family: var(--font-body); font-size: 12px; color: #cfcac0; text-decoration: none;
  background: transparent; border: 1px solid #ffffff33; padding: 7px 14px;
  border-radius: 20px; cursor: pointer;
}
.filter-toggle:hover { border-color: var(--gold-soft); color: var(--gold); }
.filter-toggle.active { border-color: var(--gold); color: var(--gold); font-weight: 600; }

.filter-groups { margin-bottom: var(--space-4); }
.filter-groups[hidden] { display: none; }
.filter-group { margin-bottom: var(--space-3); }
.filter-group:last-child { margin-bottom: 0; }
.filter-group-label {
  text-align: center; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
}
.filter-group .filter-pills { margin-bottom: 0; }

/* ============================================================
   INFO-SEITEN — Über mich / Rezepte / Feedback (einmalige, von
   build-index.py generierte statische Seiten, kein Rezept-/Kapitel-Bezug)
   ============================================================ */
.info-page-body {
  max-width: 640px; margin: 0 auto; font-family: var(--font-body);
  font-size: 16px; line-height: 1.7; color: var(--text);
}
.info-page-body p { margin: 0 0 var(--space-4); }
.info-page-body a { color: var(--gold); }
.info-placeholder { font-style: italic; color: var(--muted); }
.about-portrait { display: block; width: 220px; max-width: 60%; margin: 0 auto var(--space-5); }
.about-portrait img { display: block; width: 100%; height: auto; }

/* ============================================================
   PRINT — Basisregeln, gelten für alle Seiten
   ============================================================ */
@media print {
  html, body { background: #fff !important; min-height: 0 !important; }
  .menu-btn, .menu-panel, .print-btn, .share-btn, .back-link, .screen-only { display: none !important; }
}