/* Druvis Website · Design-Tokens (Stand 3.0.1, Oktober 2026), gemeinsam für Seiten und Demo-Overlay.
   Namen sind verbindlich (ergänzen ja, umbenennen nein). Werte stehen als light-dark(hell, dunkel);
   es gilt color-scheme: nach Systemeinstellung, mit data-theme="dark"/"light" erzwungen, auch im Teilbaum.
   --c-blue nur für Flächen, Linien, Symbole, große Schrift; kleine Schrift und Links: --c-link;
   Knöpfe mit weißer Schrift: --c-blue-strong. Kontraste und Regeln: Webseite/README.md. */

/* Hausschrift Plus Jakarta Sans (variabel, 200 bis 800), Lizenz OFL 1.1, lateinischer Satz */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.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;
}
/* Ersatzschrift mit angeglichenen Maßen */
@font-face { font-family: "Jakarta Ersatz"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 105.6%; ascent-override: 98.3%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Ersatz"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 100.7%; ascent-override: 103.1%; descent-override: 22%; line-gap-override: 0%; }

:root {
  color-scheme: light dark;

  /* Marke (in beiden Modi gleich) */
  --c-navy: #172E4D;
  --c-navy-deep: #10213A;
  --c-blue-strong: #2F6BC1;          /* Knöpfe: Weiß darauf 5,26 : 1 */
  --c-blue-strong-hover: #275CA8;    /* Weiß darauf 6,6 : 1 */
  --c-on-blue: #FFFFFF;

  /* Hell | dunkel */
  --c-blue: light-dark(#3878D0, #6FA8F0);
  --c-blue-soft: light-dark(#EBF2FC, rgba(111, 168, 240, 0.14));
  --c-link: light-dark(#2F6BC1, #7DB2F4);          /* 5,26 : 1 auf Weiß | 8,25 : 1 auf #0B1626 */
  --c-bg: light-dark(#FFFFFF, #0B1626);
  --c-bg-alt: light-dark(#F6F8FB, #0F1D31);
  --c-surface: light-dark(#FFFFFF, #13233A);
  --c-surface-2: light-dark(#EEF2F8, #1A2E4B);
  --c-text: light-dark(#172E4D, #EEF3FA);          /* 13,7 : 1 | 15,6 : 1 */
  --c-text-2: light-dark(#3A4A61, #C4D0E0);        /* 9,0 : 1 | 11,6 : 1 */
  --c-muted: light-dark(#56657B, #9AAAC0);         /* ≥ 5,2 : 1 | ≥ 5,7 : 1 auf allen Flächen */
  --c-border: light-dark(#DFE5EE, #22385A);
  --c-border-strong: light-dark(#7C8AA0, #6A7F9E); /* Feldränder ≥ 3 : 1 */
  --c-success: light-dark(#166F3B, #4ADE80);
  --c-success-soft: light-dark(#E6F4EA, rgba(74, 222, 128, 0.12));
  --c-warning: light-dark(#8A5300, #FBBF24);
  --c-warning-soft: light-dark(#FCF1DD, rgba(251, 191, 36, 0.12));
  --c-danger: light-dark(#C62828, #F87171);
  --c-danger-soft: light-dark(#FCEAEA, rgba(248, 113, 113, 0.12));
  --c-focus: light-dark(#2F6BC1, #8EC0FF);

  /* Navy-Bänder (Hero, Demo-Teaser, Aufruf, Fußzeile), in beiden Modi gleich */
  --band-bg: #172E4D;
  --band-surface: #1E3A60;
  --band-text: #FFFFFF;
  --band-text-2: #D5DFEC;
  --band-muted: #A9BAD0;
  --band-link: #8DBBF5;
  --band-border: rgba(255, 255, 255, 0.14);
  --band-border-strong: #7F97B8;
  --band-focus: #9FCBFF;

  /* App-Illustrationen und Glas: bleiben auch in Navy-Bändern die Werte der Seite */
  --app-surface: var(--c-surface);
  --app-surface-2: var(--c-surface-2);
  --app-text: var(--c-text);
  --app-text-2: var(--c-text-2);
  --app-muted: var(--c-muted);
  --app-border: var(--c-border);
  --app-link: var(--c-link);
  --app-chip: var(--c-blue-soft);
  --app-ok: var(--c-success);
  --app-ok-soft: var(--c-success-soft);
  --app-mark: light-dark(#FBE7B5, #4A3A12);
  --glass-bg: light-dark(rgba(255, 255, 255, 0.74), rgba(11, 22, 38, 0.74));
  --glass-rand: light-dark(rgba(23, 46, 77, 0.09), rgba(238, 243, 250, 0.09));
  --glass-filter: saturate(1.6) blur(16px);

  /* Licht und Schatten */
  --lichtkante: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.16));
  --shadow-1: 0 1px 2px light-dark(rgba(23, 46, 77, 0.06), rgba(0, 0, 0, 0.4)), 0 3px 8px light-dark(rgba(23, 46, 77, 0.06), rgba(0, 0, 0, 0.25));
  --shadow-2: 0 2px 4px light-dark(rgba(23, 46, 77, 0.05), rgba(0, 0, 0, 0.3)), 0 10px 22px light-dark(rgba(23, 46, 77, 0.08), rgba(0, 0, 0, 0.38)), 0 26px 48px -14px light-dark(rgba(47, 107, 193, 0.22), rgba(56, 120, 208, 0.24));
  --shadow-3: 0 4px 10px light-dark(rgba(23, 46, 77, 0.06), rgba(0, 0, 0, 0.36)), 0 20px 40px light-dark(rgba(23, 46, 77, 0.12), rgba(0, 0, 0, 0.46)), 0 56px 100px -24px light-dark(rgba(47, 107, 193, 0.34), rgba(56, 120, 208, 0.38));
  --shadow-glow: 0 0 0 1px rgba(56, 120, 208, 0.25), 0 12px 40px -8px rgba(56, 120, 208, 0.55);

  /* Schrift */
  --font-sans: "Plus Jakarta Sans", "Jakarta Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem;                                   /* 13 px */
  --fs-sm: 0.9375rem;                                   /* 15 px */
  --fs-md: 1.0625rem;                                   /* 17 px, Fließtext */
  --fs-lg: 1.1875rem;                                   /* 19 px */
  --fs-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);  /* 20 bis 23 px */
  --fs-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);    /* 24 bis 30 px */
  --fs-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* 28 bis 40 px */
  --fs-4xl: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);        /* 32 bis 56 px */

  /* Abstände (4er-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* Formen, Bewegung, Maße */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 320ms;
  --content-w: 1200px;
  --text-w: 70ch;
  --control-h: 48px;
}

/* Dunkel nach Systemeinstellung bzw. erzwungen; hell erzwungen */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }

/* Rückfall für Browser ohne light-dark(): Hell */
@supports not (color: light-dark(#000, #fff)) {
  :root, [data-theme] {
    color-scheme: light;
    --c-blue: #3878D0; --c-blue-soft: #EBF2FC; --c-link: #2F6BC1; --c-bg: #FFFFFF; --c-bg-alt: #F6F8FB;
    --c-surface: #FFFFFF; --c-surface-2: #EEF2F8; --c-text: #172E4D; --c-text-2: #3A4A61; --c-muted: #56657B;
    --c-border: #DFE5EE; --c-border-strong: #7C8AA0; --c-success: #166F3B; --c-success-soft: #E6F4EA;
    --c-warning: #8A5300; --c-warning-soft: #FCF1DD; --c-danger: #C62828; --c-danger-soft: #FCEAEA;
    --c-focus: #2F6BC1; --app-mark: #FBE7B5; --glass-bg: rgba(255, 255, 255, 0.92); --glass-rand: rgba(23, 46, 77, 0.09);
    --lichtkante: transparent; --shadow-1: none; --shadow-2: none; --shadow-3: none;
  }
}

/* Weniger Bewegung (gilt auch im Demo-Overlay) */
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; } }