/* =========================================================================
   Corporate Identity (Marke: config/marke.php)
   Direction: refined industrial-electric. Graphite + bone paper + high-voltage amber.
   Self-hosted fonts (DSGVO – no third-party CDN at runtime).
   ========================================================================= */

@font-face{font-family:'Archivo';src:url('/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'AK Sans';src:url('/fonts/plexsans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'AK Sans';src:url('/fonts/plexsans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'AK Sans';src:url('/fonts/plexsans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'AK Mono';src:url('/fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* RD-0-02: Latin-Extended-Teile (Ł ő ğ ř ž č Ș ț …) für alle Portalsprachen — selbst gehostet, SIL OFL 1.1 (public/fonts/LIZENZ-OFL.txt, Manifest
   public/fonts/abdeckung.json, erzeugt mit scripts/schriften-subset.sh). Der Browser lädt einen Teil nur, wenn die Seite solche Zeichen zeigt
   (unicode-range). Die Bereiche lassen aus, was die Basisdateien schon liefern (ı, Œ œ; bei Archivo auch Ă): bestehende Darstellung unverändert.
   Einzige Ausnahme: 'Archivo AKW' bekommt Ă aus der Ergänzung, weil sein unicode-range in site-2026.css es nicht enthält. */
@font-face{font-family:'Archivo';src:url('/fonts/archivo-500-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-0101,U+0103-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-0101,U+0103-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-800-ext.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-0101,U+0103-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'AK Sans';src:url('/fonts/plexsans-400-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'AK Sans';src:url('/fonts/plexsans-500-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'AK Sans';src:url('/fonts/plexsans-600-ext.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'AK Mono';src:url('/fonts/plexmono-500-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}
@font-face{font-family:'Archivo AKW';src:url('/fonts/archivo-wdth-ext.woff2') format('woff2');font-weight:500 800;font-stretch:76% 100%;font-style:normal;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F,U+0218-021B,U+1E9E}

:root{
    --ink:#15171c;        /* graphite */
    --ink-2:#23262f;
    --ink-3:#3a3f4b;
    --paper:#f6f4ef;      /* bone */
    --paper-2:#fffefb;
    --line:#e4dfd5;
    --line-2:#d6d0c4;
    --volt:#f2a516;       /* high-voltage amber (primary) */
    --volt-d:#8a5708;     /* amber für Klein-Text, WCAG-AA-konform (~5:1 auf Bone) */
    --volt-deep:#7a4d05;
    --copper:#c2410c;     /* warm secondary */
    --glow:rgba(242,165,22,.30);
    --muted:#6b6358;      /* warm gray */
    --ok:#3f7d4e;

    --font-display:'Archivo','Archivo Black',system-ui,sans-serif;
    --font-body:'AK Sans','Segoe UI',system-ui,sans-serif;
    --font-mono:'AK Mono',ui-monospace,'SFMono-Regular',monospace;

    --maxw:1120px;
    --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%} /* Entscheid 71: clip (kein Scroll-Container → sticky Kopfzeile haftet), hidden nur Rückfall */
body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--volt);color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- blueprint grid background utility ---- */
.grid-bg{
    background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:34px 34px;
    background-position:center;
}

/* ---- type ---- */
.eyebrow{
    font-family:var(--font-mono);
    font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
    color:var(--volt-d);
    display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--volt);display:inline-block}

h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.04;color:var(--ink)}
.display{font-size:clamp(40px,7vw,82px);font-weight:800;letter-spacing:-.035em;line-height:.98}
.display .volt{color:var(--volt-d);position:relative;white-space:nowrap}
.display .volt::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.12em;background:var(--volt);opacity:.45;border-radius:2px}

/* ---- buttons ---- */
.btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:.3px;
    padding:13px 22px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s;
    white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--paper-2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(21,23,28,.7)}
.btn-volt{background:var(--volt);color:var(--ink);box-shadow:0 8px 24px -8px var(--glow)}
.btn-volt:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px var(--glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;font-family:var(--font-mono);font-size:12px;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.lang a{padding:6px 11px;color:var(--muted);transition:.15s}
.lang a.on{background:var(--ink);color:var(--paper-2)}
.lang a:not(.on):hover{background:var(--paper-2);color:var(--ink)}

/* ---- logo ---- */
.logo{display:inline-flex;align-items:center;gap:11px}
.logo .mark{width:34px;height:34px;flex-shrink:0}
.logo .word{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.logo .word b{color:var(--volt-d);font-weight:800}

/* ---- footer ---- */
.foot{background:var(--ink);color:#c9cad0;margin-top:90px}
.foot .inner{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;padding:54px 0 30px}
.foot .word{font-family:var(--font-display);font-weight:800;color:var(--paper-2);font-size:20px}
.foot a{color:#c9cad0;font-size:14.5px;transition:.15s}
.foot a:hover{color:var(--volt)}
.foot .cols{display:flex;gap:54px;flex-wrap:wrap}
.foot .col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#7b7d87;margin-bottom:12px}
.foot .col a{display:block;margin-bottom:8px}
.foot .bar{border-top:1px solid #2a2d36;padding:18px 0;font-size:13px;color:#7b7d87;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot .bar .mono{font-family:var(--font-mono)}

/* ---- legal / prose ---- */
.legal{max-width:760px;margin:0 auto;padding:64px 24px 20px}
.legal .eyebrow{margin-bottom:16px}
.legal h1{font-size:clamp(30px,5vw,46px);margin-bottom:8px}
.legal .lead{color:var(--muted);font-size:17px;margin-bottom:30px}
.legal h2{font-family:var(--font-display);font-size:20px;font-weight:700;margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.legal h3{font-family:var(--font-body);font-size:16px;font-weight:600;margin:18px 0 4px}
.legal p{margin:0 0 12px;color:#33363f}
.legal ul{margin:0 0 14px 18px;color:#33363f}
.legal li{margin-bottom:5px}
.legal a{color:var(--volt-d);text-decoration:underline;text-underline-offset:2px}
.legal .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:14px 0;font-family:var(--font-mono);font-size:13.5px;line-height:1.9}
.legal .muted{color:var(--muted)}

@media(max-width:680px){
    .foot .inner{flex-direction:column;gap:26px}
    .nav .inner{height:62px}
    .logo .word{font-size:17px}
}
@media(max-width:600px){
    .nav .inner{gap:10px}
    .nav-right{gap:9px}
    .logo .word{font-size:15px}
    .lang a{padding:6px 9px;font-size:11px}
    .nav .btn{padding:9px 13px;font-size:13px}
}
@media(max-width:400px){
    /* Auf sehr schmalen Screens nur die Mark zeigen -> kein Nav-Überlauf */
    .logo .word{display:none}
}

/* =========================================================================
   X-CI-01 — Erweiterte Design-Tokens (07.10.2026). Nur angehängt: alle Tokens oben bleiben unverändert.
   Single Source für das Brand-Handbuch /ci — config/ci.php spiegelt jedes Token dieser Datei
   (Parsing-Test tests/Unit/Ci/CiKonfigTest.php), die Werte hier sind maßgeblich.
   ========================================================================= */
:root{
    /* Radien: -md entspricht dem bisherigen --radius (Karten); Buttons/Inputs behalten ihre dokumentierten 11px. */
    --radius-pill:999px;
    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:22px;

    /* Schatten: Graphit-getönt, weit gestreut und negativ aufgespreizt (wie die bestehenden Hover-Schatten); -glow = Amber. */
    --shadow-sm:0 4px 14px -8px rgba(21,23,28,.35);
    --shadow-md:0 12px 28px -12px rgba(21,23,28,.55);
    --shadow-lg:0 24px 48px -20px rgba(21,23,28,.6);
    --shadow-glow:0 8px 24px -8px var(--glow);

    /* Verläufe: ausschließlich aus bestehenden Farb-Tokens. */
    --grad-signal:linear-gradient(135deg,var(--volt),var(--copper));
    --grad-dunkel:linear-gradient(160deg,var(--ink-2),var(--ink));

    /* Abstände: 4-px-Raster. */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;

    /* Bewegung: Werte der bestehenden Übergänge (Hover 150 ms, Overlay 260 ms, Einblenden 700 ms). */
    --dur-fast:150ms;
    --dur-base:260ms;
    --dur-slow:700ms;
    --ease:cubic-bezier(.2,.7,.2,1);
}

/* =========================================================================
   X-CI-03 — Rollen, Komponenten, dunkler Modus, Bewegung (09.10.2026). Nur angehängt.
   Rollen-Variablen (--ci-*) sagen, WOFÜR eine Farbe dient; im hellen Modus zeigen sie auf bestehende Tokens, im Scope
   .ci-dunkel auf die dunklen Werte der Werbeseite (site-2026.css). Es entsteht keine neue Farbe. config/ci.php spiegelt
   Rollen und Dunkelwerte (Parsing-Tests tests/Unit/Ci/CiKonfigTest.php und tests/Unit/Ci/CiKomponentenKonfigTest.php).
   Die Komponenten unten schreiben ihre Farben über Rollen und funktionieren darum in beiden Modi.
   ========================================================================= */
:root{
    --ci-grund:var(--paper);
    --ci-flaeche:var(--paper-2);
    --ci-invers:var(--ink);
    --ci-invers-text:var(--paper-2);
    --ci-text:var(--ink);
    --ci-text-2:var(--ink-3);
    --ci-gedaempft:var(--muted);
    --ci-linie:var(--line);
    --ci-linie-2:var(--line-2);
    --ci-kontur:var(--muted);
    --ci-akzent-text:var(--volt-d);
    --ci-fokus:var(--ink);
}

/* Dunkler Modus: als Scope (<div class="ci-dunkel">), wenn die Werbeseite auf dunkel steht (data-theme="dark") und bei dunkler
   Systemeinstellung ohne gesperrten Modus. Kein reines Schwarz, kein reines Weiß. Die Werte sind die der Werbeseite (site-2026.css). */
:root[data-theme="dark"],
.ci-dunkel{
    --ci-grund:#15171c;
    --ci-flaeche:#1c1f26;
    --ci-invers:#23262f;
    --ci-invers-text:#f6f4ef;
    --ci-text:#f6f4ef;
    --ci-text-2:rgba(246,244,239,.84);
    --ci-gedaempft:rgba(246,244,239,.68);
    --ci-linie:rgba(246,244,239,.13);
    --ci-linie-2:rgba(246,244,239,.24);
    --ci-kontur:rgba(246,244,239,.68);
    --ci-akzent-text:#f2a516;
    --ci-fokus:#f6f4ef;
    color-scheme:dark;
}
.ci-dunkel{background:var(--ci-grund);color:var(--ci-text)}
/* Die Schaltflächen der Werbeseite (.site .btn-ghost …) lesen --c-*; im dunklen Scope bekommen sie dieselben Werte wie im dunklen Modus von site-2026.css. */
.ci-dunkel{--c-text:var(--ci-text);--c-muted:var(--ci-gedaempft);--c-ghost:rgba(246,244,239,.5);--c-track:rgba(246,244,239,.1);--c-outline:rgba(246,244,239,.44)}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --ci-grund:#15171c;
        --ci-flaeche:#1c1f26;
        --ci-invers:#23262f;
        --ci-invers-text:#f6f4ef;
        --ci-text:#f6f4ef;
        --ci-text-2:rgba(246,244,239,.84);
        --ci-gedaempft:rgba(246,244,239,.68);
        --ci-linie:rgba(246,244,239,.13);
        --ci-linie-2:rgba(246,244,239,.24);
        --ci-kontur:rgba(246,244,239,.68);
        --ci-akzent-text:#f2a516;
        --ci-fokus:#f6f4ef;
    }
}

/* Fokus: immer sichtbar, 2 px, Abstand 2–3 px (WCAG 2.4.7 und 2.4.11). Auf Seiten mit site-2026.css setzt dort „.site :focus-visible“
   denselben Ring über --c-text (hell Graphit, dunkel Bone); Eingaben setzen ihren Ring selbst (.site .inp:focus-visible). */
:focus-visible{outline:2px solid var(--ci-fokus);outline-offset:3px}

/* ---- Buttons: gefährlich, deaktiviert, mit Icon ---- */
.btn-danger{background:var(--copper);color:var(--paper-2);border-color:var(--copper)}
.btn-danger:hover{box-shadow:var(--shadow-md),inset 0 -3px 0 rgba(21,23,28,.24)}
.btn-danger:active{background:var(--ink);border-color:var(--ink);box-shadow:none}
.site .btn.btn-danger{background:var(--copper);color:var(--paper-2);border-color:var(--copper)}
.site .btn.btn-danger:hover{box-shadow:var(--shadow-md),inset 0 -3px 0 rgba(21,23,28,.24)}
.site .btn.btn-danger:active{background:var(--ink);border-color:var(--ink);color:var(--paper-2);box-shadow:none}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--ci-linie);color:var(--ci-gedaempft);border-color:var(--ci-linie-2);box-shadow:none;transform:none;cursor:not-allowed}
.site .btn:disabled,.site .btn:disabled:hover,.site .btn:disabled:active,.site .btn[aria-disabled="true"],.site .btn[aria-disabled="true"]:hover,.site .btn[aria-disabled="true"]:active{background:var(--ci-linie);color:var(--ci-gedaempft);border-color:var(--ci-linie-2);box-shadow:none;transform:none;cursor:not-allowed}
.btn .ico{width:16px;height:16px}
.btn-icon,.site .btn.btn-icon{width:44px;min-width:44px;min-height:44px;padding:0;justify-content:center}

/* ---- Icons: Heroicons Outline, 24er-Raster, Strichstärke 1,5; Amber nur im aktiven Zustand (.navpunkt[aria-current]) ---- */
.ico{display:inline-block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.ico-16{width:16px;height:16px}
.ico-24{width:24px;height:24px}

/* ---- Navigationspunkt: Icon plus Text; der aktive Zustand trägt Amber am Icon, einen Balken und den fetten Text (nie nur Farbe) ---- */
.navpunkt{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-3);border-left:3px solid transparent;color:var(--ci-text-2);font:500 14px/1.4 var(--font-body);text-decoration:none;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.navpunkt .ico{color:var(--ci-gedaempft)}
.navpunkt:hover{background:var(--ci-linie);color:var(--ci-text)}
.navpunkt:hover .ico{color:var(--ci-text)}
.navpunkt[aria-current="page"]{border-left-color:var(--ci-akzent-text);background:color-mix(in srgb,var(--volt) 14%,var(--ci-flaeche));color:var(--ci-text);font-weight:600}
.navpunkt[aria-current="page"] .ico{color:var(--ci-akzent-text)}

/* ---- Pillen: Status in einer Zeile; die Form des Zeichens trägt die Bedeutung, nicht nur die Farbe ---- */
.pille{display:inline-flex;align-items:center;gap:var(--space-2);min-height:28px;padding:var(--space-1) 14px;border:1px solid var(--ci-linie-2);border-radius:var(--radius-pill);background:var(--ci-flaeche);color:var(--ci-text);font:500 12.5px/1.4 var(--font-mono);letter-spacing:.3px}
.pille::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.pille-test{background:color-mix(in srgb,var(--volt) 18%,var(--ci-flaeche));border-color:color-mix(in srgb,var(--volt) 45%,transparent);color:var(--ci-akzent-text)}
.pille-test::before{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.pille-lesen{background:var(--ci-invers);border-color:var(--ci-invers);color:var(--ci-invers-text)}
.pille-lesen::before{border-radius:1px}
.pille-dev{background:transparent;border-style:dashed;border-color:var(--ci-kontur);color:var(--ci-text)}
.pille-dev::before{border-radius:0;background:repeating-linear-gradient(135deg,currentColor 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px currentColor}
.pille-beta{background:transparent;border-color:var(--ci-kontur);color:var(--ci-text)}
.pille-beta::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.pille-neu{background:var(--volt);border-color:var(--volt);color:var(--ink)}
.pille-neu::before{border-radius:0;transform:rotate(45deg) scale(.85)}

/* ---- Badges (Status, kompakt): Punkt plus Text. Grau = neutral. ---- */
.badge{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.5px;padding:5px 11px;border-radius:var(--radius-pill);display:inline-flex;gap:7px;align-items:center;border:1px solid transparent}
.badge::before{content:"";width:7px;height:7px;border-radius:50%}
.badge.b-volt{background:color-mix(in srgb,var(--volt) 18%,var(--paper-2));color:var(--volt-deep);border-color:color-mix(in srgb,var(--volt) 40%,transparent)}
.badge.b-volt::before{background:var(--volt)}
.badge.b-ok{background:color-mix(in srgb,var(--ok) 6%,var(--paper-2));color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.badge.b-ok::before{background:var(--ok)}
.badge.b-copper{background:color-mix(in srgb,var(--copper) 6%,var(--paper-2));color:var(--copper);border-color:color-mix(in srgb,var(--copper) 35%,transparent)}
.badge.b-copper::before{background:var(--copper)}
.badge.b-ink{background:var(--ink);color:var(--paper-2)}
.badge.b-ink::before{background:var(--volt)}
.badge.b-grau{background:var(--ci-grund);color:var(--ci-text-2);border-color:var(--ci-linie-2)}
.badge.b-grau::before{background:var(--ci-gedaempft)}
.ci-dunkel .badge.b-volt{background:color-mix(in srgb,var(--volt) 16%,var(--ci-flaeche));color:var(--ci-akzent-text);border-color:color-mix(in srgb,var(--volt) 40%,transparent)}
.ci-dunkel .badge.b-ok{background:color-mix(in srgb,var(--ok) 18%,var(--ci-flaeche));color:var(--ci-text);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.ci-dunkel .badge.b-copper{background:color-mix(in srgb,var(--copper) 18%,var(--ci-flaeche));color:var(--ci-text);border-color:color-mix(in srgb,var(--copper) 55%,transparent)}
.ci-dunkel .badge.b-ink{background:var(--ci-text);color:var(--ci-grund)}
.ci-dunkel .badge.b-ink::before{background:var(--ci-grund)}

/* ---- Formulare: Label, Hilfetext, Fehler, Eingabe, Einwilligung, Honeypot ---- */
.feld{display:grid;gap:var(--space-2);margin:0 0 var(--space-5);min-width:0}
.feld-label{font:600 14px/1.4 var(--font-body);color:var(--ci-text)}
.pflicht{margin-left:var(--space-1);font-weight:700}
.feld-hilfe{margin:0;font:400 13.5px/1.5 var(--font-body);color:var(--ci-gedaempft)}
.feld-fehler{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;font:600 13.5px/1.45 var(--font-body);color:var(--copper)}
.feld-fehler .ico{width:16px;height:16px;margin-top:2px}
.ci-dunkel .feld-fehler{color:var(--ci-text)}
.ci-dunkel .feld-fehler .ico{color:var(--copper)}
.inp{width:100%;min-width:0;min-height:44px;padding:12px 14px;border:1.5px solid var(--ci-kontur);border-radius:11px;background:var(--ci-flaeche);color:var(--ci-text);font:400 16px/1.4 var(--font-body);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
textarea.inp{min-height:120px;resize:vertical}
.inp::placeholder{color:var(--ci-gedaempft);opacity:1}
.inp:hover{border-color:var(--ci-text)}
.inp:focus-visible,.site .inp:focus-visible,.inp.is-fokus{outline:2px solid var(--ci-fokus);outline-offset:2px;border-color:var(--volt);box-shadow:0 0 0 4px var(--glow)}
.inp[aria-invalid="true"]{border-color:var(--copper);box-shadow:inset 3px 0 0 var(--copper)}
.inp[aria-invalid="true"]:focus-visible{box-shadow:inset 3px 0 0 var(--copper),0 0 0 4px var(--glow)}
.chk{display:flex;align-items:flex-start;gap:var(--space-3);min-height:44px;padding-block:var(--space-2);font:400 14.5px/1.5 var(--font-body);color:var(--ci-text);cursor:pointer}
.chk input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--volt);cursor:pointer}
.chk a{color:var(--ci-akzent-text);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Formularlayout: zwei Felder nebeneinander (brechen unter ca. 460 px um), Formular mit Titel */
.ci-feld-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 var(--space-4)}
.ci-formular{max-width:560px}
.ci-formular-titel{margin:0 0 var(--space-5);font:700 20px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ci-text)}

/* ---- Karte (mit Icon-Kachel) ---- */
.ccard{border:1px solid var(--ci-linie);border-radius:var(--radius-md);background:var(--ci-flaeche);color:var(--ci-text);padding:20px;max-width:280px;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ccard h4,.ccard h5{font-family:var(--font-display);font-size:18px;font-weight:700;margin:12px 0 5px;color:var(--ci-text)}
.ccard p{font-size:14px;color:var(--ci-gedaempft);margin:0}
.ic{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--volt) 16%,var(--ci-flaeche));color:var(--ci-text);display:grid;place-items:center}
.ic svg{width:20px;height:20px}

/* ---- Tabelle: scrollbare, per Tastatur erreichbare Region; Kopfzeile in Graphit ---- */
.tabelle-wrap{overflow-x:auto;border:1px solid var(--ci-linie);border-radius:var(--radius-md);background:var(--ci-flaeche)}
.tabelle{width:100%;min-width:520px;border-collapse:collapse;font:400 14px/1.45 var(--font-body);color:var(--ci-text)}
.tabelle caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabelle thead th{background:var(--ci-invers);color:var(--ci-invers-text);padding:11px 14px;text-align:left;font:500 11px/1.4 var(--font-mono);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.tabelle tbody th,.tabelle tbody td{padding:12px 14px;border-top:1px solid var(--ci-linie);text-align:left;vertical-align:middle}
.tabelle tbody th{font:500 13px/1.4 var(--font-mono)}
.tabelle tbody tr:nth-child(even){background:var(--ci-grund)}
.tabelle tbody tr:hover{background:color-mix(in srgb,var(--volt) 8%,var(--ci-flaeche))}
.tabelle .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- Leerzustand: 1–2 Sätze und die eine Hauptaktion ---- */
.leer{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-7) var(--space-5);border:1px dashed var(--ci-linie-2);border-radius:var(--radius-md);background:var(--ci-flaeche);color:var(--ci-text);text-align:center}
.leer h4,.leer h5{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ci-text)}
.leer p{margin:0;max-width:44ch;color:var(--ci-gedaempft);font-size:14.5px}

/* ---- Toast: kurze Rückmeldung nach einer Aktion; role=status, bei Fehlern role=alert (beim Einblenden setzen) ---- */
.toast{display:flex;align-items:flex-start;gap:var(--space-3);max-width:420px;padding:var(--space-3) var(--space-4);border:1px solid var(--ci-linie-2);border-radius:var(--radius-sm);background:var(--ci-invers);color:var(--ci-invers-text);box-shadow:var(--shadow-lg);font:500 13.5px/1.45 var(--font-mono)}
.toast .ico{margin-top:1px}
.toast-ok{border-left:4px solid var(--ok)}
.toast-fehler{background:var(--copper);border-color:var(--copper);color:var(--paper-2)}

/* ---- Bewegung: Einblenden (transform und opacity), gestaffelt über die Dauer-Tokens. Nur der Startzustand ist animiert (backwards):
   danach gilt der natürliche Zustand des Elements, damit z. B. .ccard:hover seinen transform behält. ---- */
.einblenden{animation:ci-einblenden var(--dur-slow) var(--ease) backwards}
.einblenden-2{animation-delay:var(--dur-fast)}
.einblenden-3{animation-delay:calc(var(--dur-fast) * 2)}
@keyframes ci-einblenden{from{opacity:0;transform:translateY(16px)}}

/* Bewegung reduzieren (Pflicht): Wer das im Betriebssystem einstellt, bekommt keine Animation und keinen Übergang. */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        animation-delay:0s!important;
        transition-duration:.001ms!important;
        transition-delay:0s!important;
        scroll-behavior:auto!important;
    }
    .ccard:hover{transform:none}
}

/* =========================================================================
   RD-0-01 — System D „Lichtwerk“: Rollen-Tokens (Redesign 2026/27, Entscheide 125/132). Nur angehängt, rein additiv.
   Geltungsbereich: ausschließlich der Scope .d-system bzw. [data-design="2027"] (auf einem Container oder auf <html>/<body>) und die
   Klassen .d-t-*. Bestandsseiten tragen weder den Scope noch die Klassen und erben darum nichts; es steht bewusst kein :root-Block hier.
   Farbmodus je Scope: Standard hell; dunkel über data-theme="dark" am Scope oder an einem Vorfahren (Werbeseite: <html data-theme>), ohne
   Angabe nach prefers-color-scheme. data-theme="light" am Scope oder am Wurzelelement erzwingt hell. Ein verschachtelter Scope ohne eigenes
   data-theme folgt dem Wurzelelement und der Systemeinstellung, NICHT dem Scope darüber: Wer einen Modus erzwingt, wiederholt data-theme an jedem
   verschachtelten Scope. Der Scope setzt auch Grund und Textfarbe — Bausteine tragen .d-system nicht selbst. Das Filament-Klassenschema (html.dark)
   kennt dieser Block nicht — das Backoffice setzt data-theme am Scope (Etappe 2).
   Rollen sagen, WOFÜR eine Farbe dient (wie --ci-*), nie den Markennamen. Mandanten-Portale überschreiben nur --d-akzent (und --d-auf-akzent
   über MandantenAkzent) am Scope; --d-glow folgt, weil es aus --d-akzent abgeleitet wird.
   config/ci.php (system_d) spiegelt jeden Wert, lang/{de,en}/ci.php beschriftet ihn, tests/Unit/Ci/CiKonfigTest.php und
   SystemDKontrastTest.php prüfen beides gegen diese Datei (Kontrastmatrix inkl. Worst-Case über der Aura). Maßgeblich sind die Werte hier.
   ========================================================================= */

/* Hell (Standard) plus alle Werte, die in beiden Modi gleich sind. */
.d-system,
[data-design="2027"]{
    --d-grund:#efebe3;
    --d-grund-werbung:var(--d-grund);
    --d-flaeche:#fffefb;
    --d-glas:rgba(255,255,255,.64);
    --d-glas-2:rgba(255,255,255,.9);
    --d-ebene-1:linear-gradient(165deg,rgba(255,255,255,.9),rgba(255,255,255,.64));
    --d-kante:rgba(21,23,28,.1);
    --d-kante-2:rgba(21,23,28,.2);
    --d-kontur:rgba(21,23,28,.6);
    --d-text:#15171c;
    --d-text-2:#353a45;
    --d-text-3:#5c564b;
    --d-akzent:#f2a516;
    --d-akzent-text:#8a5708;
    --d-auf-akzent:#15171c;
    --d-glut:linear-gradient(100deg,#8a5708 0%,#c2410c 52%,#8a5708 100%);
    --d-glow:color-mix(in srgb,var(--d-akzent) 32%,transparent);
    --d-ok:#3f7d4e;
    --d-warnung:var(--d-akzent);
    --d-kritisch:#c2410c;
    --d-info:#3d6478;
    --d-spur:rgba(21,23,28,.09);
    --d-fokus:#15171c;
    --d-aura-1:rgba(242,165,22,.22);
    --d-aura-2:rgba(61,100,120,.12);
    --d-ebene-2-schatten:0 24px 50px -36px rgba(21,23,28,.35);

    --radius-xl:28px;
    --d-kante-breite:1px;
    --d-ebene-2-kante:rgba(242,165,22,.5);
    --d-ebene-3:color-mix(in srgb,var(--d-grund) 70%,transparent);
    --d-ebene-3-blur:16px;
    --d-ziel-min:24px;
    --d-ziel:44px;
    --d-ziel-portal:48px;
    --d-font-display:'Archivo AKW','Archivo','Arial Narrow',system-ui,sans-serif;
    --d-font-body:'AK Sans','Segoe UI',system-ui,sans-serif;
    --d-font-mono:'AK Mono',ui-monospace,Menlo,Consolas,monospace;

    color-scheme:light;
    background-color:var(--d-grund);
    color:var(--d-text);
}

/* Dunkel, ausdrücklich: data-theme="dark" am Scope selbst … */
.d-system[data-theme="dark"],
[data-design="2027"][data-theme="dark"]{
    --d-grund:#0b0d11;
    --d-grund-werbung:#090b0f;
    --d-flaeche:#151920;
    --d-glas:rgba(246,244,239,.045);
    --d-glas-2:rgba(246,244,239,.08);
    --d-ebene-1:linear-gradient(165deg,rgba(246,244,239,.07),rgba(246,244,239,.025));
    --d-kante:rgba(246,244,239,.11);
    --d-kante-2:rgba(246,244,239,.2);
    --d-kontur:rgba(246,244,239,.6);
    --d-text:#f6f4ef;
    --d-text-2:rgba(246,244,239,.8);
    --d-text-3:rgba(246,244,239,.62);
    --d-akzent:#f2a516;
    --d-akzent-text:#ffcb6b;
    --d-auf-akzent:#15171c;
    --d-glut:linear-gradient(100deg,#ffe4ad 0%,#f2a516 28%,#ff8a2a 52%,#ffd27a 72%,#f2a516 100%);
    --d-glow:color-mix(in srgb,var(--d-akzent) 55%,transparent);
    --d-ok:#6cc58a;
    --d-warnung:var(--d-akzent);
    --d-kritisch:#ff7347;
    --d-info:#8fb0c2;
    --d-spur:rgba(246,244,239,.1);
    --d-fokus:#ffcb6b;
    --d-aura-1:rgba(242,165,22,.34);
    --d-aura-2:rgba(143,176,194,.17);
    --d-ebene-2-schatten:0 24px 50px -36px rgba(0,0,0,.6);
    color-scheme:dark;
}

/* … oder an einem Vorfahren (Werbeseite: <html data-theme="dark">); ein Scope mit data-theme="light" bleibt hell. */
[data-theme="dark"] .d-system:not([data-theme="light"]),
[data-theme="dark"] [data-design="2027"]:not([data-theme="light"]){
    --d-grund:#0b0d11;
    --d-grund-werbung:#090b0f;
    --d-flaeche:#151920;
    --d-glas:rgba(246,244,239,.045);
    --d-glas-2:rgba(246,244,239,.08);
    --d-ebene-1:linear-gradient(165deg,rgba(246,244,239,.07),rgba(246,244,239,.025));
    --d-kante:rgba(246,244,239,.11);
    --d-kante-2:rgba(246,244,239,.2);
    --d-kontur:rgba(246,244,239,.6);
    --d-text:#f6f4ef;
    --d-text-2:rgba(246,244,239,.8);
    --d-text-3:rgba(246,244,239,.62);
    --d-akzent:#f2a516;
    --d-akzent-text:#ffcb6b;
    --d-auf-akzent:#15171c;
    --d-glut:linear-gradient(100deg,#ffe4ad 0%,#f2a516 28%,#ff8a2a 52%,#ffd27a 72%,#f2a516 100%);
    --d-glow:color-mix(in srgb,var(--d-akzent) 55%,transparent);
    --d-ok:#6cc58a;
    --d-warnung:var(--d-akzent);
    --d-kritisch:#ff7347;
    --d-info:#8fb0c2;
    --d-spur:rgba(246,244,239,.1);
    --d-fokus:#ffcb6b;
    --d-aura-1:rgba(242,165,22,.34);
    --d-aura-2:rgba(143,176,194,.17);
    --d-ebene-2-schatten:0 24px 50px -36px rgba(0,0,0,.6);
    color-scheme:dark;
}

/* … oder nach der Systemeinstellung, solange weder Wurzelelement noch Scope hell erzwingen. */
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .d-system:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-design="2027"]:not([data-theme="light"]),
    :root[data-design="2027"]:not([data-theme="light"]){
        --d-grund:#0b0d11;
        --d-grund-werbung:#090b0f;
        --d-flaeche:#151920;
        --d-glas:rgba(246,244,239,.045);
        --d-glas-2:rgba(246,244,239,.08);
        --d-ebene-1:linear-gradient(165deg,rgba(246,244,239,.07),rgba(246,244,239,.025));
        --d-kante:rgba(246,244,239,.11);
        --d-kante-2:rgba(246,244,239,.2);
        --d-kontur:rgba(246,244,239,.6);
        --d-text:#f6f4ef;
        --d-text-2:rgba(246,244,239,.8);
        --d-text-3:rgba(246,244,239,.62);
        --d-akzent:#f2a516;
        --d-akzent-text:#ffcb6b;
        --d-auf-akzent:#15171c;
        --d-glut:linear-gradient(100deg,#ffe4ad 0%,#f2a516 28%,#ff8a2a 52%,#ffd27a 72%,#f2a516 100%);
        --d-glow:color-mix(in srgb,var(--d-akzent) 55%,transparent);
        --d-ok:#6cc58a;
        --d-warnung:var(--d-akzent);
        --d-kritisch:#ff7347;
        --d-info:#8fb0c2;
        --d-spur:rgba(246,244,239,.1);
        --d-fokus:#ffcb6b;
        --d-aura-1:rgba(242,165,22,.34);
        --d-aura-2:rgba(143,176,194,.17);
        --d-ebene-2-schatten:0 24px 50px -36px rgba(0,0,0,.6);
        color-scheme:dark;
    }
}

/* Anpassungen an Systemeinstellungen (WCAG 2.2, Plan 4.6). Die Selektorliste enthält jede Form der Modus-Regeln oben mit gleicher Spezifität
   und steht danach — so gewinnt die Anpassung in jedem Modus (Test: CiKonfigTest::test_system_d_anpassungen_*). Gezeichnet wird nur über Rollen:
   Komponenten brauchen dafür keine eigene Regel. forced-colors ist Sache der Komponenten (Systemfarben, Lampen behalten ihre Form). */
@media (prefers-reduced-transparency:reduce){
    .d-system,
    [data-design="2027"],
    .d-system[data-theme="dark"],
    [data-design="2027"][data-theme="dark"],
    [data-theme="dark"] .d-system:not([data-theme="light"]),
    [data-theme="dark"] [data-design="2027"]:not([data-theme="light"]),
    :root:not([data-theme="light"]) .d-system:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-design="2027"]:not([data-theme="light"]),
    :root[data-design="2027"]:not([data-theme="light"]){
        --d-glas:var(--d-flaeche);
        --d-glas-2:var(--d-flaeche);
        --d-ebene-1:var(--d-flaeche);
        --d-ebene-3:var(--d-flaeche);
        --d-ebene-3-blur:0px;
    }
}
@media (prefers-contrast:more){
    .d-system,
    [data-design="2027"],
    .d-system[data-theme="dark"],
    [data-design="2027"][data-theme="dark"],
    [data-theme="dark"] .d-system:not([data-theme="light"]),
    [data-theme="dark"] [data-design="2027"]:not([data-theme="light"]),
    :root:not([data-theme="light"]) .d-system:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-design="2027"]:not([data-theme="light"]),
    :root[data-design="2027"]:not([data-theme="light"]){
        --d-kante:var(--d-kontur);
        --d-kante-2:var(--d-kontur);
        --d-kante-breite:2px;
        --d-glow:transparent;
        --d-ebene-2-schatten:none;
    }
}

/* Typo-Skala D. Klassen statt Scope-Regeln: ohne die D-Tokens (außerhalb des Scopes) fällt die Schriftfamilie auf den Elternwert zurück.
   Archivo AKW ist die variable Archivo (Breite 76–100 %, auf der Werbeseite aus site-2026.css); ohne diese Datei greift die statische Archivo
   ohne Breitenachse. Versalien nur für Display-Rollen; in Portalen gilt Satzschreibung. */
.d-t-display{font-family:var(--d-font-display);font-size:clamp(44px,6.1vw,104px);font-weight:800;line-height:.95;letter-spacing:-.005em;font-stretch:76%;text-transform:uppercase}
.d-t-abschnitt{font-family:var(--d-font-display);font-size:clamp(38px,5.4vw,86px);font-weight:800;line-height:.95;letter-spacing:normal;font-stretch:80%;text-transform:uppercase}
.d-t-karte{font-family:var(--d-font-display);font-size:23px;font-weight:800;line-height:1;letter-spacing:normal;font-stretch:84%;text-transform:uppercase}
.d-t-titel{font-family:var(--d-font-display);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.01em;font-stretch:86%}
.d-t-panel{font-family:var(--d-font-display);font-size:17px;font-weight:700;line-height:1.2;letter-spacing:.01em;font-stretch:100%}
.d-t-zahl{font-family:var(--d-font-display);font-size:36px;font-weight:800;line-height:1;letter-spacing:normal;font-stretch:80%;font-variant-numeric:tabular-nums}
.d-t-portal-titel{font-family:var(--d-font-body);font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.d-t-lead{font-family:var(--d-font-body);font-size:clamp(16px,1.3vw,18.5px);font-weight:400;line-height:1.55;letter-spacing:normal}
.d-t-text{font-family:var(--d-font-body);font-size:16px;font-weight:400;line-height:1.55;letter-spacing:normal}
.d-t-klein{font-family:var(--d-font-body);font-size:13.5px;font-weight:400;line-height:1.5;letter-spacing:normal}
.d-t-label{font-family:var(--d-font-mono);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.16em;text-transform:uppercase}

/* =========================================================================
   RD-0-05 — Bewegung D (Redesign 2026/27, Entscheid 125). Nur angehängt; --dur-fast/--dur-base/--dur-slow/--ease bleiben.
   Reine Werte (Custom Properties), ohne Wirkung auf Bestandsseiten: sie greifen erst, wo die Bewegungs-Bausteine (akw-bewegung) sie verwenden.
   config/ci.php (Gruppe bewegung) spiegelt jedes Token (CiKonfigTest). Schleifen laufen nur unter [data-laeuft] (Laufsperre, setzt das Bewegungs-Skript).
   ========================================================================= */
:root{
    --dur-instant:90ms;
    --dur-medium:400ms;
    --dur-reveal:900ms;
    --dur-count:1000ms;
    --dur-kinetik:1250ms;
    --dur-flow:1600ms;
    --ease-out:var(--ease);
    --ease-in:cubic-bezier(.4,0,1,1);
    --ease-inout:cubic-bezier(.65,0,.35,1);
    --stagger:90ms;
    --rise:24px;
}