/* ═══════════════════════════════════════════════════════════════════
   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 ─────────────────────────────────────────────────────────
   Ein Grundton, dunkel. Bis zum 6. September gab es eine helle
   Fassung und einen Umschalter im Kopf — beides ist entfernt. Die
   Palette steht darum vollständig auf bloßem :root: kein @media, kein
   [data-theme], keine Farbe, deren einzige Definition in einem Block
   steckt, den ein Besucher nie erreicht. */
:root{
  color-scheme:dark;

  /* Kategorien — Fläche, Linie, Marke */
  --c-amethyst:#a89cff; --c-bernstein:#e8a45f; --c-azur:#5fb3e8;
  --c-koralle:#f0736f;  --c-magenta:#e87ac0;   --c-smaragd:#5fd39b;
  --c-graphit:#9490ad;

  /* Kategorien — Text und Flächen.
     Auf Hell brauchte es dafür abgedunkelte Fassungen: die Grundtöne
     lagen dort bei 3,0–4,3:1 und fielen als Textfarbe durch WCAG AA.
     Auf dem dunklen Grund stellt sich die Frage nicht — die Grundtöne
     stehen auf --bg bei 6,2–10,3:1. Die -ink-Namen sind deshalb
     dieselben Werte. Sie bleiben als eigene Namen stehen, weil
     dv_docs und die Scripts die Palette so führen. */
  --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;

  /* Flächen */
  --bg:#100e17;      --surface:#181624;  --surface-2:#211e30;
  --sunken:#14121d;
  /* Schrift. --ink-3 trägt Kartenzeilen und Beschriftungen in 11–13px
     und steht auf --bg bei 5,4:1, auf --surface bei 5,0:1. */
  --ink:#efedf7;     --ink-2:#a8a2c2;    --ink-3:#8a84a6;
  /* Linien. --line und --line-2 trennen und rahmen, sie tragen keine
     Bedeutung. --line-ui ist der Rand von Bedienelementen — Eingabefeld,
     Knopf, Filterknopf: bei denen ist der Rand das Einzige, woran sie
     als bedienbar zu erkennen sind, und WCAG 1.4.11 verlangt dafür 3:1.
     Er steht bei 3,4:1 auf --surface. Die feinen Linien erfüllen das
     nicht und sollen es auch nicht — sie sind Dekoration. */
  --line:#2a2639;    --line-2:#3a3550;  --line-ui:#6d697e;
  /* Akzent */
  --accent:#a89cff;  --accent-ink:#bcb2ff; --accent-wash:#231f38;
  --on-accent:#100e17;

  /* Codefarben, gleich wie in dv_docs */
  --code-c:#8985a2;  --code-s:#7ed3a8;  --code-k:#cf9ce8;
  --code-n:#e8b06a;  --code-g:#b2a6ff;  --code-b:#7fbdf0;

  /* Seiten: Client / Server / Shared */
  --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);

  /* 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;

  /* Höhe der klebenden Kopfleiste. Die Filterleiste im Katalog klebt
     darunter und rechnet mit diesem Wert — beide müssen zusammenpassen. */
  --kopf-h:72px;

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

/* ── 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 Zählern 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;
  }
}