/* ZeroLog Unterseiten im Kristall-Design (Welle 2, 24.10.2026). EINE Datei fuer alle Unterseiten:
   Kopf und Fuss (Markup aus server/seiten-huelle.js, kristallKopf/kristallFuss), Buehne mit wachsendem
   Glasobjekt, ruhige deckende Lesebausteine und die wenigen Teile, die nur eine Seite braucht (unten,
   je Abschnitt mit Seitenpraefix). Laedt nach landing-v4.css und kristall-tokens.css; Farben nur aus
   --zl-k-* und den --m-* unten. Vorlage: C:\tmp\zl-redesign-kristall\unterseiten\muster.css. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(/fonts/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(/fonts/7cHqv4kjgoGqM7E3_-gs51os.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(/fonts/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2')}

:root{
  --m-grund:var(--zl-k-nacht);
  --m-flaeche:#0a0d24;
  --m-flaeche-2:#10142f;
  --m-text:#f2f2f0;
  --m-leise:#b9bccb;
  --m-dim:#9a9db0;
  --m-linie:rgba(242,242,240,.12);
  --m-linie-stark:rgba(242,242,240,.24);
  --m-pad:clamp(16px,4.4vw,64px);
  /* 73 px wie der Kopf der Startseite: dort landet der Produkt-Zoom (landing-v4.js LANDEPUNKT 145/121). */
  --m-kopf-h:73px;
  --m-mass:38rem;
  --m-kristall:min(40vw,74svh);
  --m-h1:clamp(2.25rem,4.6vw,4.25rem);
  --m-h2:clamp(1.625rem,2.6vw,2.375rem);
  --m-h3:1.1875rem;
  --m-body:clamp(1.0625rem,1vw,1.1875rem);
  --m-klein:.9375rem;
  --m-font:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --m-mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --m-ease:cubic-bezier(.23,1,.32,1);
  --m-ui:.2s;
  --m-wachsen:.7s;
  color-scheme:dark;
}
html{background:var(--m-grund);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--m-kopf-h) + 16px)}
body.k-seite{margin:0;background:var(--m-grund);color:var(--m-text);font:400 var(--m-body)/1.5 var(--m-font);
  font-kerning:normal;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility;overflow-x:clip}
.k-seite img{display:block;max-width:100%;height:auto}
.k-seite a{color:var(--zl-k-akzent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.k-seite a:hover{color:var(--zl-k-cyan-hell)}
.k-seite :focus-visible{outline:2px solid var(--zl-k-akzent);outline-offset:3px;border-radius:6px}
.k-seite h1,.k-seite h2,.k-seite h3{margin:0;font-weight:600;hyphens:none;text-wrap:balance;line-height:1.12}
.k-seite p{margin:0}
.k-seite code,.k-seite kbd,.k-seite pre{font-family:var(--m-mono);font-size:.875em}
.k-seite .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.k-seite .skip{position:absolute;left:12px;top:-80px;z-index:60;padding:12px 16px;background:var(--m-text);color:#020619;border-radius:8px;font-weight:600;text-decoration:none}
.k-seite .skip:focus{top:12px}

/* ---------- Kopfleiste (eine Quelle: server/seiten-huelle.js kristallKopf) ---------- */
.m-top{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:24px;height:var(--m-kopf-h);padding:0 var(--m-pad);
  background:var(--zl-k-nacht);border-bottom:1px solid var(--m-linie)}
.m-top::after{content:"";position:absolute;inset:auto 0 -1px;height:1px;background:var(--zl-k-kopf-linie);pointer-events:none}
.k-seite .m-brand{min-width:44px;min-height:44px;display:flex;align-items:center;gap:10px;color:var(--m-text);text-decoration:none;font-weight:600;font-size:1.0625rem}
.k-seite .m-brand:hover{color:var(--m-text)}
.m-brand img{border-radius:8px}
.m-nav{display:flex;gap:2px}
.k-seite .m-nav a,.k-seite .m-mobil a{color:var(--m-leise);text-decoration:none;font-size:var(--m-klein);font-weight:500;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;
  transition:color var(--m-ui) ease}
.k-seite .m-nav a:hover,.k-seite .m-mobil a:hover{color:var(--m-text)}
.k-seite .m-nav a[aria-current="page"]{color:var(--m-text);box-shadow:inset 0 -2px 0 var(--zl-k-akzent)}
.m-end{margin-left:auto;display:flex;align-items:center;gap:12px}
.m-badge{font-size:.8125rem;color:var(--zl-k-cyan-hell);border:1px solid rgba(156,240,255,.32);border-radius:999px;padding:3px 10px;white-space:nowrap}
.m-lang{display:flex;border:1px solid var(--m-linie-stark);border-radius:8px;overflow:hidden}
.k-seite .m-lang a,.m-lang button{display:inline-flex;align-items:center;justify-content:center;font:500 .8125rem/1 var(--m-font);color:var(--m-leise);background:none;border:0;
  min-width:44px;min-height:44px;cursor:pointer;text-decoration:none}
.k-seite .m-lang a[aria-current],.m-lang button[aria-pressed="true"]{color:#020619;background:var(--m-text)}
.k-seite .m-signin{color:var(--m-text);text-decoration:none;font-weight:500;font-size:var(--m-klein);padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;border:1px solid var(--m-linie-stark)}
.k-seite .m-signin:hover{color:var(--m-text);border-color:var(--zl-k-akzent)}
.m-menu{display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;color:var(--m-text);background:none;border:1px solid var(--m-linie-stark);border-radius:8px;font:500 var(--m-klein)/1 var(--m-font);cursor:pointer}
.m-menu-ico{width:16px;height:10px;border-block:2px solid currentColor;position:relative}
.m-menu-ico::after{content:"";position:absolute;inset:2px 0 auto;height:2px;background:currentColor}
.m-mobil{position:fixed;top:var(--m-kopf-h);left:0;right:0;display:flex;flex-direction:column;padding:8px var(--m-pad) 16px;background:var(--zl-k-nacht);border-bottom:1px solid var(--m-linie-stark)}
.m-mobil[hidden]{display:none}
.k-seite .m-mobil a{min-height:48px;font-size:1.0625rem;border-bottom:1px solid var(--m-linie);border-radius:0}

/* ---------- Buehne: Lesespalte + Kristallspalte ---------- */
.k-seite main{padding-top:var(--m-kopf-h)}
.m-buehne{display:grid;grid-template-columns:minmax(0,1fr) var(--m-kristall);gap:clamp(24px,4vw,72px);padding:0 var(--m-pad);max-width:1440px;margin:0 auto}
.m-lesen{min-width:0;padding-bottom:clamp(48px,8vw,120px)}
.m-seite{position:sticky;top:var(--m-kopf-h);height:calc(100svh - var(--m-kopf-h));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}

/* Glasobjekt: fuenf Wachstumsstufen uebereinander, data-stufe waehlt. Grund der Bilder ist #000, darum screen. */
.m-kristall{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.m-kristall::before{content:"";position:absolute;inset:8% 4% 0;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--zl-k-glow-rgb),.26),rgba(30,155,255,.08) 60%,transparent);
  animation:m-atem 7s ease-in-out infinite alternate}
.m-kristall img{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:0;transform:scale(.94) translateY(2%);
  transition:opacity var(--m-wachsen) var(--m-ease),transform calc(var(--m-wachsen) * 1.3) var(--m-ease)}
.m-kristall[data-stufe="1"] .k1,.m-kristall[data-stufe="2"] .k2,.m-kristall[data-stufe="3"] .k3,
.m-kristall[data-stufe="4"] .k4,.m-kristall[data-stufe="5"] .k5{opacity:1;transform:none}
@keyframes m-atem{from{opacity:.65;transform:scale(.96)}to{opacity:1;transform:scale(1.03)}}
.m-stufen{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.m-stufen li{width:28px;height:3px;border-radius:2px;background:var(--m-linie-stark);transition:background var(--m-ui) ease}
.m-stufen li.an{background:var(--zl-k-spektrum)}

/* ---------- Kopfbereich ---------- */
.m-kopf{min-height:calc(100svh - var(--m-kopf-h));display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(40px,6vw,80px) 0}
.m-auge{font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--zl-k-cyan-hell)}
.m-kopf h1{font-size:var(--m-h1);letter-spacing:-.015em;max-width:15ch}
.m-kopf h1 .m-licht{background:var(--zl-k-spektrum-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-lead{font-size:clamp(1.125rem,1.4vw,1.3125rem);color:var(--m-leise);max-width:var(--m-mass)}
.m-aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.k-seite .m-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font-weight:600;font-size:1rem;text-decoration:none;
  color:#020619;background:var(--m-text);border:1px solid transparent;transition:transform .14s var(--m-ease),background var(--m-ui) ease}
.k-seite .m-knopf:hover{color:#020619;background:#fff}
.k-seite .m-knopf:active{transform:scale(.97)}
.k-seite .m-knopf.leise{color:var(--m-text);background:transparent;border-color:var(--m-linie-stark)}
.k-seite .m-knopf.leise:hover{color:var(--m-text);border-color:var(--zl-k-akzent)}

/* Produktseiten: das Icon sitzt dort, wo der Zoom der Startseite landet (Kopf 73 px + 72 px, Telefon + 48 px).
   Groesse und Halo kommen aus produkt.css (.p-icon), hier nur die Lage. */
.m-kopf.p-kopf{justify-content:flex-start;padding-top:72px}
.m-kopf.p-kopf .p-icon{margin:0}

/* ---------- Ruhiger, deckender Lesetext ---------- */
.m-abschnitt{margin-top:clamp(40px,6vw,88px);scroll-margin-top:calc(var(--m-kopf-h) + 8px)}
.m-abschnitt > h2{font-size:var(--m-h2);letter-spacing:-.01em;margin-bottom:14px;max-width:24ch}
.m-abschnitt > .m-auge{display:block;margin-bottom:10px}
.m-abschnitt > p{max-width:var(--m-mass);color:var(--m-leise)}
.m-abschnitt > p + p{margin-top:.8em}
.m-flaeche{background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-l);padding:clamp(20px,2.6vw,32px);box-shadow:var(--zl-k-kante)}
.m-flaeche p{color:var(--m-leise);max-width:var(--m-mass)}
.m-flaeche h3{font-size:var(--m-h3);margin-bottom:6px}
.m-liste{max-width:var(--m-mass);display:grid;gap:12px;margin:0;padding:0;list-style:none}
.m-liste > li{background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);padding:18px 22px}
.m-liste > li h3{font-size:var(--m-h3);margin-bottom:4px}
.m-liste > li p{color:var(--m-leise)}
.m-regeln{margin:0;padding:0;list-style:none;display:grid;gap:0;max-width:var(--m-mass)}
.m-regeln li{padding:14px 0 14px 26px;border-top:1px solid var(--m-linie);color:var(--m-leise);position:relative}
.m-regeln li::before{content:"";position:absolute;left:2px;top:1.15em;width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--zl-k-akzent)}
.m-regeln h3{font-size:var(--m-h3);color:var(--m-text);margin-bottom:4px}
.k-seite .m-link{display:inline-flex;align-items:center;min-height:44px}
.m-hinweis{font-size:var(--m-klein);color:var(--m-dim);max-width:var(--m-mass)}
.m-trenner{height:1px;border:0;background:var(--zl-k-trenner);margin:clamp(40px,6vw,80px) 0 0}
.m-notiz{max-width:var(--m-mass);margin-top:14px;display:grid;gap:.8em}
.m-abschnitt .p-text{max-width:var(--m-mass);color:var(--m-leise)}
.m-abschnitt .p-text + .p-text{margin-top:.8em}

/* Codezeilen */
.m-term{background:#050716;border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);overflow:hidden}
.m-term-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--m-linie);font:400 .8125rem/1.4 var(--m-mono);color:var(--m-dim)}
.m-term pre{margin:0;padding:16px;overflow-x:auto;line-height:1.7;font-size:.875rem;color:var(--m-text)}
.m-term .c{color:var(--m-dim)}
.m-term .p{color:var(--zl-k-cyan-hell);user-select:none}

/* Tabelle ohne Gitter */
.m-tab{width:100%;max-width:var(--m-mass);border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.m-tab th,.m-tab td{padding:.6em 1em .6em 0;text-align:left;border-bottom:1px solid var(--m-linie);font-weight:400;color:var(--m-leise)}
.m-tab thead th,.m-tab th[scope=row]{color:var(--m-text);font-weight:600}
.m-tab thead th{font-size:var(--m-klein);font-weight:500;color:var(--m-dim);border-bottom-color:var(--m-linie-stark)}
.m-tab caption{text-align:left;color:var(--m-leise);font-size:var(--m-klein);padding-bottom:8px}
.m-tab td.z,.m-tab th.z{text-align:right;padding-right:0}
.m-tab-rahmen{max-width:var(--m-mass);overflow-x:auto;margin-top:20px}

/* Kopierknopf (Logik: produkt.js, data-kopieren -> id des pre) */
.k-kopie{font:500 .875rem/1 var(--m-font);color:var(--m-text);background:transparent;border:1px solid var(--m-linie-stark);border-radius:8px;min-height:44px;min-width:44px;padding:0 14px;cursor:pointer;
  transition:border-color var(--m-ui) ease,transform .12s var(--m-ease)}
.k-kopie:active{transform:scale(.97)}
.k-kopie[data-erledigt]{border-color:var(--zl-k-cyan-hell);color:var(--zl-k-cyan-hell)}
@media (hover:hover) and (pointer:fine){ .k-kopie:hover{border-color:var(--zl-k-akzent)} }
.m-term-kopf .k-kopie{margin:-6px 0}
.k-schritte{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;max-width:var(--m-mass)}
.k-schritte .m-term-kopf{font-family:var(--m-font);font-size:var(--m-klein);color:var(--m-leise)}
.k-schritte pre,.k-pruef pre{white-space:pre-wrap;overflow-wrap:anywhere}
.k-pruef{max-width:var(--m-mass);margin-top:10px}

/* Beispielfenster (Produktseiten): Verlauf einer Sitzung, Diff */
.k-beispiel{margin:14px 0 0;max-width:var(--m-mass)}
.k-beispiel .m-term-kopf{font-family:var(--m-font);font-size:var(--m-klein);color:var(--m-leise)}
.k-verlauf{margin:0;padding:14px 18px 6px;list-style:none;display:grid;gap:8px;font-family:var(--m-font);font-size:var(--m-klein)}
.k-verlauf li{color:var(--m-leise);padding-left:14px;border-left:2px solid var(--m-linie-stark)}
.k-verlauf .du{color:var(--m-text);border-left-color:var(--zl-k-akzent)}
.k-verlauf .karte{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;border-left-color:var(--zl-k-cyan-hell)}
.k-verlauf .karte strong{color:var(--m-text)}
.k-verlauf .haken,.k-verlauf .ziel{color:var(--zl-k-cyan-hell);border-left-color:var(--zl-k-cyan-hell)}
.k-tasten{display:inline-flex;gap:8px}
.k-tasten span{border:1px solid var(--m-linie-stark);border-radius:8px;padding:4px 12px;color:var(--m-text)}
.k-beispiel pre{margin:0;padding:6px 18px 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.k-beispiel .alt{color:var(--m-dim)}
.k-beispiel .neu{color:var(--zl-k-cyan-hell)}
.k-beispiel .weg{color:#ffb4c4}

/* Kennzahlen-Karten und Dateiangaben */
.m-liste.k-fakten{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:none}
.k-marke{display:block;font:600 1.375rem/1.2 var(--m-mono);color:var(--zl-k-cyan-hell);margin-bottom:6px;overflow-wrap:anywhere}
.k-datei{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:14px 0 0;max-width:var(--m-mass)}
.k-datei dt{color:var(--m-dim);font-size:var(--m-klein)}
.k-datei dd{margin:0;min-width:0}
.k-datei .summe{font-family:var(--m-mono);font-size:.8125rem;overflow-wrap:anywhere;color:var(--m-text)}
.k-u3{margin:26px 0 4px;font-size:var(--m-h3)}
.k-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:14px;max-width:56rem}
.k-zwei h3 small{display:block;color:var(--m-leise);font-weight:400;font-size:var(--m-klein);margin-top:2px}
.k-zwei .m-knopf{margin:14px 0 6px}
.k-schritt{margin:12px 0 0;padding-left:1.3em;color:var(--m-leise);display:grid;gap:8px;max-width:var(--m-mass)}

/* Familie (alle Produktseiten). Die Liste heisst p-familie-liste: test/produktseiten.mjs liest sie. */
.k-seite .p-familie-liste{margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.k-seite .p-familie-liste a{display:flex;gap:14px;align-items:center;min-height:72px;padding:14px 18px;border-radius:var(--zl-k-radius-m);background:var(--m-flaeche);border:1px solid var(--m-linie);
  color:var(--m-text);text-decoration:none;transition:border-color var(--m-ui) ease}
.k-seite .p-familie-liste a:hover{border-color:var(--zl-k-glas-rand-stark);color:var(--m-text)}
.p-familie-liste strong{display:block;font-weight:600}
.p-familie-liste span span{display:block;color:var(--m-leise);font-size:var(--m-klein)}
.p-familie-liste img{flex:none;width:40px;height:40px;border-radius:10px}

/* ---------- Fuss ---------- */
.m-fuss{border-top:1px solid var(--m-linie);padding:32px var(--m-pad) 48px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;color:var(--m-dim);font-size:var(--m-klein)}
.m-fuss nav{display:flex;flex-wrap:wrap;gap:4px 8px}
.k-seite .m-fuss a{color:var(--m-leise);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.k-seite .m-fuss a:hover{color:var(--m-text)}

/* ======================= Seitenteile (nur eine Seite) ======================= */

/* /extension: ruhiges Panel-Beispiel statt Figur */
.ex-bild{margin:22px 0 0;max-width:36rem;background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);overflow:hidden;box-shadow:var(--zl-k-kante)}
.ex-bild-kopf{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--m-linie);font-size:var(--m-klein);color:var(--m-leise)}
.ex-fenster{display:grid;grid-template-columns:1fr 1.05fr}
.ex-seite{padding:18px;display:grid;gap:10px;align-content:start;border-right:1px solid var(--m-linie)}
.ex-seite b{font-size:1.125rem}
.ex-seite .zeile{display:block;height:8px;border-radius:4px;background:var(--m-linie)}
.ex-seite .zeile.kurz{width:60%}
.ex-seite .knopf{justify-self:start;margin-top:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--m-linie-stark);font-size:var(--m-klein)}
.ex-leiste{padding:16px;background:var(--m-flaeche-2);display:grid;gap:12px;align-content:start}
.ex-leiste-titel{font-weight:600}
.ex-leiste ol{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:var(--m-klein);color:var(--m-leise)}
.ex-leiste li.wartet{color:var(--m-text)}
.ex-freigabe{border:1px solid var(--zl-k-glas-rand-stark);border-radius:10px;padding:12px;display:grid;gap:6px}
.ex-freigabe p{font-size:var(--m-klein);color:var(--m-leise)}
.ex-freigabe div{display:flex;gap:8px;margin-top:4px}
.ex-freigabe div span{padding:6px 14px;border-radius:8px;border:1px solid var(--m-linie-stark);font-size:var(--m-klein)}
.ex-freigabe div span:first-child{border-color:var(--zl-k-cyan-hell);color:var(--zl-k-cyan-hell)}
.ex-regeln li{padding-right:5rem}
.ex-marke{position:absolute;right:0;top:14px;font-family:var(--m-mono);font-size:var(--m-klein);color:var(--m-dim)}
@media (max-width:520px){.ex-fenster{grid-template-columns:1fr}.ex-seite{border-right:0;border-bottom:1px solid var(--m-linie)}}

/* /agents und /de/agents: Markup der Agentenseite (hp-*, ag-*) im Kristall-Lesetext. Zwei Dateien, gleicher Aufbau. */
.ag .hp-sec h2,.ag .hp-close h2{font-size:var(--m-h2);letter-spacing:-.01em;margin-bottom:14px;max-width:24ch}
.ag .hp-sec .hp-kicker{display:block;margin-bottom:10px;font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--zl-k-cyan-hell)}
.ag .hp-lede{max-width:var(--m-mass);color:var(--m-leise)}
.ag .hp-lede + .hp-lede{margin-top:.8em}
.ag .hp-two{display:grid;gap:24px}
.ag .hp-fig{max-width:var(--m-mass);background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-l);padding:clamp(18px,2.4vw,28px);box-shadow:var(--zl-k-kante)}
.ag .hp-fig-no{display:block;font-family:var(--m-mono);font-size:var(--m-klein);color:var(--m-dim);margin-bottom:10px}
.ag .hp-frame{padding:0!important}
.ag .hp-fig .hp-kicker{margin-bottom:8px!important}
.ag .ag-steps,.ag .ag-exits,.ag .hp-list{margin:0;padding:0;list-style:none;display:grid}
.ag .ag-steps li,.ag .ag-exits li,.ag .hp-row{display:grid;grid-template-columns:8.5rem 1fr;gap:4px 16px;padding:10px 0;border-top:1px solid var(--m-linie);color:var(--m-leise)}
.ag .ag-steps li:first-child,.ag .ag-exits li:first-child,.ag .hp-row:first-child{border-top:0}
.ag .ag-step,.ag .hp-name{color:var(--m-text);font-weight:600}
.ag .ag-exits b{color:var(--zl-k-cyan-hell);font-weight:600}
.ag .ag-until{margin:14px 0 4px;font-family:var(--m-mono);font-size:var(--m-klein);color:var(--m-dim)}
.ag .ag-code{color:var(--zl-k-cyan-hell)}
.ag .hp-caliper{margin-top:14px;padding-top:10px;border-top:1px dashed var(--m-linie-stark);font-size:var(--m-klein);color:var(--m-dim)}
.ag .hp-caliper i{display:none}
.ag .hp-caliper div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.ag .hp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:12px}
.ag .hp-card{background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);padding:18px 22px;display:grid;gap:10px;align-content:start}
.ag .hp-card h3{font-size:var(--m-h3)}
.ag .hp-card p{color:var(--m-leise)}
.ag .hp-sheet{margin-bottom:0!important}
.ag .ag-docs .hp-row{grid-template-columns:10rem 1fr;align-items:center}
.k-seite.ag .ag-docs a.hp-name{min-height:44px;display:inline-flex;align-items:center}
.ag .hp-close .hp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:520px){.ag .ag-steps li,.ag .ag-exits li,.ag .hp-row,.ag .ag-docs .hp-row{grid-template-columns:1fr}}

/* /faq: Themenleiste */
.fq-themen{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.k-seite .fq-themen a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--m-linie-stark);background:var(--m-flaeche);color:var(--m-text);text-decoration:none;font-size:var(--m-klein);
  transition:border-color var(--m-ui) ease,transform .12s var(--m-ease)}
.k-seite .fq-themen a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .k-seite .fq-themen a:hover{border-color:var(--zl-k-akzent)} }
.fq h3{scroll-margin-top:calc(var(--m-kopf-h) + 16px)}

/* /status: Farben tragen nie allein, neben dem Punkt steht immer ein Wort */
.st-ueber{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:4px;padding:10px 16px;max-width:var(--m-mass);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);background:var(--m-flaeche)}
.st-ueber b{font-weight:600}
.k-seite .st-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--m-dim);box-shadow:0 0 0 3px rgba(242,242,240,.08)}
.k-seite .st-dot.st-up{background:#5fe0a0}
.k-seite .st-dot.st-degraded{background:#f4c75a}
.k-seite .st-dot.st-down{background:#ff7a8a}
.k-seite .st-dot.st-idle,.k-seite .st-dot.st-unknown{background:transparent;border:2px solid var(--m-leise);box-shadow:none}
.st-liste{display:grid;gap:10px;max-width:var(--m-mass)}
.k-seite .st-row{display:grid;grid-template-columns:auto minmax(0,10rem) 1fr;gap:6px 14px;align-items:baseline;padding:14px 18px;background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m)}
.k-seite .st-row .st-dot{align-self:center}
.k-seite .st-name{font-weight:600}
.k-seite .st-desc{color:var(--m-leise);overflow-wrap:anywhere}
.st-legende{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;color:var(--m-leise);font-size:var(--m-klein)}
.st-legende li{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.st-meta{min-height:1.5em;margin-top:12px}
.st-extern{margin-top:18px}
@media (max-width:560px){.k-seite .st-row{grid-template-columns:auto 1fr}.k-seite .st-desc{grid-column:1 / -1}}

/* /pricing: Tarifkarten, Schalter, Rechner */
.pr-tarife{display:grid;gap:16px;margin:28px 0 18px}
.pr-tarif{background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-l);padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--zl-k-kante);transition:border-color var(--m-ui) ease,box-shadow var(--m-ui) ease}
.pr-tarif.aktiv{border-color:var(--zl-k-glas-rand-stark);box-shadow:var(--zl-k-kante),var(--zl-k-glow-s)}
.pr-tarif header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:10px}
.pr-tarif h3{font-size:1.5rem;min-width:4.5ch}
.pm-price{color:var(--m-leise);font-variant-numeric:tabular-nums lining-nums}
.pm-price b{color:var(--m-text);font-size:1.5rem;font-weight:600}
.pm-year{width:100%;font-size:var(--m-klein);color:var(--m-dim)}
.pr-fit{color:var(--m-leise);max-width:var(--m-mass);margin-bottom:14px}
.pr-tarif dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 24px;margin:0}
.pr-tarif dl div{padding:10px 0;border-top:1px solid var(--m-linie)}
.pr-tarif dt{font-size:.8125rem;color:var(--m-dim)}
.pr-tarif dd{margin:2px 0 0;font-variant-numeric:tabular-nums lining-nums}
.pr-tarif dl div:first-child{grid-column:1/-1}
.pr-wahl{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.pr-anzeige{text-align:center;color:var(--m-leise);font-variant-numeric:tabular-nums lining-nums;min-height:3em}
.pr-anzeige b{display:block;color:var(--m-text);font-size:1.75rem;font-weight:600;line-height:1.1}
.pr-schalter{display:flex;gap:4px;margin:0;padding:4px;border:1px solid var(--m-linie-stark);border-radius:12px;background:var(--m-flaeche)}
.pr-schalter legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-schalter label{position:relative;cursor:pointer}
.pr-schalter input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pr-schalter span{display:flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:0 10px;border-radius:9px;font-weight:500;font-size:var(--m-klein);color:var(--m-leise);
  transition:background var(--m-ui) ease,color var(--m-ui) ease}
.pr-schalter input:checked + span{background:var(--m-text);color:#020619}
.pr-schalter input:focus-visible + span{outline:2px solid var(--zl-k-akzent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .pr-schalter label:hover input:not(:checked) + span{color:var(--m-text)} }
.pr-rechner{margin-top:24px;display:grid;gap:20px}
.pr-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.pr-feld{display:flex;flex-direction:column;gap:6px}
.pr-feld label{font-size:var(--m-klein);color:var(--m-leise)}
.pr-feld input{font:500 1.0625rem/1 var(--m-font);font-variant-numeric:tabular-nums;color:var(--m-text);background:#050716;border:1px solid var(--m-linie-stark);border-radius:10px;min-height:48px;padding:0 14px;width:100%}
.pr-feld input:focus-visible{outline:2px solid var(--zl-k-akzent);outline-offset:1px}
.pr-summe{margin:0;display:grid;gap:0}
.pr-summe div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--m-linie)}
.pr-summe dt{color:var(--m-leise)}
.pr-summe dd{margin:0;font-variant-numeric:tabular-nums lining-nums}
.pr-summe .gesamt dt,.pr-summe .gesamt dd{color:var(--m-text);font-weight:600;font-size:1.1875rem}
.pr-summe .gesamt{border-top-color:var(--m-linie-stark)}
.pr-tab-flaeche{margin-top:20px;display:grid;gap:14px}
.pm-vat{font-size:var(--m-klein);color:var(--m-dim);max-width:var(--m-mass)}
html[lang="de"] .pm-vat[lang="en"],html[lang="en"] .pm-vat[lang="de"]{display:none}

/* /intent-* (11 Seiten, Welle 3): Vorlage A (Motiv, Schritte) und B (Nummernliste). Vorsatz .i-seite. */
.i-seite .i-kopf h1{max-width:20ch;font-size:clamp(2rem,3.8vw,3.5rem)}
.i-seite .i-kopf .m-hinweis{margin-top:2px}
.i-seite .i-kopf .m-aktion{margin-bottom:0}
.i-seite .i-motiv{margin:0;max-width:var(--m-mass);display:flex;justify-content:center}
.i-seite .i-motiv img{display:block;width:min(100%,calc(22rem * var(--w,1)));max-height:22rem;height:auto;object-fit:contain;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 55%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){.i-seite .i-motiv img{animation:i-schweben 9s ease-in-out infinite alternate}
}
@keyframes i-schweben{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@media (max-width:860px){.i-seite .i-motiv{max-width:none}
}
.i-seite .i-p,.i-seite .i-text p{max-width:var(--m-mass);color:var(--m-leise)}
.i-seite .i-p + .i-p,.i-seite .i-text p + p{margin-top:.8em}
.i-seite .i-text{max-width:var(--m-mass);color:var(--m-leise)}
.i-seite .m-abschnitt > .m-liste,.i-seite .m-abschnitt > .i-schritte{margin-top:6px}
.i-seite .i-schritte,.i-seite .i-text ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:var(--m-mass);counter-reset:s}
.i-seite .i-schritte > li,.i-seite .i-text ol > li{counter-increment:s;position:relative;background:var(--m-flaeche);border:1px solid var(--m-linie);
  border-radius:var(--zl-k-radius-m);padding:18px 22px 18px 62px;color:var(--m-leise)}
.i-seite .i-schritte > li::before,.i-seite .i-text ol > li::before{content:counter(s);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font:600 .9375rem/1 var(--m-font);color:var(--zl-k-cyan-hell);border:1px solid var(--m-linie-stark)}
.i-seite .i-schritte h3{font-size:var(--m-h3);color:var(--m-text);margin-bottom:4px}
.i-seite .i-schritte .m-term{margin-top:12px}
.i-seite .i-text ul{margin:0;padding-left:1.2em;color:var(--m-leise)}
.i-seite .i-text .p-befehl{margin-top:12px;display:flex;gap:10px;align-items:center;background:#050716;border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);padding:0 0 0 14px}
.i-seite .i-text .p-befehl pre{margin:0;flex:1;overflow-x:auto;padding:12px 0;font-size:.875rem;color:var(--m-text)}
.i-seite .m-term pre{white-space:pre-wrap;overflow-wrap:anywhere}
.i-seite .beispiel{margin:0;max-width:var(--m-mass)}
.i-seite .i-schluss{max-width:var(--m-mass)}
.i-seite .i-schluss h2{max-width:none}
.i-seite .i-schluss .m-aktion{margin-top:14px}
.i-seite .m-liste a{display:inline-flex;align-items:center;min-height:44px}
.i-seite .m-liste h3 a{color:var(--m-text)}
@media (max-width:860px){.i-seite .i-schritte > li,.i-seite .i-text ol > li{padding-left:58px}
.i-seite .i-schluss{max-width:none}
}
.i-seite .beispiel{margin:14px 0 0;max-width:var(--m-mass)}
.i-seite .beispiel pre{white-space:pre-wrap;overflow-wrap:anywhere}
.i-seite .m-nummern{max-width:var(--m-mass);margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:12px}
.i-seite .m-nummern > li{counter-increment:n;position:relative;background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-m);padding:18px 22px 18px 64px}
.i-seite .m-nummern > li::before{content:counter(n);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:600 .875rem/1 var(--m-font);color:var(--zl-k-cyan-hell);border:1px solid var(--m-linie-stark)}
.i-seite .m-nummern h3{font-size:var(--m-h3);margin-bottom:4px}
.i-seite .m-nummern p{color:var(--m-leise)}
.i-seite .m-liste h3 a{color:inherit}
.i-seite .m-abschnitt > p a,.i-seite .m-liste p a,.i-seite .m-hinweis a{color:var(--zl-k-cyan-hell)}
.i-seite .schluss{padding:clamp(22px,4vw,36px);background:var(--m-flaeche);border:1px solid var(--m-linie-stark);border-radius:var(--zl-k-radius-m);max-width:var(--m-mass)}
.i-seite .schluss .m-aktion{margin-top:18px}
.i-seite .m-kopf .m-aktion{margin-top:6px}

/* /zerolog-vs-* und /claude-code-local-vs-swiss-cloud (Welle 3): beide Anbieter gleich gestaltet. Vorsatz .v-seite. */
.v-seite .m-kopf .m-auge time{font-variant-numeric:lining-nums}
.v-seite .m-abschnitt > p + ol,.v-seite .m-abschnitt > p + ul{margin-top:14px}
.v-seite .v-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v-seite .v-wahl-seite{min-width:0}
.v-seite .v-wahl-seite h3{font-size:var(--m-h3);margin:0 0 10px}
.v-seite .v-wahl-seite .m-regeln{max-width:none}
.v-seite .v-rahmen{background:var(--m-flaeche);border:1px solid var(--m-linie);border-radius:var(--zl-k-radius-l);padding:clamp(8px,1.6vw,20px) clamp(14px,2.2vw,28px);box-shadow:var(--zl-k-kante)}
.v-seite .v-tab{max-width:none;table-layout:fixed}
.v-seite .v-tab caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v-seite .v-tab thead th{padding-top:.8em}
@media (min-width:861px){.v-seite .v-tab th:first-child{width:19%}
}
.v-seite .v-tab td,.v-seite .v-tab tbody th{vertical-align:top;padding:.9em 1.2em .9em 0;color:var(--m-leise);line-height:1.55}
.v-seite .v-tab tbody th{font-weight:600;color:var(--m-text)}
.v-seite .v-tab tbody tr:last-child > *{border-bottom:0}
.v-seite .v-tab thead th:not(:first-child){color:var(--m-text);font-weight:600}
.v-seite .v-lab{display:none}
.v-seite .v-tab a{color:var(--zl-k-cyan-hell)}
.v-seite .v-abruf{color:var(--m-dim);font-size:var(--m-klein);margin-left:.4em}
.v-seite .v-quellen{max-width:none}
.v-seite .v-unter{font-size:var(--m-h3);margin:22px 0 6px}
.v-seite .v-quellen a{display:inline-flex;align-items:center;min-height:44px}
.v-seite .m-abschnitt > .m-liste{margin-top:8px}
.v-seite .m-abschnitt a:not(.m-knopf){color:var(--zl-k-cyan-hell)}
.v-seite .m-abschnitt .m-liste a,.v-seite .m-abschnitt .m-regeln li a{padding:11px 0}
.v-seite .familie{margin:20px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.v-seite .familie a{display:flex;gap:14px;align-items:center;min-height:72px;padding:14px 18px;border-radius:var(--zl-k-radius-m);background:var(--m-flaeche);border:1px solid var(--m-linie);
  color:var(--m-text);text-decoration:none;transition:border-color var(--m-ui) ease}
.v-seite .familie a:hover{border-color:var(--zl-k-glas-rand-stark);color:var(--m-text)}
.v-seite .familie b{display:block;font-weight:600}
.v-seite .familie span span{display:block;color:var(--m-leise);font-size:var(--m-klein)}
@media (max-width:1180px){.v-seite .v-wahl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){.v-seite .v-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v-seite .v-tab,.v-seite .v-tab tbody,.v-seite .v-tab tr,.v-seite .v-tab td,.v-seite .v-tab tbody th{display:block;width:100%}
.v-seite .v-tab tbody tr{padding:14px 0;border-bottom:1px solid var(--m-linie-stark)}
.v-seite .v-tab tbody tr:last-child{border-bottom:0}
.v-seite .v-tab tbody th{border:0;padding:0 0 6px;width:100%;font-size:var(--m-h3)}
.v-seite .v-tab td{border:0;padding:6px 0}
.v-seite .v-lab{display:block;font-size:var(--m-klein);font-weight:600;color:var(--m-text);margin-bottom:2px}
}

/* ---------- Tablet / Handy ---------- */
@media (max-width:1080px){ .m-badge{display:none} }
@media (max-width:860px){
  .m-menu{display:inline-flex}
  .k-seite .m-signin{display:none}
  .m-nav{display:none}
  .m-buehne{grid-template-columns:minmax(0,1fr)}
  .m-seite{position:relative;top:auto;height:auto;order:-1;padding-top:24px}
  .m-kristall{width:min(72vw,300px)}
  .m-kopf{min-height:0;padding-top:8px}
  .m-kopf.p-kopf{padding-top:48px}
  .preis .m-seite{position:sticky;top:var(--m-kopf-h);z-index:20;flex-direction:row;justify-content:flex-start;gap:12px;padding:8px 0 10px;
    margin:0 calc(var(--m-pad) * -1);padding-inline:var(--m-pad);background:var(--zl-k-nacht);border-bottom:1px solid var(--m-linie)}
  .preis .m-kristall{width:88px;flex:none}
  .preis .m-kristall::before{display:none}
  .pr-wahl{align-items:stretch;gap:6px;min-width:0;flex:1}
  .pr-anzeige{text-align:left;min-height:0;font-size:.875rem}
  .pr-anzeige b{display:inline;font-size:1.0625rem;margin-right:6px}
  .pr-schalter{justify-content:space-between;padding:2px}
  .pr-schalter label{flex:1}
  .pr-schalter span{min-width:44px;padding:0 4px;font-size:.875rem}
  .pr-wahl .m-stufen{display:none}
  .preis .m-kopf{padding-top:24px}
}
@media (max-width:400px){
  .m-top{gap:10px}
  .m-brand span{display:none}
}
@media (max-width:380px){
  .preis .m-kristall{width:56px}
  .preis .m-seite{gap:8px;flex-wrap:wrap}
  .pr-wahl{display:contents}
  .pr-anzeige{flex:1;min-width:0}
  .pr-schalter{width:100%;gap:2px}
  .pr-schalter span{font-size:.8125rem;padding:0 2px}
}

/* ---------- Reduzierte Bewegung = Standbild ---------- */
@media (prefers-reduced-motion:reduce){
  .k-seite *,.k-seite *::before,.k-seite *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}