/* Gebündelt aus assets/ds/tokens/*.css (Reihenfolge: fonts, colors, typography, spacing, motion, base). Bei Änderungen an den Token-Dateien diese Datei neu erzeugen. */

/* fonts.css */
/* Self-hosted from Google Fonts (OFL). Variable weight 400–600, latin subset (covers ä ö ü ß € „ “). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/Inter-Variable.woff2') format('woff2');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}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/Newsreader-Italic-Variable.woff2') format('woff2');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}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/Newsreader-Variable.woff2') format('woff2');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}

/* colors.css */
:root{
/* CI base palette (CI-Leitfaden 1.0, §2) */
--tinte:#2A2822;
--tinte-weich:#5B5749;
--rost:#A2603A;
--oliv:#6B6640;
--gruen:#5F7059;
--beige:#EAE3D2;
--papier:#F6F3EA;
/* Derived steps (oklch-mixed from CI values) */
--rost-dunkel:#8A4F2E;
--rost-hell:#C98A63;
--rost-10:rgba(162,96,58,.10);
--tinte-90:#34322B;
--tinte-80:#403D34;
--beige-dunkel:#D9D2C0;
--papier-hell:#FBF9F3;
--weiss:#FFFFFF;
--fehler:#9A3B2E;
--fehler-10:rgba(154,59,46,.08);
--hairline:rgba(42,40,34,.14);
--hairline-stark:rgba(42,40,34,.28);
--hairline-hell:rgba(246,243,234,.16);
--scrim:rgba(42,40,34,.55);

/* Semantic — light (Papier) */
--bg-page:var(--papier);
--surface-card:var(--beige);
--surface-raised:var(--papier-hell);
--surface-inverse:var(--tinte);
--surface-accent:var(--rost);
--text-strong:var(--tinte);
--text-body:var(--tinte);
--text-muted:var(--tinte-weich);
--text-accent:var(--rost);
--text-on-dark:var(--papier);
--text-on-dark-muted:#BDB6A4;
--text-on-accent:var(--papier);
--link:var(--rost);
--link-hover:var(--rost-dunkel);
--border:var(--hairline);
--border-strong:var(--hairline-stark);
--border-on-dark:var(--hairline-hell);
--focus-ring:var(--rost);
--icon:var(--oliv);
--success:var(--gruen);
--danger:var(--fehler);
}

/* typography.css */
:root{
--font-serif:'Newsreader',Georgia,'Times New Roman',serif;
--font-sans:'Inter',Calibri,Arial,sans-serif;
--font-display:var(--font-serif);
--font-body:var(--font-sans);

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;

/* Scale (CI §4: H1 40–64 lh 1.1, H2 32–40, body 16–17 lh 1.6, label 14–15) */
--text-h1:clamp(40px, 5vw, 64px);
--text-h2:clamp(32px, 3vw, 40px);
--text-h3:26px;
--text-h4:20px;
--text-lead:19px;
--text-body-size:17px;
--text-body-sm:16px;
--text-label:15px;
--text-label-sm:14px;
--text-caption:13px;
--text-eyebrow:12px;
--text-stat:clamp(44px, 5vw, 64px);

--lh-tight:1.1; /* @kind other */
--lh-heading:1.2; /* @kind other */
--lh-body:1.6; /* @kind other */
--lh-ui:1.3; /* @kind other */
--tracking-eyebrow:.12em;
--tracking-display:-.01em;
}

/* spacing.css */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;
--section-y:clamp(72px, 8vw, 144px); /* @kind spacing */
--gutter:clamp(20px, 4vw, 48px); /* @kind spacing */
--container:1200px;
--container-narrow:760px;
--measure:62ch;

/* Form (CI §5): nearly square, hairlines instead of shadows */
--radius-none:0;
--radius:2px;
--radius-round:999px; /* avatars & status dots only — never buttons */
--border-width:1px;
--shadow-none:none;
--shadow-overlay:0 24px 48px -24px rgba(42,40,34,.28); /* dialogs/toasts only */

--control-h-sm:36px;
--control-h:44px;
--control-h-lg:52px;
--nav-h:72px;
}

/* motion.css */
:root{
/* CI §5: calm, soft, slow transitions — no effects */
--ease-calm:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-inout:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:180ms; /* @kind other */
--dur:320ms; /* @kind other */
--dur-slow:600ms; /* @kind other */
--dur-reveal:900ms; /* @kind other */
}

/* base.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-medium);color:var(--text-strong);margin:0;letter-spacing:var(--tracking-display);text-wrap:balance}
h1{font-size:var(--text-h1);line-height:var(--lh-tight)}
h2{font-size:var(--text-h2);line-height:var(--lh-heading)}
h3{font-size:var(--text-h3);line-height:var(--lh-heading)}
h4{font-size:var(--text-h4);line-height:var(--lh-heading)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--text-accent)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-calm)}
a:hover{color:var(--link-hover)}
img{display:block;max-width:100%}
::selection{background:var(--rost);color:var(--papier)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
[class^="icon-"],[class*=" icon-"]{line-height:1}
