/* =========================================================================
   /ci — Brand-Handbuch (X-CI-01). Baut ausschließlich auf den CI-Tokens aus ci.css (eats its own dog food).
   Wird nur von resources/views/public/ci.blade.php geladen (nach ci.css und site-2026.css).
   Same-origin, kein @import, keine externen Ressourcen.
   ========================================================================= */

/* Entscheid 71: ci.css setzt html,body{overflow-x:clip} seit 08.10.2026 selbst (vorher hidden → sticky haftete nicht). */

/* Ankersprünge: Kopfzeile + Sprungleiste verdecken sonst die Überschrift. --ci-nav-top setzt das Skript der Sprungleiste. */
html{scroll-padding-top:calc(var(--ci-nav-top,72px) + 64px)}

.sg{padding-bottom:40px}
.sg-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.sg-hero .grid-bg{position:absolute;inset:0;opacity:.5;
    -webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 35%,transparent 78%);
    mask-image:radial-gradient(120% 100% at 50% 0,#000 35%,transparent 78%)}
.sg-hero .glowblob{position:absolute;top:-180px;right:-120px;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,var(--glow),transparent 65%);filter:blur(8px);pointer-events:none}
.sg-hero .wrap{position:relative;padding:84px 24px 56px}
.sg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.ci-pille{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
    background:var(--ink);color:var(--paper-2);border-radius:var(--radius-pill);padding:6px 14px}
.ci-stand{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.3px;color:var(--muted)}
.sg-h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:.96;
    font-size:clamp(44px,8vw,96px);max-width:13ch;margin:18px 0 0}
.sg-h1 .volt{color:var(--volt-d);position:relative;white-space:nowrap}
.sg-h1 .volt::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.13em;background:var(--volt);opacity:.5;border-radius:2px}
.sg .sg-lead{font-size:clamp(17px,2.1vw,21px);color:var(--ink-3);max-width:62ch;margin:26px 0 0;line-height:1.6}
.sg-strip{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0;list-style:none}
.chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.3px;color:var(--ink-2);
    background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:8px 15px;display:inline-flex;gap:8px;align-items:center}
.chip b{color:var(--volt-d);font-weight:500}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 3px var(--glow)}

/* ---- nummerierte Sprungleiste (sticky unter der Kopfzeile, ab 375 px horizontal scrollbar) ---- */
.ci-jump{position:sticky;top:var(--ci-nav-top,72px);z-index:55;background:color-mix(in srgb,var(--paper) 92%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ci-jump ol{display:flex;gap:var(--space-1);margin:0;padding:6px var(--space-2);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.ci-jump li{flex:none}
.ci-jump a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:46px;padding:0 var(--space-3);white-space:nowrap;
    font-family:var(--font-mono);font-size:12.5px;letter-spacing:.3px;color:var(--ink-3);border-bottom:3px solid transparent;
    transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ci-jump a .n{color:var(--volt-d)}
.ci-jump a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.ci-jump a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
@media(forced-colors:active){.ci-jump a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}}

/* ---- Abschnittsgerüst ---- */
.sg-sec{padding:74px 0 8px;border-top:1px solid var(--line)}
.sg-sec:focus{outline:none}
#essenz{border-top:0}
.sg-num{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.sg-sec h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(26px,3.4vw,38px);margin:10px 0 6px}
.sg .sg-sec .note{color:var(--muted);max-width:64ch;margin:0 0 30px;font-size:15.5px}
.ci-h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:20px;line-height:1.2;margin:0 0 var(--space-2)}
.sg .ci-note{color:var(--muted);max-width:64ch;margin:0 0 var(--space-5);font-size:14.5px}
.ci-block{margin-top:var(--space-7)}
.ci-block:first-child{margin-top:0}

/* ---- kopierbare Werte (data-copy): Button mit gestricheltem Rahmen, Rückmeldung in der Live-Region.
   „.sg “ vorangestellt: site-2026.css setzt „.site button{font:inherit}“ und würde die Schrift sonst überschreiben. ---- */
.sg .cp{display:inline-block;max-width:100%;min-height:26px;padding:2px var(--space-2);border:1px dashed var(--muted);border-radius:var(--radius-sm);
    background:transparent;color:inherit;font:500 12.5px/1.45 var(--font-mono);text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:copy;
    transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.sg .cp:hover{background:var(--paper-2);border-color:var(--ink)}
.sg .cp[data-copied]{background:var(--volt);border-color:var(--volt);border-style:solid;color:var(--ink)}
.no-js .sg .cp{cursor:text}
@media(pointer:coarse){.sg .cp{min-height:44px;padding-block:var(--space-2)}}
.ci-toast{position:fixed;left:50%;bottom:var(--space-5);z-index:120;max-width:min(92vw,520px);transform:translate(-50%,var(--space-3));opacity:0;pointer-events:none;
    background:var(--ink);color:var(--paper-2);font:500 13.5px/1.4 var(--font-mono);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ci-toast.is-on{opacity:1;transform:translate(-50%,0)}
.ci-toast.is-fehler{background:var(--copper);color:var(--paper-2)}
.ci-copy-ta{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;border:0;padding:0}

/* ---- 01 Farben ---- */
.ci-verteilung{display:flex;height:64px;border:1px solid var(--line-2);border-radius:var(--radius-md);overflow:hidden}
.ci-teil{display:flex;align-items:flex-end;padding:var(--space-2) var(--space-3);font:500 13px/1 var(--font-mono);flex-basis:0}
.ci-legende{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-3) 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.ci-legende b{font-weight:500;font-family:var(--font-mono)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.sw{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-2);
    transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.sw:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sw .cap{height:96px;display:flex;align-items:flex-end;padding:12px 14px}
.sw .cap .aa{font-family:var(--font-mono);font-size:18px}
.sw .meta{padding:13px 15px 15px}
.sw .rolle{font-family:var(--font-display);font-size:15px;font-weight:700;margin:0 0 8px;letter-spacing:-.005em}
.sw .meta p{margin:0 0 6px}
.sw .use{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:8px}
.sw .kon{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.sw .kon dl{margin:0}
.sw .kon div{display:flex;justify-content:space-between;gap:var(--space-2);font:500 11.5px/1.7 var(--font-mono)}
.sw .kon dt{color:var(--muted)}
.sw .kon dd{margin:0;color:var(--ink);text-align:right}
.sw .ohne{font-size:11.5px;color:var(--muted);line-height:1.45;margin:8px 0 0}

.ci-regeln{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2);max-width:78ch}
.ci-regeln li{position:relative;padding-left:var(--space-5);font-size:14.5px;color:var(--ink-2);line-height:1.55}
.ci-regeln li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;background:var(--volt)}

/* ---- Tabellen (scrollbare Region, tastaturbedienbar) ---- */
.ci-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2)}
.ci-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ci-tbl{width:100%;min-width:640px;border-collapse:collapse;font-family:var(--font-mono);font-size:13px}
.ci-tbl .ff-mono{white-space:nowrap}
.sg .cp.kurz{white-space:nowrap}
.ci-tbl caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ci-tbl th{text-align:left;background:var(--ink);color:var(--paper-2);padding:11px 14px;font-weight:500;font-size:11px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.ci-tbl td,.ci-tbl tbody th{padding:10px 14px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top;text-align:left}
.ci-tbl tbody th{background:transparent;color:var(--ink);font-size:13px;letter-spacing:0;text-transform:none;white-space:normal}
.ci-tbl tbody tr:nth-child(even) td,.ci-tbl tbody tr:nth-child(even) th{background:var(--paper)}
.ci-tbl tr.grp th{background:var(--paper);color:var(--volt-deep);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border-top:1px solid var(--line-2)}
.ci-tbl .probe{display:inline-grid;place-items:center;min-width:44px;padding:4px 10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font-size:15px}
.ci-tbl .ok{color:var(--ink)}
.vdot{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:8px;border:1px solid rgba(21,23,28,.12)}

/* ---- 02 Typografie ---- */
.ff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.ff-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:22px 24px;min-width:0}
.ff-card h4{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.ff-card .rolle{color:var(--muted);font-size:14px;margin:0 0 var(--space-3)}
.ff-card .kopie{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.ff-weights{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-3)}
.ff-weights li{display:grid;grid-template-columns:78px 1fr;gap:var(--space-3);align-items:baseline;border-top:1px dashed var(--line);padding-top:var(--space-3)}
.ff-weights .w{font:500 11.5px/1.4 var(--font-mono);color:var(--muted)}
.ff-weights .s{font-size:22px;line-height:1.2;color:var(--ink);min-width:0;overflow-wrap:anywhere}
/* Proben je Rolle: Beschriftung links, Muster rechts (echte Werte, Größe auf 60 px begrenzt) */
.ci-proben{display:grid;gap:var(--space-3)}
.ci-probe{display:grid;grid-template-columns:190px 1fr;gap:var(--space-5);align-items:center;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:var(--space-5) var(--space-6)}
.ci-probe .ci-lbl{font:500 12px/1.7 var(--font-mono);color:var(--muted)}
.ci-probe .ci-lbl b{display:block;color:var(--ink);font-weight:500;font-size:13px}
.ci-probe .s{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.ci-probe .s.uc{text-transform:uppercase}
.ci-callout{display:grid;gap:var(--space-2);margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border:1px solid var(--line);border-left:4px solid var(--volt);border-radius:var(--radius-md);background:var(--paper-2);max-width:78ch}
.ci-callout h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:0}
.ci-callout p{margin:0;font-size:14.5px;color:var(--ink-2)}
.ci-callout .dateien{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:12.5px;color:var(--muted)}

/* ---- 03 Formen ---- */
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.fm{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:var(--space-4);display:grid;gap:var(--space-2);align-content:start;min-width:0}
.fm .vor{height:84px;display:grid;place-items:center;background:var(--paper);border-radius:var(--radius-sm);padding:var(--space-3);overflow:hidden}
.fm .vor .box{width:100%;height:100%;background:var(--paper-2);border:1px solid var(--line-2)}
.fm .vor.sh{height:124px;overflow:visible;padding-bottom:var(--space-6)}
.fm .vor.sh .box{width:62%;height:44px}
.fm .vor .box.volt{background:var(--volt);border-color:var(--volt)}
.fm .vor .box.grad{border:0}
.fm .vor .bar{height:16px;background:var(--volt);max-width:100%;justify-self:start;border-radius:2px}
.fm p{margin:0}
.fm .rolle{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---- 04 Tokens ---- */
.sg .ci-quelle{margin:var(--space-3) 0 0;font-size:13px;color:var(--muted);max-width:78ch}

/* ---- übernommene Altinhalte (Logo, Komponenten, Ton, Prinzipien) ---- */
.panel{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:26px;margin-bottom:16px}
.panel .ptitle{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ff-mono{font-family:var(--font-mono)}
.gridmini{height:120px;border-radius:var(--radius-md);border:1px solid var(--line)}

.voice{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vcol{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:22px 24px}
.vcol h3,.vcol h4{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:500;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.vcol.do h3,.vcol.do h4{color:var(--ok)} .vcol.dont h3,.vcol.dont h4{color:var(--copper)}
.vcol h3 .tag,.vcol h4 .tag{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:13px}
.vcol.do .tag{background:color-mix(in srgb,var(--ok) 16%,var(--paper));color:var(--ok)}
.vcol.dont .tag{background:color-mix(in srgb,var(--copper) 14%,var(--paper));color:var(--copper)}
.vcol ul{list-style:none;margin:0;padding:0}
.vcol li{font-size:14.5px;color:var(--ink-2);padding:7px 0;border-top:1px dashed var(--line);line-height:1.55}
.vcol li:first-child{border-top:0}

.princ{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.pr{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:22px;position:relative}
.pr .n{font-family:var(--font-mono);font-size:12px;color:var(--volt-d);letter-spacing:1px}
.pr h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:8px 0 6px}
.pr p{font-size:13.8px;color:var(--muted);margin:0;line-height:1.55}

.ci-essenz-row{gap:22px;margin-bottom:8px}
.ci-essenz-row .logo{gap:14px}
/* RD-0-09: Logo der Marke (config/marke.php) — quer als Inline-SVG (Höhe = font-size), Mail-Kopf der Marke auf Graphit in den Modellen */
.ci-essenz-row .marke-logo{display:block;font-size:34px;color:var(--ink)}
.mk-mail-kopf.mk-kopf-dunkel{background:var(--ink);border-bottom-color:var(--ink)}
.mk-mail-kopf.mk-kopf-dunkel img,.mk-pm-wort img{display:block;width:128px;height:28px}
.ci-essenz-row .word{font-size:24px}
.ci-trenner{height:42px;width:1px;background:var(--line-2)}
.ci-werte{font-family:var(--font-mono);font-size:13px;color:var(--muted);max-width:42ch;line-height:1.7;margin:0}
.ci-werte b{color:var(--ink);font-weight:500}

/* ---- Einblenden beim Laden ---- */
.rise{opacity:0;transform:translateY(16px);animation:rise var(--dur-slow) var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
    .rise{animation:none;opacity:1;transform:none}
    .sw,.sw:hover{transition:none;transform:none}
    .ci-toast{transition:none}
    .sg .cp,.ci-jump a{transition:none}
}

@media(max-width:720px){
    .voice{grid-template-columns:1fr}
    .sg-hero .wrap{padding:60px 24px 44px}
    .ff-weights li{grid-template-columns:1fr;gap:var(--space-1)}
    .ci-probe{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-4)}
    .ci-trenner{display:none}
}

/* =========================================================================
   X-CI-02 — Logo-System: Hauptlogo, Konstruktion, Mindestgrößen, „Nicht so“-Raster, Logo im Einsatz, Downloads, Sharing.
   Nur Tokens aus ci.css; Bilder sind die ausgelieferten Dateien aus /brand (same-origin, keine externen Ressourcen).
   ========================================================================= */

/* ---- 05 Logo: Hauptlogo und Bausteine ---- */
.lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}
.lg-bausteine{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}
.lg-bausteine .lg{grid-column:span 2}
.lg-bausteine .lg-breit{grid-column:span 3}
.lg figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-2);height:100%;display:flex;flex-direction:column}
.lg-flaeche{display:grid;place-items:center;min-height:168px;padding:var(--space-6) var(--space-5);background:var(--paper);flex:1}
.lg-dunkel .lg-flaeche{background:var(--ink)}
.lg-grid .lg-quer img{width:min(100%,340px);height:auto}
.lg-grid .lg-gestapelt img{width:min(100%,210px);height:auto}
.lg-bausteine img{width:96px;height:96px}
.lg-bausteine .lg-breit img{width:min(100%,300px);height:auto}
.lg figcaption{padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.lg figcaption b{display:block;font:500 12.5px/1.5 var(--font-mono);color:var(--ink)}

/* ---- Konstruktion und Schutzraum ---- */
.ci-konstr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-4);align-items:start;margin-bottom:var(--space-5)}
.ci-konstr figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);padding:var(--space-4);min-width:0}
.ci-konstr figcaption{margin-top:var(--space-3);font-size:13px;line-height:1.5;color:var(--ink-3)}
.ci-k,.ci-r{width:100%;height:auto;overflow:visible}
.ci-k-scroll{overflow-x:auto}
.ci-k-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ci-k-schutz{fill:color-mix(in srgb,var(--volt) 9%,transparent);stroke:var(--volt-deep);stroke-width:.8;stroke-dasharray:3 2}
.ci-k-box{fill:none;stroke:var(--muted);stroke-width:.4}
.ci-k-m rect{fill:color-mix(in srgb,var(--volt) 24%,var(--paper-2));stroke:var(--volt-deep);stroke-width:.5;stroke-dasharray:2 1.6}
.ci-k-t{font:500 6.5px var(--font-mono);fill:var(--ink)}
.ci-k-dim line{stroke:var(--ink);stroke-width:.6}
.ci-k-dim .ci-k-hilfe{stroke:var(--muted);stroke-width:.3;stroke-dasharray:1.2 1}
.ci-r-gitter line{stroke:var(--line-2);stroke-width:.12}
.ci-r-blitz{fill:none;stroke:var(--ink);stroke-width:.25;stroke-dasharray:1 .8}
.ci-r-mitte{stroke:var(--copper);stroke-width:.2;stroke-dasharray:1.5 .8 .3 .8}
.ci-r-dim line{stroke:var(--ink);stroke-width:.25}
.ci-r-t{font:500 2.8px var(--font-mono);fill:var(--ink)}

/* ---- Mindestgrößen (echte Größe) ---- */
.lg-mindest{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-end;margin:0;padding:0;list-style:none}
.lg-mindest li{display:grid;gap:var(--space-2);justify-items:start}
.lg-klein{min-height:0;flex:none;padding:var(--space-4);background:var(--paper-2);border:1px dashed var(--line-2);border-radius:var(--radius-sm);display:inline-grid}
.lg-mindest img{max-width:none}
.lg-mindest p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.lg-mindest p b{font-family:var(--font-mono);font-weight:500;color:var(--ink);font-size:12.5px}

/* ---- „Nicht so“-Raster ---- */
.ci-nie-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}
.ci-nie figure{margin:0;height:100%;border:1px solid var(--line);border-left:4px solid var(--copper);border-radius:var(--radius-md);background:var(--paper-2);overflow:hidden;display:flex;flex-direction:column}
.ci-nie-bild{height:156px;display:grid;place-items:center;overflow:hidden;background:var(--paper-2);flex:none}
.ci-nie-bild img{width:min(76%,220px);height:auto}
.ci-nie-verzerrt img{transform:scale(1.2,.5)}
.ci-nie-umgefaerbt img{filter:invert(.4) sepia(1) saturate(6) hue-rotate(175deg)} /* RD-0-09: Graphit-Logo sichtbar blau umgefärbt */
.ci-nie-gedreht img{transform:rotate(-14deg)}
.ci-nie-effekte img{filter:drop-shadow(5px 7px 3px rgba(21,23,28,.55)) drop-shadow(0 0 10px var(--volt))}
.ci-nie-foto{background:
    radial-gradient(circle at 18% 30%,var(--copper) 0 17%,transparent 18%),
    radial-gradient(circle at 80% 62%,var(--ok) 0 21%,transparent 22%),
    radial-gradient(circle at 50% 92%,var(--volt) 0 15%,transparent 16%),
    repeating-linear-gradient(115deg,var(--ink-3) 0 9px,var(--paper) 9px 17px,var(--ink-2) 17px 24px)}
.ci-nie-amber-text{background:var(--paper)}
.ci-nie-amber{width:min(78%,240px);height:auto}
.ci-nie figcaption{padding:var(--space-3) var(--space-4) var(--space-4);border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.ci-nie figcaption b{display:block;margin-top:var(--space-2);font-weight:600;color:var(--ink)}
.ci-nie-tag{display:inline-flex;align-items:center;gap:6px;margin-right:var(--space-2);padding:4px 10px;border-radius:var(--radius-pill);background:var(--copper);color:var(--paper-2);
    font:500 11px/1.4 var(--font-mono);letter-spacing:1px;text-transform:uppercase}

/* ---- 06 Logo im Einsatz: Modelle aus HTML/CSS ---- */
.mk-paar{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-start}
.mk-fig{margin:0;min-width:0}
.mk-fig>figcaption{margin-top:var(--space-2);font:500 12px/1.4 var(--font-mono);color:var(--muted)}
.mk{border:1px solid var(--line-2);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-2)}
.sg .mk-label{margin:var(--space-2) 0 0;text-align:center;font:500 12px/1.4 var(--font-mono);color:var(--muted)}
.mk-seite-wrap{display:grid;justify-items:center;min-width:0}
.mk-zeile{display:block;height:5px;border-radius:3px;background:var(--line-2)}
.mk-mandanten-logo{display:inline-grid;place-items:center;min-width:128px;height:34px;padding:0 var(--space-3);border:1.5px dashed var(--muted);border-radius:var(--radius-sm);
    font:500 11px/1 var(--font-mono);color:var(--muted);white-space:nowrap}
.mk-mandanten-logo.mk-klein{min-width:104px;height:28px;font-size:10px}
.sg .mk-powered{margin:var(--space-2) 0 0;text-align:center;font-size:10px;line-height:1.4;letter-spacing:.3px;font-family:var(--font-mono);color:var(--muted)}

.mk-sidebar{width:248px;max-width:100%;padding:var(--space-4)}
.mk-hell{background:var(--paper-2)}
.mk-dunkel{background:var(--ink);border-color:var(--ink-3)}
.mk-sb-kopf img{width:176px;max-width:100%;height:auto}
.mk-sb-nav{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:2px;font:500 13.5px/1.3 var(--font-body)}
.mk-sb-nav li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--ink-3)}
.mk-ic{flex:none;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;opacity:.7}
.mk-hell .is-aktiv{background:color-mix(in srgb,var(--volt) 22%,var(--paper-2));color:var(--ink)}
.mk-dunkel .mk-sb-nav li{color:#c9cad0}
.mk-dunkel .is-aktiv{background:var(--ink-2);color:var(--paper-2)}
.is-aktiv .mk-ic{background:var(--volt);border-color:var(--volt);opacity:1}

.mk-tab{width:min(100%,430px);background:var(--paper)}
.mk-tabs{display:flex;gap:4px;padding:8px 8px 0;background:var(--line)}
.mk-tab-a,.mk-tab-b{padding:8px 12px;font:500 12.5px/1.3 var(--font-body);white-space:nowrap}
.mk-tab-a{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);border-radius:8px 8px 0 0;color:var(--ink)}
.mk-tab-a img{width:16px;height:16px;flex:none}
.mk-tab-b{color:var(--ink-3)}
.mk-url{padding:8px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.mk-url-feld{display:block;height:24px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.mk-gross{padding:var(--space-4);display:flex;align-items:center}
.mk-gross img{width:32px;height:32px}

.mk-avatar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-5);width:max-content;max-width:100%}
.mk-avatar img{width:72px;height:72px;flex:none}
.mk-av-rund{border-radius:50%}
.mk-av-eckig{border-radius:18px}
.mk-av-text{display:grid;gap:2px;min-width:0}
.mk-av-text b{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.mk-av-text span{font-size:13px;color:var(--ink-3)}

.mk-a4{width:262px;max-width:100%;aspect-ratio:210/297;padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.mk-a4-kopf{min-height:34px;display:flex;align-items:center}
.mk-a4-kopf img{width:150px;height:auto}
.sg .mk-a4-absender{margin:18px 0 0;font:500 8px/1.4 var(--font-mono);color:var(--muted)}
.sg .mk-a4-adresse{margin:6px 0 18px;font:500 9px/1.5 var(--font-mono);color:var(--ink-3)}
.mk-a4-text{display:grid;gap:7px}
.sg .mk-a4-fuss{margin:auto 0 0;padding-top:6px;border-top:1px solid var(--line);font:500 7.5px/1.4 var(--font-mono);color:var(--muted)}
.sg .mk-a4 .mk-powered{margin-top:6px}

.mk-portal{width:min(100%,375px);background:var(--paper)}
.mk-portal-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ink);color:var(--paper-2)}
.mk-portal-kopf .mk-mandanten-logo{border-color:var(--paper-2);color:var(--paper-2)}
.mk-portal-kopf b{font:600 15px/1.3 var(--font-body)}
.mk-portal-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.mk-kachel{display:block;padding:24px 12px;text-align:center;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);font:600 13px/1.3 var(--font-body);color:var(--ink)}
.sg .mk-portal .mk-powered{padding:var(--space-3) 0 var(--space-4);margin:0}

.mk-mail{width:min(100%,320px);padding-bottom:var(--space-4)}
.mk-mail-kopf{display:flex;align-items:center;min-height:62px;padding:16px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.mk-mail-kopf img{width:160px;height:auto}
.sg .mk-mail-betreff{margin:0;padding:16px 20px 10px;font:700 15px/1.3 var(--font-display);color:var(--ink)}
.mk-mail .mk-a4-text{padding:0 20px}
.sg .mk-mail .mk-powered{padding:var(--space-4) 20px 0;margin:0}

/* ---- 07 Downloads ---- */
.dl-zip{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding:var(--space-5) var(--space-6);
    border:1px solid var(--line);border-left:4px solid var(--volt);border-radius:var(--radius-md);background:var(--paper-2)}
.dl-zip-aktionen{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.sg .dl-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-5);border-radius:11px;background:var(--ink);color:var(--paper-2);
    font:500 14px/1.3 var(--font-mono);letter-spacing:.3px;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.sg .dl-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sg .dl-link{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-3);border:1.5px solid var(--ink);border-radius:var(--radius-sm);color:var(--ink);
    font:500 12.5px/1.3 var(--font-mono);transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.sg .dl-link:hover{background:var(--ink);color:var(--paper-2)}
.sg .dl-btn:focus-visible,.sg .dl-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--glow)}
@media(pointer:coarse){.sg .dl-link{min-height:44px}}
.dl-meta{display:block;margin:6px 0;font:500 11.5px/1.5 var(--font-mono);color:var(--muted)}
.dl-tbl .dl-vorschau{width:172px;text-align:center;background:var(--paper)}
.dl-tbl .dl-vorschau.is-dunkel{background:var(--ink)}
.dl-vorschau img{margin:0 auto;width:auto;height:auto;max-width:140px;max-height:96px}
.dl-sub{display:block;margin-top:4px;font:400 13px/1.5 var(--font-body);color:var(--ink-3)}
.dl-format{min-width:176px}

/* ---- Sharing: Vorschaubilder und Meta-Snippet ---- */
.og-format{margin-bottom:var(--space-6)}
.og-masse{margin-left:var(--space-2);font:500 12px/1.4 var(--font-mono);color:var(--muted)}
.og-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}
.og-paar figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-2);height:100%;display:flex;flex-direction:column}
.og-paar img{display:block;margin:0 auto;width:100%;height:auto;background:var(--paper)}
.og-paar figcaption{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:auto;padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);font-size:13.5px}
.og-snippets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:var(--space-4)}
.ci-snippet{margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-2)}
.ci-snippet figcaption{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);font-size:13.5px}
.sg .ci-code code{font:inherit;line-height:inherit}
.ci-code{margin:0;padding:var(--space-4);overflow-x:auto;background:var(--ink);color:var(--paper-2);font:500 12.5px/1.7 var(--font-mono);tab-size:2}
.ci-code:focus-visible{outline:2px solid var(--volt);outline-offset:-4px}

@media(max-width:860px){
    .ci-konstr{grid-template-columns:1fr}
}
@media(max-width:600px){
    /* Beschriftung der Konstruktionsgrafik bleibt lesbar (>= 10 px): schmale Bildschirme scrollen die Grafik waagrecht. */
    .ci-k{min-width:540px}
}
@media(max-width:720px){
    .lg-grid,.og-paar{grid-template-columns:1fr}
    .lg-bausteine{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lg-bausteine .lg,.lg-bausteine .lg-breit{grid-column:auto}
    .lg-bausteine .lg-breit{grid-column:span 2}
    .dl-zip{padding:var(--space-4)}
    .mk-avatar{width:auto}
}
@media(prefers-reduced-motion:reduce){
    .sg .dl-btn,.sg .dl-link{transition:none}
    .sg .dl-btn:hover{transform:none}
}

/* =========================================================================
   X-CI-03 — Komponenten, Formulare, Icons und Bildsprache, Dark Mode, Motion, Barrierefreiheit (09.10.2026)
   Gerüst für die Beispiele (Vorschau + Snippet) und die Demos. Die Komponenten selbst (.btn-danger, .pille, .badge, .feld, .inp, .chk,
   .ccard, .tabelle, .leer, .toast, .ico, .navpunkt, .einblenden, .ci-dunkel) stehen in ci.css. Die Banner unten übernehmen die Klassen des
   Panels (public/css/filament-ci.css) mit denselben Werten; tests/Unit/Ci/CiKomponentenKonfigTest.php gleicht sie Deklaration für Deklaration ab.
   ========================================================================= */
.ci-reihe{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.ci-raster{display:grid;gap:var(--space-4);align-items:start}
.ci-raster-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.ci-h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:17px;line-height:1.25;margin:var(--space-6) 0 var(--space-2)}
.ci-wert{font:500 12px/1.4 var(--font-mono);color:var(--muted)}
.sg .ci-tbl kbd{font:500 12.5px/1.4 var(--font-mono);padding:2px 8px;border:1px solid var(--muted);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--paper-2);color:var(--ink)}

/* ---- Beispielkarte: Titel, Vorschau, kopierbares Snippet ---- */
.ci-bsp{margin:0 0 var(--space-5);min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);overflow:hidden}
.ci-bsp-kopf{padding:var(--space-4) var(--space-5) var(--space-3)}
.ci-bsp-titel{margin:0;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.005em}
.ci-bsp-text{margin:var(--space-1) 0 0;max-width:70ch;font-size:14px;color:var(--muted)}
.ci-bsp-demo{min-width:0;padding:var(--space-5);background:var(--paper);border-block:1px solid var(--line)}
.ci-bsp-code{display:grid;gap:var(--space-2);justify-items:start;padding:var(--space-3) var(--space-5)}
.ci-bsp-details{width:100%}
.ci-bsp-details summary{display:inline-block;padding:var(--space-1) 0;font:500 12.5px/1.5 var(--font-mono);color:var(--ink-3);cursor:pointer}
.ci-bsp-details[open] summary{margin-bottom:var(--space-2)}
.ci-bsp-demo .statusbar{border-radius:10px;overflow:hidden}
.ci-bsp-demo .statusbar .sb-in{padding-inline:var(--space-4)}
.ci-bsp-demo .ccard{max-width:none}
.ci-bsp+.ci-regeln{margin-top:var(--space-4)}
@media(pointer:coarse){.ci-bsp-details summary{min-height:44px;display:inline-flex;align-items:center}}

/* ---- Buttons: Regel „ein Primär pro Bereich“ ---- */
.ci-regel-ein-primaer{margin:0 0 var(--space-5)}
.ci-vorschau{margin:0 0 var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.ci-pflichthinweis{margin:0 0 var(--space-5);font:500 12.5px/1.5 var(--font-mono);color:var(--muted)}
.ci-hp-bild{padding:var(--space-4);border:1px dashed var(--muted);border-radius:var(--radius-sm)}

/* ---- Banner: Klassen und Werte wie im Panel (filament-ci.css, Variablen auf CI-Tokens abgebildet) ---- */
.ci-banner-stapel{display:grid;gap:var(--space-3)}
.ci-banner-stapel>.akw-lizenz-banner,.akw-ankuendigungen{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.akw-lizenz-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;
    padding:.55rem 1rem;font-family:var(--font-body);font-size:.875rem;line-height:1.4;text-align:center;
    border-bottom:1px solid var(--line);background:var(--paper-2);color:var(--ink)}
.akw-lizenz-banner--test{background:#fdf3dc;border-bottom-color:#f5d48a;color:#6b4406}
.akw-lizenz-banner--nur_lesen{background:var(--ink);border-bottom-color:var(--ink);color:var(--paper)}
.akw-lizenz-banner--gekuendigt{background:#fdecee;border-bottom-color:#f5c2c9;color:#8a1c2b}
.akw-lizenz-banner-text{font-weight:600}
.akw-lizenz-banner-links{display:inline-flex;flex-wrap:wrap;gap:.5rem}
.akw-lizenz-banner-link{font-family:var(--font-mono);font-size:.8125rem;text-decoration:none;padding:.2rem .6rem;
    border-radius:.375rem;background:var(--volt);color:var(--ink)}
.akw-lizenz-banner-link:hover,.akw-lizenz-banner-link:focus-visible{background:var(--volt-d);color:#fff}
.akw-ankuendigungen{display:flex;flex-direction:column}
.akw-ankuendigung{display:flex;align-items:flex-start;justify-content:center;gap:.75rem;padding:.55rem 1rem;
    font-family:var(--font-body);font-size:.875rem;line-height:1.45;border-bottom:1px solid var(--line);
    background:var(--paper-2);color:var(--ink)}
.akw-ankuendigung--neu{background:#fdf3dc;border-bottom-color:#f5d48a;color:#6b4406}
.akw-ankuendigung--wartung{background:var(--ink);border-bottom-color:var(--ink);color:var(--paper)}
.akw-ankuendigung--dringend{background:#fdecee;border-bottom-color:#f5c2c9;color:#8a1c2b}
.akw-ankuendigung-inhalt{max-width:72rem;text-align:left}
.akw-ankuendigung-titel{font-weight:700;margin-right:.35rem}
.akw-ankuendigung-text{display:inline}
.akw-ankuendigung-text p{display:inline;margin:0}
.akw-ankuendigung-text a{text-decoration:underline;color:inherit}
.akw-ankuendigung-schliessen{flex:0 0 auto;border:0;background:transparent;color:inherit;cursor:pointer;
    font-size:1.1rem;line-height:1;padding:.15rem .35rem;border-radius:.375rem;
    display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px} /* FOLGE-0910c: Zielgröße ≥ 24 × 24 px (WCAG 2.5.8) */
.akw-ankuendigung-schliessen:hover,.akw-ankuendigung-schliessen:focus-visible{background:color-mix(in srgb,currentColor 15%,transparent)}

.ci-toast-stapel{display:grid;gap:var(--space-3);justify-items:start}

/* ---- Icons ---- */
.ci-icon-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);margin:0 0 var(--space-3);padding:0;list-style:none}
.ci-icon-zelle{display:grid;justify-items:start;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);min-width:0}
.ci-icon-bild{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}
.sg .ci-icon-zelle .cp.kurz{white-space:normal}
.ci-icon-use{font-size:12.5px;line-height:1.45;color:var(--muted)}
.ci-icon-groessen{gap:var(--space-6)}
.ci-nav-demo{display:grid;max-width:260px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);padding:var(--space-2) 0}

/* ---- Bildsprache ---- */
.ci-motive{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--space-4);margin:0 0 var(--space-5);padding:0;list-style:none}
.ci-motiv{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);min-width:0}
.ci-motiv-titel{margin:0 0 var(--space-3);font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.ci-motiv-text{margin:0;font-size:14.5px;color:var(--ink-3)}
.ci-motiv dl{margin:0;display:grid;gap:var(--space-1)}
.ci-motiv dt{margin-top:var(--space-2);font:500 11px/1.4 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.ci-motiv dd{margin:0;font-size:14.5px;color:var(--ink-2)}
.ci-rahmen-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-4);align-items:end;margin:0 0 var(--space-5);padding:0;list-style:none}
.ci-rahmen{margin:0;max-width:260px}
.ci-rahmen-bild{position:relative;display:block;width:100%;border:1px solid var(--line-2);border-radius:var(--radius-sm);background-color:var(--paper-2)}
.ci-rahmen-breit .ci-rahmen-bild{aspect-ratio:16/9}
.ci-rahmen-karte .ci-rahmen-bild{aspect-ratio:3/2}
.ci-rahmen-quadrat .ci-rahmen-bild{aspect-ratio:1/1}
.ci-rahmen-sicher{position:absolute;inset:10%;border:1.5px dashed var(--muted);border-radius:2px}
.ci-rahmen figcaption{margin-top:var(--space-2);font-size:13.5px;color:var(--ink-3)}
.ci-rahmen figcaption b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
.sg .ci-pruefung{list-style:decimal;margin:0;padding-left:var(--space-6);display:grid;gap:var(--space-2);max-width:78ch;font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---- Dark Mode ---- */
.ci-chip{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;vertical-align:middle;margin-right:var(--space-2)}
.ci-chip .vdot{margin:0}
.ci-dunkel-demo{display:grid;gap:var(--space-5);padding:var(--space-5);border-radius:var(--radius-md)}

/* ---- Motion ---- */
.ci-mo-steuerung{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.ci-schalter{margin:0}
.ci-mo-buehne{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--space-4);margin-top:var(--space-4)}
.ci-mo-buehne[data-reduziert] *,.ci-mo-buehne[data-reduziert] *::before{animation:none!important;transition:none!important}
.ci-mo-buehne[data-reduziert] .ccard:hover{transform:none}

/* ---- Barrierefreiheit: Zielgrößen in echter Größe ---- */
.ci-ziele{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--space-4);margin:0 0 var(--space-5);padding:0;list-style:none}
.ci-ziel-zelle{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);font-size:14.5px;color:var(--ink-2)}
.ci-ziel{flex:none;display:block;background:var(--volt);border:1.5px solid var(--ink);border-radius:var(--radius-sm)}
.ci-ziel-minimum{width:24px;height:24px}
.ci-ziel-touch{width:44px;height:44px}

@media(max-width:720px){
    .ci-bsp-kopf,.ci-bsp-code{padding-inline:var(--space-4)}
    .ci-bsp-demo{padding:var(--space-4)}
}
@media(prefers-reduced-motion:reduce){
    .ci-mo-buehne .ccard:hover{transform:none;transition:none}
}

/* =========================================================================
   X-CI-04 — Anwendungen: White-Label, Belege und PDF, Portale, Filament-Admin, Mails und Plattform (10.10.2026)
   Gerüst und Modelle (alles Platzhalter, nur Tokens aus ci.css). Die Mandantenfarbe der Modelle ist eine Demo-Farbe (config('ci.demo_mandant')),
   keine CI-Farbe. Absatz-Klassen tragen „.sg “ vor dem Namen: „.site p{margin:0}“ der Werbeseite wiegt sonst schwerer.
   Die Maße der Belegmodelle folgen config('ci.pdf'): Blatt 520 px für 210 mm → 1 mm = 2,4762 px, 1 pt = 0,8735 px; CiAnwendungenTest rechnet nach.
   ========================================================================= */

/* ---- White-Label: Quelle je Ausgabe (Text und Form, nie nur Farbe: gefüllter Punkt = Mandant, Ring = Betreiber) ---- */
.wl-karte{margin-top:0}
.sg .wl-karte-titel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font:700 17px/1.3 var(--font-display);letter-spacing:-.01em}
.wl-quelle{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--paper-2);
    font:500 12px/1.5 var(--font-mono);letter-spacing:.3px;color:var(--ink);white-space:nowrap}
.wl-quelle::before{content:"";flex:none;width:9px;height:9px;border:2px solid var(--ink);border-radius:50%}
.wl-q-mandant::before{background:var(--ink)}
.wl-q-betreiber::before{background:transparent}
.wl-tbl td:nth-child(2){white-space:nowrap}

/* ---- Belege: A4-Modelle (Demo-Branding, Platzhalter) ---- */
.mk-demo{--mk-akzent:#1d5d7a;--mk-akzent-ink:#fff}
.mk-blaetter{gap:var(--space-5)}
.mk-blatt-fig{margin:0;min-width:0;max-width:100%}
.mk-blatt-scroll{max-width:100%;overflow-x:auto;padding-bottom:var(--space-2)}
.mk-blatt-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mk-blatt{--pt:.8735px;--mm:2.4762px;position:relative;box-sizing:border-box;width:520px;aspect-ratio:210/297;overflow:hidden;
    padding:calc(14 * var(--mm)) calc(20 * var(--mm)) calc(24 * var(--mm)) calc(25 * var(--mm));
    background:var(--paper-2);border:1px solid var(--line-2);box-shadow:var(--shadow-sm);color:var(--ink);font-family:var(--font-body)}
.mk-s-9{font-size:calc(9 * var(--pt))}
.mk-s-10{font-size:calc(10 * var(--pt))}
.mk-s-11{font-size:calc(11 * var(--pt))}
.mk-s-14{font-size:calc(14 * var(--pt))}
.mk-bk{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding-bottom:calc(3 * var(--mm));margin-bottom:calc(8 * var(--mm));border-bottom:2px solid var(--mk-akzent)}
.mk-bk-logo{display:inline-grid;place-items:center;min-width:calc(46 * var(--mm));height:calc(12 * var(--mm));padding:0 var(--space-2);
    border:1.5px dashed var(--muted);border-radius:var(--radius-sm);font:500 calc(9 * var(--pt))/1 var(--font-mono);color:var(--muted);white-space:nowrap}
.mk-bk-meta{text-align:right;line-height:1.4;color:var(--ink-3)}
.sg .mk-t1{margin:0;font-weight:600;line-height:1.25;color:var(--ink)}
.sg .mk-sub{margin:calc(1 * var(--mm)) 0 calc(5 * var(--mm));color:var(--muted)}
.sg .mk-t2{margin:calc(5 * var(--mm)) 0 calc(1.5 * var(--mm));padding-bottom:calc(.8 * var(--mm));border-bottom:1px solid var(--line-2);font-weight:600;line-height:1.3;color:var(--ink)}
.mk-kv{width:100%;border-collapse:collapse}
.mk-kv td{padding:calc(.8 * var(--mm)) 0;vertical-align:top;line-height:1.4;color:var(--ink-2)}
.mk-kv td:first-child{width:40%;padding-right:var(--space-2);color:var(--muted)}
.sg .mk-weiter{margin:calc(4 * var(--mm)) 0 0;letter-spacing:.2em;color:var(--muted)}
.sg .mk-fuss{position:absolute;left:calc(25 * var(--mm));right:calc(20 * var(--mm));bottom:calc(10 * var(--mm));margin:0;padding-top:calc(1.5 * var(--mm));border-top:1px solid var(--line-2);line-height:1.4;color:var(--muted)}
.sg .mk-gekuerzt{position:absolute;left:0;right:0;bottom:calc(3.5 * var(--mm));margin:0;text-align:center;font-family:var(--font-mono);color:var(--muted)}
.pdf-tbl{width:100%;border-collapse:collapse}
.pdf-tbl th{padding:calc(1 * var(--mm)) calc(1.5 * var(--mm)) calc(1 * var(--mm)) 0;border-bottom:1px solid var(--ink);text-align:left;font-weight:600;color:var(--ink)}
.pdf-tbl td{padding:calc(1 * var(--mm)) calc(1.5 * var(--mm)) calc(1 * var(--mm)) 0;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.pdf-tbl .zahl{text-align:right;font-variant-numeric:tabular-nums}
.pdf-tbl .summe td{border-top:1px solid var(--ink);border-bottom:0;font-weight:600;color:var(--ink)}
.mk-summen{width:60%;margin:calc(3 * var(--mm)) 0 0 auto;border-collapse:collapse}
.mk-summen td{padding:calc(.8 * var(--mm)) 0;color:var(--ink-2)}
.mk-summen .zahl{text-align:right;font-variant-numeric:tabular-nums}
.mk-summen .gesamt td{border-top:1px solid var(--ink);font-weight:600;color:var(--ink)}

/* Aufbau des Briefkopfs: Zonen (DIN 5008, Form B) als gestrichelte Felder, nummeriert wie die Tabelle darunter */
.mk-zone{position:absolute;padding:calc(2 * var(--mm));border:1px dashed var(--muted);border-radius:2px;background:color-mix(in srgb,var(--volt) 7%,transparent)}
.mk-z-logo{left:calc(25 * var(--mm));right:calc(20 * var(--mm));top:calc(10 * var(--mm));height:calc(28 * var(--mm));display:flex;justify-content:space-between;align-items:flex-start}
.mk-z-adresse{left:calc(25 * var(--mm));top:calc(45 * var(--mm));width:calc(85 * var(--mm));height:calc(45 * var(--mm))}
.mk-z-titel{left:calc(25 * var(--mm));right:calc(20 * var(--mm));top:calc(98 * var(--mm))}
.mk-z-inhalt{left:calc(25 * var(--mm));right:calc(20 * var(--mm));top:calc(125 * var(--mm));height:calc(120 * var(--mm))}
.mk-z-fuss{left:calc(25 * var(--mm));right:calc(20 * var(--mm));top:calc(266 * var(--mm))}
.mk-zone .mk-zeile{margin:calc(2.5 * var(--mm)) 0}
.mk-w-90{width:90%}
.mk-w-84{width:84%}
.mk-w-60{width:60%}
.sg .mk-absender{margin:0 0 calc(3 * var(--mm));color:var(--muted)}
.sg .mk-adresse{margin:0;line-height:1.4;color:var(--ink-2)}
.mk-seite{margin-left:var(--space-3);white-space:nowrap}
.mk-zn{position:absolute;top:-9px;left:-9px;z-index:1;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper-2);font:600 11px/1 var(--font-mono)}
.mk-zn-marken{top:calc(120 * var(--mm));left:calc(8 * var(--mm))}
.mk-marke{position:absolute;left:0;height:1.5px;background:var(--ink-3)}
.mk-marke-f1{top:calc(105 * var(--mm));width:calc(5 * var(--mm))}
.mk-marke-l{top:calc(148.5 * var(--mm));width:calc(8 * var(--mm))}
.mk-marke-f2{top:calc(210 * var(--mm));width:calc(5 * var(--mm))}

/* Schrift im PDF: Proben in echter Größe (pt) */
.pdf-probe{font-family:var(--font-body);color:var(--ink)}
.pt-9{font-size:9pt}
.pt-10{font-size:10pt}
.pt-11{font-size:11pt}
.pt-14{font-size:14pt}
.gw-400{font-weight:400}
.gw-600{font-weight:600}
.sg .mk-tabellenmodell{max-width:640px;margin-bottom:var(--space-4)}
.mk-tabellenbox{padding:var(--space-5);border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper-2);font:400 9pt/1.4 var(--font-body)}

/* ---- Portale: Smartphone-Modelle, höchstens 375 px, nie breiter als der Platz ---- */
.mk-handys{gap:var(--space-5)}
.mk-handy-fig{margin:0;min-width:0;width:min(100%,375px)}
.mk-handy{box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-md)}
.mk-wa-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;background:var(--mk-akzent);color:var(--mk-akzent-ink)}
.mk-wa-name{min-width:0;font:700 16px/1.3 var(--font-body);overflow-wrap:anywhere}
.mk-wa-aktionen{display:flex;gap:8px;margin-left:auto}
.mk-wa-knopf{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.18);
    font:500 13px/1 var(--font-body);color:var(--mk-akzent-ink)}
.mk-wa-inhalt{display:grid;gap:12px;min-width:0;padding:16px}
.mk-wa-karte{min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.mk-wa-zeile{padding:14px 16px}
.sg .mk-wa-karte-titel{margin:0 0 4px;font:700 15px/1.3 var(--font-display);color:var(--ink)}
.sg .mk-wa-text{margin:0;font-size:14px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere}
.sg .mk-wa-h{margin:0;font:800 20px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.mk-wa-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:12px}
.mk-wa-kachel{display:grid;place-items:center;min-width:0;min-height:88px;padding:16px 12px;text-align:center;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
    font:600 14px/1.3 var(--font-body);color:var(--ink)}
.mk-wa-feldgruppe{display:grid;gap:4px;margin-bottom:12px}
.mk-wa-feldgruppe:last-child{margin-bottom:0}
.mk-wa-label{font:500 13px/1.3 var(--font-body);color:var(--ink-3)}
.mk-wa-feld{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--ci-kontur);border-radius:10px;background:var(--paper-2);
    font:400 16px/1.2 var(--font-body);color:var(--muted)}
.mk-wa-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:10px;background:var(--mk-akzent);color:var(--mk-akzent-ink);
    font:600 16px/1.2 var(--font-body);text-align:center}
.mk-wa-btn-zwei{background:var(--line);color:var(--ink)}
.mk-probe{display:inline-block;padding:10px 18px;border-radius:10px;font:600 15px/1.2 var(--font-body)}

/* ---- Filament-Admin: Sidebar- und Tabellen-Modell mit den Werten des Panel-Stylesheets ---- */
.mk-fa-sidebar{width:260px;max-width:100%;padding:var(--space-4) var(--space-3);background:var(--paper-2)}
.mk-fa-marke{padding:0 10px var(--space-3)}
.sg .mk-fa-gruppe{margin:var(--space-4) 0 var(--space-1);padding:0 10px;font:500 10.5px/1.4 var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sg .mk-fa-liste{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mk-fa-liste li{padding:9px 10px;border-radius:9px;font:500 13.5px/1.3 var(--font-body);color:var(--ink-2)}
.mk-fa-liste .mk-fa-aktiv{background:rgba(242,165,22,.14);color:var(--volt-d);font-weight:600}
.mk-fa-tabellenfig{flex:1 1 360px}
.mk-fa-tabelle{background:var(--paper-2);border-radius:14px}
.mk-fa-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line)}
.mk-fa-titel{font:800 18px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.mk-fa-suche{min-width:160px;padding:7px 12px;border:1px solid var(--ci-kontur);border-radius:10px;font:400 13px/1.3 var(--font-body);color:var(--muted)}
.mk-fa-tbl{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--font-body)}
.mk-fa-tbl th{padding:10px var(--space-5);background:var(--paper);text-align:left;font:500 12px/1.3 var(--font-mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.mk-fa-tbl td{padding:12px var(--space-5);border-top:1px solid var(--line);color:var(--ink-2)}
.mk-fa-badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);background:rgba(242,165,22,.15);font:500 12px/1.5 var(--font-mono);letter-spacing:.3px;color:var(--volt-d)}

/* Klassenkatalog */
.fa-katalog .fa-liste-zelle{min-width:230px}
.fa-details{display:inline-block;margin-right:var(--space-3);vertical-align:top}
.fa-details summary{display:inline-block;padding:var(--space-1) 0;font:500 12.5px/1.5 var(--font-mono);color:var(--ink-3);cursor:pointer}
.sg .fa-klassen{display:flex;flex-wrap:wrap;gap:4px 12px;max-width:62ch;margin:var(--space-2) 0;padding:0;list-style:none}
.sg .fa-klassen code{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
@media(pointer:coarse){.fa-details summary{display:inline-flex;align-items:center;min-height:44px}}

/* ---- Mails: Plattform-Mail (Ist-Aufbau des Layouts), Mandanten-Mail, Kopfleisten der Konsole ---- */
.mk-paar+.ci-scroll{margin-top:var(--space-5)}
.mk-pm{width:380px;max-width:100%;overflow:hidden;background:var(--paper-2);border-radius:14px}
.mk-pm-kopf{display:grid;gap:6px;padding:20px 24px;background:var(--ink)}
.mk-pm-kopfzeile{font:700 10px/1.3 var(--font-body);letter-spacing:2.5px;text-transform:uppercase;color:var(--volt)}
.mk-pm-wort{font:700 20px/1.2 var(--font-body);letter-spacing:-.3px;color:#fff}
.mk-pm-streifen{height:4px;background:var(--volt)}
.mk-pm-text{display:grid;gap:8px;padding:22px 24px;font:400 14px/1.7 var(--font-body);color:#4a4742}
.sg .mk-pm-anrede{margin:0;font:700 17px/1.3 var(--font-body);color:var(--ink)}
.sg .mk-pm-betreff{margin:0;font:700 15px/1.3 var(--font-body);color:var(--ink)}
.mk-pm-fuss{display:grid;gap:2px;padding:14px 24px 18px;border-top:1px solid var(--line);font:400 12px/1.6 var(--font-body);color:var(--muted)}
.mk-mm{display:grid;gap:8px;width:380px;max-width:100%;box-sizing:border-box;padding:20px 24px;background:#fff;font:400 14px/1.6 Arial,Helvetica,sans-serif;color:var(--ink)}
.sg .mk-mm-signatur{margin:12px 0 0;font-size:13px;color:#4a4742}
.sg .mk-mm-firma{margin:0;font-weight:700;color:var(--mk-akzent)}
.mk-kons-fenster{width:min(100%,380px);background:var(--paper-2)}
.mk-kons-tab{padding:8px 12px;overflow:hidden;background:var(--line);font:500 12.5px/1.3 var(--font-body);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.mk-kons{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:62px;padding:14px 16px}
.mk-kons img{flex:none;width:150px;height:auto}
.mk-kons-marke{padding:2px 8px;border:1.5px dashed var(--muted);border-radius:var(--radius-sm);font:500 11px/1.4 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--volt-deep)}

@media(max-width:720px){
    .mk-fa-kopf{padding-inline:var(--space-4)}
    .mk-fa-tbl th,.mk-fa-tbl td{padding-inline:var(--space-3)}
}

/* ---------------------------------------------------------------------------------------------------------------------
   X-CI-05 — Tonalität, Standardsätze, Firmendaten, E-Mail-Signatur und Sharing-Texte (angehängter Block).
   Wiederverwendet: .ci-bsp-kopf/-titel/-text/-demo/-code (Innenteile der Beispielkarte; die Satzkarte ist KEINE Snippet-Karte und trägt deshalb eine eigene Klasse), .ci-tbl/.ci-scroll (Tabellen), .ci-regeln, .ci-callout, .feld/.inp (ci.css). Neu nur die Klassen unten.
   Kein Übergang, keine Animation, keine externe Adresse. Absatz-Klassen tragen „.sg “ (die Werbeseite setzt „.site p{margin:0}“).
   --------------------------------------------------------------------------------------------------------------------- */
.ci-satzkarte{margin:0 0 var(--space-5);min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2);overflow:hidden}
.sg .ci-satz{margin:0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.sg .ci-bsp-demo .ci-wert{margin:var(--space-3) 0 var(--space-1)}
.sg .ci-bsp-demo .ci-wert:first-child{margin-top:0}
.ci-sig-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-5) var(--space-7);align-items:start}
.ci-sig-eingaben .ci-h4,.ci-sig-ausgabe .ci-h4{margin-top:0}
.ci-sig-buehne{min-height:160px;padding:var(--space-4);overflow:auto;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--paper)}
.ci-sig-buehne:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ci-sig-ausgabe .ci-reihe{margin-top:var(--space-4)}
.sg .ci-sig-ausgabe .feld-hilfe{min-height:1.5em;margin-top:var(--space-3)}

/* ---------------------------------------------------------------------------------------------------------------------
   RD-0-01 — System D „Lichtwerk“ (Vorschau), angehängter Block. Nur das Gerüst der Vorschau-Flächen: Farben, Radien, Kanten, Schriften und
   Zielgrößen kommen ausschließlich aus den D-Tokens im Scope .d-system (ci.css, Block RD-0-01). Wiederverwendet: .ci-tbl/.ci-scroll, .ci-regeln, .cp, .vdot.
   Keine Animation, kein Übergang, keine externe Adresse; die Flächen sind nicht bedienbar (kein Fokus, keine Schaltfläche).
   --------------------------------------------------------------------------------------------------------------------- */
.sd-mini-raster{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.sd-mini{padding:var(--space-3) var(--space-4);border:var(--d-kante-breite) solid var(--d-kante);border-radius:var(--radius-xl)}
.sd-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:var(--space-5)}
.sd-vorschau{position:relative;isolation:isolate;display:grid;gap:var(--space-4);align-content:start;padding:var(--space-5);overflow:hidden;
    border:var(--d-kante-breite) solid var(--d-kante);border-radius:var(--radius-xl);font-family:var(--d-font-body)}
.sd-vorschau>*{min-width:0}
.sd-vorschau::before,.sd-vorschau::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.sd-vorschau::before{width:70%;aspect-ratio:1;right:-22%;top:-34%;background:radial-gradient(circle,var(--d-aura-1),transparent 66%)}
.sd-vorschau::after{width:60%;aspect-ratio:1;left:-24%;bottom:-38%;background:radial-gradient(circle,var(--d-aura-2),transparent 62%)}
.sd-label{margin:0;color:var(--d-akzent-text)}
.sd-titel{margin:0;color:var(--d-text);overflow-wrap:anywhere}
.sd-glut{background:var(--d-glut);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-text,.sd-text-2{margin:0;color:var(--d-text-2)}
.sd-karte{display:grid;gap:var(--space-3);padding:var(--space-4);border:var(--d-kante-breite) solid var(--d-kante);border-radius:var(--radius-lg);background:var(--d-ebene-1)}
.sd-panel{margin:0;color:var(--d-text)}
.sd-lampen{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:0;padding:0;list-style:none;color:var(--d-text-2)}
.sd-lampe{display:inline-block;box-sizing:border-box;width:14px;height:14px;margin-right:var(--space-2);vertical-align:-2px}
.sd-lampe-ok{border-radius:50%;background:var(--d-ok)}
.sd-lampe-warnung{border-radius:50%;border:2px solid var(--d-text);background:var(--d-warnung);box-shadow:0 0 0 3px var(--d-glow)}
.sd-lampe-kritisch{background:var(--d-kritisch);clip-path:polygon(50% 0,100% 100%,0 100%)}
.sd-lampe-info{border-radius:50%;border:2px solid var(--d-info)}
.sd-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.sd-knopf,.sd-fokus{display:inline-flex;align-items:center;justify-content:center;min-height:var(--d-ziel);padding:0 var(--space-5);border-radius:var(--radius-md)}
.sd-knopf{background:var(--d-akzent);color:var(--d-auf-akzent);font:700 14px/1 var(--d-font-display);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 14px 44px -14px var(--d-glow)}
.sd-knopf-2{background:transparent;color:var(--d-text);border:var(--d-kante-breite) solid var(--d-kontur);box-shadow:none}
.sd-fokus{color:var(--d-text);font:500 13px/1 var(--d-font-body);outline:2px solid var(--d-fokus);outline-offset:3px}
.sd-ebenen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.sd-ebene{display:grid;gap:var(--space-1);align-content:start;padding:var(--space-3);border-radius:var(--radius-md);color:var(--d-text-2)}
.sd-ebene b{color:var(--d-text)}
.sd-e0{border:var(--d-kante-breite) dashed var(--d-kante-2)}
.sd-e1{background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante)}
.sd-e2{background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-ebene-2-kante);box-shadow:var(--d-ebene-2-schatten),0 0 24px -6px var(--d-glow)}
.sd-e3{background:var(--d-ebene-3);-webkit-backdrop-filter:blur(var(--d-ebene-3-blur));backdrop-filter:blur(var(--d-ebene-3-blur));border:var(--d-kante-breite) solid var(--d-kante-2)}

.sd-chip{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:var(--space-2);vertical-align:middle;border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.sd-chip .vdot{margin:0}
.sg .sd-beide{display:block;margin-top:var(--space-1);font:400 12px/1.4 var(--font-body);color:var(--muted)}

.sd-typo{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none}
.sd-typo-eintrag{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-2)}
.sd-probe{padding:var(--space-4);overflow:hidden;border-radius:var(--radius-md)}
.sd-probe p{margin:0;overflow-wrap:anywhere}
.sd-typo-name{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:16px;font-weight:700}
.sg .sd-typo-meta p{margin:0}
.sd-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0}
.sd-meta div{display:grid;gap:2px}
.sd-meta dt{font:500 11px/1.4 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.sd-meta dd{margin:0;font:500 13px/1.4 var(--font-mono);color:var(--ink)}

.sd-matrix td,.sd-matrix th{vertical-align:top}
.sd-matrix thead th{white-space:normal;min-width:112px}
.sd-matrix tbody th{white-space:nowrap}
.sd-v{display:block;font:500 13px/1.4 var(--font-mono);color:var(--ink)}
.sd-a{display:block;font:400 12px/1.4 var(--font-body);color:var(--ink-3)}
.sd-nein{color:var(--copper);font-weight:600}

@media(max-width:860px){
    .sd-typo-eintrag{grid-template-columns:minmax(0,1fr)}
}

/* RD-W-09 — Grafiksystem D im Abschnitt System D: Rahmen der Live-Bausteine (wie .sd-vorschau, ohne Aura — die Diagramme stehen nie auf der Aura). */
.sd-bausteine{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-5);border:var(--d-kante-breite) solid var(--d-kante);border-radius:var(--radius-xl);font-family:var(--d-font-body)}
.sd-bausteine>*{min-width:0}
/* RD-W-09 (Reflow 320 px, Fund der Abnahme): Bezugsrahmen für absolut positionierte .sr-only-Texte in Tabellenzellen (Kontrastmatrix System D) —
   sonst entkamen sie dem Scroll-Container und machten die ganze Seite waagrecht scrollbar (375 px: 1509 px breit). Gleiches Muster wie Q6 in site-2026.css. */
.ci-scroll{position:relative}