/* =============================================================
bildstelle Designsystem (Dokument-Komponenten)
Extrahiert aus dem abgenommenen VIVONO-Angebot (2026-06).
Prinzipien und harte Regeln stehen in rules/bildstelle-design.md,
diese Datei ist die konkrete Umsetzung (Komponenten plus Zuordnung).
FARBE, SCHRIFT UND MASS STEHEN SEIT 2026-08-16 NICHT MEHR HIER,
sondern einmal in bildstelle-tokens.css. Diese Datei laedt sie per
@import in Zeile 1 und bildet in ihrem :root nur noch die gewachsenen
Dokument-Namen darauf ab.
Warum @import und nicht ein zweites eine weisse Flaeche mitten auf dunklem Grund. */
color-scheme:dark;
--panel:var(--bs-bg); /* dunkler als der Seitengrund (--bs-bg-2) */
--panel-ink:var(--bs-ink);
--chip-neu-ink:var(--bs-green);
--overlay-bg:rgba(11,26,35,0.98);
--lab-bg:rgba(13,27,36,0.82);
/* Die Wireframe-Leiter dreht sich um: heller als der Kartengrund, aber weit
unter Weiss, damit die Skizze auch auf Dunkel nicht blendet. */
--wf-linie:#243642;
--wf-linie-kraeftig:#314857;
--wf-block:#1e2f3a;
--wf-block-2:#2b4150;
--wf-stark:#40606f;
--wf-feld:#0a1620;
--wf-feld-rand:#2b4150;
--wf-cta-bg:rgba(238,242,241,0.07);
--wf-cta-rand:rgba(238,242,241,0.12);
}
/* ---- Base ---- */
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h)}
body{font-family:var(--font); background:var(--surface-2); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
/* ---- Brand-Band (weisser Kopf mit Logo plus Claim) ---- */
.brand-band{background:var(--surface); padding:44px 0 40px; border-bottom:1px solid var(--border-light)}
.brand-bar{max-width:var(--wrap); margin:0 auto; padding:0 32px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand-logo{height:46px; display:block; width:auto}
/* Claim IMMER exakt und voll (Single Source: _Brand-Assets/README.md):
"Design. Web. Fotografie. Das macht ein Bild." (wird per uppercase gerendert).
Keine Kurzform, keine eigene Variante. */
.brand-claim{font-size:11px; font-weight:700; letter-spacing:2.5px; color:var(--text-tri); text-transform:uppercase; line-height:1; padding-bottom:4px}
/* Zentrierte Variante (Magix-Stil): grosses Logo mittig, Claim darunter, meist ohne Nav */
.brand-band.centered{padding:72px 32px 76px}
.brand-band.centered .brand-bar{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0}
.brand-band.centered .brand-logo{height:80px; margin:0 auto 18px}
.brand-band.centered .brand-claim{letter-spacing:3px; padding-bottom:0}
@media (max-width:720px){ .brand-band.centered{padding:44px 20px 40px} .brand-band.centered .brand-logo{height:56px} }
/* ---- Sticky Anker-Navigation (Desktop horizontal, Mobile Hamburger) ----
Bewusst ohne backdrop-filter (erzeugt sonst Containing-Block und fesselt
das fixed Mobile-Panel an die Bar). JS toggelt .open auf .doc-nav. */
.doc-nav{position:sticky; top:0; z-index:50; background:rgba(5,25,34,0.97); border-bottom:1px solid rgba(255,255,255,0.08)}
.doc-nav-inner{max-width:var(--wrap); margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:thin}
.doc-nav a{flex:0 0 auto; padding:13px 13px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.62); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.doc-nav a:hover{color:#fff; border-bottom-color:var(--green)}
/* Aktive Seite bei Seiten-Navigation (Mehrseiten-Dokumente): aria-current="page" setzen */
.doc-nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--green)}
/* Trenner zwischen Seiten-Links und Anker-Links der aktuellen Seite */
.doc-sep{flex:0 0 auto; width:1px; height:18px; background:rgba(255,255,255,0.22); margin:0 8px}
.doc-burger{display:none; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; background:none; border:none; color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer}
.doc-burger-icon{position:relative; width:22px; height:16px; flex-shrink:0}
.doc-burger-icon span{position:absolute; left:0; width:100%; height:2px; background:var(--green); border-radius:2px; transition:transform .25s ease, opacity .2s}
.doc-burger-icon span:nth-child(1){top:0}
.doc-burger-icon span:nth-child(2){top:7px}
.doc-burger-icon span:nth-child(3){top:14px}
.doc-nav.open .doc-burger-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.doc-nav.open .doc-burger-icon span:nth-child(2){opacity:0}
.doc-nav.open .doc-burger-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:720px){
.doc-burger{display:flex}
.doc-nav.open .doc-burger{position:fixed; top:0; left:0; right:0; z-index:61; background:rgba(5,25,34,0.99)}
.doc-nav-inner{position:fixed; inset:0; z-index:60; flex-direction:column; align-items:stretch; gap:0; padding:58px 0 28px; max-width:none; background:rgba(5,25,34,0.99); overflow-y:auto; overscroll-behavior:contain; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .2s}
.doc-nav.open .doc-nav-inner{transform:translateY(0); opacity:1; pointer-events:auto}
.doc-nav a{width:100%; padding:16px 24px; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.08)}
.doc-sep{width:auto; height:auto; background:none; border-top:2px solid rgba(44,254,153,0.35); margin:8px 0 4px}
}
/* ---- Freistehende Sticky-Sidebar (side-nav) fuer Mehrseiten-Dokument-Sets ----
Hauptpunkte = Seiten (aria-current="page" markiert die aktive), Unterpunkte = Anker.
Desktop: schwebende Karte, sticky, innen scrollbar. Unter 1100px: Burger-Bar mit Vollbild-Panel.
JS toggelt .open auf .side-nav (Burger) und .open auf .sn-group (Untermenues). */
.page-grid{max-width:1460px; margin:0 auto; padding:0 clamp(18px,3vw,36px); display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start}
.page-grid > .wrap{margin:0; padding-left:0; padding-right:0}
.side-nav{position:sticky; top:20px; margin-top:26px; background:var(--surface); border:1px solid var(--border-light); border-radius:12px; padding:12px 12px 14px; max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin}
.sn-title{font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-tri); padding:6px 10px 10px}
.sn-group{border-top:1px solid var(--border-light)}
.sn-head{display:flex; align-items:center; gap:2px}
.sn-head a{flex:1 1 auto; padding:10px 4px 10px 10px; font-size:14px; font-weight:700; color:var(--text-sec); text-decoration:none; border-radius:8px; line-height:1.3}
.sn-head a:hover{color:var(--accent)}
.sn-head a[aria-current="page"]{color:var(--accent)}
.sn-head a[aria-current="page"]::before{content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:8px}
.sn-group.muted{opacity:.55}
.sn-group.muted:hover{opacity:1}
.sn-done{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; background:var(--surface-2); border:1px solid var(--border-light); color:var(--text-tri); border-radius:10px; padding:2px 7px; margin-left:7px; vertical-align:middle}
.sn-toggle{flex:0 0 auto; width:30px; height:30px; border:0; background:none; cursor:pointer; color:var(--text-tri); font-size:12px; line-height:1; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease}
.sn-toggle:hover{background:var(--surface-2); color:var(--accent)}
.sn-group.open .sn-toggle{transform:rotate(180deg)}
.sn-sub{display:none; padding:0 0 10px}
.sn-group.open .sn-sub{display:block}
.sn-sub a{display:block; margin-left:14px; padding:7px 10px 7px 12px; font-size:13px; color:var(--text-sec); text-decoration:none; border-left:2px solid var(--border-light); border-radius:0 8px 8px 0; line-height:1.35}
.sn-sub a:hover{color:var(--accent); background:var(--green-dim); border-left-color:var(--green)}
.sn-sub a.active{color:var(--accent); background:var(--green-dim); border-left-color:var(--green); font-weight:600} /* Scroll-Spy: Section im Viewport (side-nav.js) */
@media (max-width:1100px){
.page-grid{display:block; padding:0}
.page-grid > .wrap{margin:0 auto; padding:0 clamp(18px,4vw,32px) 80px}
.side-nav{position:sticky; top:0; z-index:50; margin:0; padding:0; background:rgba(5,25,34,0.97); border:0; border-bottom:1px solid rgba(255,255,255,0.08); border-radius:0; max-height:none; overflow:visible}
.side-nav .sn-title{display:none}
.side-nav .doc-burger{display:flex}
.side-nav.open .doc-burger{position:fixed; top:0; left:0; right:0; z-index:61; background:rgba(5,25,34,0.99)}
.side-nav-inner{position:fixed; inset:0; z-index:60; background:rgba(5,25,34,0.99); overflow-y:auto; overscroll-behavior:contain; padding:58px 0 28px; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .2s}
.side-nav.open .side-nav-inner{transform:translateY(0); opacity:1; pointer-events:auto}
.side-nav .sn-group{border-top:1px solid rgba(255,255,255,0.08)}
.side-nav .sn-head a{color:#fff; font-size:16px; padding:14px 20px 14px 24px}
.side-nav .sn-head a[aria-current="page"]{color:var(--green)}
.side-nav .sn-toggle{width:48px; height:48px; color:var(--green); font-size:14px}
.side-nav .sn-sub{padding:0 0 12px}
.side-nav .sn-sub a{color:rgba(255,255,255,0.72); border-left-color:rgba(255,255,255,0.16); margin-left:32px; padding:10px 16px 10px 14px; font-size:14.5px}
.side-nav .sn-sub a:hover{color:#fff; background:rgba(44,254,153,0.08); border-left-color:var(--green)}
.side-nav .sn-sub a.active{color:#fff; background:rgba(44,254,153,0.10); border-left-color:var(--green); font-weight:600}
.side-nav .sn-done{background:transparent; border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.55)}
}
/* ---- Layout ---- */
.container{max-width:var(--wrap); margin:0 auto; padding:60px 32px}
.section{margin-bottom:48px; scroll-margin-top:var(--nav-h)}
/* ---- Kopf und Headlines ---- */
.eyebrow, .label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--text-tri); margin-bottom:12px}
/* page-head ist der EINE Dokument-Kopf (SSOT): Eyebrow, grosse H1, Lead. In den Seiten
KEINE lokalen h1/.eyebrow/.lead-Overrides setzen, sonst driftet der Look. */
.page-head{padding-top:34px; margin-bottom:54px}
.page-head .eyebrow{margin-bottom:14px}
.page-head h1{font-size:clamp(34px,4.4vw,56px); font-weight:900; letter-spacing:-0.03em; line-height:1.05; margin:0 0 18px}
.page-head .lead{font-size:18px; line-height:1.65; max-width:1000px}
h1 .hl, h2 .hl, h3 .hl{color:var(--green)} /* gruen hervorgehobenes Wort */
.lead{font-size:16px; color:var(--text-sec); line-height:1.7; max-width:66ch}
.section h2{font-size:24px; font-weight:900; letter-spacing:-0.02em; margin-bottom:6px}
.section-sub{font-size:14.5px; color:var(--text-sec); margin-bottom:22px; max-width:66ch}
/* Fliesstexte auf lesbarer Breite halten (harte Regel, siehe bildstelle-design.md).
PRAEZISIERUNG 2026-08-10 (Roman): fuer Einleitungen und Sub-Texte unter
Ueberschriften waren 66ch zu schmal, das sah bei 1000px Layout nach halber
Breite aus. Neu 80 Prozent der Layoutbreite, mobil voll.
Die 66ch-Regel gilt weiterhin fuer echten Fliesstext (p.readable). */
.lead, .section-sub{max-width:80%}
p.readable{max-width:66ch}
.page-head .lead{max-width:80%}
@media (max-width:720px){
.lead, .section-sub, .page-head .lead{max-width:100%}
}
/* ---- Hero (dunkel, mit gruenem Glow) ----
background nutzt --panel, NICHT --accent: im Dunkelmodus ist --accent hell
(es ist die Tinte), das ergaebe helle Flaeche mit weisser Schrift. */
.hero{background:var(--panel); color:var(--panel-ink); border-radius:var(--radius); padding:42px 40px; margin-bottom:44px; position:relative; overflow:hidden}
.hero::before{content:''; position:absolute; top:-80px; right:-80px; width:300px; height:300px; background:radial-gradient(circle, rgba(44,254,153,0.18), transparent 70%)}
.hero-content{position:relative; z-index:1}
/* Schrift AUF Gruen ist immer dunkel (--bs-on-green), in beiden Themen. */
.hero .badge{display:inline-block; padding:6px 14px; background:var(--green); color:var(--bs-on-green); font-size:11px; font-weight:800; letter-spacing:1.5px; border-radius:20px; margin-bottom:18px}
.hero h2{font-size:28px; font-weight:900; letter-spacing:-0.02em; margin-bottom:12px}
.hero .sub{font-size:15px; opacity:0.82; margin-bottom:26px; line-height:1.7; max-width:66ch}
/* ---- Chips ---- */
.chip{display:inline-block; padding:6px 14px; background:var(--green-dim); color:var(--accent); font-size:12px; font-weight:600; border-radius:20px; border:1px solid var(--border-light)}
/* ---- Kaesten ---- */
/* Standard-Hinweis (gruener Balken links) */
.intro-note{background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--green); border-radius:var(--radius); padding:22px 26px; font-size:14.5px; color:var(--text-sec); line-height:1.75; margin:0 0 36px}
.intro-note strong{color:var(--text)}
/* Achtung/Hinweis (amber Balken, Pfeil-Liste) */
.note-box{background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--amber); border-radius:var(--radius); padding:24px 28px}
.note-box h3{font-size:16px; font-weight:800; margin-bottom:10px}
.note-box ul{list-style:none; padding:0; margin:0}
.note-box li{font-size:13px; color:var(--text-sec); padding:5px 0 5px 22px; position:relative; line-height:1.6}
.note-box li::before{content:'\2192'; position:absolute; left:0; color:var(--amber); font-weight:700}
.note-box li strong{color:var(--text)}
/* ---- Karten ---- */
.card{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); padding:32px}
.card.featured{border:1.5px solid var(--green)}
.card h3{font-size:21px; font-weight:900; letter-spacing:-0.02em; margin-bottom:6px}
.card .card-intro{font-size:14px; color:var(--text-sec); line-height:1.7; margin-bottom:18px; max-width:66ch}
/* Perk-Karte (kleiner, gruener Balken links) */
.perk{background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--green); border-radius:var(--radius); padding:22px 24px}
.perk h4{font-size:15px; font-weight:800; margin-bottom:6px}
.perk p{font-size:13px; color:var(--text-sec); line-height:1.65; margin:0}
/* ---- Grid-Helfer (nach unten responsive) ---- */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid-2, .grid-3{grid-template-columns:1fr} }
/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:980px; font-size:15px; font-weight:700; text-decoration:none; background:var(--green); color:var(--bs-on-green); border:0; cursor:pointer; font-family:inherit; transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
/* .btn-ghost steht immer auf einem Panel (Hero, CTA), deshalb Panel-Schrift. */
.btn-ghost{background:transparent; color:var(--panel-ink); border:1.5px solid rgba(255,255,255,0.45)}
.btn-dark{background:var(--panel); color:var(--panel-ink)}
/* ---- CTA (dunkel, zentriert) ---- */
.cta{background:var(--panel); color:var(--panel-ink); border-radius:var(--radius); padding:40px; text-align:center; position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; top:-100px; left:-100px; width:320px; height:320px; background:radial-gradient(circle, rgba(44,254,153,0.14), transparent 70%)}
.cta h3{font-size:24px; font-weight:900; letter-spacing:-0.02em; margin-bottom:12px; position:relative; z-index:1}
.cta p{font-size:14.5px; opacity:0.85; max-width:600px; margin:0 auto 24px; line-height:1.7; position:relative; z-index:1}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1}
/* ---- Footer (3-spaltig) ---- */
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; margin-bottom:16px}
.footer-col{font-size:11px; line-height:1.75; color:var(--text-tri)}
.footer-col strong{color:var(--text); display:block; margin-bottom:6px; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase}
.footer-col a{color:var(--text-sec); text-decoration:none}
.footer-bottom{padding-top:12px; border-top:1px solid var(--border-light); font-size:11px; color:var(--text-tri); text-align:center}
.footer-bottom .heart{color:var(--green)} /* Herz in Akzentfarbe, NICHT rot */
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr; gap:18px} }
/* ---- Welle (Marken-Element, dezenter Hintergrund) ----
welle.svg mitliefern. Utility auf einen position:relative Wrapper legen.
Achtung: inline eingebettete welle.svg-Klassen (.cls-1/.cls-2) vor dem
Einbetten umbenennen, sonst faerbt das Logo die Welle gruen (siehe README). */
.has-welle{position:relative; overflow:hidden}
.has-welle::after{content:''; position:absolute; top:0; right:0; bottom:0; width:60%; background:url('welle.svg') no-repeat right center; background-size:contain; opacity:0.05; pointer-events:none; z-index:0}
.has-welle > *{position:relative; z-index:1}
/* ---- Mobile-Grundregeln (Detailregeln in bildstelle-design.md) ---- */
@media (max-width:720px){
.container{padding:40px 18px}
.brand-band{padding:28px 0 24px}
.brand-bar{flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 18px}
.brand-logo{height:32px}
.page-head{padding-top:22px; margin-bottom:40px}
.page-head h1{font-size:32px}
.hero{padding:30px 22px}
.hero h2{font-size:22px}
.card, .cta, .note-box, .intro-note{padding:24px 22px}
}
/* ---- Glossar-Tooltips (Begriffserklärungen; Engine: designsystem/glossar-tooltips.js) ----
Dezente Markierung erklärungsbedürftiger Begriffe plus schwebendes Erklärkärtchen.
Daten pro Projekt als glossar-.js (window.GLOSSAR), Daten VOR Engine einbinden. */
.gl-term{text-decoration:underline dotted rgba(107,138,150,.55); text-decoration-thickness:1px; text-underline-offset:3px; cursor:help; border-radius:3px}
.gl-term:hover,.gl-term:focus-visible{background:var(--green-dim); text-decoration-color:var(--accent); outline:none}
#gl-tip{position:fixed; z-index:400; max-width:340px; background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--green); border-radius:10px; box-shadow:var(--bs-shadow); padding:12px 14px; font-size:13.5px; line-height:1.5; color:var(--text-sec); display:none}
#gl-tip .gl-tt{display:block; font-weight:800; color:var(--text); font-size:13px; margin-bottom:3px}
/* ---- Slim-Header: flaches Markenband fuer Partner-Unterlagen ----
Logo links (fluchtet mit der side-nav-Spalte des page-grid), Claim rechts
(fluchtet mit der rechten Layout-Kante). Steht bewusst NACH allen Media-Blöcken,
damit es die zentrierte 720px-Basisregel der brand-bar überschreibt. */
.brand-band.slim{padding:22px 0 18px}
.brand-band.slim .brand-bar{max-width:1460px; margin:0 auto; padding:0 clamp(18px,3vw,36px); display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; text-align:left}
.brand-band.slim .brand-logo{height:34px; margin:0}
.brand-band.slim .brand-claim{font-size:10px; letter-spacing:2.4px; padding-bottom:0}
@media (max-width:720px){
.brand-band.slim{padding:14px 0 12px}
.brand-band.slim .brand-logo{height:24px}
.brand-band.slim .brand-claim{font-size:8px; letter-spacing:1.6px}
}
/* =============================================================
STRUKTURPLAN (Sitemap plus Seitenplan), seit 2026-08-04
Ersetzt das Relume-Wireframe: zeigt einem Kunden VOR dem Design,
welche Seiten entstehen und was auf jeder Seite passiert.
Gerendert aus Daten via strukturplan.js, Datenformat window.STRUKTUR.
============================================================= */
/* ---- Sitemap: Ebenen-Baum ---- */
.sm{margin:0 0 12px}
.sm-lvl{list-style:none; margin:0; padding:0}
.sm-lvl .sm-lvl{margin-left:26px; padding-left:22px; border-left:1px solid var(--border-light)}
.sm-node{position:relative; margin-top:10px}
.sm-lvl .sm-lvl>.sm-node::before{content:''; position:absolute; left:-22px; top:26px; width:16px; height:1px; background:var(--border-light)}
.sm-card{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius);
padding:14px 18px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
transition:border-color .18s, transform .18s}
.sm-card:hover{border-color:var(--text-tri); transform:translateY(-1px)}
.sm-card .sm-t{font-size:15.5px; font-weight:800; letter-spacing:-0.01em}
.sm-card .sm-t a{text-decoration:none}
.sm-card .sm-t a:hover{color:var(--text-sec)}
.sm-card .sm-u{font-size:12px; color:var(--text-tri); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sm-card .sm-z{font-size:13.5px; color:var(--text-sec); flex-basis:100%; margin-top:2px; max-width:70ch}
/* Ebenen auch in der Seitenkarte unterscheidbar machen, gleiche Logik wie im
Seitenbaum: Hauptbereiche stehen vorn, Unterseiten treten zurueck.
Ergaenzt 2026-08-11. */
.sm>.sm-lvl>.sm-node>.sm-card{border-left:3px solid var(--accent)}
.sm>.sm-lvl>.sm-node>.sm-card .sm-t{font-size:17px; font-weight:900}
.sm-lvl .sm-lvl>.sm-node>.sm-card{background:var(--surface-2)}
.sm-lvl .sm-lvl>.sm-node>.sm-card .sm-t{font-size:14.5px; font-weight:700}
.sm-lvl .sm-lvl>.sm-node>.sm-card:hover{background:var(--surface)}
/* Status-Chips (Umfang) */
.chip{font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
padding:3px 9px; border-radius:100px; white-space:nowrap; border:1px solid transparent}
.chip.neu{background:var(--green-dim); color:var(--chip-neu-ink); border-color:var(--green-med)}
.chip.bestehend{background:var(--surface-2); color:var(--text-sec); border-color:var(--border-light)}
.chip.optional{background:var(--amber-dim); color:var(--amber); border-color:rgba(196,125,0,.25)}
.chip.spaeter{background:var(--surface-2); color:var(--text-tri); border-color:var(--border-light)}
.chip.aufwand{background:var(--panel); color:#cfe9dd; border-color:var(--panel)}
/* ---- Seitenplan: eine Seite, darunter der Section-Stapel ---- */
.pp{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius);
padding:26px 28px; margin-bottom:20px; scroll-margin-top:var(--nav-h)}
.pp-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:16px;
border-bottom:1px solid var(--border-light); margin-bottom:20px}
.pp-head h3{font-size:20px; font-weight:900; letter-spacing:-0.02em}
.pp-head .sm-u{font-size:12px; color:var(--text-tri); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pp-head .pp-z{flex-basis:100%; font-size:14px; color:var(--text-sec); max-width:70ch; margin-top:2px}
.pp-sec{display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:start;
padding:16px 0; border-bottom:1px dashed var(--border-light)}
.pp-sec:last-child{border-bottom:0; padding-bottom:0}
/* min-width:0 ist Pflicht: ohne das schiebt ein langer Chip (white-space:nowrap)
die 1fr-Spalte auf und die Seite laeuft mobil ueber (FF-Laxenburg-Lehre 2026-08-10). */
.pp-sec .pp-txt{min-width:0}
.pp-sec .pp-txt h4{font-size:15px; font-weight:800; margin-bottom:3px}
.pp-sec .pp-txt p{font-size:13.5px; color:var(--text-sec); max-width:64ch}
.pp-sec .pp-meta{margin-top:7px; display:flex; gap:6px; flex-wrap:wrap; min-width:0}
/* Hinweis-Chips duerfen umbrechen, Status-Chips bleiben einzeilig. */
.pp-sec .pp-meta .chip{white-space:normal}
.pp-num{font-size:11px; font-weight:800; color:var(--text-tri); letter-spacing:1px}
/* ---- Wireframe-Skizze (abstrakt, absichtlich grob) ---- */
.wf{background:var(--surface-2); border:1px solid var(--border-light); border-radius:8px;
padding:8px; display:flex; flex-direction:column; gap:5px; min-height:64px; justify-content:center}
.wf i{display:block; background:var(--wf-linie); border-radius:2px; height:6px}
.wf i.t{height:9px; background:var(--wf-linie-kraeftig)}
.wf i.s{width:55%}
.wf i.m{width:75%}
.wf .row{display:flex; gap:5px}
.wf .row>span{flex:1; background:var(--wf-block); border-radius:3px; min-height:22px; display:block}
.wf .row>span.img{background:repeating-linear-gradient(135deg,var(--wf-linie) 0 5px,var(--wf-block) 5px 10px)}
/* HARTE REGEL fuer Wireframes, gesetzt 2026-08-11: kein Element im Wireframe
dunkler als #a9b4ba. Vorher war .bar.dark auf --accent (#051922), das ergibt
gegen #f6f6f4 ein Kontrastverhaeltnis von rund 17:1 und war damit das
dominanteste Objekt der ganzen Strukturkarte, 38 mal wiederholt. Ein
Wireframe soll Anordnung zeigen, nicht schreien. Dunkler als #a9b4ba ist ab
jetzt fuer Rangsignale reserviert, und davon gibt es genau eines: den Kopf
der Startseite. */
.wf .btn-s{width:34%; height:10px; background:var(--wf-stark); border-radius:3px; display:block}
.wf .btn-g{width:26%; height:10px; background:var(--wf-block-2); border-radius:3px; display:block}
.wf .bar{height:14px; background:var(--wf-block-2); border-radius:3px}
/* Handlungsaufruf-Zone: getoentes Feld mit Knopf-Andeutung statt schwarzem Balken.
Ein Feld sagt "Abschnitt", das Pill darin sagt "mit Knopf". Praeziser als
der Balken und gleichzeitig ruhiger. */
.wf .bar.dark{background:var(--wf-cta-bg); border:1px solid var(--wf-cta-rand);
height:auto; min-height:20px; border-radius:4px;
display:flex; align-items:center; gap:5px; padding:0 6px}
.wf .bar.dark::before{content:''; flex:0 1 46%; height:5px; border-radius:2px; background:var(--wf-block-2)}
.wf .bar.dark::after{content:''; flex:0 0 34px; height:8px; border-radius:4px; background:var(--wf-stark)}
.wf .fld{height:11px; background:var(--wf-feld); border:1px solid var(--wf-feld-rand); border-radius:3px}
.wf.tall{min-height:92px}
/* ---- Seitenansicht: die ganze Seite als gestapelte Bloecke (seit 2026-08-10)
Zweck: der Kunde sieht eine Seite als Ganzes von oben nach unten, nicht als
Liste mit Vorschaubildern. Nutzt dieselben .wf-Formen, nur gross.
Zielcontainer im HTML:
---- */
.pv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin:0 0 12px}
.pv{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius);
overflow:hidden; display:flex; flex-direction:column}
.pv-bar{position:relative; display:flex; align-items:center; gap:8px; padding:9px 12px;
background:var(--surface-2); border-bottom:1px solid var(--border-light)}
.pv-dots{display:flex; gap:4px; flex:0 0 auto}
.pv-dots i{width:7px; height:7px; border-radius:50%; background:var(--wf-block-2); display:block}
/* Seitentitel darf umbrechen, sonst werden lange Namen abgeschnitten. */
.pv-t{font-size:12.5px; font-weight:800; letter-spacing:-0.01em; flex:1; min-width:0; line-height:1.3}
.pv-body{padding:10px; display:flex; flex-direction:column; gap:6px; flex:1}
.pv-sec{position:relative; min-width:0}
.pv-lab{position:absolute; top:4px; left:6px; z-index:2; font-size:9px; font-weight:800;
letter-spacing:0.4px; text-transform:uppercase; color:var(--text-tri);
background:var(--lab-bg); border-radius:3px; padding:1px 5px;
max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; pointer-events:none}
.wf.pv-wf{min-height:var(--h,52px); border-radius:5px; padding:7px}
.pv-more{display:block; padding:9px 12px; border-top:1px solid var(--border-light);
font-size:11.5px; font-weight:800; text-decoration:none}
.pv-more:hover{background:var(--surface-2)}
@media (max-width:560px){ .pv-grid{grid-template-columns:1fr} }
/* Bento-Raster in der Seitenansicht: greift nur, wenn Sections eine Breite
tragen. 4 Spalten wie im Muster ueblich, feste Reihenhoehe, ein Gap-Wert.
Kachel oberhalb der Bento-Zone bleibt volle Breite (z.B. Navigation). */
.pv-body.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; align-content:start}
.pv-body.bento>.pv-sec{grid-column:span 4}
.pv-body.bento>.pv-sec.b-halb{grid-column:span 2}
.pv-body.bento>.pv-sec.b-viertel{grid-column:span 1}
.pv-body.bento>.pv-sec.b-dreiviertel{grid-column:span 3}
.pv-body.bento>.pv-sec.b-hoch{grid-row:span 2}
.pv-body.bento>.pv-sec.b-hoch>.wf{height:100%}
.pv-body.bento .pv-lab{font-size:8px; padding:1px 4px}
/* Ab hier ist eine Kachel zu schmal fuer ein Raster, also stapeln. */
@media (max-width:400px){
.pv-body.bento{grid-template-columns:1fr}
.pv-body.bento>.pv-sec, .pv-body.bento>.pv-sec.b-halb,
.pv-body.bento>.pv-sec.b-viertel, .pv-body.bento>.pv-sec.b-dreiviertel{grid-column:span 1}
.pv-body.bento>.pv-sec.b-hoch{grid-row:span 1}
}
/* ---- Seitenbaum: Struktur auf einen Blick, von oben nach unten (2026-08-10)
Hauptmenuepunkte als dunkle Kaesten in einer Reihe, Unterseiten darunter
an einer Linie. Kein Radial-Mindmap, sondern ein Organigramm.
Zielcontainer im HTML:
---- */
.tr{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0 10px; margin:0 0 12px}
.tr-row{display:flex; gap:16px; align-items:flex-start; min-width:max-content}
.tr-branch{display:flex; flex-direction:column; width:190px; flex:0 0 auto}
.tr-box{display:block; text-decoration:none; color:inherit; background:var(--surface);
border:1px solid var(--border-light); border-radius:9px; padding:9px 11px;
font-size:12.5px; font-weight:700; line-height:1.3}
.tr-box:hover{border-color:var(--text-tri)}
.tr-box .tr-u{display:block; font-size:10px; font-weight:600; color:var(--text-tri); margin-top:2px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all}
.tr-box.tr-top{background:var(--panel); color:var(--panel-ink); border-color:var(--panel); text-align:center;
font-size:13.5px; font-weight:900; letter-spacing:-0.01em; padding:12px 11px}
.tr-box.tr-top:hover{border-color:var(--green)}
.tr-box.tr-top .tr-n{display:block; font-size:10px; font-weight:700; opacity:.62; margin-top:3px;
text-transform:uppercase; letter-spacing:.8px}
/* Unterseiten muessen auf den ersten Blick als Unterseiten lesbar sein, nicht
als gleichrangige Karten daneben. Drei Mittel gleichzeitig, weil eines allein
nicht reicht: mehr Einrueckung, getoente Flaeche, kraeftigere Astlinie.
Praezisiert 2026-08-11 auf Romans Hinweis, die Ebenen seien zu aehnlich. */
.tr-kids{position:relative; margin:22px 0 0; padding-left:28px; display:flex; flex-direction:column; gap:6px}
.tr-kids::before{content:''; position:absolute; left:12px; top:-22px; bottom:16px; width:2px;
background:var(--border-light); border-radius:2px}
.tr-kids>.tr-box{position:relative; background:var(--surface-2); font-size:12px; font-weight:600;
padding:8px 10px; border-radius:7px}
.tr-kids>.tr-box::before{content:''; position:absolute; left:-16px; top:16px; width:16px; height:2px;
background:var(--border-light); border-radius:2px}
/* Der Punkt am Ast macht die Zugehoerigkeit eindeutig, auch wenn eine Zeile umbricht */
.tr-kids>.tr-box::after{content:''; position:absolute; left:-3px; top:13px; width:7px; height:7px;
border-radius:50%; background:var(--surface); border:2px solid var(--border-light)}
.tr-kids>.tr-box:hover{background:var(--surface); border-color:var(--text-tri)}
.tr-kids>.tr-box:hover::after{border-color:var(--text-tri)}
.tr-hint{font-size:11.5px; color:var(--text-tri); margin:0 0 10px}
/* ---- Zweck-Kaertchen: zeigt beim Zeigen oder bei Tastatur-Fokus, was hinter
einer Seite steckt. Traegt jedes Element mit data-zweck.
Absichtlich kein title-Attribut: das erscheint erst nach einer halben Sekunde,
laesst sich nicht gestalten und ist per Tastatur nicht erreichbar.
Auf dem Handy greift kein Zeigen, dort steht der Zweck als Text in der
Seitenkarte. Das ist die Redundanz, die den Baustein zugaenglich macht. ---- */
#zt{position:fixed; z-index:90; max-width:300px; background:var(--panel); color:var(--panel-ink);
border-radius:10px; padding:9px 12px 10px; font-size:12.5px; line-height:1.45;
box-shadow:var(--bs-shadow); pointer-events:none; opacity:0;
transform:translateY(5px); transition:opacity .13s ease, transform .13s ease}
#zt.on{opacity:1; transform:translateY(0)}
#zt b{display:block; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
color:var(--green); margin-bottom:4px}
[data-zweck]{cursor:help}
[data-zweck]:focus-visible{outline:2px solid var(--green); outline-offset:2px}
@media (prefers-reduced-motion:reduce){#zt{transition:none}}
/* ---- Strukturkarte: alles auf einen Blick, jede Seite als Wireframe,
angeordnet in der Hierarchie, mit Zoom (2026-08-10).
Zielcontainer im HTML:
---- */
.sk-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.sk-bar .sk-btn{font-family:inherit; font-size:12px; font-weight:800; padding:8px 13px; min-height:38px;
border-radius:8px; border:1px solid var(--border-light); background:var(--surface);
color:var(--text); cursor:pointer}
.sk-bar .sk-btn:hover{border-color:var(--text-tri)}
.sk-bar .sk-btn.on{background:var(--panel); color:var(--panel-ink); border-color:var(--panel)}
.sk-bar input[type=range]{flex:1; min-width:130px; max-width:260px; accent-color:var(--green)}
.sk-bar .sk-val{font-size:11.5px; font-weight:800; color:var(--text-tri); min-width:52px}
/* Leinwand: zoomen mit Strg plus Mausrad, verschieben durch Ziehen.
touch-action:pan-y laesst am Handy das senkrechte Seiten-Scrollen zu und
gibt uns waagrechtes Ziehen plus Zwei-Finger-Zoom. */
.sk-view{position:relative; overflow:hidden; border:1px solid var(--border-light);
border-radius:var(--radius); background:var(--surface-2);
height:clamp(420px,72vh,820px); cursor:grab; touch-action:pan-y;
background-image:radial-gradient(circle, rgba(107,138,150,.28) 1px, transparent 1px);
background-size:22px 22px}
.sk-view.grabbing{cursor:grabbing}
.sk-view.grabbing .sk-canvas{user-select:none}
.sk-canvas{transform-origin:0 0; width:max-content; position:absolute; top:0; left:0; will-change:transform;
/* Ton der Verbindungslinien. --border-light (#e6e6e6) war auf dem Leinwand-Grund
(#f6f6f4) praktisch unsichtbar. #c3cbd0 ist heller als die Wireframe-Obergrenze
#a9b4ba, verletzt die Regel aus rules/bildstelle-design.md also nicht. */
--sk-linie:var(--wf-block-2)}
.sk-tip{display:block; margin-top:8px; text-align:right; font-size:10.5px; font-weight:700;
color:var(--text-tri); pointer-events:none}
/* Vollbild-Overlay fuer die Leinwand. Scroll-Sperre samt Scrollbar-Ausgleich
liegt im JS, siehe rules/modal-overlay-scroll-lock.md. */
html.sk-locked{overflow:hidden}
.sk-overlay{position:fixed; inset:0; z-index:80; background:var(--overlay-bg);
padding:14px clamp(12px,3vw,26px) 18px; display:flex; flex-direction:column;
overscroll-behavior:contain}
.sk-overlay .sk-bar{margin:0 0 10px; flex:0 0 auto}
.sk-overlay .sk-view{flex:1 1 auto; height:auto; min-height:0}
.sk-overlay .sk-full{background:var(--panel); color:var(--panel-ink); border-color:var(--panel)}
/* Verschieben und Zoomen gehen auch eingebettet, siehe Begruendung im JS. */
.sk-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px}
/* Die Reihe mit der Startseite bekommt KEINEN eigenen Abstand nach unten.
Sonst addieren sich .sk-row (22) und .sk-lead (60) zu 82 px, die Leitung ist
aber 60 px lang und endete 22 px vor der Sammellinie. Verbundenheit ist ein
Ja-Nein-Reiz, fast verbunden gibt es nicht. Gefunden im Design-Review. */
.sk-row-lead{margin-bottom:0}
.sk-row:last-child{margin-bottom:0}
.sk-col{display:flex; flex-direction:column; gap:10px; width:212px; flex:0 0 auto}
.sk-head{background:var(--panel); color:var(--panel-ink); border-radius:9px; padding:9px 11px; text-align:center;
font-size:12.5px; font-weight:900; letter-spacing:-0.01em}
.sk-head .sk-c{display:block; font-size:9.5px; font-weight:700; opacity:.6; margin-top:2px;
text-transform:uppercase; letter-spacing:.7px}
.sk-lab{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
color:var(--text-tri); margin:0 0 8px}
/* Die Startseite ist der Anker der Karte und darf breiter sein. */
/* ---- Titelleiste IN DER LEINWAND (Feinschliff 2026-08-11) -----------------
Ausgangslage gemessen: 212 px Kachel minus Rahmen minus Polster ergibt 192 px
innen. Davon gingen Fensterpunkte 29, Statuschip 45, bei Unterseiten
zusaetzlich der Vermerk 55 und zwei Abstaende. Fuer den Titel blieben 106 px,
also rund 17 Zeichen je Zeile. Daher Titel mit vier und fuenf Zeilen.
Zweiter Befund: bei 23 Prozent Zoom ist 11 px Schrift 2,5 px hoch, also
ohnehin unlesbar. Punkte und Chip kosteten damit ein Viertel der Titelbreite
fuer Information, die in der Uebersicht gar nicht ankommt.
Loesung: in der Leinwand bekommt der Titel die vollen 192 px, der Zustand
wandert auf die FLAECHE der Leiste. Flaeche ueberlebt das Verkleinern.
Die grosse Seitenansicht (.pv-grid) bleibt unveraendert. */
.sk-canvas .pv-dots{display:none}
.sk-canvas .pv-bar .chip{display:none}
.sk-canvas .sk-sub .pv-bar::after{content:none}
/* Zentriert in BEIDEN Achsen (Romans Vorgabe 2026-08-12). Die feste Hoehe von
42 px bleibt am Balken, nicht am Titel: nur so sitzt ein einzeiliger Titel in
der Mitte statt oben, und trotzdem sind alle Balken gleich hoch. Das ist
Bedingung fuer die Abzweige der Baumlinien, die bei 22 px ansetzen. */
.sk-canvas .pv-bar{display:flex; align-items:center; justify-content:center;
min-height:42px; padding:7px 9px}
.sk-canvas .pv-t{
font-size:11px; font-weight:800; letter-spacing:-0.01em; line-height:1.25;
min-height:0;
display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:2; line-clamp:2; overflow:hidden;
hyphens:auto; /* braucht lang="de" am html-Element */
overflow-wrap:break-word; /* Notbremse, nur wenn ein Wort allein nicht passt */
min-width:0;
text-align:center; /* Romans Vorgabe: Titel zentriert ueber der Kachel.
Bewusste Ausnahme von der Linksbuendig-Regel, weil
es eine Fenster-Titelzeile ist und kein Fliesstext. */
}
/* ---- Zustand: ein N in der Ecke, kein Flaechenton (Korrektur 2026-08-12) ----
Vorher trug die Titelleiste den Zustand als Flaeche: gruen fuer neu, grau fuer
bestehend, blaugrau fuer spaeter. Zwei Probleme, beide von Roman benannt:
die Toene lagen zu nah beieinander, um sie ohne Legende zu trennen, und
gleichzeitig war die gruene Flaeche auffaelliger als die Information wert ist
(bei 37 Kacheln ist "neu" der Normalfall, nicht die Ausnahme).
Jetzt: bestehende Seiten haben KEIN Merkmal, neue ein kleines N in der Ecke.
Ein Zeichen ist eindeutig, es bleibt bei 53 Prozent noch als Punkt sichtbar,
und es konkurriert nicht mit dem dunklen Kopf der Startseite. */
.pv-n{display:none}
/* Sitzt UNTEN rechts in der Titelleiste, nicht oben. Grund, gesehen im Prueflauf:
die Leiste reserviert immer zwei Textzeilen, einzeilige Titel lassen die
zweite frei. Oben rechts ueberlappte der Merker deshalb lange einzeilige
Titel ("Rauchmelder und Feuerloescher"), unten rechts liegt er im freien
Feld, und bei zweizeiligen Titeln endet die zentrierte zweite Zeile vor
der Ecke. */
.sk-canvas .pv-n{
display:flex; align-items:center; justify-content:center;
position:absolute; bottom:3px; right:4px; z-index:2;
width:13px; height:13px; border-radius:50%;
background:var(--green); color:var(--bs-on-green);
font-size:8.5px; font-weight:900; line-height:1; letter-spacing:0;
}
/* ---- MODUS UEBERSICHT (.sk-simple), gebaut 2026-08-11 auf Romans Idee -----
Die Kachelkoerper sind eingeklappt, jede Kachel ist gleich hoch. Dadurch
schrumpft die Karte auf rund ein Drittel der Flaeche und passt auf etwa
68 statt 23 Prozent ins Fenster. Erst dort sind die Titel lesbar, denn bei
23 Prozent ist 11 px Schrift 2,5 px hoch.
Der Umschalter steht in der Leiste, Uebersicht ist der Startzustand.
Die Zweck-Kaertchen wirken in beiden Modi, weil sie an der Titelleiste
haengen. Im vereinfachten Modus sind sie wichtiger, weil die Wireframes
fehlen. */
.sk-canvas.sk-simple .pv-body{
max-height:0; opacity:0; padding-top:0; padding-bottom:0;
overflow:hidden; border:0;
}
.sk-canvas.sk-simple .pv-more{display:none}
/* Ein Streifen als Andeutung, dass hinter der Kachel eine Seite mit Inhalt steckt */
.sk-canvas.sk-simple .pv::after{
content:''; display:block; height:5px; margin:0 9px 8px;
border-radius:3px; background:var(--wf-block);
}
/* Uebergang: Koerper klappt aus und ein. Auf max-height, weil auto nicht animierbar ist.
1400 px reichen fuer die hoechste Kachel, die Startseite. */
.sk-canvas .pv-body{max-height:1400px; opacity:1; transition:max-height .3s ease, opacity .22s ease}
@media (prefers-reduced-motion:reduce){
.sk-canvas .pv-body{transition:none}
}
/* Verbindungslinien liegen seit dem Umbau auf die Baumreihe (2026-08-12) nicht
mehr am Modus, sondern an der Struktur, siehe Abschnitt "Baumreihe" weiter
unten. Der frueher gescheiterte Versuch war eine waagrechte Sammellinie ueber
umbrechenden Bloecken: CSS kennt keine Reihen-Erkennung im Flex-Umbruch,
deshalb zeigten die Abzweige der zweiten Reihe ins Leere. Mit genau EINER
Reihe je Ebene ist das Problem verschwunden.
Fuer frei verschiebbare Knoten siehe
knowledge/tech/infinite-canvas-und-node-editoren.md. */
/* Der Umschalter selbst: zwei Knoepfe als eine Einheit */
.sk-toggle{display:inline-flex; border:1px solid var(--border-light); border-radius:9px;
overflow:hidden; background:var(--surface)}
.sk-bar .sk-toggle .sk-btn{border:0; border-radius:0; margin:0}
.sk-bar .sk-toggle .sk-btn + .sk-btn{border-left:1px solid var(--border-light)}
/* Legende, erklaert die Toene einmal statt 38 mal */
.sk-legend{display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:10.5px;
font-weight:700; letter-spacing:.4px; text-transform:uppercase;
color:var(--text-tri); margin:0 0 10px}
.sk-legend span{display:flex; gap:6px; align-items:center}
.sk-legend i{width:14px; height:10px; border-radius:2px; border:1px solid var(--border-light)}
.sk-legend i.leit{background:var(--panel); border-color:var(--panel)}
.sk-legend i.haupt{background:#244352; border-color:#244352}
.sk-legend i.sub{background:#4a6b78; border-color:#4a6b78}
/* Muster des N-Merkers, damit die Legende zeigt statt beschreibt */
.sk-legend i.nb{display:flex; align-items:center; justify-content:center;
width:13px; height:13px; border-radius:50%; border:0;
background:var(--green); color:var(--bs-on-green);
font-size:8.5px; font-weight:900; font-style:normal; line-height:1}
/* ---- Startseite als Leitseite -------------------------------------------
Sie wirkte nicht zu klein, sondern zu leer: 446 px verdoppelten die Flaeche,
der Inhalt blieb gleich, und niedrige Dichte liest sich als geringe
Wichtigkeit. Prominenz kommt hier aus vier Quellen, Flaeche ist die
schwaechste davon: Isolation, ein einziges dunkles Element auf der ganzen
Karte, hoehere Dichte, und ein Konnektor nach unten.
Breite 344 px ist 212 mal dem Goldenen Schnitt. */
.sk-lead{width:344px; margin:0 auto 60px; position:relative} /* auto zentriert im Flex-Container */
.sk-lead .pv{width:100%}
/* Kein Label mehr ueber der Kachel: die Titelleiste sagt seit dem Umbau selbst
"Startseite", das Wort stand zweimal uebereinander. */
.sk-lead::after{content:''; position:absolute; left:50%; bottom:-60px;
transform:translateX(-50%); width:2px; height:60px; background:var(--sk-linie, #c3cbd0)}
/* Dichte: vier Spalten im Bento-Koerper, damit die Breite Inhalt traegt */
.sk-lead .pv-body.bento{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ---- Baumreihe: Hauptebene in EINER Reihe, Unterseiten einspaltig ----------
Umbau 2026-08-12 auf Romans Vorgabe. Vorher waren die Bereiche Bloecke, deren
Unterseiten in mehrere Spalten umbrachen; das machte die Karte flach und den
Einpass-Massstab gross, verwischte aber die Aussage. Jetzt gilt:
eine Spalte ist ein Menuepunkt mit allem, was daran haengt, und die Reihe
oben ist das Hauptmenue. Das gilt in BEIDEN Modi.
Gemessen bei 37 Seiten in einem Fenster von 1.440 mal 900, Endstand nach
allen Runden vom 12.08.: Karte 1.744 mal 1.195 px, eingebettet 52 Prozent,
im Vollbild 62. Der ausfuehrliche Modus ist 1.744 mal 3.513 px, er landet auf
Breite-eingepasst (68 Prozent) und ergibt bei vollem Einpassen 18. Er ist zum
Hineinzoomen gedacht, deshalb wirken Ziehen und Rad auch ohne Vollbild.
Die Linien funktionieren hier, anders als beim frueheren Versuch: es gibt je
Ebene genau eine Reihe, also keinen Flex-Umbruch, ueber den eine Sammellinie
ins Leere zeigen koennte. Jede Unterseite traegt ihr eigenes Linienstueck. */
/* Alle Zweige gleich breit (234 px), sonst sind die Luecken in der Hauptreihe
ungleich: ein Zweig mit Unterseiten ist wegen des Einzugs 234 px breit, einer
ohne nur 212, bei gleichem Gap ergab das 42 px Luft zwischen den ersten und
20 px zwischen den letzten drei. Naehe ist der staerkste Gruppierungsreiz,
die engere Stelle behauptete eine Dreiergruppe, die es nicht gibt.
Gemessen im Design-Review. Seit die Kachel MITTIG im Zweig sitzt (siehe
.sk-main), ist die Karte ausserdem exakt symmetrisch. */
/* Abstaende, zweimal von Roman nachgezogen (2026-08-12): erst von 12 auf 34,
dann alle Werte verdoppelt. Waagrecht 68 px Gap plus die 22 px, die jeder
Zweig rechts fuer den Einzug freilaesst, ergeben 90 px sichtbare Luft zwischen
zwei Kacheln, also rund 42 Prozent der Kachelbreite von 212.
Der Abstand arbeitet fuer die Aussage: senkrecht enger als waagrecht bindet
jede Spalte zu einem Strang zusammen, Naehe ist der staerkste
Gruppierungsreiz. Deshalb wurden beide Achsen zusammen verdoppelt, nicht nur
eine, sonst kippt das Verhaeltnis. */
.sk-tree{position:relative; display:flex; gap:68px; align-items:flex-start;
justify-content:center}
/* Zweite Reihe: die Seiten ohne Unterseiten, kompakt unter dem Baum und ueber
den Stamm mit der Startseite verbunden. */
.sk-tree-fuss{margin-top:56px}
/* Der STAMM. Er laeuft von der Sammellinie der Hauptreihe senkrecht nach unten
bis auf die Sammellinie der Fussreihe. Dass er dabei durch keine Kachel geht,
ist kein Zufall und auch keine Konstruktion fuer diesen einen Fall:
ALLE Kacheln sitzen mittig in ihrem 234 px breiten Zweig, deshalb liegt jede
Kachelmitte auf der Zweigmitte, und die Mitte der Karte ist damit entweder
eine Zweigmitte (ungerade Anzahl) oder die Mitte einer Luecke (gerade Anzahl).
Bei sechs Menuepunkten ist es eine 90 px breite Luecke.
Bei ungerader Anzahl liefe der Stamm durch die mittlere Spalte, deshalb steht
die Regel unten, die ihn dann abschaltet. */
.sk-tree-haupt:not(:last-child)::after{content:''; position:absolute;
left:calc(50% - 1px); top:0; bottom:-56px; width:2px; background:var(--sk-linie)}
/* Bei ungerader Anzahl Menuepunkte liegt die Kartenmitte auf einer Spalte, dann
liefe der Stamm durch die Kacheln. Der Selektor prueft, ob die letzte Kachel
ein ungerad gezaehltes Kind ist, das ist genau dann der Fall. Ohne Stamm
traegt die Verbindung die Position, das ist immer noch besser als eine Linie,
die durch Inhalte laeuft. */
.sk-tree-haupt:has(> .sk-branch:nth-child(odd):last-child)::after{content:none}
.sk-branch{position:relative; display:flex; flex-direction:column; gap:20px; flex:0 0 auto;
width:234px; padding-top:22px} /* Platz fuer Sammellinie und Stichleitung */
/* Die Kachel sitzt MITTIG im Zweig (212 in 234, also 11 px Rand), nicht
linksbuendig. Damit liegt jede Kachelmitte auf der Zweigmitte, und daraus
folgt: Sammellinien-Mitte, Startseiten-Mitte, Stamm und Fussreihen-Mitte
liegen alle auf derselben Achse, unabhaengig davon wie viele Zweige es gibt
und welcher davon Unterseiten hat. Vorher war die Karte um 11 px
unsymmetrisch, weil der Einzug der Unterseiten nur rechts Platz brauchte. */
.sk-main{position:relative; flex:0 0 auto; margin-left:11px}
/* Sammellinie ueber der Hauptebene, aus zwei Haelften je Zweig zusammengesetzt.
Warum nicht eine Linie auf .sk-tree: die Zweige sind unterschiedlich breit
(mit Unterseiten 234 px wegen des Einzugs, ohne 212 px), eine durchgehende
Linie mit festen Randabstaenden wuerde am letzten Zweig danebenliegen.
Rechte Haelfte laeuft 18 px ueber den eigenen Rand hinaus, also genau bis zur
Kante des naechsten Zweigs, wo dessen linke Haelfte weitermacht. Ergebnis ist
eine Linie von der Mitte der ersten bis zur Mitte der letzten Hauptseite. */
.sk-branch:not(:last-child)::before{content:''; position:absolute; top:0; left:117px;
right:-68px; height:2px; background:var(--sk-linie)}
.sk-branch:not(:first-child)::after{content:''; position:absolute; top:0; left:0;
width:118px; height:2px; background:var(--sk-linie)}
/* Stichleitung von der Sammellinie herunter zur Hauptseite. Nur wenn es
mehr als einen Zweig gibt, sonst haengt sie im Nichts. */
.sk-branch:not(:only-child) .sk-main::before{content:''; position:absolute; left:105px;
top:-22px; width:2px; height:22px;
background:var(--sk-linie)}
/* Einzug 22 px, damit die Leitung bei 11 px sitzt und die Unterordnung auch
ohne Farbe zu sehen ist. */
/* 36 px zwischen Hauptseite und erster Unterseite (20 Zweig-Gap plus 16), und
20 px zwischen den Unterseiten. Der Unterschied muss bleiben: gleicher Abstand
machte aus Menuepunkt und Unterseiten eine Liste von Gleichrangigen, die Ebene
haette dann allein am Farbton gehangen. */
.sk-kids{display:flex; flex-direction:column; gap:20px; padding-left:33px; margin-top:16px}
.sk-kid{position:relative}
/* Senkrechte Leitung: beginnt am unteren Rand der Kachel darueber (deshalb
top:-10px, das ist der Zwischenraum) und laeuft bis zur Mitte der Titelleiste
dieser Kachel. Die Titelleiste ist in der Leinwand 42 px hoch (zweizeilige
Titel 42,5), ihre Mitte liegt gemessen bei 22 px, in beiden Modi.
ACHTUNG: die vier Werte unten haengen an den Abstaenden im Zweig (20 px
zwischen Unterseiten, 36 px zur Hauptseite). Wer die Abstaende aendert, muss
sie mitziehen, sonst endet eine Leitung im Leeren. */
.sk-kid::before{content:''; position:absolute; left:-11px; top:-20px; width:2px;
height:42px; background:var(--sk-linie)}
/* Bei allen ausser der letzten laeuft sie durch bis zur naechsten Kachel. */
.sk-kid:not(:last-child)::before{height:calc(100% + 20px)}
/* Die erste Unterseite haengt 36 px unter der Hauptseite, ihre Leitung ist
entsprechend laenger. */
.sk-kid:first-child::before{top:-36px; height:58px}
.sk-kid:first-child:not(:last-child)::before{height:calc(100% + 36px)}
/* Waagrechter Abzweig auf Hoehe der Titelleiste */
.sk-kid::after{content:''; position:absolute; left:-11px; top:22px; width:11px;
height:2px; background:var(--sk-linie)}
/* ---- Drei Ebenen als drei Dunkelstufen (Romans Vorgabe 2026-08-12) ---------
Vorher waren alle Titelleisten hell und die Kacheln unterschieden sich nur
durch einen Hauch Ton. Romans Befund: "Das schaut aus wie ein Einheitsbrei.
Man sollte sehen, was eine Seite ist und was nicht." Der Grund war, dass die
Abschnitts-Etiketten INNERHALB einer Kachel genauso hell waren wie der
Seitentitel DARUEBER, also sah eine Seite aus wie ein Abschnitt.
Jetzt tragen die Titelleisten die Ebene:
Startseite #051922 (Marken-Accent, am dunkelsten, plus Schlagschatten)
Menuepunkt #244352 (eine Stufe heller, Weiss darauf 10,5:1)
Unterseite #4a6b78 (zwei Stufen heller, Weiss darauf 5,7:1)
Der Abschnitts-Inhalt bleibt hell. WICHTIG zur Regel in
rules/bildstelle-design.md: die Obergrenze #a9b4ba gilt fuer den
WIREFRAME-INHALT, nicht fuer den Rahmen der Kachel. Dunkle Skizzenbloecke
lesen sich als Inhalt und dominieren, eine dunkle Titelleiste liest sich als
Fensterrahmen und ordnet. Genau diese Trennung wollte Roman.
Der frueher hier stehende Text-Vermerk "Unterseite" ist raus, er hat 55 px
der Titelbreite gekostet und war beim Verkleinern unlesbar. */
.sk-canvas .pv{border:1px solid var(--wf-linie-kraeftig)}
.sk-canvas .sk-main .pv-bar{background:#244352; border-bottom-color:#244352}
.sk-canvas .sk-main .pv-t{color:#fff}
.sk-canvas .sk-sub .pv-bar{background:#4a6b78; border-bottom-color:#4a6b78}
.sk-canvas .sk-sub .pv-t{color:#fff}
/* Unterseiten sind WEISS wie jede andere Seite. Vorher trugen sie den Ton der
Leinwand (#f6f6f4), damit war die weisseste Flaeche in einer Unterseite ihr
Abschnitts-Etikett und nicht die Seite selbst. Ein Blatt liest sich als Blatt
ueber die Flaeche, nicht ueber eine 1 px Kontur, die bei 54 Prozent nur noch
einen halben Pixel dick ist. Die Ebene traegt jetzt die Titelleiste, der
Einzug und die Astlinie, das sind drei Merkmale statt eines vierten Tons. */
/* ---- Das EINZIGE dunkle Element der Karte: der Kopf der Startseite --------
Bewusst am Ende, damit es die Zustands-Toene von oben ueberschreibt. Bei
23 Prozent Zoom, wo kein Text lesbar ist, ist das der einzige Ankerpunkt im
Bild, und genau dort gehoert er hin. Das Schwarz, das vorher 38 mal in den
Handlungsaufruf-Balken sass, sitzt jetzt einmal hier. */
.sk-canvas .sk-lead .pv{
/* Die Breite MUSS hier stehen, nicht bei .sk-lead .pv. Beide waeren gleich
spezifisch wie .sk-canvas .pv{width:212px} weiter unten, und das gewinnt
dann als spaetere Regel. Folge, gemessen 2026-08-12: die Startseite war in
der Leinwand 212 px breit und sass linksbuendig in einem 344 px breiten
Kasten, also 66 px neben ihrer eigenen Verbindungslinie. Sichtbar war das
nur als "die Startseite wirkt nicht wie die Startseite". */
width:100%;
border:1px solid var(--panel);
box-shadow:0 10px 28px rgba(5,25,34,.11), 0 2px 6px rgba(5,25,34,.06);
}
.sk-canvas .sk-lead .pv-bar,
.sk-canvas .sk-lead .pv[data-status] .pv-bar{background:var(--panel)}
.sk-canvas .sk-lead .pv-t{color:var(--panel-ink)}
.sk-canvas .sk-lead .pv-body{background:var(--surface)}
/* Mockups in der Karte kleiner, Proportionen bleiben ueber den --h-Faktor. */
.sk-canvas .pv{width:212px}
.sk-canvas .pv-bar{padding:7px 9px; gap:6px}
.sk-canvas .pv-t{font-size:11px}
.sk-canvas .pv-body{padding:7px; gap:4px}
.sk-canvas .pv-wf{min-height:calc(var(--h,52px) * 0.6); padding:5px; gap:3px}
.sk-canvas .pv-lab{font-size:8px; padding:1px 4px; top:3px; left:4px}
.sk-canvas .pv-more{display:none}
.sk-canvas .chip{font-size:9px; padding:2px 6px}
@media (max-width:560px){
.sk-lead{width:212px}
.sk-view{padding:10px}
}
@media (max-width:720px){
.tr-row{flex-direction:column; min-width:0}
.tr-branch{width:100%}
.tr{overflow-x:visible}
/* Am Handy passt die Karte nur auf rund 15 Prozent, also auf etwa ein Sechstel
der Hoehe des Fensters. Der Rest waere leerer Rasterhintergrund. Deshalb hier
ein flacheres Fenster. Gelesen wird die Struktur am Handy ohnehin in der
Baum-Gliederung darunter (#seitenbaum), die untereinander umbricht;
die Karte ist ein Instrument fuer den Rechner und fuer das Vollbild. */
.sk-view{height:clamp(260px,44vh,440px)}
}
/* ---- Diagramme aus HTML und CSS (seit 2026-08-13) --------------------------
Bewusst KEIN SVG und keine Bibliothek. Grund, gemessen: SVG skaliert seinen
Text mit der Grafik, eine 13-px-Beschriftung in einer 1000er Zeichenflaeche
ist bei 350 px Fensterbreite 4,5 px hoch und damit unlesbar. HTML-Balken
behalten die echte Schriftgroesse auf jeder Breite, drucken sauber und
brauchen kein JavaScript.
Einsatz: Kunden-Unterlagen, die aus Nutzungsdaten argumentieren. --------- */
.diag{border:1px solid var(--border-light); border-radius:var(--radius);
background:var(--surface); padding:18px 20px 16px; margin:0 0 18px}
.diag-t{font-size:13.5px; font-weight:900; letter-spacing:-0.01em; margin:0 0 3px}
.diag-s{font-size:12.5px; color:var(--text-sec); margin:0 0 16px; max-width:66ch}
.diag-f{font-size:11px; line-height:1.5; color:var(--text-tri); margin:14px 0 0; max-width:70ch}
/* Senkrechte Saeulen fuer einen Zeitverlauf */
.saeulen{display:flex; align-items:flex-end; gap:4px; height:150px; margin:0 0 7px}
.saeule{flex:1 1 0; min-width:0; display:flex; flex-direction:column;
justify-content:flex-end; height:100%}
.saeule i{display:block; height:var(--h); min-height:2px; border-radius:3px 3px 0 0;
background:var(--accent)}
.saeule.spitze i{background:var(--green)}
.saeule.teil i{background:repeating-linear-gradient(135deg,#aab6bc 0 4px,#cdd4d8 4px 8px)}
.saeulen-x{display:flex; gap:4px; font-size:9.5px; font-weight:800;
letter-spacing:.2px; color:var(--text-tri)}
.saeulen-x span{flex:1 1 0; min-width:0; text-align:center; white-space:nowrap;
overflow:visible} /* darf in die leere Nachbarspalte ragen, sonst
wird "1/25" am Handy auf "1/2" beschnitten */
/* Waagrechte Balken */
.balken{display:grid; gap:9px}
.bz{display:grid; grid-template-columns:minmax(130px,15em) 1fr auto; gap:12px; align-items:center}
.bz-l{font-size:12px; font-weight:700; line-height:1.3}
.bz-s{display:block; height:16px; background:var(--surface-2); border-radius:4px; overflow:hidden}
/* display:block ist Pflicht, nicht Kosmetik: als im Grid wird die Schiene
blockifiziert, ihr Kind aber nicht, und height:100% wirkt an einem inline
Element nicht. Die Fuellung war dadurch unsichtbar (Prueflauf 2026-08-17). */
.bz-f{display:block; height:100%; width:var(--w); border-radius:4px; background:var(--accent)}
.bz-f.gruen{background:var(--green)}
.bz-f.grau{background:#c3cbd0}
.bz-w{font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Ein gestapelter Balken mit Legende */
.stapel{display:flex; height:34px; border-radius:6px; overflow:hidden; margin:0 0 11px}
.stapel span{display:flex; align-items:center; justify-content:center; min-width:0;
overflow:hidden; white-space:nowrap; font-size:11px; font-weight:900; color:#fff}
.stapel-leg{display:flex; flex-wrap:wrap; gap:16px; font-size:11.5px; font-weight:700;
color:var(--text-sec)}
.stapel-leg i{display:inline-block; width:11px; height:11px; border-radius:3px;
margin-right:6px; vertical-align:-1px}
/* Vergleichstabelle zweier Zeitpunkte */
.vgl{width:100%; border-collapse:collapse; font-size:13px; margin:0 0 6px}
.vgl th{text-align:left; font-size:10.5px; font-weight:800; text-transform:uppercase;
letter-spacing:.8px; color:var(--text-tri); padding:0 10px 8px 0; border-bottom:1px solid var(--border-light)}
.vgl th:not(:first-child), .vgl td:not(:first-child){text-align:right}
.vgl td{padding:9px 10px 9px 0; border-bottom:1px solid var(--border-light);
font-variant-numeric:tabular-nums}
.vgl td:first-child{font-weight:700}
.vgl .pfeil{font-weight:900}
.vgl .rauf{color:#1a7f4f}
.vgl .runter{color:#b4553a}
@media (max-width:560px){
.bz{grid-template-columns:1fr auto; row-gap:5px}
.bz-s{grid-column:1 / -1; order:3}
.saeulen{height:120px}
.diag{padding:15px 14px 13px}
.vgl{font-size:12px}
}
/* ---- Aufklapper fuer lange Detail-Abschnitte (seit 2026-08-17) -------------
Anlass: die FF-Laxenburg-Unterlage war 40.048 px hoch, also 44,5
Bildschirme, und drei Abschnitte mit derselben Information machten 64
Prozent davon aus. Loeschen war falsch, weil der Inhalt fuer Rueckfragen
gebraucht wird. Ein Aufklapper macht das Dokument kurz und laesst nichts weg.
Im Druck oeffnet der PDF-Bau alle details per JS, CSS kann das nicht. ------ */
.klapp{border:1px solid var(--border-light); border-radius:var(--radius);
background:var(--surface); margin:0 0 32px; overflow:hidden}
.klapp > summary{list-style:none; cursor:pointer; padding:20px 24px;
display:flex; align-items:center; gap:14px}
.klapp > summary::-webkit-details-marker{display:none}
.klapp > summary::after{content:'+'; margin-left:auto; flex:0 0 auto;
font-size:22px; font-weight:900; line-height:1;
color:var(--text-tri); transition:transform .2s}
.klapp[open] > summary::after{content:'\2212'}
.klapp > summary:hover{background:var(--surface-2)}
.klapp .kl-t{font-size:16px; font-weight:900; letter-spacing:-0.01em; display:block}
.klapp .kl-s{font-size:13px; color:var(--text-sec); display:block; margin-top:3px; max-width:70ch}
.klapp .kl-in{padding:0 24px 8px; border-top:1px solid var(--border-light)}
.klapp .kl-in > .section:first-child{padding-top:26px}
@media (max-width:560px){ .klapp > summary{padding:16px 16px} .klapp .kl-in{padding:0 16px 6px} }
/* ---- Zusammenfassungs-Leiste ---- */
.sum{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-light);
border:1px solid var(--border-light); border-radius:var(--radius); overflow:hidden; margin:0 0 32px}
.sum div{background:var(--surface); padding:16px 18px}
.sum .n{font-size:26px; font-weight:900; letter-spacing:-0.03em; line-height:1.1}
.sum .k{font-size:12px; color:var(--text-tri); margin-top:3px}
@media (max-width:900px){ .sum{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
.pp{padding:20px 18px}
.pp-sec{grid-template-columns:96px 1fr; gap:14px}
.sm-lvl .sm-lvl{margin-left:12px; padding-left:14px}
.sm-lvl .sm-lvl>.sm-node::before{left:-14px; width:10px}
}
@media (max-width:440px){ .sum{grid-template-columns:1fr} }
/* =============================================================
DUNKELMODUS-BAUSTEINE (2026-08-17)
Zwei Teile, die jede Dokumentseite braucht, sobald sie umschalten
koennen soll. Sie stehen hier und nicht in jeder Seite, damit es
eine Wahrheit gibt (dieselbe Logik wie in landing/style.css).
Im HTML gehoert dazu, GANZ OBEN im head vor dem ersten sichtbaren
Element, damit beim Laden nichts aufblitzt:
Der Schluessel heisst ueberall gleich (bildstelle-theme), damit die
Wahl zwischen bildstelle-Seiten auf derselben Domain haelt.
============================================================= */
/* ---- Wortmarke hell/dunkel. Beide img im HTML, CSS blendet um.
bildstelle-wortmarke-hell.svg mit in den Deploy-Ordner kopieren. ---- */
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
/* ---- Umschalter: Mond bei Hell (zeigt an, wohin es geht), Sonne bei Dunkel ---- */
.theme-toggle{width:42px; height:42px; border-radius:50%; border:1px solid var(--border-light);
background:var(--surface); color:var(--text); cursor:pointer; display:flex;
align-items:center; justify-content:center; flex:0 0 auto;
transition:background .2s, border-color .2s}
.theme-toggle:hover{border-color:var(--text-sec)}
.theme-toggle svg{width:18px; height:18px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
/* Im Markenband schwebt der Umschalter oben rechts. So bleibt die zentrierte
Komposition aus Logo und Claim unangetastet, und die Position ist auf jeder
Dokumentseite dieselbe. Greift nur, wenn eine Seite den Knopf einbaut. */
.brand-band{position:relative}
.brand-band .theme-toggle{position:absolute; top:18px; right:clamp(14px,3vw,28px)}
@media (max-width:720px){
.brand-band .theme-toggle{top:12px; right:12px; width:36px; height:36px}
.brand-band .theme-toggle svg{width:16px; height:16px}
}
/* Weicher Uebergang beim Umschalten, aber nur auf der Flaeche. Nicht auf
allem, sonst ruckelt jedes Aufklappen mit. */
body{transition:background .35s ease, color .35s ease}
@media (prefers-reduced-motion:reduce){ body{transition:none} }
/* Die Welle ist dunkle Zeichnung. Auf dunklem Grund bei 5 Prozent waere sie
unsichtbar, deshalb dort umkehren und leicht anheben. */
:root[data-theme="dark"] .has-welle::after{filter:invert(1); opacity:0.07}
/* Druck: Strukturplan als PDF an den Kunden */
@media print{
.pp, .sm-card{break-inside:avoid}
.doc-nav, .side-nav{display:none !important}
}