/* XR4.world — Design-Tokens.
 * Erzeugt aus scripts/design.py. Nicht von Hand ändern.
 * Farben aus den Logodateien gemessen, alle Stufen gerechnet und
 * gegen WCAG 2.1 geprüft (siehe brandbook.md).
 */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/sora-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/sora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/sora-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}

:root{
  /* Marke */
  --xr4-anthrazit:#202c30;
  --xr4-mint:#58b8a0;
  --xr4-salbei:#588070;
  --gradient-marke:linear-gradient(135deg, #64c49c 0%, #54b4a4 100%);
  --gradient-marke-weich:linear-gradient(135deg, #e9f2ef 0%, #d5e7e2 100%);
  --gradient-tiefe:linear-gradient(160deg, #0e1415 0%, #202c30 60%, #588070 180%);
  /* Farbskalen */
  --ink-950:#0e1415;
  --ink-900:#161f22;
  --ink-800:#202c30;
  --ink-700:#2d3e43;
  --ink-600:#3f575f;
  --ink-500:#567681;
  --ink-400:#799aa5;
  --ink-300:#acbec3;
  --ink-200:#d6dee0;
  --ink-100:#ebeeef;
  --ink-50:#f6f8f8;
  --mint-900:#183931;
  --mint-800:#214f43;
  --mint-700:#2e6b5c;
  --mint-600:#3a8874;
  --mint-500:#58b8a0;
  --mint-400:#85c6b6;
  --mint-300:#aed5cc;
  --mint-200:#d5e7e2;
  --mint-100:#e9f2ef;
  --mint-50:#f6f9f8;
  --sage-700:#3a554a;
  --sage-600:#4b6d5f;
  --sage-500:#588070;
  --sage-400:#77a291;
  --sage-200:#d4deda;
  --sage-100:#ebefee;
  /* Typografie */
  --font-display:'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-text:'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-display-size:60px;
  --text-display-line:1.05;
  --text-display-weight:700;
  --text-display-tracking:-0.02em;
  --text-h1-size:48px;
  --text-h1-line:1.1;
  --text-h1-weight:700;
  --text-h1-tracking:-0.02em;
  --text-h2-size:30px;
  --text-h2-line:1.2;
  --text-h2-weight:600;
  --text-h2-tracking:-0.01em;
  --text-h3-size:24px;
  --text-h3-line:1.3;
  --text-h3-weight:600;
  --text-h3-tracking:-0.01em;
  --text-h4-size:20px;
  --text-h4-line:1.4;
  --text-h4-weight:600;
  --text-lead-size:20px;
  --text-lead-line:1.6;
  --text-lead-weight:400;
  --text-body-size:16px;
  --text-body-line:1.65;
  --text-body-weight:400;
  --text-body-sm-size:14px;
  --text-body-sm-line:1.6;
  --text-body-sm-weight:400;
  --text-caption-size:13px;
  --text-caption-line:1.5;
  --text-caption-weight:400;
  --text-eyebrow-size:12px;
  --text-eyebrow-line:1.2;
  --text-eyebrow-weight:600;
  --text-eyebrow-tracking:0.14em;
  --text-button-size:15px;
  --text-button-line:1.0;
  --text-button-weight:600;
  --text-button-tracking:0.01em;
  --text-code-size:14px;
  --text-code-line:1.6;
  --text-code-weight:400;
  /* Abstände, Radien, Schatten */
  --space-3xs:2px;
  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;
  --space-5xl:128px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(32,44,48,.06);
  --shadow-md:0 4px 16px -4px rgba(32,44,48,.10);
  --shadow-lg:0 12px 32px -8px rgba(32,44,48,.16);
  --shadow-xl:0 24px 56px -16px rgba(32,44,48,.22);
  --shadow-akzent:0 16px 40px -20px rgba(88,184,160,.55);
  /* Bewegung */
  --motion-schnell:120ms;
  --motion-normal:180ms;
  --motion-langsam:320ms;
  --motion-kurve:cubic-bezier(.2,.8,.2,1);
  --motion-kurve-ein:cubic-bezier(.4,0,1,1);
  /* Layout */
  --layout-container:1200px;
  --layout-container-schmal:760px;
  --layout-rand:24px;
  --layout-spalten:12;
  --layout-spaltenabstand:24px;
  --breakpoint-sm:480px;
  --breakpoint-md:768px;
  --breakpoint-lg:1024px;
  --breakpoint-xl:1280px;
  --breakpoint-2xl:1536px;
  /* Rollen — helles Erscheinungsbild (Voreinstellung) */
  --color-background:#ffffff;
  --color-surface:#f6f8f8;
  --color-surface-2:#ebeeef;
  --color-border:#d6dee0;
  --color-border-strong:#7d99a1;
  --color-text:#202c30;
  --color-text-muted:#567681;
  --color-text-subtle:#799aa5;
  --color-primary:#202c30;
  --color-primary-hover:#2d3e43;
  --color-accent:#37826f;
  --color-accent-hover:#2b6557;
  --color-accent-soft:#e9f2ef;
  --color-on-accent:#ffffff;
  --color-erfolg:#288651;
  --color-erfolg-soft:#e7f3ec;
  --color-warnung:#9f6917;
  --color-warnung-soft:#f5efe5;
  --color-fehler:#c8443c;
  --color-fehler-soft:#f3e8e7;
  --color-hinweis:#37826f;
  --color-hinweis-soft:#e9f2ef;
}

/* Dunkles Erscheinungsbild. Zwei Wege, damit sowohl die Systemeinstellung
   als auch ein Schalter in der Anwendung greift. */
@media (prefers-color-scheme: dark){:root:not([data-theme='light']){
  --color-background:#0e1415;
  --color-surface:#161f22;
  --color-surface-2:#202c30;
  --color-border:#2d3e43;
  --color-border-strong:#4b6871;
  --color-text:#f6f8f8;
  --color-text-muted:#799aa5;
  --color-text-subtle:#567681;
  --color-primary:#58b8a0;
  --color-primary-hover:#85c6b6;
  --color-accent:#58b8a0;
  --color-accent-hover:#aed5cc;
  --color-accent-soft:#202c30;
  --color-on-accent:#0e1415;
  --color-erfolg:#2f9e5f;
  --color-erfolg-soft:#15472b;
  --color-warnung:#d08a1e;
  --color-warnung-soft:#50350c;
  --color-fehler:#ce5750;
  --color-fehler-soft:#481714;
  --color-hinweis:#58b8a0;
  --color-hinweis-soft:#1b4037;
}}
:root[data-theme='dark']{
  --color-background:#0e1415;
  --color-surface:#161f22;
  --color-surface-2:#202c30;
  --color-border:#2d3e43;
  --color-border-strong:#4b6871;
  --color-text:#f6f8f8;
  --color-text-muted:#799aa5;
  --color-text-subtle:#567681;
  --color-primary:#58b8a0;
  --color-primary-hover:#85c6b6;
  --color-accent:#58b8a0;
  --color-accent-hover:#aed5cc;
  --color-accent-soft:#202c30;
  --color-on-accent:#0e1415;
  --color-erfolg:#2f9e5f;
  --color-erfolg-soft:#15472b;
  --color-warnung:#d08a1e;
  --color-warnung-soft:#50350c;
  --color-fehler:#ce5750;
  --color-fehler-soft:#481714;
  --color-hinweis:#58b8a0;
  --color-hinweis-soft:#1b4037;
}

/* Grundlagen. Bewusst knapp: das CD gibt Werte vor, keine fertige Oberfläche. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-background);color:var(--color-text);
  font-family:var(--font-text);font-size:var(--text-body-size);
  line-height:var(--text-body-line);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 var(--space-md)}
a{color:var(--color-accent);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;
  border-radius:var(--radius-sm)}
::selection{background:var(--mint-200);color:var(--ink-800)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;
  transition-duration:.01ms!important}}