/* bembel.ai – Grundlagen: Schriften, Design-Tokens, Reset.
   Die Tokens sind die einzige Quelle fuer Farben, Radien und Typografie;
   alle Komponenten referenzieren sie. */

/* ========== SCHRIFTEN (lokal gehostet) ========== */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dm-sans-0.b9209b52c467.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dm-sans-1.6c1e961057d2.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-0.b9209b52c467.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-1.6c1e961057d2.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-0.b9209b52c467.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-1.6c1e961057d2.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-0.b9209b52c467.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-1.6c1e961057d2.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-0.b9209b52c467.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-1.6c1e961057d2.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-0.0d056416eb67.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-1.ff76a3d9b588.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-2.a65c831714d3.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;
}

  :root {
    --navy: #1E2D6B;
    --navy-dark: #151f4d;
    --navy-light: #2a3d8f;
    --lavender: #ECEDF4;
    --lavender-mid: #d8daf0;
    --white: #ffffff;
    --text-dark: #1a1a2e;
    --text-mid: #4a4f7a;
    /* Kontrast: #8890bb -> #5C6599 (2.66:1 -> 4.76:1 auf Lavendel,
       3.11:1 -> 5.56:1 auf Weiß). Hellste zulässige Textfarbe – nicht aufhellen. */
    --text-light: #5C6599;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --error: #a5232f;
    /* Hoehe der fixierten Kopfleiste (site-chrome.css, nav{height:68px}, dort als
       Prototyp-Wert stehen gelassen). Seiten ohne vollflaechigen Hero versetzen ihren
       Inhalt um diesen Wert, damit nichts unter der Leiste liegt. */
    --nav-height: 68px;

    /* Distill (audit.md P3): Weiss-Transparenz-Stufen, die im Prototyp als rohe
       rgba(255,255,255,…)-Werte auf Navy-Flaechen und den (halb)transparenten Kopf-/Menue-
       Hintergruenden vorkamen. Jede Stufe entspricht exakt einem im Port genutzten Wert – keine
       zusaetzlichen Zwischenstufen, keine zusammengelegt, die sich sichtbar unterscheiden wuerden.
       Prototyp-Regeln duerfen diese Tokens referenzieren, solange der berechnete Wert identisch
       bleibt; das ist keine Werteaenderung und braucht keinen eigenen Kommentar an der Stelle
       (siehe CLAUDE.md/DESIGN.md). */
    --white-a07: rgba(255,255,255,.07);
    --white-a08: rgba(255,255,255,.08);
    --white-a12: rgba(255,255,255,.12);
    --white-a13: rgba(255,255,255,.13);
    --white-a14: rgba(255,255,255,.14);
    --white-a15: rgba(255,255,255,.15);
    --white-a40: rgba(255,255,255,.4);
    --white-a50: rgba(255,255,255,.5);
    --white-a60: rgba(255,255,255,.6);
    --white-a62: rgba(255,255,255,.62);
    --white-a65: rgba(255,255,255,.65);
    --white-a68: rgba(255,255,255,.68);
    --white-a75: rgba(255,255,255,.75);
    --white-a80: rgba(255,255,255,.8);
    --white-a90: rgba(255,255,255,.9);
    --white-a96: rgba(255,255,255,.96);
    --white-a98: rgba(255,255,255,.98);
    --white-a100: rgba(255,255,255,1);

    /* Distill: Einzelfarben ausserhalb des Navy/Lavendel-Systems (DESIGN.md "One Hue Rule" –
       Bestand, nicht Vorbild; wird hier nur benannt, nicht entfernt). */
    --periwinkle: #9db0f5;
    --mint: #6ee7b7;

    /* Distill: Farben des gelben/gruenen Hinweiskastens auf den Rechtstext-Seiten (legal.css
       .note/.ok) – eine Editier-Hilfe, die vor dem Launch entfernt wird (TASKS.md). */
    --note-bg: #FFF8E6;
    --note-border: #F0DFA8;
    --note-border-strong: #D9A82B;
    --note-text: #6B551B;
    --note-text-strong: #4F3E12;
    --note-ok-bg: #EDF7EE;
    --note-ok-border: #C6E3C9;
    --note-ok-border-strong: #4C9A52;
    --note-ok-text: #2F5A33;
    --note-ok-text-strong: #24461F;

    /* Politur (Schritt 7): die letzten rohen Farbwerte ausserhalb der Tokens – Navy-Toene fuer
       Schatten, Trennlinie der Kopfleiste und die Leistungs-Tags, der Hintergrund hinter den
       Dialogen und die beiden Schwarz-Schatten auf Navy (Hero-Button, Portrait). Gleiche
       Regel wie oben: ein Token pro tatsaechlich genutztem Wert, berechnete Farbe identisch. */
    --navy-a10: rgba(30,45,107,.1);
    --navy-a12: rgba(30,45,107,.12);
    --navy-a25: rgba(30,45,107,.25);
    --scrim: rgba(10,15,40,.55);
    --black-a28: rgba(0,0,0,.28);
    --black-a40: rgba(0,0,0,.4);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--text-dark);
    background: var(--white);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  /* ========== BARRIEREFREIHEIT (alle Seiten) ========== */
  /* Nur fuer Screenreader: bleibt im Barrierefreiheitsbaum, belegt keinen Platz. */
  .visually-hidden,
  .skip-link:not(:focus) {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Sprunglink: erstes Element im <body>, erscheint erst mit Tastaturfokus – ueber der
     fixierten Navigation (z-index 100) und den Dialogen (1000). Weiss auf Navy 12.8:1,
     Ring navy auf der weissen Leiste 12.8:1. */
  .skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 2000;
    background: var(--navy); color: var(--white);
    padding: 10px 18px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none;
    box-shadow: 0 4px 12px var(--navy-a25);
  }
  /* border-radius: die Fokusregeln der Seiten-Stylesheets (a:focus-visible, 3px) kommen spaeter
     in der Kaskade und wuerden der Pille sonst die Ecken abschneiden, sobald sie erscheint. */
  .skip-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--radius-sm); }

  /* ========== REDUZIERTE BEWEGUNG (alle Seiten) ========== */
  /* Site-weit, weil html{scroll-behavior} hier steht: gilt fuer Sprunglink, In-Page-Anker
     (auch im Footer der Rechtstexte) und jedes ungeankerte scrollIntoView() in bembel_ai.js.
     Ein explizites behavior:'smooth' in JS (Nach-oben-Button) faengt diese Regel nicht ab;
     dafuer prueft bembel_ai.js dieselbe Media Query separat. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }