/* Kochbuch – Oberfläche „Stempel“ (Etappe F1, Vorlage docs/design/v2-stempel.html) auf Stempeluhr-Basis.
   Mobil zuerst, ab 900 px eigenes Mac-Layout. Keine Hover-only-Funktionen; Tap-Ziele mind. 40–44 px.
   CSP: keine Inline-Styles, deshalb alles über Klassen. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");
  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; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  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; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===== Stempeluhr-Tokens (Quelle ~/Projekte/stempeluhr-dev/src/client/styles/tokens.css) ===== */
:root {
  color-scheme: light;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --paper: #f5f1e8; --surface: #fffdf8; --surface-2: #efe9dc;
  --ink: #1f1d1a; --ink-2: #5d574e; --ink-3: #8a8378; --line: #e2dacb; --line-strong: #cfc5b2;
  --accent: #e2570b; --accent-strong: #c24705; --accent-soft: #fbe3d3; --on-accent: #fff;
  --lukas: #2f6fdb; --kiana: #d6457a; --ok: #2e7d32; --danger: #b3261e; --focus: #1f5fd1;
  --shadow-1: 0 1px 2px rgb(60 45 20 / .06), 0 1px 1px rgb(60 45 20 / .04);
  --shadow-2: 0 8px 24px -8px rgb(60 45 20 / .18), 0 2px 6px rgb(60 45 20 / .06);
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --tabbar-h: 64px;
  /* Namen der bisherigen Seiten (Einkauf, Bearbeiten, Mehr …) auf die neuen Tokens abgebildet */
  --bg: var(--paper); --card: var(--surface); --muted: var(--ink-2); --accent-ink: var(--on-accent);
  --warn-bg: #fff4d6; --warn: #7a5600; --err-bg: #f9dedc; --err: var(--danger); --pending: #8a5a00; --radius: var(--r-m);
  --st-blau-bg: #dbe9fb; --st-blau: #1d4f91; --st-rosa-bg: #fbe0ec; --st-rosa: #9c2c62;
  --st-gruen-bg: #dcf0de; --st-gruen: #24622f; --st-orange-bg: #fde7d2; --st-orange: #8a4a0f;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #151412; --surface: #1e1c19; --surface-2: #272521; --ink: #f2ede4; --ink-2: #b4ab9d; --ink-3: #847c70;
    --line: #2f2c28; --line-strong: #3f3b35; --accent: #ff7a2e; --accent-strong: #ff8f4f; --accent-soft: #3a2316;
    --on-accent: #1b0d04; --lukas: #6c9bff; --kiana: #ff8db5; --ok: #7bc77f; --danger: #ff8a80; --focus: #8fb4ff;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 10px 30px -10px rgb(0 0 0 / .6);
    --warn-bg: #3a3014; --warn: #f0cf7a; --err-bg: #3b1d1b; --pending: #f0c060;
    --st-blau-bg: #1c2f4a; --st-blau: #9cc4f5; --st-rosa-bg: #44202f; --st-rosa: #f5a8c9;
    --st-gruen-bg: #1d3a22; --st-gruen: #9fdcaa; --st-orange-bg: #43301b; --st-orange: #f3c08c;
  }
}
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-strong); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: 1.6rem; margin: .2rem 0 .6rem; overflow-wrap: anywhere; }
h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); } .small { font-size: .88rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ===== App-Rahmen: Handy Tab-Leiste unten, Mac Seitenleiste ===== */
.app { min-height: 100vh; }
.main { max-width: 1180px; margin: 0 auto; padding: 16px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
body:not(.signed-in) .main { padding-bottom: 24px; }
.side { display: none; }
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--tabbar-h);
  font-size: .68rem; font-weight: 700; color: var(--ink-3); text-decoration: none; }
.tabbar a.on { color: var(--accent); }
.ic { width: 22px; height: 22px; flex: none; }
.only-mac { display: none; }
@media (min-width: 900px) {
  .only-phone { display: none !important; }
  .only-mac { display: inline; }
  .tabbar { display: none; }
  .signed-in .app { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--surface); border-right: 1px solid var(--line); padding: 22px 12px; }
  .side > a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-s);
    color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .92rem; }
  .side > a.on { background: var(--accent-soft); color: var(--accent-strong); }
  .side > a.mini { min-height: 32px; font-size: .86rem; font-weight: 600; padding-left: 14px; }
  .side .brand { padding: 0 10px 22px; min-height: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
  .side .brand b { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: .95rem; }
  .side-sub { margin: 18px 10px 4px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
  .side .me { margin-top: auto; background: var(--surface-2); border-radius: var(--r-m); padding: 10px; color: var(--ink); }
  .main { padding: 26px 32px 48px; }
}
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lukas); color: #fff; font-weight: 800; font-size: .8rem; flex: none; }
.avatar-rosa { background: var(--kiana); } .avatar-gruen { background: #3a8a3f; } .avatar-orange { background: #d2621a; }

/* Bausteine */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 800; font-size: .92rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--err); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .6; }
.icon-btn {
  min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; border-radius: var(--radius);
}
.fav-btn { font-size: 1.6rem; } .fav-btn.on, .fav { color: #d9a300; }
form.inline { display: inline; }
.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: .6rem 0; }
.actions.sticky {
  position: sticky; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); background: var(--bg);
  padding: 10px 0; border-top: 1px solid var(--line);
}
@media (min-width: 800px) { .actions.sticky { bottom: 0; } }
.actions-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 1.4rem 0; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 1.4rem 0; }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%;
}
textarea { resize: vertical; }
label { display: block; margin: .5rem 0; font-size: .92rem; color: var(--muted); }
label > input, label > select, label > textarea { margin-top: 4px; color: var(--ink); font-size: 17px; }
label.check, .checks label { display: flex; align-items: center; gap: 8px; color: var(--ink); }
label.check input, .checks input { width: 22px; height: 22px; min-height: 0; }
.grid2, .grid3 { display: grid; gap: 0 10px; grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr 1fr; } .span2 { grid-column: span 2; }

.flash, .info, .warn, .error {
  border-radius: var(--radius); padding: 10px 14px; margin: .5rem 0;
}
.flash, .info { background: var(--card); border: 1px solid var(--line); }
.warn { background: var(--warn-bg); color: var(--warn); }
.error { background: var(--err-bg); color: var(--err); }
.offline {
  position: sticky; top: 0; z-index: 20; background: var(--err-bg); color: var(--err);
  padding: 8px 16px; text-align: center; font-weight: 600;
}
.empty { color: var(--muted); padding: 1rem 0; }

.search { display: flex; gap: 8px; margin: .4rem 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 10px; -webkit-overflow-scrolling: touch; }
.chip {
  flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card);
  text-decoration: none; color: var(--ink-2); font-size: .88rem; font-weight: 700; min-height: 40px; display: inline-flex; align-items: center;
  cursor: pointer;
}
.chip.on, .chip:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; min-height: 0; }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cards { display: grid; gap: 10px; }
.card {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.card-title { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.card-meta { font-size: .86rem; color: var(--muted); }
.card-desc { font-size: .9rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card progress { width: 100%; height: 6px; margin-top: 6px; accent-color: var(--accent); }

.st { display: inline-block; font-size: .78rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.st-ok { color: var(--ok); } .st-draft, .st-pending { color: var(--pending); }
.st-arch { color: var(--muted); } .st-err { color: var(--err); }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: .8rem 0; }
.box.draft, .box.pending { border-color: var(--pending); }
.box h2 { margin-top: .2rem; }
.meta { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.lead { font-size: 1.05rem; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: .92rem; }

/* Rezept: gut lesbare Mengen */
.ings { list-style: none; padding: 0; margin: 0; }
.ing { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 1.08rem; }
.ing-group { font-weight: 700; padding-top: 14px; color: var(--accent); }
.ing .hint, .hint { display: inline-block; margin-left: 8px; font-size: .8rem; color: var(--warn); }
.ing .orig { display: block; font-size: .82rem; color: var(--muted); }
.ing.unclear span:first-child { text-decoration: underline wavy var(--pending); }
.steps { padding-left: 1.4rem; } .steps li { margin: .5rem 0; }
.open { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius); padding: 4px 16px 8px; margin: 1rem 0; }
.open h2 { margin-top: .6rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { font-size: .88rem; }
.notes { white-space: pre-wrap; }
.diff { margin: .4rem 0; padding-left: 1.2rem; font-size: .92rem; }
.scale { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: .6rem 0; }
.scale label { margin: 0; } .scale input { width: 7rem; }
details.more { margin: 1.2rem 0; } details.more summary { cursor: pointer; padding: 10px 0; color: var(--accent); }
.events { font-size: .92rem; color: var(--muted); }
.transcript { white-space: pre-wrap; margin: .4rem 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.versions { padding-left: 1.4rem; } .ver { margin: .8rem 0; } .ver-rejected { opacity: .65; }

/* Bearbeiten */
.ing-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin: 0 0 8px; background: var(--card); }
.ing-main { display: grid; grid-template-columns: 5rem 6.4rem 1fr 44px; gap: 6px; align-items: center; }
.ing-main input { padding: 8px; }
.ing-more summary { font-size: .85rem; color: var(--muted); padding: 6px 2px; cursor: pointer; }
.checks { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .ing-main { grid-template-columns: 4.2rem 5.6rem 1fr 40px; gap: 4px; }
  .grid3 { grid-template-columns: 1fr 1fr; }
}

/* Einkaufsliste: große Abhakflächen */
.shop { list-style: none; padding: 0; margin: .4rem 0; }
.shop .item { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.shop .toggle { flex: 1; }
.check-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 4px;
  background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 1.08rem; text-align: left; cursor: pointer;
}
.check-btn .box {
  flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--muted); margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: var(--card);
}
.item.done .check-btn .box { background: var(--accent); border-color: var(--accent); }
.item.done .check-btn .box::after { content: "✓"; color: var(--accent-ink); font-weight: 700; }
.item.done .label { color: var(--muted); text-decoration: line-through; }
.item.busy { opacity: .6; }
.check-btn small { display: block; font-size: .82rem; text-decoration: none; }
.add input { flex: 1; width: auto; } .add .btn { min-width: 52px; }
.pick { list-style: none; padding: 0; }
.pick li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pick label { flex: 1; margin: 0; } .pick small { color: var(--muted); }
.pick .serv { width: 7.5rem; flex: none; }
.jobs { list-style: none; padding: 0; } .job { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* Login */
body.login { padding-bottom: 0; }
.login-box { max-width: 380px; margin: 12vh auto 0; }
.login-box h1 { text-align: center; }
code { background: var(--card); padding: 1px 6px; border-radius: 6px; }

/* Herkunfts-Sticker (Etappe D1): wer ein Rezept erstellt hat */
.sticker { display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1; padding: .28em .6em;
  border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.sticker-blau { background: var(--st-blau-bg); color: var(--st-blau); }
.sticker-rosa { background: var(--st-rosa-bg); color: var(--st-rosa); }
.sticker-gruen { background: var(--st-gruen-bg); color: var(--st-gruen); }
.sticker-orange { background: var(--st-orange-bg); color: var(--st-orange); }
.created-by { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.who { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: 10px; flex-wrap: wrap; }
.who legend { margin-bottom: .4rem; }
.who-pick { display: inline-flex; align-items: center; gap: .45em; padding: .55em 1.1em; border-radius: 999px;
  cursor: pointer; font-weight: 600; border: 2px solid transparent; }
.who-pick input[type="radio"] { width: 1.05em; height: 1.05em; margin: 0; padding: 0; flex: none; accent-color: currentColor; }
.who-pick:has(input:checked) { border-color: currentColor; }
.members { list-style: none; padding: 0; display: grid; gap: 10px; }


/* Banner (D2): Foto/KI-Bild oben in der Rezeptansicht, 21:9, Kennzeichnung sichtbar */
.banner { margin: 0 -16px 12px; position: relative; }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--line); }
.banner figcaption { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; font-size: .8rem; }
.banner .ai-label, .banner .orig-link { background: rgba(0,0,0,.6); color: #fff; padding: 3px 9px; border-radius: 999px; text-decoration: none; }
@media (min-width: 760px) { .banner { margin: 0 0 16px; } .banner img { border-radius: var(--radius); } }
.card.has-thumb { padding-top: 0; overflow: hidden; }
.card-thumb { display: block; height: auto; width: calc(100% + 32px); margin: 0 -16px 8px; aspect-ratio: 21 / 9; object-fit: cover; background: var(--line); }
.img-status { margin: 4px 0 8px; }

/* ======================================================================= Rezeptdesigns je Ersteller (D3) */
.deco { display: none; }
.kicker { margin: .2rem 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cols { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1.35fr; } article.recipe { max-width: 1000px; } }

/* ---------- Lukas: dunkel, Neon-Lime, kantig, große Großbuchstaben-Titel */
body.theme-neon {
  --bg: #0b100c; --card: #171d18; --ink: #f7f8f5; --muted: #a5ada6; --line: #2c342d; --accent: #bfff31; --accent-ink: #111512;
  --warn-bg: #2a2410; --warn: #ffc46b; --err-bg: #3a1a14; --err: #ff9d80; --ok: #bfff31; --pending: #ff7a32; --radius: 0px;
  --badge-ink: #111512;
  color-scheme: dark;
  background: radial-gradient(1100px 520px at 100% 0, rgba(191, 255, 49, .10), transparent 60%), var(--bg);
}
.theme-neon .top, .theme-neon .tabs { background: #111512; }
.theme-neon h1 { text-transform: uppercase; font-size: clamp(40px, 10vw, 96px); line-height: .9; letter-spacing: -.04em; font-weight: 800; margin: .3rem 0 .8rem; }
.theme-neon h1 .key { color: var(--accent); }
.theme-neon h2 { text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; color: var(--accent); }
.theme-neon .banner img { border-radius: 0; box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(191, 255, 49, .35); }
.theme-neon .banner .ai-label, .theme-neon .banner .orig-link { border-radius: 0; background: rgba(11, 16, 12, .8); border: 1px solid var(--accent); color: var(--accent); }
.theme-neon .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); color: var(--ink); margin: 1rem 0; }
.theme-neon .facts span { background: var(--card); padding: 12px 14px; font-weight: 600; }
.theme-neon .ing { border-bottom-color: var(--line); }
.theme-neon .steps { list-style: none; padding: 0; counter-reset: s; }
.theme-neon .steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; align-items: start; margin: .7rem 0; }
.theme-neon .steps li::before { content: counter(s, decimal-leading-zero); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .8rem; }
.theme-neon .notes { background: var(--accent); color: var(--accent-ink); padding: 16px 18px; font-weight: 600; }
.theme-neon .box, .theme-neon .card, .theme-neon .btn, .theme-neon input, .theme-neon .chip, .theme-neon .st { border-radius: 0; }
.theme-neon .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-neon .sticker { border-radius: 0; }

/* ---------- Kiana: Rosengarten – zart, Serifenschrift, gemalte Rosen, runde Karten */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/playfair.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/playfair-italic.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/lato-700.woff2) format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/lato-italic.woff2) format("woff2"); }
body.theme-rosengarten {
  --bg: #fbe4ea; --card: #fffaf9; --ink: #4a2533; --muted: #8a6170; --line: #f0c4d2; --accent: #a8456d; --accent-ink: #ffffff;
  --warn-bg: #fff1dc; --warn: #8a5300; --ok: #3f6b48; --pending: #8f4f00; --radius: 18px; color-scheme: light;
  --err-bg: #fde8e6; --err: #a3271b; --badge-ink: #ffffff;
  --st-blau-bg: #dbe9fb; --st-blau: #1d4f91; --st-rosa-bg: #f9d3df; --st-rosa: #8f2a5a; --st-gruen-bg: #dcf0de; --st-gruen: #24622f;
  --st-orange-bg: #fde7d2; --st-orange: #8a4a0f;
  background: linear-gradient(180deg, #fdf1f3 0%, #fbe4ea 100%) fixed; font-family: "Lato", -apple-system, sans-serif;
}
.theme-rosengarten article.recipe { position: relative; background: var(--card); border-radius: 28px; padding: 0 20px 32px; margin-top: 8px;
  box-shadow: 0 24px 60px rgba(176, 82, 112, .18); overflow: hidden; }
.theme-rosengarten .roses { position: absolute; z-index: 2; width: clamp(96px, 18vw, 180px); color: #e88aa8; pointer-events: none; }
.theme-rosengarten .roses-l { left: -22px; top: -18px; transform: rotate(-12deg); }
.theme-rosengarten .banner { margin: 0 -20px 4px; }
.theme-rosengarten .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--card) 100%); pointer-events: none; }
.theme-rosengarten .banner img { border-radius: 0; }
.theme-rosengarten .banner figcaption { z-index: 1; left: auto; right: 12px; top: 12px; bottom: auto; }
.theme-rosengarten .banner .ai-label, .theme-rosengarten .banner .orig-link { background: rgba(255, 255, 255, .85); color: #7a3b57; font-weight: 600; }
.theme-rosengarten .kicker { color: var(--accent); letter-spacing: .22em; margin-top: 16px; }
.theme-rosengarten h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(34px, 8vw, 68px); line-height: 1.04; color: #4a2533; }
.theme-rosengarten h1 .key { font-style: italic; font-weight: 500; color: #d0668b; }
.theme-rosengarten h2 { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.6rem; color: #b24e74; display: flex; align-items: center; gap: 10px; }
.theme-rosengarten .deco { display: inline-block; width: 20px; height: 20px; color: #e88aa8; flex: none; }
.theme-rosengarten .facts { gap: 8px; margin: 1rem 0 1.4rem; }
.theme-rosengarten .facts span { background: #fdecef; color: #7a3b57; padding: 7px 14px; border-radius: 999px; font-size: .9rem; }
.theme-rosengarten .ing { border-bottom: 1px dashed var(--line); }
.theme-rosengarten .steps { list-style: none; padding: 0; counter-reset: s; }
.theme-rosengarten .steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; align-items: start; margin: .6rem 0; }
.theme-rosengarten .steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f7c6d6; color: #7a2348; font-weight: 700; font-size: .85rem; }
.theme-rosengarten .notes { background: #fdecef; border-radius: 18px; padding: 16px 20px; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.1rem; color: #7a3b57; }
.theme-rosengarten .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.theme-rosengarten .btn, .theme-rosengarten .chip { border-radius: 999px; }
.theme-rosengarten .box { border-radius: 18px; }
@media (min-width: 760px) { .theme-rosengarten article.recipe { padding: 0 48px 48px; } .theme-rosengarten .banner { margin: 0 -48px 4px; } }

/* Kennzahlen und Sterne (E1) */
.kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: .4rem 0 .8rem; }
.kpi { font-size: .92rem; }
.auto { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 2px; white-space: nowrap; }
.stars { display: inline-flex; gap: 0; }
.star, .star-clear { background: none; border: 0; font-size: 1.6rem; line-height: 1; min-width: 40px; min-height: 44px; color: var(--line); cursor: pointer; padding: 0; }
.star.on { color: #f2b01e; }
.star-clear { font-size: 1.1rem; color: var(--muted); min-width: 32px; }
.other-rating { color: var(--muted); }
.small-chip { min-height: 32px; padding: 4px 10px; font-size: .82rem; }
.kpi-edit { font-size: .85rem; }
.card-kpi { font-size: .85rem; color: var(--muted); }
.facts-form .field { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.facts-form .check { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; }
.theme-neon .star.on { color: var(--accent); }
.theme-rosengarten .star.on { color: #d0668b; }

/* ======================================================================= Übersicht „Stempel“ (F1) */
.head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.head h1 { margin: 0 auto 0 0; font-size: 1.6rem; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 1.2rem; }
.iconbtn .ic { width: 19px; height: 19px; }
.filterbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 800; font-size: .9rem;
  text-decoration: none; white-space: nowrap; }
.filterbtn .ic { width: 17px; height: 17px; }
.filterbtn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.search-mac { display: none; }
.search-phone { display: none; gap: 8px; margin: -4px 0 14px; }
.search-phone.open { display: flex; }
.search-phone input { flex: 1; width: auto; border-radius: 999px; }
@media (min-width: 900px) {
  .search-mac { display: flex; align-items: center; gap: 8px; width: 300px; height: 40px; padding: 0 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-3); }
  .search-mac .ic { width: 16px; height: 16px; }
  .search-mac input { border: 0; background: transparent; min-height: 0; padding: 0; font-weight: 600; font-size: .9rem; }
  .search-mac input:focus { outline: none; }
  .search-mac:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
  .search-phone, .search-phone.open { display: none; }
}
.hint { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 18px; border-radius: var(--r-m);
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: .88rem; text-decoration: none; }
.hint b { margin-left: auto; white-space: nowrap; }
.filter-note { color: var(--ink-2); font-size: .86rem; margin: -4px 0 14px; }

.shelf { margin: 0 0 26px; }
.shelf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.shelf-head h2 { font-size: 1.3rem; margin: 0; }
.shelf-head small { color: var(--ink-3); font-weight: 700; font-size: .82rem; margin-right: auto; }
.shelf-head a { color: var(--accent-strong); font-weight: 800; font-size: .88rem; text-decoration: none; padding: 8px 0; }
.shelf-empty { color: var(--ink-3); font-size: .9rem; margin: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shelf .tiles .tile:nth-child(n+5) { display: none; }  /* Handy: vier je Regal */
@media (min-width: 600px) { .tiles.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .tiles.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .shelf .tiles .tile:nth-child(n+5) { display: grid; }
}

/* Stempel-Kachel: Lukas dunkel (l1–l4) mit Lime-Stempel, Kiana hell (k1–k4) mit Rosen-Stempel */
.tile { --bg: #14261c; --fg: #f3f6f1; --sub: rgb(243 246 241 / .74); --st: #bfff31; --st-ink: #111512; --h: 140;
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-l); overflow: hidden; background: var(--bg); color: var(--fg);
  box-shadow: var(--shadow-2); display: grid; grid-template-rows: 1fr auto; text-decoration: none; isolation: isolate; }
.tile.l1 { --bg: #14261c; --h: 140; } .tile.l2 { --bg: #10243a; --h: 210; } .tile.l3 { --bg: #0f2e2c; --h: 175; } .tile.l4 { --bg: #1d2024; --h: 30; }
.tile.k { --fg: #4a2533; --sub: rgb(74 37 51 / .74); --st: #d0668b; --st-ink: #fff; }
.tile.k1 { --bg: #f9dbe5; --h: 340; } .tile.k2 { --bg: #ebdff6; --h: 275; } .tile.k3 { --bg: #fbd8d2; --h: 8; } .tile.k4 { --bg: #f6e6ec; --h: 320; }
.tile .photo { position: relative; display: block; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 68%, transparent); mask: linear-gradient(180deg, #000 68%, transparent);
  background: radial-gradient(110% 80% at 25% 20%, hsl(var(--h) 45% 46% / .85), transparent 60%),
    radial-gradient(90% 90% at 80% 85%, hsl(calc(var(--h) + 30) 45% 20% / .85), transparent 65%), hsl(var(--h) 35% 28%); }
.tile.k .photo { background: radial-gradient(110% 80% at 25% 20%, hsl(var(--h) 80% 88%), transparent 60%),
    radial-gradient(90% 90% at 80% 85%, hsl(calc(var(--h) + 25) 60% 72%), transparent 65%), hsl(var(--h) 60% 82%); }
.tile .photo:not(.has-img)::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='white' stroke-opacity='.4' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='21' fill='white' fill-opacity='.14'/%3E%3C/svg%3E") center / 56% no-repeat; }
.tile .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .txt { position: relative; z-index: 1; display: grid; gap: 2px; padding: 0 11px 11px; margin-top: -26px; }
.tile-title { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.15; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tile small { font-size: .72rem; font-weight: 700; color: var(--sub); }
.stamp { position: absolute; top: 9px; right: 9px; z-index: 2; width: 50px; height: 50px; border-radius: 50%;
  border: 2px dashed var(--st-ink); background: var(--st); color: var(--st-ink); display: grid; place-content: center;
  text-align: center; line-height: 1; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  transform: rotate(-12deg); box-shadow: 0 4px 12px rgb(0 0 0 / .25); }
.stamp small { display: block; font-size: .54rem; font-family: var(--font-body); font-weight: 800; color: inherit; }
.heart { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .95rem; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .5); }
@media (min-width: 900px) { .tile-title { font-size: 1rem; } }

/* Filtern: Handy Blatt von unten, Mac Fenster am Knopf. Ohne JS über :target. */
.sheet-wrap { display: none; }
html:not(.js) .sheet-wrap:target, .sheet-wrap.open { display: block; }
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgb(20 15 10 / .45); }
.sheet { position: fixed; inset: auto 0 0 0; z-index: 41; max-height: 88vh; overflow: auto; display: grid; gap: 14px;
  background: var(--surface); border-radius: 24px 24px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-2); }
.sheet::before { content: ""; justify-self: center; width: 40px; height: 5px; border-radius: 9px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 1.3rem; }
.fgroup { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.fgroup legend { padding: 0; margin-bottom: 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.fgroup .chips { flex-wrap: wrap; overflow: visible; padding: 0; gap: 6px; }
.sheet-actions { display: flex; gap: 10px; } .sheet-actions .btn { flex: 1; min-height: 46px; }
@media (min-width: 900px) {
  .sheet-bg { background: transparent; }
  .sheet { inset: 84px 32px auto auto; width: 460px; max-height: calc(100vh - 110px); border-radius: var(--r-l); border: 1px solid var(--line); padding: 18px 20px; }
  .sheet::before { display: none; }
}

/* ======================================================================= Rezept: App-Leiste über dem Ersteller-Design */
.page-recipe .main { padding-top: 0; }
@media (min-width: 900px) { .signed-in.page-recipe .app { display: block; } .page-recipe .side { display: none; } }
.appbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px; margin: 0 -16px 12px; padding: 10px 14px;
  background: rgb(20 18 16 / .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; }
.appbar .sp { flex: 1; }
.ab, .appbar .ab { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 999px;
  border: 0; background: rgb(255 255 255 / .14); color: inherit; font: inherit; font-weight: 800; font-size: .84rem; text-decoration: none; cursor: pointer; }
.ab .ic { width: 18px; height: 18px; }
.ab.on { color: #ff6b8b; }
.ab.strong { background: #bfff31; color: #111512; }
.appbar .stars { display: inline-flex; align-items: center; background: rgb(255 255 255 / .14); border-radius: 999px; padding: 0 6px; }
.appbar .star { min-width: 26px; min-height: 38px; font-size: 1.05rem; color: rgb(255 255 255 / .35); }
.appbar .star.on { color: #bfff31; }
.appbar details.ab-more { position: relative; }
.appbar details.ab-more > summary { list-style: none; }
.appbar details.ab-more > summary::-webkit-details-marker { display: none; }
.ab-menu { position: absolute; right: 0; top: 46px; z-index: 16; min-width: 220px; display: grid; padding: 6px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-2); }
.ab-menu a { padding: 10px 12px; border-radius: var(--r-s); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .92rem; }
.ab-menu a:hover, .ab-menu a:focus-visible { background: color-mix(in srgb, var(--ink) 9%, var(--card)); }
.appbar .only-wide, .only-wide { display: none; }
@media (min-width: 900px) { .appbar .only-wide, .only-wide { display: inline-flex; } .appbar { margin: 0 -32px 18px; padding: 10px 32px; } .ab-menu .only-narrow { display: none; } }
.appbar { flex-wrap: nowrap; min-width: 0; } .appbar .stars { flex: none; }
.theme-rosengarten .appbar { background: rgb(255 250 249 / .75); color: #4a2533; }
.theme-rosengarten .ab, .theme-rosengarten .appbar .stars { background: rgb(168 69 109 / .1); }
.theme-rosengarten .appbar .star { color: rgb(168 69 109 / .3); }
.theme-rosengarten .appbar .star.on { color: #d0668b; }
.theme-rosengarten .ab.on { color: #d0668b; }
.theme-neon .ab, .theme-neon .appbar .stars { border-radius: 0; }

/* Kennzahlen-Raster im Rezept (Aktiv, Gesamt, je Portion, Portionen) */
.factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; margin: 1rem 0; }
.factgrid > span { background: var(--card); padding: 10px 12px; display: grid; font-weight: 600; font-size: .85rem; }
.factgrid small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.factgrid b { font-size: 1.15rem; font-family: var(--font-display); }
.factgrid .auto { justify-self: start; margin: 2px 0 0; }
@media (min-width: 600px) { .factgrid { grid-template-columns: repeat(4, 1fr); } }
.theme-neon .factgrid { border-radius: 0; }
.theme-rosengarten .factgrid { display: flex; flex-wrap: wrap; gap: 6px; background: none; border: 0; }
.theme-rosengarten .factgrid > span { display: inline-flex; gap: 4px; align-items: baseline; background: #fdecef; color: #7a3b57; padding: 6px 13px; border-radius: 999px; }
.theme-rosengarten .factgrid small { order: 2; text-transform: lowercase; letter-spacing: 0; font-size: .85rem; color: inherit; }
.theme-rosengarten .factgrid .auto { order: 3; }
.theme-rosengarten .factgrid .fg-serv small { display: none; }
.theme-rosengarten .factgrid b { font-size: .9rem; font-family: inherit; }
.meal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.sheet-open { overflow: hidden; }

/* ======================================================================= Bestenliste (F2) */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--surface-2); font-size: .84rem; font-weight: 700; text-align: center; }
.seg a { padding: 8px 14px; border-radius: 999px; color: var(--ink-2); white-space: nowrap; text-decoration: none; min-height: 36px; }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.meal-chips { margin: -4px 0 16px; }
.board { display: grid; gap: 22px; }
@media (min-width: 900px) { .board { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: end; } }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 10px; max-width: 520px; }
.pod { display: grid; gap: 6px; justify-items: center; text-align: center; color: var(--ink); text-decoration: none; }
.pod-photo.tile { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--surface); grid-template-rows: 1fr; }
.pod-photo .photo { -webkit-mask: none; mask: none; }
.pod-title { font-family: var(--font-display); font-weight: 600; font-size: .84rem; line-height: 1.15; overflow-wrap: anywhere; }
.pod .step { width: 100%; border-radius: 10px 10px 0 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; background: var(--surface-2); color: var(--ink-2); }
.pod.p1 .step { height: 78px; background: var(--accent); color: var(--on-accent); } .pod.p2 .step { height: 56px; } .pod.p3 .step { height: 40px; }
.stars-ro { color: var(--accent); letter-spacing: 1px; font-size: .8rem; white-space: nowrap; } .stars-ro .off { opacity: .3; }
.stars-ro .half { background: linear-gradient(90deg, var(--accent) 50%, color-mix(in srgb, var(--accent) 30%, transparent) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars-ro b { color: var(--ink-2); font-size: .78rem; letter-spacing: 0; margin-left: 2px; }
.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranks a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; min-height: 44px;
  border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .88rem; color: var(--ink); text-decoration: none; }
.ranks .n { font-family: var(--font-display); color: var(--ink-3); }
.ranks .rt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whob { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; color: #fff; background: var(--lukas); }
.whob-rosa { background: var(--kiana); } .whob-gruen { background: #3a8a3f; } .whob-orange { background: #d2621a; }

/* ======================================================================= Einstellungen (F2): Handy Liste → Unterseite, Mac Liste + Inhalt */
.settings { display: grid; gap: 18px; }
.settings .settings-detail { display: none; }
.settings.has-detail .settings-list { display: none; }
.settings.has-detail .settings-detail { display: grid; }
@media (min-width: 900px) {
  .settings { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
  .settings .settings-list, .settings.has-detail .settings-list { display: grid; }
  .settings .settings-detail { display: grid; }
}
.settings-list { display: grid; gap: 16px; align-content: start; }
.settings-detail { gap: 16px; align-content: start; }
.settings-detail h2 { margin: 0; font-size: 1.4rem; }
@media (max-width: 899px) { #detail-h { display: none; } }  /* nur die doppelte Seitenüberschrift */
.sgroup { display: grid; gap: 6px; }
.sgroup > b { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding-left: 6px; }
.slist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.srow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 12px; gap: 12px; align-items: center; padding: 12px 14px; min-height: 52px;
  border-bottom: 1px solid var(--line); font-weight: 700; font-size: .92rem; color: var(--ink); text-decoration: none; }
.slist .srow:last-child { border-bottom: 0; }
.srow .val { color: var(--ink-3); font-weight: 600; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
.chev { color: var(--ink-3); }
@media (min-width: 900px) { .srow.on { background: var(--accent-soft); } }
.sic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: .85rem; background: #77716a; }
.sic-blau { background: #2f6fdb; } .sic-rosa { background: #d6457a; } .sic-tuerkis { background: #0e8a85; } .sic-himmel { background: #2a9fd6; }
.sic-orange { background: #e2570b; } .sic-violett { background: #7a4fd6; } .sic-gruen { background: #3a8a3f; } .sic-grau { background: #77716a; }
.me-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 12px; align-items: center; padding: 12px 14px; color: var(--ink); text-decoration: none; font-weight: 700; }
.me-card small { display: block; color: var(--ink-3); font-weight: 600; font-size: .8rem; }
.avatar.big { width: 44px; height: 44px; font-size: 1rem; }
@media (min-width: 900px) { .me-card, .only-phone-block { display: none; } }
.settings-detail .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; display: grid; gap: 12px; }
.statusline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.sessions { margin: 0; padding-left: 18px; }