/*
 * a11ycheck.tc-r.de
 *
 * Gestaltungsidee: ein Messgerät, kein Produktauftritt. Dunkle Konsole,
 * Signalfarbe für alles Interaktive, Monospace für jede Zahl. Die Bewegung
 * (Sweep, hochzählende Werte, aufploppende Marker) soll zeigen, dass hier
 * tatsächlich gearbeitet wird - sie täuscht nichts vor, sondern begleitet
 * Zustände, die es wirklich gibt.
 *
 * Die Seite muss ihren eigenen Test bestehen. Daraus folgen Regeln, die hier
 * nicht verhandelbar sind:
 *   - Kein Schweregrad wird allein über Farbe unterschieden (WCAG 1.4.1). Jeder
 *     trägt zusätzlich Text, eine Nummer und eine eigene Rahmenform.
 *   - Der Fokusring ist deutlich und wird nirgends entfernt (2.4.7).
 *   - Alle Farbpaare liegen über 4.5:1 (1.4.3), geprüft gegen jeden Untergrund,
 *     auf dem sie tatsächlich vorkommen - nicht nur gegen Weiß. Der erste Entwurf
 *     ist genau daran gescheitert: --ink-faint kam auf 3.8 bis 4.4, je nach
 *     Fläche, und das Werkzeug hat es bei sich selbst gefunden. Die jetzigen
 *     Werte halten in beiden Paletten mindestens 4.65 gegen den ungünstigsten
 *     der vier Untergründe.
 *
 *     Das Raster im body ist ein background-image, und dabei kann axe den
 *     Kontrast grundsätzlich nicht bestimmen - der Scan meldet für diese Seite
 *     deshalb dauerhaft eine Regel als "nicht entscheidbar". Nachgerechnet für
 *     den denkbar ungünstigsten Fall, ein Textpixel genau auf einer Rasterlinie:
 *
 *         dunkel  Fließtext 14.67  gedämpft 6.92  schwach 4.81  Signal 10.42
 *         hell    Fließtext 14.78  gedämpft 6.09  schwach 4.70  Signal  4.71
 *
 *     Alles über 4.5:1. Der Befund bleibt trotzdem stehen, und das ist richtig so:
 *     "nicht entscheidbar" heißt, dass ein Mensch hinsehen muss. Hier hat einer
 *     hingesehen.
 *   - Jede Animation verschwindet bei prefers-reduced-motion (2.3.3).
 *   - Nichts scrollt horizontal ohne Tastaturzugang (2.1.1) - deshalb umbrechen
 *     Codeblöcke, statt zu scrollen. Das hat das Werkzeug bei sich selbst
 *     gefunden.
 */

:root {
    color-scheme: dark light;

    --bg: #0a0d12;
    --bg-raised: #111823;
    --bg-panel: #16202c;
    --bg-sunk: #070a0e;

    --line: #23303f;
    --line-bright: #35475c;

    --ink: #e8eff7;
    --ink-dim: #96a7bc;
    --ink-faint: #788aa0;

    --signal: #2fe3c0;
    --signal-deep: #0f9c85;
    --signal-wash: rgba(47, 227, 192, 0.09);
    /* Deckend, nicht durchscheinend: siehe Kommentar am Eyebrow. */
    --chip: #0f2b28;
    --on-signal: #05221d;

    --sev-critical: #ff7062;
    --sev-serious: #ffa64d;
    --sev-moderate: #ffd84a;
    --sev-minor: #93a7bd;

    --sev-critical-wash: rgba(255, 112, 98, 0.13);
    --sev-serious-wash: rgba(255, 166, 77, 0.12);
    --sev-moderate-wash: rgba(255, 216, 74, 0.11);
    --sev-minor-wash: rgba(147, 167, 189, 0.1);

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

    --radius: 6px;
    --shell: 60rem;
}

/* Wer sein System auf hell stellt, bekommt dasselbe Gerät bei Tageslicht. Ein
   Werkzeug für Barrierefreiheit darf niemandem einen Modus aufzwingen. */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f4f6f9;
        --bg-raised: #ffffff;
        --bg-panel: #eef1f6;
        --bg-sunk: #e4e9ef;

        --line: #d4dbe4;
        --line-bright: #b6c1ce;

        --ink: #101823;
        --ink-dim: #4a5768;
        --ink-faint: #5c6876;

        --signal: #0a7463;
        --signal-deep: #095c4f;
        --signal-wash: rgba(10, 122, 104, 0.08);
        --chip: #e3f2ef;
        --on-signal: #ffffff;

        --sev-critical: #c22b1c;
        --sev-serious: #9c5306;
        --sev-moderate: #7a6100;
        --sev-minor: #55616f;

        --sev-critical-wash: rgba(194, 43, 28, 0.09);
        --sev-serious-wash: rgba(156, 83, 6, 0.09);
        --sev-moderate-wash: rgba(122, 97, 0, 0.09);
        --sev-minor-wash: rgba(85, 97, 111, 0.08);
    }
}

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

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.62;
    font-synthesis-weight: none;
    /* Ein schwaches Raster im Hintergrund. Kein Dekor um seiner selbst willen:
       es gibt der Seite den Charakter einer Messfläche, auf der etwas liegt.

       Hier stand zunächst zusätzlich ein radialer Schimmer. Er ist wieder raus:
       ein Verlauf hinter dem Text macht dessen Kontrast unbestimmbar - axe meldet
       dann "nicht entscheidbar" statt eines Werts, und an der stärksten Stelle war
       es tatsächlich zu wenig. Ein Prüfwerkzeug, dessen eigene Seite sich nicht
       messen lässt, ist schwer zu verteidigen. Das Raster besteht aus deckenden
       Linien und stört die Messung nicht. */
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px;
    background-attachment: fixed;
}

/* Das Raster darf den Text nicht stören - deshalb nur ganz schwach. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    body {
        background-image:
            linear-gradient(color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
    }
}

h1,
h2,
h3 {
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0 0 0.55em;
}

h1 {
    font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.6rem);
}

h2 {
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
    margin-top: 2.75rem;
}

h3 {
    font-size: 1.3rem;
    margin-top: 1.9rem;
    letter-spacing: -0.015em;
}

p,
ul,
ol {
    margin: 0 0 1.1rem;
}

a {
    color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-thickness: 2px;
}

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

.a11y-skip {
    position: absolute;
    left: -9999px;
}

.a11y-skip:focus {
    position: fixed;
    inset: 0.75rem auto auto 0.75rem;
    z-index: 20;
    padding: 0.7rem 1.1rem;
    background: var(--signal);
    color: var(--on-signal);
    font-weight: 700;
    border-radius: var(--radius);
}

.a11y-shell,
.a11yscan {
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) 1.25rem 5rem;
}

.a11y-lede {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
    color: var(--ink-dim);
    max-width: 40rem;
}

/* Die kleine Kopfzeile über der Überschrift: Gerätebeschriftung. */
.a11y-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.1rem;
    padding: 0.3rem 0.7rem;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--signal);
    /* Deckend statt durchscheinend. Eine halbtransparente Flaeche mischt sich mit
       allem, was darunter liegt - und damit laesst sich ihr Kontrast weder von
       Hand noch von einem Pruefwerkzeug verlaesslich bestimmen. Der erste Entwurf
       lag an der staerksten Stelle bei 4.24 und axe meldete "nicht entscheidbar";
       nachgerechnet war es tatsaechlich zu wenig. */
    background: var(--chip);
    border: 1px solid var(--signal-deep);
    border-radius: 100px;
}

.a11y-eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--signal);
    animation: a11y-blink 2.4s ease-in-out infinite;
}

@keyframes a11y-blink {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ------------------------------------------------------------------ Konsole */

.a11y-console {
    margin: 2.5rem 0 0;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.a11y-console__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.a11y-console__body {
    padding: 1.5rem;
}

/* ----------------------------------------------------------------- Formular */

.a11y-field {
    display: block;
    margin-bottom: 1rem;
}

.a11y-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.5rem;
}

.a11y-input {
    width: 100%;
    padding: 0.9rem 1rem;
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--ink);
    background: var(--bg-sunk);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius);
}

.a11y-input::placeholder {
    color: var(--ink-faint);
}

.a11y-input:focus-visible {
    border-color: var(--signal);
}

.a11y-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.a11y-row > .a11y-field {
    flex: 1 1 20rem;
    margin-bottom: 0;
}

.a11y-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.6rem;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--on-signal);
    background: var(--signal);
    border: 1px solid var(--signal);
    border-radius: var(--radius);
    cursor: pointer;
}

.a11y-button:hover {
    background: var(--signal-deep);
    border-color: var(--signal-deep);
    color: #fff;
}

/* Kein blosses opacity: das druckt den Kontrast unter 4.5:1. Der Knopf bekommt
   stattdessen eine eigene, gedaempfte Erscheinung und bleibt lesbar. Fuer
   deaktivierte Bedienelemente laesst WCAG zwar eine Ausnahme zu - sie in Anspruch
   zu nehmen, waere in diesem Werkzeug aber ein schlechter Witz. */
.a11y-button[disabled] {
    color: var(--ink-dim);
    background: transparent;
    border-color: var(--line-bright);
    cursor: progress;
}

.a11y-button[disabled]:hover {
    color: var(--ink-dim);
    background: transparent;
    border-color: var(--line-bright);
}

.a11y-hint {
    font-size: 0.9rem;
    color: var(--ink-faint);
    margin-top: 0.65rem;
}

.a11y-consent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 1.35rem 0;
}

.a11y-consent input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.22rem;
    accent-color: var(--signal);
}

/* ------------------------------------------------------------------- Status */

.a11y-status {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg-sunk);
    border: 1px solid var(--line);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 0.92rem;
}

.a11y-status--error {
    border-left-color: var(--sev-critical);
    color: var(--sev-critical);
}

.a11y-status[hidden],
.a11y-stage[hidden],
.a11y-result[hidden],
[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------- Scanbühne */

/* Was während der Prüfung zu sehen ist. Der Balken wandert, die Zeit läuft
   mit - beides bildet einen Vorgang ab, der wirklich stattfindet. Ein
   Prozentwert stünde hier nicht: wie weit ein Scan ist, weiß niemand, und eine
   erfundene Zahl wäre gelogen. */
.a11y-stage {
    position: relative;
    margin-top: 1.75rem;
    min-height: 15rem;
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 2rem,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 2rem 100%,
        var(--bg-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.a11y-stage__sweep {
    position: absolute;
    inset-inline: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, var(--signal-wash) 55%, var(--signal) 99%, transparent);
    opacity: 0.85;
    animation: a11y-sweep 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes a11y-sweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

.a11y-stage__inner {
    position: relative;
    padding: 1.5rem;
}

.a11y-stage__clock {
    font-family: var(--mono);
    font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--signal);
}

.a11y-stage__phase {
    margin: 0.6rem 0 1.25rem;
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--ink-dim);
}

.a11y-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.a11y-steps li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Der Zustand steckt im Zeichen, nicht in der Farbe - ein Häkchen ist auch ohne
   Farbwahrnehmung ein Häkchen. */
.a11y-steps li::before {
    content: "○";
    width: 1rem;
    color: var(--ink-faint);
}

.a11y-steps li[data-state="active"] {
    color: var(--ink);
}

.a11y-steps li[data-state="active"]::before {
    content: "◉";
    color: var(--signal);
}

.a11y-steps li[data-state="done"] {
    color: var(--ink-dim);
}

.a11y-steps li[data-state="done"]::before {
    content: "✓";
    color: var(--signal);
}

@media (prefers-reduced-motion: reduce) {
    .a11y-stage__sweep,
    .a11y-eyebrow::before {
        animation: none;
    }

    .a11y-stage__sweep {
        transform: translateY(60%);
        opacity: 0.4;
    }
}

/* ---------------------------------------------------------------- Ergebnis */

.a11y-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin: 0 0 0.75rem;
}

.a11y-verdict__number {
    font-family: var(--mono);
    font-size: clamp(3.4rem, 2rem + 6vw, 6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: var(--sev-critical);
}

.a11y-verdict__number[data-clean="1"] {
    color: var(--signal);
}

.a11y-verdict__unit {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink-dim);
}

.a11y-scanned {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--ink-faint);
    overflow-wrap: anywhere;
}

.a11y-bars {
    list-style: none;
    margin: 1.75rem 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.a11y-bar {
    display: grid;
    grid-template-columns: 6.5rem 1fr 3ch;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.92rem;
}

.a11y-bar__label {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.a11y-bar__track {
    height: 0.7rem;
    background: var(--bg-sunk);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.a11y-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    background: currentcolor;
    transition: width 0.9s cubic-bezier(0.2, 0.9, 0.3, 1);
}

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

.a11y-bar__count {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink);
}

.a11y-bar--critical { color: var(--sev-critical); }
.a11y-bar--serious  { color: var(--sev-serious); }
.a11y-bar--moderate { color: var(--sev-moderate); }
.a11y-bar--minor    { color: var(--sev-minor); }

/* Zusätzlich zur Farbe eine eigene Rahmenstärke je Grad. */
.a11y-bar--critical .a11y-bar__track { border-color: currentcolor; border-width: 2px; }
.a11y-bar--serious .a11y-bar__track { border-color: currentcolor; }

.a11y-topics {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.a11y-topics li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}

.a11y-topics__meta {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-faint);
    white-space: nowrap;
}

/* ------------------------------------------------------- Seitenfoto + Marker */

.a11y-shot {
    position: relative;
    margin: 2rem 0;
    background: var(--bg-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.a11y-shot__frame {
    position: relative;
    /* Das Bild ist bis zu 5000 px hoch. Es hier zu deckeln hält den Bericht
       lesbar; der Rest ist über den Link zur Seite erreichbar. */
    max-height: 36rem;
    overflow: hidden;
}

.a11y-shot--full .a11y-shot__frame {
    max-height: none;
}

.a11y-shot__canvas {
    position: relative;
    width: 100%;
}

.a11y-shot__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Sanfter Auslauf am unteren Rand des beschnittenen Bildes, damit der Schnitt
   nicht wie ein Ladefehler wirkt. */
.a11y-shot__frame::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 5rem;
    background: linear-gradient(transparent, var(--bg-raised));
    pointer-events: none;
}

.a11y-shot--full .a11y-shot__frame::after {
    display: none;
}

.a11y-marker {
    position: absolute;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 2px solid currentcolor;
    border-radius: 3px;
    cursor: pointer;
    /* Ohne das verschwinden Marker auf hellen Screenshots. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Die Schweregradfarbe steckt in einer eigenen Eigenschaft und nicht nur in
   color. currentcolor fuer den Hintergrund und color am selben Element beissen
   sich: sobald die Beschriftung ihre eigene Textfarbe setzt, faerbt sich auch
   ihr Hintergrund um, und uebrig bleibt ein schwarzer Kasten. */
.a11y-marker--critical { --marker: var(--sev-critical); --marker-wash: var(--sev-critical-wash); }
.a11y-marker--serious  { --marker: var(--sev-serious);  --marker-wash: var(--sev-serious-wash); }
.a11y-marker--moderate { --marker: var(--sev-moderate); --marker-wash: var(--sev-moderate-wash); }
.a11y-marker--minor    { --marker: var(--sev-minor);    --marker-wash: var(--sev-minor-wash); }

.a11y-marker--critical,
.a11y-marker--serious,
.a11y-marker--moderate,
.a11y-marker--minor {
    color: var(--marker);
    background: var(--marker-wash);
}

.a11y-marker__tag {
    position: absolute;
    top: -0.1rem;
    left: -0.1rem;
    transform: translateY(-100%);
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    /* Dunkle Schrift auf der Signalfarbe - alle vier Schweregradtoene sind hell
       genug, dass das ueber 4.5:1 liegt. */
    color: #08111a;
    background: var(--marker);
    border-radius: 2px 2px 0 0;
    /* Standardmaessig aus. Auf einem Bericht mit fuenfzig Fundstellen waeren
       fuenfzig Dauerbeschriftungen ein Knaeuel; sie erscheinen beim Zeigen und
       beim Tastaturfokus. Der Name steht ohnehin in aria-label. */
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.a11y-marker:hover .a11y-marker__tag,
.a11y-marker:focus-visible .a11y-marker__tag {
    opacity: 1;
}

/* Im Teaser sind es nur eine Handvoll Marker - dort duerfen sie sich gleich
   zeigen, denn genau darum geht es an der Stelle. */
.a11y-shot--tagged .a11y-marker__tag {
    opacity: 1;
}

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

/* Marker, deren Inhalt noch hinter dem Bericht liegt: sichtbar, aber stumm. */
.a11y-marker--locked {
    color: var(--ink-faint);
    background: rgba(120, 138, 158, 0.16);
    border-style: dashed;
    border-width: 1px;
    cursor: default;
}

.a11y-marker--pop {
    animation: a11y-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

@keyframes a11y-pop {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .a11y-marker--pop {
        animation: none;
    }
}

.a11y-shot__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--bg-panel);
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-dim);
}

.a11y-shot__toggle {
    margin-left: auto;
    padding: 0.15rem 0.7rem;
    font: inherit;
    color: var(--signal);
    background: transparent;
    border: 1px solid var(--line-bright);
    border-radius: 100px;
    cursor: pointer;
}

/* ----------------------------------------------------------------- Sperre */

.a11y-gate {
    margin-top: 2.5rem;
    padding: 1.75rem;
    background: var(--bg-raised);
    border: 1px solid var(--signal-deep);
    border-radius: var(--radius);
}

.a11y-gate h2 {
    margin-top: 0;
}

.a11y-gate__count {
    font-family: var(--mono);
    color: var(--signal);
    font-weight: 700;
}

/* ------------------------------------------------------------------ Hinweis */

.a11y-caveat {
    margin: 2.75rem 0;
    padding: 1.35rem 1.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    font-size: 0.98rem;
}

.a11y-caveat h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.a11y-caveat > :last-child {
    margin-bottom: 0;
}

.a11y-footer {
    margin-top: 4rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-faint);
}

/* ------------------------------------------------------------------ Bericht */

.a11y-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
    padding: 1.35rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.a11y-meta dt {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ink-faint);
    margin-bottom: 0.3rem;
}

.a11y-meta dd {
    margin: 0;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.a11y-meta dd.a11y-meta__date {
    font-size: 1rem;
    font-weight: 500;
    padding-top: 0.45rem;
}

.a11y-meta__critical { color: var(--sev-critical); }
.a11y-meta__serious { color: var(--sev-serious); }
.a11y-meta__moderate { color: var(--sev-moderate); }
.a11y-meta__minor { color: var(--sev-minor); }

.a11y-criterion {
    margin: 2.5rem 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-bright);
    scroll-margin-top: 2rem;
}

.a11y-criterion__tag {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.2rem 0.6rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--ink-dim);
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 100px;
}

.a11y-finding {
    margin: 1.25rem 0;
    padding: 1.15rem 1.35rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-left: 3px solid currentcolor;
    border-radius: var(--radius);
    scroll-margin-top: 2rem;
}

.a11y-finding--critical { color: var(--sev-critical); }
.a11y-finding--serious  { color: var(--sev-serious); }
.a11y-finding--moderate { color: var(--sev-moderate); }
.a11y-finding--minor    { color: var(--sev-minor); }

.a11y-finding > *,
.a11y-finding p {
    color: var(--ink);
}

.a11y-finding__grade {
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: currentcolor;
    margin-bottom: 0.5rem;
}

.a11y-node {
    margin: 0.85rem 0 0;
    padding-left: 0.9rem;
    border-left: 1px solid var(--line);
}

.a11y-selector,
.a11y-snippet {
    display: block;
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.8rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg-sunk);
    border: 1px solid var(--line);
    border-radius: 3px;
    /* Umbrechen statt scrollen. Der erste Entwurf hatte hier overflow-x: auto,
       und das Werkzeug hat sich dabei selbst erwischt: eine scrollbare Region
       ohne tabindex ist per Tastatur nicht erreichbar (WCAG 2.1.1, axe-Regel
       scrollable-region-focusable). Ein tabindex="0" auf jedem Codeblock wäre die
       Lehrbuchlösung, erzeugt bei zwanzig Fundstellen aber zwanzig zusätzliche
       Tabstopps. Umbrechen löst das Problem an der Wurzel. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.a11y-selector {
    color: var(--signal);
}

.a11y-fix {
    margin: 0.6rem 0 0;
    font-size: 0.94rem;
    color: var(--ink-dim);
}

.a11y-more {
    font-size: 0.88rem;
    color: var(--ink-faint);
}

@media print {
    body {
        background: #fff;
        background-image: none;
        color: #000;
        font-size: 10.5pt;
    }

    .a11y-gate,
    .a11y-skip,
    .a11y-shot__toggle {
        display: none;
    }

    .a11y-shot__frame {
        max-height: none;
    }

    .a11y-criterion,
    .a11y-finding {
        break-inside: avoid;
    }
}