/* =============================================================
IN CHANCEN DENKEN — DESIGNSYSTEM V3.0
Gemeinsame Tokens & Komponenten für Landingpage + alle Tools.
Einbindung:
============================================================= */
/* ---------- Fonts ----------
Bewusst NICHT per @import geladen (blockierender Extra-Roundtrip).
Stattdessen in jeder Seite im :
*/
/* ---------- Tokens ---------- */
:root{
/* Farbwelt: Creme / Sonnenlicht / helles Grün / Himmelblau */
--cream: #fffaf0;
--cream-deep: #fff3d9;
--cream-line: #ecdfc0;
--paper: #fffdf7;
--ink: #16231c;
--ink-soft: #5c6a5d;
--ink-faint: #8a9389;
--sun: #ffc94d;
--sun-strong: #f2ab1f;
--sun-soft: #ffedb8;
--leaf: #2f9d6f;
--leaf-deep: #1c6e4c;
--leaf-soft: #d9f0e2;
--sky: #7cc7dd;
--sky-deep: #3f97b3;
--sky-soft: #ddf1f6;
--warn: #c07a2b;
--risk: #b05242;
--shadow-sm: 0 6px 18px rgba(70, 50, 10, .08);
--shadow-md: 0 18px 46px rgba(70, 50, 10, .12);
--shadow-lg: 0 28px 70px rgba(70, 50, 10, .16);
--radius-sm: 14px;
--radius-md: 22px;
--radius-lg: 32px;
--radius-pill: 999px;
--font-display: 'Instrument Sans', 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-body: 'Manrope', 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--ease: cubic-bezier(.22,.9,.32,1);
--dur-fast: .16s;
--dur-med: .32s;
--dur-slow: .5s;
}
/* ---------- Reset & base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background:
radial-gradient(circle at 8% 6%, rgba(255,201,77,.35), transparent 24%),
radial-gradient(circle at 92% 8%, rgba(124,199,221,.28), transparent 26%),
radial-gradient(circle at 50% 100%, rgba(47,157,111,.10), transparent 32%),
linear-gradient(160deg, var(--cream) 0%, #fff8e6 55%, #f5fbf1 100%);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; letter-spacing: -.03em; font-weight: 700; }
p{ margin: 0; }
a{ color: var(--leaf-deep); }
img,svg{ display: block; max-width: 100%; }
button{ font-family: inherit; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
*{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* Focus visibility (accessibility) */
:focus-visible{
outline: 3px solid var(--leaf);
outline-offset: 3px;
border-radius: 8px;
}
.wrap{ max-width: 1160px; margin: 0 auto; padding: 28px 20px 80px; }
/* ---------- Site header ----------
Gemeinsame Kopfzeile aller Seiten: Markenname + eine kontextuelle Aktion
(Status-Badge auf der Landingpage, Rücklink auf Tool-/Rechtsseiten).
Ersetzt drei zuvor fast identische, aber inkonsistent benannte
Implementierungen (