/* ═══════════════════════════════════════════════════════════════════
   Das gemeinsame Gerüst der Werkzeugseiten.

   NICHT das der Landeseite: Deren 1400 Zeilen beschreiben ein Gerät, eine
   FAQ, eine Umfrage und drei Plattformkarten — nichts davon gibt es hier.

   HERAUSGEZOGEN AM 01.09.2026. Bis dahin stand dieser Block in jeder
   Werkzeugseite noch einmal, mit dem Argument: „Wer eine Farbe ändert,
   ändert sie an zwei Stellen — das ist billiger als 1400 mitgeschleppte
   Zeilen." Bei zwei Seiten stimmte das. Bei fünf nicht mehr.

   Und es ist bereits einmal auseinandergelaufen: Die `[hidden]`-Regel
   stand nur im Hörtest, die `h3`-Regel nur im Messwerkzeug. Genau so
   fängt Verfall an.

   Was hier steht, ist Gerüst — Farben, Kopfleiste, Fuß, Überschriften.
   Was eine Seite EIGEN hat, bleibt bei ihr im <style>.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --nacht:        #0B0B0E;
  --grund:        #121216;
  --grund-hoch:   #1C1D23;
  --kante:        #2A2B33;
  --kante-hell:   #38393F;
  --r1: #FF5252;
  --r2: #FABF33;
  --r3: #4CD973;
  --r4: #4C9EFA;
  --r5: #B866FA;
  --regenbogen: linear-gradient(45deg, #FF5252, #FABF33, #4CD973, #4C9EFA, #B866FA);
  --akzent:       #4CD973;
  --akzent-hell:  #7DE89A;
  --kalt:         #8B93A8;
  --warm:         #FABF33;
  --text:         #ECECF0;
  --leise:        #A6A7B2;
  --leiser:       #74757F;
  --anzeige: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --grotesk: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --daten: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
/* [hidden] MUSS hier ueberschreiben duerfen.

   `.paare { display: grid }` ist eine Autorenregel und schlaegt das
   `display: none`, das der Browser dem hidden-Attribut mitgibt — die
   Regel des Autors gewinnt gegen die des Browsers. Ergebnis: Nach dem
   letzten Durchgang blieben die Knoepfe stehen, obwohl das Ergebnis
   schon darunter stand. Im Bildschirmfoto gesehen. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: var(--grotesk); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.rahmen { max-width: 46rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
a { color: var(--akzent-hell); }

.kopfleiste { border-bottom: 1px solid var(--kante); background: var(--nacht); }
.kopfleiste__inhalt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: .9rem; }
.marke { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); }
.marke__wort { font-family: var(--daten); font-size: .76rem; font-weight: 700; letter-spacing: .08em; }
.marke__wort span { color: var(--leise); font-weight: 400; }
.kopf__wege { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.kopfknopf {
  font-family: var(--daten); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .8rem; border: 1px solid var(--kante-hell); border-radius: 2px;
  color: var(--leise); text-decoration: none;
}
.kopfknopf:hover { color: var(--text); border-color: var(--kalt); }
.kopfknopf--haupt { color: var(--nacht); background: var(--akzent); border-color: var(--akzent); font-weight: 700; }

.sprachwahl { position: relative; font-family: var(--daten); font-size: .7rem; }
.sprachwahl__knopf { cursor: pointer; padding: .4rem .6rem; border: 1px solid var(--kante-hell); border-radius: 2px; color: var(--leise); list-style: none; }
.sprachwahl__knopf::-webkit-details-marker { display: none; }
.sprachwahl__liste { position: absolute; inset-inline-end: 0; margin: .3rem 0 0; padding: .3rem; list-style: none; background: var(--grund-hoch); border: 1px solid var(--kante-hell); z-index: 20; min-width: 9rem; }
.sprachwahl__liste a { display: block; padding: .35rem .5rem; color: var(--leise); text-decoration: none; }
.sprachwahl__liste a:hover, .sprachwahl__liste a[aria-current] { color: var(--text); background: var(--kante); }

.eyebrow { font-family: var(--daten); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--akzent); margin: 0 0 .6rem; }
h1 { font-family: var(--anzeige); font-weight: 400; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.08; margin: 0 0 .8rem; }
h2 { font-family: var(--anzeige); font-weight: 400; font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.2; margin: 2.6rem 0 .7rem; }
h3 { font-family: var(--daten); font-size: .82rem; letter-spacing: .04em; margin: 1.6rem 0 .4rem; color: var(--text); }
.vorwort { font-size: 1.08rem; color: var(--leise); margin: 0 0 1.6rem; }
.teil { padding-block: clamp(2.2rem, 6vw, 3.4rem); }
.teil--linie { border-top: 1px solid var(--kante); }

/* ── Fragen und Antworten, auf mehreren Seiten gleich ────────────── */
.frage { border-top: 1px solid var(--kante); padding-block: 1.1rem; }
.frage__titel { font-family: var(--grotesk); font-weight: 600; font-size: 1.02rem; margin: 0 0 .35rem; color: var(--text); }
.frage p { margin: 0 0 .5rem; color: var(--leise); }
.frage p:last-child { margin-bottom: 0; }

/* ── Der Fuß ─────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--kante); background: var(--nacht); padding-block: 2rem; margin-top: 2rem; }
.merksatz { font-family: var(--anzeige); font-size: 1.2rem; margin: 0 0 .6rem; color: var(--text); }
.fuss__recht { font-size: .84rem; color: var(--leiser); margin: 0 0 1.2rem; }
.fuss__reihe { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; font-size: .8rem; color: var(--leiser); }
.fuss__wege { display: flex; gap: 1rem; margin-inline-start: auto; }
.fuss__wege a { color: var(--leiser); text-decoration: none; }
.fuss__wege a:hover { color: var(--text); }

/* ── Ein Knopf, der weiterführt ──────────────────────────────────── */
.grossknopf {
  display: inline-block; margin-top: .8rem; text-decoration: none; cursor: pointer;
  font-family: var(--daten); font-size: .78rem; letter-spacing: .06em; font-weight: 700;
  padding: .7rem 1.3rem; border: 0; border-radius: 2px; background: var(--akzent); color: var(--nacht);
}
.grossknopf:hover { background: var(--akzent-hell); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.fuss__werkzeuge { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem; margin: 0 0 1.4rem; }
.fuss__werkzeuge-titel { font-family: var(--daten); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leiser); }
.fuss__werkzeuge a { font-size: .86rem; color: var(--leise); text-decoration: none; border-bottom: 1px solid var(--kante); }
.fuss__werkzeuge a:hover { color: var(--text); border-bottom-color: var(--akzent); }

/* Von mehreren Werkzeugseiten benutzt: Kartenpaar, Merksatz, Tabelle. */
.zwei { display: grid; gap: 1rem; margin: 1.6rem 0; }
@media (min-width: 42rem) { .zwei { grid-template-columns: 1fr 1fr; } }
.karte { border: 1px solid var(--kante-hell); border-radius: 3px; background: var(--grund-hoch); padding: 1.2rem; }
.karte .karte__zahl { font-family: var(--anzeige); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; margin: 0 0 .2rem; }
.karte .karte__was { font-family: var(--daten); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.karte p { margin: .7rem 0 0; color: var(--leise); font-size: .96rem; }
.merk {
  border-inline-start: 3px solid var(--akzent); padding: .2rem 0 .2rem 1.1rem;
  margin: 1.6rem 0; font-family: var(--anzeige); font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.35;
}
.tabelle { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .94rem; }
.tabelle th, .tabelle td { text-align: start; padding: .6rem .5rem; border-bottom: 1px solid var(--kante); vertical-align: top; }
.tabelle th { font-family: var(--daten); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leiser); font-weight: 400; }
.tabelle td:first-child { font-family: var(--daten); font-size: .84rem; color: var(--text); white-space: nowrap; }
.tabelle td { color: var(--leise); }
