/* ============================================================
   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}
/* height:auto ist Pflicht, sobald die Bilder width/height-Attribute tragen (CLS-Reservierung):
   ohne sie wirkt das height-Attribut als feste Hoehe und quetscht den Beleg. */
.sheet img{display:block;width:100%;height:auto;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}
/* S/H, Kontonummer-Pille, Name und Pfeil: Typografie 1:1 aus .pr-konto-side/
   -num/-name/-arrow (pruefung.css:4049–4115) — die S/H-Kennung ist dort ein
   reiner Mono-Buchstabe ohne Box, die Nummer eine dünne (weight 100) Pille
   ohne Rand. */
.kside{grid-row:1;grid-column:1;font-family:var(--mono);font-feature-settings:"tnum" 1;font-size:var(--font-size-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--text-secondary)}
.kside.s{color:var(--color-text-accent-emphasis)}
.knum{grid-row:1;grid-column:2;justify-self:start;font-family:var(--mono);font-feature-settings:"tnum" 1;font-weight:100;font-size:var(--font-size-hint);background:var(--color-bg-hover);border-radius:var(--radius-sm);padding:var(--spacing-0-5) var(--spacing-1-5)}
.kname{grid-row:2;grid-column:2;font-size:var(--font-size-2xs);font-style:italic;color:var(--text-secondary)}
.karrow{grid-column:2;justify-self:center;align-self:start;margin-top:1px;color:var(--text-muted);font-size:var(--font-size-xs)}
/* Begründung 1:1 wie .sm-empfehlung__reasoning (slideover.css): Mono-Systemstimme,
   xs/500/1.5, Terrakotta-Strichlinie, kein Etikett — die Karte ist die App-Karte. */
.vreason{margin-top:var(--spacing-2);padding-top:var(--spacing-3);border-top:1px dashed var(--color-primary-edge);font-family:var(--mono);font-feature-settings:"tnum" 1;font-size:var(--font-size-xs);font-weight:500;line-height:1.5;color:var(--text-primary)}

/* ── Vorschlags-Karte = ds-labeled-card ─────────────────────
   Überstehende Pille am oberen Rand, 1:1 aus dem Flyin. */
/* Rand und Pille wie die echte Empfehlungs-Card im Flyin (ds-labeled-card--brand,
   base.css:872): neutraler Satz, KEIN Statuston. Die App reserviert Farbe für
   Zustände (Warnung/Vorschlag/Notiz) — die Buchungskarte selbst hebt sich über
   Gewicht ab (2px Kante), nicht über Hue. --ds-card-edge = --color-text-secondary
   (dieselbe dunkle Tinte wie Kontonamen/Buchungstext), --ds-card-soft =
   --color-bg-card (Papier-Grund, kein Farbton). */
.vcard{position:relative;--ds-card-edge:var(--color-text-secondary);--ds-card-soft:var(--color-bg-card);background:var(--ds-card-soft);border:2px solid var(--ds-card-edge);border-radius:var(--radius-md);padding:calc(var(--spacing-3) + 8px) var(--spacing-4) var(--spacing-3);box-shadow:var(--shadow-md);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-family:var(--mono);font-feature-settings:"tnum" 1;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1.3}
.vz__betrag{margin-left:auto;font-family:var(--mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);font-size:var(--font-size-body)}
/* Splitzeilen-Trenner wie .sm-empfehlung-split__zeile: Terrakotta-Strichlinie. */
.vz + .vz{border-top:1px dashed var(--color-primary-edge);padding-top:var(--spacing-3)}
.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}

/* ── Beweis-Rahmen ──────────────────────────────────────────
   Formen-Kontrakt §3: ein Stil für alle Kapitel-Screenshots. */
.lp-beweis{border-radius:var(--radius-lg);border:var(--border-width-1) solid var(--color-border-warm);box-shadow:var(--shadow-md);overflow:hidden}
.lp-beweis img{display:block;width:100%}

/* ── 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"] .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 */
/* Badge sitzt auf --ds-card-edge = --color-text-secondary — die ist in Dark hell
   (#C5BFB6), das globale --color-on-accent oben ist für den dunklen
   Stammblatt-Akzent (--color-primary) gedacht und wäre hier hell auf hell.
   Eigene dunkle Badge-Schrift statt des geteilten Tokens. */
[data-theme="dark"] .ds-labeled-card__badge{background:color-mix(in srgb, var(--ds-card-edge) 68%, var(--color-bg-app));color:var(--paper-950)}