/*
 * WEBASMEDIA Webseiten-Check – Gestaltung 1:1 nach webasmedia.de (DEC-056).
 *
 * Alle Werte wurden am 28.10.2026 auf der laufenden Website mit getComputedStyle
 * ausgelesen, nicht geschätzt. Quellen: /faq/ für Abschnitte und Klappzeilen,
 * / für Kopfbereich und Hintergrund.
 *
 *   Seitengrund      #1F2026
 *   Abschnitt        vollbreit, Polster 110px 0, Schein
 *                    radial-gradient(45% 55% at 100% 0%, Akzent 14%, transparent 70%)
 *   Inhaltsspalte    1140px (Polster 0 10px), Textspalte darin 920px
 *   Klappzeile       #24252C + linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.01)),
 *                    Rand 1px rgba(255,255,255,.08), Radius 16px, Höhe 70px, Abstand 12px
 *   Zeilentext       Open Sans 700, 17px, Zeilenhöhe 23,8px, weiß
 *   Zeilenpolster    22px 76px 22px 26px
 *   Pluskreis        34x34, Radius 50%, Fläche Akzent 15%, rechts 22px
 *   Geisternummer    Open Sans 900, 220px, Kontur 1,5px Akzent 40%, Deckkraft 0,55,
 *                    oben 50px, rechts bündig zur Inhaltsspalte
 *   Hauptüberschrift Open Sans 800, 64px/65,28px, Laufweite -1px, zweite Zeile #265366
 *   Bereichstitel    Open Sans 800, 46px/49,68px; Beschriftung 700 12px/15,6px, Laufweite 3px
 *   Fließtext        Open Sans 400, 18px/31,5px, #B4B8C2
 *   Kopfkontakt      Raster 44px + 20px Abstand; Kachel 44x44 #AA0C0C, Radius 0
 *                    groß Poppins 900 20px/26px weiß, klein Poppins 400 15px/21px #D5D5D5
 *   Navigation       Poppins 500, 17px, weiß auf #AA0C0C
 *   Knopf            Radius 0, Polster 17px 26px, Open Sans 700 13px, Laufweite 1,5px
 *
 * Keine fremden Server: Schriften und Bilder liegen lokal unter /assets/.
 */

/* ---------------------------------------------------------------- Schriften */

@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;
  src:url('fonts/open-sans-v40-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:600;
  src:url('fonts/open-sans-v40-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;
  src:url('fonts/open-sans-v40-latin-700.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:800;
  src:url('fonts/open-sans-v40-latin-800.woff2') format('woff2')}

@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:400;
  src:url('fonts/poppins-v24-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:500;
  src:url('fonts/poppins-v24-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:600;
  src:url('fonts/poppins-v24-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:700;
  src:url('fonts/poppins-v24-latin-700.woff2') format('woff2')}
@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:900;
  src:url('fonts/poppins-v24-latin-900.woff2') format('woff2')}

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

:root{
  --grund:#1F2026;
  --karte:#24252C;
  --karte-rand:rgba(255,255,255,.08);
  --karte-glanz:linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.01));
  --linie:rgba(255,255,255,.1);

  --rot:#AA0C0C;
  --rot-dunkel:#690808;
  --rot-text:#ff6b6b;
  --petrol:#265366;
  --orange:#F39200;
  --gruen:#BED014;
  --blau:#169FDB;

  --text:#B4B8C2;
  --text-hell:#D5D5D5;
  --label:#8A90A0;
  --weiss:#fff;

  --kopf:'Open Sans',system-ui,Arial,sans-serif;
  --ui:Poppins,'Open Sans',system-ui,Arial,sans-serif;

  --spalte:920px;

  color-scheme:dark;
}

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

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font:400 18px/1.75 var(--kopf);
  -webkit-text-size-adjust:100%;
}

/*
 * Überschriften in Poppins, nicht in Open Sans: Das ist die Schrift des Logos (01.11.2026
 * am Schriftzug „media“ bestimmt – einstöckiges a, kreisrunde Punzen, runder i-Punkt).
 * Gewicht 700 statt 800, weil Poppins kräftiger baut; 900 lässt die zweite Zeile der
 * Hauptüberschrift aus dem Satzspiegel laufen. Fließtext bleibt Open Sans: Poppins ist
 * eine Auszeichnungsschrift und über lange Absätze anstrengend (07_Frontend_UX.md §137.13).
 */
h1,h2,h3{font-family:var(--ui);font-weight:700;text-transform:uppercase;color:var(--weiss);margin:0;line-height:1.08}
a{color:var(--weiss)}
p{margin:.7rem 0}

.container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:10px}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px}

.skip-link{position:absolute;left:-999px;top:.5rem;padding:.6rem 1.2rem;background:var(--karte);color:var(--weiss);z-index:50}
.skip-link:focus{left:.5rem}

.mono{font-family:ui-monospace,Consolas,'Liberation Mono',monospace;font-size:.85em;overflow-wrap:anywhere}
.muted{color:var(--label)}

.label{font:800 13px/1.4 var(--kopf);letter-spacing:2.5px;text-transform:uppercase}
.label-klein{font:700 12px/1.3 var(--kopf);letter-spacing:3px;text-transform:uppercase;color:var(--label)}
.strich{display:inline-block;width:2.4rem;height:2px;background:currentColor;vertical-align:middle;margin-right:.9rem}

/* ---------------------------------------------------------------- Kopfbereich */

.kopfleiste .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:24px 14px}
.logo{display:inline-block;line-height:0}
.logo img{width:300px;height:126px;display:block}

.kontaktzeile{display:flex;gap:2.5rem;align-items:center}
.kontakt{display:grid;grid-template-columns:44px auto;column-gap:20px;align-items:center;text-decoration:none}
.kontakt .kachel{grid-row:1 / span 2;width:44px;height:44px;border-radius:0;background:var(--rot);
  display:grid;place-items:center;color:#fff}
.kontakt .kachel svg{display:block}
.kontakt b{display:block;color:var(--weiss);font:900 20px/26px var(--ui)}
.kontakt span{font:400 15px/21px var(--ui);color:var(--text-hell)}

/*
 * Suchknopf rechts in der roten Menüleiste (DEC-064, Platzierung nach 07_Frontend_UX.md §137.7).
 * Dort ist Platz, und er drängt sich nicht zwischen die Kontaktangaben in der Kopfzeile.
 * Ohne JavaScript bleibt er verborgen – das Filtern bräuchte es ohnehin.
 */
.suchknopf{display:inline-flex;align-items:center;gap:.7rem;margin-left:auto;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.25);border-radius:99px;
  padding:.5rem 1.1rem;cursor:pointer;color:#fff;font:500 16px/1 var(--ui);
  transition:background-color .2s, border-color .2s}
.suchknopf svg{display:block;flex:0 0 auto}
.suchknopf:hover,.suchknopf[aria-expanded="true"]{background:rgba(0,0,0,.35);border-color:#fff}
.suchknopf:focus-visible{outline:2px solid #fff;outline-offset:2px}

.suchleiste{background:#2A2B34;border-bottom:1px solid var(--karte-rand)}
.suchleiste .container{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:16px}
.suchleiste input{flex:1 1 20rem;min-width:0;background:var(--grund);color:var(--weiss);
  border:1px solid var(--karte-rand);border-radius:0;padding:14px 18px;font:400 17px/1.4 var(--ui);
  transition:background-color .2s, border-color .2s, box-shadow .2s}
/*
 * Kein harter Rahmen im Fokus: Statt des blauen Rings färbt sich das Feld leicht rot ein und
 * bekommt einen weichen Schein. Sichtbar bleibt der Fokus damit trotzdem (07_Frontend_UX.md §137.9).
 */
.suchleiste input:focus{outline:none;border-color:color-mix(in srgb, var(--rot) 70%, transparent);
  background:rgba(170,12,12,.08);box-shadow:0 0 0 3px rgba(170,12,12,.22)}
.suchleiste input::placeholder{color:var(--label)}
.suchleiste__zu{flex:0 0 auto;width:44px;height:44px;background:none;border:1px solid var(--karte-rand);
  color:var(--text-hell);font:400 26px/1 var(--ui);cursor:pointer;transition:color .2s, border-color .2s}
.suchleiste__zu:hover{color:var(--weiss);border-color:rgba(255,255,255,.3)}
.suchleiste__treffer{flex:0 0 auto;margin:0;font:700 12px/1.8 var(--kopf);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--label)}

/* Gefilterte Ansicht: Was nicht passt, verschwindet – samt leer gewordener Bereiche. */
.ist-versteckt{display:none !important}
.ist-gefiltert .ueberblick,.ist-gefiltert .befunde,.ist-gefiltert .titel-klein,
.ist-gefiltert .nicht-relevant,.ist-gefiltert .abschnitt__worum{display:none}

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

/*
 * Pfeil zurück nach oben (DEC-064, Gestaltung nach 07_Frontend_UX.md §137.7). Er wird erst ab
 * 600 px Scrollweg eingeblendet und verschwindet oben wieder.
 *
 * Durchscheinendes Rot mit weichgezeichnetem Hintergrund: Der Knopf liegt über dem Inhalt,
 * verdeckt ihn aber nicht. Beim Überfahren wird er deckend.
 */
.nach-oben{position:fixed;right:24px;bottom:24px;z-index:40;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb, var(--rot) 55%, transparent);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;transform:translateY(12px) scale(.9);
  transition:opacity .25s, transform .25s, background-color .2s, border-color .2s, box-shadow .2s}
.nach-oben.ist-da{opacity:1;transform:none}
.nach-oben:hover{background:var(--rot);border-color:rgba(255,255,255,.45);box-shadow:0 12px 32px rgba(170,12,12,.45);transform:translateY(-2px)}
.nach-oben:focus-visible{outline:2px solid #fff;outline-offset:3px}

/*
 * Menüleiste. Am 01.11.2026 aus dem Header-Template von webasmedia.de übernommen
 * (Seite 5903, eigenes CSS der Kopfzeile) – nicht geschätzt, sondern dort abgelesen:
 *
 *   Grundzustand   46px hoch, 0 20px Innenabstand, Poppins 500 17px/1, weiß
 *   Hover + Fokus  Hintergrund rgba(0,0,0,.18)
 *   Aktuelle Seite Hintergrund #690808 (--rot-dunkel)
 *   bis 1279px     0 14px, 16px · bis 1024px  40px hoch, 0 12px, 15px
 *
 * Die Einträge stoßen aneinander: Der Abstand entsteht aus dem Innenabstand, damit die
 * Hover-Fläche durchgehend ist. Davor stand hier eine Unterstreichung bei Hover und
 * ein Abstand von 48px – das war der Stand vor dem Umbau der Website (DEC-056).
 */
.menueleiste{background:var(--rot)}
.menueleiste .container{display:flex;align-items:center;gap:2.2rem;min-height:63px}
.menueleiste nav{display:flex;align-items:center}
.menueleiste a{display:flex;align-items:center;height:46px;padding:0 20px;
  font:500 17px/1 var(--ui);color:#fff;text-decoration:none;white-space:nowrap;
  transition:background .2s}
.menueleiste a:hover,.menueleiste a:focus-visible{background:rgba(0,0,0,.18);color:#fff}
.menueleiste a[aria-current]{background:var(--rot-dunkel)}
@media (max-width:1279px){ .menueleiste a{padding:0 14px;font-size:16px} }
@media (max-width:1024px){ .menueleiste a{height:40px;padding:0 12px;font-size:15px} }

/* ---------------------------------------------------------------- Knöpfe */

.knopf{display:inline-block;cursor:pointer;border-radius:0;text-decoration:none;
  font:700 13px/13px var(--kopf);letter-spacing:1.5px;text-transform:uppercase;
  padding:17px 26px;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff}
.knopf:hover{border-color:#fff}
.knopf--rot{background:var(--rot);border-color:var(--rot)}
.knopf--rot:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel)}
.knopf.is-busy{cursor:progress;opacity:.85}
.knopf.is-busy::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.6em;vertical-align:-.05em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:drehen .8s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- Startseite */

/*
 * Derselbe Hintergrund wie auf der Startseite von webasmedia.de: Foto, darüber ein
 * Rotschein oben rechts, ein Verlauf nach rechts und ein Verlauf nach unten,
 * zuoberst ein feines blaues Raster.
 */
.hero{position:relative;overflow:hidden;padding-block:80px 110px;
  background-color:var(--grund);
  background-image:
    radial-gradient(45% 55% at 90% 0%, rgba(170,12,12,.3), rgba(0,0,0,0) 70%),
    linear-gradient(90deg, rgba(31,32,38,.97) 0%, rgba(31,32,38,.72) 46%, rgba(31,32,38,.25) 100%),
    linear-gradient(0deg, var(--grund) 0%, rgba(31,32,38,0) 40%),
    url('images/139047.jpg');
  background-position:0% 0%, 0% 0%, 0% 0%, 50% 70%;
  background-size:auto, auto, auto, cover;
  background-repeat:no-repeat;
}

/*
 * Das Raster liegt auf webasmedia.de nicht gleichmäßig über dem Bild, sondern wird zu den
 * Rändern hin ausgeblendet – deshalb wirkt es dort feiner, obwohl Maschenweite und Farbe
 * dieselben sind. Maske am 01.11.2026 aus dem Seiten-CSS der Startseite 5765 übernommen.
 */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(22,159,219,.08) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(22,159,219,.08) 1px, rgba(0,0,0,0) 1px);
  background-size:48px 48px, 48px 48px;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 75% 45%, #000 0, transparent 75%);
  mask:radial-gradient(ellipse 60% 70% at 75% 45%, #000 0, transparent 75%)}
.hero > .container{position:relative;z-index:1}

h1{font-size:64px;line-height:65.28px;letter-spacing:-1px}
h1 .zweite{display:block;color:var(--petrol)}
.eyebrow{margin:0 0 .9rem;color:var(--text)}
.eyebrow .strich{color:var(--rot)}
.lead{font-size:18px;max-width:36rem;margin:1.2rem 0 0;color:var(--text)}

.vertrauen{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin:1.6rem 0 0;padding:0;list-style:none;
  font:500 15px/1.6 var(--ui);color:var(--text-hell)}
.vertrauen li{display:flex;align-items:center;gap:.5rem}
.vertrauen li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gruen)}
/*
 * „95 Prüfungen · Server & Technik · …“ unter dem Eingabefeld. Vorher eine Zeile in
 * Großbuchstaben mit 3px Sperrung – über zwei Zeilen hinweg schlecht lesbar und lauter,
 * als der Inhalt es verdient. Jetzt ein ruhiger Kasten in der Hausfarbe mit normaler
 * Schrift (07_Frontend_UX.md §137.12).
 */
.pruefzeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem;
  margin:1.6rem 0 0;padding:.8rem 1.1rem;border-radius:12px;
  border:1px solid color-mix(in srgb, var(--rot) 30%, transparent);
  background:linear-gradient(135deg, rgba(170,12,12,.12), rgba(255,255,255,.02));
  font:500 14px/1.6 var(--ui)}
.pruefzeile b{flex:0 0 auto;font-weight:700;color:var(--weiss)}
.pruefzeile span{color:var(--text-hell)}

@media (max-width:48rem){
  .pruefzeile{gap:.2rem;margin:.9rem 0 0;padding:.55rem .75rem;font-size:12px;line-height:1.45}
  .pruefzeile b{flex-basis:100%}
}

/* Formular */
.scan-form{margin-top:2rem;max-width:var(--spalte)}
.scan-form__label{display:block;margin-bottom:.6rem;color:var(--weiss);
  font:700 12px/1.3 var(--kopf);letter-spacing:3px;text-transform:uppercase}
.scan-form__row{display:flex;flex-wrap:wrap;gap:.8rem}
.scan-form__input{flex:1 1 20rem;min-width:0;padding:17px 1.1rem;font:500 16px/1.3 var(--ui);
  color:var(--weiss);background:rgba(0,0,0,.3);border:1px solid var(--karte-rand);border-radius:0;
  transition:background-color .2s, border-color .2s, box-shadow .2s}
.scan-form__input::placeholder{color:var(--label)}
/* Derselbe Fokus wie im Suchfeld: kein blauer Ring, sondern rot getönt (07_Frontend_UX.md §137.9). */
.scan-form__input:focus{outline:none;border-color:color-mix(in srgb, var(--rot) 70%, transparent);
  background:rgba(170,12,12,.14);box-shadow:0 0 0 3px rgba(170,12,12,.22)}
.scan-form__input[aria-invalid="true"]{border-color:var(--rot-text)}
.scan-form__error{margin:.8rem 0 0;color:#ffd4d4;font:500 15px/1.5 var(--ui)}
/* Fortschritt während der Prüfung: Die Ladezeitmessung bei Google dauert rund 20 Sekunden,
   so lange darf der Besucher nicht ins Leere sehen (DEC-060, 07_Frontend_UX.md §97). */
.scan-fortschritt{margin:.8rem 0 0}
.scan-fortschritt__text{margin:0;color:var(--text-hell);font:500 15px/1.5 var(--ui)}
.scan-fortschritt__spur{margin-top:.6rem;height:4px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.1)}
.scan-fortschritt__spur span{display:block;width:0;height:100%;border-radius:99px;
  background:linear-gradient(90deg, var(--rot), #e03030)}
@media (prefers-reduced-motion: reduce){
  .scan-fortschritt__spur span{transition:none !important;width:92% !important}
}

/* ---------------------------------------------------------------- Ergebniskopf */

.ergebniskopf{padding-block:80px 40px;
  background-image:radial-gradient(45% 55% at 100% 0%, rgba(170,12,12,.18), rgba(0,0,0,0) 70%)}
.ergebniskopf h1{font-size:46px;line-height:49.68px;letter-spacing:normal;text-transform:none;overflow-wrap:anywhere}
.geprueft{margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.chip{border:1px solid var(--karte-rand);background:var(--karte);border-radius:99px;padding:.3rem .9rem;
  font:700 12px/1.6 var(--kopf);letter-spacing:1.5px;text-transform:uppercase;color:var(--text)}
.chip--system{border-color:var(--blau);color:var(--blau)}
.zeitangabe{font:400 15px/1.6 var(--ui);color:var(--label);margin-left:.3rem}

/*
 * Dieselbe Adresse noch einmal prüfen (07_Frontend_UX.md §137.8). Der kleine Knopf steht direkt
 * hinter dem Prüfzeitpunkt: Wer sieht, wie alt das Ergebnis ist, will es von dort aus erneuern.
 */
.erneut-klein{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:none;border:1px solid var(--karte-rand);border-radius:99px;padding:.3rem .9rem;
  color:var(--text-hell);font:500 14px/1.6 var(--ui);
  transition:color .2s, border-color .2s, background-color .2s}
.erneut-klein:hover{color:var(--weiss);border-color:var(--blau);background:rgba(22,159,219,.12)}
.erneut-klein:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.erneut-klein svg{display:block;flex:0 0 auto}

.erneut{margin:0}

.bilanz{display:flex;flex-wrap:wrap;gap:2.4rem;margin:2rem 0 0;padding:0;list-style:none}
.bilanz li{display:flex;align-items:baseline;gap:.6rem}
.bilanz b{font:800 46px/1 var(--kopf)}
.bilanz--fail b{color:var(--rot-text)}
.bilanz--warning b{color:var(--orange)}
.bilanz--pass b{color:var(--gruen)}
.bilanz--info b{color:var(--blau)}
.bilanz--unknown b{color:var(--label)}

/* ---------------------------------------------------------------- Überblick */

.inhalt-bereich{padding-block:60px}
.ergebniskopf + .inhalt-bereich{padding-top:28px}
.titel-klein{margin:0 0 1.2rem}

/*
 * Überblick: feste drei Spalten, damit alle Kästen gleich groß sind. Drei Spalten,
 * weil der Katalog neun Bereiche hat – das ergibt drei volle Reihen (DEC-064).
 * Die Lage steht in einer Zeile und wird nicht umbrochen, sonst wird ein Kasten
 * höher als seine Nachbarn.
 */
.ueberblick{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin:0 0 3.5rem;padding:0;list-style:none}
.ueberblick a{display:flex;height:100%;align-items:center;gap:.9rem;text-decoration:none;
  background-color:var(--karte);background-image:var(--karte-glanz);
  border:1px solid var(--karte-rand);border-radius:16px;padding:16px 18px;
  transition:background-color .2s, border-color .2s, transform .2s}
.ueberblick a:hover{background-color:#2A2B34;border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.ueberblick .nr{flex:0 0 auto;font:900 30px/1 var(--kopf);color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb, var(--akzent) 55%, transparent)}
.ueberblick .text{min-width:0;font:700 17px/23.8px var(--kopf);color:var(--weiss);white-space:nowrap}
.ueberblick .text small{display:block;font:700 11px/1.8 var(--kopf);letter-spacing:1.5px;text-transform:uppercase;color:var(--akzent)}
.ueberblick li{--akzent:var(--gruen)}
.ueberblick li.ist-fail{--akzent:var(--rot-text)}
.ueberblick li.ist-warning{--akzent:var(--orange)}
.ueberblick li.ist-unknown{--akzent:var(--label)}

/* ---------------------------------------------------------------- Bereichsabschnitte */

/*
 * Jeder Bereich ist ein eigener, vollbreiter Abschnitt mit einem Schein in der
 * Bereichsfarbe oben rechts – wie die nummerierten Abschnitte der FAQ-Seite.
 */
.abschnitt{--akzent:var(--gruen);position:relative;overflow:hidden;padding-block:110px;scroll-margin-top:1rem;
  background-image:radial-gradient(45% 55% at 100% 0%, color-mix(in srgb, var(--akzent) 14%, transparent), rgba(0,0,0,0) 70%)}
.abschnitt--fail{--akzent:var(--rot-text)}
.abschnitt--warning{--akzent:var(--orange)}
.abschnitt--unknown{--akzent:var(--label)}
.abschnitt > .container{position:relative}

.abschnitt__nummer{position:absolute;top:50px;right:10px;z-index:0;pointer-events:none;
  font:900 220px/220px var(--kopf);color:transparent;opacity:.55;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--akzent) 40%, transparent)}
.abschnitt__label,.abschnitt__titel,.abschnitt__worum,.pruefliste,.ok-block,.leer,.headerblock{position:relative;z-index:1}

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

/*
 * Alle Antwort-Header auf einen Blick (DEC-066) – das, was man von securityheaders.com kennt:
 * die Note, die bewerteten Header als Kacheln und darunter die vollständige Liste.
 */
.headerblock{--ton:var(--gruen);margin:0 0 2.4rem;max-width:var(--spalte);
  background-color:var(--karte);background-image:var(--karte-glanz);
  border:1px solid var(--karte-rand);border-radius:16px;padding:22px 26px}
.headerblock--warning{--ton:var(--orange)}
.headerblock--fail{--ton:var(--rot-text)}

.headerblock__note{display:flex;align-items:center;gap:16px}
.headerblock__buchstabe{flex:0 0 auto;width:62px;height:62px;border-radius:14px;
  display:grid;place-items:center;font:800 28px/1 var(--kopf);color:#15161a;
  background:var(--ton)}
.headerblock__text{font:700 17px/23.8px var(--kopf);color:var(--weiss)}
.headerblock__text small{display:block;font:400 15px/21px var(--ui);color:var(--label)}

.headerblock__liste{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.headerchip{--ton:var(--gruen);display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid color-mix(in srgb, var(--ton) 45%, transparent);border-radius:99px;
  background:color-mix(in srgb, var(--ton) 12%, transparent);
  padding:.35rem .9rem;font:500 14px/1.5 var(--ui);color:var(--text-hell)}
.headerchip--warning{--ton:var(--orange)}
.headerchip--fail{--ton:var(--rot-text)}
.headerchip span{color:var(--ton);font-weight:700}
.headerchip b{color:var(--label);font:700 11px/1 var(--kopf);letter-spacing:1px}

.headerblock__alle{margin-top:18px;border-top:1px solid var(--karte-rand);padding-top:14px}
.headerblock__alle > summary{cursor:pointer;list-style:none;
  font:700 12px/1.8 var(--kopf);letter-spacing:3px;text-transform:uppercase;color:var(--label)}
.headerblock__alle > summary::-webkit-details-marker{display:none}
.headerblock__alle > summary::before{content:'+ ';color:var(--blau)}
.headerblock__alle[open] > summary::before{content:'– '}
.headerblock__alle > summary:hover{color:var(--weiss)}
.headerblock__alle table{width:100%;margin-top:14px;border-collapse:collapse;table-layout:fixed}
.headerblock__alle th{width:16rem;text-align:left;vertical-align:top;padding:7px 14px 7px 0;
  font:500 14px/1.5 var(--mono, var(--ui));color:var(--text-hell);word-break:break-word}
.headerblock__alle td{vertical-align:top;padding:7px 0;font:400 14px/1.5 var(--ui);
  color:var(--label);overflow-wrap:anywhere}
.headerblock__alle tr + tr th,.headerblock__alle tr + tr td{border-top:1px solid rgba(255,255,255,.05)}
.headerblock__alle .ist-bewertet th{color:var(--weiss);font-weight:700}
.headerblock__alle .ist-bewertet td{color:var(--text)}

.abschnitt__label{margin:0 0 .9rem;color:var(--akzent);font:700 12px/15.6px var(--kopf);letter-spacing:3px;text-transform:uppercase}
.abschnitt__titel{font-size:46px;line-height:49.68px}
.abschnitt__titel .lage{color:var(--akzent)}
.abschnitt__worum{margin:1.4rem 0 2.4rem;max-width:var(--spalte);font-size:18px}
.abschnitt__worum b{color:var(--weiss)}
.abschnitt__worum .nicht,.abschnitt__worum .hinweis{display:block;margin-top:.6rem;color:var(--label);font-size:16px}

.pruefliste{display:grid;gap:12px;margin:0;padding:0;list-style:none;max-width:var(--spalte)}

/* ---------------------------------------------------------------- Ladezeit-Kreise */

/*
 * Kreis mit dem Gesamtwert, wie bei PageSpeed Insights: farbiger Ring, Zahl in der Mitte.
 * Die Farbe folgt den Hausfarben für Problem, Verbesserung und in Ordnung.
 * Die Kreise stehen im Ergebniskopf direkt unter der Zählerzeile.
 */
.tachos{display:flex;flex-wrap:wrap;gap:16px;margin:2rem 0 0;padding:0;list-style:none}
.tacho{--ton:var(--gruen);position:relative;display:flex;align-items:center;gap:18px;
  background-color:var(--karte);background-image:var(--karte-glanz);
  border:1px solid var(--karte-rand);border-radius:16px;padding:18px 26px 18px 18px;flex:1 1 15rem}
.tacho--fail{--ton:var(--rot-text)}
.tacho--warning{--ton:var(--orange)}

.tacho__ring{width:92px;height:92px;flex:0 0 auto;transform:rotate(-90deg)}
.tacho__spur{stroke:rgba(255,255,255,.1)}
.tacho__wert{stroke:var(--ton)}
.tacho__zahl{position:absolute;left:18px;width:92px;height:92px;display:grid;place-items:center;
  font:800 30px/1 var(--kopf);color:var(--ton)}
.tacho__text{font:700 17px/23.8px var(--kopf);color:var(--weiss)}
.tacho__text small{display:block;font:400 15px/21px var(--ui);color:var(--label)}

/* ---------------------------------------------------------------- Klappzeilen */

.pruefung{--akzent-zeile:var(--gruen);
  background-color:var(--karte);background-image:var(--karte-glanz);
  border:1px solid var(--karte-rand);border-radius:16px;
  transition:background-color .2s, border-color .2s, transform .2s}
.pruefung--fail{--akzent-zeile:var(--rot-text)}
.pruefung--warning{--akzent-zeile:var(--orange)}
.pruefung--info{--akzent-zeile:var(--blau)}
.pruefung--unknown{--akzent-zeile:var(--label)}
.pruefung:hover{background-color:#2A2B34;border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.pruefung[open]{background-color:#2A2B34}

.pruefung > summary{position:relative;display:flex;align-items:center;gap:1.2rem;cursor:pointer;list-style:none;
  padding:22px 76px 22px 26px;font:700 17px/23.8px var(--kopf);color:var(--weiss)}
.pruefung > summary::-webkit-details-marker{display:none}
.pruefung .titel{flex:1 1 auto;min-width:0}
.pruefung .tech{color:var(--label);font-size:14px;font-weight:400}
.pruefung .prio{flex:0 0 auto;font:700 12px/1.3 var(--kopf);letter-spacing:3px;text-transform:uppercase;color:var(--akzent-zeile)}

.mehr{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  color:var(--akzent-zeile);background:color-mix(in srgb, var(--akzent-zeile) 15%, transparent);
  display:grid;place-items:center;font:400 18px/1 var(--kopf);transition:transform .2s}
.pruefung[open] .mehr{transform:translateY(-50%) rotate(45deg)}

.detail{padding:0 26px 26px;font:400 16px/1.7 var(--kopf)}
.detail p{margin:.6rem 0}
.detail .befundtext{color:var(--text)}
.detail .tun{background:rgba(170,12,12,.14);border-left:3px solid var(--rot);padding:.9rem 1.1rem;border-radius:8px}
.detail .tun b{color:var(--weiss)}
.detail code{background:rgba(0,0,0,.3);padding:.1rem .4rem;border-radius:4px;font-size:.9em}
.facts{display:grid;gap:.4rem;margin:1rem 0 0;padding:1rem 1.1rem;background:rgba(0,0,0,.3);border-radius:10px;
  font:400 14px/1.6 var(--ui)}
.facts div{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr;gap:.8rem}
.facts dt{color:var(--label);overflow-wrap:anywhere}
.facts dd{margin:0;overflow-wrap:anywhere}

.ok-block{margin-top:12px;max-width:var(--spalte)}
.ok-block > summary{cursor:pointer;list-style:none;color:var(--gruen);
  font:700 12px/1.3 var(--kopf);letter-spacing:3px;text-transform:uppercase;padding:.9rem 0}
.ok-block > summary::-webkit-details-marker{display:none}

/* ---------------------------------------------------------------- Befunde und Meldungen */

.befunde{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:b;max-width:var(--spalte)}
.befund{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  background-color:var(--karte);background-image:var(--karte-glanz);
  border:1px solid var(--karte-rand);border-left:4px solid var(--rot);
  border-radius:16px;padding:18px 22px;transition:background-color .2s, transform .2s}
.befund:hover{background-color:#2A2B34;transform:translateY(-2px)}
.befund--warning{border-left-color:var(--orange)}
.befund .zahl{counter-increment:b;font:900 30px/1 var(--kopf);color:transparent;-webkit-text-stroke:1.5px rgba(255,107,107,.55)}
.befund--warning .zahl{-webkit-text-stroke-color:rgba(243,146,0,.55)}
.befund .zahl::before{content:counter(b,decimal-leading-zero)}
.befund > span{min-width:0}
.befund a{color:var(--weiss);text-decoration:none;display:block;font:700 17px/23.8px var(--kopf)}
.befund a:hover{color:var(--rot-text)}
.befund small{display:block;color:var(--label);font:400 15px/1.6 var(--ui);overflow-wrap:anywhere}

.meldung{margin:1.5rem 0 0;padding:1.6rem 1.8rem;border-left:4px solid var(--label);border-radius:16px;
  background-color:var(--karte);background-image:var(--karte-glanz);max-width:var(--spalte)}
.meldung--fail{border-left-color:var(--rot);background-color:rgba(170,12,12,.14)}
.meldung--warning{border-left-color:var(--orange)}
.meldung h2{font-size:24px;margin-bottom:.4rem}
.meldung ul{margin:.5rem 0 0;padding-left:1.2rem}

.leer{padding:22px 26px;background-color:var(--karte);background-image:var(--karte-glanz);
  border:1px solid var(--karte-rand);border-radius:16px;color:var(--text);max-width:var(--spalte)}
.aktionen{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.aktionen form{display:contents}

.nicht-relevant{margin-top:2.5rem}
.nicht-relevant > summary{cursor:pointer;color:var(--label);font:700 12px/1.3 var(--kopf);letter-spacing:3px;text-transform:uppercase}
.nicht-relevant ul{margin:1rem 0 0;padding-left:1.2rem;font-size:16px}

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

/* Schmale Zeile mit Urheberrecht und den Pflichtangaben (DEC-056). */
/*
 * Fußbereich wie der untere Riegel auf webasmedia.de, am 29.10.2026 dort gemessen (DEC-056):
 * roter Strich darüber, Urheberrecht in Open Sans 400 12px, die Pflichtseiten in Open Sans 700
 * 11px, Laufweite 1,2px, Versalien, getrennt durch einen roten Mittelpunkt.
 */
/*
 * Trennlinie über dem Fußbereich (07_Frontend_UX.md §137.14). 2px statt der früheren 3px.
 *
 * Die Linie ist kein gleichmäßiger Balken: Links steht das Rot voll, nach rechts läuft es
 * aus. Darunter liegt ein schwacher roter Schein, der nur die linke Seite anhebt – dieselbe
 * Geste wie der Schein oben rechts im Hero, nur gespiegelt.
 *
 * Darüber läuft alle 7 Sekunden ein heller Punkt einmal durch und pausiert dann. Ein
 * ununterbrochen wandernder Punkt zöge den Blick beim Lesen immer wieder nach unten.
 */
/* Beide Scheine wie im Footer von webasmedia.de (Vorlage 5904): Rot links bei 18 %,
   Petrol rechts bei 88 %. Die Ellipsen sind höher als der schmale Fußbereich, damit der
   Ausschnitt dem der Website entspricht. */
.fussbereich{position:relative;
  background-image:
    radial-gradient(ellipse 40% 180% at 18% 0%, rgba(170,12,12,.14), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 35% 160% at 88% 0%, rgba(38,83,102,.18), rgba(0,0,0,0) 70%)}
.fussbereich::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 35%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,.35) 65%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg,
      var(--rot) 0%,
      color-mix(in srgb, var(--rot) 70%, transparent) 38%,
      color-mix(in srgb, var(--rot) 30%, transparent) 100%);
  background-size:34% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  animation:fuss-strahl 7s ease-in-out infinite}
@keyframes fuss-strahl{
  0%{background-position:-40% 0, 0 0}
  55%{background-position:140% 0, 0 0}
  100%{background-position:140% 0, 0 0}
}
@media (prefers-reduced-motion:reduce){
  .fussbereich::before{animation:none;background-position:140% 0, 0 0}
}
.fussbereich .container{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;
  padding-block:22px;font:400 12px/20.4px var(--kopf);color:rgba(255,255,255,.6)}
.fussbereich .rechtlich{display:flex;align-items:center;gap:9px}
.fussbereich .rechtlich .strich{color:var(--rot);margin-right:9px}
.fussbereich .rechtlich a{color:var(--rot);text-decoration:none;
  font:700 11px/15.4px var(--kopf);letter-spacing:1.2px;text-transform:uppercase;
  transition:color .2s}
.fussbereich .rechtlich a + a::before{content:"·";margin-right:9px;color:var(--rot)}
.fussbereich .rechtlich a:hover{color:var(--weiss)}

/* ---------------------------------------------------------------- Schmale Bildschirme */

@media (max-width:75rem){
  .kontakt b{font-size:17px;line-height:23px}
  .kontakt span{font-size:13px;line-height:18px}
}

@media (max-width:62rem){
  .kontaktzeile{gap:1.2rem}
  .logo img{width:220px;height:92px}
  /* Ohne den Text bleibt nur die Kachel – dann darf auch der Spaltenabstand nicht mehr
     mitzählen. Er stand weiter auf 20px und machte jede Kachel 64px statt 44px breit;
     zwischen den roten Flächen lagen dadurch 25px statt der eingestellten 5px. */
  .kontakt span{display:none}
  .kontakt{column-gap:0}
  .abschnitt{padding-block:70px}
  .abschnitt__nummer{font-size:140px;line-height:140px}
  .ergebniskopf h1,.abschnitt__titel{font-size:34px;line-height:1.12}
  h1{font-size:44px;line-height:1.05}
}

/* Unterhalb dieser Breite reicht der Platz in drei Spalten nicht mehr für eine Zeile. */
@media (max-width:58rem){
  .ueberblick{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:48rem){
  body{font-size:17px}
  /* Kopfzeile bleibt auf dem Handy eine Zeile: Logo links, die beiden Kacheln rechts.
     Vorher brach die Kontaktzeile auf eine eigene Zeile um und kostete 70px Höhe,
     die oben auf dem Bildschirm am teuersten sind (07_Frontend_UX.md §137.15). */
  .kopfleiste .container{flex-wrap:nowrap;gap:.8rem;padding-block:14px 15px}
  .kontaktzeile{flex:0 0 auto;gap:10px}
  .logo img{width:200px;height:84px}
  .menueleiste .container{gap:1rem;min-height:48px}
  /* Der Hero rückt zusammen, damit Überschrift, Feld und Knopf ohne Scrollen dastehen. */
  /* 50px Luft zwischen rotem Balken und Textblock: darunter klebt die Überschrift an der
     Leiste. Kostet Höhe, ist aber ausdrücklich so gewünscht (§137.15). */
  .hero{padding-block:50px 22px}
  .hero .eyebrow{margin:0 0 .5rem}
  .hero .lead{margin:.5rem 0}
  .vertrauen{gap:.3rem .9rem;margin:.9rem 0 0}
  .zaehlerzeile{margin:.9rem 0 0}
  .fussbereich .container{padding-block:12px}
  /* Neben zwei Menüpunkten bleibt nur Platz für die Lupe; der Text bleibt für Screenreader da. */
  .suchknopf{padding:.55rem .7rem}
  .suchknopf span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}
  h1,.ergebniskopf h1,.abschnitt__titel{font-size:30px;line-height:1.12}
  .abschnitt{padding-block:52px}
  .abschnitt__nummer{font-size:96px;line-height:96px;top:24px}
  .bilanz b{font-size:34px}
  .bilanz{gap:1.4rem}
  .pruefung > summary{flex-wrap:wrap;gap:.4rem;padding:18px 62px 18px 20px;font-size:16px}
  .pruefung .prio{flex-basis:100%}
  .detail{padding:0 20px 20px}
  .facts div{grid-template-columns:1fr;gap:0}
  .befund{grid-template-columns:auto 1fr}
  .ueberblick{grid-template-columns:1fr}
  .headerblock{padding:18px 20px}
  .headerblock__alle table,.headerblock__alle tbody,.headerblock__alle tr{display:block}
  .headerblock__alle th,.headerblock__alle td{display:block;width:auto;padding:0}
  .headerblock__alle tr{padding:9px 0}
  .headerblock__alle tr + tr{border-top:1px solid rgba(255,255,255,.05)}
  .headerblock__alle tr + tr th,.headerblock__alle tr + tr td{border-top:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}


/* Hinweis, solange die Ladezeit noch gemessen wird (DEC-071). */
.ladezeit-laeuft{margin:1.2rem 0 0;max-width:60ch;color:var(--text-hell);font:500 15px/1.6 var(--ui)}

/* ---------------------------------------------------------------- Navigation durch die Bereiche

   Dieselbe Liste in zwei Darstellungen (07_Frontend_UX.md §23.1):
   - bis 1419px eine schmale Leiste oben, die beim Scrollen stehen bleibt;
   - ab 1420px ein Feld links neben dem Inhalt, der dort ohnehin Platz lässt.

   Eine Liste, zwei Gewänder – nicht zwei Bausteine, die auseinanderlaufen können. */

.bereichsnav{position:sticky;top:0;z-index:30;background:rgba(26,27,34,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.bereichsnav__titel{display:none}
.bereichsnav ul{display:flex;gap:4px;margin:0 auto;padding:8px 10px;max-width:1140px;
  list-style:none;overflow-x:auto;scrollbar-width:none}
.bereichsnav ul::-webkit-scrollbar{display:none}
.bereichsnav a{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 11px;
  border:1px solid transparent;border-radius:99px;text-decoration:none;
  font:700 11px/1.4 var(--kopf);letter-spacing:1px;text-transform:uppercase;color:var(--text-hell)}
.bereichsnav a:hover{background-color:#2A2B34;border-color:rgba(255,255,255,.14);color:var(--weiss)}
.bereichsnav .punkt{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--akzent)}
.bereichsnav li{--akzent:var(--gruen)}
.bereichsnav li.ist-fail{--akzent:var(--rot-text)}
.bereichsnav li.ist-warning{--akzent:var(--orange)}
.bereichsnav li.ist-unknown{--akzent:var(--label)}
.bereichsnav a[aria-current]{background-color:#2A2B34;border-color:var(--akzent);color:var(--weiss)}

/* Der Bericht ist 1140px breit und mittig. Damit das Feld den Inhalt nicht überlappt, muss links
   Platz für 16px Abstand + 200px Feld + 20px Luft sein: 1140 + 2 × 236 = 1612px. Darunter bleibt
   es bei der Leiste oben – lieber keine Seitennavigation als eine, die über dem Text liegt. */
@media (min-width:1620px){
  .bereichsnav{position:fixed;left:16px;top:50%;transform:translateY(-50%);width:200px;
    padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px}
  .bereichsnav__titel{display:block;margin:0 0 10px;font:700 10px/1.4 var(--kopf);
    letter-spacing:1.4px;text-transform:uppercase;color:var(--label)}
  .bereichsnav ul{display:grid;gap:2px;padding:0;overflow:visible}
  .bereichsnav a{padding:7px 9px;border-radius:8px;font-size:12px;letter-spacing:normal;
    text-transform:none;white-space:normal}
  .bereichsnav a[aria-current]{border-color:transparent;box-shadow:inset 2px 0 0 var(--akzent)}
}

/* Beim Sprung darf die Überschrift nicht hinter der Leiste verschwinden. Ab 1620px steht die
   Navigation seitlich, dann genügt der ursprüngliche Abstand. */
.abschnitt{scroll-margin-top:62px}
@media (min-width:1620px){ .abschnitt{scroll-margin-top:1rem} }

/* Auf dem Handy gehört die Leiste an den unteren Rand (07_Frontend_UX.md §23.1). Dort ist der Daumen, und oben
   nahm sie dem Bericht die ohnehin knappe Höhe. Weil sie dann nicht mehr über der Überschrift
   liegt, genügt auch wieder der normale Sprungabstand. */
@media (max-width:48rem){
  .bereichsnav{position:fixed;top:auto;right:0;bottom:0;left:0;
    border-top:1px solid rgba(255,255,255,.08);border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom)}
  .abschnitt{scroll-margin-top:1rem}
  /* Platz für die Leiste, damit sie das Berichtsende nicht verdeckt. */
  body{padding-bottom:50px}
  .nach-oben{bottom:calc(66px + env(safe-area-inset-bottom))}
}

/* Zähler der bisher geprüften Websites im Seitenmenü (DEC-074). Nur dort, in der schmalen
   Leiste oben wäre dafür kein Platz. */
.bereichsnav__zaehler{display:none}
@media (min-width:1620px){
  .bereichsnav__zaehler{display:block;margin:10px 0 0;padding-top:8px;
    border-top:1px solid rgba(255,255,255,.06);font:500 11px/1.35 var(--ui);color:var(--label)}
  .bereichsnav__zaehler b{font-weight:700;color:var(--label)}
  .bereichsnav__zaehler small{display:block;font:500 11px/1.35 var(--ui);color:var(--label);opacity:.7}
}

/* Was jetzt zu tun ist (DEC-076): eine Liste am Ende statt eines Kastens unter jedem Bereich.
   Zwei Gruppen nach Aufwand, innerhalb nach Wichtigkeit sortiert. */
.tun-block{margin:3.5rem 0 0;padding:2rem 2.2rem;border-radius:16px;
  border:1px solid var(--karte-rand);
  background-color:var(--karte);background-image:var(--karte-glanz)}
.tun-block__titel{margin:0;font:900 28px/1.25 var(--kopf);color:var(--weiss)}
.tun-block__einleitung{margin:.5rem 0 0;font:500 16px/1.6 var(--ui);color:var(--text-hell)}
.tun-block__text{margin:1.8rem 0 1.1rem;font:500 15px/1.6 var(--ui);color:var(--text-hell)}

.tun-gruppe{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--karte-rand)}
.tun-gruppe__kopf{display:flex;align-items:baseline;gap:.9rem;margin:0}
.tun-gruppe__titel{font:800 19px/1.3 var(--kopf);color:var(--weiss)}
.tun-gruppe--quick .tun-gruppe__titel{color:var(--gruen)}
.tun-gruppe--major .tun-gruppe__titel{color:var(--orange)}
.tun-gruppe__anzahl{font:700 11px/1.3 var(--kopf);letter-spacing:2px;text-transform:uppercase;color:var(--label)}
.tun-gruppe__hinweis{margin:.25rem 0 .9rem;font:500 14px/1.5 var(--ui);color:var(--label)}

.tunliste{margin:0;padding:0;list-style:none}
.tunliste__zeile{--akzent-zeile:var(--label);
  display:flex;align-items:baseline;gap:.9rem;padding:.55rem 0 .55rem .9rem;
  border-left:3px solid var(--akzent-zeile)}
.tunliste__zeile + .tunliste__zeile{border-top:1px solid rgba(255,255,255,.05)}
.tunliste__zeile--fail{--akzent-zeile:var(--rot-text)}
.tunliste__zeile--warning{--akzent-zeile:var(--orange)}
.tunliste__zeile--pass{--akzent-zeile:var(--gruen)}
.tunliste__zeile a,.tunliste__name{flex:1 1 auto;min-width:0;font:600 16px/1.45 var(--ui);color:var(--weiss);text-decoration:none}
.tunliste__zeile a:hover{color:var(--gruen)}
.tunliste__prio a{color:inherit;text-decoration:none}
.tunliste__prio a:hover{color:var(--gruen)}
.tunliste__loeschform{display:inline}
.tunliste__loeschen{display:inline;border:0;padding:0;margin:0 0 0 .8em;background:none;cursor:pointer;
  font:inherit;color:inherit}
.tunliste__loeschen:hover{color:var(--rot-text)}
.tunliste__bereich{flex:0 0 auto;font:500 13px/1.4 var(--ui);color:var(--label)}
.tunliste__prio{flex:0 0 auto;min-width:92px;text-align:right;
  font:700 11px/1.4 var(--kopf);letter-spacing:2px;text-transform:uppercase;color:var(--akzent-zeile)}

@media (max-width:700px){
  .tun-block{padding:1.5rem 1.3rem}
  .tun-block__titel{font-size:23px}
  .tunliste__zeile{flex-wrap:wrap;gap:.3rem .8rem}
  .tunliste__zeile a,.tunliste__name{flex:1 1 100%}
  .tunliste__prio{min-width:0;text-align:left}
}

/* Vergleich zweier Berichte (DEC-080). Zwei Spalten nebeneinander, auf dem Handy untereinander. */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2rem 0 0}
.gegenueber__seite{padding:1.2rem 1.4rem;border-radius:14px;
  border:1px solid var(--karte-rand);background-color:var(--karte);background-image:var(--karte-glanz)}
.gegenueber__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin:0 0 .8rem;
  font:800 13px/1.3 var(--kopf);letter-spacing:2.5px;text-transform:uppercase;color:var(--weiss)}
.gegenueber__kopf span{font:500 13px/1.3 var(--ui);letter-spacing:normal;text-transform:none;color:var(--label)}
.gegenueber__noten{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin:1rem 0 0}
.note{display:flex;align-items:baseline;gap:.45rem;font:500 13px/1.4 var(--ui);color:var(--label)}
.note b{font:900 20px/1 var(--kopf);color:var(--akzent)}
.note--pass{--akzent:var(--gruen)}
.note--warning{--akzent:var(--orange)}
.note--fail{--akzent:var(--rot-text)}
.note--info{--akzent:var(--blau)}

.vergleich-gruppe{margin-top:1.6rem}
.vergleich-gruppe--behoben .tun-gruppe__titel{color:var(--gruen)}
.vergleich-gruppe--neu .tun-gruppe__titel{color:var(--rot-text)}
.vergleich-gruppe--offen .tun-gruppe__titel{color:var(--orange)}

.vergleich-form{margin:3rem 0 0;max-width:var(--spalte)}
.vergleich-form label{display:block;margin-bottom:.6rem;color:var(--weiss);
  font:700 12px/1.3 var(--kopf);letter-spacing:3px;text-transform:uppercase}
.vergleich-form__row{display:flex;flex-wrap:wrap;gap:.8rem}
.vergleich-form__row .scan-form__input{flex:1 1 18rem}

@media (max-width:48rem){
  .gegenueber{grid-template-columns:1fr}
}

/* Zähler auf der Startseite (DEC-074). */
.zaehlerzeile{margin:1.6rem 0 0;font:500 15px/1.5 var(--ui);color:var(--text-hell)}
.zaehlerzeile b{font:900 20px/1 var(--kopf);color:var(--gruen)}
.zaehlerzeile span{color:var(--label)}

/*
 * Druck und PDF (DEC-081).
 *
 * Statt jede dunkle Fläche einzeln aufzuhellen, werden die Farbvariablen umdefiniert: Aus dem
 * dunklen Grund wird Weiß, aus weißer Schrift Schwarz. Das trifft auch die Stellen, die man
 * beim Durchsehen übersieht – und bleibt richtig, wenn später neue Bausteine dazukommen.
 * Die Akzentfarben für Problem, Verbesserung und Hinweis bleiben, sie tragen Bedeutung.
 *
 * Die Klappzeilen öffnet `druckVorbereiten()` in scanner.js, bevor der Druck beginnt.
 * Ohne JavaScript blieben rund 80 von 87 Prüfungen auf dem Papier eine bloße Überschrift.
 */
@media print{
  :root{
    --grund:#fff;
    --karte:#fff;
    --karte-glanz:none;
    --karte-rand:#999;
    --weiss:#000;
    --text:#1a1a1a;
    --text-hell:#333;
    --label:#555;
  }

  /* Alles, was am Bildschirm führt: Menü, Navigation, Formulare, Knöpfe. */
  .menueleiste,.kontaktzeile,.aktionen,.scan-form,.skip-link,.fussbereich,.abschnitt__nummer,
  .hero::after,.suchleiste,.nach-oben,.erneut-klein,.bereichsnav,.vergleich-form,
  .zaehlerzeile,.ladezeit-laeuft{display:none}

  body{background:#fff;font-size:11pt}
  .hero,.abschnitt,.ergebniskopf{background-image:none}
  .abschnitt{padding-block:24px}

  /* Der Ring ist eine helle Linie auf dunklem Grund – auf Papier bliebe er unsichtbar. */
  .tacho__spur{stroke:#ddd}

  /* Nichts soll mitten durch einen Kasten umbrechen. */
  .pruefung,.befund,.tun-block,.vergleich-gruppe,.gegenueber,.gegenueber__seite,
  .tunliste__zeile,.tacho{break-inside:avoid}
  a[href]{text-decoration:none}
}