/* ============================================================ UpGrade, Marken-Vereinheitlichung (docs/WEBSITE_AUDIT_2026-07-22). Bringt die Rechtsseiten (style.css) auf die Design-Sprache der Landingpage (landing.css): gemeinsame Tokens, neo-brutalistischer Header/Footer/ Buttons/Cards und durchgehend helles Marken-Theme (kein Dark-Mode mehr). Wird IMMER NACH der jeweiligen Basis-CSS geladen, damit diese Regeln gewinnen. Die Landingpage selbst lädt dieses File NICHT (sie hat landing.css) und bleibt unverändert. ============================================================ */ :root { /* Kanonische Marken-Tokens. EINZIGE Quelle - siehe Kopf dieser Datei. */ --ink: #18213d; --ink-soft: #45506b; --paper: #fffdf8; --cream: #f7f1e7; --lilac: #7057df; --lilac-deep: #49329e; --mint: #bdebe2; --coral: #f47f5c; --coral-ink: #a44128; --sun: #ffcb4c; --brand-line: #d8d8e2; /* Legacy-Token-Namen (style.css) auf die Marke mappen */ --primary: #7057df; --primary-dark: #49329e; --primary-shade: #49329e; --secondary: #bdebe2; --secondary-shade: #6fbfb2; --tertiary: #f47f5c; --bg: #f7f1e7; --surface: #fffdf8; --surface-variant: #f1edfb; --text: #18213d; --text-muted: #45506b; --border: #18213d; --focus: #49329e; --shadow: 0 12px 30px rgba(24,33,61,.10); --shadow-soft: 0 6px 18px rgba(24,33,61,.08); --font-head: "Poppins","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Legacy-Token-Namen auf die Marke mappen. Der Elternbereich (elternbereich.css) liest hier seit dem 06.10.2026 NUR die Tokens. */ --muted: #45506b; --line: #d8d8e2; /* Am 22.09.2026 aus landing.css uebernommen. Sie standen dort, weil index.html brand.css nie eingebunden hatte; jetzt liegen sie hier, wo alle Seiten sie sehen. */ --sand: #e5d1b8; --lavender: #dcd5f7; --mint-deep: #1c665b; --peach: #f4c4ad; --peach-deep: #7d3424; --sky: #cee4f5; --yellow: #f7da83; --white: #ffffff; --content: 1240px; --radius-small: 14px; --radius-medium: 24px; --radius-large: 40px; /* Die Ecke der Telefonattrappen. Eigener Wert, weil er etwas abbildet - das Geraet - und nicht eine Flaeche gestaltet. Er darf sich unabhaengig von --radius-large bewegen, wenn die Attrappen ausgetauscht werden. Am 22.09.2026 eingefuehrt, weil .phone-frame 38px und .parent-screen 35px hatte. Beides Telefonattrappen mit demselben 7px-Rahmen; die BREITERE (310px gegen 264px) hatte dabei die KLEINERE Ecke, was die Rundung optisch noch ungleicher machte. */ --radius-device: 38px; /* ── WAS BEWUSST KEIN TOKEN IST ─────────────────────────────────────────── Die Zaehlung "23 verschiedene Radien" aus dem Design-Review vom 22.09.2026 klang nach Streuung, war es aber groesstenteils nicht: 50% (8x) Kreise. Eine Form, keine Groesse. 999px Pille. Dito. 9 Paarwerte Das asymmetrische Eckenmotiv (28px 10px 28px 10px und Verwandte). Ein gestalterisches Mittel, kein Versehen - ein Token wuerde die Absicht verstecken statt sie zu sichern. 2px Die Striche des Burger-Icons. 6px Der Fokusring einer Frage-Zeile. 10px Ein kleiner Preis-Chip. 16px Der Knopf. Bewusst 2px weicher als die Formularfelder. Echte Streuung waren nur 13px gegen 14px an Formularflaechen und die beiden Attrappen. Beides ist jetzt zusammengefuehrt. */ --shadow-phone: 0 30px 60px rgba(39, 45, 72, .22); /* ── SCHRIFTGROESSEN ────────────────────────────────────────────────────── Am 22.09.2026 aus dem Bestand gewonnen, nicht aus einem Lehrbuchverhaeltnis. landing.css hatte 26 verschiedene feste Groessen fuer 59 Vorkommen - acht davon zwischen 14,4 und 15,5 Pixeln, also innerhalb eines Pixels. Das ist keine Hierarchie, das ist Streuung. Die sieben Stufen liegen dort, wo die Werte tatsaechlich lagen. Deshalb verschiebt sich beim Umstellen nichts nennenswert: groesste Abweichung 0,80 Pixel, die meisten unter einem halben. Eine Stufe mit weniger (ohne die 13) haette in der Preiskachel zwei Groessen zusammenfallen lassen. Die Namen tragen die Pixelzahl, weil sieben Stufen in einem so engen Band keine sinnvollen Rollennamen hergeben: "sm" und "s" nebeneinander waere geraten, --text-13 ist nachpruefbar. Ueberschriften stehen bewusst NICHT hier. Sie nutzen clamp() und skalieren mit dem Viewport; eine feste Stufe waere dort ein Rueckschritt. --text-20 kam nach: vier Groessen steckten in font-Kurzschreibweisen und waren beim ersten Durchgang nicht gefunden worden, weil dort nur nach `font-size:` gesucht wurde. Darunter 1,2rem und 1,25rem - 0,8 Pixel auseinander, dieselbe Streuung wie im kleinen Band. Beide liegen jetzt auf --text-20. */ --text-10: 0.625rem; --text-12: 0.75rem; --text-13: 0.8125rem; --text-14: 0.875rem; --text-15: 0.9375rem; --text-16: 1rem; --text-17: 1.0625rem; --text-20: 1.25rem; } /* Falls ein alter localStorage-Wert doch data-theme="dark" setzen würde: Marke bleibt hell (der Toggle wird auf den Rechtsseiten ohnehin entfernt). */ [data-theme="dark"] { --bg: #f7f1e7; --surface: #fffdf8; --surface-variant: #f1edfb; --text: #18213d; --text-muted: #45506b; --border: #18213d; } body { background: var(--cream); color: var(--ink); } /* ---------- Header (legacy .site-header / .nav) ---------- */ .site-header { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--brand-line); backdrop-filter: blur(16px); } .brand, .nav .brand { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; color: var(--ink); } .nav-links a { color: var(--ink-soft); font-weight: 700; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--lilac-deep); } .nav-links .nav-parent-link { color: var(--lilac-deep); } .nav-toggle { color: var(--ink); } /* ---------- Buttons (neo-brutalistisch, wie Landing) ---------- */ .btn { border-radius: .65rem; font-family: var(--font-body); font-weight: 700; } .btn-primary { background: var(--lilac); color: #fff; border: 2px solid var(--lilac); box-shadow: 4px 4px 0 var(--lilac-deep); } .btn-primary:hover { background: var(--lilac-deep); color: #fff; transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--lilac-deep); } .btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--sun); } .btn-outline:hover { background: var(--ink); color: #fff; } /* ---------- Footer (dunkel, wie Landing-Footer) ---------- */ .site-footer { background: var(--ink); color: #fff; border-top: 0; padding: 2.4rem 0; } .site-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer a:hover { color: var(--sun); } /* ---------- Rechts-Inhalt: Marken-Typo ---------- */ .legal h1, .legal h2, .legal h3 { font-family: var(--font-head); color: var(--ink); letter-spacing: -.02em; } .legal a { color: var(--lilac-deep); } .legal .placeholder { background: var(--sun); color: var(--ink); } /* ---------- Consent-Status-Icons (Inline-SVG statt Emoji) ---------- */ .consent-icon { line-height: 0; } .consent-icon svg { width: 56px; height: 56px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 404-Seite ---------- */ .error-code { margin: .4rem 0 .2rem; font-family: var(--font-head); font-weight: 800; font-size: 3rem; letter-spacing: -.04em; color: var(--lilac); line-height: 1; } .error-links { margin-top: 1.4rem; font-size: .85rem; color: var(--ink-soft); } .error-links a { color: var(--lilac-deep); } /* ---------- Mauszeiger ---------- */ /* Browser zeigen bei