/* ============================================================
   Cartavo Office — Design-System „Espresso"
   Committed dark look: warmes Espresso-Anthrazit, Gold, Serifen-Titel.
   Cartavo-DNA (Aubergine/Gold) + eigenständige Backoffice-Identität.
   ============================================================ */
:root{
  /* Grundflächen */
  --of-bg-0:#15100b;          /* tiefstes Espresso */
  --of-bg-1:#1c150e;          /* Seiten-Grund */
  --of-surface:#241a12;       /* Karten */
  --of-surface-2:#2c2117;     /* erhöhte Karten */
  --of-line:rgba(244,183,64,.18);
  --of-line-soft:rgba(255,255,255,.08);

  /* Tinte */
  --of-ink:#f4e9d9;
  --of-ink-dim:#cbb79b;
  --of-ink-faint:#9a8a72;

  /* Marke */
  --of-gold:#F4B740;
  --of-gold-2:#e89b2c;        /* Verlauf-Ende */
  --of-gold-ink:#2a1c0c;      /* Text auf Gold */
  --of-plum:#4E2545;          /* Aubergine-Akzent (Cartavo-DNA) */

  /* Semantik: gesichert (grün) vs. KI-Vorschlag (gold) */
  --of-ok:#7bd6a0;
  --of-ok-ink:#a6e6c1;
  --of-ok-bg:rgba(123,214,160,.15);
  --of-ki:#f4c86a;
  --of-ki-line:rgba(244,183,64,.7);

  --of-danger:#e0857a;

  /* Radius / Schatten */
  --of-r-card:18px; --of-r-btn:12px; --of-r-pill:999px;
  --of-shadow:0 20px 45px -24px rgba(0,0,0,.7);

  --of-font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Produktion: Playfair Display; Georgia als sichere Fallback-Serife. */
  --of-font-display:"Playfair Display",Georgia,"Iowan Old Style","Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(244,183,64,.10), transparent 60%),
    linear-gradient(168deg,var(--of-bg-1),var(--of-bg-0));
  background-attachment:fixed;
  color:var(--of-ink);
  font-family:var(--of-font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(244,183,64,.3);color:#fff}
a{color:var(--of-gold);text-decoration:none}
/* Fokusring nur bei Tastatur-Navigation; programmatischer Fokus (z. B. FocusOnNavigate auf h1)
   zeigt keinen hässlichen Rahmen. */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--of-gold);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--of-font-display);font-weight:700;letter-spacing:-.01em;line-height:1.08;margin:0}

/* ── Wortmarke ── */
.of-logo{display:inline-flex;align-items:baseline;gap:6px;font-weight:800;letter-spacing:-.02em;color:#fff;font-size:1.05rem}
.of-logo .a{font-weight:600;color:var(--of-gold);opacity:.9}

/* ── App-Rahmen ── */
.of-shell{max-width:1080px;margin:0 auto;padding:clamp(16px,4vw,40px)}
.of-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px clamp(14px,3vw,20px);border:1px solid var(--of-line-soft);border-radius:var(--of-r-pill);
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);margin-bottom:clamp(20px,4vw,36px)}
.of-topbar .who{font-size:.86rem;color:var(--of-ink-dim);display:flex;align-items:center;gap:9px}
.of-topbar .who b{color:var(--of-ink);font-weight:600}
.of-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,var(--of-gold),var(--of-gold-2));
  color:var(--of-gold-ink);display:grid;place-items:center;font-weight:800;font-size:.8rem}

/* ── Fortschritt ── */
.of-progress{font-size:.68rem;font-weight:700;padding:4px 11px;border-radius:var(--of-r-pill);
  background:rgba(244,183,64,.15);color:var(--of-gold)}
.of-bar{height:8px;border-radius:var(--of-r-pill);overflow:hidden;background:rgba(255,255,255,.09)}
.of-bar>i{display:block;height:100%;border-radius:var(--of-r-pill);background:linear-gradient(90deg,var(--of-gold),var(--of-gold-2));transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ── Karten / Panels ── */
.of-card{background:var(--of-surface);border:1px solid var(--of-line);border-radius:var(--of-r-card);
  box-shadow:var(--of-shadow)}
.of-card.pad{padding:clamp(16px,3vw,22px)}
.of-hero h1{font-size:clamp(1.9rem,5vw,3rem);text-wrap:balance;margin-bottom:.28em}
.of-hero p{color:var(--of-ink-dim);font-size:1.04rem;max-width:56ch;margin:0}
.of-kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--of-gold);font-weight:700}

/* ── Gericht-Deklarations-Karte ── */
.of-dish{border-radius:16px;padding:14px 15px;background:rgba(255,255,255,.045);
  border:1px solid var(--of-line);display:flex;flex-direction:column;gap:11px}
.of-dish h3{font-size:1.1rem}
.of-dish .sub{font-size:.76rem;color:var(--of-ink-faint);margin-top:-6px}
.of-chips{display:flex;flex-wrap:wrap;gap:8px}
.of-chip{font-size:.74rem;font-weight:600;padding:6px 13px;border-radius:var(--of-r-pill);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  transition:transform .08s ease, box-shadow .15s ease}
.of-chip:active{transform:scale(.96)}
.of-chip .d{width:8px;height:8px;border-radius:50%}
.of-chip--ok{background:var(--of-ok-bg);color:var(--of-ok-ink);border:2px solid transparent}
.of-chip--ok .d{background:var(--of-ok)}
.of-chip--ki{background:transparent;border:2px dashed var(--of-ki-line);color:var(--of-ki)}
.of-chip--ki .d{background:var(--of-gold)}

/* ── Buttons ── */
.of-btn{font-family:var(--of-font-sans);font-size:.8rem;font-weight:800;border:none;cursor:pointer;
  padding:10px 18px;border-radius:var(--of-r-pill);transition:filter .15s ease, transform .08s ease}
.of-btn:active{transform:translateY(1px)}
.of-btn--gold{background:linear-gradient(90deg,var(--of-gold),var(--of-gold-2));color:var(--of-gold-ink)}
.of-btn--gold:hover{filter:brightness(1.06)}
.of-btn--ghost{background:rgba(255,255,255,.06);color:var(--of-ink);border:1px solid var(--of-line-soft)}
.of-btn--plum{background:var(--of-plum);color:#f3e4ee}

.of-extra{font-size:.64rem;font-weight:700;padding:4px 10px;border-radius:var(--of-r-pill);
  background:rgba(255,255,255,.08);color:var(--of-ink-dim);letter-spacing:.02em}

/* ── Kachel-Grid (Startseite) ── */
.of-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:22px}
.of-tile{display:block;padding:18px;border-radius:var(--of-r-card);background:var(--of-surface);
  border:1px solid var(--of-line-soft);transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease}
.of-tile:hover{border-color:var(--of-line);transform:translateY(-2px);box-shadow:var(--of-shadow)}
.of-tile .ic{font-size:1.5rem}
.of-tile h3{font-family:var(--of-font-sans);font-size:1.02rem;font-weight:700;margin:.5em 0 .2em;color:var(--of-ink)}
.of-tile p{margin:0;font-size:.84rem;color:var(--of-ink-dim)}
.of-tile .soon{font-size:.62rem;font-weight:700;color:var(--of-ink-faint);text-transform:uppercase;letter-spacing:.12em}

/* „+ hinzufügen"-Picker (aus der fixen Allergen-/Zusatzstoff-/Ernährungs-Liste) */
.of-add{font-family:var(--of-font-sans);font-size:.72rem;font-weight:600;color:var(--of-ink-dim);
  background:rgba(255,255,255,.05);border:1.5px dashed var(--of-line-soft);border-radius:var(--of-r-pill);
  padding:5px 12px;cursor:pointer;appearance:none;-webkit-appearance:none}
.of-add:hover{border-color:var(--of-line);color:var(--of-ink)}
.of-add option{background:var(--of-surface);color:var(--of-ink)}

/* Formularfelder */
.of-input{width:100%;font-family:var(--of-font-sans);font-size:.9rem;color:var(--of-ink);
  background:rgba(255,255,255,.05);border:1px solid var(--of-line-soft);border-radius:10px;padding:9px 12px}
.of-input:focus{outline:none;border-color:var(--of-gold)}
.of-input option{background:var(--of-surface);color:var(--of-ink)}

.of-muted{color:var(--of-ink-dim)}
.of-center{text-align:center}