/* Basis-Tokens für alle Entwürfe — Farbnutzung nach dem Aderfarben-Schlüssel
   (DRAGui-Roadmap-Hues), Grund ist reines Weiß. */
:root {
  --papier: #ffffff;
  --flaeche: #f6f5f2;
  --tinte: #16140f;        /* 18.9:1 auf Weiß */
  --gedaempft: #5f5b53;    /* 6.6:1 auf Weiß */
  --linie: #16140f;        /* dünne schwarze Linien = Markenzug */
  --haarlinie: #dedbd4;

  /* kräftig = Text, AA auf Weiß */
  --k-energie: #866405;
  --k-netz: #0269c9;
  --k-ki: #9f05f5;
  --k-betrieb: #01796c;
  --k-fertig: #067c3d;
  --k-achtung: #d3032e;
  --k-marke: #c80484;
  /* frisch = Neon-Akzent, nie Fließtext */
  --f-energie: #ffb800;
  --f-netz: #278efe;
  --f-ki: #b766ff;
  --f-betrieb: #06cfb9;
  --f-fertig: #08c261;
  --f-achtung: #fe4a54;
  --f-marke: #ff34ae;
  /* Tönung = Fläche */
  --t-energie: #ffedc2;
  --t-netz: #dcebfe;
  --t-ki: #f0e2fe;
  --t-betrieb: #c9f7ef;
  --t-fertig: #cdf5d9;
  --t-achtung: #ffe2e0;
  --t-marke: #ffdff0;

  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --lauf: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sonder: 'Unbounded', ui-sans-serif, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-nav: 30;
  --z-overlay: 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--lauf);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.04; text-wrap: balance; margin: 0; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--tinte); color: var(--papier); }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: var(--z-overlay);
  background: var(--tinte); color: var(--papier); padding: .5rem 1rem;
}
.skip:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}