:root {
  --frost:  #e8eef0;
  --paper:  #fafcfc;
  --ink:    #0c1a20;
  --muted:  #52666e;
  --accent: #076a8a;
  --accent-tief: #04506a;
  --warm:   #8a4b2a;
  --line:   #c5d3d8;
  --line-zart: #d9e3e6;
  --band: #d8e3e6;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rand: clamp(20px, 5vw, 72px);
  --spalte: minmax(0, 1fr);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  /* Sanft zum Ziel, damit der Sprung nachvollziehbar bleibt: Wer von der
     Navigation aus springt, sieht, wohin er kommt. Wer weniger Bewegung
     eingestellt hat, springt weiterhin unmittelbar – die Regel steht in
     der Medienabfrage weiter unten. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--frost);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

a { color: var(--accent-tief); }
a:hover { color: var(--ink); }

/* Das eigene UIkit bringt «base» nicht mit – die Stile für code, pre,
   Überschriften und Verweise sind darum wieder allein die dieser Seite.
   Vorher standen hier vier Gegenregeln gegen UIkits Farben. */
/* «:not(pre) > code», weil UIkits gleichnamige Regel «color: inherit» setzt
   und mit zwei Bestandteilen schwerer wiegt als ein blosses «code». Eine
   eigene Farbe braucht es, seit die Baender wechseln: Der Grund des Codes ist
   halbdurchsichtig und dunkelt auf dem gedaempften Band nach – geerbtes
   «muted» kam dort auf 4,47:1 und fiel unter die geforderten 4,5. */
:not(pre) > code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--ink);
  background: color-mix(in srgb, var(--line) 34%, transparent);
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
}

.text-seite p a,
.text-seite li a,
.auftakt__satz a,
.abschnitt__vor a,
.saeule p a,
.kasten p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hg { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.sprung {
  position: absolute; left: var(--rand); top: -60px;
  background: var(--ink); color: var(--frost);
  padding: 10px 16px; z-index: 50; text-decoration: none;
  transition: top .15s;
}
.sprung:focus { top: 12px; color: var(--frost); }

/* ══════════════════════════════════════════════ Raster */

/* Der Rahmen kommt jetzt von uk-container; hier steht nur, wie weit er
   sein soll. Die eigene Klasse .bahn ist entfallen. */
.uk-container-large { max-width: 1400px; }

/* UIkits Werte für Karten, Abschnitte und Knöpfe stehen als Zahlen im
   Stylesheet – sie mussten es, weil Sass sie weiterberechnet und an
   var(--…) scheitert. Hier werden sie ans Farbschema zurückgeholt: Damit
   folgen sie dem dunklen Modus, statt ihn zu überstimmen. */
.uk-card-default {
  background: var(--paper);
  color: var(--muted);
  box-shadow: none;
  border-radius: 0;
}
.uk-card-default .uk-card-title { color: var(--ink); }

.uk-card-primary {
  background: var(--ink);
  border-radius: 0;
}

/* UIkit nimmt Knöpfen den Rahmen ausdrücklich weg («Remove borders for
   button») und kennt dafür keine Variable – eine Rahmenfarbe allein zeigt
   darum nichts. Beide Knopfarten bekommen ihn hier, damit sie gleich hoch
   bleiben: Ein Rahmen nur beim einen machte ihn zwei Pixel höher. */
.uk-button-primary,
.uk-button-default {
  border: 1px solid transparent;
}

.uk-button-primary {
  background: var(--ink);
  color: var(--frost);
  border-color: var(--ink);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.uk-button-default {
  background: transparent;
  color: var(--ink);
  /* Kräftiger als eine Trennlinie: Im dunklen Modus verschwand der Rahmen
     sonst im Grund, und der Knopf sah aus wie blosser Text. Eine Linie
     trennt, ein Knopf will angefasst werden. */
  border-color: var(--muted);
}
/* Umgekehrt beim Darüberfahren: Der leere Knopf füllt sich, der gefüllte
   leert sich. Beide tauschen ihr Aussehen – so ist an jedem zu sehen,
   dass er auf den Zeiger reagiert, und die Reihe bleibt ruhig, weil sich
   die beiden Zustände die Waage halten. */
.uk-button-default:hover,
.uk-button-default:focus {
  background: var(--ink);
  color: var(--frost);
  border-color: var(--ink);
}

.uk-list-divider > li:nth-child(n+2) { border-top-color: var(--line-zart); }

.uk-offcanvas-bar { background: var(--paper); }
.uk-nav-default > li > a { color: var(--muted); }
.uk-nav-default > li > a:hover { color: var(--ink); }
.uk-close { color: var(--muted); }
.uk-close:hover { color: var(--ink); }

/* ══════════════════════════════════════════════ Kopf */

/* ══════════════════════════════════════════════ Der Kopf

   Kleben, Milchglas und das Menü auf schmalen Geräten macht UIkit:
   uk-sticky setzt beim Scrollen die Klasse «ist-gescrollt», uk-offcanvas
   öffnet die Navigation. Hier steht nur, wie das Ergebnis aussieht.

   Erst wenn gescrollt wurde, legt sich Milchglas unter den Kopf. Am Anfang
   gibt es nichts zu trennen und nichts zu verdecken; eine Fläche ohne
   Anlass zerschnitte den ruhigen Auftakt.

   Deckend als Grundfassung: Wo der Browser den Weichzeichner nicht kennt,
   liefe der Text sonst durch den Kopf hindurch. */
/* Der Merker steht über dem Kopf und ist so hoch wie die Schwelle, ab
   der das Milchglas kommen soll. Verschwindet er aus dem Bild, ist
   weit genug gescrollt worden. Der negative Rand nimmt ihm den Platz
   wieder weg: Er soll bemerken, nicht verschieben.

   Die Schwelle über die Höhe und nicht über rootMargin: Ein negativer
   rootMargin schnitte genau den Streifen weg, in dem der Merker steht –
   er wäre nie zu sehen und das Milchglas von der ersten Zeile an da. */
.merker { display: block; height: 22px; margin-bottom: -22px; }

.kopf-huelle {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.kopf-huelle.ist-gescrollt {
  background: var(--frost);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .45);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf-huelle.ist-gescrollt {
    background: color-mix(in srgb, var(--frost) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kopf-huelle { transition: none; }
}

.kopf {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 16px;
  flex-wrap: nowrap;
}

/* Ohne min-width:0 schrumpft ein Flex-Kind nicht unter seinen Inhalt: Die
   Navigation bliebe so breit, wie ihre Punkte zusammen sind, und schöbe
   den Umschalter aus dem Bild. */
.kopf__nav { margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kopf__nav::-webkit-scrollbar { display: none; }

.kopf__liste {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.kopf__liste a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.kopf__liste a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Sprungziele dürfen nicht unter dem Kopf landen. Er ist überall gleich
   hoch, seit die Navigation auf schmalen Geräten ins Offcanvas gewandert
   ist – ein fester Wert genügt. */
[id] { scroll-margin-top: 96px; }

/* ── Die beiden Knöpfe ── */

/* Ohne Javascript liesse sich nichts umschalten. Der Knopf bleibt darum
   verborgen, bis das Skript im Kopf der Seite ihn freigibt; das geschieht
   vor dem ersten Anstrich und rückt nichts nach. */
.schema, .burger { display: none; }

:root[data-js="1"] .schema,
:root[data-js="1"] .burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.schema:hover, .burger:hover { color: var(--ink); }
.schema svg { display: block; }

/* Der Burger nur dort, wo die Navigation nicht danebenpasst – und dann
   die Navigation nicht. */
:root[data-js="1"] .burger { display: none; }

@media (max-width: 720px) {
  .kopf { gap: 12px; padding-block: 11px; }
  .kopf__nav { display: none; }
  :root[data-js="1"] .burger { display: inline-flex; margin-left: auto; }
  .schema { order: 2; }
  .burger { order: 3; }
}

/* ── Das Menü auf schmalen Geräten ── */

.mobil {
  background: var(--paper);
  color: var(--ink);
  padding: 28px 26px;
  width: 260px;
}
.mobil__zu {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
}
.mobil__zu:hover { color: var(--ink); }

.mobil__liste { margin-top: 26px; }
.mobil__liste a {
  color: var(--ink);
  font-size: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-zart);
}
.mobil__liste a:hover { color: var(--accent-tief); text-decoration: none; }
.mobil__liste li:last-child a { border-bottom: 0; }

.marke {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.marke b { font-weight: 700; }
.marke span { color: var(--accent); font-weight: 500; }
.marke__flocke { font-size: 15px; color: var(--accent); }


/* ══════════════════════════════════════════════ Auftakt */

/* Gemessen: Mit der alten Polsterung und einer quadratischen Naht
   brauchte der Auftakt 105 bis 109 Prozent des Fensters – die Kennzahlen
   darunter sah niemand, ohne zu scrollen. Ein Auftakt soll den Anfang
   zeigen, nicht den ganzen Bildschirm besetzen. */
/* Nach unten mehr Luft als nach oben: Zwischen zwei Abschnitten liegen sonst
   208 Pixel, zwischen Auftakt und Kennzahlen waren es 68 – die Karten klebten
   an der Flaeche darueber. */
.auftakt { padding-block: clamp(32px, 5vw, 64px) clamp(52px, 6.5vw, 92px); }

/* Das Raster kommt von uk-grid. */

.auftakt h1 {
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 12ch;
}
.auftakt h1 em {
  font-style: normal;
  color: var(--accent);
}

.auftakt__satz {
  margin: 26px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  max-width: 46ch;
  color: var(--muted);
}
.auftakt__satz strong { color: var(--ink); font-weight: 600; }

.knopfreihe { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* Höhe, Polsterung und Farben kommen von uk-button – hier steht nur die
   Schrift, weil UIkit dafür keine eigene Variable kennt. Ein eigenes
   padding kam früher zu UIkits line-height hinzu: 40 plus zweimal 13
   ergaben 68 Pixel, und der Knopf sah aus wie ein Kasten. */
.knopf {
  font-family: var(--display);
  font-weight: 600;
  text-transform: none;
}

/* ══════════════════════════════════════════════ Die Naht */

.naht {
  position: relative;
  /* Die Breite muss von der Spalte kommen, nicht aus dem Seitenverhaeltnis.
     Als die Flaeche noch selbst im Raster hing, gab ihr das Raster eine feste
     Breite. In der Huelle ist sie ein gewoehnlicher Block – und dann rechnet
     der Browser aus der gedeckelten Hoehe rueckwaerts eine Breite aus: aus
     693 wurden 473 Pixel. */
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  /* Auf schmalen Geräten steht alles untereinander – dort darf die Fläche
     nur ein Band sein, sonst schiebt sie den Rest aus dem ersten Bild. */
  aspect-ratio: 16 / 10;
  /* Und in keinem Format höher als ein gutes Drittel des Fensters: Auf
     einem Tablet hochkant war die Fläche sonst 452 Pixel hoch und schob
     die Kennzahlen unter den Rand. */
  max-height: min(42vh, 400px);
  overflow: hidden;
}

/* Nicht quadratisch: Bei einer Spaltenbreite von siebenhundert Pixeln
   wäre die Fläche ebenso hoch und schöbe alles Weitere aus dem Bild. Die
   Deckelung nach der Fensterhöhe hält sie in jedem Format flach genug. */
/* Nebeneinander darf sie höher sein als untereinander – aber die
   Deckelung nach der Fensterhöhe gilt weiter, sonst passt der Auftakt auf
   einem flachen Bildschirm nicht mehr ins Bild. */
@media (min-width: 1000px) {
  .naht { aspect-ratio: 5 / 4; }
}

.naht canvas { display: block; width: 100%; height: 100%; }

.naht__marken {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: space-between;
  padding: 12px 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  background: linear-gradient(to top, var(--paper) 55%, transparent);
}
.naht__marken span:first-child { color: var(--warm); }
.naht__marken span:last-child { color: var(--accent); }

/* ══════════════════════════════════════════════ Kennzahlen */

/* Vier einzelne Karten, jede mit eigenem Rahmen – anders als die drei
   Säulen darunter, die als ein Block zusammenstehen. Die Kennzahlen sind
   vier Aussagen nebeneinander, keine dreiteilige Erzählung. */
/* Ohne Rahmen: Die Karte hebt sich schon durch ihren helleren Grund vom
   Frost der Seite ab, und vier Rahmen nebeneinander machten aus vier
   Aussagen vier Kästen. */
/* Unter den Karten Luft bis zum naechsten Band: Die Sektion trug selbst kein
   Polster, die Karten stiessen unmittelbar an die Kante. Als Polster der
   Sektion, nicht als Rand des Rasters – UIkits «.uk-container > :last-child»
   setzt «margin-bottom: 0» und wiegt schwerer als eine einzelne Klasse. */
.zahlenband { padding-bottom: clamp(52px, 6.5vw, 92px); }

.zahl.uk-card-body {
  padding: 20px;
  transition: box-shadow .18s, transform .18s;
}

/* Ohne Rahmen bleibt der Schatten – dieselbe Andeutung wie bei den
   Säulen, nur ohne die Linie, die es hier nicht gibt. */
.zahl.uk-card-body:hover {
  box-shadow: 0 10px 26px -18px rgba(6, 22, 30, .55);
}
.zahl.uk-card-body:hover .zahl__zeichen { color: var(--accent-tief); }

@media (prefers-reduced-motion: reduce) {
  .saeule.uk-card-body,
  .zahl.uk-card-body { transition: none; }
}

/* Das Zeichen steht über der Zahl, nicht daneben: Nebeneinander gerieten
   die beiden in einen Wettstreit, und die Zahl soll gewinnen. */
.zahl__zeichen {
  /* Deutlich groesser als die 26 Pixel von vorher: Neben einer Zahl in 40
     Pixeln war das Zeichen ein Fleck, den niemand als Bild las. */
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
  color: var(--accent);
}

/* Wovon die Zahl handelt. «0» und «2» sagen fuer sich genommen nichts, und
   die Zeile darunter liest, wer schon weiss, worum es geht. */
.zahl__titel {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.zahl__zeichen svg { display: block; width: 100%; height: 100%; }
.zahl__wert {
  font-family: var(--mono);
  /* Feste Groesse, nicht an die Fensterbreite gebunden: Die Karte ist auf
     jeder Breite rund 330 Pixel breit, die Zahl schrumpfte trotzdem auf 28
     Pixel – und wurde damit kleiner als ihr eigenes Zeichen. */
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: block;
}
.zahl__was {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* ══════════════════════════════════════════════ Abschnitte */

.abschnitt { padding-block: clamp(56px, 8vw, 104px); }
.abschnitt--rand { border-top: 1px solid var(--line); }

.aufschrift {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.abschnitt h2 {
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.1;
  max-width: 20ch;
}

.abschnitt__vor {
  margin: 20px 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18px);
}
.abschnitt__vor strong { color: var(--ink); font-weight: 600; }

/* ── kurz beantwortet ── */

/* Die Frage steht in der Textfarbe, die Antwort gedämpft: dasselbe
   Verhältnis wie in den Listen weiter oben. */
.frage + .frage { margin-top: 26px; }
.frage h3 {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.35;
}
.frage p {
  margin: 0;
  color: var(--muted);
  max-width: 54ch;
}
/* ── die drei Versprechen ── */

/* Kein gap: Drei Karten zu je einem Drittel plus Fugen ergäben mehr als
   die volle Breite, und die dritte bräche um. Die Fuge macht darum ein
   Rand an der Karte selbst. */
/* Drei Karten nebeneinander, jede für sich. Der Rahmen fasst sie, weil
   sie mehr Text tragen als die Kennzahlen und ohne ihn ineinanderliefen. */

.saeule.uk-card-body {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition: border-color .18s, box-shadow .18s;
}

/* Beim Darüberfahren tritt die Karte einen Schritt vor: Der Rahmen nimmt
   die Akzentfarbe an, dazu ein Schatten, der eher andeutet als wirft.

   Zurückhaltend mit Absicht – die Karten sind keine Knöpfe, sondern Text.
   Ein kräftiger Effekt verspräche etwas zum Anklicken, das es hier nicht
   gibt. Er zeigt nur: Sie sind gemeint. */
.saeule.uk-card-body:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 26px -18px rgba(6, 22, 30, .55);
}

/* Die drei Schwerpunkte stehen nebeneinander – ein Sprung von einem zum
   anderen bewegt die Seite darum kaum, und der Verweis sähe aus, als
   führte er nirgendwohin. Die angesprungene Säule zeigt sich deshalb
   selbst: Sie ist das Ziel, auch wenn die Seite stehen bleibt.

   :target hält nur so lange, wie die Adresse auf sie zeigt. Beim
   nächsten Sprung gibt sie ab. */
.saeule:target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.saeule:target .saeule__zeichen { color: var(--accent-tief); }

@media (prefers-reduced-motion: no-preference) {
  .saeule { transition: outline-color .25s; }
}

.saeule__zeichen {
  width: 38px; height: 38px;
  margin-bottom: 22px;
  color: var(--accent);
}
.saeule__zeichen svg { display: block; width: 100%; height: 100%; }

.saeule h3 {
  font-size: 21px;
  line-height: 1.2;
}
.saeule p { margin: 14px 0 0; color: var(--muted); font-size: 15.5px; }

.saeule__beleg {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  border-top: 1px dashed var(--line);
  margin-block-start: 26px;
}
.saeule__beleg b { color: var(--accent-tief); font-weight: 600; }

/* ── Die Bausteine ── */

.baustein h3 {
  font-size: 15px;
  letter-spacing: .01em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Die Elemente so, wie die Verwaltung sie zur Auswahl stellt: eine Kachel je
   Element, darin die Skizze und der Name. Die Skizzen stammen aus derselben
   Quelle (App\Elementbild) – wer die Seite gesehen hat, erkennt sie wieder.
   Gefuellte Flaechen sind Inhalt, Umrisse sind Behaelter, die Akzentfarbe
   traegt das Kennzeichnende. */
.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  padding: 14px 8px 11px;
  border: 1px solid var(--line-zart);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
}
.element__name { font-weight: 500; }
.skizze {
  display: block;
  width: 64px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--muted);
}
.skizze__akzent { color: var(--accent); }

.abschnitt__nach {
  margin-top: clamp(30px, 4vw, 46px);
  max-width: 62ch;
  color: var(--muted);
  font-size: 15.5px;
}

/* ── Die Anforderungen im Einzelnen ── */

/* Eine Tabelle, keine Kartenreihe: Drei Spalten, die zueinander gehören –
   Kriterium, Forderung, Antwort. Wer sie vorlesen lässt, hört die
   Zuordnung nur, wenn sie auch eine ist. */
.wcag { font-size: 15px; }

/* Eine Mindestbreite, damit die Spalten lesbar bleiben: Bei 390 Pixeln
   waren sie 147 und 160 breit, und fast jedes Wort brach um.

   Nicht in Bloecke aufloesen – «display: block» auf Zellen nimmt einer
   Tabelle ihre Semantik, und ein Vorleseprogramm verliert damit die
   Zuordnung von Kriterium, Forderung und Antwort. Sie bleibt eine
   Tabelle; wer sie lesen will, schiebt sie. Der Kasten darum ist
   anspringbar, das geht also auch mit der Tastatur. */
.wcag { min-width: 640px; }

/* Dass der Kasten sich schieben laesst, sieht man ihm nicht an – die
   abgeschnittene dritte Spalte liest sich eher wie ein Fehler. Der Wink
   steht nur da, wo die Tabelle wirklich nicht ganz hineinpasst; ab etwa 700
   Pixeln tut sie es. Fuer die Sprachausgabe ist er ueberfluessig, die
   Tabelle ist dort ohnehin vollstaendig – darum «aria-hidden». */
.wcag__wink {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
@media (min-width: 700px) {
  .wcag__wink { display: none; }
  /* Faellt der Wink weg, traegt die Tabelle den Abstand wieder selbst. */
  .wcag__wink + .uk-overflow-auto { margin-top: 70px !important; }
}
.wcag th, .wcag td { vertical-align: top; }
/* Die Kopffarbe ans Farbschema: Im Theme steht sie als Zahlenwert, weil
   Sass sie weiterberechnet – im dunklen Modus wäre sie damit zu dunkel. */
.wcag thead th {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}

/* Eine Linie je Zeile – uk-table-divider setzt sie nur zwischen tbody-Zeilen
   und traf hier nicht, weil die erste Spalte ein th ist. */
.wcag tbody tr + tr th,
.wcag tbody tr + tr td { border-top: 1px solid var(--line-zart); }
/* «.wcag th.wcag__nr», weil UIkits «.uk-table th» schwerer wiegt als eine
   blosse Klasse: Die Nummern trugen sonst dessen feste Kopfzellenfarbe und
   kamen im dunklen Modus auf 3,09 zu 1. */
.wcag th.wcag__nr,
.wcag td.wcag__nr {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
  width: 1%;
}
.wcag td { color: var(--muted); }
.wcag td strong { color: var(--ink); }

.zusatz__titel {
  font-size: 17px;
  padding-bottom: 14px;
}

.kasten__mass {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}
.kasten__mass strong { color: var(--auf-dunkel); }

/* ── der Weg ── */

.weg { counter-reset: schritt; }

.schritt {
  counter-increment: schritt;
  padding: 26px 24px 30px;
  border-top: 2px solid var(--ink);
  position: relative;
}
@media (min-width: 860px) {
  .schritt + .schritt { border-left: 1px solid var(--line-zart); }
}
@media (max-width: 859px) {
  .schritt + .schritt { border-top: 1px solid var(--line-zart); }
  .schritt:first-child { border-top-width: 2px; }
}

.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.schritt h3 { font-size: 17.5px; }
.schritt p { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

/* ── Technik ── */



/* Kein padding:0 – uk-grid gibt seinen Kindern links eine Polsterung,
   und die ist der Rasterabstand. Wer sie löscht, schiebt die Liste aus
   dem Satzspiegel heraus. */
.liste { margin: 0; list-style: none; }
.liste.uk-list > li::before { display: none; }
/* Zwei Spalten je Zeile: das Kürzel und der Text. uk-list-divider zieht
   die Linien dazwischen. */
.liste li {
  display: flex;
  gap: 14px;
  font-size: 15.5px;
}
.liste.uk-list > li { padding: 13px 0; }
.liste.uk-list-divider > li:nth-child(n+2) { margin-top: 0; padding-top: 13px; }
.liste__marke {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  padding-top: 3px;
  flex: 0 0 3.2em;
}
.liste li b { font-weight: 600; }
.liste li span:last-child { color: var(--muted); }
.liste li span:last-child b { color: var(--ink); }

/* Der Kasten ist in beiden Farbschemata dunkel – die Schrift darauf muss
   darum in beiden hell sein. var(--frost) wäre falsch: Das ist der Grund
   der Seite, und im dunklen Modus ist er selbst dunkel. Dieselbe Falle,
   die einen Text unlesbar macht, ohne dass es im hellen Modus auffiele. */
.kasten {
  --auf-dunkel: #eaf2f4;
  --auf-dunkel-leise: #9db4bc;
  background: var(--ink);
  color: var(--auf-dunkel);
  padding: clamp(26px, 3vw, 38px);
}
.kasten h3 { color: var(--auf-dunkel); font-size: 20px; }
.kasten p { color: var(--auf-dunkel-leise); font-size: 15.5px; margin: 14px 0 0; }
.kasten code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(255,255,255,.08);
  padding: 2px 6px;
}
.kasten__zeilen {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
  color: #cfe0e5;
  overflow-x: auto;
  background: transparent;
  border: 0;
  padding: 0;
}
.kasten__zeilen span { color: #6f8f9a; }

/* ── Abschluss ── */

.abschluss {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 96px);
}
.abschluss h2 { font-size: clamp(26px, 3.2vw, 40px); }
.abschluss p { color: var(--muted); margin: 18px 0 0; max-width: 46ch; }

/* ── Fuss ── */

.fuss {
  border-top: 1px solid var(--line);
  padding-block: 34px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--muted);
}
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.fuss a {
  color: var(--muted);
  /* WCAG 2.5.8 will 24x24 Pixel als Ziel; ohne Polster waren es 23. */
  display: inline-block;
  padding-block: 4px;
}
.fuss a:hover { color: var(--ink); }

/* ══════════════════════════════════════════════ Dunkel */

/* ══════════════════════════════════════════════ Dunkel

   Drei Zustände, nicht zwei: Wer nichts gewählt hat, bekommt, was sein
   System vorgibt; wer gewählt hat, bekommt seine Wahl – auch gegen das
   System. Die Farben stehen darum zweimal da. Sie nur in den Media-Block
   zu schreiben hiesse: Der Umschalter wirkte auf einem hellen System
   überhaupt nicht.

   Der Merkname «data-farbschema» ist derselbe wie im System selbst, und
   auch der Speicherplatz heisst gleich. Wer die Demo im dunklen Modus
   gelesen hat, findet auch diese Seite so vor. */

@media (prefers-color-scheme: dark) {
  :root:not([data-farbschema="hell"]) {
  --frost:  #0b1418;
  --paper:  #101d23;
  --ink:    #e7eff1;
  --muted:  #93a8b0;
  --accent: #4fb8dc;
  --accent-tief: #7fd0ee;
  --warm:   #d78a5f;
  --line:   #23343c;
  --line-zart: #1a2a31;
  --band: #18262d;
  }
  :root:not([data-farbschema="hell"]) .kasten { background: #061014; }
  :root:not([data-farbschema="hell"]) .sprung { background: var(--ink); color: #0b1418; }
}

:root[data-farbschema="dunkel"] {
  --frost:  #0b1418;
  --paper:  #101d23;
  --ink:    #e7eff1;
  --muted:  #93a8b0;
  --accent: #4fb8dc;
  --accent-tief: #7fd0ee;
  --warm:   #d78a5f;
  --line:   #23343c;
  --line-zart: #1a2a31;
  --band: #18262d;
  }
  :root[data-farbschema="dunkel"] .kasten { background: #061014; }
  :root[data-farbschema="dunkel"] .sprung { background: var(--ink); color: #0b1418; }

/* ── Der Umschalter ── */

/* Ohne Javascript liesse sich nichts umschalten. Der Knopf bleibt darum
   verborgen, bis das Skript im Kopf der Seite ihn freigibt; das geschieht
   vor dem ersten Anstrich und rückt nichts nach. */
.schema { display: none; }
:root[data-js="1"] .schema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.schema:hover { color: var(--ink); }
.schema svg { display: block; }

/* Mond im hellen Modus – er weist den Weg ins Dunkle; die Sonne umgekehrt.
   Welches zu sehen ist, entscheidet allein das Stylesheet: So steht schon
   beim ersten Anstrich das richtige da. */
:root .farbschema--dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) .farbschema--dunkel { display: revert; }
  :root:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) .farbschema--hell  { display: none; }
}

:root[data-farbschema="dunkel"] .farbschema--dunkel { display: revert; }
:root[data-farbschema="dunkel"] .farbschema--hell  { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ══════════════════════════════════════════════ Das Logo */

.marke {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  text-decoration: none;
}
.marke svg { display: block; width: 168px; height: auto; }
.marke:hover { color: var(--ink); }

/* ══════════════════════════════════════════════ Textseiten */

/* Die Zeilenlänge wird begrenzt, nicht der Block: max-width gehörte hier
   auf dasselbe Element wie das margin:auto der Bahn – und zentrierte
   damit den ganzen Text, während die Startseite linksbündig steht. */
.text-seite { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.text-seite > * { max-width: 68ch; }

.text-seite h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  /* Enger als der Fliesstext: 68 Zeichen sind bei dieser Grösse eine
     Zeile, die das Auge nicht mehr trägt. */
  max-width: 16ch;
}
/* So breit wie der Text darunter: Die Linie über der Überschrift gehört
   bis an dessen Rand, sonst endet sie mitten im Satzspiegel. */
.text-seite h2 { max-width: 68ch; }

.text-seite h2 {
  font-size: clamp(20px, 2.2vw, 25px);
  margin-top: clamp(38px, 4.5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.text-seite h3 {
  font-size: 17px;
  margin-top: 30px;
}

.text-seite p,
.text-seite li { color: var(--muted); }
.text-seite p { margin: 15px 0 0; }
.text-seite p strong,
.text-seite li strong { color: var(--ink); font-weight: 600; }

.text-seite ul { margin: 15px 0 0; padding-left: 1.15em; }
.text-seite li { margin-top: 8px; }

.text-seite a { text-underline-offset: 3px; }

/* Was noch einzutragen ist, steht sichtbar offen – ein erfundener
   Eintrag führte ins Leere, und gerade das verspricht ein Impressum
   nicht zu tun. */
.offen {
  display: block;
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--warm);
  background: var(--paper);
  font-size: 15px;
  color: var(--ink);
}
.offen b { font-weight: 600; }

.anschrift {
  margin: 18px 0 0;
  font-style: normal;
  line-height: 1.75;
  color: var(--ink);
}

.stand {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}