/* ===================================================================
VTOC digitalfinance — Grundgestaltung des Auftritts
Stand 21.09.2026.
Vier Dinge, die hier bewusst NICHT stehen:
- kein Aufruf an einen fremden Server. Eine Schrift, die von einem
fremden Server kommt, überträgt die IP jedes Besuchers und holt
den Cookie-Banner zurück. Die Hausschrift wird deshalb selbst
ausgeliefert — eine Datei neben der Seite ist kein fremder Aufruf.
- kein Hell/Dunkel-Umschalter. Er bräuchte ein Skript im ,
sonst blitzt beim Laden die falsche Fassung auf — und er wäre das
einzige JavaScript auf einer sonst skriptfreien Seite. Weiß auf
#0b0d10 trägt 19,5:1; mehr Kontrast gibt es nicht zu holen. Der
Umschalter ist Geschmack, nicht Lesbarkeit, und kann später
nachkommen.
- keine Bibliothek, kein Raster-Rahmenwerk.
- kein Effekt, der etwas verdeckt. Bewegung nur dort, wo erklärt
wird; ab der Handlung wird es nüchtern.
Warum dunkel: gemessen auf #0b0d10 trägt jede der drei Hausfarben
Fließtext (Blau 6,49 · Orange 6,82 · Grün 9,16), auf Weiß keine
einzige (3,00 / 2,85 / 2,12). Der Sonnenlicht-Einwand ist ein
Argument für hohen Kontrast, nicht gegen Dunkel.
=================================================================== */
/* Die Hausschrift. Ein einziger variabler Schnitt trägt die ganze
Gewichtsachse 200–900 und wiegt 28,7 KB — weniger als zwei feste
Schnitte. SIL Open Font License, selbst ausgeliefert.
Der Zeichenbereich deckt genau das, was Deutsch braucht: Umlaute und ß
in U+00C0–00FF, die Anführungszeichen in U+2000–206F, das Euro in
U+20AC. Alles darüber wird gar nicht erst geladen. */
@font-face{
font-family:"VTOC Sans";
src:url("schrift/source-sans-3-var.woff2") format("woff2-variations");
font-weight:200 900;
font-style:normal;
font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
/* Hausfarben pixelgenau aus dem Logo. Nie schätzen. */
--blau:#009EE3;
--orange:#EF7800;
--gruen:#93C11A;
--grund:#0b0d10;
--tiefer:#07090b;
--flaeche:#14181f;
--flaeche2:#1b2129;
--kante:#262e39;
--text:#f2f5f8;
--leise:#9aa6b4;
--tat:var(--orange);
--tat-schrift:#1b1e24; /* dunkle Schrift auf Orange: 6,4:1 */
--rand:clamp(18px,5vw,64px);
--takt:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
margin:0;
background:var(--grund);
color:var(--text);
/* 1,0625rem = 17 px, aber in rem: nur dann wirkt die
Schriftgrößen-Einstellung des Browsers. Bei einem Publikum über
fünfzig ist das kein Feinschliff. */
font:400 1.0625rem/1.65 "VTOC Sans",-apple-system,BlinkMacSystemFont,
"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
/* Keine gerechneten Fettungen: fehlt die Schriftdatei, sieht man es,
statt es zu übersehen. */
font-synthesis-weight:none;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--blau)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:5px}
::selection{background:var(--orange);color:var(--tat-schrift)}
/* Sprungmarke — für Tastatur und Vorleseprogramm. */
.sprung{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--orange);color:var(--tat-schrift);
padding:12px 20px;border-radius:0 0 9px 0;
font-weight:700;text-decoration:none;
}
.sprung:focus{left:0}
/* Der Farbstreifen des Hauses: Blau 42, Orange 31, Grün 27, von links
nach rechts. Auf dem Blatt steht er am Rand — eine Webseite hat
keinen Blattrand, deshalb ganz oben. Kostet fünf Pixel. */
.streifen{
height:5px;
background:linear-gradient(to right,
var(--blau) 0 42%, var(--orange) 42% 73%, var(--gruen) 73% 100%);
}
/* ============================================================ Kopf */
.kopf{
border-bottom:1px solid var(--kante);
background:var(--grund);
}
.kopf-innen{
max-width:1240px;margin:0 auto;
padding:16px var(--rand);
display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;
}
.marke{display:block;line-height:0;flex:0 0 auto}
.marke img{height:34px;width:auto}
/* Kein Hamburger. Sichtbares Menü wird am großen Bildschirm fast
doppelt so oft benutzt wie ein verstecktes (gemessen), und fünf bis
sechs Punkte brechen am Handy sauber in zwei Reihen um — das ist
unter der Schwelle, ab der sich ein verstecktes Menü lohnt. */
.menue{display:flex;flex-wrap:wrap;gap:2px;margin-right:auto}
.menue a{
position:relative;
padding:11px 13px;border-radius:9px;
color:var(--text);text-decoration:none;
font-size:.97rem;font-weight:600;
transition:background .2s var(--takt);
}
.menue a:hover{background:var(--flaeche)}
/* Ein Zustand braucht keine zweite Farbe — der Balken genügt. */
.menue a::after{
content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
background:var(--orange);transform:scaleX(0);transform-origin:left;
transition:transform .28s var(--takt);
}
.menue a:hover::after,.menue a.hier::after{transform:scaleX(1)}
.kopf-ruf{
flex:0 0 auto;
display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:9px 16px;
border:1px solid var(--kante);border-radius:10px;
color:var(--text);text-decoration:none;font-weight:700;
white-space:nowrap;
}
.kopf-ruf:hover{border-color:var(--orange)}
.kopf-ruf span{color:var(--orange)}
/* ==================================================== Grundgerüst */
main{display:block}
.huelle{max-width:1240px;margin:0 auto;padding-inline:var(--rand)}
.block{max-width:1240px;margin:0 auto;padding:clamp(40px,6vw,76px) var(--rand)}
.block + .block{padding-top:0}
.eng{max-width:820px}
h1,h2,h3{line-height:1.18;text-wrap:balance}
/* 58 px waren zu viel: die Ueberschrift brach in vier Zeilen, drueckte das
Bild schmal und schob den Knopf an die Falz. 48 px liegt in der Spanne,
die im Feld tatsaechlich gefahren wird (48 bis 55), bricht in drei Zeilen
und laesst dem Bild Platz. Gemessen, nicht geschaetzt. */
h1{font-size:clamp(30px,4.2vw,48px);font-weight:800;letter-spacing:-.02em;margin:.2em 0 .35em}
h2{font-size:clamp(23px,3.2vw,36px);font-weight:800;letter-spacing:-.01em;margin:0 0 .5em}
h3{font-size:clamp(18px,2vw,21px);font-weight:700;margin:0 0 .4em}
p{margin:0 0 1em}
.farbig{color:var(--blau)}
.augenbraue{
display:inline-flex;align-items:center;gap:9px;
margin:0 0 14px;
font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--leise);
}
.augenbraue::before{
content:"";width:22px;height:3px;border-radius:2px;background:var(--orange);
}
/* Führungstext: der Absatz unter einer Überschrift. Etwas größer als
Fließtext, etwas leiser — er führt, er erklärt noch nicht.
`.fuehrung` ist ein Behälter, kein Absatz: die Blöcke der Art `text`
kommen als aus dem Erzeuger und dürfen keine Klasse tragen. */
.fuehrung p,.held p,.block > p{max-width:64ch}
.fuehrung{font-size:1.08rem;color:var(--leise)}
.fuehrung p:last-child{margin-bottom:0}
/* ========================================================== Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.knopf{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
/* 44 px ist die Untergrenze, nicht der Zielwert: darunter etwa
dreifache Fehlerrate. Eine Hand, Straßenbahn, Sonne. */
min-height:50px;padding:13px 26px;
border:2px solid var(--orange);border-radius:11px;
background:var(--orange);color:var(--tat-schrift);
font-size:1rem;font-weight:700;text-decoration:none;
transition:transform .18s var(--takt),background .18s var(--takt);
}
/* Kein zweites Orange. Ein gegriffener Hover-Wert ist genau der
Fehler, vor dem die Hausregel warnt — die Aufhellung wird aus der
Hausfarbe gerechnet, nicht danebengelegt. */
.knopf:hover{
background:color-mix(in srgb, var(--orange) 86%, #ffffff);
border-color:color-mix(in srgb, var(--orange) 86%, #ffffff);
}
.knopf:active{transform:translateY(1px)}
.knopf.zweit{
background:transparent;color:var(--text);border-color:var(--kante);
}
.knopf.zweit:hover{border-color:var(--text);background:var(--flaeche)}
/* ====================================================== Aufmacher */
.held{
position:relative;overflow:hidden;
border-bottom:1px solid var(--kante);
background:
radial-gradient(900px 480px at 78% 12%, rgba(0,158,227,.16), transparent 70%),
radial-gradient(700px 420px at 8% 88%, rgba(239,120,0,.10), transparent 70%),
var(--grund);
}
.held-innen{
max-width:1240px;margin:0 auto;
padding:clamp(40px,6vw,88px) var(--rand) clamp(44px,6vw,84px);
display:grid;gap:clamp(28px,4vw,56px);align-items:center;
grid-template-columns:1fr;
}
.held h1{margin-top:0}
.held .fuehrung{font-size:clamp(17px,1.5vw,20px)}
.held-bild{margin:0;position:relative}
.held-bild img{
width:100%;border-radius:16px;
border:1px solid var(--kante);
background:var(--flaeche);
}
.held-bild figcaption{
position:absolute;left:14px;bottom:14px;right:14px;
display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;
padding:10px 14px;border-radius:11px;
background:rgba(11,13,16,.86);
font-size:.9rem;
}
.held-bild figcaption span{color:var(--leise)}
@media (min-width:900px){
.held-innen{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}
/* ======================================= Themenliste (Startseite) */
/* Eine Aufzählung liest man als einen Block, Kacheln als mehrere Dinge.
Dieselbe Liste trägt beide Zustände: ein
ohne Verweis ist eine
Kachel zum Lesen, eines mit Verweis eine zum Anklicken — solange nicht
jede Sparte ihre eigene Seite hat, stehen beide nebeneinander.
Die Ziffer dahinter steht bei 10 % Deckkraft und liegt hinter dem Text;
sie ordnet, ohne zu lesen zu sein. */
.themen{
list-style:none;margin:26px 0 0;padding:0;
display:grid;gap:12px;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.themen li{
position:relative;overflow:hidden;isolation:isolate;
padding:16px 18px;border-radius:12px;
border:1px solid var(--kante);background:var(--flaeche);
}
.themen b{display:block;font-size:1.02rem}
.themen span{display:block;margin-top:3px;font-size:.92rem;color:var(--leise)}
/* Die Farbkante wandert im Hauswechsel Blau, Orange, Grün durch die
Liste — dieselbe Reihenfolge wie im Streifen. */
.themen li::before{
content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blau);
}
.themen li:nth-child(3n+2)::before{background:var(--orange)}
.themen li:nth-child(3n)::before{background:var(--gruen)}
.themen .nr{
position:absolute;right:10px;bottom:-14px;z-index:-1;
font-size:64px;font-weight:800;line-height:1;opacity:.10;color:var(--blau);
font-variant-numeric:tabular-nums;pointer-events:none;
}
.themen li:nth-child(3n+2) .nr{color:var(--orange)}
.themen li:nth-child(3n) .nr{color:var(--gruen)}
/* Das Hauszeichen der Sparte. Raster 24, Strich 0,6, grüne Fläche
bezeichnet, blaue Kontur. Unter 40 px trägt die Zeichnung nicht. */
.themen .zeichen{display:block;width:40px;height:40px;margin-bottom:10px}
.themen .zeichen .flaeche{fill:var(--gruen);stroke:none}
.themen .zeichen .kontur{
fill:none;stroke:var(--blau);stroke-width:.6;
stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;
}
/* Hat die Sparte eine eigene Seite, wird die ganze Kachel zum Verweis. */
.themen a{
display:flex;flex-direction:column;gap:3px;height:100%;
color:var(--text);text-decoration:none;
}
.themen a .weiter{
display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
font-size:.9rem;font-weight:700;color:var(--orange);
}
.themen a .weiter svg{
width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;transition:transform .28s var(--takt);
}
.themen li:has(a){transition:transform .3s var(--takt),border-color .3s var(--takt)}
.themen li:has(a:hover),.themen li:has(a:focus-visible){
transform:translateY(-4px);border-color:var(--blau);
}
.themen li:has(a:hover) .weiter svg{transform:translateX(4px)}
/* ============================================================ Zitat */
.zitat{border-block:1px solid var(--kante);background:var(--tiefer)}
.zitat blockquote{margin:0}
.zitat blockquote p{
max-width:22ch;margin:0 0 .3em;
font-size:clamp(24px,3.6vw,40px);font-weight:800;line-height:1.24;
letter-spacing:-.01em;
}
.zitat blockquote em{color:var(--blau);font-style:normal}
.zitat .quelle{margin:16px 0 0;color:var(--leise);font-size:.98rem}
/* =========================================================== Ablauf */
.ablauf{
list-style:none;margin:30px 0 0;padding:0;
display:grid;gap:18px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
counter-reset:schritt;
}
.ablauf li{
padding:24px;border-radius:14px;
border:1px solid var(--kante);background:var(--flaeche);
}
.ablauf li::before{
counter-increment:schritt;content:"0" counter(schritt);
display:block;margin-bottom:12px;
font-size:.9rem;font-weight:800;letter-spacing:.1em;color:var(--orange);
}
.ablauf p:last-child{margin-bottom:0}
/* ======================================================= Kennzahlen */
.kennzahlen{
list-style:none;margin:28px 0 0;padding:0;
display:grid;gap:20px;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.kennzahlen strong{
display:block;
font-size:clamp(34px,4.4vw,52px);font-weight:800;line-height:1;
letter-spacing:-.02em;color:var(--gruen);
}
.kennzahlen span{display:block;margin-top:9px;color:var(--leise);font-size:.96rem}
/* =========================================================== Person */
.person{display:grid;gap:clamp(24px,4vw,46px);align-items:center;grid-template-columns:1fr}
.person img{width:100%;border-radius:16px;border:1px solid var(--kante)}
@media (min-width:820px){
.person{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
/* ==================================== Handlungsblock und Kontakt */
/* Ab hier hört die Schau auf: gehandelt wird nüchtern. */
.handeln{background:var(--flaeche);border-top:1px solid var(--kante)}
.wege{list-style:none;margin:22px 0 0;padding:0;font-size:1.06rem}
.wege li{margin-bottom:10px}
/* Diese Verweise stehen in einer Liste, nicht in einem Satz — die
Ausnahme fuer Links im Fliesstext greift hier nicht, und 22 px sind zu
wenig zum Treffen. Mit dem Polster sind es 34. */
.wege a{display:inline-block;padding-block:6px;font-weight:700;text-decoration:none}
.wege a:hover{text-decoration:underline}
.klein{font-size:.93rem;color:var(--leise)}
/* ================================================ Rechtstexte u. ä. */
/* Impressum und Datenschutz haben keine Vorlage — der Pflichttext ist
der ganze Rumpf. Hier zählt nur eines: Lesbarkeit auf Länge. */
.block h2{margin-top:1.6em}
.block h2:first-child,.block > :first-child{margin-top:0}
.block dl{margin:0 0 1.4em}
.block dt{font-weight:700;margin-top:.9em}
.block dd{margin:2px 0 0}
.block ul,.block ol{max-width:64ch;padding-left:1.3em}
.block li{margin-bottom:.4em}
.unterzeile{color:var(--leise);font-size:1.06rem;max-width:64ch}
/* ==================================================== Offene Stellen */
/* Was fehlt, bleibt sichtbar stehen. Ein Platzhaltertext verdeckt
genau die Frage, um die es geht: ob der Text trägt. */
.offen{
display:block;
margin:0 0 1em;padding:12px 16px;
border:1px dashed var(--orange);border-radius:8px;
background:rgba(239,120,0,.08);
color:#ffc987;
font-size:.95rem;font-style:normal;
}
/* ======================================================== Fußzeile */
.fuss{
border-top:1px solid var(--kante);
background:var(--tiefer);
color:var(--leise);
font-size:.95rem;
}
.fuss-innen{max-width:1240px;margin:0 auto;padding:clamp(34px,4vw,54px) var(--rand) 44px}
.fuss-logo{height:30px;width:auto;margin-bottom:22px;opacity:.9}
.fuss a{color:var(--text)}
.fuss p{margin:0 0 .7em;max-width:72ch}
.fuss-anschrift strong{color:var(--text);font-weight:700}
.fuss-wege{
display:flex;flex-wrap:wrap;gap:6px 22px;
margin:22px 0 18px;padding-top:18px;
border-top:1px solid var(--kante);
}
.fuss-wege a{font-weight:600;text-decoration:none}
.fuss-wege a:hover{text-decoration:underline}
.fuss-pflicht{font-size:.86rem;line-height:1.6}
/* ================================================= Einwilligung */
/* Unten fest, kein Overlay: am Handy schiebt ein Overlay den
Ablehnen-Knopf regelmäßig aus dem Bild — und dann ist Ablehnen
schwerer als Zustimmen, der Punkt, an dem so ein Banner rechtlich
umfällt. Beide Knöpfe gleich groß, gleich auffällig, eine Ebene. */
.einwilligung{
position:fixed;left:0;right:0;bottom:0;z-index:99;
background:var(--flaeche2);
border-top:3px solid var(--orange);
padding:16px var(--rand);
padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
box-shadow:0 -8px 28px rgba(0,0,0,.45);
display:flex;flex-wrap:wrap;gap:14px 28px;
align-items:center;justify-content:space-between;
}
.einwilligung p{margin:0;max-width:62ch;color:var(--text)}
.einwilligung-knoepfe{display:flex;gap:12px}
.einwilligung button{
font:inherit;font-weight:700;
min-height:48px;min-width:150px;padding:11px 22px;
border:2px solid var(--kante);border-radius:10px;
background:var(--grund);color:var(--text);
cursor:pointer;
}
.einwilligung button:hover{border-color:var(--orange)}
/* ===================================== Bildfolge und Bildplätze */
/* Der Bildkasten trägt entweder eine Aufnahme oder mehrere, die
ineinander übergehen. Die unterste bleibt deckend und blendet nie aus:
gestapelte Ebenen rechnen multiplikativ, nicht additiv — blenden zwei
Bilder gegenläufig, scheint in der Mitte ein Viertel Grund durch.
Umlauf 18 s, Standzeit rund 5 s, Blende rund 1 s. Die langsame Fahrt
läuft unabhängig davon, sonst springt sie am Zyklusende; sie bleibt
unter 4 % der Bildbreite, darüber sieht es nach Bildschirmschoner aus. */
.held-bild{position:relative}
.held-bild:has(.blatt){aspect-ratio:8/5;overflow:hidden;border-radius:16px}
.held-bild .blatt{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border:0;border-radius:0;opacity:0;
/* Die Maske liegt auf den BILDERN, nicht auf dem Kasten. Auf dem Kasten
erfasst sie jedes Kind, auch die Bildunterschrift — die steht dann
halb durchsichtig da, und kein z-index hilft dagegen. */
-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.held-bild .blatt:first-child{opacity:1}
/* Keine Füllfarbe unter den maskierten Bildern: sie blenden sonst in die
Fläche hinein statt in die Seite, und übrig bleibt ein Rechteck mit
harter Unterkante — genau der Rand, den die Maske beseitigen soll. */
.held-bild:has(.blatt){background:transparent}
@media (prefers-reduced-motion:no-preference){
.held-bild .blatt{animation:fahrt 40s ease-in-out infinite alternate}
.held-bild .blatt:nth-child(2){animation:blende2 18s linear infinite,
fahrt 40s ease-in-out infinite alternate}
.held-bild .blatt:nth-child(3){animation:blende3 18s linear infinite,
fahrt 40s ease-in-out infinite alternate}
}
@keyframes blende2{0%,27.8%{opacity:0}33.3%,94.4%{opacity:1}100%{opacity:0}}
@keyframes blende3{0%,61.1%{opacity:0}66.7%,94.4%{opacity:1}100%{opacity:0}}
@keyframes fahrt{to{transform:scale(1.03)}}
/* Ein Bildplatz, der noch kein Bild hat. Sichtbar leer ist besser als
ein Blindbild: ein Platzhalterfoto verdeckt genau die Frage, ob das
Bild trägt. */
.platz{
position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
gap:10px;padding:26px;text-align:center;
background:
radial-gradient(70% 90% at 30% 20%, rgba(0,158,227,.16), transparent 70%),
radial-gradient(60% 80% at 80% 80%, rgba(147,193,26,.14), transparent 70%),
var(--flaeche);
}
.platz b{font-size:1.05rem}
.platz p{margin:0;max-width:32em;color:var(--leise);font-size:.95rem}
/* Körnung statt Bild: rund 380 Byte, kein Aufruf nach draußen, kein
Skript. Sie gibt einer Farbfläche Tiefe, ohne dass etwas lädt.
Die Frequenz wird nie animiert — sonst wird jedes Einzelbild neu
gerechnet. */
.koernung{
position:absolute;inset:0;pointer-events:none;opacity:.5;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ================================================= Belegangaben */
/* Drei bis vier ruhige Angaben unter den Knöpfen. Kein Werbesatz,
sondern das, was nachprüfbar ist. */
.belege{
list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;
margin:20px 0 0;padding:0;font-size:.92rem;color:var(--leise);
}
.belege li{display:flex;align-items:center;gap:8px}
.belege svg{
width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--gruen);
stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
/* Dieselben Kennzahlen als durchgehende Latte unmittelbar unter dem
Aufmacher. Dort steht der Vertrauensbeleg, bevor irgendetwas erklärt
wird — und er steht still: was sich bewegt und dabei Information
trägt, braucht einen Anhalteknopf. */
.kennzahlen.latte{
margin:0;gap:0;border-block:1px solid var(--kante);background:var(--tiefer);
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.kennzahlen.latte li{padding:20px 14px;text-align:center;border-left:1px solid var(--kante)}
.kennzahlen.latte li:first-child{border-left:0}
.kennzahlen.latte strong{font-size:clamp(24px,3vw,32px);color:var(--blau)}
.kennzahlen.latte span{margin-top:4px;font-size:.9rem}
/* ==================================== Sprungleiste einer Fachseite */
/* Die Abschnitte der Seite auf einen Blick. Sie klebt unter dem Kopf und
ist am Handy waagrecht scrollbar — die eine Stelle, an der waagrechtes
Scrollen richtig ist, weil es eine Leiste ist und kein Fließtext. */
.sprungleiste{
position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
background:var(--grund);border-bottom:1px solid var(--kante);
}
.sprungleiste ul{
display:flex;gap:2px;list-style:none;margin:0;padding:0;
overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
}
.sprungleiste ul::-webkit-scrollbar{display:none}
.sprungleiste a{
display:block;min-height:46px;padding:13px 14px;
white-space:nowrap;scroll-snap-align:start;
color:var(--leise);text-decoration:none;font-size:.95rem;font-weight:600;
border-bottom:2px solid transparent;
}
.sprungleiste a:hover{color:var(--text);border-bottom-color:var(--kante)}
/* ============================================ Die Weiche */
/* Die erste Handlung auf einer Fachseite ist eine Entscheidung, keine
Dateneingabe — auf die Frage, wo jemand gerade steht, weiß jeder eine
Antwort. Zwei Anker, kein Formular, kein Skript. */
.weiche{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.weiche a{
display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--text);
padding:20px 22px;border-radius:12px;
background:var(--flaeche);border:1px solid var(--kante);
transition:transform .28s var(--takt),border-color .28s var(--takt);
}
.weiche a:hover,.weiche a:focus-visible{transform:translateY(-3px);border-color:var(--orange)}
.weiche .zeichen-rund{
flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
background:rgba(0,158,227,.20);
}
.weiche a:nth-child(2) .zeichen-rund{background:rgba(239,120,0,.22)}
.weiche .zeichen-rund svg{
width:22px;height:22px;fill:none;stroke:var(--blau);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.weiche a:nth-child(2) .zeichen-rund svg{stroke:var(--orange)}
.weiche b{display:block;font-size:1.06rem;letter-spacing:-.01em}
.weiche .dazu{display:block;margin-top:3px;color:var(--leise);font-size:.94rem}
/* ======================================================== Film */
/* Kein fremdes Video: eine Einbettung holt den Cookie-Banner zurück.
Und die Vorschau ist ein Bild, kein