/* ==========================================================================
   wasmachtmeinedomain.de — Stylesheet
   Schrift und Farbe aus dem NEUEDATEN CD 2026. Struktur, Logo und
   Markenbewegung (Zeigerkreis, Seitenwechsel, Bruch) bewusst NICHT.
   Entwurfsbreite 402 px. Die Spalte wächst nie über 400 px Inhalt hinaus —
   auch am Desktop nicht, dort steht sie als Panel vor dem Bild.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farbe — unverändert aus dem CD übernommen */
  --nd-violet:      #6342f4;
  --nd-violet-deep: #2e0bc5;
  --nd-lime:        #d1f43a;
  --nd-lime-deep:   #9cbd0b;
  --nd-black:       #000000;
  --nd-white:       #ffffff;
  --nd-paper:       #fbfbfb;
  --nd-grey:        #f5f5f5;
  --nd-grey-deep:   #696969;

  /* Rollen. Nur diese drei benutzt das Stylesheet — die Bausteine darüber
     stehen nie direkt im Regelwerk. Ein späteres Theme dreht damit die
     Akzentfarbe um, ohne eine einzige Regel anzufassen. */
  --accent:        var(--nd-violet);        /* Ruhezustand: Links, Toplines, Kontur, Fokus */
  --accent-strong: var(--nd-violet-deep);   /* Hover, besucht, aktiv — immer der tiefere Ton */
  --accent-ink:    var(--nd-white);         /* Schrift auf einer Akzentfläche */

  /* Schrift — unverändert aus dem CD übernommen */
  --font-sans:  "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-serif: Caladea, Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --w-extralight: 200;
  --w-regular:    400;
  --w-semibold:   600;
  --w-bold:       700;
  --w-black:      900;

  /* Raster — Basis 40. Innerhalb der Spalte wächst nichts mit,
     weil die Spalte selbst nicht wächst. */
  --s1:  10px;
  --s2:  20px;
  --s3:  40px;
  --s4:  80px;
  --s5: 120px;

  --col-width:   400px;   /* Inhaltsbreite, überall gleich */
  --col-margin:   40px;   /* Seitenrand, überall gleich */
  --panel-width: 560px;   /* 40 + 480 + 40 — auf dem Desktop einen
                             Rasterschritt breiter als die mobile Spalte */

  --block-gap:   40px;
  --section-gap: 80px;

  /* Linien — Bedienelemente 3, Flächen 3 (die Spalte bleibt „mobil") */
  --line-control: 3px;
  --line-surface: 3px;
  --line-hair:    2px;
  --radius:       0;

  /* Grade — die Mobile-Leiter des CD, überall gültig */
  --t-display:    40px; --t-display-lh:    40px;  /* Startseitentitel     */
  --t-page:       34px; --t-page-lh:       40px;  /* Fragetitel (H1)      */
  --t-h2:         26px; --t-h2-lh:         30px;  /* Auswertung, H2 im Text */
  --t-article:    20px; --t-article-lh:    30px;  /* Ergebnistext         */
  --t-body:       18px; --t-body-lh:       30px;  /* Fließtext            */
  --t-topline:    16px; --t-topline-lh:    50px;
  --t-button:     18px;
  --t-article-large: 24px;   /* nur die Eingabe: das Feld ist das Hauptelement */

  /* Eine eigene Satzbreite gibt es nicht mehr. Die Spalte ist das Maß:
     Sie ist ohnehin schmal, und ein zweites Limit darin ließ den Fließtext
     bei 34 Zeichen enden, während Prüffeld, Auswertung und Kacheln die vollen
     400 bzw. 480 px nutzten. Jetzt läuft alles auf dieselbe Kante.
     Gerechnet sind das rund 46 Zeichen mobil und rund 53 im Panel — näher
     an den 68 Zeichen des CD als die 34 vorher. */
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--nd-black);
  color: var(--nd-black);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

::selection { background: var(--nd-lime); color: var(--nd-black); }

/* Fokus: nur bei Tastaturbedienung, 3 px stark, 3 px Abstand.
   Die Ringfarbe richtet sich nach der Fläche. */
:focus { outline: none; }
:focus-visible {
  outline: var(--line-control) solid var(--accent);
  outline-offset: var(--line-control);
}
.on-dark :focus-visible,
.on-violet :focus-visible { outline-color: var(--nd-white); }
.on-lime :focus-visible    { outline-color: var(--nd-black); }

/* --------------------------------------------------------------------------
   3. Bühne und Spalte
   Mobil ist die Spalte die Seite. Ab 768 px steht sie links als Panel
   vor einem randlosen Bild — also schon auf dem Tablet, nicht erst am
   Desktop. 768 ist die Breite, ab der neben den 560 px des Panels noch
   genug Fläche für ein Bild bleibt, das als Kulisse taugt.
   -------------------------------------------------------------------------- */

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--nd-white);
}

.panel {
  background: var(--nd-white);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

/* Flexspalte über die volle Höhe: Bei kurzen Seiten dehnt sich der Inhalt,
   damit der Fuß unten abschließt und darunter keine weiße Fläche stehen
   bleibt. Unten kein Innenabstand — der Fuß ist der Abschluss. */
.panel__inner {
  max-width: calc(var(--col-width) + 2 * var(--col-margin));
  margin: 0 auto;
  padding: 0 var(--col-margin);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.panel__inner > main { flex: 1 0 auto; }

/* Randabfallende Flächen brechen aus dem Seitenrand aus */
.bleed {
  margin-left: calc(var(--col-margin) * -1);
  margin-right: calc(var(--col-margin) * -1);
  padding: var(--s3) var(--col-margin);
}

.stage__image { display: none; }

@media (min-width: 768px) {
  .stage {
    display: grid;
    grid-template-columns: var(--panel-width) 1fr;
  }
  .panel {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: var(--line-control) solid var(--nd-black);
  }
  .panel__inner { max-width: none; margin: 0; }

  .stage__image {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--nd-black);
    height: 100vh;
    height: 100dvh;
  }
  /* Volle Höhe des Streifens, formatfüllend beschnitten, mittig. */
  .stage__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none;
  }
  /* Text auf Bild immer mit Schwarzverlauf, 70 % unten nach transparent.
     Auf dem Tablet bleibt neben dem Panel nur ein schmaler Streifen: Dort
     nimmt der Text den kleinen Rand und den Grundgrad der Beschriftung,
     sonst stünden drei Wörter je Zeile. */
  .stage__caption {
    position: absolute;
    inset: auto 0 0 0;
    /* Ohne margin: 0 schiebt der Absatzabstand des Browsers die Fläche um
       18 px von der Unterkante weg, und darunter blitzt das Bild durch. */
    margin: 0;
    padding: var(--s2);
    color: var(--nd-white);
    font-size: var(--t-topline);
    line-height: var(--t-body-lh);
    /* Nur eine leichte Abdunklung hinter dem Text: Das Bild soll durchkommen.
       Bewusst in Kauf genommen wird dafür, dass die weiße Schrift auf den
       hellsten Fotos des Pools nicht überall 4,5:1 erreicht — gemessen über
       die tatsächlichen Textzeilen liegen zwei der fünf bei 4,0 und 2,6.
       Wer das ändern will, dunkelt hier stärker ab oder tauscht die beiden
       hellen Fotos; ein Schatten hinter der Schrift käme nicht in Frage,
       den schließt das CD aus. */
    background: linear-gradient(to top,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.35) 72%,
        rgba(0,0,0,0) 100%);
  }
  .stage__caption b { font-weight: var(--w-black); }

  /* Der Bildnachweis steht eine Stufe leiser unter der Bildunterschrift:
     eigene Zeile, kleiner Grad, normales Gewicht. Er gehört zum Bild, nicht
     zur Aussage darüber. */
  .stage__credit {
    display: block;
    margin-top: var(--s1);
    font-size: var(--t-topline);
    line-height: var(--t-body-lh);
    font-weight: var(--w-regular);
  }
}

/* Ab 1024 px ist der Bildausschnitt breit genug für den vollen Rand und den
   Grundgrad des Fließtexts. */
@media (min-width: 1024px) {
  .stage__caption {
    padding: var(--s3);
    font-size: var(--t-body);
  }
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */

/* Signatur-Satz: Black 900 benennt die Sache, ExtraLight 200 den Kontext.
   Beide im selben Grad. */
b, strong  { font-weight: var(--w-black); }
.lt        { font-weight: var(--w-extralight); }
.serif     { font-family: var(--font-serif); font-style: italic; }

.topline {
  margin: 0;
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
}
.on-violet .topline, .on-dark .topline { color: var(--nd-white); }
.on-lime   .topline { color: var(--nd-black); }

/* Die Auftaktlinie markiert den Spaltenanfang */
.rule {
  width: 120px;
  height: var(--line-hair);
  background: var(--nd-black);
  border: 0;
  margin: 0 0 var(--s3);
}
.on-dark .rule, .on-violet .rule { background: var(--nd-white); }
.on-lime .rule { background: var(--nd-black); }

h1, .t-display, .t-page {
  margin: 0;
  font-weight: var(--w-black);
  letter-spacing: .01em;
}
.t-display { font-size: var(--t-display); line-height: var(--t-display-lh); }
h1, .t-page { font-size: var(--t-page); line-height: var(--t-page-lh); }

h2, .t-h2 {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--w-black);
}

h3, .t-h3 {
  margin: 0;
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  font-weight: var(--w-black);
}

/* Vierte Ebene: nur in den Rechtstexten. Das CD kennt dafür keinen eigenen
   Grad, deshalb bleibt der Grundgrad und unterscheidet sich über das
   Gewicht — Bold gegen Black eine Stufe darüber. */
h4, .t-h4 {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-bold);
}

.prose { max-width: none; }
.prose p { margin: 0 0 var(--s2); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: var(--s3) 0 var(--s2); }
.prose h3 { margin: var(--s3) 0 var(--s2); }
.prose h4 { margin: var(--s2) 0 var(--s1); }
.prose ul, .prose ol { margin: 0 0 var(--s2); padding-left: var(--s2); }
.prose li { margin-bottom: var(--s1); }
.prose address { font-style: normal; margin: 0 0 var(--s2); }
.prose b, .prose strong { font-weight: var(--w-black); }

.lead {
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
}

blockquote {
  margin: var(--s3) 0 var(--s3) var(--s3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
}

/* Links: SemiBold, violett, immer unterstrichen. 1 px ruhend, 3 px im Hover. */
a {
  color: var(--accent);
  font-weight: var(--w-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus-visible {
  color: var(--accent-strong);
  text-decoration-thickness: 3px;
}
a:visited { color: var(--accent-strong); }

/* ACHTUNG, hier stand einmal a:visited:hover in der Liste oben. Das ist eine
   Falle: Die Kombination wiegt (0,2,1) und schlägt damit jede Bauteilregel
   der Form .klasse:hover, die nur (0,2,0) wiegt. Eine besuchte Fragenkachel
   bekam im Hover deshalb die Linkfarbe statt ihres Weiß — dunkles Violett
   auf violetter Fläche. Dasselbe traf Wortmarke, Bereichszeile, den Knopf
   der 404-Seite und die Beschriftung auf dem Bild.
   Gebraucht wurde die Kombination nie: a:hover und a:visited setzen beide
   --accent-strong, und die Linienstärke rührt a:visited gar nicht an.
   Wer sie wieder einführt, bricht alle Bauteile auf einmal. */

.on-dark a, .on-violet a, .stage__caption a {
  color: var(--nd-lime);
}
.on-dark a:hover, .on-violet a:hover { color: var(--nd-lime); }
.on-lime a { color: var(--accent-strong); }

/* Code im Satz. overflow-wrap: anywhere ist hier Pflicht: Werte wie
   include:spf.protection.outlook.com enthalten kein Leerzeichen und stünden
   sonst über den Spaltenrand hinaus — in einer 400-px-Spalte fällt das
   sofort auf. */
code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--nd-grey);
  padding: 0 6px;
  overflow-wrap: anywhere;
}
.on-dark code, .on-violet code { background: none; color: var(--nd-lime); }

/* Abstände zwischen Blöcken und Abschnitten */
.block  { margin-top: var(--block-gap); }
.section { margin-top: var(--section-gap); }

/* --------------------------------------------------------------------------
   5. Kopf und Fuß
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) 0 var(--s2);
}

/* Wortmarke des Werkzeugs — eigenständig, nicht die NEUEDATEN-Wortmarke.
   Der Signatur-Satz des CD auf den eigenen Namen angewandt, als SVG:
   „was macht" und „?" in ExtraLight, „meine domain" in Black, die Schrift
   in Pfade umgesetzt. Sie steht damit vom ersten Bildaufbau an richtig,
   auch bevor der Webfont geladen ist — beim Kopf der Seite ist das der
   Unterschied zwischen einer Marke und einem Umbruch.
   Quelldatei: assets/logo.svg. */
.wordmark {
  display: inline-block;
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  color: var(--nd-black);
  text-decoration: none;
}
/* Die Marke hängt an der Schriftgröße statt an einer Pixelzahl: .746em ist
   ihre Oberlängenhöhe, sie steht deshalb so hoch wie Livetext daneben.
   Unterlängen hat sie keine, die Grundlinie ist ihre Unterkante — darum
   sitzt sie mit vertical-align: baseline genau auf der Zeile.
   currentColor: auf schwarzem Grund wird sie weiß, ohne zweite Datei. */
.wordmark svg {
  display: inline-block;   /* gegen die Block-Regel für svg in Abschnitt 2 */
  width: auto;
  height: .746em;
  fill: currentColor;
  vertical-align: baseline;
}
.wordmark:hover, .wordmark:visited { color: var(--nd-black); }
/* Das Fragezeichen ist das einzige Element, das die Farbe wechselt — es
   trägt im Kopf die Rolle, die vorher die Interpunkte hatten. Hier steht
   --accent und nicht --accent-strong: Der Ruhezustand ist schwarz, der
   Hover holt den Akzent also hervor, statt ihn zu vertiefen. In der
   Variante „tief" ist --accent-strong Schwarz — der Wechsel bliebe unsichtbar. */
.wordmark:hover .wm-mark { fill: var(--accent); }

/* Der Fuß steht auf demselben Weiß wie die Seite. Abgesetzt wird er nicht
   durch eine Fläche, sondern allein durch die 3-px-Linie, dieselbe Stärke,
   die im Entwurf überall trennt. */
.sitefoot {
  margin-top: var(--section-gap);
  background: var(--nd-white);
  color: var(--nd-black);
  border-top: var(--line-control) solid var(--nd-black);
  padding: var(--s3) var(--col-margin) 0;
  margin-left: calc(var(--col-margin) * -1);
  margin-right: calc(var(--col-margin) * -1);
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: var(--s1); }

/* Im Fuß stehen alle Links schwarz, auch der auf der Limefläche. Sie führen
   hier nicht weiter ins Thema, sondern ordnen die Seite ein — Violett würde
   ihnen ein Gewicht geben, das sie nicht haben. Erkennbar bleiben sie an der
   Unterstreichung, im Hover an ihrer Stärke. */
.sitefoot a,
.sitefoot a:visited,
.sitefoot a:hover,
.sitefoot a:focus-visible { color: var(--nd-black); }

/* Der Absender schließt die Seite ab. Seine Fläche bricht aus dem
   Innenabstand des Fußes noch einmal aus, damit sie bis an beide Ränder
   läuft, und steht unten ohne Abstand — danach kommt nichts mehr. */
.sitefoot__sender {
  margin: var(--s3) calc(var(--col-margin) * -1) 0;
  padding: var(--s3) var(--col-margin);
  background: var(--nd-lime);
  color: var(--nd-black);
}

/* --------------------------------------------------------------------------
   6. Das Prüffeld
   Das Hauptbedienelement der Seite und deshalb das größte: 80 px hoch,
   Eingabe in 24 px. Eingabe und Knopf sind ein Element, kein Paar — sie
   teilen sich eine 3-px-Linie. Radius 0.
   80 ist der nächste Wert der Rasterleiter über der Buttonhöhe 50;
   dazwischen gibt es keinen.
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  border: var(--line-control) solid var(--nd-black);
  background: var(--nd-white);
  position: relative;
}
.field:focus-within {
  outline: var(--line-control) solid var(--accent);
  outline-offset: var(--line-control);
}

.field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 74px;
  border: 0;
  background: none;
  padding: 0 var(--s2);
  font-family: var(--font-sans);
  font-size: var(--t-article-large);
  font-weight: var(--w-semibold);
  color: var(--nd-black);
}
.field__input::placeholder { color: var(--nd-grey-deep); font-weight: var(--w-regular); }
.field__input:focus-visible { outline: none; }

.field__submit {
  flex: 0 0 auto;
  height: 74px;
  border: 0;
  border-left: var(--line-control) solid var(--nd-black);
  background: var(--nd-black);
  color: var(--nd-white);
  font-family: var(--font-sans);
  font-size: var(--t-button);
  font-weight: var(--w-bold);
  padding: 0 var(--s2);
  cursor: pointer;
}
.field__submit:hover { background: var(--accent); }
.field__submit:active { background: var(--accent-strong); }
.field__submit[disabled] { cursor: progress; background: var(--accent); }

.field__label {
  display: block;
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* Honeypot */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

/* Statusbalken: 6 px, Spur 20 %, Fortschritt voll — läuft, solange geprüft wird */
.field__progress {
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--line-control) * -1 - 6px);
  height: 6px;
  background: var(--nd-grey);
  overflow: hidden;
}
.field__progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--accent);
  animation: wmmd-run 1.2s linear infinite;
}
@keyframes wmmd-run {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

.field-error {
  margin-top: var(--s1);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-black);
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   7. Buttons
   Höhe 50, Innenabstand 10/20, Linie 3, Radius 0, Label 18 Bold.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: var(--s1) var(--s2);
  border: var(--line-control) solid transparent;
  font-family: var(--font-sans);
  font-size: var(--t-button);
  font-weight: var(--w-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: none;
}
.btn--default { background: var(--nd-black); border-color: var(--nd-black); color: var(--nd-white); }
.btn--default:hover { background: var(--accent); border-color: var(--accent); color: var(--nd-white); }
.btn--ghost   { border-color: var(--nd-black); color: var(--nd-black); }
.btn--ghost:hover { background: var(--nd-black); color: var(--nd-white); }
.btn--invert  { background: var(--nd-white); border-color: var(--nd-white); color: var(--nd-black); }
.btn--invert:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--nd-white); }
.btn--ghost-invert { border-color: var(--nd-white); color: var(--nd-white); }
.btn--ghost-invert:hover { background: var(--nd-white); color: var(--nd-black); }
.btn--signal  { background: var(--nd-lime); border-color: var(--nd-lime); color: var(--nd-black); }
.btn--signal:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--nd-white); }
.btn:visited { color: inherit; }

/* --------------------------------------------------------------------------
   8. Absprung — Link mit Fläche, kein Button.
   Deshalb Linkfarbe Violett für Kontur und Schrift.
   -------------------------------------------------------------------------- */

.jump {
  display: block;
  min-height: 80px;
  padding: var(--s2);
  border: var(--line-control) solid var(--accent);
  color: var(--accent);
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  font-weight: var(--w-bold);
  text-decoration: none;
}
/* Besucht sieht aus wie unbesucht: In einer Liste gleichrangiger Fragen
   wäre der dunklere Ton kein Hinweis, sondern eine Unruhe — eine Kachel
   stünde ohne Grund anders da als ihre Nachbarn. */
.jump:visited { color: var(--accent); border-color: var(--accent); }
.jump:hover, .jump:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}
.jump__meta {
  display: block;
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.on-dark .jump, .on-violet .jump { border-color: var(--nd-lime); color: var(--nd-lime); }
.on-dark .jump:hover, .on-violet .jump:hover { background: var(--nd-lime); color: var(--nd-black); }

.jump-list { display: grid; gap: var(--s3); }

.jump-intro {
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  font-weight: var(--w-black);
  margin: 0 0 var(--s2);
}

/* --------------------------------------------------------------------------
   9. Die Auswertung
   Die Ampel des CD hat kein Rot und kein Grün. Sie hat eine Leiter:
   je dunkler die Fläche, desto dringender. Wort und Pixel-Icon tragen
   die Aussage, die Farbe verstärkt sie nur.
   -------------------------------------------------------------------------- */

.verdict {
  margin-left: calc(var(--col-margin) * -1);
  margin-right: calc(var(--col-margin) * -1);
  padding: var(--s4) var(--col-margin);
  border-top: var(--line-control) solid var(--nd-black);
  border-bottom: var(--line-control) solid var(--nd-black);
}
.verdict[data-status="ok"]   { background: var(--nd-white); color: var(--nd-black); }
.verdict[data-status="info"] { background: var(--nd-grey);  color: var(--nd-black); border-color: var(--nd-grey); }
.verdict[data-status="warn"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.verdict[data-status="fail"] { background: var(--nd-black);  color: var(--nd-white); }

.verdict__flag {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.verdict__flag svg { width: 40px; height: 40px; flex: 0 0 40px; }
.verdict[data-status="warn"] .verdict__flag,
.verdict[data-status="fail"] .verdict__flag { color: var(--nd-white); }
/* Lime markiert pro Sichtbereich genau eine Sache: den Handlungsbedarf. */
.verdict[data-status="fail"] .verdict__flag { color: var(--nd-lime); }

.verdict__headline {
  margin: var(--s2) 0 0;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--w-black);
}
/* Auf Violett nie Text unter 20 px — hier ist alles 20/30 oder größer. */
.verdict__text {
  margin: var(--s2) 0 0;
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
}

/* „Wo stelle ich das ein?" — der eigentliche Nutzen. Deshalb in der Auswertung,
   nicht in den Details. Linie in der Schriftfarbe der Fläche. */
.where {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: var(--line-control) solid currentColor;
}
.where__label {
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.where__provider {
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--w-black);
}
.where__path {
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  font-weight: var(--w-semibold);
}
.where__note {
  margin-top: var(--s1);
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  font-weight: var(--w-regular);
}

/* --------------------------------------------------------------------------
   10. Die Details
   Immer auf weißem Grund, nie in der Farbfläche — dort dürfte der Mono-Satz
   seine 18 px nicht behalten.
   -------------------------------------------------------------------------- */

.details {
  margin-top: var(--block-gap);
}
.details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 50px;
  padding: var(--s1) 0;
  border-top: var(--line-control) solid var(--nd-black);
  border-bottom: var(--line-control) solid var(--nd-black);
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.details > summary::-webkit-details-marker { display: none; }
.details > summary::after {
  content: "";
  flex: 0 0 20px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(0 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%);
}
.details[open] > summary::after {
  clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}
.details > summary:hover { color: var(--accent); border-color: var(--accent); }

.records {
  margin: var(--s2) 0 0;
  border: var(--line-surface) solid var(--nd-black);
}
.records__row {
  display: flex;
  gap: var(--s2);
  padding: var(--s1);
  border-bottom: var(--line-hair) solid var(--nd-black);
}
.records__row:last-child { border-bottom: 0; }
.records__key {
  flex: 0 0 72px;
  font-size: var(--t-topline);
  line-height: var(--t-body-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.records__val {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.records__val--empty { font-family: var(--font-sans); font-weight: var(--w-extralight); }

.meta {
  margin-top: var(--s2);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--nd-grey-deep);
}

/* --------------------------------------------------------------------------
   11. Fragenliste
   -------------------------------------------------------------------------- */

.group { margin-top: var(--section-gap); }
.group__head {
  padding-bottom: var(--s1);
  border-bottom: var(--line-control) solid var(--nd-black);
  margin-bottom: var(--s3);
}

.soon {
  list-style: none;
  margin: 0;
  padding: 0;
}
.soon li {
  padding: var(--s1) 0;
  border-bottom: var(--line-hair) solid var(--nd-grey);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-extralight);
}
.soon li::after {
  content: " folgt";
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: var(--t-topline);
  color: var(--nd-grey-deep);
}

/* --------------------------------------------------------------------------
   12. Info-Kasten (Erklärtext, Glossar-Querverweis)
   -------------------------------------------------------------------------- */

.note {
  border: var(--line-control) solid var(--accent);
  color: var(--accent);
  padding: var(--s2);
}
.note__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  margin: 0 0 var(--s1);
}
.note p { margin: 0; font-size: var(--t-article); line-height: var(--t-article-lh); font-weight: var(--w-semibold); }
.note a { color: inherit; }

/* --------------------------------------------------------------------------
   13. Zustände
   -------------------------------------------------------------------------- */

[hidden] { display: none !important; }

/* Das Ergebnis ist die Antwort auf die Frage der Seite und steht deshalb
   mit dem Abstand eines eigenen Abschnitts, nicht dem eines Blocks. */
.result { margin-top: var(--section-gap); }
.result[data-fresh="1"] { animation: wmmd-in 160ms linear; }
@keyframes wmmd-in { from { opacity: 0; } to { opacity: 1; } }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* --------------------------------------------------------------------------
   14. Seitenbausteine
   -------------------------------------------------------------------------- */

/* Sprungmarke: nur für die Tastatur sichtbar */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--nd-black);
  color: var(--nd-white);
  padding: var(--s1) var(--s2);
  font-weight: var(--w-bold);
  text-decoration: none;
}
.skip:focus {
  left: 0;
  color: var(--nd-white);
}

main:focus { outline: none; }

/* Abstände innerhalb des Prüffelds */
.field__head + .field { margin-top: var(--s1); }
form .meta { margin-top: var(--s1); }

/* Gruppenkopf der Startseite: schwarz statt violett — die Gruppe ist
   eine Beschriftung, kein Hinweis. */
.topline--plain { color: var(--nd-black); }

/* Ein Link in der Beschriftungszeile: Er tritt nicht als Link auf, sondern
   als das Wort, das er ohnehin ist — Farbe und Gewicht kommen von der Zeile.
   Erst im Hover zeigt er sich, mit der 3-px-Linie, die hier überall trennt. */
.topline__link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.topline__link:visited { color: inherit; }
.topline__link:hover, .topline__link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Anreißer im Absprung: kleiner, leichter, in derselben Farbe */
.jump__teaser {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--w-regular);
}

.sitefoot__note { margin: 0; font-size: var(--t-body); line-height: var(--t-body-lh); }

/* Glossar-Titel: Kürzel in Black, Langform in ExtraLight */
h1 .lt { white-space: normal; }

/* --------------------------------------------------------------------------
   15. Die Übersicht
   Sie läuft, wenn jemand nur eine Domain eingibt. Sie bewertet nicht,
   also bekommt sie auch keine Ampel: kein Statuswort, keine Farbfläche.
   Stattdessen eine Kachel — das einzige Element, das auf Weiß einen
   sichtbaren Rahmen tragen darf.
   -------------------------------------------------------------------------- */

.overview {
  border: var(--line-control) solid var(--nd-black);
  padding: var(--s2);
}

.overview__headline {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--w-black);
}

.overview__text {
  margin: var(--s2) 0 0;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

.facts {
  margin: var(--s3) 0 0;
  border-top: var(--line-hair) solid var(--nd-black);
}

.facts__row {
  padding: var(--s1) 0;
  border-bottom: var(--line-hair) solid var(--nd-black);
}
.facts__row:last-child { border-bottom: 0; padding-bottom: 0; }

.facts__label {
  font-size: var(--t-topline);
  line-height: var(--t-body-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.facts__value {
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
  margin: 0;
  font-size: var(--t-article);
  line-height: var(--t-article-lh);
  font-weight: var(--w-black);
}

/* Was fehlt, steht in der Akzentfarbe — mit Zeichen davor, damit die Farbe
   nicht allein die Aussage trägt. 20 px, erst ab da ist Violett auf Weiß
   erlaubt. */
.facts__row[data-alert] .facts__value { color: var(--accent); }
.facts__value svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 5px; }

/* Nach der Übersicht geht es direkt zu den Fragen weiter. */
.js-questions-intro + .group { margin-top: var(--block-gap); }

/* --------------------------------------------------------------------------
   16. Das Merkzeichen und die Merkliste
   Die Liste steht im Browser, nicht auf dem Server. Sichtbar wird sie erst,
   wenn etwas drauf ist — ein leeres Zeichen im Kopf wäre eine Frage ohne
   Anlass.
   -------------------------------------------------------------------------- */

/* Beschriftung links, Merkzeichen rechts: eine Zeile über dem Prüffeld. */
.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

/* Das Merkzeichen ist ein Schalter, kein Knopf: keine Fläche, keine Kontur.
   Es trägt dieselbe Versalzeile wie die Beschriftung daneben. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--nd-grey-deep);
}
.mark svg { width: 20px; height: 20px; }
.mark:hover { color: var(--accent); }
/* Gemerkt: gefülltes Herz im Akzent. Die Form bleibt dieselbe, nur voll. */
.mark[data-marked] { color: var(--accent); }

/* Der Zugang im Kopf. Er steht auf der Grundlinie der Wortmarke. */
.masthead__mark { flex: 0 0 auto; }
.marklink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: var(--t-topline);
  line-height: var(--t-topline-lh);
  font-weight: var(--w-bold);
}
.marklink:visited { color: var(--accent); }
.marklink:hover, .marklink:focus-visible { color: var(--accent-strong); text-decoration: none; }
.marklink svg { width: 20px; height: 20px; }

/* Ein Eintrag der Merkliste: die Domain, darunter Auswahl und Entfernen. */
/* minmax(0, 1fr) statt 1fr: Sonst wird die Spalte so breit wie der breiteste
   Inhalt — und das ist das Auswahlfeld mit der längsten Frage darin. */
.merkliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }

.merk {
  border: var(--line-control) solid var(--nd-black);
  padding: var(--s2);
}
.merk__domain {
  margin: 0 0 var(--s2);
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: var(--w-black);
  overflow-wrap: anywhere;
}
/* Auswahl und Entfernen stehen nebeneinander, solange die Spalte es hergibt,
   und untereinander, sobald es eng wird. */
.merk__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
/* min-width: 0 ist hier Pflicht: Ein Auswahlfeld ist so breit wie seine
   längste Option, und „Wer ist mein E-Mail-Anbieter, wo liegen meine
   Postfächer?" ist breiter als die ganze Spalte. Ohne die Zeile schiebt das
   Feld die Kachel über den Rand hinaus. */
.merk__row .select { flex: 1 1 200px; min-width: 0; }

/* Statt eines Knopfes steht hier dasselbe Herz wie am Prüffeld, gefüllt:
   Ein Klick nimmt die Domain wieder herunter — dieselbe Geste, andersherum.
   Keine Fläche, keine Kontur, aber ein Ziel von 50 px, damit es sich auch
   mit dem Daumen trifft. Was es tut, steht im aria-label und im title; ein
   Zeichen allein sagt es nicht. */
.merk__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--accent);
}
.merk__mark svg { width: 24px; height: 24px; }
.merk__mark:hover, .merk__mark:focus-visible { color: var(--accent-strong); }

/* Auswahlfeld in der Sprache der übrigen Bedienelemente: 50 hoch,
   Linie 3, Radius 0. Der Pfeil kommt vom Browser — ein eigener wäre ein
   Bild mehr für nichts. */
.select {
  min-height: 50px;
  padding: var(--s1) var(--s2);
  border: var(--line-control) solid var(--nd-black);
  border-radius: 0;
  background: var(--nd-white);
  font-family: var(--font-sans);
  font-size: var(--t-button);
  font-weight: var(--w-semibold);
  color: var(--nd-black);
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   17. Die geprüfte Domain im Text
   Sie ist der einzige Wert, der in jeder Antwort vorkommt, und steht deshalb
   überall auf Lime: Wer eine zweite Domain prüft, sieht auf einen Blick, von
   welcher gerade die Rede ist. Schwarz auf Lime bleibt auf allen vier
   Flächen der Auswertung lesbar, auch auf Violett und auf Schwarz.
   -------------------------------------------------------------------------- */

/* Kein overflow-wrap hier: Es würde eine Umbruchstelle mitten in die Adresse
   legen, und dann steht das „/." von https://beispiel.de/. allein in der
   nächsten Zeile. Die Fläche folgt dem Wort, sie zerschneidet es nicht.
   box-decoration-break hält den Innenabstand, falls doch einmal umbrochen wird. */
mark.domain {
  background: var(--nd-lime);
  color: var(--nd-black);
  padding: 0 .15em;
  font-weight: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}