/* ═══════════════════════════════════════════════════════════════════
   dv_scripts — Gestaltungsgrundlage
   Farben, Schriften, Abstände. Von allen drei Entwürfen geteilt.

   Die Palette ist aus dv_docs/build/template.html übernommen, damit
   Website und Dokumentation dieselbe Sprache sprechen. Die sechs
   Kategoriefarben sind die Paletten aus Config.Themes der Scripts;
   amethyst ist der Hauston der Marke.

   EINE Ergänzung gegenüber dv_docs: die -ink-Fassungen der
   Kategoriefarben. Begründung unten bei „Kategoriefarben".
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriften ──────────────────────────────────────────────────────
   Lokal, kein Request zu Google. IBM Plex Sans liefert Google als
   variable Schrift aus — eine Datei für alle Schnitte von 100 bis 700. */

@font-face{
  font-family:"Plex Sans";
  src:url(/fonts/plex-sans-var.woff2) format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url(/fonts/plex-mono-400.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url(/fonts/plex-mono-500.woff2) format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url(/fonts/plex-mono-600.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex Serif";
  src:url(/fonts/plex-serif-400.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex Serif";
  src:url(/fonts/plex-serif-400-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ── Farben: hell ───────────────────────────────────────────────────
   Die vollständige Palette steht auf bloßem :root. Die Dunkelfassung
   überschreibt nur, was sich ändert — so gibt es keine Farbe, deren
   einzige Definition in einem @media-Block steckt. */
:root{
  color-scheme:light;

  /* Kategorien — Fläche, Linie, Marke */
  --c-amethyst:#7d6df0; --c-bernstein:#c47a2e; --c-azur:#2e7fc4;
  --c-koralle:#d0433f;  --c-magenta:#c4479a;   --c-smaragd:#2ea173;
  --c-graphit:#5b5873;

  /* Kategorien — Text und Flächen mit weißer Schrift.
     Die Grundtöne liegen auf Hell bei 3,0–4,3:1 und fallen als
     Textfarbe durch WCAG AA. Diese Fassungen sind so weit abgedunkelt,
     dass beides trägt: ≥4,55:1 auf --bg und ≥4,6:1 für Weiß darauf.
     Im Dunkelmodus ist die Frage keine — dort stehen die hellen
     Fassungen bei 6,2–10,3:1. */
  --c-amethyst-ink:#6450f0; --c-bernstein-ink:#9a5e21; --c-azur-ink:#266fae;
  --c-koralle-ink:#c9322d;  --c-magenta-ink:#b9388d;   --c-smaragd-ink:#217956;
  --c-graphit-ink:#5a5772;

  /* Flächen */
  --bg:#f6f5fb;      --surface:#ffffff;  --surface-2:#f0eef8;
  --sunken:#faf9fd;
  /* Schrift. --ink-3 ist gegenueber dv_docs abgedunkelt (#807b9b -> #726c8f):
     er traegt hier Kartenzeilen und Beschriftungen in 11-13px, und bei
     3,7:1 waere das nicht lesbar genug. Jetzt 4,55:1 auf --bg. */
  --ink:#171522;     --ink-2:#514d68;    --ink-3:#6e688a;
  /* Linien. --line und --line-2 trennen und rahmen, sie tragen keine
     Bedeutung. --line-ui ist der Rand von Bedienelementen - Eingabefeld,
     Knopf, Filterknopf, Ikonschalter: bei denen ist der Rand das
     Einzige, woran sie als bedienbar zu erkennen sind, und WCAG 1.4.11
     verlangt dafuer 3:1. Die feinen Linien erfuellen das nicht (1,3-1,6:1)
     und sollen es auch nicht - sie sind Dekoration. */
  --line:#e2dfef;    --line-2:#cfcae2;  --line-ui:#8a8699;
  /* Akzent */
  --accent:#6250e0;  --accent-ink:#5442cc; --accent-wash:#ede9fd;
  --on-accent:#ffffff;

  /* Codefarben, gleich wie in dv_docs */
  --code-c:#6d6790;  --code-s:#28785b;  --code-k:#8c46b8;
  --code-n:#9b5d1a;  --code-g:#5442cc;  --code-b:#2e6ea6;

  /* Seiten: Client / Server / Shared */
  --side-client:#2773b4; --side-server:#b03c38; --side-shared:#227f5a;

  --shadow:0 1px 2px rgba(23,21,34,.04), 0 8px 24px -12px rgba(23,21,34,.14);
  --glow:none;

  /* Schriftfamilien */
  --sans:"Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Plex Serif",Georgia,"Times New Roman",serif;

  /* Schriftgrößen — fließend zwischen 360px und 1280px Fensterbreite */
  --t-hero:clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);
  --t-h1:clamp(1.9rem, 1.25rem + 2.6vw, 3rem);
  --t-h2:clamp(1.35rem, 1.1rem + 1.05vw, 1.75rem);
  --t-h3:clamp(1.05rem, .98rem + .35vw, 1.2rem);
  --t-body:1rem;
  --t-sm:.875rem;
  --t-xs:.8125rem;
  --t-micro:.6875rem;

  /* Abstände — Vielfache von 4px */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;
  --s-9:6rem;    --s-10:8rem;

  --r-sm:6px; --r:9px; --r-lg:14px; --r-pill:999px;

  --w-page:1180px;   /* wie das Raster in dv_docs */
  --w-text:68ch;
  --pad:clamp(1.25rem, 5vw, 2.5rem);
}

/* ── Farben: dunkel ─────────────────────────────────────────────────
   Zwei Wege führen hierher: die Systemeinstellung (sofern der Besucher
   nicht ausdrücklich Hell gewählt hat) und der Umschalter im Kopf.
   Beide setzen dieselben Werte. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --c-amethyst:#a89cff; --c-bernstein:#e8a45f; --c-azur:#5fb3e8;
    --c-koralle:#f0736f;  --c-magenta:#e87ac0;   --c-smaragd:#5fd39b;
    --c-graphit:#9490ad;
    --c-amethyst-ink:#a89cff; --c-bernstein-ink:#e8a45f; --c-azur-ink:#5fb3e8;
    --c-koralle-ink:#f0736f;  --c-magenta-ink:#e87ac0;   --c-smaragd-ink:#5fd39b;
    --c-graphit-ink:#9490ad;

    --bg:#100e17;      --surface:#181624;  --surface-2:#211e30;
    --sunken:#14121d;
    --ink:#efedf7;     --ink-2:#a8a2c2;    --ink-3:#8a84a6;
    --line:#2a2639;    --line-2:#3a3550;  --line-ui:#6d697e;
    --accent:#a89cff;  --accent-ink:#bcb2ff; --accent-wash:#231f38;
    --on-accent:#100e17;

    --code-c:#8985a2;  --code-s:#7ed3a8;  --code-k:#cf9ce8;
    --code-n:#e8b06a;  --code-g:#b2a6ff;  --code-b:#7fbdf0;

    --side-client:#68b6ea; --side-server:#f0736f; --side-shared:#5fd39b;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
    --glow:0 0 0 1px rgba(168,156,255,.14);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --c-amethyst:#a89cff; --c-bernstein:#e8a45f; --c-azur:#5fb3e8;
  --c-koralle:#f0736f;  --c-magenta:#e87ac0;   --c-smaragd:#5fd39b;
  --c-graphit:#9490ad;
  --c-amethyst-ink:#a89cff; --c-bernstein-ink:#e8a45f; --c-azur-ink:#5fb3e8;
  --c-koralle-ink:#f0736f;  --c-magenta-ink:#e87ac0;   --c-smaragd-ink:#5fd39b;
  --c-graphit-ink:#9490ad;

  --bg:#100e17;      --surface:#181624;  --surface-2:#211e30;
  --sunken:#14121d;
  --ink:#efedf7;     --ink-2:#a8a2c2;    --ink-3:#8a84a6;
  --line:#2a2639;    --line-2:#3a3550;  --line-ui:#6d697e;
  --accent:#a89cff;  --accent-ink:#bcb2ff; --accent-wash:#231f38;
  --on-accent:#100e17;

  --code-c:#8985a2;  --code-s:#7ed3a8;  --code-k:#cf9ce8;
  --code-n:#e8b06a;  --code-g:#b2a6ff;  --code-b:#7fbdf0;

  --side-client:#68b6ea; --side-server:#f0736f; --side-shared:#5fd39b;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  --glow:0 0 0 1px rgba(168,156,255,.14);
}

/* ── Grundlagen ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* Schlaegt jede display-Regel. Ohne das setzt sich ein spaeteres
   display:flex gegen das hidden-Attribut durch. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--t-body)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
code,kbd,samp{font-family:var(--mono);font-size:.875em;font-variant-ligatures:none}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}

/* Ein sichtbarer Fokus, überall gleich. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}
:focus:not(:focus-visible){outline:none}

/* Zahlen in Tabellen und Kennzahlen laufen nicht auseinander. */
.tnum{font-variant-numeric:tabular-nums}

/* Nur für Screenreader */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sprung zum Inhalt — erste Station der Tastaturbedienung. */
.skip{
  position:absolute;left:var(--s-4);top:var(--s-4);z-index:100;
  transform:translateY(-200%);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);font-weight:600;
}
.skip:focus{transform:none;text-decoration:none}

/* Breitenraster */
.wrap{width:100%;max-width:var(--w-page);margin-inline:auto;padding-inline:var(--pad)}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}