/* ==========================================================
   Hankobuch – Sumi-Design
   Alle Farben, Schriften und Abstände als Variablen
   ========================================================== */

@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/shippori-mincho-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/shippori-mincho-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1C1B19;          /* Hintergrund */
  --ink-2: #232220;        /* leicht angehoben */
  --ink-3: #2C2A26;        /* Fotos / Flächen */
  --line: #3A3833;         /* feine Linien */
  --line-2: #4A4842;
  --paper: #EAE4D8;        /* Text */
  --paper-2: #F2EEE6;      /* Text auf Rot */
  --muted: #A8A196;        /* Nebeninfos */
  --muted-2: #8F897F;      /* abgehakt */
  --seal: #C2533B;         /* Stempelrot – einziger Akzent */

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --sans: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 26px;
  --max: 520px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --round: #2C2A26;        /* runde Knöpfe in der Kopfzeile */
  --scrim: 28, 27, 25;     /* Verlauf über Fotos (RGB) */
  --desk: #141312;         /* Fläche neben der App am Desktop */
  --desk-line: #2A2926;
  --shadow: rgba(0, 0, 0, 0.45);
  --tile: #252421;         /* Kachelfläche */
  --seal-text: #E07A63;    /* rote Schrift auf dunklem Grund */
  color-scheme: dark;
}

/* Heller Modus: Reispapier statt Tusche */
:root[data-look="light"] {
  --ink: #F2EEE6;
  --ink-2: #EAE5DA;
  --ink-3: #DDD5C6;
  --line: #D3CBBD;
  --line-2: #B9B0A0;
  --paper: #1F1D1A;
  --paper-2: #FBF8F2;
  --muted: #5C574F;
  --muted-2: #6B655C;
  --seal: #B5452F;
  --round: #E6E0D4;
  --scrim: 242, 238, 230;
  --desk: #E4DED2;
  --desk-line: #D6CEC0;
  --shadow: rgba(60, 40, 20, 0.22);
  --tile: #E8E2D6;
  --seal-text: #A33E29;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Kein Gummiband-Überziehen der ganzen Seite (iOS-Homescreen-App) */
html, body { overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
h1[tabindex="-1"]:focus { outline: none; }

/* Zahlenfelder ohne Pfeiltasten */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scrollbalken ausblenden, Scrollen bleibt */
.noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.noscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- Grundbausteine ---------- */

.screen {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.serif { font-family: var(--serif); }

.icon-btn {
  width: 44px; height: 44px;
  border: 0; border-radius: 22px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}
.icon-btn--solid { background: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; stroke: var(--paper); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--seal);
  color: var(--paper-2);
  font-family: var(--serif);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.stamp--xs { width: 24px; height: 24px; font-size: 13px; }
.stamp--sm { width: 28px; height: 28px; font-size: 15px; }
.stamp--md { width: 34px; height: 34px; font-size: 18px; }
.stamp--lg { width: 40px; height: 40px; font-size: 22px; }
.stamp--outline { background: transparent; border: 1px solid var(--seal); color: var(--seal); }

.btn {
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--paper);
  background: transparent;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
}
.btn--primary { background: var(--paper); color: var(--ink); font-weight: 700; border-color: var(--paper); }
.btn--seal { background: var(--seal); color: var(--paper-2); border-color: var(--seal); font-weight: 700; }
.btn--quiet { border-color: var(--line); }
.btn--danger { border-color: var(--seal); color: var(--seal); }
.btn--block { width: 100%; }
.btn:disabled { border-color: var(--line); color: var(--muted-2); cursor: default; }

.text-link {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 17px;
  text-decoration: none;
  background: none; border: 0; padding: 0;
}
.text-link svg { width: 28px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; }

.check {
  width: 16px; height: 16px;
  border: 1px solid var(--paper);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.check svg { width: 11px; height: 11px; stroke: var(--paper-2); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
[aria-checked="true"] > .check, [aria-pressed="true"] > .check { background: var(--seal); border-color: var(--seal); }
[aria-checked="true"] > .check svg, [aria-pressed="true"] > .check svg { visibility: visible; }

.progress { display: flex; gap: 4px; }
.progress span { flex: 1; height: 3px; background: var(--line); transition: background-color 0.25s ease; }
.progress span.is-on { background: var(--seal); }
.progress span.is-now { background: var(--paper); }

.bowl { stroke: var(--paper); fill: none; stroke-linecap: round; }

/* ---------- Übersicht ---------- */

.ov-head {
  padding: calc(16px + var(--safe-top)) var(--gutter) 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ov-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ov-row--title { align-items: flex-end; }
.ov-head h1 { margin: 0; min-width: 0; font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; overflow-wrap: anywhere; }
.ov-actions { display: flex; align-items: center; gap: 8px; }

.round-btn {
  width: 44px; height: 44px;
  border: 0; border-radius: 22px;
  background: var(--round);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.round-btn svg { width: 20px; height: 20px; stroke: var(--paper); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.round-btn svg .fill { fill: var(--paper); stroke: none; }

.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.segmented button {
  min-height: 48px;
  border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.segmented button svg .fill { fill: currentColor; stroke: none; }
.segmented button[aria-checked="true"] { background: var(--paper); color: var(--ink); }

.search {
  margin: 20px var(--gutter) 0;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--paper);
}
.search svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0; height: 44px;
  border: 0; background: transparent;
  font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted-2); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.chips {
  margin-top: 18px;
  padding: 0 var(--gutter);
  display: flex; gap: 8px;
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
}
.chip {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--line);
  background: transparent;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.chip--plain { padding: 0 16px; justify-content: center; }
.chip[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.list-head {
  margin: 22px var(--gutter) 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
}
.list-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500; }

.rlist { list-style: none; margin: 0; padding: 0 var(--gutter) calc(110px + var(--safe-bottom)); }
.rrow {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.thumb {
  position: relative;
  width: 72px; height: 72px; flex-shrink: 0;
  background: var(--ink-3);
  border-radius: 2px 18px 2px 2px;
  display: flex; align-items: center; justify-content: center;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.thumb .stamp { position: absolute; right: -6px; bottom: -6px; }
.rrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rrow-title { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.3; overflow-wrap: anywhere; }
.rrow-meta { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.rrow > svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.5; flex-shrink: 0; }

.empty { padding: 48px var(--gutter); text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty p { margin: 0; max-width: 260px; }

.fab {
  position: fixed;
  right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  bottom: calc(28px + var(--safe-bottom));
  width: 60px; height: 60px;
  background: var(--seal);
  box-shadow: 0 6px 18px var(--shadow);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  z-index: 5;
}
.fab svg { width: 24px; height: 24px; stroke: var(--paper-2); fill: none; stroke-width: 1.75; stroke-linecap: round; }

.hint {
  margin: 18px var(--gutter) 0;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--line);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px; line-height: 1.55;
}
.hint p { margin: 0; flex: 1; }
.hint strong { font-weight: 500; color: var(--paper); }
.hint .icon-btn { width: 32px; height: 32px; margin: -6px -6px 0 0; }
.hint .icon-btn svg { width: 14px; height: 14px; }

/* ---------- Rezeptansicht ---------- */

.hero {
  position: relative;
  height: calc(316px + var(--safe-top));
  background: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.has-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(var(--scrim), 0.92), rgba(var(--scrim), 0));
}
.hero-bar {
  position: absolute; top: calc(14px + var(--safe-top)); left: 16px; right: 16px;
  display: flex; justify-content: space-between; z-index: 2;
}
.hero-title {
  position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.hero-title h1 { margin: 6px 0 0; font-family: var(--serif); font-size: 36px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; overflow-wrap: anywhere; }

.facts {
  margin: 0 28px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
}
.fact { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact-value { height: 40px; display: flex; align-items: center; font-family: var(--serif); font-size: 22px; }
.fact-label { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
.stepper { height: 40px; display: flex; align-items: center; gap: 6px; }
.stepper button { width: 40px; height: 40px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.stepper button svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.stepper button:disabled svg { stroke: var(--line-2); }
.stepper output { min-width: 22px; text-align: center; font-family: var(--serif); font-size: 22px; }

.section { margin: 18px 28px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; }
.section-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.section-head .count { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.section .progress { margin: 4px 0 10px; }

.ing-list { list-style: none; margin: 0; padding: 0; }
.ing-row {
  width: 100%;
  min-height: 46px;
  padding: 6px 0;
  border: 0; border-top: 1px solid var(--line);
  background: transparent;
  display: flex; align-items: center; gap: 16px;
  text-align: left;
  font-size: 14px; letter-spacing: 0.04em;
}
.ing-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ing-amount { color: var(--muted); font-size: 13px; text-align: right; flex-shrink: 0; }
.ing-row[aria-checked="true"] .ing-name { text-decoration: line-through; color: var(--muted-2); }

.reset-link { margin-top: 6px; background: none; border: 0; padding: 8px 0; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }

.steps-list { list-style: none; margin: 0; padding: 0; }
.steps-list li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.steps-list .n { width: 22px; flex-shrink: 0; font-family: var(--serif); font-size: 18px; color: var(--seal); line-height: 1.3; }

.detail-foot {
  margin-top: auto;
  padding: 26px 28px calc(24px + var(--safe-bottom));
  display: flex; justify-content: flex-end;
}

/* ---------- Formular ---------- */

.form-head {
  position: sticky; top: 0; z-index: 4;
  background: var(--ink);
  padding: calc(12px + var(--safe-top)) 14px 12px;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center;
}
.form-head h1 { margin: 0; text-align: center; font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }

.form { padding: 22px var(--gutter) 32px; display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.line-input {
  height: 44px;
  border: 0; border-bottom: 1px solid var(--paper);
  background: transparent;
  font-size: 16px;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.line-input:focus { border-bottom-color: var(--seal); }
.line-input::placeholder, textarea::placeholder { color: var(--muted-2); }
.line-input--title { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.line-input--num { font-family: var(--serif); font-size: 20px; }

.photo-pick {
  position: relative;
  height: 170px;
  border: 1px dashed var(--line-2);
  background: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden;
}
.photo-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.photo-pick svg { width: 28px; height: 28px; stroke: var(--muted); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.photo-actions { display: flex; gap: 8px; }
.photo-actions .btn { min-height: 40px; font-size: 13px; padding: 0 14px; font-family: var(--sans); letter-spacing: 0.1em; }

.stamp-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pick {
  height: 78px;
  border: 1px solid var(--line);
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.pick .stamp { background: transparent; border: 1px solid var(--seal); color: var(--seal); }
.pick[aria-checked="true"] { border: 1.5px solid var(--seal); background: var(--ink-3); color: var(--paper); }
.pick[aria-checked="true"] .stamp { background: var(--seal); color: var(--paper-2); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.unit-wrap { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--paper); }
.unit-wrap .line-input { border-bottom: 0; flex: 1; min-width: 0; }
.unit-wrap span { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; }
.form-stepper { height: 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--paper); }
.form-stepper button { width: 40px; height: 40px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.form-stepper svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.form-stepper output { font-family: var(--serif); font-size: 20px; }

.block-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--paper); }
.block-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500; }

.ing-edit {
  display: grid;
  grid-template-columns: 58px 58px minmax(0, 1fr) 36px;
  gap: 8px; align-items: center;
  border-bottom: 1px solid var(--line);
}
.ing-edit input {
  height: 46px; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-size: 15px; border-radius: 0;
}
.ing-edit input:focus { box-shadow: inset 0 -1px 0 var(--seal); }
.ing-edit .qty, .ing-edit .unit { color: var(--muted); }
.row-del { width: 36px; height: 36px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.row-del svg { width: 14px; height: 14px; stroke: var(--muted-2); fill: none; stroke-width: 1.5; stroke-linecap: round; }

.step-edit { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.step-edit .n { width: 20px; padding-top: 2px; font-family: var(--serif); font-size: 18px; color: var(--seal); flex-shrink: 0; }
.step-edit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-edit textarea {
  width: 100%;
  border: 0; background: transparent; outline: none; resize: none;
  font-size: 15px; line-height: 1.55;
  min-height: 48px;
}
.step-timer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); letter-spacing: 0.1em; }
.step-timer input { width: 56px; height: 32px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; outline: none; font-size: 14px; text-align: center; border-radius: 0; }
.step-timer input:focus { border-bottom-color: var(--seal); }

.add-btn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0; border: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: 0.1em; color: var(--seal);
}
.add-btn svg { width: 14px; height: 14px; stroke: var(--seal); fill: none; stroke-width: 2; stroke-linecap: round; }

.save-bar {
  position: sticky; bottom: 0; z-index: 4;
  margin-top: auto;
  padding: 14px var(--gutter) calc(18px + var(--safe-bottom));
  background: var(--ink);
  border-top: 1px solid var(--line);
}
.form-error { color: var(--seal); font-size: 13px; margin: 0 0 10px; }

/* ---------- Kochmodus ---------- */

.cook { padding: calc(14px + var(--safe-top)) var(--gutter) calc(24px + var(--safe-bottom)); }
.cook-bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; }
.cook-bar-title { text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cook-bar-title strong { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wake { justify-self: end; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.wake svg { width: 18px; height: 18px; stroke: var(--line-2); fill: none; stroke-width: 1.25; stroke-linecap: round; }
.wake.is-on svg { stroke: var(--muted); }
.cook .progress { margin-top: 14px; }
.cook-num { margin-top: 34px; display: flex; align-items: flex-start; gap: 18px; }
.cook-num b { font-family: var(--serif); font-size: 88px; font-weight: 700; line-height: 0.85; color: var(--seal); }
.cook-num i { width: 1px; align-self: stretch; background: var(--line); }
.cook-num span { font-size: 11px; letter-spacing: 0.3em; color: var(--muted); writing-mode: vertical-rl; }
.cook-text { margin: 28px 0 0; font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.cook-ings { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.cook-ings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cook-ings li { padding: 8px 12px; border: 1px solid var(--line); font-size: 13px; display: flex; gap: 8px; }
.cook-ings li span { color: var(--muted); }
.timer {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.timer.is-done { border-color: var(--seal); }
.timer-time { font-family: var(--serif); font-size: 30px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.timer-btns { display: flex; gap: 8px; }
.timer-btns .btn { min-height: 44px; padding: 0 16px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.14em; border-color: var(--seal); }
.timer-btns .btn--quiet { border-color: var(--line); }
.cook-nav { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cook-nav .btn { min-height: 56px; font-size: 17px; }

/* ---------- Einstellungen ---------- */

.settings { padding: 8px var(--gutter) calc(32px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 30px; }
.settings section { display: flex; flex-direction: column; gap: 12px; }
.settings h2 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--paper); font-family: var(--serif); font-size: 18px; font-weight: 500; }
.settings p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.settings p strong { color: var(--paper); font-weight: 500; }
.settings .file-btn { position: relative; overflow: hidden; }
.settings .file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.stat { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.stat span:last-child { color: var(--muted); }

/* ---------- Toast ---------- */

.proto-tag { color: var(--seal); }

/* ==========================================================
   Bento-Raster
   ========================================================== */

.bento { display: grid; gap: 8px; padding: 0 16px; }
.bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px; padding-bottom: calc(32px + var(--safe-bottom)); }
.bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: calc(16px + var(--safe-top)); }
.bento--list { margin-top: 18px; padding-bottom: calc(40px + var(--safe-bottom)); }

.tile {
  background: var(--tile);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 0;
  border-radius: 2px;
}
a.tile, button.tile { transition: background-color 0.15s ease; }
a.tile:active, button.tile:active { opacity: 0.85; }

.link-btn {
  background: none; border: 0; padding: 4px 0;
  font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
}
.link-btn--seal { color: var(--seal-text); font-size: 12px; }

/* --- Übersicht --- */

.tile--feature {
  grid-column: 1 / -1;
  position: relative;
  height: 196px;
  background: var(--ink-3);
  border-radius: 2px 28px 2px 2px;
  overflow: hidden;
  display: block;
}
.tile--feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--feature.has-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim), 0.9) 15%, rgba(var(--scrim), 0) 65%);
}
.feature-bowl { position: absolute; right: 26px; top: 30px; display: flex; }
.feature-label { position: absolute; left: 18px; top: 16px; z-index: 1; font-size: 10px; }
.feature-foot {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.feature-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feature-title { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.15; overflow-wrap: anywhere; }

.bento-sub { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile--stamp {
  height: 84px; padding: 10px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left;
}
.tile-stamp-foot { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.tile-stamp-label { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-stamp-count { font-family: var(--serif); font-size: 18px; }
.tile--stamp[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.tile--stamp[aria-pressed="true"] .tile-stamp-label { color: var(--ink); }

.tile--stat, .tile--add {
  grid-column: span 2;
  height: 92px;
  padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stat-line { display: flex; align-items: baseline; gap: 8px; }
.stat-num { font-family: var(--serif); font-size: 36px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: 13px; color: var(--muted); }
.tile--add { background: transparent; border: 1px dashed var(--seal); }
.tile--add svg { width: 20px; height: 20px; stroke: var(--seal); fill: none; stroke-width: 1.75; stroke-linecap: round; }
.tile--add span { font-size: 12px; letter-spacing: 0.16em; }

.bento-head {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.bento-head h2 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.bento-head-right { display: flex; align-items: baseline; gap: 14px; }

.tile--card { grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; }
.card-photo {
  position: relative;
  height: 104px;
  background: var(--ink-3);
  border-radius: 0 18px 0 0;
  display: flex; align-items: center; justify-content: center;
}
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.card-photo .stamp { position: absolute; left: 10px; bottom: -10px; }
.card-text { padding: 18px 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.card-title { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.card-meta { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }

/* --- Rezeptansicht --- */

.tile--photo {
  grid-column: 1 / -1;
  position: relative;
  height: 210px;
  background: var(--ink-3);
  border-radius: 2px 28px 2px 2px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-btn { position: absolute; top: 12px; z-index: 1; }
.tile-btn--left { left: 12px; }
.tile-btn--right { right: 12px; }

.tile--title {
  grid-column: 1 / -1;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.tile-title-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile--title h1 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.tile--title .label { font-size: 10px; }

.tile--fact {
  grid-column: span 2;
  height: 88px;
  padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tile--fact .label { font-size: 10px; letter-spacing: 0.2em; }
.fact-line { display: flex; align-items: baseline; gap: 4px; }
.fact-num { font-family: var(--serif); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.fact-num--word { font-size: 22px; }
.fact-unit { font-size: 11px; color: var(--muted); }
.tile--stepper { padding: 10px 4px 6px; }
.tile--stepper .label { padding-left: 8px; }
.tile--stepper .stepper { justify-content: space-between; gap: 0; }
.tile--stepper .stepper button { width: 36px; }
.tile--stepper output { font-size: 28px; line-height: 1; }

.tile--shop { grid-column: 1 / -1; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.shop-head .label { font-size: 10px; }
.shop-right { display: flex; align-items: baseline; gap: 14px; }
.shop-num { font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; }
.shop-num span { font-size: 13px; color: var(--muted); }

.screen.has-cta { padding-bottom: calc(96px + var(--safe-bottom)); }
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  max-width: var(--max); margin: 0 auto;
  padding: 12px 16px calc(16px + var(--safe-bottom));
  background: linear-gradient(to top, var(--ink) 70%, rgba(var(--scrim), 0));
}
.cook-cta {
  height: 64px;
  padding: 0 18px;
  background: var(--seal); color: var(--paper-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none;
}
.cook-cta-title { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.cook-cta-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; }
.cook-cta-meta svg { width: 22px; height: 12px; stroke: var(--paper-2); fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* --- Einstellungen --- */

.tile--wide { grid-column: 1 / -1; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tile--wide h2.label { margin: 0; font-size: 10px; font-weight: 400; }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.status { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.status--warn { color: var(--seal-text); }
.status--warn::before { content: ""; width: 6px; height: 6px; background: var(--seal); }
.tile-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.tile-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile-btns .btn { min-height: 46px; font-size: 13px; letter-spacing: 0.02em; padding: 0 6px; white-space: nowrap; }
@media (max-width: 374px) { .tile-btns { grid-template-columns: 1fr; } }
.tile-btns .btn--quiet { border-color: var(--line-2); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.theme-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.theme-tiles button {
  height: 64px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px;
}
.theme-tiles svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-tiles svg .fill { fill: currentColor; stroke: none; }
.theme-tiles button[aria-checked="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.tile--small {
  height: 112px;
  padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.tile--small > svg { width: 22px; height: 22px; stroke: var(--paper); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.tile--small .label { font-size: 10px; }
.tile-small-text { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.tile-small-title { font-size: 14px; }
.tile-small-sub { font-size: 12px; color: var(--muted); }
.tile-big { font-family: var(--serif); font-size: 26px; line-height: 1; }
.tile-span { grid-column: 1 / -1; min-height: 52px; }

/* --- Unterseiten --- */

.info { padding: 22px var(--gutter) calc(40px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 26px; max-width: 65ch; }
.info section { display: flex; flex-direction: column; gap: 8px; }
.info h2 { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 17px; font-weight: 500; }
.info p, .info li { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.info ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.info strong { color: var(--paper); font-weight: 500; }
.placeholder { color: var(--seal-text); }
.selectable { user-select: text; color: var(--paper); }

/* ---------- Bestätigungsdialog ---------- */

.modal {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(10, 10, 9, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(16px + var(--safe-bottom));
}
.modal-card {
  width: 100%; max-width: 440px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; gap: 22px;
}
.modal-text { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.modal-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-btns .btn { min-height: 48px; font-size: 15px; padding: 0 12px; }
@media (min-width: 560px) { .modal { align-items: center; } }

#toast {
  position: fixed; left: 50%; bottom: calc(100px + var(--safe-bottom));
  transform: translate(-50%, 20px);
  max-width: calc(100vw - 48px);
  padding: 12px 18px;
  background: var(--paper); color: var(--ink);
  font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (min-width: 560px) {
  body { background: var(--desk); }
  .screen { background: var(--ink); border-left: 1px solid var(--desk-line); border-right: 1px solid var(--desk-line); }
}

/* --- Umschalter Kacheln / Liste --- */
.bento-head { align-items: center; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); margin-left: 2px; }
.view-toggle button {
  width: 36px; height: 32px;
  border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle svg { width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.view-toggle button[aria-checked="true"] { background: var(--paper); }
.view-toggle button[aria-checked="true"] svg { stroke: var(--ink); }
.rrow--bento { grid-column: 1 / -1; padding-left: 10px; padding-right: 10px; }

/* --- Kompaktere Liste und Filter --- */
.rrow--bento { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.rrow--bento .thumb { width: 48px; height: 48px; border-radius: 2px 12px 2px 2px; }
.rrow--bento .thumb svg.bowl { width: 28px; height: 19px; }
.rrow--bento .thumb .stamp { width: 18px; height: 18px; font-size: 10px; right: -5px; bottom: -5px; }
.rrow--bento .rrow-text { gap: 2px; }
.rrow--bento .rrow-title { font-size: 16px; }
.rrow--bento .rrow-meta { font-size: 11px; }

.tile--stamp {
  height: 44px;
  padding: 0 8px 0 6px;
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px;
}
.tile--stamp .stamp { width: 22px; height: 22px; font-size: 12px; }
.tile--stamp .tile-stamp-foot { flex: 1; min-width: 0; gap: 4px; }
.tile--stamp .tile-stamp-label { font-size: 11px; }
.tile--stamp .tile-stamp-count { font-size: 15px; }
.tile--stamp { padding: 0 6px; gap: 6px; }
.tile--stamp .tile-stamp-count { display: none; }
.tile--stamp .tile-stamp-label { overflow: visible; text-overflow: clip; }

/* ==========================================================
   Leiste links (Navigation)
   ========================================================== */

:root { --rail-w: 64px; }

.shell {
  --gutter: 20px;
  max-width: calc(var(--max) + var(--rail-w));
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--ink);
}
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Trennlinie am Inhalt statt an der Leiste: läuft immer über die ganze Höhe */
.shell-main { border-left: 1px solid var(--line); }

.rail {
  width: calc(var(--rail-w) - 1px); /* + 1px Linie am Inhalt = 64 px */
  flex-shrink: 0;
  /* klebt oben; kein position: fixed – iOS-Homescreen-Apps schneiden feste
     Elemente nach dem Start an einer zu kurzen Kante ab (bis zum ersten Scrollen).
     Mitwandern beim Überziehen verhindert overscroll-behavior an html/body. */
  position: sticky; top: 0;
  /* svh: springt nicht, wenn Safari beim Scrollen seine Leisten ein-/ausblendet */
  height: 100vh; height: 100svh;
  box-sizing: border-box;
  padding: calc(22px + var(--safe-top)) 0 calc(22px + var(--safe-bottom));
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 6;
}
/* Homescreen-App: volle Bildschirmhöhe, dvh ist dort nach dem Start zu kurz */
@media (display-mode: standalone) {
  .rail { height: 100lvh; }
}
.rail-logo { margin-bottom: 8px; text-decoration: none; }
.rail-item {
  position: relative;
  width: 100%; height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 9px; letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
}
.rail-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-item[aria-current="page"] { color: var(--paper); }
.rail-item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--seal);
}
.rail-new svg { stroke: var(--seal); }
.rail-spacer { flex: 1; }
.rail-word { writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.4em; color: var(--line-2); margin-bottom: 12px; }
.rail .round-btn[aria-current="page"] { background: var(--paper); }
.rail .round-btn[aria-current="page"] svg { stroke: var(--ink); }

.shell .ov-head { padding-top: calc(26px + var(--safe-top)); gap: 4px; }
.shell .bento-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shell .tile--stamp { padding: 0 10px 0 8px; gap: 8px; }
.shell .tile--stamp .tile-stamp-count { display: inline; }
.shell .tile--stamp .tile-stamp-label { font-size: 12px; }
.shell .bento-head { flex-wrap: wrap; }

.shell-main.has-cta { padding-bottom: 0; }
.shell-main .cta-bar {
  position: sticky; bottom: 0; left: auto; right: auto;
  max-width: none; margin: auto 0 0;
}

@media (min-width: 560px) {
  .shell { border-left: 1px solid var(--desk-line); border-right: 1px solid var(--desk-line); }
}
.head-count { margin-left: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.shell .bento-head { flex-wrap: nowrap; }
.shell .tile--title h1 { font-size: 26px; }
.shell .cook-cta-title { font-size: 17px; white-space: nowrap; }
.shell .cook-cta-meta { font-size: 0; gap: 0; }
.shell .screen-list > .search, .shell .screen-list > .hint:first-of-type { margin-top: calc(22px + var(--safe-top)); }
.shell .screen-list > .hint + .search { margin-top: 18px; }
.rail-word { color: var(--muted-2); }
/* Suche bündig mit dem Stempel in der Leiste */
.shell .screen-list > .search { margin-top: calc(22px + var(--safe-top)); padding-bottom: 0; }
.shell .screen-list > .search input { height: 40px; }
.bento-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bento-head-left h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clear-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--line); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.clear-btn svg { width: 12px; height: 12px; stroke: var(--paper); fill: none; stroke-width: 1.75; stroke-linecap: round; }
/* Kopfzeilen neben der Leiste mittig zum Stempel */
.shell .form-head { padding-top: calc(20px + var(--safe-top)); padding-bottom: 20px; }
.shell .form-head { grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-rows: 44px; }
.shell .form-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) {
  .shell .form-head h1 { font-size: 15px; letter-spacing: 0.02em; }
}

/* ==========================================================
   Suche (eigene Seite)
   ========================================================== */

.shell .screen-list > .bento--list { margin-top: calc(22px + var(--safe-top)); }
.shell .screen-list > .hint + .bento--list { margin-top: 12px; }

.search-wrap { padding: calc(22px + var(--safe-top)) 16px 0; }
.search-tile {
  height: 40px;
  padding: 0 4px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.search-tile > svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; flex-shrink: 0; }
.search-tile input {
  flex: 1; min-width: 0; height: 38px;
  border: 0; background: transparent; outline: none;
  font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.search-tile input::placeholder { color: var(--muted-2); }
.search-tile input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-tile:focus-within { box-shadow: inset 0 0 0 1px var(--line-2); }
.search-tile .clear-btn { width: 32px; height: 32px; border-color: transparent; }

.search-body { padding: 18px 26px calc(40px + var(--safe-bottom)) 26px; display: flex; flex-direction: column; }
.shell .search-body { padding-left: 20px; padding-right: 20px; }
.search-label { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; }
.search-label .label { font-size: 10px; }
.search-note { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.recent { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.recent-chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; font-size: 13px; }
.search-results { border-top: 1px solid var(--line); }
.rrow--search { padding-left: 0; padding-right: 0; }
.hit { background: transparent; color: var(--seal-text); }
/* Gleich hohe Symbol-Zone für alle Punkte in der Leiste */
.rail-item > svg { margin: 4px 0; }
.rail-item { gap: 6px; }