/* sitetap · Design Tokens · Corporate Design (Stand Oktober 2026, abgeglichen mit der Startseite) Einbinden: Fonts: Outfit (Headlines, Buttons, Kennzahlen) + DM Sans (Fließtext) */ @import url("fonts.css"); /* lokal gehostet, siehe fonts.css */ :root{ /* ── Farben · Light ─────────────────────────── */ --st-indigo:#455BE5; /* Markenfarbe, Logo, Buttons, Kennzahlen */ --st-indigo-dunkel:#3346C7; /* Hover, gedrückt */ --st-soft-indigo:#9AA6EE; /* Ringe, Balken, Grafiken */ --st-lavendel:#E3E7FF; /* Glow, Icon-Flächen */ --st-tinte:#1C2140; /* Headlines, wichtige Texte */ --st-schiefer:#555A72; /* Fließtext */ --st-grau:#62677F; /* kleine Texte, Labels */ --st-linie:#E4E6EE; /* Trennlinien */ --st-kartengrau:#EFF0F5; /* Flächen, Farbfelder */ --st-karte-von:#F3F5FA; /* Kartenverlauf oben */ --st-karte-bis:#EDF0F7; /* Kartenverlauf unten */ --st-weiss:#FFFFFF; /* Seitenhintergrund */ --st-wachstum:#16A36A; /* nur für positive Kennzahlen/Deltas */ /* ── Farben · Dark (max. eine Dark-Sektion pro Seite) ── */ --st-nachtindigo:#0F1433; /* Hintergrund Dark-Sektion */ --st-nachtkarte:#171D45; /* Karten auf Dunkel */ --st-nachtlinie:#283063; /* Rahmen, Raster, Balken-Spur */ --st-indigo-hell:#7B8CF5; /* Akzente, Labels auf Dunkel */ --st-nebeltext:#C9CFF5; /* Fließtext auf Dunkel */ /* ── Verläufe ───────────────────────────────── */ --st-karte-bg: radial-gradient(80% 70% at 85% 0%, #E3E7FF 0%, rgba(227,231,255,0) 60%), linear-gradient(180deg, var(--st-karte-von) 0%, var(--st-karte-bis) 100%); /* Dunkle Kachel (Leistungen): Punktraster auf Nachtkarte → Nachtindigo, zählt nicht als Dark-Sektion */ --st-kachel-dunkel-bg: radial-gradient(rgba(201,207,245,.09) 1px,transparent 1.4px) 0 0/18px 18px, linear-gradient(180deg, var(--st-nachtkarte) 0%, var(--st-nachtindigo) 100%); /* Hervorgehobene Karten */ --st-karte-indigo-bg: radial-gradient(70% 45% at 50% 100%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, var(--st-indigo) 0%, var(--st-soft-indigo) 56%, var(--st-lavendel) 100%); --st-karte-empfohlen-bg: radial-gradient(80% 60% at 85% 0%, var(--st-weiss) 0%, transparent 60%), linear-gradient(180deg, var(--st-lavendel), var(--st-karte-von)); --st-dark-bg: radial-gradient(60% 55% at 85% 0%, rgba(69,91,229,.45) 0%, rgba(69,91,229,0) 70%), radial-gradient(45% 50% at 0% 100%, rgba(123,140,245,.18) 0%, rgba(123,140,245,0) 70%), var(--st-nachtindigo); /* ── Schrift ────────────────────────────────── */ --st-font-head:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --st-font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Größen Desktop / Mobil (fluid) */ --st-h1:clamp(40px, 5.2vw + 12px, 74px); /* Outfit 600, letter-spacing -0.03em */ --st-h2:clamp(30px, 2.6vw + 16px, 48px); /* Outfit 600, -0.025em */ --st-h3:clamp(22px, .6vw + 18px, 26px); /* Outfit 600, -0.02em */ --st-lead:clamp(19px, .3vw + 17px, 21px); /* DM Sans 400, lh 1.6 */ --st-body:17px; /* Landing 16–17, Blog 18/17, lh 1.7 */ --st-small:14px; --st-button:15px; /* Outfit 600, 13–15 px */ --st-kennzahl:clamp(30px, 4vw + 10px, 64px);/* Outfit 600, -0.03em */ --st-label:13px; /* Outfit 600: Labels, Kartentitel klein, Nav 15 */ --st-nav:15px; /* Outfit 600: Navigation, Mega-Menü */ --st-blog-measure:70ch; /* ── Formen ─────────────────────────────────── */ /* sitetap-Ecke: rechts oben + links unten spitz (TL TR BR BL) */ --st-ecke-btn:16px 4px 16px 4px; --st-ecke-pill:12px 3px 12px 3px; --st-ecke-bild:32px 8px 32px 8px; --st-ecke-check:7px 2px 7px 2px; /* Häkchen, Mini-Buttons */ --st-radius-karte:26px; /* Karten gleichmäßig gerundet */ --st-radius-sektion:36px; /* Dark-Sektion */ --st-radius-panel:22px; /* Glas-Panels (Menü), schwebende Mini-Oberflächen */ --st-radius-klein:14px; /* Icon-Kacheln, Bildflächen in Rahmen */ /* ── Schatten ───────────────────────────────── */ --st-glow:0 20px 38px -16px rgba(69,91,229,.6); /* nur Primär-Button */ --st-float:0 10px 24px -14px rgba(28,33,64,.35); /* schwebende Pills, weiße UI auf Karten */ --st-lift:0 14px 28px -12px rgba(28,33,64,.35),0 0 0 1px rgba(69,91,229,.06); /* Logo-Kacheln */ --st-lift-gross:0 28px 52px -22px rgba(28,33,64,.38),0 0 0 1px rgba(69,91,229,.08); /* Browser-Mockups */ /* ── Liquid Glass (Menü, Overlays, Pills über Bildern) ── */ --st-glass-bg:rgba(255,255,255,.72); --st-glass-filter:blur(22px) saturate(160%); --st-glass-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(228,230,238,.8),0 24px 48px -28px rgba(28,33,64,.3); --st-glass-pill-bg:linear-gradient(135deg,rgba(255,255,255,.72),rgba(227,231,255,.42)); --st-glass-pill-filter:blur(14px) saturate(180%); --st-glass-pill-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(154,166,238,.25),0 12px 28px -12px rgba(28,33,64,.35); /* ── Bewegung ───────────────────────────────── */ --st-ease-out:cubic-bezier(.2,.8,.2,1); /* Panels, Menüs */ --st-ease-spring:cubic-bezier(.34,1.56,.64,1);/* CTA-Hover, Hinweis-Tags */ --st-dauer-kurz:.15s; /* Farbe, Hintergrund */ --st-dauer:.25s; /* Bewegung, Drehung */ /* ── Abstände ───────────────────────────────── */ --st-space-1:4px; --st-space-2:8px; --st-space-3:12px; --st-space-4:16px; --st-space-5:24px; --st-space-6:32px; --st-space-7:48px; --st-space-8:72px; --st-space-9:120px; --st-container:1200px; --st-sektion:var(--st-space-8); /* Abstand oben/unten je Sektion, mobil --st-space-7 */ --st-header:88px; /* Header-Höhe, mobil 72px */ } @media (max-width:860px){ :root{--st-sektion:var(--st-space-7);--st-header:72px} } /* Variante Logo B: alles einheitlich rund statt sitetap-Ecke. Aktivieren mit */ [data-logo="b"]{ --st-ecke-btn:999px; --st-ecke-pill:999px; --st-ecke-bild:24px; --st-ecke-check:6px; }