/* ============================================================================
   engine.css — Optik des Beleg→Buchung→Zielsystem-Exhibits.
   Geteilt von 00-engine-hero.html (Landing) und beispiel-editor.html (Editor),
   damit der Editor exakt das echte Exhibit zeigt. Farben/Tokens aus
   beweis-kit.css + ds.css (zuerst laden). Hier nur Bühne + ihre Bausteine.
   ============================================================================ */
:root{--hand:"Kalam",cursive;}  /* Handschrift-Stimme — ein Hebel */

/* Bühne: (Beleg + Stammblatt) → Karte → Zielsystem; Randnotizen als Overlay */
.stage{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--spacing-5);min-height:520px}
/* mix-blend-mode: multiply → Marker wirkt wie echter Textmarker (tönt statt deckt),
   markierte Schrift bleibt lesbar; Tinte/Pfeile sinken ins Papier. Global für alle Exhibits. */
.connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible;mix-blend-mode:multiply}

/* Input-Seite: zwei Objekte übereinander — der Beleg (Vorgang) + das Stammblatt (Regeln) */
.inputs{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-8);align-self:center}
.beleg{position:relative;flex:0 0 auto}
.beleg .sheet{max-width:212px;transform:rotate(-2deg);display:block;cursor:zoom-in}
.beleg .zoom{position:absolute;right:8px;bottom:6px;width:34px;height:34px;border-radius:50%;background:var(--terracotta-600);
     color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(101,38,11,.30);transform:rotate(-2deg);cursor:zoom-in}

/* Mandanten-Stammblatt — als Karteikarte (Karteikasten): Register-Reiter, linierte Felder, Checkbox, warmes Papier */
.stammblatt{position:relative;width:250px;margin-top:20px;transform:rotate(-0.5deg)}
.sb__body{position:relative;z-index:1;background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-md);
     box-shadow:0 1px 2px rgba(19,17,15,.06),0 14px 30px -16px rgba(19,17,15,.30);padding:var(--spacing-4)}
/* Register-Reiter: sitzt DAHINTER — die Karten-Vorderkante (.sb__body, z-index:1) deckt den Reiter-Fuß ab */
.sb__tab{position:absolute;bottom:100%;left:14px;margin-bottom:-6px;z-index:0;background:var(--paper-200);
     border:1px solid var(--paper-300);border-bottom:none;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:3px 13px 9px;
     box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
     font-family:var(--mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--slate-500)}
.sb__name{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--ink-800);padding-bottom:var(--spacing-2);border-bottom:3px solid var(--sb-akzent, var(--ink-700))}
/* Mandant mit Kreditor-Akzent: Reiter in voller Brandfarbe + Text auf Akzent (weiß in Hell, dunkel in Dark). */
.stammblatt.has-akzent .sb__tab{background:var(--sb-akzent);color:var(--color-on-accent)}
.sb__fields{margin-top:var(--spacing-1);display:flex;flex-direction:column}
.sb__row{display:grid;grid-template-columns:92px 1fr;gap:var(--spacing-2);align-items:baseline;padding:5px 0;border-bottom:1px dotted var(--paper-400)}
.sb__row dt{font-size:var(--font-size-xs);color:var(--color-text-muted)}
.sb__row dd{font-family:var(--mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--slate-800);display:inline-flex;align-items:center;gap:5px}  /* getippt: schwarzes Mono */
.sb__check{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border:1.4px solid var(--slate-400);border-radius:2px;font-size:var(--font-size-2xs);line-height:1;color:var(--fir-600)}
.sb__check--on{border-color:var(--fir-600);background:var(--fir-50)}
.sb__rule{margin-top:var(--spacing-2)}  /* nicht abgesetzt: fließt nach den Feldern, kein eigener Trenner */
.sb__rulelabel{font-family:var(--mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}
.sb__ruletext{font-family:var(--mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);color:var(--slate-800);margin-top:4px;min-height:64px}  /* getippt; Mindesthöhe ~4 Zeilen → Karten gleich groß, kein Strich */
/* „keine Regel nötig" — bewusste Aussage statt Leere; Fir-Check = positiv abgedeckt */
.sb__none{color:var(--ink-700);font-style:italic}
.sb__none-ck{font-style:normal;font-weight:var(--font-weight-bold);color:var(--fir-600);margin-right:5px}

.cardwrap{flex:0 0 auto;position:relative}
.vcard{width:468px;max-width:none}
/* Alternativer Buchungsvorschlag — gleiche Karte, Wechsel-Blau (App: .ds-labeled-card--wechsel) */
.vcard--alt{--ds-card-edge:var(--wechsel);--ds-card-soft:var(--wechsel-soft);margin-top:var(--spacing-4)}
.vcard--alt .vreason{border-top-color:var(--wechsel);color:var(--ink-700)}
/* Robustheit gegen lange/ungetrennte Eingaben — bricht Tokens statt Überlauf */
.vz__title,.kname,.vreason,.note,.sb__name,.sb__row dd,.sb__ruletext,.export__label{overflow-wrap:anywhere}
.ds-labeled-card__badge{max-width:calc(100% - 24px);white-space:normal;flex-wrap:wrap}
.kcell .knumwrap{grid-row:1;grid-column:2;display:flex;align-items:center;gap:7px}
.kbu{font-family:var(--mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);white-space:nowrap}
.kbu--auto{color:var(--color-text-muted);opacity:.7}
.vz + .vz{margin-top:var(--spacing-4)}  /* mehr Luft zwischen Split-Buchungszeilen */
.vz__title .pct{font-family:var(--mono);font-weight:var(--font-weight-semibold);font-size:var(--font-size-hint);color:var(--ink-700);margin-left:5px}
.vreason [data-ann^="reason"]{font-weight:var(--font-weight-semibold);color:var(--ink-800)}

/* Post-it — getippter Nutzer-Zettel, unten an die Karte geklebt. Spiegelt das
   echte App-Post-it (.sm-note, components/slideover.css): Post-it-Gelb mit
   Glanz-Gradient, feines Korn, umgeknicktes Eselsohr, leichte Neigung,
   „aufgeklebter" Schlagschatten. Schmaler als die 384px-Karte und nach links
   eingerückt → sitzt wie ein echter Zettel, nicht wie eine zweite Karte. */
.cardwrap .sm-note{position:relative;display:block;width:230px;margin:-10px auto 0 24px;padding:var(--spacing-3) var(--spacing-4);
     background-color:var(--color-postit);
     background-image:linear-gradient(162deg,var(--color-postit-hi) 0%,var(--color-postit) 16%,var(--color-postit) 84%,color-mix(in srgb,var(--color-text-primary) 8%,var(--color-postit)) 100%);
     border:none;border-radius:1px 1px 2px 2px;
     box-shadow:0 1px 1px var(--skeu-ink-10),0 10px 18px -8px var(--skeu-ink-18);
     transform:rotate(-1.6deg)}
.cardwrap .sm-note::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
     background-image:var(--skeu-grain);background-size:120px 120px;mix-blend-mode:multiply;opacity:.07}
.cardwrap .sm-note::after{content:"";position:absolute;right:0;bottom:0;width:16px;height:16px;
     background:linear-gradient(135deg,transparent 0%,transparent 50%,color-mix(in srgb,var(--color-text-primary) 15%,var(--color-postit)) 50%);
     border-bottom-right-radius:2px}
.cardwrap .sm-note__text{position:relative;z-index:1;font-family:var(--font-mono);font-feature-settings:var(--font-feature-mono);
     font-size:var(--font-size-hint);font-weight:500;line-height:1.45;color:var(--color-text-primary);white-space:pre-wrap;word-break:break-word}

/* Randnotizen — Overlay; jede wird per JS neben ihr Ziel gesetzt */
.notes{position:absolute;inset:0;pointer-events:none;z-index:5}
.note{position:absolute;width:max-content;max-width:190px;font-family:var(--hand);font-size:var(--font-size-h1);line-height:var(--line-height-tight);
     color:var(--ink-700);font-weight:var(--font-weight-bold)}
.note__hw{display:block}
.note.sbnote{width:max-content;max-width:120px}  /* kompakt → "ohne Anlernen" passt in den Keil zwischen Stammblatt und Karte */

/* Stichpunkt-Liste — Handschrift unter dem Stammblatt (Alternative zu den Randnotizen mit Pfeil):
   nur die Ziele werden markiert, die Erklärung steht hier gesammelt als Stichpunkte. Eine Tinte. */
.stichliste{position:absolute;width:288px;z-index:5;pointer-events:none}
.stichliste__ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-2)}
.stichliste__ul li{position:relative;padding-left:20px;font-family:var(--hand);font-size:var(--font-size-h3);
     line-height:var(--line-height-snug);font-weight:var(--font-weight-bold);color:var(--ink-700)}
.stichliste__ul li::before{content:"–";position:absolute;left:0;top:0;color:var(--ink-700)}

/* Dritter Schritt — Übergabe rechts neben der Karte (Beleg+Mandant → Buchung → Zielsystem) */
.exportarrow{flex:0 0 auto}
.export{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--spacing-3);max-width:176px}
.export__label{font-family:var(--mono);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);letter-spacing:.02em;color:var(--ink-700);border-top:var(--border-width-1) solid var(--paper-300);padding-top:var(--spacing-2)}
.export__logos{display:flex;flex-direction:column;gap:var(--spacing-4);align-items:flex-start;margin-top:var(--spacing-1)}
.ueb-logo{display:block;background-image:var(--logo);background-size:contain;background-repeat:no-repeat;background-position:left center;
     filter:grayscale(1) brightness(.5) contrast(1.05);opacity:.7}  /* ruhiges, einfarbiges „kompatibel mit" statt Logo-Farbgeschrei */
.l-datev{--logo:url(/static/images/landing/logos/datev.svg);width:30px;height:30px}
.l-lexware{--logo:url(/static/images/landing/logos/lexware.png);width:118px;height:17px}
.l-addison{--logo:url(/static/images/landing/logos/addison.png);width:118px;height:36px}
.ueb-more{font-family:var(--mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--slate-400);margin-top:var(--spacing-1)}

/* ── Dark-Mode — Exhibit-Flächen, die fix auf Palette-Stufen liegen. Light unberührt.
   Beleg/Post-it bleiben physisch (Beleg nur gedimmt, s. landing-kit). Stammblatt wird
   App-dunkel, Buchungskarten-Texte + Handschrift kippen auf helle Tinte. ── */
[data-theme="dark"] .sb__body{background:var(--color-bg-card);border-color:var(--color-border);
     box-shadow:0 1px 2px rgba(0,0,0,.30),0 14px 30px -16px rgba(0,0,0,.55)}
[data-theme="dark"] .sb__tab{background:var(--color-bg-app);border-color:var(--color-border);box-shadow:none;color:var(--color-text-muted)}
[data-theme="dark"] .sb__name{color:var(--color-text-primary)}
[data-theme="dark"] .sb__row{border-bottom-color:var(--color-border)}
[data-theme="dark"] .sb__row dt{color:var(--color-text-muted)}
[data-theme="dark"] .sb__row dd{color:var(--color-text-secondary)}
[data-theme="dark"] .sb__rulelabel{color:var(--color-text-muted)}
[data-theme="dark"] .sb__ruletext{color:var(--color-text-secondary)}
[data-theme="dark"] .sb__none{color:var(--color-text-secondary)}
[data-theme="dark"] .sb__check{border-color:var(--color-border)}
[data-theme="dark"] .sb__check--on{border-color:var(--fir-500);background:rgba(var(--fir-500-rgb),.22);color:var(--fir-200)}
[data-theme="dark"] .vz__title .pct{color:var(--color-text-secondary)}
[data-theme="dark"] .vreason [data-ann^="reason"]{color:var(--color-text-primary)}
[data-theme="dark"] .vcard--alt .vreason{color:var(--color-text-secondary)}
[data-theme="dark"] .export__label{color:var(--color-text-secondary);border-top-color:var(--color-border)}
[data-theme="dark"] .ueb-more{color:var(--color-text-muted)}
/* Connectors/Marker (rough.js): Farbe kippt über --hand-ink/--hand-marker (Engine liest sie),
   aber multiply dunkelt Tinte+Marker auf dunklem Grund ab → unsichtbar. Blende hier auf normal. */
[data-theme="dark"] .connectors{mix-blend-mode:normal}
/* Handschrift — helle Tinte auf Dunkel (lag fix auf --ink-700 → unsichtbar) */
[data-theme="dark"] .note,
[data-theme="dark"] .stichliste__ul li,
[data-theme="dark"] .stichliste__ul li::before{color:var(--ink-300)}

/* ── Mobil-Karussell-Punkte (Hero + Beispiele-Exhibit) — von landing-nav.js befüllt ── */
.stage-dots{display:none}
@media (max-width:820px){
  .stage-dots{display:flex;justify-content:center;gap:7px;margin-top:var(--spacing-3)}
  .stage-dots__d{width:6px;height:6px;border-radius:50%;background:var(--color-text-muted);opacity:.4;transition:opacity var(--lp-dur-base) var(--lp-ease-out),background var(--lp-dur-base) var(--lp-ease-out),transform var(--lp-dur-base) var(--lp-ease-spring)}
  .stage-dots__d.is-on{opacity:1;background:var(--color-primary);transform:scale(1.25)}
}