/* ══════════════════════════════════════════════════════════════════════════
QS-ONE INVESTORENHUB — KOMPONENTEN 15.09.2026
software-designer · setzt auf tokens.css auf, ohne diese Datei ist alles
hier ungestylt (keine Farben/Größen doppelt definiert).
AUFBAU DIESER DATEI:
1. Grundschicht (Reset, Body, Überschriften, Wrap/Spalten)
2. Stufen-Modus (.stufe1 / .stufe2) — schaltet Dichte-Variablen um
3. Eine Klasse pro Bauteil aus dem Auftrag, in der Reihenfolge des Auftrags
4. Druckregeln
ZWEI GESTEN (Florian, 15.09., wörtlich: „Stufe 1 = Pitch, Stufe 2 =
Erklärung wie bei FinPrep"):
.stufe1 — bühnenhaft: große Leitsätze, viel Luft, kurze Kapitel.
Dunkler Bühnengrund für den Titelbereich, helle Kapitel danach.
.stufe2 — ruhiges, dichtes Lesedokument im Kommentarsatz-Stil:
Randziffern, längere Fließtexte, Tabellen, „Klartext" je Kapitel.
Beide benutzen DIESELBEN Bauteile (Kapitelkopf, Leitsatz, Kennzahl, …) —
der Unterschied liegt in Abstand/Maß/Größe, nicht in neuen Farben oder
einem zweiten Komponenten-Satz. Das ist die sichtbare Zusammengehörigkeit,
um die Florian gebeten hat.
══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────── 1 · Grundschicht ─────────────────────────── */
*{box-sizing:border-box}
/* `overflow-x:hidden` hier (29.09.2026, Netzkarte-Umbau): Sicherheitsnetz
gegen den bekannten `vw`-Bug (auf Desktop-Browsern mit sichtbarer
Scrollleiste misst `vw` die Leiste MIT, ein vollbreites Element kann
dadurch um deren Breite über den echten Dokumentrand hinausragen) - die
vollbreite Netzkarten-Bühne (Kap. 08) ist das erste Element hier, das
bewusst bis an den Viewport-Rand reicht. Betrifft nur die X-Achse,
`position:sticky` (Y-Achse) bleibt davon unberührt. */
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip} /* clip (30.09.): hidden liess scrollIntoView die Seite seitlich verschieben; clip schneidet ohne Scroll-Container, hidden bleibt Rueckfall fuer alte Browser */
/* 16.09. abends, Florian am Bildschirm: „Schrift verbreitern … also den
Text" — am Live-Hub gemessen 14px/23,8px Zeilenhöhe, 342px/601px/601px
Spaltenbreite bei 390/1440/2560px (~41/71/71 Zeichen). QUELLE hier stand
bereits auf --f-body:17px (siehe tokens.css) — das Live-Bild lag also
HINTER diesem Stand (kein neuer Bau seit der letzten Anhebung, siehe
Übergabe an den Entwickler). `line-height` bleibt bewusst RELATIV (1.65
default, 1.7/1.75 je Stufe in Abschnitt 2 unten) statt eines festen
Pixelwerts — sie zieht dadurch automatisch mit jeder künftigen Änderung
von --f-body mit, ohne dass diese Regel angefasst werden muss.
Zeilenlänge (Zeichen/Zeile): `--mass-lese` ist bewusst in `ch` notiert
(Abschnitt 1 unten, `.lese-spalte`) — ch skaliert nativ mit der
Schriftgröße, die ZEICHENZAHL bleibt also beim Anheben von --f-body
praktisch UNVERÄNDERT (68ch bleiben ~68 Zeichen, ob bei 14 oder 17px),
nur die Pixelbreite der Spalte wächst mit. Gerechnet mit dem aus Florians
eigener Messung abgeleiteten Verhältnis 1ch ≈ 0,63 × Schriftgröße
(601px ÷ 68ch ÷ 14px), NICHT geschätzt: bei 17px und 24px Seitenrand
(`.seite{padding:0 24px}`, macht 48px beidseitig) ergibt das
390px → Spalte 342px (390−48, deckt sich exakt mit Florians Messwert) → ~32 Zeichen
(unter 60–75: unvermeidlich bei 390px Breite UND ≥16px Schrift,
kein Fehler — eine 60-Zeichen-Spalte bräuchte hier ~540px, mehr
als der Bildschirm hat)
768px → Spalte 720px (768−48, noch unter dem ch-Deckel) → ~67 Zeichen ✓
1440px → Spalte ~729px (68ch-Deckel greift, wächst nicht weiter) → ~68 Zeichen ✓
2560px → wie 1440px, derselbe Deckel → ~68 Zeichen ✓ (bleibt bewusst so
schmal wie bei 1440px, kein Auseinanderziehen auf großen
Monitoren — das war schon vor dieser Änderung der Sinn von
`--mass-lese` in ch statt %/vw). */
body{
margin:0; background:var(--flaeche-tief); color:var(--ink);
font-family:var(--font-text); font-size:var(--f-body); line-height:1.65;
-webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--font-anzeige); line-height:1.15; letter-spacing:-.015em; margin:0}
/* h3 (Markdown „###" im Kapiteltext) hatte bisher KEINE explizite Größe -
nur h1/h2 wurden anderswo mit --f-h1/--f-h2 belegt, h3 fiel auf die
Browser-Vorgabe zurück (zufällig nahe --f-h3, aber ungenau/instabil).
16.09. abends nachgetragen, damit der Token wirklich greift und mit
--f-body mitgezogen werden kann, nicht nur im Kommentar existiert. */
h3{font-size:var(--f-h3)}
p{margin:0}
a{color:var(--tiefgruen)}
a:focus-visible,button:focus-visible{outline:3px solid var(--tiefgruen); outline-offset:3px; border-radius:6px}
.dunkel a:focus-visible,.dunkel button:focus-visible{outline-color:var(--frischgruen)}
::selection{background:var(--frischgruen); color:var(--navy)}
.seite{max-width:var(--breite-inhalt); margin:0 auto; padding:0 24px}
.lese-spalte{max-width:var(--mass-lese, 66ch); margin:0 auto}
/* 16.09., Korrektur nach Live-Skalierungsmessung: `.sprung` (Sprungmarke
„Zum Inhalt springen" o. ä.) fehlte hier bisher als eigene Regel — sie
war offenbar mit der veralteten `left:-9999px`-Technik eingebaut, die
auf dem Handy zur horizontalen Scrollbarkeit der ganzen Seite beitrug
(eine weit im Negativen positionierte Box zählt in manchen Browsern
trotzdem zur `scrollWidth` des Dokuments). Jetzt die übliche „visuell
verborgen bis Fokus"-Technik: die Box ist im Ruhezustand nur 1×1px groß
und per `clip-path` zugeschnitten (bleibt also IM normalen Fluss, kein
Offset ins Negative), erst beim Fokus wird sie sichtbar groß. */
.sprung{
position:absolute; top:0; left:0; z-index:80;
width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
background:var(--flaeche); color:var(--tiefgruen); text-decoration:none;
font-family:var(--font-anzeige); font-weight:700; font-size:15px;
}
.sprung:focus{
width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal;
padding:12px 20px; border-radius:var(--r-sm); box-shadow:var(--schatten-karte);
}
/* Ein Kapitel ist die wiederkehrende Grundeinheit beider Stufen. Der Abstand
kommt aus der Dichte-Variable, damit Stufe 1 „viel Luft" bekommt und
Stufe 2 dicht bleibt, ohne zwei Klassensätze zu brauchen. */
.kapitel{padding:var(--kapitel-abstand) 0}
.kapitel[id]{scroll-margin-top:96px}
.kapitel + .kapitel{border-top:1px solid var(--line)}
.eyebrow{
display:inline-block; font-family:var(--font-mono); font-size:var(--f-micro);
font-weight:600; letter-spacing:.16em; text-transform:uppercase;
color:var(--tiefgruen); margin-bottom:var(--sp-3);
}
/* ─────────────────────── 2 · Stufen-Modus (Dichte) ─────────────────────── */
.stufe1{
--kapitel-abstand:132px;
--mass-lese:60ch;
--leitsatz-groesse:clamp(28px,4.4vw,46px);
/* 29.09.2026, Komplettabnahme-Befund: bei GENAU 768px unterschritt
`--mass-lese` (60ch ≈ 643px) die verfügbare Breite (768−48 = 720px)
spürbar früher als `--breite-daten` (960px) - `.lese-spalte` blieb
dadurch ~38px schmäler/weiter rechts eingerückt als die Datenbausteine
daneben, die bei derselben Breite bereits voll ausfüllten. Diese
Variable macht den LINKEN Einzug der Lesespalte für Datenbausteine
NACHRECHENBAR (statt eigener, unabhängiger Zentrierung) - siehe
`--daten-versatz`-Verwendung unten bei `.branchenexpansion` &co: die
linke Kante liegt dadurch AUF JEDER Breite exakt auf der von
Überschrift/Fließtext, nach rechts darf der Baustein trotzdem bis
`--breite-daten` breiter sein. `max(0px, …)`, weil das Ergebnis sonst
am Handy negativ würde (Lesespalte dort selbst schon randvoll). */
--daten-versatz:max(0px, calc((100% - var(--mass-lese)) / 2));
}
/* :where() haelt die Spezifitaet bei (0,1,0) — sonst schluege dieses
Kontext-Kompositum jede Utility-Klasse wie `.lead`/`.muted`, die zusammen
MIT `.text` auf demselben Absatz steht (z. B. class="text lead"). */
:where(.stufe1) .text{font-size:calc(var(--f-body) + 1px); line-height:1.75}
.stufe1 .kapitel-kopf{margin-bottom:var(--sp-8)}
.stufe2{
--kapitel-abstand:80px;
--mass-lese:68ch;
--leitsatz-groesse:clamp(20px,2.6vw,26px);
--daten-versatz:max(0px, calc((100% - var(--mass-lese)) / 2));
}
:where(.stufe2) .text{font-size:var(--f-body); line-height:1.7}
.stufe2 .kapitel-kopf{margin-bottom:var(--sp-6)}
/* ─────────────────────── 3.1 · Stufen-Kennzeichnung ─────────────────────── */
.stufenmarke{
display:inline-flex; align-items:center; gap:var(--sp-2);
font-family:var(--font-mono); font-size:var(--f-micro); font-weight:700;
letter-spacing:.16em; text-transform:uppercase; padding:7px 16px;
border-radius:var(--r-btn); line-height:1;
}
.stufenmarke .punkt{width:7px; height:7px; border-radius:50%; flex:none}
.stufenmarke.s1{background:var(--frischgruen); color:var(--navy)} /* 14,2:1 */
.stufenmarke.s1 .punkt{background:var(--navy)}
.stufenmarke.s2{background:#fff; color:var(--tiefgruen); border:1.5px solid var(--tiefgruen)}
.stufenmarke.s2 .punkt{background:var(--tiefgruen)}
.dunkel .stufenmarke.s2{background:transparent; color:var(--frischgruen); border-color:var(--frischgruen)}
.dunkel .stufenmarke.s2 .punkt{background:var(--frischgruen)}
/* 05.10.2026 (Stufe 3 "Das Angebot", Pruefer-Auflage): dieselbe gruene
Kapsel wie Stufe 2 - exakt dieselben zwei Kontexte (Zwischenschild auf
hellem Grund vor Bereich 1, Hero-Schild in der dunklen Buehne), ohne
eigene Regel waere ".s3" bisher auf die unstyled Basisregel oben
zurueckgefallen (kein Hintergrund/keine Umrandung). */
.stufenmarke.s3{background:#fff; color:var(--tiefgruen); border:1.5px solid var(--tiefgruen)}
.stufenmarke.s3 .punkt{background:var(--tiefgruen)}
.dunkel .stufenmarke.s3{background:transparent; color:var(--frischgruen); border-color:var(--frischgruen)}
.dunkel .stufenmarke.s3 .punkt{background:var(--frischgruen)}
/* ───────────────────── 3.2 · Titelbereich Stufe 1 („der Traum") ─────────────────────
Bühnenhaft: volle Breite, Navy-Grund, ein einziger großer Satz, viel Luft.
Die Geisterziffer im Hintergrund zitiert die Kapitelmarken (siehe 3.3) —
der Hub liest sich von der ersten Sekunde an wie ein nummeriertes Dokument,
nicht wie eine Werbefläche. */
.traum-titel{
position:relative; overflow:hidden; background:var(--navy); color:#fff;
padding:var(--sp-9) 0; text-align:center;
}
.traum-titel::before{
/* sehr zurückhaltendes Bühnenlicht — reine Fläche, kein Foto, kein Icon */
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(720px 420px at 50% -10%, rgba(179,255,181,.14), transparent 62%);
}
.traum-titel .innen{position:relative; max-width:var(--breite-buehne); margin:0 auto; padding:0 24px}
.traum-titel .stufenmarke{margin-bottom:var(--sp-6)}
.traum-titel .satz{
font-family:var(--font-anzeige); font-weight:800; font-size:var(--f-traum);
line-height:1.12; letter-spacing:-.02em; margin:0;
}
.traum-titel .satz em{font-style:normal; color:var(--frischgruen)}
.traum-titel .unter{
margin-top:var(--sp-6); font-size:var(--f-lead); color:rgba(255,255,255,.82);
max-width:52ch; margin-inline:auto;
}
@media(max-width:640px){ .traum-titel{padding:var(--sp-8) 0} }
/* ───────────────────── 3.2f · Titelbühne Stufe 2 (Umbau 30.09.2026, zweite Runde) ─────────────────────
Florian: "Das Hauptproblem bleibt der ERSTE Bildschirm von Stufe 2 ...
baue eine Stufe-2-Titelbühne im Stil der Stufe-1-Titelbühne". EIGENE
Klasse, bewusst NICHT `.traum-titel` wiederverwendet - Stufe 1 bleibt
dadurch in jedem Fall unverändert, auch wenn hier später etwas geändert
wird. Gegenüber 3.2 zwei Unterschiede: kleinere Schrift (Stufe 2 ist
überall "leiser" als Stufe 1, vgl. `--leitsatz-groesse`/`--kapitel-
abstand`) und KEIN Besen/Staub-Canvas - reines CSS, keine Laufzeit-
Erzeugung, kein ``. `.dunkel` ist ein bereits
vorbereiteter, bis jetzt ungenutzter Zustand (siehe `.dunkel
.stufenmarke.s2` weiter oben) - hier zum ersten Mal eingesetzt. */
.stufe2-buehne{
position:relative; overflow:hidden; background:var(--navy); color:#fff;
padding:var(--sp-8) 0; text-align:center;
}
.stufe2-buehne::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(640px 360px at 50% -10%, rgba(179,255,181,.1), transparent 62%);
}
.stufe2-buehne .innen{position:relative; max-width:var(--breite-buehne); margin:0 auto; padding:0 24px}
.stufe2-buehne .stufenmarke{margin-bottom:var(--sp-5)}
.stufe2-buehne .satz{
font-family:var(--font-anzeige); font-weight:800; font-size:clamp(28px,4.2vw,44px);
line-height:1.16; letter-spacing:-.015em; margin:0; color:#fff;
}
.stufe2-buehne .unter{
margin-top:var(--sp-4); font-size:var(--f-lead); color:rgba(255,255,255,.82);
max-width:60ch; margin-inline:auto;
}
@media(max-width:640px){ .stufe2-buehne{padding:var(--sp-6) 0} }
/* Dezente Einblendung beim Laden - reines CSS, kein JS, kein Scroll-
Beobachter noetig, weil die Buehne ohnehin das Erste ist, was der
Nutzer sieht. Bei reduzierter Bewegung/im Druck sofort im Endzustand. */
@media(prefers-reduced-motion:no-preference){
.stufe2-buehne .stufenmarke,.stufe2-buehne .satz,.stufe2-buehne .unter{
animation:stufe2-buehne-ein .6s ease-out both;
}
.stufe2-buehne .satz{animation-delay:.08s}
.stufe2-buehne .unter{animation-delay:.16s}
}
@keyframes stufe2-buehne-ein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media print{
.stufe2-buehne{background:#fff !important; color:#000 !important; padding:24px 0}
.stufe2-buehne::before{display:none}
.stufe2-buehne .satz,.stufe2-buehne .unter{color:#000 !important}
.stufe2-buehne .stufenmarke,.stufe2-buehne .satz,.stufe2-buehne .unter{
animation:none !important; opacity:1 !important; transform:none !important;
}
}
/* ───────────────────────── 3.3 · Kapitelkopf mit Nummer ─────────────────────────
Die „Kommentarsatz"-Anmutung, die Florian an der FinPrep-Hülle gefallen
hat — hier mit QS-One-Farben statt Navy/Messing: eine große Geisterziffer
links, Kicker + Titel rechts, eine dünne Linie darunter. */
.kapitel-kopf{
display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4) var(--sp-6);
align-items:end; padding-bottom:var(--sp-5); border-bottom:1.5px solid var(--line);
}
.kapitel-kopf .nr{
font-family:var(--font-anzeige); font-weight:800; font-variant-numeric:tabular-nums;
font-size:var(--f-nr-geist); line-height:.82;
color:var(--frischgruen); -webkit-text-stroke:1.5px var(--tiefgruen);
}
/* 3.3b · Parallax (Der Wisch, Fortsetzung 29.09.2026): hub.html verschiebt
die Geisterziffer per Scroll/rAF leicht langsamer als der Kapiteltext -
nur `transform`, hier nur der Rendering-Hinweis. Nur unter "js-wisch"
(Stufe 1, kein JS-Fehlen/keine reduzierte Bewegung) - ohne diese Klasse
setzt hub.html gar keinen `style.transform`, die Ziffer steht ruhig. */
.js-wisch .stufe1 .kapitel-kopf .nr{will-change:transform}
@supports not (-webkit-text-stroke:1px black){
.kapitel-kopf .nr{color:var(--tiefgruen)}
}
.kapitel-kopf .titel-block h2{font-size:var(--f-h2); color:var(--navy)}
.kapitel-kopf .titel-block .eyebrow{margin-bottom:var(--sp-2)}
@media(max-width:520px){
.kapitel-kopf{grid-template-columns:1fr; gap:var(--sp-2)}
.kapitel-kopf .nr{font-size:clamp(30px,10vw,44px)}
}
/* ───────────────────────────── 3.4 · Fließtext ───────────────────────────── */
.text{font-family:var(--font-text); color:var(--ink); max-width:var(--mass-lese)}
.text.muted{color:var(--muted)}
.text + .text{margin-top:var(--sp-4)}
/* 16.09.: der Lead klebte am ersten Fließtext-Absatz. Ursache: er steht im
Markup als letztes Kind der EINLEITENDEN `.lese-spalte` (mit Kapitelkopf),
der erste `.text`-Absatz aber als erstes Kind der NÄCHSTEN `.lese-spalte`
— beide sind keine CSS-Geschwister, `.text + .text` griff also nie. Fix:
`margin-bottom` direkt am Lead, escaped durch die randlose `.lese-spalte`
nach außen (keine Border/Padding dort, die das verhindern würde). */
.lead{font-size:var(--f-lead); color:var(--muted); max-width:56ch; margin-bottom:1em}
/* ─────────────────────────── 3.5 · Zitat / Leitsatz ─────────────────────────── */
.leitsatz{
font-family:var(--font-anzeige); font-weight:700; font-size:var(--leitsatz-groesse);
line-height:1.28; letter-spacing:-.012em; color:var(--navy); max-width:28ch;
border-left:3px solid var(--orange); padding-left:var(--sp-5); margin:var(--sp-7) 0;
}
.leitsatz cite{
display:block; margin-top:var(--sp-3); font-style:normal;
font-family:var(--font-text); font-weight:600; font-size:var(--f-small); color:var(--muted);
}
.dunkel .leitsatz{color:#fff}
/* 3.5b · Leitsaetze wort fuer wort (Der Wisch, Fortsetzung 29.09.2026):
hub.html zerlegt NUR `.stufe1 .leitsatz p` in `` - und
nur unter derselben "js-wisch"-Bedingung wie das ganze Kapitel-Wischen
oben (3.2c). Ohne JS/bei reduzierter Bewegung bleibt der Satz ein
normaler, unzerlegter Textknoten - sofort vollstaendig sichtbar. `--i`
(je Wort von hub.html gesetzt) staffelt die Verzoegerung, nur
opacity/transform animieren. */
.js-wisch .stufe1 .leitsatz .wort{
display:inline-block; opacity:0; transform:translateY(8px);
transition:opacity .4s ease, transform .4s ease;
transition-delay:calc(var(--i,0) * 45ms);
}
.js-wisch .stufe1 .leitsatz.leitsatz-sichtbar .wort{opacity:1; transform:translateY(0)}
/* ─────────── 3.5c · Dieselben zwei Effekte, DEZENT, für Stufe 2 (Umbau 30.09.2026) ───────────
Florian, wörtlich: "ist gut aber zu trocken, du musst dir denken die
kommen von geil auf hm" - Stufe 2 soll die Energie von Stufe 1 halten,
nur ruhiger. Eigene Klasse "js-stufe2" (hub.html setzt sie NUR wenn
body.stufe2 vorhanden ist), komplett getrennt von "js-wisch"/".stufe1" -
Stufe 1 bleibt dadurch in JEDEM Fall unveraendert, auch wenn hier ein
Fehler stecken sollte. `:not(.pitch-inhalt *)` nimmt das eingeklappte
Stufe-1-Pitch-Zitat aus - das traegt ohnehin schon die Klasse ".stufe1"
und bekommt seine Effekte bereits über die Regeln oben (3.2c/3.5b).
Kleinere Werte als Stufe 1 (12px Weg statt 14px, 6px statt 8px,
0,45s statt 0,6s) - "spürbar, aber dezent" laut Auftrag. Ohne JS/bei
reduzierter Bewegung ist jedes Kapitel/jeder Leitsatz sofort vollständig
sichtbar, exakt wie in Stufe 1. */
.js-stufe2 .stufe2 .kapitel:not(.pitch-inhalt *){
opacity:0; transform:translateY(12px);
transition:opacity .45s ease, transform .45s ease;
}
.js-stufe2 .stufe2 .kapitel.stufe2-sichtbar:not(.pitch-inhalt *){opacity:1; transform:translateY(0)}
.js-stufe2 .stufe2 .leitsatz:not(.pitch-inhalt *) .wort{
display:inline-block; opacity:0; transform:translateY(6px);
transition:opacity .35s ease, transform .35s ease;
transition-delay:calc(var(--i,0) * 35ms);
}
.js-stufe2 .stufe2 .leitsatz.leitsatz-sichtbar:not(.pitch-inhalt *) .wort{opacity:1; transform:translateY(0)}
.stufe2 .leitsatz p{hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.js-stufe2 .stufe2 .leitsatz:not(.pitch-inhalt *) .wort{max-width:100%}
@media(prefers-reduced-motion:reduce){
.js-stufe2 .stufe2 .kapitel:not(.pitch-inhalt *){opacity:1 !important; transform:none !important; transition:none !important}
.js-stufe2 .stufe2 .leitsatz:not(.pitch-inhalt *) .wort{opacity:1 !important; transform:none !important; transition:none !important}
}
@media print{
.js-stufe2 .stufe2 .kapitel:not(.pitch-inhalt *){opacity:1 !important; transform:none !important}
.js-stufe2 .stufe2 .leitsatz:not(.pitch-inhalt *) .wort{opacity:1 !important; transform:none !important; transition:none !important}
}
/* ─────────────────────── 3.6 · Kennzahl-Kachel (Stufe 2) ─────────────────────── */
/* 16.09., Korrektur nach Screenshot-Prüfung: die Einheit brach mitten im Wort
um („00,0 Mi / o €"). Grund: Einheit lag INLINE hinter der Zahl in derselben
Zeile. Jetzt zwingend zweizeilig — die Einheit ist ein eigener Block unter
der Zahl, kann also nie mehr innerhalb eines Wortes umbrechen. Zusätzlich
`minmax` von 180px auf 220px angehoben, damit eine Kachel nie schmaler wird,
als eine lange Einheit („Betriebe") in einer Zeile braucht. */
.kennzahlen{
display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4); margin:var(--sp-6) auto;
max-width:var(--breite-daten);
}
.kennzahl{
background:var(--flaeche); border:1.5px solid var(--line); border-radius:var(--r-card);
padding:var(--sp-5) var(--sp-5); box-shadow:var(--schatten-karte); min-width:0;
}
.kennzahl .zahl{
display:block; font-family:var(--font-anzeige); font-weight:800; color:var(--tiefgruen);
font-size:var(--f-zahl); line-height:1; font-variant-numeric:tabular-nums lining-nums;
white-space:nowrap;
}
.kennzahl .zahl .einheit{
display:block; white-space:nowrap; font-size:.34em; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; margin-top:8px; color:var(--muted);
}
.kennzahl .label{display:block; margin-top:var(--sp-2); font-size:var(--f-small); font-weight:700; color:var(--ink)}
.kennzahl .kontext{display:block; margin-top:var(--sp-1); font-size:13px; color:var(--muted)}
.kennzahl .delta{
display:inline-flex; align-items:center; gap:4px; margin-top:var(--sp-2);
font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:var(--r-btn);
}
.kennzahl .delta.auf{background:var(--hellorange); color:#7A4B00}
.kennzahl .delta.ab{background:#F3D9D6; color:#7A2A20}
/* ─────────────────── 3.7 · Jahrestabelle 2026–2031 ───────────────────
16.09., Korrektur: die Spalte 2031 wirkte am Laptop abgeschnitten, weil der
Tisch bis dahin in `.lese-spalte` (~66ch ≈ 700px) eingesperrt war und die
Scrollbarkeit dort nicht auffiel. Jetzt `max-width:var(--breite-daten)`
(960px) UND außerhalb von `.lese-spalte` platziert (Markup-Pflicht beim
Einbau, siehe DESIGN.md) — bei 960px passen alle sieben Spalten ohne
Scrollen; `.tabelle-scroll` bleibt als Sicherheitsnetz für schmalere
Bildschirme (`min-width:640px` auf der Tabelle erzwingt dort das Scrollen
statt eines Zusammenquetschens). */
.tabelle-scroll{
overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--sp-6) auto;
border:1px solid var(--line); border-radius:var(--r-table); max-width:var(--breite-daten);
}
/* `width:auto` statt `100%`: die Tabelle darf schmaler sein als ihr
Rahmen (z. B. am großen Monitor) — `min-width:640px` bleibt als FLOOR,
nicht als Deckel, damit sie am Handy weiterhin überläuft und dort
`.tabelle-scroll`/`.tabelle-rahmen` zum Scrollen zwingt, statt die
Spalten zusammenzuquetschen. KEIN `max-width` hier — der würde das
Überlaufen genau verhindern, das der Scroll-Rahmen braucht. */
table.jahre{width:auto; min-width:640px; border-collapse:collapse; font-variant-numeric:tabular-nums lining-nums}
table.jahre caption{text-align:left; padding:var(--sp-4) var(--sp-5) 0; font-size:var(--f-small); color:var(--muted)}
table.jahre th,table.jahre td{padding:12px 18px; font-size:15px; white-space:nowrap}
table.jahre thead th{
text-align:right; font-family:var(--font-anzeige); font-weight:700; color:#fff;
background:var(--tiefgruen); font-size:13.5px;
}
/* Pruefer-Befund 05.10.2026: `table.jahre td:first-child,table.jahre
th:first-child{background:var(--flaeche)}` (frueher hier als EINE Regel
fuer Kopf- UND Koerperzellen) hat die eigene Kopfzellen-Regel oben
(thead th{background:tiefgruen; color:#fff}) ueberdeckt - nicht per
Reihenfolge (die Kopfzellen-Regel steht ohnehin DAVOR), sondern per
Spezifitaet: "table.jahre th:first-child" (0,2,2) schlaegt "table.jahre
thead th" (0,1,3). Ergebnis: weisse Schrift auf weissem Grund in JEDER
`table.jahre`-Kopfzeile mit beschrifteter erster Spalte (z. B. "Gesell-
schafter" in :::captable) - unsichtbar, nicht nur unauffaellig. Fix:
die Hintergrund/Sticky-Regel gilt jetzt nur noch fuer `tbody`-Zellen
(Koerperzeilen, inkl. `
`), die Kopfzeile bekommt ihre
eigene sticky-Regel direkt bei den anderen Kopfzellen-Regeln - bleibt
dadurch tiefgruen/weiss wie jede andere Kopfzelle. Jahrestabellen mit
LEERER erster Kopfzelle (z. B. die Planrechnungstabelle) sind davon
nicht betroffen: eine leere Zelle sieht mit tiefgruen/weiss genauso
leer aus wie vorher mit weiss/weiss. */
table.jahre thead th:first-child{
text-align:left; border-radius:var(--r-table) 0 0 0; position:sticky; left:0; z-index:1;
}
table.jahre thead th:last-child{border-radius:0 var(--r-table) 0 0}
table.jahre td{text-align:right; border-top:1px solid var(--line); color:var(--ink)}
table.jahre tbody td:first-child,table.jahre tbody th:first-child{
text-align:left; font-weight:700; position:sticky; left:0; background:var(--flaeche);
}
table.jahre tbody tr:nth-child(even) td{background:var(--flaeche-tief)}
table.jahre tbody tr:nth-child(even) td:first-child{background:var(--flaeche-tief)}
table.jahre tfoot td{border-top:1.5px solid var(--line-stark); font-weight:800; color:var(--tiefgruen)}
/* ─────────────── 3.7b · Tabelle-Rahmen (generischer Scroll-Rahmen) ───────────────
16.09., Befund aus der Live-Skalierungsmessung: Markdown-Tabellen
(`table.tabelle`) UND — je nach Einbau — auch `table.jahre` standen ohne
eigenen Scroll-Rahmen im Fließtext und machten dadurch die GANZE Seite
horizontal scrollbar, nicht nur die Tabelle. `.tabelle-rahmen` ist die
generische Antwort darauf: um JEDE Tabelle, deren Spalten in der Breite
nicht garantiert hineinpassen, wickelt der Entwickler dieses Element.
Anders als `.tabelle-scroll` (3.7, extra für die Jahrestabelle: eigene
Bühnenbreite 960px, eigener Rahmen/Radius, sticky erste Spalte) ist
`.tabelle-rahmen` bewusst UNAUFWÄNDIG und ohne Bühnen-Breite — für ganz
normale Kommentarsatz-Tabellen mitten im Lesefluss (`.mass-lese`-Breite).
Beide Klassen dürfen nebeneinander bestehen; für `table.jahre` selbst
reicht auch `.tabelle-scroll` weiterhin aus (sie hat `overflow-x:auto`
bereits eingebaut) — `.tabelle-rahmen` ist für alle ANDEREN Tabellen da.
Rand-Hinweis „weitere Spalten" ist ein durchgehendes, sehr dezentes
Schlagschatten-Inset am rechten Innenrand (KEIN Farbverlauf, der auf
die Tabellen-Hintergrundfarbe abgestimmt werden müsste — ein
`box-shadow:inset` funktioniert unabhängig davon, was hinter ihm liegt).
Bewusst vereinfacht: er bleibt sichtbar, auch wenn schon ganz nach
rechts gescrollt ist — ein wirklich scrollstand-genauer Hinweis bräuchte
JavaScript (`scrollLeft`/`scrollWidth` abfragen), das ist hier bewusst
nicht gebaut. */
.tabelle-rahmen{
position:relative; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
margin:var(--sp-5) 0; border-radius:var(--r-sm);
box-shadow:inset -24px 0 16px -16px rgba(11,31,51,.14);
}
/* Tabellen darin dürfen ihre natürliche (ggf. schmalere) Breite behalten —
kein erzwungenes `width:100%`, das sie unnötig aufblähen würde. */
.tabelle-rahmen table{width:auto; max-width:none}
/* Kleine, generische Basisoptik für gewöhnliche Markdown-Tabellen
(`table.tabelle`) — keine eigene Farbwelt wie die Jahrestabelle (3.7),
nur genug, damit sie nicht wie unformatiertes Browser-Standard-HTML
mitten im sonst gestalteten Fließtext steht. Wer eine Tabelle braucht,
die wie die Jahrestabelle aussehen soll, verwendet `table.jahre`. */
.tabelle-rahmen table{border-collapse:collapse; font-size:15px}
.tabelle-rahmen th,.tabelle-rahmen td{padding:10px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.tabelle-rahmen thead th{font-family:var(--font-anzeige); font-weight:700; color:var(--navy); border-bottom:1.5px solid var(--line-stark)}
.tabelle-rahmen tbody tr:nth-child(even) td{background:var(--flaeche-tief)}
/* ────────────── 3.8 · Drei-Töpfe-Darstellung Mittelverwendung ────────────── */
.toepfe{
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin:var(--sp-6) auto;
align-items:end; max-width:var(--breite-daten);
}
.topf{text-align:center}
.topf .gefaess{
--anteil:50%; height:180px; border-radius:20px; border:1.5px solid var(--line);
background:
linear-gradient(to top, var(--tiefgruen) var(--anteil), transparent var(--anteil)),
var(--flaeche-tief);
position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:center;
}
.topf .gefaess .prozent{
margin-top:var(--sp-3); font-family:var(--font-anzeige); font-weight:800; font-size:22px;
color:#fff; mix-blend-mode:difference;
}
.topf .titel{display:block; margin-top:var(--sp-3); font-weight:700; font-size:15px}
.topf .beschreibung{display:block; margin-top:2px; font-size:13px; color:var(--muted)}
@media(max-width:520px){ .toepfe{gap:var(--sp-3)} .topf .gefaess{height:140px} }
/* ───────────── 3.9 · Phasen-Leiste (Regionalpartner Phase 1→2→3; auch als Zeitstrahl) ─────────────
16.09., erweitert für den Zeitstrahl in Stufe 2 (`:::zeitstrahl`, sechs Stationen
05/2026–2028–2031, gebaut auf genau diesem Bauteil). Drei Entscheidungen dazu:
1. ZUSTANDSKLASSEN, verbindlich für das Bauskript, das sie aus dem heutigen
Datum setzt: `.erreicht` (Vergangenheit/abgeschlossen) · `.aktiv` (laufend)
· `.offen` (Zukunft). Alle drei sind jetzt EXPLIZIT ausprogrammiert — `.offen`
sah vorher genau wie der unklassifizierte Grundzustand aus (keine eigene
Regel), das war für ein Skript, das verlässlich eine von drei Klassen
setzen soll, kein stabiler Vertrag. Jetzt hat jede der drei einen Namen
UND eine eigene (auch wenn `.offen` bewusst unverändert aussieht) Regel.
2. DRITTES FELD `.beschreibung` (z. B. „Prototyp, Netzwerkaufbau") ist jetzt
ein regulärer, OPTIONALER dritter Bestandteil von `.phase` — kein Fork der
Komponente. Löst das Provisorium `.zeitraum-beschreibung` in `app/hub.html`
ab; der Entwickler benennt beim Einbau in `.phase > .beschreibung` um.
Gleicher Klassenname wie bei den Drei-Töpfen (`.topf .beschreibung`,
Abschnitt 3.8) — bewusst dieselbe Konvention: Klassen sind kontextuell
unter ihrem Elternbauteil eindeutig, nicht global.
3. SECHS STATIONEN AUF 390px: die schmalste Schrift bleibt bei 12,5px (nie
unter 11px, wie vorgegeben). Statt die Schrift weiter zu verkleinern,
bekommt die Variante `.phasenleiste.zeitstrahl` eine EIGENE, frühere
Umbruchschwelle (900px statt 480px) — sechs Spalten samt Beschreibung
brauchen mehr Platz pro Station als drei kurze Phasen-Label. Die
ursprüngliche Drei-Phasen-Nutzung (Stufe 1, bereits von Florian
abgenommen: „skaliert sauber") bleibt UNVERÄNDERT bei 480px — die neue
Schwelle gilt nur mit der Zusatzklasse `.zeitstrahl`, kein Risiko einer
Regression am bestehenden Bauteil. */
.phasenleiste{display:flex; align-items:flex-start; margin:var(--sp-6) auto; max-width:var(--breite-daten)}
.phase{flex:1; position:relative; text-align:center; padding:0 var(--sp-2)}
.phase:not(:last-child)::after{
content:""; position:absolute; top:15px; left:50%; width:100%; height:2px;
background:var(--line); z-index:0;
}
.phase.erreicht:not(:last-child)::after{background:var(--tiefgruen)}
.phase .punkt{
position:relative; z-index:1; width:32px; height:32px; margin:0 auto var(--sp-2);
border-radius:50%; background:#fff; border:2px solid var(--line);
display:grid; place-items:center; font-family:var(--font-anzeige); font-weight:800; font-size:14px;
color:var(--muted);
}
.phase.erreicht .punkt{background:var(--tiefgruen); border-color:var(--tiefgruen); color:#fff}
.phase.aktiv .punkt{border-color:var(--orange); color:var(--orange); background:#fff}
/* `.offen` sieht bewusst wie der frühere Grundzustand aus (Zukunft = neutral,
keine Aktions-/Erfolgsfarbe) — jetzt aber als eigene, benannte Regel, kein
impliziter „hat keine der anderen beiden Klassen"-Zustand mehr. */
.phase.offen .punkt{background:#fff; border-color:var(--line); color:var(--muted)}
.phase .name{display:block; font-weight:700; font-size:14.5px}
.phase .zeitraum{display:block; margin-top:2px; font-size:12.5px; color:var(--muted)}
.phase .beschreibung{
display:block; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--muted);
max-width:42ch; margin-inline:auto;
}
/* Unter 480px wird aus der Zeile eine Spalte — sonst quetschen sich drei
Phasenlabels auf ~360px Breite unlesbar zusammen. Gilt für die einfache
Phasen-Leiste (Stufe 1, unverändert). */
@media(max-width:480px){
.phasenleiste{flex-direction:column; gap:var(--sp-5)}
.phase{text-align:left; padding-left:44px}
.phase .punkt{position:absolute; left:0; top:0; margin:0}
.phase:not(:last-child)::after{
top:32px; left:15px; width:2px; height:calc(100% + var(--sp-5) - 32px);
}
.phase .beschreibung{margin-inline:0}
}
/* ── Variante `.zeitstrahl`: mehr Stationen + Beschreibung (Stufe 2) ──
Mobile-first gestapelt (wie oben, aber ab 390px aktiv, nicht erst ab
480px) — erst ab 900px wird daraus eine Reihe. Dieselben Zustands- und
Feld-Klassen (`.erreicht`/`.aktiv`/`.offen`, `.name`/`.zeitraum`/
`.beschreibung`), nur der Container trägt zusätzlich `.zeitstrahl`. */
.phasenleiste.zeitstrahl{
flex-direction:column; gap:var(--sp-5); max-width:var(--breite-lesen);
}
/* 16.09., Korrektur nach Live-Messung bei 1024px: die Reihe (ab 900px, siehe
Media Query unten) lief bei 1024px 18px aus dem Bild — die Seite wurde
dadurch horizontal scrollbar. Ursache war NICHT die Umbruchschwelle
selbst, sondern derselbe Flex-Grundfehler wie schon bei `.branchenkarte`
(Abschnitt 3.11, dort korrigiert): ein Flex-Kind darf laut Spec nie unter
seine eigene Inhalts-Mindestbreite schrumpfen. Bei sechs `flex:1`-Stationen
und einem einzelnen langen Wort in Name/Zeitraum/Beschreibung reichte der
gleichmäßig verteilte Platz je Station bei 1024px nicht aus — die eine
Station mit dem längsten Wort blieb breiter als ihr Anteil, alle sechs
zusammen sprengten die 960px-Bühne. `min-width:0` hebt die Sperre auf,
`overflow-wrap:anywhere` + `hyphens:auto` lassen das Wort im Notfall
brechen/trennen statt die Station aufzublasen — bewusst NUR unter
`.zeitstrahl` (nicht am `.phase`-Grundbauteil), damit die bereits
abgenommene Drei-Phasen-Leiste in Stufe 1 unverändert bleibt. Geprüft
gegen 900/1024/1100/1200/1440px: bei keiner Breite mehr Scrollbreite über
der Fensterbreite. */
.phasenleiste.zeitstrahl .phase{min-width:0}
.phasenleiste.zeitstrahl .phase .name,
.phasenleiste.zeitstrahl .phase .zeitraum,
.phasenleiste.zeitstrahl .phase .beschreibung{overflow-wrap:anywhere; hyphens:auto}
.phasenleiste.zeitstrahl .phase{text-align:left; padding-left:44px}
.phasenleiste.zeitstrahl .phase .punkt{position:absolute; left:0; top:0; margin:0}
.phasenleiste.zeitstrahl .phase:not(:last-child)::after{
top:32px; left:15px; width:2px; height:calc(100% + var(--sp-5) - 32px);
}
.phasenleiste.zeitstrahl .phase .beschreibung{margin-inline:0}
@media(min-width:900px){
.phasenleiste.zeitstrahl{flex-direction:row; gap:0; max-width:var(--breite-daten)}
.phasenleiste.zeitstrahl .phase{text-align:center; padding:0 var(--sp-2)}
.phasenleiste.zeitstrahl .phase .punkt{position:relative; left:auto; top:auto; margin:0 auto var(--sp-2)}
.phasenleiste.zeitstrahl .phase:not(:last-child)::after{top:15px; left:50%; width:100%; height:2px}
.phasenleiste.zeitstrahl .phase .beschreibung{margin-inline:auto}
}
/* ─────────────── 3.10 · Netzwerkeffekt-Kreislauf (reines CSS/SVG) ─────────────── */
.kreislauf{margin:var(--sp-6) 0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-4)}
.kreislauf svg{width:100%; max-width:360px; height:auto}
.kreislauf .kn-flaeche{fill:#fff; stroke:var(--tiefgruen); stroke-width:1.5}
.kreislauf .kn-text{font-family:var(--font-text); font-size:12.5px; fill:var(--ink); text-anchor:middle}
.kreislauf .pfeil{fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round}
.kreislauf figcaption{font-size:var(--f-small); color:var(--muted); max-width:44ch; text-align:center}
/* ─────────────── 3.10b · Netzkarte — wachsende DACH-Karte (Kap. 08) ───────────────
Florian, 29.09.2026, wörtlich: „eine wachsende Karte. Betriebe tauchen als
Punkte auf einer DACH-Karte ... auf und verbinden sich zu einem Netz. Das
zeigt, dass jeder Neue das Netz stärker macht." EIGENER Renderer
(bauen.py render_netzkarte) — NICHT über :::netzwerk/.kreislauf oben, das
Stufe 2 evtl. weiter nutzt. Länderumrisse: selbst gezeichnete, vereinfachte
Polygone (kein Kartenserver, keine externe Datei — reines Inline-SVG).
Punkte/Kanten sind FEST im Code (siehe bauen.py, _NETZKARTE_*), rein
geometrisch verbunden — kein Zufall, keine erfundene Zahl/Stadt.
Groß und mittig (Florians Vorgabe): eigene, großzügige Bühnenbreite
innerhalb `--breite-daten`, deutlich größer als der kleine Kreislauf
oben (der bewusst als ruhiges Diagramm gedacht war, das hier ist der
Blickfang). */
.netzkarte{
margin:var(--sp-7) auto; max-width:var(--breite-daten);
display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
}
.netzkarte svg{width:100%; max-width:820px; height:auto}
/* Fill kommt aus dem SVG selbst (`fill="url(#nk-verlauf)"`, bauen.py) - hier
NUR Kontur, damit die CSS-Kaskade (Praesentationsattribute liegen unter
jeder Stylesheet-Regel) den Verlauf nicht überschreibt. Der leichte
Schatten auf der Gruppe darunter gibt zusätzlich Tiefe. */
.netzkarte .nk-laender{filter:drop-shadow(0 8px 18px rgba(11,31,51,.16))}
.netzkarte .nk-land{stroke:var(--line-stark); stroke-width:1.2}
.netzkarte .nk-linie{
stroke:var(--frischgruen); stroke-width:1.5; stroke-linecap:round; stroke-opacity:.85;
}
.netzkarte .nk-punkt{
fill:var(--tiefgruen); stroke:#fff; stroke-width:1;
transform-box:fill-box; transform-origin:center;
}
.netzkarte .nk-punkt-puls{fill:var(--orange)}
/* Drei "Start"-Orte (Linz/Landshut/Kempten, Florian 29.09.2026, sechster
Auftrag: "Das Netzwerk geht von Linz, Landshut und Kempten aus.") -
groesser, orange, mit weissem Beschriftungs-Etikett (Textschrift,
`filter:drop-shadow` statt eines SVG-`` - guenstiger, dieselbe
Technik wie bei `.nk-laender` oben). Gilt fuer BEIDE Darstellungen: die
statische SVG (bauen.py `_netzkarte_start_marken_svg`) UND das Canvas
(hub.html zeichnet dieselben drei Koordinaten/Namen eigenstaendig,
siehe dort) - hier nur die SVG-Fassung. */
.netzkarte .nk-start-punkt{fill:var(--orange); stroke:#fff; stroke-width:1.5}
.netzkarte .nk-start-schild{fill:#fff; filter:drop-shadow(0 2px 3px rgba(11,31,51,.28))}
.netzkarte .nk-start-label{
font-family:var(--font-text); font-weight:700; font-size:11px; fill:var(--navy);
text-anchor:middle; dominant-baseline:middle;
}
.netzkarte figcaption{
margin:0; font-size:var(--f-small); color:var(--muted); max-width:52ch; text-align:center;
}
.netzkarte .nk-legende{
display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-1) var(--sp-2);
margin:0; padding:0; list-style:none; max-width:60ch;
font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted-stark);
}
.netzkarte .nk-legende li{white-space:nowrap}
.netzkarte .nk-legende li:not(:last-child)::after{content:"→"; margin-left:var(--sp-2); color:var(--muted)}
/* Ein paar Punkte pulsieren (Florian, wörtlich: „Ein paar Punkte
pulsieren") — reines CSS, unabhängig vom Scroll-Reveal unten, respektiert
reduzierte Bewegung wie der Kreislauf-Wanderpunkt oben (3.10). */
@keyframes netzkarte-puls{
0%,100%{opacity:1; transform:scale(1)}
50%{opacity:.55; transform:scale(1.35)}
}
.netzkarte .nk-punkt-puls{animation:netzkarte-puls 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){ .netzkarte .nk-punkt-puls{animation:none} }
/* Beim Hereinscrollen wachsendes Netz — hub.html setzt (eigenständig von der
"Wisch"-Logik) die Klasse "netzkarte-js" auf das `.netzkarte`-Element
SELBST, nicht auf : die Karte bleibt dadurch unabhängig davon
wiederverwendbar, auf welcher Stufe/Seite sie steht. WICHTIG — ohne diese
Klasse (kein JS, kein IntersectionObserver, oder prefers-reduced-motion)
gilt AUSSCHLIESSLICH die Basisregel oben: volle Deckkraft, fertig
verbundene Linien. Hier wird nur ein vorheriges, unsichtbares
Zwischenstadium ERGÄNZT — nie der Normalzustand versteckt, „ohne JS
ebenfalls das fertige Netz sichtbar" bleibt dadurch strukturell wahr,
nicht nur zufällig. */
.netzkarte.netzkarte-js .nk-punkt{
opacity:0; transform:scale(.35);
transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
transition-delay:calc(var(--i,0) * 65ms);
}
.netzkarte.netzkarte-js.netzkarte-sichtbar .nk-punkt{opacity:1; transform:scale(1)}
.netzkarte.netzkarte-js .nk-linie{
stroke-dasharray:var(--len,1); stroke-dashoffset:var(--len,1);
transition:stroke-dashoffset .55s ease;
transition-delay:calc(var(--i,0) * 65ms + 200ms);
}
.netzkarte.netzkarte-js.netzkarte-sichtbar .nk-linie{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
/* Zusätzliche, eigenständige Absicherung (die JS-Bedingung in hub.html
prüft dasselbe bereits VOR dem Setzen der Klasse — diese Regel greift
nur, falls die Klasse trotzdem irgendwie gesetzt würde): sofort das
fertige Netz, keine Übergänge. */
.netzkarte.netzkarte-js .nk-punkt,.netzkarte.netzkarte-js .nk-linie{transition:none}
.netzkarte.netzkarte-js .nk-punkt{opacity:1; transform:scale(1)}
.netzkarte.netzkarte-js .nk-linie{stroke-dashoffset:0}
}
/* ─────────────── 3.10c · Netzkarte, vollbreit (Kap. 08, fünfter Auftrag 29.09.2026) ───────────────
Florian, wörtlich zuletzt: "es soll nur veranschaulichen, dass der
Netzwerkeffekt vollumfänglich gezeigt wird" - GANZ OHNE ZAHLEN. Akt 1
"Das Netz wächst" ist jetzt eine VOLLBREITE, gepinnte Bühne (bricht
bewusst aus `--breite-daten`/`.seite` aus, siehe `.netzkarte-szene`
unten) - hub.html erzeugt darin ein Canvas mit einer viel größeren,
deterministisch gestreuten Punktwolke (bauen.py liefert die
Länderumrisse + 16 Städte-Zentren dafür als JSON mit, `#nk-daten`).
NUR EIN Satz + ein kleiner Akt-Indikator liegen als Overlay darauf -
keine Zähler, keine Zahl mehr irgendwo im Bild.
`.netzkarte-szene` ist die (hohe) Scroll-Strecke, `.netzkarte-sticky`
bleibt während dieser Strecke am Bildschirm hängen (reines CSS
`position:sticky`, kein JS nötig für das Anheften selbst). Vollbreite
über die klassische "Breakout"-Technik (negative Margins aus
`calc(50% - 50vw)` statt `width:100vw` direkt - letzteres überstünde
auf Desktop-Browsern mit sichtbarer Scrollleiste den echten
Dokumentrand um deren Breite; `html{overflow-x:hidden}` (Abschnitt 1)
fängt einen letzten Rest zusätzlich ab). Die Formel wirkt unabhängig
von `.seite`s eigenem `padding:0 24px`, siehe Herleitung im Bau-Bericht.
Akt 2 "Der Wert steigt" ist jetzt ein SEPARATER, normal fließender
Block NACH der Szene (nicht mehr Teil derselben Sticky-Bühne - vorher
teilte er sich die Bühne mit den jetzt entfallenen Zählern; ohne die
ist das unnötig). Reveal beim Hereinscrollen wie jeder andere
Datenbaustein hier.
Canvas-Sichtbarkeit: hub.html setzt "netzkarte-canvas-js" auf
`.netzkarte` NUR bei echter Canvas-Unterstützung + `!reduzierte
Bewegung` - blendet dann die SVG-Punkte/-Kanten aus (das Canvas
übernimmt), die Länder-Silhouette bleibt in JEDEM Zustand sichtbar
(gemeinsamer Hintergrund). OHNE diese Klasse (kein JS/reduzierte
Bewegung/kein Canvas) bleibt die VORHERIGE, vollständige 40-Punkte-
SVG-Karte stehen - strukturell wahr, nicht nur zufällig. */
.netzkarte-szene{
position:relative; margin:var(--sp-8) 0;
width:auto; max-width:none;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.netzkarte-sticky{position:sticky; top:0; height:min(90vh,860px); min-height:520px}
.netzkarte-sticky .netzkarte{
position:relative; width:100%; height:100%; margin:0; max-width:none;
overflow:hidden; border-radius:0;
display:block;
}
.netzkarte-sticky .netzkarte svg{position:absolute; inset:0; width:100%; height:100%; max-width:none}
.nk-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
@media(min-width:701px){ .netzkarte-szene{height:240vh} }
@media(max-width:700px){
.netzkarte-szene{height:auto}
.netzkarte-sticky{position:static; height:min(78vh,620px); min-height:420px}
}
/* Overlay: EIN großer Satz + kleiner Akt-Indikator - sonst NICHTS (keine
Zahl). Komplettabnahme-Korrektur (Florian): der Satz saß zu groß/mittig
und deckte sich inhaltlich mit der figcaption ("Jeder neue Betrieb macht
das Netz stärker") - jetzt eine ruhige Karte unten links auf
halbtransparentem Hintergrund (statt Textschatten), die das Netz nicht
verdeckt; figcaption + Stationen-Legende sind NUR in der Canvas-Fassung
ausgeblendet (weiter unten `.netzkarte-canvas-js`) - ohne JS/Canvas
(die vorherige SVG-Karte) bleiben sie stehen, da ist der Leitsatz-Satz
gar nicht redundant zu sehen (kein Overlay ohne JS/Canvas). */
.netzkarte-overlay{
position:absolute; inset:0; z-index:3;
display:flex; flex-direction:column; justify-content:space-between;
padding:var(--sp-6) var(--sp-6);
}
.nk-akt-indikator{margin:0; align-self:flex-end}
.nk-akt-punkt{
display:inline-flex; font-size:12.5px; font-family:var(--font-mono); font-weight:700;
letter-spacing:.04em; color:var(--navy); background:rgba(255,255,255,.82);
padding:5px 12px; border-radius:var(--r-btn); box-shadow:var(--schatten-karte);
}
/* Bündelt Leitsatz + Bildunterschrift + optionale Stationen-Legende unten
LINKS im Overlay (bewusst NICHT figcaption lose im normalen Fluss von
`` - dort würde es mit der absolut positionierten Punktwolke/
dem Rest des Overlays überlappen). */
.netzkarte-overlay-unten{
display:flex; flex-direction:column; gap:var(--sp-2); align-self:flex-start; max-width:60ch;
}
.netzkarte-leitsatz{
margin:0; max-width:26ch; font-family:var(--font-anzeige); font-weight:800;
font-size:clamp(18px,2.3vw,27px); line-height:1.3; color:var(--navy);
background:rgba(255,255,255,.88); padding:14px 18px; border-radius:var(--r-card);
box-shadow:var(--schatten-karte); display:inline-block; width:fit-content;
}
.netzkarte.netzkarte-canvas-js .netzkarte-overlay-unten figcaption,
.netzkarte.netzkarte-canvas-js .netzkarte-overlay-unten .nk-legende{display:none}
.netzkarte-overlay-unten figcaption{
margin:0; font-size:var(--f-small); color:var(--muted); text-align:left; max-width:56ch;
}
.netzkarte-overlay-unten .nk-legende{margin:0; justify-content:flex-start}
@media(max-width:700px){
.netzkarte-overlay{padding:var(--sp-4)}
.netzkarte-leitsatz{font-size:clamp(17px,5vw,21px); max-width:20ch; padding:12px 14px}
}
/* SVG-Punkte/-Kanten: Basiszustand (3.10b oben) bleibt IMMER voll sichtbar -
erst "netzkarte-canvas-js" blendet sie zugunsten des Canvas aus. Die
Länder-Silhouette (`.nk-laender`) ist davon nie betroffen. */
.netzkarte.netzkarte-canvas-js .nk-kanten,
.netzkarte.netzkarte-canvas-js .nk-punkte{display:none}
/* ─────────────── 3.10d · Kurve "Der Wert steigt" (Akt 2, :::netzkarte) ───────────────
OHNE JEDE ZAHL (Florian, dritter Korrekturdurchgang): die quadratische
Linie ("Verbindungen") in Frischgrün und dick, die lineare Linie
("Betriebe") gedämpft/dünner daneben - der Formunterschied (flach vs.
steil) ist die ganze Aussage, jede Linie trägt ihr WORT statt einer
Zahl (bauen.py `_netzkarte_kurve_svg`). Reveal beim Hereinscrollen -
EIGENSTÄNDIGER Beobachter (hub.html), setzt "nk-akt-sichtbar" auf den
Block; Einzeichnen über dieselbe stroke-dasharray/-dashoffset-Technik
wie die Kartenkanten (`--laenge` kommt je Pfad aus bauen.py). OHNE
diese Klasse (kein JS/reduzierte Bewegung) ist die Kurve sofort
vollständig gezeichnet sichtbar - kein versteckter Vorher-Zustand. */
.nk-akt-block.nk-akt-2{
margin-top:var(--sp-7); margin-bottom:var(--sp-7); margin-inline:var(--daten-versatz) 0;
width:min(calc(100% - var(--daten-versatz)), var(--breite-daten));
}
.nk-akt-block .nk-akt-indikator{margin-bottom:var(--sp-4)}
.nk-akt-block .nk-akt-punkt{
background:var(--flaeche); border:1px solid var(--line); box-shadow:none; color:var(--muted-stark);
}
/* Komplettabnahme-Korrektur: die Kurve füllte am Laptop mehr als einen
Bildschirm - `max-height:60vh` + `object-fit:contain` deckeln die
sichtbare Höhe (moderne Browser behandeln `