/* beglait.de · Produktbereich der KI-Werkbank (Ben, 05.10.2026)
   Dunkles Theme auf dem Produkt-Schwarz, Mint als Akzent. Nur Token aus site.css,
   keine Rohfarben. Geladen auf /ki-werkbank/ und auf der Startseite (Band).
   Vorlage ist die erste Seite des Entwurfs aus PR 51 (Main und Eingang).
   Eigene Zählung für Bewegung (docs/prinzipien.md, Nachtrag 05.10.2026): höchstens
   zwölf @keyframes hier, Schleifen erlaubt, bei reduzierter Bewegung und ohne Skript
   steht alles im Endbild. Die Szene im Kopf ist eine benannte Ausnahme (Kippen,
   Unschärfe, Abdunklung zum Rand über Masken), ihre Zeitleiste läuft in produkt.js. */

/* ---------- Rollen ---------- */
[data-theme="produkt"]{
  --text:var(--produkt-text); --text-muted:var(--produkt-leise); --text-faint:var(--produkt-leise);
  --linie:var(--produkt-linie); --linie-weich:var(--produkt-linie); --linie-stark:var(--produkt-linie-stark);
  --fokus:var(--mint);
  color-scheme:dark;background:var(--produkt-grund);color:var(--produkt-text)}
html:has(> body[data-theme="produkt"]){background:var(--produkt-grund)}
[data-theme="produkt"] :focus-visible{outline-color:var(--mint)}
[data-theme="produkt"] .klein a:not(.knopf):not(.pfeil),[data-theme="produkt"] .text a:not(.knopf):not(.pfeil),[data-theme="produkt"] .zeile-kern a:not(.knopf):not(.pfeil){color:var(--produkt-text);text-decoration-color:var(--produkt-linie-stark)}
[data-theme="produkt"] ::selection{background:var(--mint);color:var(--produkt-grund)}
[data-theme="produkt"] h1,[data-theme="produkt"] h2,[data-theme="produkt"] h3{color:var(--produkt-text)}
[data-theme="produkt"] .linie-oben{border-top:1px solid var(--produkt-linie)}

.p-augenbraue{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.p-etikett{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);white-space:nowrap;line-height:1.4}
.knopf-mint{background:var(--mint);color:var(--produkt-grund)}
.knopf-mint:hover{background:var(--produkt-text)}

/* ---------- Kopf, Menü und Fuß, dunkle Variante ---------- */
body[data-theme="produkt"] .kopf{background:var(--produkt-grund);color:var(--produkt-text);border-bottom-color:var(--produkt-linie)}
body[data-theme="produkt"] .kopf.gescrollt{border-bottom-color:var(--produkt-linie-2)}
body[data-theme="produkt"] .kopf .marke-bild{color:var(--produkt-text)}
body[data-theme="produkt"] .kopf .marke-bild .m-ai,body[data-theme="produkt"] .fuss .marke-bild .m-ai{fill:var(--teal-400)}
body[data-theme="produkt"] .kopf .nav-punkt>a{color:var(--produkt-leise)}
body[data-theme="produkt"] .kopf .nav-punkt>a:hover{color:var(--produkt-text);background:var(--produkt-flaeche-2)}
body[data-theme="produkt"] .kopf .nav-punkt.aktiv>a{color:var(--produkt-text);background:transparent}
body[data-theme="produkt"] .kopf .nav-pfeil{color:var(--produkt-leise)}
body[data-theme="produkt"] .kopf .nav-pfeil:hover,body[data-theme="produkt"] .kopf .nav-klapp:hover .nav-pfeil,body[data-theme="produkt"] .kopf .nav-klapp.geoeffnet .nav-pfeil{color:var(--produkt-text)}
body[data-theme="produkt"] .kopf .klapp{background:var(--produkt-flaeche);border-color:var(--produkt-linie-2)}
body[data-theme="produkt"] .kopf .klapp li+li{border-top-color:var(--produkt-linie)}
body[data-theme="produkt"] .kopf .klapp a:hover,body[data-theme="produkt"] .kopf .klapp a[aria-current="page"]{background:var(--produkt-flaeche-2)}
body[data-theme="produkt"] .kopf .klapp-titel{color:var(--produkt-text)}
body[data-theme="produkt"] .kopf .klapp-satz{color:var(--produkt-leise)}
body[data-theme="produkt"] .kopf .knopf-ink{background:transparent;color:var(--produkt-text);border-color:var(--produkt-linie-stark)}
body[data-theme="produkt"] .kopf .knopf-ink:hover{border-color:var(--produkt-text)}
body[data-theme="produkt"] .kopf-zurueck{background:transparent;color:var(--produkt-text);border-color:var(--produkt-linie-stark)}
body[data-theme="produkt"] .kopf-zurueck:hover{border-color:var(--produkt-text)}
body[data-theme="produkt"] .burger span{background:var(--produkt-text)}
body[data-theme="produkt"] .menue{background:var(--produkt-grund);border-top-color:var(--produkt-linie)}
body[data-theme="produkt"] .menue-liste>li{border-bottom-color:var(--produkt-linie)}
body[data-theme="produkt"] .menue-liste>li>a{color:var(--produkt-text)}
body[data-theme="produkt"] .menue-liste>li>a[aria-current="page"]{color:var(--mint)}
body[data-theme="produkt"] .menue-unter a,body[data-theme="produkt"] .menue-fuss{color:var(--produkt-leise)}
body[data-theme="produkt"] .menue-fuss a{color:var(--produkt-text)}
body[data-theme="produkt"] .menue .knopf-ink{background:var(--mint);color:var(--produkt-grund)}
body[data-theme="produkt"] .fuss{background:var(--produkt-grund);color:var(--produkt-text);border-top-color:var(--produkt-linie)}
body[data-theme="produkt"] .fuss .marke-bild{color:var(--produkt-text)}
body[data-theme="produkt"] .fuss-marke p,body[data-theme="produkt"] .fuss-titel,body[data-theme="produkt"] .fuss-zeile{color:var(--produkt-leise)}
body[data-theme="produkt"] .fuss-adresse,body[data-theme="produkt"] .fuss-liste a{color:var(--produkt-text)}
body[data-theme="produkt"] .fuss-liste a:hover{color:var(--mint)}
body[data-theme="produkt"] .fuss-zeile{border-top-color:var(--produkt-linie)}
body[data-theme="produkt"] .fest-unten{display:none!important}

/* ---------- Kopf: Szene oben, Text unten links wie im Entwurf aus PR 51 ---------- */
.p-held{position:relative;min-height:800px;overflow:hidden}
.p-held-text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:800px;padding-bottom:64px;pointer-events:none}
.p-held-text>*{pointer-events:auto}
.p-pille{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 12px 0 5px;border:1px solid var(--produkt-linie-2);border-radius:var(--r-md);background:var(--produkt-grund);font-size:13.5px;color:var(--produkt-text);text-decoration:none;transition:border-color var(--d-fast) var(--ease)}
.p-pille:hover{border-color:var(--mint)}
.p-pille-marke{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:4px;background:var(--produkt-flaeche-2);color:var(--mint);font-family:var(--mono);font-size:11.5px}
.p-pille svg{width:14px;height:14px;color:var(--produkt-leise)}
.p-titel{margin-top:30px;max-width:860px;font-family:var(--display);font-weight:500;font-size:clamp(42px,6.3vw,84px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.p-ganz{white-space:nowrap}
.p-lead{margin-top:28px;max-width:560px;font-size:clamp(17px,1.32vw,19px);line-height:1.55;color:var(--produkt-leise);text-wrap:pretty}
/* Die Warteliste ist die eine Handlung im Kopf, direkt unter dem Lead (Ben, 06.10.2026) */
.p-lead+.p-pille{margin-top:36px}

/* ---------- Szene: drei Bilder aus dem Entwurf in PR 51 (Eingang.dc.html), Werte 1:1 ---------- */
/* Bühne so breit wie die Seite und 720 px hoch, Drehwinkel und Zoom je Bild wie im
   Original. Die Abdunklung zum Rand lag dort als Fläche über der Bühne, hier ist sie
   dieselbe Rechnung als Maske (Ebenen multipliziert, Grund ist das Produkt-Schwarz).
   Ohne Skript und bei reduzierter Bewegung steht Bild 3, wie im Original. */
.sz{position:absolute;left:0;right:0;top:0;height:720px;overflow:hidden;perspective:1600px;perspective-origin:50% 20%;color:var(--produkt-text);
  -webkit-mask-image:radial-gradient(55% 60% at 12% 82%,rgb(0 0 0 / .08) 0%,black 100%),radial-gradient(80% 70% at 62% 30%,black 35%,rgb(0 0 0 / .2) 100%),linear-gradient(180deg,rgb(0 0 0 / .55) 0%,black 14%,black 42%,rgb(0 0 0 / .07) 74%,transparent 100%);
  -webkit-mask-composite:source-in,source-in;
  mask-image:radial-gradient(55% 60% at 12% 82%,rgb(0 0 0 / .08) 0%,black 100%),radial-gradient(80% 70% at 62% 30%,black 35%,rgb(0 0 0 / .2) 100%),linear-gradient(180deg,rgb(0 0 0 / .55) 0%,black 14%,black 42%,rgb(0 0 0 / .07) 74%,transparent 100%);
  mask-composite:intersect}
.sz-kipp{--s:1;position:absolute;left:58%;top:34%;width:0;height:0;transform-style:preserve-3d}
.sz-kipp1{transform:rotateX(54deg) rotateZ(-17deg) scale(calc(1.08 * var(--s)))}
.sz-kipp2{left:67%;top:41%;transform:rotateX(16deg) rotateY(-16deg) rotateZ(2deg) scale(calc(.94 * var(--s)))}
.sz-kipp3{top:37%;transform:rotateX(34deg) rotateZ(7deg) scale(calc(.86 * var(--s)))}
.sz-ebene{position:absolute;left:0;top:0}
.sz-zoom{position:absolute;left:0;top:0;transform:scale(1.5)}
.sz-kam1{position:absolute;left:0;top:0;transform:translate(250px,140px)}
.sz-spalten{position:absolute;left:-1000px;top:-330px;display:flex;gap:26px;align-items:flex-start}
.sz-spalte{flex:0 0 304px;display:flex;flex-direction:column}
.sz-kopf{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px;font-size:18px;font-weight:500}
.sz-zahl{font-size:15px;font-weight:400;color:var(--produkt-leise)}
.sz-karte{height:118px;margin-bottom:12px;padding:16px 18px;border-radius:14px;background:var(--produkt-flaeche);border:1px solid var(--produkt-linie-2);display:flex;flex-direction:column;gap:6px;position:relative}
.sz-karte>*{flex-shrink:0}
.sz-id{font-family:var(--mono);font-size:12.5px;color:var(--produkt-leise)}
.sz-titel{font-size:18px;line-height:1.35;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:34px}
.sz-marken{display:flex;gap:7px;margin-top:auto}
.sz-marke{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:7px;background:var(--produkt-flaeche-2);border:1px solid var(--produkt-linie);font-family:var(--mono);font-size:12px;color:var(--produkt-leise);white-space:nowrap}
.sz-punkt{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--teal-400)}
.sz-punkt.m{background:var(--mint)}
.sz-punkt.l{background:var(--produkt-leise)}
.sz-punkt.h{background:var(--produkt-netz-1)}
.sz-rolle{position:absolute;right:16px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;background:var(--produkt-flaeche-2);color:var(--produkt-netz-2)}
.sz-brett .sz-karte{filter:blur(2.4px);opacity:.8}
.sz-brett .sz-kopf{filter:blur(1.6px);opacity:.8}
.sz-nachricht{position:absolute;left:-470px;top:-250px;width:940px;padding:28px 32px;border-radius:20px;background:var(--produkt-flaeche);border:1px solid var(--produkt-linie-2)}
.sz-wer-zeile{display:flex;gap:14px;align-items:flex-start}
.sz-avatar{flex:0 0 40px;height:40px;border-radius:11px;background:var(--produkt-flaeche-2);display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--produkt-netz-2)}
.sz-avatar.agent{background:var(--teal);color:var(--produkt-text)}
.sz-wer{font-size:16px;color:var(--produkt-leise)}
.sz-wer span{color:var(--produkt-linie-stark)}
.sz-text{margin-top:4px;font-size:21px;line-height:1.5}
.sz-eingabe{margin:22px 0 0 54px;padding:18px 20px;border-radius:13px;border:1px solid var(--produkt-linie-2);background:var(--produkt-grund);font-size:23px;min-height:30px}
.sz-tippen{display:inline-block;white-space:nowrap}
.sz-an{color:var(--mint)}
.sz-antwort{margin-top:22px}
.sz-mono{font-family:var(--mono)}
.sz-text .sz-mono{color:var(--produkt-netz-2)}
.sz-kam3{position:absolute;left:0;top:0;transform:translate(200px,-45px)}
.sz-e3-reihe{position:absolute;left:-760px;top:-330px;display:flex;gap:28px;align-items:flex-start}
.sz-e3 .sz-karte:not(.sz-neu){opacity:.62}
.sz-platz{height:130px;overflow:visible}
.sz-neu{border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.sz-detail{width:660px;padding:26px 28px 28px;border-radius:18px;background:var(--produkt-flaeche);border:1px solid var(--produkt-linie-2);display:flex;flex-direction:column;gap:18px}
.sz-detail-kopf{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--produkt-leise)}
.sz-trennstrich{color:var(--produkt-linie-stark)}
.sz-detail-titel{font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.sz-chips{display:flex;flex-wrap:wrap;gap:8px}
.sz-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--produkt-linie-2);background:var(--produkt-flaeche-2);font-size:14px;color:var(--produkt-leise);white-space:nowrap}
.sz-chip.sz-mono{font-size:13px}
.sz-chip.wartet{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 30%,transparent)}
.sz-stapel{display:grid}
.sz-stapel>*{grid-area:1/1}
.sz-st1{opacity:0}
.sz-trenner{height:1px;background:var(--produkt-linie)}
.sz-schritte{display:flex;flex-direction:column;gap:16px}
.sz-schritt{display:flex;gap:14px;align-items:flex-start}
.sz-haken{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:13px;background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--mint);margin-top:1px}
.sz-haken svg{width:14px;height:14px}
.sz-sl{font-size:18px;font-weight:500;line-height:1.35}
.sz-sd{font-size:15.5px;line-height:1.45;margin-top:2px;color:var(--produkt-leise)}
.sz-plan{border:1px solid color-mix(in srgb,var(--mint) 30%,transparent);border-radius:14px;background:color-mix(in srgb,var(--mint) 4%,transparent)}
.sz-plan-kopf{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--produkt-linie)}
.sz-plan-kopf>span:first-child{font-size:18px;font-weight:600}
.sz-fassung{font-size:12px;color:var(--produkt-leise);border:1px solid var(--produkt-linie-2);border-radius:5px;padding:1px 6px}
.sz-plan ol{margin:0;padding:14px 18px 4px 40px;display:flex;flex-direction:column;gap:6px;font-size:16.5px;line-height:1.45;list-style:decimal}
.sz-knoepfe{display:flex;gap:10px;padding:12px 18px 18px}
.sz-k{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;border:1px solid var(--produkt-linie-2);font-size:15.5px}
.sz-k.ja{background:var(--mint);border-color:var(--mint);color:var(--produkt-grund);font-weight:600}
.sz-k svg{width:15px;height:15px}
/* Tiefenunschärfe: scharf in der Mitte, weich zum Rand */
.sz-tiefe{position:absolute;inset:0;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:radial-gradient(52% 50% at 60% 36%,transparent 55%,black 100%);mask-image:radial-gradient(52% 50% at 60% 36%,transparent 55%,black 100%)}
.sz:not(.laeuft) .sz-kipp1,.sz:not(.laeuft) .sz-kipp2{display:none}

/* ---------- Die Oberfläche zum Anklicken (App.dc.html) ---------- */
.p-app-abschnitt{position:relative;z-index:3;padding:8px 0 var(--ab)}
.p-unterschrift{margin-top:18px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--produkt-leise)}
.app{position:relative;display:flex;height:700px;background:var(--produkt-flaeche);color:var(--produkt-text);font-size:13.5px;line-height:1.45;border:1px solid var(--produkt-linie-2);border-radius:14px;overflow:hidden;text-align:left}
.app [hidden]{display:none!important}
.app button{font:inherit;color:inherit;cursor:pointer}
.app p{margin:0}
.app-seite{display:flex;flex-direction:column;gap:2px;width:228px;flex:0 0 228px;padding:10px 8px;background:var(--produkt-grund);border-right:1px solid var(--produkt-linie)}
.app-bereich{display:flex;align-items:center;gap:9px;height:34px;padding:0 8px;font-weight:600;letter-spacing:-.01em}
.app-logo{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--teal);color:var(--produkt-text);font-size:11px;font-weight:600}
.app-suche{display:flex;align-items:center;gap:9px;height:32px;margin:4px 0 8px;padding:0 8px;border:1px solid var(--produkt-linie);border-radius:7px;color:var(--produkt-leise)}
.app-suche svg{width:15px;height:15px}
.app-nav{display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--produkt-leise);text-align:left;transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.app .app-nav{color:var(--produkt-leise)}
.app-nav svg{width:15px;height:15px;flex:0 0 15px}
.app .app-nav:hover,.app .app-nav[aria-pressed="true"]{background:var(--produkt-flaeche-2);color:var(--produkt-text)}
.app-gruppe{margin:16px 8px 6px;font-family:var(--mono);font-size:11px;color:var(--produkt-leise)}
.app-liste{list-style:none;margin:0;padding:0}
.app-liste li{display:flex;align-items:center;gap:9px;height:28px;padding:0 8px;color:var(--produkt-leise)}
.app-punkt{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--mint)}
.app-liste li.aus .app-punkt{background:var(--produkt-linie-stark)}
.app-mono{font-family:var(--mono);font-size:12px}
.app-ver{margin-left:auto;font-size:11px;color:var(--produkt-leise)}
.app-plugins .app-ver{margin-left:0}
.app .app-anhaengen{margin-top:auto}
.app-haupt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.app-kopf{display:flex;align-items:center;gap:10px;height:46px;flex:0 0 46px;padding:0 16px;border-bottom:1px solid var(--produkt-linie)}
.app-krume{color:var(--produkt-leise)}
.app-pfeil{width:12px;height:12px;flex:0 0 12px;color:var(--produkt-linie-stark)}
.app-krume2{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--produkt-linie-2);border-radius:11px;font-size:12px;color:var(--produkt-leise);white-space:nowrap}
.app-status .app-punkt{width:6px;height:6px;flex-basis:6px}
.app-tabs{display:none;gap:2px;padding:2px;margin-left:auto;border:1px solid var(--produkt-linie-2);border-radius:8px}
.app .app-tabs button{height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--produkt-leise);font-size:12.5px}
.app .app-tabs button[aria-pressed="true"]{background:var(--produkt-flaeche-2);color:var(--produkt-text)}
.app-koerper{display:flex;flex:1 1 auto;min-height:0}
.app-strom{flex:1 1 auto;min-width:0;overflow-y:auto;padding:18px 22px}
.app-ansicht{display:flex;flex-direction:column;gap:12px;max-width:640px}
.app-ansicht[data-ansicht-inhalt="plugins"]{max-width:820px;gap:14px}
.app-nachricht{align-self:flex-end;max-width:440px;padding:9px 13px;border-radius:10px;background:var(--produkt-flaeche-2);border:1px solid var(--produkt-linie)}
.app-wer{font-size:11.5px;color:var(--produkt-leise);margin-bottom:3px}
.app-schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.app-schritte li{display:flex;align-items:center;gap:10px;height:30px;padding:0 8px;border-radius:7px}
.app-schritte b{font-weight:500;white-space:nowrap}
.app-schritte li>span:last-child{min-width:0;color:var(--produkt-leise);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-haken{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:9px;background:color-mix(in srgb,var(--mint) 13%,transparent);color:var(--mint)}
.app-haken svg{width:11px;height:11px}
.app-plan{border:1px solid color-mix(in srgb,var(--mint) 28%,transparent);border-radius:12px;background:color-mix(in srgb,var(--mint) 4%,transparent);overflow:hidden}
.app-plan-kopf{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--produkt-linie)}
.app-plan-kopf b{font-weight:600}
.app-fassung{font-family:var(--mono);font-size:11px;color:var(--produkt-leise);border:1px solid var(--produkt-linie-2);border-radius:4px;padding:0 5px}
.app-plan-plugin{margin-left:auto;font-size:12px;color:var(--produkt-leise)}
.app-plan ol{margin:0;padding:10px 14px 4px 34px;display:flex;flex-direction:column;gap:6px;list-style:decimal}
.app .app-hinweis{display:flex;gap:9px;margin:8px 14px 12px;padding:9px 11px;border-radius:8px;background:var(--produkt-grund);border:1px solid var(--produkt-linie);font-size:12.5px;color:var(--produkt-leise)}
.app-hinweis svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px;color:var(--mint)}
.app-hinweis b{color:var(--produkt-text);font-weight:500}
.app-entscheid{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.app-knopf{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border:1px solid var(--produkt-linie-stark);border-radius:8px;background:transparent;transition:opacity var(--d-fast) var(--ease)}
.app .app-knopf{color:var(--produkt-text)}
.app-knopf svg{width:14px;height:14px}
.app .app-knopf.ja{border-color:var(--mint);background:var(--mint);color:var(--produkt-grund);font-weight:600}
.app .app-knopf.hell{border-color:var(--produkt-text);background:var(--produkt-text);color:var(--produkt-grund);font-weight:600}
.app-knopf:hover{opacity:.88}
.app-folge{display:flex;flex-direction:column;gap:1px}
.app-zeile{display:flex;gap:10px;padding:7px 8px}
.app-zeile b{display:block;font-weight:500}
.app-zeile div>span{display:block;color:var(--produkt-leise);font-size:12.5px}
.app-zeile .app-balken{height:3px;margin-top:8px;border-radius:2px;background:var(--produkt-linie-2)}
.app-zeile .app-balken span{width:50%;height:3px;border-radius:2px;background:var(--mint)}
.app-kreis{width:18px;height:18px;flex:0 0 18px;border-radius:9px;border:2px solid color-mix(in srgb,var(--mint) 25%,transparent);border-top-color:var(--mint)}
.app-kreuz{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:9px;background:var(--produkt-flaeche-2);color:var(--produkt-leise)}
.app-kreuz svg{width:10px;height:10px}
.app .app-zurueck{align-self:flex-start;height:28px;padding:0 10px;border:0;background:transparent;color:var(--produkt-leise);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.app-ansicht-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.app-ansicht-kopf>div{flex:1 1 260px}
.app-ueber{font-size:17px;font-weight:600;letter-spacing:-.01em}
.app-ueber.klein{font-size:13.5px}
.app-unter{color:var(--produkt-leise)}
.app-plugins .app-unter{font-size:12.5px}
.app-blatt{display:flex;flex-wrap:wrap;gap:18px;padding:14px;border:1px solid color-mix(in srgb,var(--mint) 28%,transparent);border-radius:12px;background:color-mix(in srgb,var(--mint) 4%,transparent)}
.app-ordner{margin:0;flex:1 1 240px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--produkt-leise);white-space:pre;overflow-x:auto}
.app-blatt-text{flex:1 1 220px;display:flex;flex-direction:column;gap:10px}
.app-blatt-text .app-entscheid{padding:0;margin-top:auto}
.app-plugins{list-style:none;margin:0;padding:0;border:1px solid var(--produkt-linie);border-radius:10px;overflow:hidden}
.app-plugins li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--produkt-linie)}
.app-plugins li:last-child{border-bottom:0}
.app-plugins li>div{flex:1 1 280px;min-width:0}
.app-plugins li>div>p:first-child{display:flex;align-items:center;gap:8px}
.app-art{font-size:11px;color:var(--produkt-leise);border:1px solid var(--produkt-linie-2);border-radius:4px;padding:0 5px}
.app-schalter{display:flex;align-items:center;justify-content:flex-start;width:34px;height:20px;padding:2px;border:0;border-radius:10px;background:var(--produkt-linie-2);transition:background-color var(--d-fast) var(--ease)}
.app-schalter span{width:16px;height:16px;border-radius:8px;background:var(--produkt-leise)}
.app-schalter[aria-pressed="true"]{justify-content:flex-end;background:var(--teal-400)}
.app-schalter[aria-pressed="true"] span{background:var(--produkt-text)}
.app-detail{width:260px;flex:0 0 260px;padding:16px;border-left:1px solid var(--produkt-linie);display:flex;flex-direction:column;gap:12px;font-size:12.5px}
.app-detail .app-gruppe{margin:0}
.app-detail dl{margin:0;display:flex;flex-direction:column;gap:12px}
.app-detail dl div{display:flex;justify-content:space-between;gap:10px}
.app-detail dt{color:var(--produkt-leise)}
.app-detail dd{margin:0;text-align:right;white-space:nowrap}
.app-eingabe{display:flex;align-items:center;gap:8px;margin:0 16px 14px;padding:6px 6px 6px 12px;border:1px solid var(--produkt-linie-2);border-radius:10px;background:var(--produkt-flaeche-2);color:var(--produkt-leise)}
.app-eingabe>span:first-child{flex:1 1 auto;min-width:0;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-senden{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:7px;background:var(--produkt-flaeche)}
.app-senden svg{width:14px;height:14px}
.app-ein{animation:p-ein 380ms cubic-bezier(.16,1,.3,1) both}
@keyframes p-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Prinzip und Sicherheit ---------- */
.p-prinzip{padding:clamp(96px,12vw,150px) 0}
.p-etikett-zeile{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;color:var(--produkt-leise)}
.p-etikett-zeile b{font-weight:500;color:var(--produkt-text)}
.p-h2{margin-top:34px;max-width:1040px;font-family:var(--display);font-size:clamp(34px,4.6vw,64px);line-height:1.06;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.p-licht2{display:block}
.p-mint{color:var(--mint)}
.p-prinzip .p-lead{margin-top:22px;max-width:640px}
.p-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--produkt-linie);border-bottom:1px solid var(--produkt-linie)}
.p-drei>div{padding:28px 28px 30px 0;display:flex;flex-direction:column;gap:8px}
.p-drei>div+div{padding-left:28px;border-left:1px solid var(--produkt-linie)}
.p-drei svg{width:28px;height:28px;color:var(--mint)}
.p-drei h3{margin-top:10px;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.012em}
.p-drei p{color:var(--produkt-leise);font-size:15px;line-height:1.6}
.p-sicherheit{padding:0 0 var(--ab)}
.p-h3{margin-top:24px;max-width:28ch;font-family:var(--display);font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.02em;font-weight:500;text-wrap:balance}
.p-sicherheit .p-lead{margin-top:20px;max-width:760px}
/* Beim Scrollen wie im Entwurf: Oberfläche richtet sich auf, Überschrift hellt auf, Absätze steigen */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .p-app-kipp{transform-origin:50% 0%;animation:p-kipp linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    .p-licht{animation:p-licht linear both;animation-timeline:view();animation-range:cover 16% cover 26%}
    .p-licht2{animation-range:cover 26% cover 36%}
    .p-auf{animation:p-auf linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes p-kipp{from{transform:perspective(1900px) rotateX(14deg) scale(.95);opacity:.55}to{transform:none;opacity:1}}
@keyframes p-licht{from{color:var(--produkt-leise)}to{color:var(--produkt-text)}}
@keyframes p-auf{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Ende: Netz, Satz und Warteliste ---------- */
.p-ende{position:relative;overflow:hidden}
/* Das Netz liegt hinter dem ganzen Abschnitt. Die Textebene darüber fängt nur Zeiger ab, wo
   Text, Formularfelder und Links stehen, der Rest der Fläche gehört dem Netz. */
.p-ende-innen{position:relative;z-index:1;padding-top:var(--ab);padding-bottom:var(--ab);pointer-events:none}
.p-ende-innen>*{max-width:560px}
.p-ende-satz,.p-warte :is(h2,.lead,.fehler-hinweis,label,.klein,input,button,a){pointer-events:auto}
.p-warte label{align-self:flex-start}
.p-ende-satz{font-family:var(--display);font-weight:500;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-0.03em;max-width:11ch}
.p-warte{margin-top:64px}
.p-warte .h3{font-size:24px}
.p-warte .lead{margin-top:12px;color:var(--produkt-leise);font-size:18px}
.p-warte .formular{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.p-warte label{font-size:15px;color:var(--produkt-leise)}
.p-warte-zeile{display:flex;gap:12px;flex-wrap:wrap}
.p-warte input[type="email"]{flex:1 1 260px;min-width:0;height:48px;padding:0 14px;border:1px solid var(--produkt-linie-stark);border-radius:var(--r-md);background:var(--produkt-flaeche);color:var(--produkt-text);font:inherit;font-size:16px}
.p-warte input[type="email"]:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.p-warte .klein{color:var(--produkt-leise);margin-top:8px;max-width:38em}
.p-warte .klein a{color:var(--produkt-text);text-decoration:underline;text-underline-offset:3px}
.p-warte .fehler-hinweis{color:var(--produkt-text);border:1px solid var(--produkt-linie-stark);border-radius:var(--r-md);padding:12px 14px;font-size:15px}
.p-warte .fehler-hinweis a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.p-warte .feld-fehler{flex-basis:100%;font-size:14px;color:var(--produkt-text)}
.p-warte input[aria-invalid="true"]{border-color:var(--produkt-text)}

/* ---------- Kurze Seiten der Warteliste ---------- */
.p-kurz{padding:clamp(64px,12vh,140px) 0;min-height:60vh}
.p-kurz-innen{max-width:640px}
.p-kurz .h1{margin-top:20px}
.p-kurz .lead{margin-top:24px;color:var(--produkt-leise)}
.p-kurz .klein{margin-top:16px;color:var(--produkt-leise)}
.p-kurz .klein a{color:var(--produkt-text);text-decoration:underline;text-underline-offset:3px}
.p-kurz-form{margin-top:32px}
.p-kurz-weiter{margin-top:40px}
.p-kurz .pfeil{color:var(--mint)}

/* ---------- Netz ---------- */
.netz{position:absolute;inset:0;overflow:hidden;--netz-deckkraft:1}
.netz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Wo das Netz auf den Zeiger reagiert (Klasse lebt, nur mit Skript und ohne reduzierte
   Bewegung), ersetzt ein Haarlinien-Ring am Zeiger den Mauszeiger, den die Ebene zeichnet */
.netz.lebt canvas:last-of-type{cursor:none}
.netz-knoten{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--produkt-text);pointer-events:none}
.netz-knoten.offen{background:transparent;border:1px dashed var(--mint)}
/* Angehängtes Plugin: kleine Karte im Stil der Plugin-Liste der Oberfläche, setzt sich in 320 ms */
.netz-plugin{position:absolute;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--produkt-linie-stark);border-radius:8px;background:var(--produkt-flaeche-2);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)}
.netz-plugin.da{opacity:1;transform:translate(-50%,-50%)}
.netz-plugin.weg{opacity:0;transform:translate(-50%,-50%) scale(.96)}
.netz-plugin .app-mono{color:var(--produkt-text)}
.netz-plugin .app-ver{margin-left:0}

/* ---------- Band auf der Startseite ---------- */
.p-band{position:relative;overflow:hidden}
/* Wie am Ende der Produktseite: Das Netz liegt hinter dem ganzen Band, die Textebene fängt
   nur über Etikett, Zeile und Link Zeiger ab. */
.p-band-innen{position:relative;z-index:1;display:grid;grid-template-columns:7fr 5fr;gap:var(--rinne);align-items:center;padding-top:72px;padding-bottom:72px;pointer-events:none}
.p-band-innen :is(.p-etikett,.p-band-zeile,.p-band-link){pointer-events:auto}
.p-band-zeile{margin-top:20px;font-family:var(--display);font-weight:500;font-size:36px;line-height:1.15;letter-spacing:-0.02em;max-width:22ch;text-wrap:balance}
.p-band-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--mint);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.p-band-link:hover{color:var(--produkt-text)}
.p-band-link svg{width:16px;height:16px}

/* ---------- Glas hinter dem Text (Band und Ende) ----------
   Ben, 06.10.2026: „hinter der Schrift einen starken Schatten oder Glasmorph“. Vom linken Rand
   bis hinter den Text liegt eine Glasfläche aus dem Grund der Seite, die das Netz weich zeichnet
   und rechts vom Text in einem breiten Übergang in das Netz ausläuft. Klicks gehen durch das
   Glas: Plugin und Fäden entstehen dahinter und bleiben sichtbar, nur deutlich im Hintergrund.
   Ben, 06.10.2026 spät: erst „2/3 verdunkelt mit Übergang“, zuletzt „Mach doch 50% durchlassen“.
   Grund zu 40 % und Helligkeit 83 % lassen die Hälfte durch, 4 px Unschärfe rücken es
   nach hinten. Benannte Ausnahme zur Regel „Glas nur in der Kopfzeile“, docs/prinzipien.md. */
.p-band-innen{--glas-text:440px;--glas-rand:280px}
.p-ende-innen{--glas-text:560px;--glas-rand:280px}
.p-band-innen::before,.p-ende-innen::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-50vw;width:calc(50vw + var(--rand) + var(--glas-text) + var(--glas-rand));background:color-mix(in srgb,var(--produkt-grund) 40%,transparent);-webkit-backdrop-filter:blur(4px) brightness(.83);backdrop-filter:blur(4px) brightness(.83);-webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--glas-rand)),transparent);mask-image:linear-gradient(90deg,black calc(100% - var(--glas-rand)),transparent);pointer-events:none}

/* ---------- Übergang von hell nach dunkel ---------- */
/* Steht für alle Seiten in site.css (Abschnitt „Übergänge zwischen Seiten“): Die Werkbank steigt
   wie ein Vorhang über die helle Seite und zieht sich beim Verlassen nach oben weg. Der frühere
   Weg, auf dem das Band zur Produktseite aufwuchs, zeigte einen Moment nur Schwarz und ist raus. */

/* ---------- Breiten ---------- */
@media (max-width:1080px){.app-detail{display:none!important}}
@media (max-width:1023px){
  .p-band-innen{grid-template-columns:1fr;gap:24px}
  .netz{--netz-deckkraft:.62}
}
@media (max-width:760px){
  /* wie im Original: alle drei Bilder mit eigenem Zoom fürs Handy */
  .sz-kipp{--s:.55;left:56%;top:20%}.sz-kipp2{--s:.36;left:50%;top:24%}
  .p-held,.p-held-text{min-height:760px}
  .p-held-text{padding-bottom:48px}
  /* Auf dem Handy wächst die Oberfläche mit dem Inhalt, nichts liegt unter dem Rand */
  .app{height:auto}.app-strom{overflow:visible}
  .app-seite,.app-krume,.app-pfeil,.app-status{display:none!important}
  .app-tabs{display:inline-flex}
  .app-strom{padding:14px}
  .p-drei{grid-template-columns:1fr}
  .p-drei>div,.p-drei>div+div{padding:24px 0;border-left:0}
  .p-drei>div+div{border-top:1px solid var(--produkt-linie)}
  .app-plan-plugin{display:none}
  /* Auf dem Handy liegt das Netz unter dem Text statt dahinter, so bleibt jede Zeile lesbar */
  .p-band .netz{top:auto;height:200px;--netz-deckkraft:.8}
  .p-band-innen{padding-bottom:224px}
  .p-ende .netz{top:auto;height:280px;--netz-deckkraft:.8}
  .p-ende-innen{padding-bottom:304px}
  .p-band-innen::before,.p-ende-innen::before{display:none}
}
@media (max-width:639px){
  .p-band-innen{padding-top:48px;padding-bottom:224px}.p-band-zeile{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .app-ein{animation:none}
  .netz-plugin{transition:none}
}