/* ============================================================
   flintreply — Design-System (premium, hell)
   Ruhige Flächen, klare Typo-Hierarchie, Tiefe statt Chip-Salat.
   ============================================================ */
*{box-sizing:border-box}
:root{
  --ink:#181528; --ink-2:#3a3552; --mut:#726d89; --faint:#9a95af;
  --bg:#f6f6fb; --bg-2:#eeedf6; --card:#ffffff; --line:#eceaf4; --line-2:#e0ddec;
  --acc:#5a4ff3; --acc-deep:#4840d8; --acc-soft:#f1effe; --acc-line:#e2ddfb;
  --ok:#0f9d6b; --ok-soft:#e6f6ef; --err:#df3b53; --err-soft:#fdebee;
  --warn:#b26a0a; --warn-soft:#fbf0dd;
  --sh-sm:0 1px 2px rgba(24,21,40,.05), 0 1px 3px rgba(24,21,40,.04);
  --sh:0 2px 4px rgba(24,21,40,.04), 0 10px 26px rgba(24,21,40,.07);
  --sh-lg:0 4px 10px rgba(24,21,40,.06), 0 26px 60px rgba(40,32,110,.14);
  --r:14px; --r-lg:20px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-deep)}
code{font-family:var(--mono);background:var(--acc-soft);color:var(--acc-deep);padding:1px 6px;border-radius:6px;font-size:.85em}
::selection{background:color-mix(in srgb,var(--acc) 22%,transparent)}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 30px;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px;
  letter-spacing:-.03em;color:var(--ink)}
.brand .mark{width:28px;height:28px;flex:0 0 auto;border-radius:8px;color:#fff;
  background:linear-gradient(150deg,#7b6bff,#4a40d8);
  box-shadow:0 4px 12px rgba(74,64,216,.42);
  position:relative;overflow:hidden;display:grid;place-items:center}
.brand .mark svg{width:80%;height:80%;position:relative;z-index:2}
.brand .mark::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.05) 52%,transparent 70%)}
.brand .mark::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.22)}
.brand .mark svg path[fill]{fill:#FFCE7A}
.nav-admin{font-size:13.5px;font-weight:650;color:var(--ink-2);padding:6px 10px;border-radius:9px}
.nav-admin:hover{color:var(--ink);background:var(--acc-soft)}
.topbar nav{display:flex;align-items:center;gap:12px}
.nav-mail{color:var(--mut);font-size:13px;display:inline-flex;align-items:center;gap:8px}
.nav-mail::before{content:"";width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#b9b2ff,#6d5df6);display:inline-block}

.main{max-width:1120px;margin:0 auto;padding:34px 24px 72px}
.footer{text-align:center;color:var(--faint);font-size:12px;padding:26px}

/* ── Headings ────────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
h1{font-size:29px;letter-spacing:-.03em;margin:0;line-height:1.12;font-weight:800}
h2{font-size:17px;margin:0 0 12px;letter-spacing:-.01em;font-weight:700}
h3{font-size:15px;margin:0;font-weight:700;letter-spacing:-.01em}
.lead{color:var(--mut);font-size:15px;max-width:60ch}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--acc);margin:0 0 8px}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:20px;box-shadow:var(--sh-sm)}
.card:hover{box-shadow:var(--sh)}
.card.slim{padding:16px 22px}
.card.slim summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink-2)}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.card-hd h2{margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1.15fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Numbered step cards */
.step{position:relative;padding-top:26px}
.step-no{position:absolute;top:-14px;left:22px;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(140deg,#7b6bff,#5a4ff3);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(74,64,216,.4)}

/* ── Forms ───────────────────────────────────────────────── */
.stack{display:flex;flex-direction:column;gap:15px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
input,select,textarea{padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;font-size:14.5px;
  font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:78px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
input[type=file]{padding:9px;background:var(--bg);cursor:pointer}
.field-hint{font-size:12px;color:var(--faint);font-weight:500}
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:11px;border:1px solid transparent;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;font-family:inherit;white-space:nowrap;
  transition:transform .08s,box-shadow .15s,background .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(140deg,#6558f5,#5a4ff3 60%,#4f45e8);color:#fff;
  box-shadow:0 6px 16px rgba(74,64,216,.28)}
.btn.primary:hover{box-shadow:0 8px 22px rgba(74,64,216,.38);color:#fff}
.btn.primary:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn.ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn.ok{background:var(--ok);color:#fff;box-shadow:0 6px 16px rgba(15,157,107,.25)}
.btn.ok:hover{color:#fff}
.btn.danger{background:var(--err-soft);color:var(--err)}
.btn.danger:hover{background:#fbdbe0}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.lg{padding:13px 22px;font-size:15px}
.btn.block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline{display:inline}

/* ── Alerts ──────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:12px;font-size:14px;margin-bottom:16px;border:1px solid transparent}
.alert.error{background:var(--err-soft);color:var(--err);border-color:#f6ccd3}
.alert.ok{background:var(--ok-soft);color:#0b7a53;border-color:#c7ebda}
.alert.info{background:var(--acc-soft);color:var(--acc-deep);border-color:var(--acc-line)}

.muted{color:var(--mut)}
.faint{color:var(--faint)}
.sm-note{font-size:12.5px}

/* ── Auth ────────────────────────────────────────────────── */
.auth-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:410px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px 34px 30px;box-shadow:var(--sh-lg)}
.auth-card h1{margin-bottom:6px;font-size:24px}
.auth-card .lead{margin-bottom:22px;font-size:14px}
.auth-card form{display:flex;flex-direction:column;gap:16px}
.auth-links{font-size:13px;color:var(--mut);margin-top:18px;text-align:center}

/* ── Campaign list ───────────────────────────────────────── */
.camp-list{display:flex;flex-direction:column;gap:11px}
.camp-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;border:1px solid var(--line);border-radius:14px;text-decoration:none;
  color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s,transform .08s}
.camp-item:hover{border-color:var(--acc-line);box-shadow:var(--sh);transform:translateY(-1px)}
.camp-name{font-weight:700;letter-spacing:-.01em}
.camp-meta{display:flex;gap:7px;flex-wrap:wrap}

/* ── Chips / status ──────────────────────────────────────── */
/* Chips im Apollo-Ton: neutrale Fläche, dünner Rahmen, kleiner Radius.
   Der Zustand steckt in einem Punkt davor, nicht in einer bunten Fläche. */
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink-2);
  border:1px solid var(--line-2);font-size:12px;font-weight:650;padding:4px 10px;
  border-radius:7px;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.chip.done::before{background:var(--ok)}
.chip.run::before{background:var(--acc)}
.chip.err{border-color:#f3cdd4;color:var(--err)}
.chip.err::before{background:var(--err)}
.chip.warn{border-color:#eedbb5;color:var(--warn)}
.chip.warn::before{background:var(--warn)}
/* Chips ohne Zustand (reine Zähler) brauchen keinen Punkt */
.chip.zahl::before,.chip.blank::before{display:none}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 16px}
.chip .led{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}

/* ── Progress ────────────────────────────────────────────── */
.progress{height:9px;background:var(--bg-2);border-radius:999px;overflow:hidden;margin-top:4px}
.progress-fill{height:100%;background:linear-gradient(90deg,#8b7dff,var(--acc));border-radius:999px;transition:width .4s ease}

.video-preview{width:100%;border-radius:12px;background:#000;margin-bottom:12px;max-height:210px}

/* ── Tables ──────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;border-radius:12px}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;color:var(--faint);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;padding:9px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;font-weight:700}
.table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.t-strong{font-weight:700;letter-spacing:-.01em}
.t-actions{white-space:nowrap}
.thumb-mini{width:132px;border-radius:9px;display:block;box-shadow:var(--sh)}

/* ── "oder"-Divider ──────────────────────────────────────── */
.or-divider{display:flex;align-items:center;gap:14px;margin:18px 0 12px;color:var(--faint);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--line-2)}

/* ── Lead-Finder ─────────────────────────────────────────── */
.finder summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--acc)}
.finder[open] summary{margin-bottom:4px}
label.check{flex-direction:row;align-items:flex-start;gap:9px;font-weight:500;font-size:13.5px;color:var(--ink-2)}
label.check input{margin-top:2px;width:16px;height:16px;accent-color:var(--acc)}
.finder-status{margin-top:14px;padding:11px 14px;border-radius:11px;font-size:13px;background:var(--acc-soft);color:var(--acc-deep)}
.finder-status.ok{background:var(--ok-soft);color:#0b7a53}
.finder-status.err{background:var(--err-soft);color:var(--err)}
.finder-status.run{position:relative;overflow:hidden}
.finder-status.run::after{content:'';position:absolute;left:0;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(90,79,243,.16),transparent);animation:sheen 1.4s linear infinite}
@keyframes sheen{from{transform:translateX(-110%)}to{transform:translateX(370%)}}

/* ── Feature-Nav (Tabs auf der Kampagnenseite) ───────────── */
.subnav{display:flex;gap:4px;background:var(--bg-2);border-radius:12px;padding:4px;margin-bottom:22px;flex-wrap:wrap}
.subnav a{flex:1;text-align:center;padding:9px 14px;border-radius:9px;font-size:13.5px;font-weight:700;
  color:var(--mut);white-space:nowrap;transition:background .15s,color .15s}
.subnav a:hover{color:var(--ink)}
.subnav a.active{background:#fff;color:var(--acc);box-shadow:var(--sh-sm)}

/* ── Bausteine-Picker (Analyse) ──────────────────────────── */
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
@media(max-width:640px){.blocks{grid-template-columns:1fr}}
.block-opt{position:relative;border:1px solid var(--line-2);border-radius:13px;padding:15px 16px 15px 44px;
  cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s;display:block}
.block-opt:hover{border-color:var(--acc-line)}
.block-opt input{position:absolute;left:15px;top:16px;width:17px;height:17px;accent-color:var(--acc);cursor:pointer}
.block-opt .bt{font-weight:700;font-size:14px;letter-spacing:-.01em}
.block-opt .bd{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.block-opt input:checked ~ .bt{color:var(--acc-deep)}
.block-opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 3px var(--acc-soft)}

/* dynamische Custom-Bausteine ("+") */
.custom-block{border:1px dashed var(--line-2);border-radius:13px;padding:14px 15px;margin-top:12px;background:var(--bg)}
.custom-block .cbhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.custom-block .cbhd b{font-size:13px}
.add-block{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;border-radius:11px;
  border:1px dashed var(--acc-line);background:var(--acc-soft);color:var(--acc-deep);font-weight:700;font-size:13.5px;
  cursor:pointer;transition:background .15s}
.add-block:hover{background:#e9e5fe}
.add-block .plus{width:20px;height:20px;border-radius:6px;background:var(--acc);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:15px;line-height:1}
.link-remove{background:none;border:0;color:var(--err);font-size:12.5px;font-weight:700;cursor:pointer;padding:0}

/* ── Ergebnis-Karten (Analysen-Liste) ────────────────────── */
.result-list{display:flex;flex-direction:column;gap:11px}
.result-item{display:flex;align-items:center;gap:15px;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:#fff;transition:box-shadow .15s,border-color .15s}
.result-item:hover{box-shadow:var(--sh);border-color:var(--acc-line)}
.result-logo{width:44px;height:44px;border-radius:10px;flex:0 0 auto;object-fit:contain;background:var(--bg-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--acc);font-size:16px}
.result-main{flex:1;min-width:0}
.result-main .rn{font-weight:700;letter-spacing:-.01em}
.result-main .rm{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-pill{font-weight:800;font-size:15px;padding:6px 12px;border-radius:10px;background:var(--acc-soft);color:var(--acc-deep)}

/* Empty states */
.empty{text-align:center;padding:34px 20px;color:var(--mut)}
.empty .ico{margin-bottom:10px;color:var(--faint)}
.empty .ico svg{width:30px;height:30px;display:inline-block}

.reveal{opacity:0;transform:translateY(10px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* ── Dashboard „So funktioniert's"-Strip ─────────────────── */
.how-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
@media(max-width:820px){.how-strip{grid-template-columns:1fr 1fr}}
.how{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.how .hn{width:24px;height:24px;flex:0 0 auto;border-radius:7px;background:var(--acc-soft);color:var(--acc-deep);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}

/* ── Übersicht: Hero-Band + Stepper ──────────────────────── */
.hero-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--acc),#4840d8 70%,#2f2aa8);border-radius:var(--r-lg);
  padding:26px 30px;margin-bottom:20px;box-shadow:0 18px 44px rgba(74,64,216,.3)}
.stepper{display:flex;flex-direction:column;gap:10px}
.stepitem{display:flex;align-items:center;gap:16px;padding:15px 17px;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s,transform .08s}
.stepitem:hover{border-color:var(--acc-line);box-shadow:var(--sh);transform:translateY(-1px)}
.stepitem.done{background:linear-gradient(90deg,var(--ok-soft),#fff 60%)}
.stepnum{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;background:var(--acc-soft);color:var(--acc-deep)}
.stepitem.done .stepnum{background:var(--ok);color:#fff}
.stepbody{flex:1;min-width:0}
.steptitle{font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.stepstatus{font-size:11.5px;font-weight:700;color:var(--mut);background:var(--bg-2);padding:2px 9px;border-radius:999px}
.stepstatus.ok{background:var(--ok-soft);color:#0b7a53}
.stepdesc{font-size:13px;color:var(--mut);margin-top:2px}
.stepgo{color:var(--faint);font-size:18px;font-weight:700}
.stepitem:hover .stepgo{color:var(--acc)}

/* Ausgaben-Karten */
.outcard{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:16px;text-decoration:none;
  color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s,transform .08s}
.outcard:hover{border-color:var(--acc-line);box-shadow:var(--sh);transform:translateY(-1px)}
.outico{font-size:24px}
.outico svg{width:22px;height:22px;display:inline-block;color:var(--acc)}
.outt{font-weight:700;margin-top:8px;letter-spacing:-.01em}
.outd{font-size:12.5px;color:var(--mut);margin-top:3px}

/* ── Video aufnehmen ─────────────────────────────────────── */
.rec-tabs{display:inline-flex;gap:4px;background:var(--bg-2);border-radius:10px;padding:4px;margin:14px 0 12px}
.rec-tab{border:0;background:none;padding:7px 16px;border-radius:8px;font-weight:700;font-size:13px;color:var(--mut);
  cursor:pointer;font-family:inherit}
.rec-tab.active{background:#fff;color:var(--acc);box-shadow:var(--sh-sm)}
.rec-stage{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.rec-stage video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.rec-timer{position:absolute;top:10px;left:10px;background:rgba(220,50,70,.9);color:#fff;font-size:12px;
  font-weight:700;padding:4px 10px;border-radius:999px}

/* ── Export-Spaltenwahl ──────────────────────────────────── */
.col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px}
.col-grid .check{font-size:13.5px;color:var(--ink-2)}
.col-grid .check input{width:16px;height:16px;accent-color:var(--acc)}

/* ── Analysen-Zustand + Texte ────────────────────────────── */
.a-state{display:flex;align-items:center}
.ph-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ph-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:#fff;border-radius:9px;
  padding:6px 11px;font-family:var(--mono);font-size:12px;color:var(--acc-deep);cursor:pointer;transition:border-color .15s,background .15s}
.ph-chip:hover{border-color:var(--acc);background:var(--acc-soft)}
.ph-chip span{font-family:var(--sans);color:var(--mut);font-size:11px}
.tpl-preview{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tpl-preview .pv-subj{font-weight:700;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.tpl-preview .pv-body{font-size:14px;line-height:1.6;color:var(--ink-2);white-space:normal}

/* ── Credits ─────────────────────────────────────────────── */
.credits-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--acc-deep);background:var(--acc-soft);border:1px solid var(--acc-line);
  padding:6px 12px;border-radius:999px;white-space:nowrap}
.credits-badge:hover{border-color:var(--acc);color:var(--acc-deep)}
.credits-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* ── Admin ───────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-sm)}
.stat .l{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.stat .k{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat .k small{font-size:14px;font-weight:600;color:var(--faint)}

/* 14-Tage-Balken (eine Serie, Markenfarbe; Tooltip pro Tag) */
.bars{display:flex;align-items:flex-end;gap:2px;height:120px;padding-top:18px;
  border-bottom:1px solid var(--line-2)}
.bar-slot{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default}
.bar{display:block;width:100%;max-width:26px;min-height:3px;border-radius:4px 4px 0 0;background:var(--acc);position:relative}
.bar em{position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:11px;font-weight:700;color:var(--ink-2)}
.bar-zero{height:3px;background:var(--acc-line)}
.bar-slot:hover .bar{background:var(--acc-deep)}
.bar-slot:hover .bar-zero{background:var(--acc-line)}
.bar-slot::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.bar-slot:hover::after{opacity:1}
.bars-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);padding-top:6px}

.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-of-type{border-bottom:0}
.kv span{color:var(--mut)}
.kv strong{font-weight:800;letter-spacing:-.01em}

/* ── Mobil (v11): Topbar kompakt + Content-Abstände ─────────────── */
@media (max-width:600px){
  .topbar{padding:11px 14px;gap:8px}
  .topbar nav{gap:8px}
  .nav-mail{display:none}                 /* E-Mail ausblenden → Platz für Abmelden */
  .credits-badge{font-size:12px;padding:5px 10px}
  .nav-admin{padding:5px 9px;font-size:12.5px}
  .brand{font-size:17px;gap:8px}
  .brand .mark{width:26px;height:26px}
  .main{padding:22px 16px 56px}
  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  h1{font-size:25px}
  .card{padding:20px 18px}
  .grid-2,.grid-3{gap:14px}
}

/* Legal-Links im App-Footer */
.footer-legal{margin-left:10px}
.footer-legal a{color:inherit;text-decoration:none;font-weight:600}
.footer-legal a:hover{text-decoration:underline}

/* ==================================================================== */
/*  v18 — MOBIL: Bedienbarkeit + Tabellen als Karten                    */
/* ==================================================================== */
@media (max-width:600px){

  /* --- Tap-Ziele auf min. 44px (Apple-Richtwert) --- */
  .brand{padding-block:9px;}
  .credits-badge{min-height:40px;padding-inline:13px;}
  .topbar .btn.sm{min-height:40px;}
  .footer-legal a{display:inline-block;padding:10px 2px;}
  .footer{padding:18px 16px 26px;line-height:2.2;}

  /* --- Reiter: sauberes 3x2-Raster statt schiefem Umbruch --- */
  .subnav{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex-wrap:nowrap;}
  .subnav a{flex:none;min-height:44px;display:flex;align-items:center;justify-content:center;
    padding:8px 4px;font-size:12.5px;line-height:1.2;text-align:center;}

  /* --- Kopfzeilen-Buttons: gleiche Breite, gut treffbar --- */
  .page-head .btn,.head-actions .btn{min-height:42px;}

  /* --- TABELLEN → KARTEN: kein seitliches Wischen mehr --- */
  .table-scroll{overflow-x:visible;border:0;}
  .table{display:block;width:100%;border:0;background:transparent;}
  .table tbody{display:block;}
  .table thead{display:none;}
  .table tr:has(th){display:none;}          /* Kopfzeile entfällt, Labels stehen an den Zellen */
  .table tr{display:block;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:12px 13px;box-shadow:var(--sh-sm);}
  .table tr + tr{margin-top:9px;}
  .table td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    border:0;padding:4px 0;font-size:13.5px;text-align:left !important;}
  /* Label aus data-label, wo gesetzt */
  .table td[data-label]::before{content:attr(data-label);flex:none;
    font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
    color:var(--faint);padding-top:2px;}
  /* Firmenname als Kartentitel */
  .table td.t-strong{display:block;font-size:15.5px;font-weight:750;
    padding:0 0 7px;border-bottom:1px solid var(--line);margin-bottom:5px;}
  .table td.t-strong::before{display:none;}
  /* Aktionen unten rechts */
  .table td.t-actions{justify-content:flex-end;padding-top:9px;}
  .table td.t-actions::before{display:none;}
  .table td.t-actions .btn{min-height:38px;min-width:44px;}
  /* leere Zellen nicht als leere Zeile zeigen */
  .table td:empty{display:none;}
}

/* ==================================================================== */
/*  Geführte Einstiegs-Strecke (/start)                                 */
/* ==================================================================== */
.ob{max-width:720px;margin:0 auto;padding:8px 0 40px}
.ob-bar{display:flex;gap:6px;margin-bottom:8px}
.ob-seg{flex:1;height:4px;border-radius:99px;background:var(--line)}
.ob-seg.past{background:var(--acc)}
.ob-seg.now{background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.ob-meta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.ob-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,38px);box-shadow:var(--sh-sm)}
.ob-card h1{margin:8px 0 0;font-size:clamp(24px,3.6vw,33px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.ob-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-deep)}
.ob-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.6}
.ob-lead{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.ob-form{margin-top:20px}
.ob-card .btn.lg{margin-top:22px;padding:13px 22px;font-size:15px}
.ob-skip{margin:14px 0 0;text-align:center}
.linklike{background:none;border:0;padding:8px;font:inherit;font-size:13px;color:var(--mut);cursor:pointer;text-decoration:underline}
.linklike:hover{color:var(--ink)}
/* Schritt 2: Vorher/Nachher */
.ob-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.ob-vs-col{border-radius:14px;padding:16px;border:1px solid var(--line)}
.ob-vs-bad{background:var(--bg-2)}
.ob-vs-good{background:linear-gradient(160deg,#f4f2ff,#eef7f6);border-color:var(--acc-line)}
.ob-vs-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.ob-vs-good .ob-vs-h{color:var(--acc-deep)}
.ob-mail{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut);font-style:italic}
.ob-vs-list{margin:12px 0 0;padding-left:18px;font-size:12.5px;color:var(--mut)}
.ob-blocks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ob-blocks li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ob-blocks b{font-size:13.5px;font-weight:750}
.ob-blocks span{font-size:11.5px;color:var(--mut);margin-top:1px}
/* Schritt 4: dunkler Prinzip-Moment */
.ob-card--night{background:linear-gradient(160deg,#241f45,#1a1730);border-color:transparent;color:#fff}
.ob-card--night h1,.ob-card--night .ob-lead{color:#fff}
.ob-card--night .ob-lead{color:rgba(255,255,255,.78)}
.ob-card--night .ob-eyebrow{color:#b9aeff}
.ob-num{color:#ffce7a}
.ob-quote{margin:24px 0 6px;padding:0;font-size:clamp(19px,2.6vw,25px);font-weight:750;line-height:1.35;letter-spacing:-.015em;color:#fff}
.ob-quote em{font-style:normal;color:#b9aeff}
.ob-fine{margin:0;font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.btn.white{background:#fff;color:var(--acc-deep);border-color:#fff;font-weight:750}
.btn.white:hover{background:#f3f1ff}
/* Schritt 6: Pakete mit Pro als Anker */
.ob-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 4px}
.ob-pack{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 13px;font-weight:750;font-size:14.5px;
  transition:transform .3s var(--e-int),box-shadow .3s var(--e-int),border-color .3s}
.ob-pack span{font-size:12px;font-weight:600;color:var(--mut)}
.ob-pack:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.ob-pack--anchor{position:relative;border-color:transparent;box-shadow:0 0 0 2px var(--acc),0 12px 28px -10px rgba(90,79,243,.4);padding-top:20px}
.ob-pack--anchor em{font-style:normal;font-size:11.5px;font-weight:750;color:var(--acc-deep);margin-top:4px}
.ob-pack-badge{position:absolute;top:-9px;left:13px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--acc);color:#fff;border-radius:6px;padding:3px 7px}
@media (max-width:600px){
  .ob-vs{grid-template-columns:1fr}
  .ob-packs{grid-template-columns:1fr}
  .ob-pack--anchor{padding-top:22px}
}

/* Credit-Pakete: mittleres Paket als Anker */
.pack-card{position:relative;transition:transform .3s var(--e-int),box-shadow .3s var(--e-int)}
.pack-card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.pack-card--anchor{border-color:transparent;box-shadow:0 0 0 2px var(--acc),0 16px 34px -12px rgba(90,79,243,.38)}
.pack-badge{position:absolute;top:-10px;left:18px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--acc);color:#fff;border-radius:6px;padding:3px 8px}
.pack-per{font-size:12px;color:var(--mut);margin:2px 0 8px}
.pack-per strong{color:var(--acc-deep);font-weight:750}


/* ── Marken-Typografie (B): Schibsted Grotesk + Präzision ─────────── */
h1,h2,h3,.page-head h1{letter-spacing:-.025em}
h1{font-weight:800}
/* Zahlen springen nicht mehr, aber NUR dort, wo Zahlen stehen. Global auf
   body zwingt tabular-nums bei dieser Schrift auch Kommas und Doppelpunkte
   auf Ziffernbreite, was wie ein Leerzeichen vor Satzzeichen aussieht. */
.credits-chip .z,.stat .k,.guthaben-zahl,.kauf-datum,.kauf-plus,
.table td,.bars,.stepstatus,.st-badge{font-variant-numeric:tabular-nums}

/* ── C: Kopfzeile im Apollo-Stil. Geteilter Credits-Chip: Zahl links,
   Aufladen rechts, ein Element. Unter 3 Credits wird er orange. ───── */
.credits-chip{display:inline-flex;align-items:stretch;border:1px solid var(--ink);
  border-radius:9px;overflow:hidden;background:#fff;text-decoration:none;
  transition:box-shadow .15s,transform .15s}
.credits-chip:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.credits-chip .z{display:flex;align-items:baseline;gap:5px;padding:7px 12px;
  font-size:14px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.credits-chip .z small{font-size:11px;font-weight:600;color:var(--mut)}
.credits-chip .auf{display:flex;align-items:center;padding:7px 12px;background:var(--ink);
  color:#fff;font-size:12.5px;font-weight:700}
.credits-chip.knapp{border-color:var(--warn)}
.credits-chip.knapp .z,.credits-chip.knapp .z small{color:var(--warn)}
.credits-chip.knapp .auf{background:var(--warn)}

/* Konto-Menü: reines HTML (details/summary), kein Skript nötig */
.konto-menu{position:relative}
.konto-menu summary{list-style:none;cursor:pointer;display:flex}
.konto-menu summary::-webkit-details-marker{display:none}
.konto-menu .avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:750;color:#fff;
  background:linear-gradient(150deg,#7c6bff,var(--acc-deep));border:2px solid #fff;
  box-shadow:var(--sh-sm)}
.konto-menu[open] .avatar{box-shadow:0 0 0 3px var(--acc-soft)}
.konto-menu .drop{position:absolute;right:0;top:44px;width:210px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);padding:6px;z-index:60}
.konto-menu .wer{padding:8px 10px 9px;font-size:11.5px;color:var(--faint);
  border-bottom:1px solid var(--line);margin-bottom:5px;word-break:break-all}
.konto-menu .drop a,.konto-menu .drop button{display:block;width:100%;text-align:left;
  padding:8px 10px;border:0;background:none;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--ink-2);cursor:pointer;font-family:var(--sans)}
.konto-menu .drop a:hover,.konto-menu .drop button:hover{background:var(--bg)}
.konto-menu .drop .sep{height:1px;background:var(--line);margin:5px 0}
.konto-menu .drop form button{color:var(--err)}

/* ── D: Status-Badges im Apollo-Stil. Grau ist der Normalfall, Schwarz
   markiert den aktiven Schritt, Grün bleibt leise. ────────────────── */
.st-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;
  background:var(--bg-2);color:var(--mut);white-space:nowrap}
.st-badge.done{background:var(--ok-soft);color:#0a7a52}
.st-badge.now{background:var(--ink);color:#fff}
.stepitem.now{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.stepitem .stepgo{display:flex;align-items:center;gap:6px;color:var(--faint);
  font-size:12.5px;font-weight:650;white-space:nowrap}
.stepitem .stepgo span{opacity:0;transform:translateX(4px);transition:opacity .15s,transform .15s}
.stepitem:hover .stepgo span{opacity:1;transform:none}
.stepitem:hover .stepgo{color:var(--acc-deep)}

/* ── F: Als-Nächstes-Karte. EIN Indigo-Moment pro Seite. ──────────── */
.next-band{display:flex;align-items:center;justify-content:space-between;gap:22px;
  background:linear-gradient(150deg,var(--acc),var(--acc-deep));color:#fff;
  border-radius:var(--r-lg);padding:22px 26px;margin-bottom:18px;box-shadow:var(--sh)}
.nb-kicker{margin:0 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.nb-title{margin:0 0 5px;color:#fff;font-size:21px;letter-spacing:-.02em}
.nb-text{margin:0;color:rgba(255,255,255,.85);font-size:13.5px;max-width:54ch;line-height:1.55}
.btn.white{background:#fff;color:var(--acc-deep)}
.btn.white:hover{background:#f4f2ff}
@media(max-width:600px){.next-band{flex-direction:column;align-items:flex-start}}

/* ── E: Konto-Seite ─────────────────────────────────────────────── */
.konto-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:800px){.konto-grid{grid-template-columns:1fr}}
.konto-grid .card.gefahr{grid-column:1/-1;border-color:#f3cdd4}
.kv-zeile{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.kv-k{color:var(--mut);font-weight:600}
.kv-v{font-weight:700;word-break:break-all;text-align:right}
.konto-sub{font-size:13px;font-weight:750;letter-spacing:.02em;margin:20px 0 10px;color:var(--ink-2)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#2b2740}
.guthaben-zeile{display:flex;align-items:center;gap:14px}
.guthaben-zahl{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.guthaben-label{flex:1;font-size:13px;font-weight:700}
.guthaben-label small{font-weight:500;color:var(--mut)}
.kauf-liste{display:flex;flex-direction:column}
.kauf-zeile{display:flex;gap:12px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.kauf-datum{color:var(--faint);flex:0 0 82px;font-variant-numeric:tabular-nums}
.kauf-was{flex:1;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kauf-plus{font-weight:750;color:#0a7a52}
.gefahr-details summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--err)}
.gefahr-btn{background:var(--err);color:#fff}
.gefahr-btn:hover{background:#c22740}

/* ── Status-Zeile bei der Generierung: Zahlen tragen die Aussage, Farbe
   ist nur ein stiller Punkt. Der Fehler-Eintrag erscheint erst ab 1. ── */
.status-zeile{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin:12px 0 16px}
.stz{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;font-weight:600;color:var(--mut)}
.stz b{font-size:15px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.stz i{width:7px;height:7px;border-radius:50%;background:var(--line-2);align-self:center}
.stz.done i{background:var(--ok)}
.stz.run i{background:var(--acc)}
.stz.run b{color:var(--acc-deep)}
.stz.err{display:none}
.stz.err.zeigen{display:inline-flex}
.stz.err i{background:var(--err)}
.stz.err b{color:var(--err)}

/* ── Guthaben-Karte auf der Credits-Seite ── */
.guthaben-karte{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.gk-label{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.gk-zahl{font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.gk-zahl span{font-size:17px;font-weight:700;color:var(--mut);margin-left:8px}
.gk-reicht{margin-top:4px;font-size:13px;color:var(--mut)}
.gk-reicht b{color:var(--ink)}
.gk-kosten{display:flex;flex-direction:column;gap:0;min-width:280px}
.gk-kzeile{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.gk-kzeile:last-child{border-bottom:0}
.gk-preis{flex:0 0 92px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.gk-kzeile.gratis .gk-preis{color:#0a7a52}