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

* { 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); }

/* --- 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);
}
.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; }
  /* Reduziertes Wrap/Recipe-Top-Padding rückt den Masthead sonst zu nah an
     den fixierten Hamburger-Button heran (gefunden 2026-08-02, iPhone). */
  .masthead { margin-top: var(--space-4); }
}

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

.hero { text-align: center; margin-bottom: var(--space-6); }
.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-6); }
.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; }

/* --- Kapitel-Kacheln (Startseite), rein typografisch, textbreit --- */
.chapter-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: var(--space-6); }
.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; }

.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); }
  /* 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; }
  /* Reduziertes Wrap-Top-Padding rückt den Masthead sonst zu nah an den
     fixierten Hamburger-Button heran (gefunden 2026-08-02, iPhone). */
  .masthead { margin-top: var(--space-4); }
}

/* ============================================================
   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; }
}