/* =========================================================================
   Unterseiten der Werbeseite D „Lichtwerk“ (Redesign 2026/27, Etappe 1, Paket RD-W-07): Funktionen, Technik, Umstieg, Rechtstexte, 404,
   Antwortseiten von Anfrage und Testzugang. Gilt nur für public/v2027/* (Scope [data-design="2027"] auf <html>); lädt NACH site-2027.css
   (Shell, Typografie-Grundklassen .w-*, Knöpfe, Chips, FAQ, Zeitleiste) und baut auf ci.css (Rollen-Tokens --d-*) und akw-bewegung.* auf.
   Eigene Klassen heißen .u-* (Unterseiten) — keine Kollision mit .w-* der Startseite (RD-W-03…06 ändern site-2027.css, nicht diese Datei).
   Regeln wie bei der Startseite (Plan 4.4): keine Endlosschleifen, kein versteckender Startzustand (Einblenden steckt in akw-bewegung), nur transform/
   opacity/filter in Keyframes, gezeichnet wird über Rollen-Tokens — nie über Markennamen oder feste Modusfarben (Ausnahme: Knopf-Verlauf des
   Anfrageformulars wie auf der Startseite). Ohne Skript sind alle Inhalte da; Pause/reduzierte Bewegung = Endzustand sofort (ci.css + akw-bewegung.css).
   ========================================================================= */

[data-design="2027"] .u-seite{position:relative}
[data-design="2027"] .u-seite [hidden]{display:none!important}

/* ---------- Typografie D für Unterseiten ---------- */
.u-h1{margin:14px 0 20px;max-width:22ch;font:800 clamp(34px,4.7vw,76px)/.95 var(--d-font-display);font-stretch:80%;letter-spacing:normal;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;color:var(--d-text)}
.u-h2{margin:10px 0 14px;max-width:24ch;font:800 clamp(28px,3.6vw,54px)/.98 var(--d-font-display);font-stretch:82%;letter-spacing:normal;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;color:var(--d-text)}
.u-h2--klein{max-width:none;font-size:clamp(22px,2.4vw,30px);font-stretch:86%}
.u-h3{margin:0;font:800 clamp(19px,1.9vw,24px)/1.05 var(--d-font-display);font-stretch:86%;letter-spacing:normal;text-transform:uppercase;overflow-wrap:break-word;color:var(--d-text)}
.u-lead{margin-top:4px}
.u-nr{display:inline-grid;place-items:center;min-width:2.6em;padding:3px 7px;border:1.5px solid var(--d-akzent);border-radius:8px;font:500 11px/1.2 var(--d-font-mono);letter-spacing:.1em;color:var(--d-akzent-text)}
.u-hinweis{max-width:80ch;margin:0;padding:14px 18px;border-left:3px solid var(--d-akzent);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--d-glas);font-size:14.5px;line-height:1.6;color:var(--d-text-2)}
.u-karte{position:relative;padding:clamp(20px,3vw,32px);border-radius:var(--radius-lg);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);box-shadow:var(--d-ebene-2-schatten)}
.u-karte p:not([class]){color:var(--d-text-2);font-size:15px}
.u-sek{padding:clamp(24px,3.4vw,48px) 0}
.u-sek-kopf{margin-bottom:clamp(22px,3vw,40px)}
.u-schmal{max-width:calc(720px + 2 * var(--w-gutter))}
.u-notiz{margin-top:30px}
.u-weiter{margin-top:14px;font-size:15px}
.u-knopf-klein{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:var(--d-kante-breite) solid var(--d-kante-2);border-radius:12px;background:var(--d-glas);font:600 13px/1.2 var(--d-font-body);color:var(--d-text);cursor:pointer}
.u-knopf-klein:hover{border-color:var(--d-ebene-2-kante)}
.u-knopf-klein:active{transform:translateY(1px)}

/* ---------- Seitenkopf (Brotkrumen, Kicker, H1, Leitung) ---------- */
.u-kopf{position:relative;isolation:isolate;overflow:clip;margin-top:calc(var(--kopf-h) * -1);padding:calc(var(--kopf-h) + clamp(26px,4.6vw,64px)) 0 clamp(6px,1.4vw,16px)}
.u-kopf-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent)}
.u-aura{position:absolute;right:-200px;top:-320px;width:860px;height:860px;border-radius:50%;background:radial-gradient(circle,var(--d-aura-1),rgb(194 65 12 / calc(var(--w-kupfer) * .8)) 40%,transparent 66%)}
.u-aura--2{right:auto;left:-280px;top:90px;width:560px;height:560px;background:radial-gradient(circle,var(--d-aura-2),transparent 62%)}
.u-kopf-in{position:relative;z-index:1}
.u-krume ol{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0 0 20px;font:500 12px/1.5 var(--d-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-text-3)}
.u-krume li+li::before{content:"/";content:"/" / "";margin-right:10px;color:var(--d-text-3)}
.u-krume a{display:inline-flex;align-items:center;min-height:24px;color:var(--d-text-2);text-decoration:none}
.u-krume a:hover{color:var(--d-akzent-text);text-decoration:underline;text-underline-offset:3px}
.u-legende{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.u-legende .w-tier{margin:0}
/* Die Leitung: dünne Amber-Linie mit Glow zieht sich einmal vom Knoten nach rechts (data-aufbau; Endzustand ohne Skript/bei reduzierter Bewegung sofort). */
.u-leitung{display:flex;align-items:center;gap:0;margin-top:clamp(26px,3.4vw,44px);height:14px}
.u-leitung-knoten{flex:none;width:12px;height:12px;border-radius:50%;background:var(--d-akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--d-akzent) 24%,transparent),0 0 18px var(--d-akzent)}
.u-leitung-linie{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--d-akzent),color-mix(in srgb,var(--d-akzent) 38%,transparent) 55%,transparent);box-shadow:0 0 12px var(--d-glow)}

/* ---------- Funktionen: Übersicht, Werkzeugleiste, Akkordeons ---------- */
.u-fn-rumpf{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(40px,6vw,88px)}
.u-uebersicht{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.u-uebersicht>li{display:grid}
.u-uk{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;border-radius:var(--radius-lg);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);box-shadow:var(--d-ebene-2-schatten);color:var(--d-text);text-decoration:none;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base),box-shadow var(--dur-base)}
.u-uk:hover{transform:translateY(-4px);border-color:var(--d-ebene-2-kante);box-shadow:var(--d-ebene-2-schatten),0 0 50px -24px var(--d-glow)}
.u-uk-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.u-uk .akw-pikto{width:28px;height:28px;color:var(--d-akzent-text)}
.u-uk-nr{font:500 12px/1 var(--d-font-mono);letter-spacing:.16em;color:var(--d-text-3)}
.u-uk-t{font:800 clamp(19px,1.8vw,23px)/1.02 var(--d-font-display);font-stretch:84%;text-transform:uppercase;color:var(--d-text);overflow-wrap:break-word}
.u-uk-d{flex:1;font-size:14.5px;line-height:1.5;color:var(--d-text-2)}
.u-uk-zaehler{font:500 11px/1.4 var(--d-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-3)}
.u-uk-balken{display:block;width:100%;max-width:none;height:4px}
.u-uk-spur{fill:var(--d-spur)}
.u-uk-fuell{fill:var(--d-akzent)}

.u-werkzeug{position:relative;z-index:20;display:grid;grid-template-columns:minmax(240px,1.3fr) auto auto;gap:12px 24px;align-items:end;margin:clamp(28px,4vw,48px) 0 18px;padding:14px 18px 16px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--d-grund) 97%,transparent);border:var(--d-kante-breite) solid var(--d-kante-2);box-shadow:var(--d-ebene-2-schatten)}
/* Mitlaufende Leiste nur auf großen Anzeigen (Breite ≥ 1100 px, Höhe ≥ 640 px): sonst stünde sie samt Kopfzeile auf Querformat-Telefonen über einem Drittel des Bildes.
   Damit sie weder Sprungziele noch den Tastaturfokus verdeckt (WCAG 2.4.11), rechnet das Skript ihre Höhe in --u-wz-h ein und der Seitenrand oben (scroll-padding-top) wächst mit. */
@media (min-width:1100px) and (min-height:640px){
    .u-werkzeug{position:sticky;top:calc(var(--kopf-h) + 8px)}
    html:has(.u-werkzeug){scroll-padding-top:calc(var(--kopf-h) + 8px + var(--u-wz-h,130px) + 14px)}
}
.u-werkzeug-feld{min-width:0}
.u-suchfeld{position:relative;margin-top:6px}
.u-suchfeld .i{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--d-text-3);pointer-events:none}
.u-suche{display:block;width:100%;min-height:48px;padding:0 14px 0 44px;border:var(--d-kante-breite) solid var(--d-kontur);border-radius:var(--radius-md);background:var(--d-flaeche);font:400 16px/1.4 var(--d-font-body);color:var(--d-text);-webkit-appearance:none;appearance:none}
.u-suche::placeholder{color:var(--d-text-3)}
.u-suche:focus-visible{outline:2px solid var(--d-fokus);outline-offset:2px}
.u-seg{min-width:0;margin:0;padding:0;border:0}
.u-seg legend{display:block;padding:0;margin-bottom:6px}
.u-seg-in{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:var(--d-kante-breite) solid var(--d-kante-2);border-radius:var(--radius-pill);background:var(--d-glas)}
.u-seg label{position:relative;display:inline-flex}
.u-seg input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-seg label span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-pill);font:600 13px/1 var(--d-font-body);color:var(--d-text-2);cursor:pointer}
.u-seg label:hover span{color:var(--d-text)}
.u-seg input:checked+span{background:var(--d-text);color:var(--d-grund)}
.u-seg label:has(input:focus-visible){outline:2px solid var(--d-fokus);outline-offset:3px;border-radius:var(--radius-pill)}
.u-lampe{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--d-ok)}
.u-lampe--dev{background:transparent;border:1.5px solid var(--d-akzent)}
.u-seg input:checked+span .u-lampe--dev{border-color:currentColor}
.u-werkzeug-aktion{display:flex;flex-wrap:wrap;gap:8px}
.u-treffer{grid-column:1/-1;min-height:0;margin:0;font:500 12px/1.5 var(--d-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-text-2)}
.u-treffer:empty{display:none}

.u-bereiche{display:grid;gap:12px}
.u-bereich-d{border-radius:var(--radius-lg);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);box-shadow:var(--d-ebene-2-schatten);transition:border-color var(--dur-base)}
.u-bereich-d[open]{border-color:var(--d-ebene-2-kante)}
.u-bereich-d summary{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"nr ico titel zaehler tog" ". . beschr zaehler tog";align-items:center;gap:2px 16px;min-height:76px;padding:18px 20px;list-style:none;cursor:pointer;border-radius:var(--radius-lg)}
.u-bereich-d summary::-webkit-details-marker{display:none}
.u-bereich-d summary:hover .u-bereich-t{color:var(--d-akzent-text)}
.u-bereich-nr{grid-area:nr;font:500 12px/1 var(--d-font-mono);letter-spacing:.16em;color:var(--d-text-3)}
.u-bereich-d summary .akw-pikto{grid-area:ico;width:26px;height:26px;color:var(--d-akzent-text)}
.u-bereich-t{grid-area:titel;margin:0;font:800 clamp(20px,2.2vw,28px)/1.05 var(--d-font-display);font-stretch:84%;letter-spacing:normal;text-transform:uppercase;color:var(--d-text);overflow-wrap:break-word;transition:color var(--dur-fast)}
.u-bereich-beschr{grid-area:beschr;font-size:14.5px;line-height:1.5;color:var(--d-text-2)}
.u-bereich-zaehler{grid-area:zaehler;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.u-bereich-d summary::after{content:"+";content:"+" / "";grid-area:tog;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:var(--d-kante-breite) solid var(--d-kante-2);font:500 18px/1 var(--d-font-mono);color:var(--d-akzent-text)}
.u-bereich-d[open] summary::after{content:"–";content:"–" / ""}
.u-fitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px;padding:4px 20px 22px}
.u-fitem{display:grid;align-content:start;gap:8px;padding:16px 16px 14px;border-radius:var(--radius-md);background:var(--d-glas);border:var(--d-kante-breite) solid var(--d-kante)}
.u-fitem-t{margin:0;font:600 16px/1.3 var(--d-font-body);color:var(--d-text)}
.u-fitem p{margin:0;font-size:14.5px;line-height:1.55;color:var(--d-text-2)}
.u-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.u-meta .w-tier{margin:0}
.u-bereich>.u-hinweis{margin-top:10px}

/* ---------- Technik ---------- */
.u-hinweis--kopf{margin-top:22px}
.u-szenarien-nav{margin-top:26px}
.u-szenarien{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.u-szenarien>li{display:grid}
.u-sz{display:grid;align-content:start;gap:14px;padding:16px 16px 18px;border-radius:var(--radius-lg);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);box-shadow:var(--d-ebene-2-schatten);color:var(--d-text);text-decoration:none;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.u-sz:hover{transform:translateY(-4px);border-color:var(--d-ebene-2-kante)}
.u-sz strong{font:800 clamp(17px,1.6vw,20px)/1.1 var(--d-font-display);font-stretch:86%;text-transform:uppercase;overflow-wrap:break-word}
.u-units{display:flex;flex-wrap:wrap;gap:4px 14px;min-height:34px;align-items:flex-start}
.u-units .grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:150px}
.u-units i{display:block;width:10px;height:10px;border-radius:3px;background:color-mix(in srgb,var(--d-text) 32%,transparent)}
.u-units i.srv{width:16px;height:16px;margin-right:6px;border-radius:5px;background:var(--d-akzent);box-shadow:0 0 14px var(--d-glow)}
.u-szn{padding-top:clamp(40px,5vw,72px)}
.u-szn-kopf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px 40px;align-items:end;margin-bottom:22px}
.u-szn-kopf .u-h2{max-width:20ch}
.u-wer{max-width:60ch;margin:6px 0 0;color:var(--d-text-2)}
.u-entfaellt ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.u-entfaellt li{padding:7px 12px;border:1px dashed var(--d-kante-2);border-radius:var(--radius-pill);font:500 12px/1.2 var(--d-font-mono);letter-spacing:.06em;color:var(--d-text-3);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--d-akzent)}
.u-vs-box{overflow:hidden;border-radius:var(--radius-lg);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);box-shadow:var(--d-ebene-2-schatten)}
.u-vs,.u-tabelle{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.u-vs th,.u-vs td,.u-tabelle th,.u-tabelle td{padding:14px 18px;text-align:left;vertical-align:top;border-top:var(--d-kante-breite) solid var(--d-kante)}
.u-vs thead th,.u-tabelle thead th{border-top:0;background:var(--d-glas);font:500 11px/1.4 var(--d-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-text-3)}
.u-vs tbody th,.u-tabelle tbody th{width:22%;font:600 14.5px/1.4 var(--d-font-body);color:var(--d-text)}
.u-vs td{color:var(--d-text-2)}
.u-vs .u-alt{color:var(--d-text-3)}
.u-vs .u-neu{color:var(--d-text);background:color-mix(in srgb,var(--d-akzent) 6%,transparent);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--d-akzent) 62%,transparent)}
.u-vs thead .u-neu{color:var(--d-akzent-text)}
.u-keine{font-style:italic}
.u-vs .w-chip{margin-left:6px}
.u-tabelle td{color:var(--d-text-2)}
.u-blaetter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.u-blatt{padding:22px 22px 18px;border-radius:var(--radius-lg);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);box-shadow:var(--d-ebene-2-schatten)}
.u-blatt--breit{grid-column:1/-1}
.u-blatt-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.u-sid{flex:none;white-space:nowrap;font:500 11px/1 var(--d-font-mono);letter-spacing:.14em;color:var(--d-text-3)}
.u-blatt dl{display:grid;margin:14px 0 0}
.u-blatt dl>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:4px 14px;padding:10px 0;border-top:var(--d-kante-breite) solid var(--d-kante)}
.u-blatt dt{font:500 11px/1.5 var(--d-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-text-3);overflow-wrap:anywhere}
.u-blatt dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--d-text-2)}
.u-blatt dd .w-chip{margin-left:6px}

/* ---------- Umstieg ---------- */
.u-split{display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);gap:clamp(24px,5vw,80px);align-items:start}
.u-split-kopf{position:sticky;top:calc(var(--kopf-h) + 32px);margin-bottom:0}
.u-split .w-faq{max-width:none}
.u-drops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.u-drop{display:grid;gap:8px;padding:18px 20px;border-radius:var(--radius-lg);border:1px dashed var(--d-kante-2);background:var(--d-glas)}
.u-drop s{font:800 clamp(20px,2vw,26px)/1.05 var(--d-font-display);font-stretch:84%;text-transform:uppercase;color:var(--d-text-2);text-decoration-thickness:2px;text-decoration-color:var(--d-akzent)}
.u-schritte{position:relative;display:grid;gap:14px;padding-left:68px}
.u-schritte::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:linear-gradient(var(--d-akzent),color-mix(in srgb,var(--d-akzent) 18%,transparent));box-shadow:0 0 12px var(--d-glow);transform-origin:top center;animation:u-zieh var(--dur-flow) var(--ease-inout) both}
@keyframes u-zieh{from{transform:scaleY(0)}}
.u-schritt{position:relative}
.u-knoten{position:absolute;left:-68px;top:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--d-flaeche);border:1.5px solid var(--d-akzent);font:500 12px/1 var(--d-font-mono);color:var(--d-akzent-text);box-shadow:0 0 18px -4px var(--d-glow)}
.u-schritt .u-karte{display:grid;align-content:start;gap:10px;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out)}
.u-schritt .u-karte:hover{border-color:var(--d-ebene-2-kante);transform:translateY(-2px)}
.u-schritt .u-karte p{margin:0}
.u-schritt .w-chip{justify-self:start}
.u-parallel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);align-items:center}

/* ---------- Abschluss (Kontaktführung) ---------- */
.u-abschluss{padding-top:clamp(36px,5vw,64px)}
.u-abschluss-karte{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px 40px;align-items:center;padding:clamp(24px,4vw,48px);border-radius:var(--radius-xl);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 120px -60px var(--d-glow)}
.u-abschluss-karte::before{content:"";position:absolute;z-index:-1;right:-180px;bottom:-260px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--d-aura-1),transparent 66%)}
.u-abschluss-text .w-lead{margin:0}
.u-abschluss-text .u-h2{max-width:20ch}
.u-status{display:flex;align-items:center;gap:10px;margin:0}
.u-abschluss-aktion{display:grid;gap:10px;min-width:min(100%,260px)}

/* ---------- Rechtstexte (Impressum, Datenschutz, Widerruf): Text unverändert, nur Gestaltung ---------- */
.u-recht{position:relative;isolation:isolate;overflow:clip;margin-top:calc(var(--kopf-h) * -1);padding:calc(var(--kopf-h) + clamp(26px,4.6vw,64px)) 0 clamp(48px,7vw,104px)}
.u-recht::before{content:"";position:absolute;z-index:-1;right:-220px;top:-340px;width:860px;height:860px;border-radius:50%;background:radial-gradient(circle,var(--d-aura-1),rgb(194 65 12 / calc(var(--w-kupfer) * .67)) 40%,transparent 66%);pointer-events:none}
.u-recht-raster{display:block}
.u-recht-text{min-width:0;max-width:78ch}
.u-eyebrow{margin:0 0 16px;font:500 12px/1.5 var(--d-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--d-akzent-text)}
.u-recht-text h1{margin:0 0 20px;max-width:none;font:800 clamp(32px,4.4vw,62px)/.95 var(--d-font-display);font-stretch:80%;letter-spacing:normal;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;color:var(--d-text)}
.u-recht-text .lead{max-width:64ch;margin:0 0 30px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:var(--d-text-2)}
.u-recht-text h2{position:relative;margin:2.3em 0 .75em;padding-top:24px;border-top:var(--d-kante-breite) solid var(--d-kante);font:800 clamp(21px,2.2vw,29px)/1.08 var(--d-font-display);font-stretch:84%;letter-spacing:normal;text-transform:uppercase;overflow-wrap:break-word;color:var(--d-text);scroll-margin-top:calc(var(--kopf-h) + 16px)}
.u-recht-text h2::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;border-radius:2px;background:var(--d-akzent);box-shadow:0 0 12px var(--d-glow)}
.u-recht-text h3{margin:1.7em 0 .55em;font:600 18px/1.35 var(--d-font-body);color:var(--d-text)}
.u-recht-text p,.u-recht-text li{font-size:16px;line-height:1.7;color:var(--d-text-2)}
.u-recht-text p{margin:0 0 1em;overflow-wrap:break-word}
.u-recht-text ul{margin:0 0 1.1em;padding-left:1.3em;list-style:disc}
.u-recht-text ol{margin:0 0 1.1em;padding-left:1.4em;list-style:decimal}
.u-recht-text li{margin:.35em 0;padding-left:.2em}
.u-recht-text li::marker{color:var(--d-akzent-text)}
.u-recht-text strong{font-weight:600;color:var(--d-text)}
.u-recht-text a{color:var(--d-akzent-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.u-recht-text a:hover{text-decoration-thickness:2px}
.u-recht-text .card{margin:0 0 1.3em;padding:18px 20px;font-family:var(--d-font-body);font-size:15.5px;border-radius:var(--radius-md);background:var(--d-ebene-1);border:var(--d-kante-breite) solid var(--d-kante);line-height:1.7;color:var(--d-text-2);overflow-wrap:anywhere}
.u-recht-text .card p{margin:0 0 .7em}
.u-recht-text .card p:last-child{margin-bottom:0}
.u-recht-text .card.muted{border-style:dashed}
.u-recht-text .muted{color:var(--d-text-3)}
.u-recht-text em{font-style:italic}
.u-zurueck{margin-top:44px}
/* Speicherdauer-Tabelle (Partial public.legal.partials.speicherdauer): ihr eigener Stil gilt nur unter der Alt-Klasse .legal (ci.css, mit festen Rückfallfarben) — der Rahmen der neuen
   Fassung trägt .legal bewusst nicht (ci.css setzt dort Breite, Abstände und Schrift der alten Seite); die Tabelle wird hier mit den Rollen-Tokens D gestaltet. */
.u-recht-text .akw-speicherdauer-wrap{margin:14px 0 20px;overflow-x:auto;border-radius:var(--radius-md);border:var(--d-kante-breite) solid var(--d-kante);-webkit-overflow-scrolling:touch}
.u-recht-text table.akw-speicherdauer{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;color:var(--d-text-2)}
/* RD-W-08: Zellen brechen auch lange Kennungen (z. B. Befehlsnamen) um — sonst weitete ein einziges unteilbares Wort die Tabelle auf 493 px und der Rahmen wurde zum Scrollbereich ohne
   Tastaturzugang (axe scrollable-region-focusable, Baseline-Befund bei 375 px). */
.u-recht-text table.akw-speicherdauer th,.u-recht-text table.akw-speicherdauer td{overflow-wrap:anywhere;padding:9px 12px;text-align:left;vertical-align:top;border-bottom:var(--d-kante-breite) solid var(--d-kante);color:var(--d-text-2)}
.u-recht-text table.akw-speicherdauer thead th{background:var(--d-glas);font:500 11px/1.4 var(--d-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-text-3)}
.u-recht-text table.akw-speicherdauer tbody th[scope=rowgroup]{padding-top:12px;background:var(--d-glas);font-weight:600;color:var(--d-text)}
.u-recht-text table.akw-speicherdauer .akw-aufbewahrung{display:block;margin-top:2px;font-size:12.5px;color:var(--d-text-3)}

/* Inhaltsverzeichnis (wird nur mit Skript gebaut): neben dem Text mitlaufend, auf schmalen Anzeigen einklappbar. */
.u-inhalt{margin:0 0 28px}
/* RD-W-09: Platz für das Verzeichnis schon vor dem Skript halten (sonst schob es den Rechtstext auf dem Handy um ≈ 72 px nach unten: Lighthouse CLS 0,073).
   Unsichtbar und nicht bedienbar, bis das Skript es füllt; ohne Skript (kein html.js) entfällt es ganz. */
:root.js[data-design="2027"] .u-seite .u-inhalt[hidden]{display:block!important;visibility:hidden} /* stärker als [data-design] .u-seite [hidden] (Z. 12) */
.u-inhalt summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 16px;list-style:none;cursor:pointer;border-radius:var(--radius-md);border:var(--d-kante-breite) solid var(--d-kante-2);background:var(--d-glas);font:500 12px/1.5 var(--d-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-text-2)}
.u-inhalt summary::-webkit-details-marker{display:none}
.u-inhalt summary::after{content:"+";content:"+" / "";font:500 18px/1 var(--d-font-mono);color:var(--d-akzent-text)}
.u-inhalt details[open] summary::after{content:"–";content:"–" / ""}
.u-inhalt ol{display:grid;gap:0;margin:8px 0 0;padding:0;list-style:none}
.u-inhalt a{display:flex;align-items:center;min-height:36px;padding:4px 10px;border-left:2px solid var(--d-kante);font-size:13.5px;line-height:1.35;color:var(--d-text-2);text-decoration:none}
.u-inhalt a:hover{color:var(--d-text);border-left-color:var(--d-ebene-2-kante)}
.u-inhalt a[aria-current="location"]{border-left-color:var(--d-akzent);color:var(--d-text);font-weight:600}

/* ---------- Antwortseiten (Anfrage, Warteliste, Testzugang) ---------- */
.u-antwort-karte{display:flex;gap:clamp(18px,3vw,32px);align-items:flex-start;max-width:760px}
.u-antwort-text{min-width:0;flex:1}
.u-antwort-text .w-lead{margin:0}
.u-antwort-text .u-hinweis{margin-top:16px}
.u-antwort-text .w-ctas{margin-top:24px}
.u-antwort-form{margin-top:24px}
.u-lampe-gross{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--d-akzent);color:var(--d-auf-akzent);box-shadow:0 0 0 8px color-mix(in srgb,var(--d-akzent) 22%,transparent),0 0 44px var(--d-glow);animation:u-zuenden var(--dur-reveal) var(--ease-out) backwards}
.u-lampe-gross .i{width:30px;height:30px;stroke-width:2}
@keyframes u-zuenden{from{transform:scale(.7);filter:brightness(.55)}}
.u-formular{margin-top:28px}
/* Anfrageformular (Partial public.partials.anfrage-formular, eigene Stile per @push): helle Karte auf der Bühne, Schrift fest Graphit (wie auf der Startseite). */
.u-formular .anfrage-card{--d-fokus:var(--ink);max-width:none;margin:0;color:var(--ink);border-radius:var(--radius-xl);padding:clamp(22px,3vw,36px);box-shadow:var(--d-ebene-2-schatten),0 0 120px -60px var(--d-glow)}
.u-formular .anfrage-form input[type=text],.u-formular .anfrage-form input[type=email],.u-formular .anfrage-form input[type=tel],.u-formular .anfrage-form select,.u-formular .anfrage-form textarea{border-radius:var(--radius-md)}
.u-formular .anfrage-btn{min-height:52px;border-radius:var(--radius-md);background:linear-gradient(180deg,#ffc552,#f2a516 62%,#e48e0b);color:#15171c;font-family:var(--d-font-display);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,238,196,.85),0 14px 40px -16px rgba(242,165,22,.8)}
.u-formular .anfrage-btn:hover{box-shadow:inset 0 1px 0 rgba(255,238,196,.85),0 18px 54px -14px rgba(255,150,40,.9)}
.u-formular .anfrage-btn:active{transform:translateY(1px)}
.u-formular .anfrage-fehler{border-radius:var(--radius-md)}
/* RD-W-09 (axe target-size, WCAG 2.5.8): Sprunglinks der Fehlerliste mindestens 24 px hoch. */
.u-formular .anfrage-fehler a{display:inline-flex;align-items:center;min-height:24px}
/* Testzugang-Formulare (bisherige Feldbausteine public.trial.partials.*): Gestaltung D auf Glas; Eingaben bleiben kontrastreich (Kontur ≥ 3 : 1, Fokusring, Fehler mit Zeichen und Balken). */
.u-formular-karte{max-width:640px;padding:clamp(22px,3vw,34px)}
.trial-card{--d-fokus:var(--d-text)}
.trial-form{display:block}
.trial-form label{display:block;font:500 11px/1.4 var(--d-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-2)}
.trial-feld{margin-bottom:16px}
.trial-form input[type=text],.trial-form input[type=email],.trial-form input[type=password]{display:block;width:100%;min-height:48px;margin-top:7px;padding:10px 14px;border:var(--d-kante-breite) solid var(--d-kontur);border-radius:var(--radius-md);background:var(--d-flaeche);font:400 16px/1.5 var(--d-font-body);letter-spacing:0;text-transform:none;color:var(--d-text)}
.trial-form input:focus-visible{outline:2px solid var(--d-fokus);outline-offset:2px}
.trial-form input[aria-invalid="true"]{border-color:var(--d-kritisch);box-shadow:inset 5px 0 0 var(--d-kritisch)}
.trial-row{display:flex;flex-wrap:wrap;gap:0 14px}
.trial-row>.trial-feld{flex:1 1 220px}
.trial-hilfe{display:block;margin-top:6px;font:400 12.5px/1.5 var(--d-font-body);letter-spacing:0;text-transform:none;color:var(--d-text-3)}
.trial-pflicht{margin-left:2px;font-weight:700;color:var(--d-akzent-text)}
.trial-feld-fehler{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font:600 13.5px/1.45 var(--d-font-body);letter-spacing:0;text-transform:none;color:var(--d-kritisch)}
.trial-feld-fehler svg{flex:none;margin-top:2px}
.trial-feld-fehler-zeile{display:block}
.trial-fehler{margin:0 0 18px;padding:12px 16px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--d-kritisch) 9%,transparent);border:1px solid color-mix(in srgb,var(--d-kritisch) 45%,transparent);font-size:14px;color:var(--d-text)}
.trial-fehler ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.trial-fehler a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.trial-check{display:flex!important;gap:10px;align-items:flex-start;font:400 14.5px/1.5 var(--d-font-body)!important;letter-spacing:0!important;text-transform:none!important;color:var(--d-text)!important}
.trial-check input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--d-akzent)}
.trial-check a{color:var(--d-akzent-text);text-decoration:underline;text-underline-offset:2px}
.trial-bedingungen{margin:6px 0 16px;padding:14px 18px;border:1px dashed var(--d-kante-2);border-radius:var(--radius-md);font-size:14px;color:var(--d-text-2)}
.trial-bedingungen strong{display:block;margin-bottom:6px;font:500 11px/1.4 var(--d-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-3)}
.trial-bedingungen ul{margin:0;padding-left:18px;list-style:disc;line-height:1.55}
.trial-hinweis{margin-top:14px;font:500 12px/1.6 var(--d-font-mono);color:var(--d-text-3)}
.trial-btn{width:100%}
.trial-einladung{margin:0 0 18px;padding:12px 16px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--d-akzent) 12%,transparent);border:1px solid color-mix(in srgb,var(--d-akzent) 45%,transparent);font-size:14px;color:var(--d-text)}
/* Honeypot: für Menschen unsichtbar, aber nicht display:none (manche Bots überspringen das). */
.trial-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 404 „Kein Anschluss“ ---------- */
.u-404-buehne{position:relative;isolation:isolate;overflow:clip;margin-top:calc(var(--kopf-h) * -1);padding:calc(var(--kopf-h) + clamp(40px,8vw,120px)) 0 clamp(60px,9vw,140px)}
.u-404-in{position:relative;z-index:1}
.u-404-in .w-ctas{margin-top:34px}
.u-404-motiv{display:block;width:min(100%,620px);max-width:none;height:auto;margin-top:clamp(34px,5vw,64px);overflow:visible}
.u-404-leitung,.u-404-riss{fill:none;stroke:var(--d-akzent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u-404-leitung{filter:drop-shadow(0 0 6px var(--d-glow))}
.u-404-leitung--aus{stroke:var(--d-text-3);stroke-dasharray:2 9;filter:none}
.u-404-lampe{fill:var(--d-akzent);stroke:var(--d-akzent);filter:drop-shadow(0 0 8px var(--d-akzent))}
.u-404-lampe--aus{fill:var(--d-flaeche);stroke:var(--d-text-3);stroke-width:1.5;filter:none}
.u-404-zahl{margin:clamp(20px,3vw,36px) 0 0;font:800 clamp(130px,24vw,330px)/.78 var(--d-font-display);font-stretch:76%;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--d-akzent) 52%,transparent);user-select:none;pointer-events:none}

/* ---------- Anpassungen ---------- */
@media (min-width:1100px){
    :root.js .u-recht-raster{display:grid;grid-template-columns:240px minmax(0,78ch);gap:clamp(32px,5vw,72px);justify-content:center}
    :root.js .u-recht-text{grid-column:2;grid-row:1}
    :root.js .u-inhalt{grid-column:1;grid-row:1;align-self:start;position:sticky;top:calc(var(--kopf-h) + 24px);max-height:calc(100vh - var(--kopf-h) - 48px);overflow:auto;margin:0;padding-right:4px}
    :root.js .u-recht-text{max-width:none}
    .u-404-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(24px,4vw,64px);align-items:start}
    .u-404-in>*{grid-column:1}
    .u-404-in>.u-404-zahl{grid-column:2;grid-row:1/span 5;align-self:center;margin:0}
}
@media (max-width:1099px){
    /* Einspaltiger Seitenkopf: der Aura-Kern rückt aus dem Textbereich (Kicker/Lead über der Aura: Worst-Case-Messung hell 4,3 : 1, Review RD-W-08 M-1). */
    .u-aura{right:-460px;top:-600px}
    .u-uebersicht{grid-template-columns:repeat(2,minmax(0,1fr))}
    .u-szenarien{grid-template-columns:repeat(2,minmax(0,1fr))}
    .u-drops{grid-template-columns:repeat(2,minmax(0,1fr))}
    .u-parallel,.u-szn-kopf,.u-abschluss-karte,.u-split{grid-template-columns:minmax(0,1fr)}
    .u-split-kopf{position:static;margin-bottom:clamp(22px,3vw,40px)}
    .u-werkzeug{grid-template-columns:minmax(0,1fr) auto}
    .u-werkzeug-aktion{grid-column:1/-1}
}
@media (max-width:760px){
    .u-werkzeug{position:static;grid-template-columns:minmax(0,1fr);padding:14px 14px 16px}
    .u-bereich-d summary{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"nr ico . tog" "titel titel titel titel" "beschr beschr beschr beschr" "zaehler zaehler zaehler zaehler";gap:10px 14px;padding:16px}
    .u-bereich-zaehler{justify-content:flex-start}
    .u-fitems{padding:2px 14px 16px}
    .u-szenarien,.u-blaetter,.u-drops{grid-template-columns:minmax(0,1fr)}
    .u-blatt--breit{grid-column:auto}
    .u-blatt dl>div{grid-template-columns:minmax(0,1fr)}
    .u-schritte{padding-left:56px}
    .u-schritte::before{left:17px}
    .u-knoten{left:-56px;width:36px;height:36px;top:18px;border-radius:10px}
    .u-vs thead,.u-tabelle thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
    .u-vs,.u-vs tbody,.u-vs tr,.u-vs th,.u-vs td,.u-tabelle,.u-tabelle tbody,.u-tabelle tr,.u-tabelle th,.u-tabelle td{display:block;width:auto}
    .u-vs tbody th,.u-tabelle tbody th{width:auto;padding:16px 16px 6px;border-top:var(--d-kante-breite) solid var(--d-kante-2)}
    .u-vs td,.u-tabelle td{padding:6px 16px;border-top:0}
    .u-vs td:last-child,.u-tabelle td:last-child{padding-bottom:16px}
    .u-vs td::before,.u-tabelle td::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 10.5px/1.4 var(--d-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-text-3)}
    .u-vs .u-neu{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--d-akzent) 62%,transparent)}
    .u-antwort-karte{flex-direction:column}
    .u-lampe-gross{width:56px;height:56px}
}
@media (max-width:520px){
    .u-uebersicht{grid-template-columns:minmax(0,1fr)}
    .u-fitems{grid-template-columns:minmax(0,1fr)}
    .u-abschluss-aktion .w-knopf{width:100%}
    .u-404-in .w-ctas .w-knopf{width:100%}
    .u-seg-in{display:flex;width:100%}
    .u-seg label{flex:1 1 auto}
    .u-seg label span{width:100%;justify-content:center;padding:0 10px}
}
@media (prefers-contrast:more){
    .u-uk,.u-sz,.u-karte,.u-bereich-d,.u-fitem,.u-vs-box,.u-blatt,.u-abschluss-karte,.u-werkzeug{border-width:2px;border-color:var(--d-kontur)}
    .u-leitung-linie,.u-schritte::before,.u-lampe-gross{box-shadow:none}
    /* RD-W-08: Stufe „Kontrast“ für die Unterseiten — steht HIER (hinter den Grundregeln); in site-2027.css stünde sie davor und verlöre bei gleicher Spezifität (Review N-2). */
    .u-aura,.u-aura--2,.u-recht::before,.u-abschluss-karte::before{display:none}
    .u-recht-text a,.u-krume a,.u-inhalt a{text-decoration:underline;text-underline-offset:3px}
    .u-knopf-klein{border-width:2px}
    .u-formular .anfrage-btn{border:2px solid var(--d-auf-akzent);box-shadow:none}
    .u-formular .anfrage-card{box-shadow:none}
}
@media (prefers-reduced-transparency:reduce){
    /* RD-W-08: Stufe „Transparenz“ für die Unterseiten (Glas wird über die Tokens massiv, ci.css); durchscheinende Schmuckflächen entfallen, die Werkzeugleiste wird deckend. */
    .u-aura,.u-aura--2,.u-recht::before,.u-abschluss-karte::before{display:none}
    .u-werkzeug{background:var(--d-flaeche)}
}
@media (forced-colors:active){
    /* RD-W-08: Karten tragen eine Kontur, Schaltflächen einen Rand, Status-Lampen behalten Form und Farbe (Systemfarben). */
    .u-uk,.u-sz,.u-karte,.u-bereich-d,.u-fitem,.u-vs-box,.u-blatt,.u-abschluss-karte,.u-werkzeug,.u-inhalt summary,.u-seg-in{border:1px solid CanvasText}
    .u-formular .anfrage-btn,.u-knopf-klein{border:1px solid ButtonText}
    .u-lampe{forced-color-adjust:none;background:Highlight}
    .u-lampe--dev{forced-color-adjust:none;background:transparent;border:1.5px solid Highlight}
    .u-404-zahl{-webkit-text-stroke-color:CanvasText}
    .u-404-leitung,.u-404-riss,.u-404-lampe{stroke:CanvasText}
    .u-lampe-gross{forced-color-adjust:none;background:Highlight;color:HighlightText}
    .u-leitung-linie{background:CanvasText}
    .u-uk-fuell{fill:Highlight}
    .u-seg input:checked+span{background:Highlight;color:HighlightText}
}
@media print{
    .u-inhalt,.u-werkzeug,.u-kopf-bg,.u-leitung,.u-aura{display:none!important}
    .u-recht,.u-kopf,.u-404-buehne{margin-top:0;padding-top:0}
    .u-recht-text p,.u-recht-text li{color:#000}
}