/* Design-Tokens & Basis – 1:1 aus reference/tokens + styles.css */
/* PP Frama — display / headline. PP Frama Text — running text & UI. */
@font-face{font-family:"PP Frama";src:url("../fonts/PPFrama-Regular.woff2") format("woff2"),url("../fonts/PPFrama-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Frama";src:url("../fonts/PPFrama-RegularItalic.woff2") format("woff2"),url("../fonts/PPFrama-RegularItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PP Frama";src:url("../fonts/PPFrama-Medium.woff2") format("woff2"),url("../fonts/PPFrama-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Frama";src:url("../fonts/PPFrama-Bold.woff2") format("woff2"),url("../fonts/PPFrama-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PP Frama Text";src:url("../fonts/PPFramaText-Light.woff2") format("woff2"),url("../fonts/PPFramaText-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"PP Frama Text";src:url("../fonts/PPFramaText-Regular.woff2") format("woff2"),url("../fonts/PPFramaText-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Frama Text";src:url("../fonts/PPFramaText-Bold.woff2") format("woff2"),url("../fonts/PPFramaText-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
/* Tinte — ink */
--tinte-900:#1B1B1B;--tinte-800:#262626;--tinte-700:#2C2C35;--tinte-600:#45454F;
/* Stein — warm neutrals */
--stein-500:#6E6E78;--stein-400:#93939C;--stein-300:#BFBFC5;--stein-200:#DEDDD8;--stein-100:#EDEBE5;--stein-050:#F4F3EF;
--weiss:#FFFFFF;
/* Lila — the campaign's main colour family: backgrounds, surfaces, shapes */
--lila-300:#C8A0FA;--lila-500:#9B75CE;--lila-200:#DCC6FA;--lila-050:#F3EAFE;
/* Indigo — deep purple, primary actions, links, inverse sections */
--indigo-500:#5E4FB5;--indigo-700:#3F3583;--indigo-800:#2E2663;
/* Sonne & Orange — highlights and support only, never large surfaces */
--sonne-500:#FFAE00;--sonne-600:#D98F00;--sonne-200:#FFE3A3;--sonne-050:#FFF5DC;
--orange-500:#FF5A00;
/* Legacy aliases (kept so older references resolve) */
--blau-700:var(--indigo-800);--blau-600:var(--indigo-700);--blau-500:var(--indigo-500);--blau-200:var(--lila-200);--blau-050:var(--lila-050);
--gold-600:var(--sonne-600);--gold-500:var(--sonne-500);--gold-200:var(--sonne-200);--gold-050:var(--sonne-050);
--nacht-800:#231D4D;--nacht-600:var(--indigo-700);--nacht-500:var(--indigo-500);--nacht-200:#D8D2F0;--nacht-050:#F1EFFA;
/* Feedback */
--gruen-600:#1E6B4E;--gruen-050:#E7F2EC;

/* ---- Semantic aliases ---- */
--text-strong:var(--tinte-900);
--text-body:var(--tinte-800);
--text-muted:var(--stein-500);
--text-inverse:var(--stein-050);
--text-accent:var(--indigo-700);
--text-link:var(--indigo-500);
--text-link-hover:var(--indigo-700);

--surface-page:var(--stein-050);
--surface-card:var(--weiss);
--surface-sunken:var(--stein-100);
--surface-inverse:var(--indigo-700);
--surface-accent:var(--indigo-500);
--surface-accent-soft:var(--lila-050);
--surface-brand:var(--lila-500);
--surface-info:var(--indigo-700);
--surface-info-soft:var(--nacht-050);
--surface-highlight:var(--sonne-050);

--border-hairline:var(--stein-200);
--border-strong:var(--tinte-900);
--border-accent:var(--lila-500);
--border-inverse:rgba(255,255,255,.22);

--highlight:var(--sonne-500);
--highlight-strong:var(--orange-500);
--focus-ring:var(--sonne-500);
--selection-bg:var(--sonne-200);
}

:root{
--font-display:"PP Frama","Helvetica Neue",Arial,sans-serif;
--font-text:"PP Frama Text","Helvetica Neue",Arial,sans-serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-bold:700; /* @kind font */

/* Display — PP Frama, tight, never below -0.02em tracking */
--size-display-1:clamp(3.25rem,7.2vw,6rem);   /* 52 → 96 */
--size-display-2:clamp(2.5rem,4.6vw,3.75rem); /* 40 → 60 */
--size-h1:2.5rem;   /* 40 */
--size-h2:1.875rem; /* 30 */
--size-h3:1.375rem; /* 22 */
--size-h4:1.125rem; /* 18 */
--size-body-lg:1.1875rem; /* 19 */
--size-body:1rem;   /* 16 */
--size-body-sm:0.875rem; /* 14 */
--size-caption:0.8125rem; /* 13 */
--size-label:0.75rem; /* 12 */

--lh-display:0.98; /* @kind font */
--lh-heading:1.12; /* @kind font */
--lh-snug:1.35; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-loose:1.75; /* @kind font */

--ls-display:-0.03em; /* @kind font */
--ls-heading:-0.02em; /* @kind font */
--ls-body:0em; /* @kind font */
--ls-label:0.09em; /* @kind font */

/* Semantic type roles */
--type-eyebrow:var(--fw-bold) var(--size-label)/1.2 var(--font-text);
--type-lead:var(--fw-light) var(--size-body-lg)/var(--lh-loose) var(--font-text);
}

:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:40px;--space-8:56px;--space-9:80px;--space-10:120px;--space-11:160px;

--gutter:24px;
--container-max:1200px;
--container-narrow:720px;
--section-y:var(--space-10);
--section-y-tight:var(--space-9);
--grid-columns:12; /* @kind other */
}

:root{
/* Deliberately near-square: the brand reads as printed matter, not app chrome. */
--radius-0:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:6px;
--radius-pill:999px;
--border-w:1px;
--border-w-strong:2px;
--rule-w:1px;
}

:root{
--shadow-none:none;
--shadow-1:0 1px 2px rgba(27,27,27,.06);
--shadow-2:0 2px 8px rgba(27,27,27,.08);
--shadow-3:0 12px 32px rgba(27,27,27,.12);
--shadow-focus:0 0 0 3px rgba(49,67,140,.35);
--overlay-scrim:rgba(27,27,27,.62); /* @kind color */
--blur-veil:saturate(160%) blur(14px); /* @kind other */
}

:root{
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-out:cubic-bezier(0,0,0,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--transition-ui:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:1ms; /* @kind other */
--dur-base:1ms; /* @kind other */
--dur-slow:1ms; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--size-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);color:var(--text-strong);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration-line:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:var(--transition-ui)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
::selection{background:var(--selection-bg);color:var(--tinte-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}