/* ============================================================
   landing-kit.css — grafische Sprache der BelegAgent-Landing
   (.sheet, .kline, .vcard, .vp, .st, .mc, .postit, .proof-head)

   Reitet auf der App-Schicht: Palette (v3-warm-buetten.css) +
   tokens.css müssen davor geladen sein. Kein eigener Palette-
   Seed mehr — Werte kommen aus einer Quelle.

   Der :root unten ist NUR die Bridge: beweis-kit-interne Namen
   → App-Semantic-Tokens. Ein Ort, kein Suchen-und-Ersetzen im
   Komponenten-Body. Landing-Welt (DESIGNER_CSS_FILES): Palette-
   Stufen + Visual-Effekt-Werte sind hier erlaubt.
   ============================================================ */

:root{
  /* Bridge → App-Tokens */
  --font:           var(--font-body);
  --mono:           var(--font-mono);
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);
  --kreditor:       var(--color-konto-kreditor);
  --wechsel:        var(--color-wechsel);
  --wechsel-soft:   var(--color-wechsel-soft);
  --postit:         var(--color-postit);
  --postit-hi:      var(--color-postit-hi);
  /* Landing-only: warm getönter Beleg-Blatt-Schatten
     (App-Shadows sind slate-getönt, hier braucht's Terracotta-Wärme). */
  --sh-sheet: 0 1px 1px rgba(19,17,15,.06), 0 9px 18px -8px rgba(101,38,11,.22), 0 22px 44px -18px rgba(19,17,15,.20);
  /* rough.js-Tinte/Marker (Light) — landing-engine.js liest diese theme-abhängig. */
  --hand-ink:    #2F4363;
  --hand-marker: rgba(255,221,64,.62);
  /* Neon-Highlighter-Töne (reale Stiftfarben, translucent) für Textmarker-Varianten */
  --hand-marker-green: #24344C;
  --hand-marker-pink:  rgba(255,113,180,.52);
  --hand-marker-blue:  rgba(83,215,255,.50);
  /* Warme Haarlinie (Light = paper-300, Bütten-warm) — kippt im Dark auf die App-Border.
     Eigenes Token, weil --color-border (slate-300) den Landing-Hairlines die Wärme nähme. */
  --color-border-warm: var(--paper-300);
}

/* ── Beleg-Blatt ────────────────────────────────────────────
   Der Beleg liegt als echtes Blatt mit Schatten da. */
.sheet{display:inline-block;background:var(--white);border:1px solid var(--paper-300);border-radius:var(--radius-sm);box-shadow:var(--sh-sheet);transform:rotate(-1.4deg);line-height:0;max-width:160px}
.sheet img{display:block;width:100%;border-radius:3px}

/* ── Konto-Zeile (pr-konto-Konvention) ──────────────────────
   S→H, Kreditor in Sienna. */
.kline{display:grid;grid-template-columns:1fr 22px 1fr;gap:9px;align-items:start;max-width:460px}
.kcell{display:grid;grid-template-columns:20px 1fr;column-gap:8px;row-gap:3px}
.kside{grid-row:1;grid-column:1;width:20px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font:700 11px var(--mono);background:var(--color-bg-hover);color:var(--text-secondary)}
.kside.s{color:var(--color-text-accent-emphasis)}.kside.h{color:var(--ink-600)}
.knum{grid-row:1;grid-column:2;justify-self:start;font-family:var(--mono);font-feature-settings:"tnum" 1;font-weight:600;font-size:13px;background:var(--color-bg-zebra);border:1px solid var(--paper-300);border-radius:var(--radius-sm);padding:0 7px;line-height:18px}
.kname{grid-row:2;grid-column:2;font-size:var(--font-size-2xs);font-style:italic;color:var(--text-muted)}
.karrow{grid-column:2;justify-self:center;align-self:start;margin-top:1px;color:var(--terracotta-300);font-size:15px}
.vreason{margin-top:16px;padding-top:13px;border-top:1px dashed var(--color-primary-edge);font-family:var(--mono);font-size:11px;font-weight:500;line-height:1.6;color:var(--text-primary)}

/* ── Vorschlags-Karte = ds-labeled-card ─────────────────────
   Überstehende Pille am oberen Rand, 1:1 aus dem Flyin. */
.vcard{position:relative;--ds-card-edge:var(--color-primary-edge);--ds-card-soft:var(--color-primary-soft);background:var(--ds-card-soft);border:2px solid var(--ds-card-edge);border-radius:var(--radius-md);padding:21px 20px 19px;box-shadow:var(--skeu-raised);max-width:560px}
.ds-labeled-card__badge{position:absolute;top:0;left:14px;transform:translateY(-50%);background:var(--ds-card-edge);color:var(--color-on-accent);padding:2px 9px;border-radius:var(--radius-pill);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ds-labeled-card__badge-meta{font-family:var(--mono);font-weight:400;text-transform:none;letter-spacing:0;opacity:.85}
.vz__head{display:grid;grid-template-columns:22px 1fr auto;align-items:center;column-gap:11px;margin-bottom:11px}
.vz__nr{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary-edge);color:var(--color-on-accent);border-radius:50%;font:600 11px var(--mono)}
.vz__title{font-weight:600;font-size:13px}.vz__betrag{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:14px}
.vz .kline{padding-left:33px}

/* ── Verdict-Pill (semantisch) ──────────────────────────────
   voll = grün / anteilig = amber / brutto = grau.
   Der visuelle Kern des Aha-Effekts. */
.vp{display:inline-block;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius-pill);padding:5px 11px}
.vp.voll{color:var(--fir-700);background:var(--fir-50);box-shadow:inset 0 0 0 1px var(--fir-100)}
.vp.ant{color:var(--amber-700);background:var(--amber-50);box-shadow:inset 0 0 0 1px var(--amber-100)}
.vp.bru{color:var(--slate-500);background:var(--slate-100)}

/* ── KR-/Stelligkeit-Pill ───────────────────────────────────
   SKR04 4-stellig vs. SKR03-Ärzte 6-stellig vs. SKR14 7-stellig. */
.st{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--color-text-muted);background:var(--color-bg-hover);border:1px solid var(--paper-300);border-radius:var(--radius-sm);padding:2px 7px}

/* ── Kontrast-Karte / Mandant ───────────────────────────────
   Akzentfarbe pro Mandant über --accent setzen. */
.mc{display:inline-flex;flex-direction:column;background:var(--paper-50);border:1px solid var(--paper-300);border-radius:var(--radius-xl);padding:18px 17px;box-shadow:var(--skeu-raised);max-width:300px;--accent:var(--ink-600)}
.mc .nm{font-weight:600;font-size:15px;color:var(--accent)}.mc .meta{font-size:12px;color:var(--text-secondary);margin-top:3px}
.mc .stbar{display:flex;gap:7px;margin-top:9px}
.mc .rhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--paper-400)}
.mc .betrag{font-family:var(--mono);font-weight:700;font-size:16px}.mc .verdict{font:700 11px var(--mono);text-transform:uppercase;color:var(--accent)}
.mc .kline{margin-top:11px}.mc .vreason{border-top-color:var(--accent);color:var(--text-secondary)}

/* ── Post-it ────────────────────────────────────────────────
   Amber, für Flags/Hinweise. */
.postit{position:relative;display:inline-block;background:linear-gradient(180deg,var(--postit-hi),var(--postit));padding:15px 17px;border-radius:2px;box-shadow:0 6px 14px -4px rgba(19,17,15,.30);transform:rotate(-1.4deg);font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--slate-800);max-width:400px}
.postit::before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:rgba(19,17,15,.12) var(--paper-250) transparent transparent}
.postit .lab{display:block;font:700 10.5px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--amber-700);margin-bottom:6px}

/* ── Band-/Hero-Kopf ────────────────────────────────────────
   Nummer + Titel als wiederkehrender Rhythmus. */
.proof-head{max-width:60ch}.proof-head .eyebrow{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--color-text-accent);display:block;margin-bottom:10px}
.proof-head h2{font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.015em}.proof-head .sub{color:var(--text-secondary);margin-top:11px;font-size:16px}

/* ── Util ───────────────────────────────────────────────────*/
.rowflex{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* ── Dark-Mode — Landing-Komponenten. Light unberührt; nur landing-eigene Flächen,
   die fix auf Palette-Stufen liegen (kein exaktes App-Token, vom Token-Sweep geflaggt). ── */
[data-theme="dark"]{
  --hand-ink:    #9DB0CE;                 /* helle Tinte auf dunklem Grund */
  --hand-marker: rgba(255,221,64,.34);    /* gedämpfter Marker auf Dunkel */
  --hand-marker-green: #B4C2D8;
  --hand-marker-pink:  rgba(255,113,180,.30);
  --hand-marker-blue:  rgba(83,215,255,.28);
  --color-border-warm: var(--color-border);  /* warme Haarlinie → App-Dark-Border (#403D38) */
  --color-on-accent: var(--paper-50);   /* Primary ist in Dark dunkel (#A33D14) → Text darauf hell, sonst <3:1 */
}
[data-theme="dark"] .sheet{background:var(--color-bg-card);border-color:var(--color-border)}
[data-theme="dark"] .knum{border-color:var(--color-border)}
[data-theme="dark"] .kside.h{color:var(--ink-300)}
[data-theme="dark"] .mc{background:var(--color-bg-card);border-color:var(--color-border);--accent:var(--ink-300)}
[data-theme="dark"] .mc .rhead{border-top-color:var(--color-border)}
[data-theme="dark"] .vp.voll{color:var(--fir-200);background:rgba(var(--fir-500-rgb),.18);box-shadow:inset 0 0 0 1px rgba(var(--fir-500-rgb),.30)}
[data-theme="dark"] .vp.ant{color:var(--amber-200);background:rgba(var(--amber-500-rgb),.18);box-shadow:inset 0 0 0 1px rgba(var(--amber-500-rgb),.30)}
[data-theme="dark"] .vp.bru{color:var(--slate-300);background:var(--slate-700)}
[data-theme="dark"] .sheet img{filter:brightness(.62) contrast(1.06)}   /* Beleg deutlich dimmen — sonst blendet die Weißfläche auf Dunkel */
[data-theme="dark"] .vcard{color:var(--color-text-primary)}   /* Buchungskarten-Texte (Titel/Betrag) erben hell statt fix dunkel */
[data-theme="dark"] .postit{color:var(--slate-800)}   /* Post-it bleibt gelb → Text bewusst dunkel */
[data-theme="dark"] .ds-labeled-card__badge{background:color-mix(in srgb, var(--ds-card-edge) 68%, var(--color-bg-app))}  /* Badge-Grund dunkler → helles on-accent erreicht ≥4.5 (kleiner Text) */