/* ===============================================================
   kostenlose-javascripts.de — Gestaltung

   Die Seite verwahrt 187 kleine JavaScript-Programme aus über zwanzig
   Jahren. Jedes steht auf seiner Seite in einem Rahmen mit Schild —
   Kategorie, Baujahr, und der Hinweis, dass es hier und jetzt im
   Browser läuft. Das Schild ist das wiederkehrende Element der Seite;
   alles andere hält sich zurück.

   Die Kategorie trägt die Ordnung: sie hat einen Namen, einen Satz
   und eine Farbe (siehe src/_data/kategorien.js). Die Farbe kommt
   als --kat per style-Attribut herein und färbt Kante und Punkt.
   Sie steht nie allein — neben jeder Marke steht immer der Name.

   Ein heller Modus, bewusst. Ein dunkles Gegenstück wäre eine zweite
   Palette, die bei jeder Änderung mitgepflegt werden müsste, und die
   alten Tools bringen eigene Farben und Bilder mit, die ohnehin auf
   hellem Grund gebaut sind.
   =============================================================== */

/* --- Schriften -------------------------------------------------
   Selbst gehostet, keine Verbindung zu Google. Das ist auf einer
   deutschen Seite die rechtlich saubere Variante und passt zum
   Versprechen im Fuß: die Seite lädt nichts von fremden Servern.
   Archivo und IBM Plex Sans sind Variable Fonts — eine Datei je
   Familie deckt alle Schnitte ab.                                */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/assets/fonts/plexsans-var.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* --- Werte ----------------------------------------------------- */

:root {
  /* Grundflächen: warmes Papier statt kühlem Weiß */
  --papier: #fffdf9;
  --karton: #f5f0e6;
  --karton-tief: #ece5d7;
  --linie: #e2d9c9;
  --linie-zart: #efe9dd;

  /* Schrift */
  --tinte: #241f1b;
  --blei: #6b6156;

  /* Handlungsfarbe */
  --petrol: #0e6e7e;
  --petrol-tief: #0a5461;
  --petrol-zart: #e3f0f1;
  --auf-petrol: #ffffff;

  /* Fällt zurück, wo keine Kategoriefarbe gesetzt ist */
  --kat: var(--petrol);

  --schrift-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --breite: 72rem;
  --rundung: .6rem;
  --rundung-gross: .9rem;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0125rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* --- Schriftbild ------------------------------------------------
   Archivo wird leicht in die Breite gezogen. Das gibt den Zeilen die
   Anmutung eines Typenschilds und ist das, was die Seite auf den
   ersten Blick von einer beliebigen Vorlage unterscheidet.        */

h1, h2, h3, .display {
  font-family: var(--schrift-display);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.12;
  color: var(--tinte);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.05rem, 1.5rem + 2.4vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -.028em;
  margin: 0 0 .6rem;
}
h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem); margin: 3rem 0 .9rem; }
h3 { font-size: 1.1rem; margin: 0 0 .3rem; }

p { margin: 0 0 1rem; }

a { color: var(--petrol); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-tief); }

strong, b { font-weight: 600; }

/* Fließtext soll nicht über die ganze Bildschirmbreite laufen */
.mass { max-width: 64ch; }

/* Kleines Etikett über einer Überschrift. Trägt immer eine echte
   Angabe — Fach, Anzahl, Baujahr — nie bloß ein Schlagwort. */
.etikett {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 .8rem;
  font-family: var(--schrift-mono);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blei);
}
.etikett .punkt { background: var(--kat); }

/* Der Farbpunkt der Kategorie */
.punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--kat); flex: none;
}

/* --- Gerüst ----------------------------------------------------- */

.wrap { max-width: var(--breite); margin-inline: auto; padding-inline: 1.5rem; }

main { padding-block: 2.5rem 5rem; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--petrol); color: var(--auf-petrol);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--rundung) 0;
  font-family: var(--schrift-mono); font-size: .8rem;
}
.skip-link:focus { left: 0; top: 0; z-index: 20; }

:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; border-radius: 2px; }

/* --- Kopfleiste --------------------------------------------------
   Eine schmale Leiste, darunter eine kräftige Linie. Die Navigation
   steht als Maschinenbeschriftung in Mono — klein, gesperrt, ruhig. */

.kopf {
  background: var(--papier);
  border-bottom: 2px solid var(--tinte);
  position: sticky; top: 0; z-index: 10;
}
@media (max-width: 56rem) {
  .kopf { position: static; }
}

.kopf-inhalt {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
  align-items: center; justify-content: space-between;
  padding-block: .9rem;
}

.logo {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--tinte);
  font-family: var(--schrift-display);
  font-stretch: 118%; font-weight: 800;
  font-size: 1.06rem; letter-spacing: -.03em;
}
/* Das Schild vor dem Namen — dasselbe Zeichen wie im Browsertab. */
.logo-zeichen {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: block;
}
.logo-wort { display: flex; align-items: baseline; gap: .15rem; }
.logo .tld {
  font-family: var(--schrift-mono); font-weight: 500;
  font-size: .82rem; letter-spacing: 0; color: var(--petrol);
}
.logo .seit {
  font-family: var(--schrift-mono); font-weight: 400;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blei);
  border: 1px solid var(--linie); border-radius: .25rem;
  padding: .1rem .35rem; align-self: center;
}

.kopf nav ul {
  display: flex; flex-wrap: wrap; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.kopf nav a {
  display: block; padding: .4rem .6rem;
  font-family: var(--schrift-mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blei); text-decoration: none;
  border-radius: .3rem;
}
.kopf nav a:hover { color: var(--tinte); background: var(--karton); }
.kopf nav a[aria-current] {
  color: var(--tinte); font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--petrol);
}

/* --- Menü auf schmalen Schirmen ----------------------------------
   Fünf Punkte in Versalien passen nebeneinander, solange die Leiste
   breit genug ist. Gemessen braucht die Reihe neben dem Namen 963px
   Innenbreite, das entspricht 1011px Fenster — darunter brach die
   Leiste auf zwei, auf dem Handy auf drei Zeilen um. Die Grenze liegt
   deshalb bei 65rem, gut eine Handbreit darüber: die Kopfzeile ist
   damit immer genau eine Zeile hoch, entweder mit ausgeschriebener
   Navigation oder mit dem Knopf.

   Alles hängt an der Klasse "js" am <html>: läuft kein JavaScript,
   greift keine dieser Regeln und die Navigation steht offen da wie
   vorher. Ein Menü, das zu ist und sich nicht öffnen lässt, gibt es
   damit nicht.                                                      */

.menue-knopf { display: none; }

@media (max-width: 65rem) {
  .js .menue-knopf {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .45rem .75rem;
    background: var(--papier); color: var(--tinte);
    border: 1px solid var(--linie); border-radius: .35rem;
    font-family: var(--schrift-mono); font-size: .72rem; font-weight: 400;
    letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
  }
  .js .menue-knopf:hover { background: var(--karton); }
  .js .menue-knopf[aria-expanded="true"] {
    background: var(--karton); border-color: var(--karton-tief);
  }

  /* Drei Striche aus einem Element: der mittlere ist der Rahmen selbst,
     die äußeren sind ::before und ::after. Offen kippen sie zum Kreuz. */
  .js .menue-striche {
    position: relative; display: block;
    width: 1rem; height: 2px; background: currentColor; border-radius: 1px;
    transition: background-color .12s ease;
  }
  .js .menue-striche::before,
  .js .menue-striche::after {
    content: ""; position: absolute; left: 0;
    width: 1rem; height: 2px; background: currentColor; border-radius: 1px;
    transition: transform .16s ease;
  }
  .js .menue-striche::before { top: -.32rem; }
  .js .menue-striche::after { top: .32rem; }

  .js .menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
  .js .menue-knopf[aria-expanded="true"] .menue-striche::before {
    transform: translateY(.32rem) rotate(45deg);
  }
  .js .menue-knopf[aria-expanded="true"] .menue-striche::after {
    transform: translateY(-.32rem) rotate(-45deg);
  }

  /* Die Liste legt sich unter die Leiste, über die volle Breite. */
  .js .hauptnav { flex-basis: 100%; display: none; }
  .js .hauptnav.offen { display: block; }
  .js .hauptnav ul {
    flex-direction: column; gap: 0;
    margin-top: .6rem; padding-top: .5rem;
    border-top: 1px solid var(--linie);
  }
  /* Auf dem Handy wird getippt, nicht gezielt: großzügige Flächen. */
  .js .hauptnav a { padding: .8rem .2rem; font-size: .8rem; border-radius: 0; }
  .js .hauptnav a[aria-current] { box-shadow: inset 3px 0 0 var(--petrol); padding-left: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .menue-striche, .menue-striche::before, .menue-striche::after { transition: none; }
}

/* Der Name der Seite darf nicht umbrechen; auf sehr schmalen Schirmen
   rückt stattdessen das Gründungsjahr aus dem Weg. */
.logo-wort { white-space: nowrap; }
@media (max-width: 34rem) {
  .logo { font-size: .95rem; gap: .4rem; }
  .logo-zeichen { width: 1.5rem; height: 1.5rem; }
  .logo .seit { display: none; }
}

/* Unter 30rem reicht der Platz nicht mehr für Name und beschrifteten
   Knopf nebeneinander — dann bliebe der Knopf auf einer zweiten Zeile
   stehen. Statt ihn dorthin zu lassen, verliert er sein Wort: gesagt
   wird es weiterhin, nur nicht mehr gezeigt. */
@media (max-width: 30rem) {
  .logo { font-size: .85rem; }
  .js .menue-knopf { padding: .5rem .6rem; }
  .js .menue-wort {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* --- Brotkrumen -------------------------------------------------- */

.brotkrumen {
  margin: 0 0 1rem;
  font-family: var(--schrift-mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blei);
}
.brotkrumen a { color: var(--blei); text-decoration: none; box-shadow: 0 1px 0 var(--linie); }
.brotkrumen a:hover { color: var(--tinte); box-shadow: 0 1px 0 var(--tinte); }

/* --- Das Gerät ---------------------------------------------------
   Der wiederkehrende Rahmen der Seite. Oben eine Kante in der Farbe
   des Fachs, darunter das Schild mit Fach, Baujahr und Betriebsstatus,
   darunter die Bühne mit dem eigentlichen Werkzeug.

   Die Bühne darf waagerecht scrollen: die alten Tools bringen feste
   Breiten und Tabellen mit, die das Layout sonst aufbrechen.       */

.geraet {
  border: 1px solid var(--linie);
  border-top: 3px solid var(--kat);
  border-radius: var(--rundung-gross);
  background: var(--papier);
  box-shadow: 0 14px 34px -28px rgba(36, 31, 27, .55);
  overflow: hidden;
}

.geraet-schild {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  align-items: center; justify-content: space-between;
  padding: .55rem .95rem;
  background: var(--karton);
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blei);
}
.geraet-schild a { color: var(--blei); text-decoration: none; box-shadow: 0 1px 0 var(--linie); }
.geraet-schild a:hover { color: var(--tinte); }
.schild-links, .schild-rechts { display: flex; align-items: center; gap: .55rem; }
.schild-rechts { color: var(--blei); }

/* Die Lampe zeigt an, dass gerade im Browser gerechnet wird. Sie ist
   die einzige dauerhafte Bewegung auf der Seite. */
.lampe {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: #2e8b57; flex: none;
  box-shadow: 0 0 0 0 rgba(46, 139, 87, .5);
  animation: puls 2.6s ease-out infinite;
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(46, 139, 87, .45); }
  70%  { box-shadow: 0 0 0 .3rem rgba(46, 139, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0); }
}

.geraet-buehne { padding: 1.6rem; overflow-x: auto; }

@media (max-width: 34rem) {
  .geraet-buehne { padding: 1rem; }
}

/* --- Startseite ---------------------------------------------------
   Der Kopf sagt in Worten, was es hier gibt; darunter verteilen drei
   Karten die drei Bereiche der Seite. Erst danach kommen Kategorien,
   die meistgesuchten Einzelseiten und zuletzt die laufende Probe.   */

.start-kopf {
  max-width: 54ch;
  padding-block: .5rem 2.4rem;
}
.start-kopf h1 { margin-bottom: .8rem; }
.anriss-gross {
  font-size: 1.15rem; color: var(--blei); max-width: 46ch; margin: 0;
}

/* Ab Tabletbreite stehen Überschrift und Einleitung nebeneinander: sonst
   bleibt rechts neben der vierzeiligen Überschrift eine leere Hälfte. */
@media (min-width: 62rem) {
  .start-kopf {
    max-width: none;
    display: grid; gap: 0 3.5rem;
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
  }
  .start-kopf .etikett { grid-column: 1 / -1; }
  .start-kopf h1 { grid-column: 1; margin-bottom: 0; }
  .start-kopf .anriss-gross { grid-column: 2; }
  .start-knoepfe { grid-column: 1 / -1; margin-top: 2.1rem; }
}

.start-knoepfe {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.5rem 0 0;
}

/* Zweite Stufe zum vollen Knopf: gleiche Form, ruhigere Fläche. Doppelte
   Klasse im Selektor, weil .knopf weiter unten steht und sonst gewinnt. */
.knopf.knopf-zart {
  background: var(--karton);
  color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.knopf.knopf-zart:hover, .knopf.knopf-zart:focus-visible {
  background: var(--karton-tief); color: var(--tinte);
}

/* Die drei Bereiche der Seite */
.einstiege {
  display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.einstieg {
  position: relative;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--rundung-gross);
  transition: transform .18s ease, box-shadow .18s ease;
}
.einstieg:hover, .einstieg:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -22px rgba(36, 31, 27, .6);
}
.einstieg h2 { font-size: 1.22rem; margin: 0 0 .4rem; }
.einstieg h2 a { color: var(--tinte); text-decoration: none; }
.einstieg h2 a::after { content: ""; position: absolute; inset: 0; }
.einstieg h2 a:hover { color: var(--petrol); }
.einstieg p { margin: 0; color: var(--blei); font-size: .92rem; }

/* Die Probe steht auf der Startseite nicht mehr im Kopf, sondern als
   Beleg weiter unten — und darf dort nicht die volle Breite fluten. */
.start-geraet { max-width: 44rem; }

.probe-feld {
  display: block; width: 100%;
  font-family: var(--schrift-text); font-size: 1rem;
  padding: .6rem .75rem; margin: 0 0 .9rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  background: var(--papier); color: var(--tinte);
}
.probe-feld:focus { border-color: var(--petrol); }
.probe-marke {
  display: block; margin: 0 0 .35rem;
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blei);
}
.probe-aus {
  margin: 0; min-height: 3.4rem;
  font-family: var(--schrift-mono); font-size: .95rem; line-height: 1.9;
  color: var(--kat); word-break: break-word;
}
.probe-fuss {
  margin: .9rem 0 0; font-size: .82rem; color: var(--blei);
}

/* --- Kategorien auf der Startseite -------------------------------- */

.kategorie-gitter {
  display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.kategorie-karte {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 1.15rem 1.25rem 1.2rem 1.5rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kategorie-karte::before {
  content: ""; position: absolute; z-index: -1;
  left: 0; top: 0; bottom: 0; width: .3rem;
  background: var(--kat);
  border-radius: var(--rundung) 0 0 var(--rundung);
  transition: width .18s ease;
}
.kategorie-karte:hover, .kategorie-karte:focus-within {
  border-color: var(--linie);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -22px rgba(36, 31, 27, .6);
}
.kategorie-karte:hover::before, .kategorie-karte:focus-within::before { width: .55rem; }

.fach-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.kategorie-karte h3 { font-size: 1.12rem; }
.kategorie-karte h3 a { color: var(--tinte); text-decoration: none; }
.kategorie-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.kategorie-karte h3 a:hover { color: var(--kat); }
.fach-anzahl {
  font-family: var(--schrift-mono); font-stretch: normal;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .06em; color: var(--blei); white-space: nowrap;
}
.fach-satz { margin: .3rem 0 .9rem; color: var(--blei); font-size: .92rem; }

/* Beispiele aus der Kategorie. Sie liegen über der Kartenfläche, damit
   sie trotz des flächigen Links auf der Überschrift anklickbar bleiben. */
.fach-proben {
  position: relative; z-index: 1;
  margin: auto 0 0; padding: .75rem 0 0;
  border-top: 1px solid var(--linie-zart);
  font-size: .86rem; color: var(--blei);
  display: flex; flex-wrap: wrap; gap: .2rem .5rem;
}
.fach-proben a { color: var(--blei); text-decoration: none; box-shadow: 0 1px 0 var(--linie); }
.fach-proben a:hover { color: var(--kat); box-shadow: 0 1px 0 currentColor; }
.fach-proben .trenner { color: var(--linie); }

/* --- Häufig gesucht -----------------------------------------------
   Direkteinstiege auf einzelne Skripte. Sie tragen den Namen, unter
   dem gesucht wird, und nichts weiter.                             */

.stichworte {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: 1.2rem 0 0;
}
.stichworte a {
  display: inline-block;
  padding: .42rem .85rem;
  border: 1px solid var(--linie); border-radius: 2rem;
  background: var(--papier);
  color: var(--tinte); text-decoration: none;
  font-size: .88rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.stichworte a:hover, .stichworte a:focus-visible {
  border-color: var(--petrol); background: var(--petrol-zart); color: var(--petrol-tief);
}

.weitere-bereiche {
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie-zart);
  font-size: .9rem; color: var(--blei);
}

/* --- Werkzeugkarten ----------------------------------------------- */

.kachel-gitter {
  display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.kachel {
  position: relative;
  padding: .9rem 1rem .95rem 1.15rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  transition: transform .16s ease, box-shadow .16s ease;
}
.kachel::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: .2rem;
  background: var(--kat);
  border-radius: var(--rundung) 0 0 var(--rundung);
  transition: width .16s ease;
}
.kachel:hover, .kachel:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -18px rgba(36, 31, 27, .65);
}
.kachel:hover::before, .kachel:focus-within::before { width: .4rem; }
.kachel h3 { font-size: .99rem; font-stretch: 106%; margin: 0 0 .2rem; }
.kachel h3 a { color: var(--tinte); text-decoration: none; }
.kachel h3 a::after { content: ""; position: absolute; inset: 0; }
.kachel h3 a:hover { color: var(--kat); }
.kachel p { margin: 0; color: var(--blei); font-size: .86rem; line-height: 1.5; }

/* Sprungleiste über der Gesamtübersicht. 187 Karten sind zu viel zum
   Scrollen; die Leiste bringt jede Kategorie in einen Klick. */
.fach-sprung {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.75rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--linie);
}
.fach-sprung a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem;
  border: 1px solid var(--linie); border-radius: 1.4rem;
  font-family: var(--schrift-mono); font-size: .72rem;
  color: var(--blei); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.fach-sprung a:hover { border-color: var(--kat); color: var(--tinte); }
.sprung-zahl { color: var(--blei); opacity: .75; }
.fach-sprung a:hover .sprung-zahl { color: var(--kat); }

/* Überschrift eines Fachs auf der Gesamtübersicht */
.fach-titel {
  display: flex; align-items: center; gap: .6rem;
  margin: 3.25rem 0 .3rem; scroll-margin-top: 5rem;
}
.fach-titel:first-of-type { margin-top: 1.5rem; }
.fach-titel .punkt { width: .6rem; height: .6rem; }
.fach-vorspann { margin: 0 0 1.1rem; color: var(--blei); font-size: .92rem; }

/* --- Werkzeugseite ------------------------------------------------- */

.tool-kopf { margin-bottom: 1.6rem; }
.einleitung { font-size: 1.1rem; color: var(--blei); margin: 0; max-width: 62ch; }

.tool-fuss {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 1rem;
  font-family: var(--schrift-mono); font-size: .72rem;
  letter-spacing: .06em; color: var(--blei);
}

.nachbarn-titel {
  display: flex; align-items: center; gap: .6rem;
  margin: 3.5rem 0 1rem; font-size: 1.15rem;
}

/* Innerhalb der Bühne steht fremder Code aus zwanzig Jahren. Er bekommt
   nur so viel Zurichtung, dass er sich nicht mit dem Rahmen beißt —
   eigene Farben, Breiten und Bilder bleiben unangetastet. */
.geraet-buehne input[type="text"],
.geraet-buehne input[type="number"],
.geraet-buehne textarea,
.geraet-buehne select {
  font-family: var(--schrift-mono); font-size: .92rem;
  max-width: 100%;
  padding: .35rem .5rem;
  border: 1px solid var(--linie); border-radius: .3rem;
  background: var(--papier); color: var(--tinte);
}
.geraet-buehne input[type="button"],
.geraet-buehne input[type="submit"],
.geraet-buehne input[type="reset"],
.geraet-buehne button {
  font-family: var(--schrift-text); font-size: .88rem; font-weight: 500;
  padding: .4rem .9rem;
  border: 1px solid var(--linie); border-radius: 1.4rem;
  background: var(--karton); color: var(--tinte);
  cursor: pointer;
}
.geraet-buehne input[type="button"]:hover,
.geraet-buehne input[type="submit"]:hover,
.geraet-buehne button:hover { background: var(--karton-tief); }
.geraet-buehne p:last-child { margin-bottom: 0; }

/* --- Fuß ------------------------------------------------------------ */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--karton);
  padding-block: 2.5rem 3rem;
  color: var(--blei); font-size: .9rem;
}
.fuss-inhalt {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: start; justify-content: space-between;
}
.fuss-versprechen { margin: 0; max-width: 46ch; }
.fuss-versprechen strong { color: var(--tinte); font-weight: 600; }
.fuss-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--schrift-mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.fuss-links a { color: var(--blei); text-decoration: none; box-shadow: 0 1px 0 var(--linie); }
.fuss-links a:hover { color: var(--tinte); box-shadow: 0 1px 0 var(--tinte); }

/* --- Farbcodes -------------------------------------------------------
   2.673 Felder. Jede Zelle ist anklickbar und kopiert ihren Wert. */

.farbtabelle { width: 100%; border-collapse: collapse; }
.farbtabelle td {
  padding: .3rem .2rem; cursor: pointer; border: 0;
  font-family: var(--schrift-mono); font-size: .72rem;
  text-align: center; color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, .95);
}
.farbtabelle td:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
#kopier-status {
  position: sticky; bottom: 1rem;
  font-family: var(--schrift-mono); font-size: .8rem; color: var(--blei);
  min-height: 1.5rem;
}

/* --- Ortsseiten und DSL-Vergleich ------------------------------------ */

.anriss { font-size: 1.1rem; color: var(--blei); max-width: 62ch; }
.klein { color: var(--blei); font-size: .85rem; }
.quelle, .hinweis { color: var(--blei); font-size: .86rem; }
.ortsteile { color: var(--blei); }

.ort section,
.vergleich section { margin-block: 3rem; }

table { border-collapse: collapse; }
.tabelle-scroll { overflow-x: auto; }

.ausbau-tabelle { width: 100%; }
.ausbau-tabelle th, .ausbau-tabelle td {
  text-align: left; padding: .6rem .6rem;
  border-bottom: 1px solid var(--linie-zart);
}
.ausbau-tabelle tbody tr:last-child th,
.ausbau-tabelle tbody tr:last-child td { border-bottom: 0; }
.ausbau-tabelle td:last-child {
  text-align: right; white-space: nowrap;
  font-family: var(--schrift-mono); font-size: .88rem;
}

/* Der Balken zeigt die Ausbauquote als Hintergrundgrafik. Die Zahl
   daneben ist die eigentliche Information. */
.balken {
  display: inline-block; width: 6rem; height: .5rem; margin-right: .55rem;
  border-radius: .25rem; background: var(--karton-tief); vertical-align: middle;
  background-image: linear-gradient(to right, var(--petrol) var(--anteil), transparent var(--anteil));
}

.tarif-tabelle { width: 100%; font-size: .95rem; }
.tarif-tabelle th, .tarif-tabelle td {
  text-align: left; padding: .75rem .8rem; vertical-align: top;
  border-bottom: 1px solid var(--linie-zart);
}
.tarif-tabelle thead th {
  background: var(--karton);
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blei);
  border-bottom-color: var(--linie);
}
.tarif-tabelle tbody tr:last-child td { border-bottom: 0; }
.tarif-tabelle .zahl { white-space: nowrap; font-family: var(--schrift-mono); }
.tarif-tabelle .klein { display: block; }

.marke {
  display: inline-block; margin-left: .4rem; padding: .12rem .5rem;
  border-radius: 1rem; background: var(--petrol-zart);
  font-family: var(--schrift-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--petrol-tief); vertical-align: middle;
}
.anschluss { display: block; color: var(--blei); font-size: .8rem; }

.knopf {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 2rem;
  background: var(--petrol); color: var(--auf-petrol); text-decoration: none;
  font-size: .86rem; font-weight: 500; white-space: nowrap;
  transition: background-color .15s ease;
}
.knopf:hover, .knopf:focus-visible { background: var(--petrol-tief); color: var(--auf-petrol); }

.anbieter-liste, .nachbar-liste, .ort-liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .4rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.ort-liste-voll { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.anbieter-liste .klein { display: block; }

.daten {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .35rem 1.5rem; margin: 0;
}
.daten dt {
  font-family: var(--schrift-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blei);
  align-self: center;
}
.daten dd { margin: 0; }

.bl-block {
  margin-block: 2.25rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linie);
}
.bl-block h2 { margin: 0 0 .15rem; font-size: 1.35rem; }
.bl-block h2 a { color: var(--tinte); text-decoration: none; }
.bl-block h2 a:hover { color: var(--petrol); }
.bl-block > .klein { margin-top: 0; }

/* --- Anbieter im DSL-Vergleich ---------------------------------------

   Ein Anbieter ist ein Block: oben sein Markenfeld mit Namen und
   Verbreitung, darunter zwei Karten — der günstigste und der schnellste
   Tarif. Zwei statt neun, weil eine vollständige Preisliste niemandem
   bei der Entscheidung hilft; die Auswahl trifft der Filter zweiTarife.  */

.anbieter-block {
  margin-block: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.anbieter-block:first-of-type { border-top: 0; padding-top: 0; }

.anbieter-kopf {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1rem;
}
.anbieter-titel h3 { margin: 0; font-size: 1.25rem; }
.anbieter-titel .abdeckung { margin: .15rem 0 0; }

.abdeckung {
  display: block;
  font-family: var(--schrift-mono); font-size: .7rem; font-weight: 400;
  font-stretch: normal; letter-spacing: .06em; color: var(--blei);
}
.klein-inline { color: var(--blei); font-size: .85em; }

/* Das Markenfeld. Trägt es ein echtes Logo, ist der Kasten hell und neutral
   umrandet — die Logos bringen ihre eigenen Farben mit und brauchen einen
   ruhigen Untergrund. Fehlt ein Logo, bleibt es beim Anfangsbuchstaben auf
   der Hausfarbe --marke aus src/_data/anbieterMarken.js. */
.anbieter-marke {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--rundung);
  background: var(--marke, var(--blei));
  color: #fff;
}
.anbieter-marke svg { width: 74%; height: auto; display: block; }

.anbieter-marke.hat-logo {
  width: 7.5rem; height: 3.25rem;
  padding: .45rem .65rem;
  background: #fff;
  border: 1px solid var(--linie);
}
.anbieter-marke.hat-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.marke-schrift {
  font-family: var(--schrift-display);
  font-weight: 800; font-stretch: 92%; letter-spacing: -.02em;
}

.tarif-karten {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.tarif-karte {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--marke, var(--petrol));
  border-radius: var(--rundung);
  background: var(--papier);
}

.tarif-rolle {
  margin: 0;
  font-family: var(--schrift-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blei);
}
.tarif-name { margin: 0; font-size: 1.05rem; }
.tarif-tempo { margin: 0; font-size: 1.05rem; }
.tarif-tempo strong { font-family: var(--schrift-mono); font-size: 1.35rem; }

.tarif-daten {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .3rem 1.1rem; margin: .35rem 0 .2rem;
  padding-top: .7rem; border-top: 1px solid var(--linie-zart);
  font-size: .9rem;
}
.tarif-daten dt {
  font-family: var(--schrift-mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blei);
  align-self: center;
}
.tarif-daten dd { margin: 0; }
.tarif-daten .zahl { font-family: var(--schrift-mono); }
.tarif-daten strong.zahl { font-size: 1.05rem; }

/* Der Knopf sitzt unten bündig, auch wenn die Karte daneben höher ist. */
.tarif-karte .knopf { margin-top: auto; align-self: start; }

/* Der Hinweis auf die Ortsseiten steht bewusst zwischen Tabelle und
   Ratgeber: die bundesweite Liste sagt nichts darüber, was am eigenen
   Anschluss ankommt. */
.ortshinweis {
  background: var(--karton);
  border-left: 3px solid var(--petrol);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--rundung) var(--rundung) 0;
}
.ortshinweis p { margin: 0; }

.ratgeber h3 { margin-top: 2rem; font-size: 1.15rem; }
.ratgeber p, .ratgeber ul { max-width: 64ch; }
.ratgeber-knopf { margin: 1.6rem 0 2.2rem; }

/* Die Abschnitte des Ratgebers stehen ab Tabletbreite zweispaltig, wie schon
   auf der Vorgängerseite. Zwei feste Spalten im Markup müssten von Hand
   ausbalanciert werden und würden auf schmalen Schirmen die Reihenfolge
   verwürfeln — hier fließt der Text stattdessen durch zwei Spalten, und die
   Blöcke bleiben dabei ungeteilt. */
.ratgeber-block { break-inside: avoid; }
.ratgeber-block h3 { margin-top: 0; }
.ratgeber-block > :last-child { margin-bottom: 0; }
.ratgeber-block + .ratgeber-block { margin-top: 2rem; }

/* Die beiden Bilder der Altseite. Sie erklären nichts, sie lockern die
   Spalten auf — deshalb stehen sie unter der Überschrift und nicht zwischen
   zwei Absätzen, die zusammengehören. */
.ratgeber-bild {
  display: block; width: 100%; height: auto;
  margin: .2rem 0 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--papier);
}

@media (min-width: 60rem) {
  .ratgeber-spalten { columns: 2; column-gap: 3.5rem; }
  .ratgeber-spalten .ratgeber-block + .ratgeber-block { margin-top: 0; }
  /* Im Spaltensatz trägt jeder Block seinen Abstand selbst: der Rand zwischen
     zwei Blöcken darf nicht am Spaltenanfang stehen bleiben. */
  .ratgeber-spalten .ratgeber-block { margin-bottom: 2rem; }
  .ratgeber-spalten p, .ratgeber-spalten ul { max-width: none; }
}

/* ===============================================================
   Der Kurs unter /tutorials/
   =============================================================== */

:root {
  --code-grund: #f7f2e8;
  --code-kommentar: #8a8073;
  --code-wort: #9c3d5f;
  --code-text: #2e6b4e;
  --code-zahl: #8c5a12;
  --code-funktion: #1d5d8c;
  --code-name: #5a4a99;
}

/* Übersicht -------------------------------------------------------- */

.kurs-teile { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.kurs-teil { margin-bottom: 3rem; }

.teil-titel {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 .3rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--tinte);
  font-size: 1.5rem;
}
.teil-nr {
  font-family: var(--schrift-mono); font-stretch: normal;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blei);
}
.teil-satz { margin: .6rem 0 1.1rem; color: var(--blei); max-width: 60ch; }

.kurs-kapitel {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}
.kurs-kapitel a {
  display: flex; align-items: baseline; gap: .85rem;
  padding: .7rem .95rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  text-decoration: none; color: var(--tinte); background: var(--papier);
  transition: border-color .15s ease, transform .15s ease;
}
.kurs-kapitel a:hover {
  border-color: var(--petrol); transform: translateY(-1px);
}
.kapitel-nr {
  font-family: var(--schrift-mono); font-size: .78rem; font-weight: 500;
  color: var(--blei); min-width: 1.4rem;
}
.kurs-kapitel a:hover .kapitel-nr { color: var(--petrol); }
.kapitel-titel { font-weight: 500; }

/* Kapitelseite ------------------------------------------------------ */

.kapitel-text { max-width: 68ch; }
.kapitel-text h2 {
  font-size: 1.45rem; margin: 2.8rem 0 .7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--linie);
}
.kapitel-text h3 { font-size: 1.12rem; margin: 2rem 0 .4rem; }
.kapitel-text ul, .kapitel-text ol { padding-left: 1.3rem; }
.kapitel-text li { margin-bottom: .35rem; }
.kapitel-text li::marker { color: var(--blei); }

/* Probierfeld und Codeblöcke sind breiter als der Lesetext: Code bricht
   schlecht um, und 68 Zeichen sind für eine Zeile Code oft zu wenig. */
.kapitel-text pre[class*="language-"],
.kapitel-text .probe { max-width: 52rem; }

/* Einschübe. Zwei Sorten: was im Archiv steht, und wo es klemmt. */
.damals, .achtung {
  margin: 1.6rem 0; padding: 1rem 1.2rem;
  border-left: 3px solid var(--blei);
  background: var(--karton);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  font-size: .95rem;
}
.achtung { border-left-color: #a3301c; }
.damals p, .achtung p { margin: 0; }
.damals p + p, .achtung p + p { margin-top: .6rem; }
.damals code, .achtung code { background: var(--papier); }

/* Code -------------------------------------------------------------- */

.kapitel-text code {
  font-family: var(--schrift-mono);
  font-size: .89em;
}
.kapitel-text :not(pre) > code {
  background: var(--karton); color: var(--tinte);
  padding: .12em .38em; border-radius: .25rem;
  overflow-wrap: break-word;
}

pre[class*="language-"] {
  margin: 1.5rem 0;
  padding: 1.05rem 1.2rem;
  background: var(--code-grund);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  overflow-x: auto;
  font-size: .88rem; line-height: 1.7;
  tab-size: 2;
}
pre[class*="language-"] code { background: none; padding: 0; font-size: 1em; }

.token.comment, .token.prolog, .token.doctype, .token.cdata {
  color: var(--code-kommentar); font-style: italic;
}
.token.punctuation { color: var(--blei); }
.token.keyword, .token.operator, .token.rule, .token.important {
  color: var(--code-wort);
}
.token.string, .token.char, .token.attr-value, .token.template-string {
  color: var(--code-text);
}
.token.number, .token.boolean, .token.constant, .token.symbol {
  color: var(--code-zahl);
}
.token.function, .token.method, .token.selector {
  color: var(--code-funktion);
}
.token.property, .token.class-name, .token.tag, .token.attr-name,
.token.variable, .token.parameter {
  color: var(--code-name);
}
.token.regex { color: var(--code-zahl); }
.token.deleted { color: #a3301c; }

/* Das laufende Beispiel --------------------------------------------- */

.probe { margin: 1.8rem 0; }
.probe .probe-code {
  margin: 0; border: 0; border-radius: 0; background: var(--code-grund);
}
.probe-eingabe {
  display: block; width: 100%; border: 0; resize: vertical;
  padding: 1.05rem 1.2rem;
  background: var(--code-grund); color: var(--tinte);
  font-family: var(--schrift-mono); font-size: .88rem; line-height: 1.7;
  tab-size: 2;
}
.probe-eingabe:focus { outline: 2px solid var(--petrol); outline-offset: -2px; }

.probe-leiste {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .9rem;
  background: var(--karton);
  border-block: 1px solid var(--linie);
}
.probe-knopf {
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .8rem; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 1.2rem;
  background: var(--papier); color: var(--blei);
}
.probe-knopf:hover:not(:disabled) { color: var(--tinte); border-color: var(--blei); }
.probe-knopf:disabled { cursor: default; opacity: .55; }

.probe-ergebnis {
  display: block; width: 100%; height: 90px; border: 0;
  background: var(--papier);
}

/* Nachschlagewerk ---------------------------------------------------- */

.referenz-sprung {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 2.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linie);
}
.referenz-sprung a {
  padding: .28rem .7rem;
  border: 1px solid var(--linie); border-radius: 1.2rem;
  font-family: var(--schrift-mono); font-size: .7rem;
  color: var(--blei); text-decoration: none;
}
.referenz-sprung a:hover { border-color: var(--petrol); color: var(--tinte); }

.kapitel-text table {
  width: 100%; max-width: 52rem;
  margin: 1.4rem 0; font-size: .92rem;
  display: block; overflow-x: auto;
}
.kapitel-text th, .kapitel-text td {
  text-align: left; padding: .5rem .7rem;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: top;
}
.kapitel-text thead th {
  background: var(--karton);
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blei);
  border-bottom-color: var(--linie);
  white-space: nowrap;
}
.kapitel-text tbody tr:last-child td { border-bottom: 0; }
.kapitel-text td:first-child { white-space: nowrap; }
.kapitel-text td code { white-space: nowrap; }

.kapitel-text h2[id] { scroll-margin-top: 5.5rem; }

/* Vor und zurück ----------------------------------------------------- */

.kapitel-nav {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 4rem; padding-top: 1.5rem;
  border-top: 2px solid var(--tinte);
}
.kapitel-nav a {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  text-decoration: none; color: var(--tinte);
  transition: border-color .15s ease;
}
.kapitel-nav a:hover { border-color: var(--petrol); }
.kapitel-weiter { text-align: right; }
.nav-marke {
  font-family: var(--schrift-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blei);
}
.nav-titel { font-weight: 500; }

/* --- Häufige Fragen -----------------------------------------------
   Aufklappbar, damit die Liste als Liste lesbar bleibt; der Text steht
   trotzdem im Dokument und wird gefunden.                          */

.faq-liste {
  max-width: 68ch;
  border-top: 1px solid var(--linie);
}
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .85rem 0;
  cursor: pointer;
  font-family: var(--schrift-display); font-stretch: 106%;
  font-weight: 600; font-size: 1.02rem;
  list-style: none;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
/* Das Zeichen davor dreht sich beim Aufklappen — ein zweites Element
   dafür braucht es nicht. */
.faq-eintrag summary::before {
  content: "›"; flex: none;
  color: var(--petrol); font-size: 1.1rem; line-height: 1;
  transform: translateY(.1em);
  transition: transform .18s ease;
}
.faq-eintrag[open] summary::before { transform: translateY(.1em) rotate(90deg); }
.faq-eintrag summary:hover { color: var(--petrol-tief); }
.faq-eintrag p {
  margin: 0 0 1rem; padding-left: 1.4rem;
  max-width: 64ch; color: var(--blei);
}

/* --- Rechtliches ------------------------------------------------------ */

/* <address> steht per Vorgabe kursiv. Eine Anschrift ist keine Betonung. */
.anschrift {
  font-style: normal;
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

/* --- Hilfsklassen ---------------------------------------------------- */

.visually-hidden, .visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

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

/* ===============================================================
   Modernisierte Werkzeugseiten

   Die 187 alten Scripts bekommen nach und nach eine neue Seite aus
   vier Blöcken: Beschreibung, Demo, Erklärung, Embed-Code. Die
   Demos verwenden dieselben Bausteine (w-…), damit jedes Gerät
   gleich bedient wird — Felder, Knöpfe, Ergebnisanzeige.
   =============================================================== */

.werk-beschreibung { max-width: 68ch; margin-bottom: 1.75rem; }
.werk-beschreibung p { margin: 0 0 .85rem; }
.werk-beschreibung p:last-child { margin-bottom: 0; }

/* --- Demo-Bausteine in der Bühne -------------------------------- */

/* Eine Zeile aus Feldern; bricht auf schmalen Schirmen um */
.w-zeile {
  display: flex; flex-wrap: wrap; gap: .9rem 1.4rem;
  align-items: flex-end; margin: 0 0 1rem;
}
.w-zeile:last-child { margin-bottom: 0; }

/* Ein beschriftetes Feld: kleine Mono-Marke über dem Eingabeelement */
.w-feld { display: flex; flex-direction: column; gap: .3rem; }
.w-feld > span, .w-feld > label,
.w-marke {
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blei);
}

/* Knopfreihe unter den Feldern */
.w-aktionen {
  display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: center; margin: 1.1rem 0 0;
}

/* Der eine wichtige Knopf einer Demo trägt die Handlungsfarbe */
.geraet-buehne .w-knopf,
.knopf-kopieren {
  font-family: var(--schrift-text); font-size: .88rem; font-weight: 600;
  padding: .45rem 1.1rem;
  border: 1px solid var(--petrol-tief); border-radius: 1.4rem;
  background: var(--petrol); color: var(--auf-petrol);
  cursor: pointer;
  transition: background .15s ease;
}
.geraet-buehne .w-knopf:hover,
.knopf-kopieren:hover { background: var(--petrol-tief); }

/* Ergebnisanzeige: ruhige Fläche, Kategorie-Kante, Mono-Schrift */
.w-ergebnis {
  margin: 1.1rem 0 0; padding: .8rem 1rem;
  background: var(--karton);
  border-left: .25rem solid var(--kat);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  font-family: var(--schrift-mono); font-size: .95rem; line-height: 1.7;
  color: var(--tinte);
  min-height: 2.6rem;
  word-break: break-word;
}
.w-ergebnis:empty { display: none; }
.w-ergebnis strong { color: var(--kat); font-weight: 500; }

/* Erläuternde Fußnote unter einer Demo */
.w-hinweis { margin: .9rem 0 0; font-size: .84rem; color: var(--blei); }
.w-hinweis:last-child { margin-bottom: 0; }

/* Tabellarische Ausgaben (Kalender, Zahlenreihen, Ranglisten) */
.w-tabelle { border-collapse: collapse; }
.w-tabelle th, .w-tabelle td {
  padding: .45rem .7rem; text-align: left;
  border-bottom: 1px solid var(--linie-zart);
}
.w-tabelle th {
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blei);
}
.w-tabelle tbody tr:last-child td { border-bottom: 0; }
.w-tabelle td { font-variant-numeric: tabular-nums; }

/* --- Erklärung --------------------------------------------------- */

.werk-titel {
  display: flex; align-items: center; gap: .6rem;
  margin: 3.25rem 0 1rem; font-size: 1.15rem;
}

.werk-erklaerung { max-width: 76ch; }
.werk-erklaerung p, .werk-erklaerung li { max-width: 68ch; }
.werk-erklaerung pre {
  margin: 1.1rem 0; padding: .9rem 1.1rem;
  background: var(--code-grund);
  border: 1px solid var(--linie-zart); border-radius: var(--rundung);
  overflow-x: auto;
  font-family: var(--schrift-mono); font-size: .84rem; line-height: 1.65;
}
.werk-erklaerung pre code { background: none; padding: 0; }
.werk-erklaerung :not(pre) > code {
  font-family: var(--schrift-mono); font-size: .86em;
  background: var(--code-grund);
  padding: .1em .35em; border-radius: .25rem;
}

/* --- Embed-Code -------------------------------------------------- */

.werk-code p { max-width: 68ch; }
.werk-codefeld {
  display: block; width: 100%;
  padding: .9rem 1.1rem;
  background: var(--code-grund); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--rundung);
  font-family: var(--schrift-mono); font-size: .8rem; line-height: 1.6;
  white-space: pre; overflow: auto; resize: vertical;
}
.werk-codefeld:focus { outline: 2px solid var(--petrol); outline-offset: 1px; }
.werk-code-aktion { margin: .8rem 0 0; }

/* Tastenfeld — für die Taschenrechner. Quadratische Tasten in einem
   Raster; die Pillenform der übrigen Knöpfe passt hier nicht. */
.w-tasten {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(4, minmax(0, 3.4rem));
  margin: 1rem 0 0; max-width: 15.5rem;
}
.geraet-buehne .w-tasten button {
  padding: .6rem .2rem; border-radius: var(--rundung);
  font-family: var(--schrift-mono); font-size: .88rem;
  background: var(--papier);
}
.geraet-buehne .w-tasten button:hover { background: var(--karton); }
.geraet-buehne .w-tasten .w-knopf {
  border-radius: var(--rundung);
  background: var(--petrol); color: var(--auf-petrol);
}
.w-tasten-breit { grid-column: span 2; }