/* ---------------------------------------------------------------------------
   KI-Sichtbarkeits-Check: Gestaltung nach waterproof.agency

   Farben, Schriften und Größenskala stammen aus dem Design-System der
   Hauptseite (Tokens --prim-*), damit der Check als Teil derselben Marke
   erkennbar ist. Die Schriften liegen lokal, kein CDN und keine Anfrage an
   Dritte: der Check verspricht Datensparsamkeit, das gilt auch für Fonts.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: "Space Grotesk";
    src: url("/assets/fonts/spacegrotesk-variable-latin.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-variable-latin.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/jetbrainsmono-variable-latin.woff2") format("woff2-variations");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Farben aus dem Design-System der Hauptseite */
    --navy: #0e1116;
    --navy-deep: #07090c;
    --navy-alt: #1c1f26;
    --green: #05e06e;
    --green-dark: #04c862;
    --green-darkest: #02783c;
    /* Grüner Text auf hellem Grund. Nachgedunkelt von #05866e: der alte Wert
       kam auf --bg nur auf 4,33:1 und auf --bg-alt auf 4,05:1, beide unter der
       Schwelle von 4,5. Betroffen war fast jedes Label der Seite, von den
       Eyebrows über den Gesamtscore bis zu den Hebel-Beschriftungen. Der neue
       Wert liegt auf allen vier Untergründen des Projekts über 4,7. */
    --green-text: #06795f;
    --green-ink: #0a1f14;
    --green-light: #4fe990;
    --green-lightest: #f0faf4;
    --orange: #ffb347;
    --yellow: #f5b301;
    --bg: #fafaf7;
    --bg-alt: #f1f3ee;
    --bg-warm: #f5f1ea;
    --white: #ffffff;
    --text-body: #1c1f26;
    --text-sec: #5a6270;
    --divider: #e3e5e0;
    --red: #e5484d;

    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Manrope", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Größenskala der Hauptseite */
    --size-display: 4.5rem;
    --size-h1: 4rem;
    --size-h2: 3.25rem;
    --size-h3: 2.5rem;
    --size-h4: 2rem;
    --size-lg: 1.125rem;
    --size-sm: 0.875rem;
    --size-xs: 0.75rem;

    --section-padding: 5rem;
    --container-max: 1280px;
    --container-padding: 4rem;

    /* Feines Raster wie auf waterproof.agency: Struktur ohne Dekoration */
    --raster: linear-gradient(to right, rgba(28, 31, 38, 0.028) 1px, transparent 1px),
              linear-gradient(to bottom, rgba(28, 31, 38, 0.028) 1px, transparent 1px);
    --raster-size: 88px 88px;
}

/* ---------- Reset / Basis ---------- */

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

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

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 1rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: inherit;
    text-decoration: none;
}

main {
    display: block;
}

/* ---------- Layout ---------- */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section {
    padding: var(--section-padding) 0;
}

.section--alt {
    background: var(--bg-alt);
}

.section--dark {
    background: var(--navy);
    color: var(--white);
}

/* ---------- Eyebrow / Labels ---------- */

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-text);
    margin: 0 0 1.25rem;
}

.section--dark .eyebrow {
    color: var(--green);
}

.section-title {
    font-size: 3.25rem;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.section-intro {
    max-width: 42rem;
    font-size: 1.125rem;
    color: rgba(14, 17, 22, 0.72);
    margin-bottom: 3rem;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: 0.875rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
    background: var(--green);
    color: var(--navy);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--green-dark);
    color: var(--navy);
}

.btn--dark {
    background: var(--navy);
    color: var(--white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
    background: var(--green-darkest);
    color: var(--white);
}

/* ---------- Site-Header ---------- */

.site-header {
    background: var(--bg);
    color: var(--text-body);
    border-bottom: 1px solid var(--divider);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--text-body);
}

.brand__mark {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--green);
    flex: 0 0 auto;
}

.site-header__cta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-text);
    padding: 0.5rem 0;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
    color: var(--green-text);
}

/* ---------- Hero ---------- */

.hero {
    background-color: var(--bg);
    background-image: var(--raster);
    background-size: var(--raster-size);
    color: var(--text-body);
    padding: calc(var(--section-padding) * 1.4) 0 var(--section-padding);
    border-bottom: 1px solid var(--divider);
}

/* Dunkles Gegenstück für einzelne Bänder, damit die Seite Rhythmus behält.
   Die Grundregel steht weiter oben, hier nur die Textfarben darin. */
.section--dark .section-title,
.section--dark .hero__title {
    color: var(--white);
}

.section--dark .section-intro,
.section--dark p {
    color: rgba(255, 255, 255, 0.78);
}

.section--dark .eyebrow {
    color: var(--green);
}

/* Karten behalten ihren hellen Grund auch im dunklen Abschnitt (.card,
   Zeile ~419), darum brauchen sie hier eigene, dunkle Textfarben statt der
   hellen Vorgabe von .section--dark p oben. */
.section--dark .card__title {
    color: var(--text-body);
}

.section--dark .card__text {
    color: rgba(14, 17, 22, 0.72);
}

.hero__title {
    font-size: var(--size-h1);
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: 52rem;
    margin-bottom: 1.5rem;
}

.hero__title em {
    font-style: normal;
    color: var(--green-text);
}

.hero__sub {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--text-sec);
    max-width: 44rem;
    margin-bottom: 2.5rem;
}

/* Hero-Formular: ein Feld + Button */
.hero-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 36rem;
    margin-bottom: 1rem;
}

.hero-form__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.875rem 1.125rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--navy);
    background: var(--white);
    border: 1px solid var(--white);
    border-radius: 0;
    outline: none;
}

.hero-form__input::placeholder {
    color: rgba(14, 17, 22, 0.45);
}

.hero-form__input:focus {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green);
}

.hero-form .btn {
    flex: 0 0 auto;
}

.hero__hint {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-sec);
    margin: 0;
}

/* ---------- Schritte ("So funktioniert es") ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.steps__item {
    border-top: 2px solid var(--green);
    padding-top: 1.5rem;
}

.steps__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
}

.steps__title {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.steps__text {
    color: rgba(14, 17, 22, 0.72);
    margin: 0;
}

/* ---------- Karten ("Was du bekommst") ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card__tag {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-darkest);
    background: var(--green-lightest);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
}

.card__title {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.card__text {
    color: rgba(14, 17, 22, 0.72);
    margin: 0;
}

/* ---------- FAQ ---------- */

.faq {
    max-width: 48rem;
}

.faq__item {
    border-bottom: 1px solid var(--divider);
}

.faq__item:first-child {
    border-top: 1px solid var(--divider);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--green-dark);
    flex: 0 0 auto;
}

.faq__item[open] .faq__question::after {
    content: "-";
}

.faq__answer {
    padding: 0 0 1.5rem;
    color: rgba(14, 17, 22, 0.72);
    max-width: 40rem;
}

.faq__answer p {
    margin: 0;
}

/* ---------- Abschluss-CTA ---------- */

.cta-band {
    background: var(--navy);
    color: var(--white);
    text-align: center;
    padding: var(--section-padding) 0;
}

/* Das Band ist dunkel, traegt aber nicht die Klasse .section--dark, deshalb
   griff deren Farbumkehr hier nicht: der Eyebrow stand in der dunklen
   Textfarbe fuer hellen Grund auf Navy und kam auf 3,5:1. */
.cta-band .eyebrow {
    color: var(--green);
}

.cta-band .section-title {
    color: var(--white);
}

.cta-band__text {
    color: rgba(255, 255, 255, 0.72);
    max-width: 36rem;
    margin: 0 auto 2rem;
}

/* ---------- Symbole ---------- */

/* Ein Inline-Sprite am Seitenanfang, danach kostet ein Symbol eine Zeile.
   Kein fremder Host, kein Build-Schritt, keine Icon-Schrift.

   Grundregel, die im ganzen Report gilt: ein Symbol steht NEBEN seinem Text,
   nie an dessen Stelle. Ein abstraktes Zeichen ohne Beschriftung verlangt
   eine Uebersetzung, die der Leser nicht gelernt hat. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex: none;
}

.icon--gut {
    color: var(--green-dark);
}

.icon--offen {
    color: var(--text-sec);
}

/* ---------- Kaufsituations-Raster ---------- */

/* Die Kernaussage als Bild: ein Feld je gepruefter Kaufsituation.
   Gefuellt heisst genannt, leer heisst die KI empfiehlt jemand anderen.

   Farbe markiert das Erreichte, nie das Fehlende. Ein rotes Raster waere der
   Angst-Score, von dem sich dieses Produkt ausdruecklich abgrenzt; das leere
   Feld traegt stattdessen einen Umriss und ein Kreuz. */
.raster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    max-width: 30rem;
}

.raster__feld {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    /* Abgeleitet aus --text-sec statt --divider: mit der Trennlinienfarbe
       war der Umriss so hell, dass das Raster aus zwei Metern wie eine Reihe
       gruener Felder mit Luecken aussah, statt wie ein Feld je Kaufsituation.
       Immer noch neutral, kein Warnton. */
    border: 2px solid rgba(90, 98, 112, 0.4);
    color: var(--text-sec);
    font-size: 0.875rem;
}

.raster__feld--voll {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.raster__legende {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}

/* ---------- Skala mit Schwellen ---------- */

/* Loest drei Dinge auf einmal: sie zeigt den Wert, macht die Schwellen 70
   und 40 sichtbar (die sonst unsichtbar im Code stecken) und liefert den
   Bezugsrahmen aus dem Messinstrument selbst. Einen Branchendurchschnitt hat
   dieser Check nicht gemessen, also behauptet er auch keinen.

   Als Vektor, weil Tick-Positionen und Beschriftung sonst ein halbes Dutzend
   absolut gesetzter Elemente braeuchten. */
.skala {
    display: block;
    width: 100%;
    max-width: 26rem;
    height: auto;
    margin: 0 0 1.5rem;
}

.skala__spur {
    fill: var(--divider);
}

.skala__fuellung {
    fill: var(--green-dark);
}

/* Die Schwellen sind das, was dem Leser fehlt. Sie muessen ueber die Spur
   hinausragen, sonst verschwimmen sie mit ihr. */
.skala__tick {
    stroke: var(--navy);
    stroke-width: 1.5;
}

.skala__marke {
    fill: var(--navy);
}

.skala__schwelle {
    fill: var(--navy);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
}

.skala__label {
    fill: var(--text-sec);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.08em;
}

/* Der Wert des kostenlosen Teils. Als graue Monozeile unter der
   Transparenzangabe sah dieser Satz aus wie Kleingedrucktes und wurde
   ueberlesen; er traegt aber die einzige Preisangabe, die vor dem Angebot
   faellt. */
.wert-anker {
    max-width: 34rem;
    margin: 0 0 2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--green-dark);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-body);
}

/* ---------- Struktur-Checkliste ---------- */

/* Die einzige Herleitung, die vollstaendig auf die Seite darf: fuenf
   Ja-Nein-Fragen zu je zwanzig Punkten. Damit ist "40 von 100" keine
   Behauptung mehr, sondern eine Liste zum Nachzaehlen. Offen und nicht
   eingeklappt, denn fuenf Zeilen sind keine Zumutung. */
.checkliste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.375rem;
}

.checkliste__zeile {
    display: grid;
    grid-template-columns: 1rem 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-sec);
}

.checkliste__zeile--gut {
    color: var(--text-body);
}

.checkliste__zeile--gut .icon {
    color: var(--green-dark);
}

.checkliste__stand {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

/* ---------- Offene Strecke statt Zensur ---------- */

/* Nicht "mangelhaft", sondern eine Strecke, die noch offen ist. Alle
   Segmente leer, weil umgesetzt bisher nichts ist. Die Zahl steht daneben,
   das Bild traegt sie nur. */
.fortschritt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.625rem;
}

/* Kraeftiger als in der ersten Fassung. Sechs duenne Haarlinien lasen sich
   wie Dekoration; sie sollen aber eine Strecke zeigen, die offen ist. */
.fortschritt__segment {
    width: 2.5rem;
    height: 0.75rem;
    border: 2px solid var(--green-dark);
}

.fortschritt__text {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    color: var(--text-body);
    margin: 0 0 2rem;
}

/* Die eigene Zeile im Regal unterschied sich bisher nur durch Farbe und
   Fettung. Ein Wort daneben findet sie auch, wer ausdruckt. */
.badge--eigen {
    background: var(--green-dark);
    color: var(--white);
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.5rem 0;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-footer__note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin: 0;
}

.site-footer__copy {
    font-size: 0.875rem;
    margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    :root {
        --section-padding: 3rem;
        --container-padding: 1.25rem;
    }

    .section-title {
        font-size: 2.25rem;
    }

    .hero__title {
        font-size: 2.5rem;
    }

    .hero__sub {
        font-size: 1.125rem;
    }

    .hero-statement {
        font-size: 1.375rem;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cards {
        grid-template-columns: 1fr;
    }
}

/* Kleine Screens (≤ 480 px): Formular stapelt sich, kein Overflow */
@media (max-width: 480px) {
    .hero-form {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-form .btn {
        width: 100%;
        text-align: center;
    }

    .site-header__inner {
        flex-wrap: wrap;
    }
}

/* ---------- Ergebnisseite (TASK-07) ---------- */

/* Kopf-Aussage (T4b): ein Satz aus den eigenen Audit-Daten trägt den Kopf,
   statt einer Zahl ohne Bezugsrahmen. Steht über dem Gesamtscore. */
.hero-statement {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--navy);
    max-width: 40rem;
    margin: 0 0 1rem;
}

/* Gesamtscore im Hero. Grundfarben gelten für hellen Grund, die Umkehrung
   für dunkle Abschnitte steht weiter unten bei .section--dark. Umgekehrt
   gedacht wäre der Text auf der Ergebnisseite unsichtbar, weil ihr Hero
   hell ist. */
.result-score {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1rem;
}

.result-score__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 6rem;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--green);
}

.result-score__max {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-sec);
    line-height: 1.4;
}

/* Textliche Einordnung neben dem Gesamtscore (T4b): eine Stufe auf der
   0-100-Skala des Checks selbst, kein gemessener Branchen-Vergleich. */
.result-score__level {
    align-self: center;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    color: var(--text-sec);
    border: 1px solid var(--divider);
    padding: 0.3125rem 0.75rem;
}

/* Ankerfrage im Kopf (T4a/T4b): eigene Zeile für die breiteste, offensicht-
   lichste Frage ihrer Kategorie, getrennt von der Aussage darüber. */
.hero-anchor {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-sec);
    max-width: 40rem;
    margin: 0 0 2rem;
}

.hero-anchor strong {
    color: var(--text-body);
    font-weight: 700;
}

/* Transparenz-Zeile im Hero: Datum, Fragenzahl, Betriebsart je Engine. */
.result-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-sec);
    margin: 0;
}

/* Vier Score-Karten */
.score-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.score-card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.score-card__name {
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.score-card__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}

.score-card__max {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(14, 17, 22, 0.5);
    margin-left: 0.25rem;
}

.score-card__bar {
    display: block;
    height: 0.375rem;
    background: var(--divider);
    margin: 0.25rem 0 0.5rem;
}

.score-card__bar-fill {
    display: block;
    height: 100%;
    background: var(--green-dark);
}

.score-card__text {
    font-size: 0.875rem;
    color: rgba(14, 17, 22, 0.72);
    margin: 0;
}

.score-card__hint {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: rgba(14, 17, 22, 0.5);
    margin: 0;
}

/* Zwischenüberschrift auf der Ergebnisseite */
.result-subtitle {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    margin: 2.5rem 0 1rem;
}

/* Schlichte Datentabelle (Engine-Aufschlüsselung) */
.table {
    width: 100%;
    max-width: 48rem;
    border-collapse: collapse;
    background: var(--white);
}

/* Drei Maßnahmen der bezahlten Stufe. Nummer, Befund, Schritte, Fußzeile.
   Bewusst als Karte gesetzt: Der Leser arbeitet sie nacheinander ab. */
.massnahmen {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    max-width: 48rem;
}

.massnahme {
    background: var(--white);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--green);
    padding: 1.5rem;
}

.massnahme__titel {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    line-height: 1.3;
}

.massnahme__rang {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--green-text);
}

.massnahme__befund {
    margin: 0 0 0.875rem;
    color: var(--ink-muted, inherit);
}

.massnahme__schritte {
    margin: 0 0 0.875rem;
    padding-left: 1.125rem;
}

.massnahme__schritte li {
    margin-bottom: 0.375rem;
}

.massnahme__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--divider);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Kennzeichnung eines Wettbewerbers, den die Marktrecherche unabhängig
   bestätigt hat. Bewusst zurückhaltend: Die Zahl daneben trägt die Aussage. */
.badge {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.75rem;
    background: var(--green-lightest);
    color: var(--green-text);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 0.05em;
}

.table th,
.table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}

.table th {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(14, 17, 22, 0.55);
}

.table tr:last-child td {
    border-bottom: 0;
}

/* Inline-Balken in Tabellenzellen */
.bar {
    display: inline-block;
    width: 6rem;
    height: 0.375rem;
    background: var(--divider);
    margin-right: 0.75rem;
    vertical-align: middle;
}

.bar__fill {
    display: block;
    height: 100%;
    background: var(--green-dark);
}

/* Original-Zitate */
.quote {
    background: var(--white);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--green-dark);
    border-radius: 0;
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    max-width: 48rem;
}

.quote__engine {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-darkest);
    background: var(--green-lightest);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}

.quote__text {
    margin: 0;
    font-size: 1.0625rem;
}

/* Priorisierte Hebel (nummeriert, im Stil der .steps) */
.hebel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: hebel;
    max-width: 48rem;
}

.hebel-list__item {
    counter-increment: hebel;
    border-top: 2px solid var(--green);
    /* 7rem, nicht 4rem: die Aufschrift „Hebel 01" ist in Mono mit 0.15em
       Sperrung breiter als 64 Pixel und lief sonst unter den ersten
       Buchstaben des Textes. */
    padding: 1.5rem 0 1.5rem 7rem;
    position: relative;
    margin: 0;
}

.hebel-list__item::before {
    content: "Hebel " counter(hebel, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.5rem;
    width: 6rem;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-text);
}

/* Ergebnis-Responsive */
@media (max-width: 900px) {
    .score-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-score__value {
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .score-grid {
        grid-template-columns: 1fr;
    }

    .hebel-list__item {
        padding-left: 0;
        padding-top: 3rem;
    }

    .hebel-list__item::before {
        top: 1.25rem;
    }
}

/* Quellenliste: eigene Auszeichnung. Sie trug bis 16.08.2026 die Klassen der
   Hebel-Liste, wodurch der CSS-Zähler weiterlief und gefundene Webseiten als
   „Hebel 03" bis „Hebel 14" erschienen, also Fundstellen als Empfehlungen. */
.source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 48rem;
    display: grid;
    gap: 0.25rem;
}

.source-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--divider);
    font-size: 0.9375rem;
}

.source-list__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sec);
    white-space: nowrap;
}

/* Wettbewerber: Name, Häufigkeit, Fundstelle. Der Beleg gehört an die Zeile,
   sonst steht eine Behauptung ohne Nachweis da. */
.rival-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 48rem;
}

.rival-list__item {
    padding: 1rem 0;
    border-top: 1px solid var(--divider);
}

.rival-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0;
}

.rival-list__name {
    font-weight: 700;
}

.rival-list__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-sec);
    white-space: nowrap;
}

.rival-list__beleg {
    margin: 0.4rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-sec);
}

/* Der Kopf klebt oben. Ohne diesen Abstand verschwindet jedes Sprungziel
   hinter ihm, sobald man einen Ankerlink benutzt. */
[id] {
    scroll-margin-top: 6rem;
}

/* Einschränkung der Aussagekraft. Nicht als Warnung gestaltet, sondern als
   Fußnote: der Wert stimmt, er steht nur auf schmalerer Grundlage. */
.hinweis {
    border-left: 3px solid var(--orange);
    background: var(--bg-warm);
    padding: 0.75rem 1rem;
    margin: 0 0 2rem;
    max-width: 48rem;
    font-size: 0.9375rem;
    color: var(--text-body);
}

/* Die Bedingungen unter dem Aufruf: leise, aber da. Sie nehmen dem Gespräch
   die Schwelle, deshalb stehen sie direkt am Knopf und nicht im Kleingedruckten. */
.cta-band__konditionen {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.72);
    margin: 1rem 0 0;
}

.cta-band__blatt {
    color: var(--green);
    text-decoration: underline;
}

/* Zwei gleichrangige Knoepfe nebeneinander. Der zweite ist kein Trostpreis:
   wer den Check macht, entscheidet selten allein, und ein Blatt zum Vorlegen
   ist fuer viele der naechste ehrliche Schritt. Vorher stand es als
   Kleinschrift unter den Konditionen und wurde entsprechend selten geklickt. */
.cta-band__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 0;
}

.cta-band__aktionen .btn--outline {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.45);
}

.cta-band__aktionen .btn--outline:hover,
.cta-band__aktionen .btn--outline:focus-visible {
    border-color: var(--green);
    color: var(--green);
}

/* Nur fuer den Druck. Das Aufruf-Band ist dort ausgeblendet; ohne diese
   Zeile endet der ausgedruckte Bericht in einer Sackgasse, und der Leser
   haelt eine Diagnose ohne Absender in der Hand. */
.cta-print {
    display: none;
}

/* Das Blatt zum Weiterreichen: alles auf eine Seite, kompakter als der
   vollständige Report. Auf dem Bildschirm eine gewöhnliche Seite, im Druck
   das eigentliche Format. */
.blatt {
    padding-top: 3rem;
}

.blatt__titel {
    font-size: 2.5rem;
    letter-spacing: -0.03em;
    margin: 0 0 0.25rem;
}

.blatt__meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}

.blatt__aussage {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    max-width: 34rem;
    margin: 0 0 1rem;
}

.blatt__score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.blatt__score-wert {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: var(--green-text);
}

.blatt__score-max,
.blatt__score-stufe {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sec);
}

.blatt__score-stufe {
    border: 1px solid var(--divider);
    padding: 0.2rem 0.5rem;
}

.blatt__teilwerte {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 1.75rem;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sec);
}

.blatt__ueberschrift {
    font-size: 1.125rem;
    margin: 0 0 0.75rem;
}

.blatt__hebel {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
    max-width: 42rem;
}

.blatt__hebel li {
    margin-bottom: 0.6rem;
}

.blatt__hebel-wirkung,
.blatt__hebel-preis {
    display: block;
    font-size: 0.875rem;
    color: var(--text-sec);
}

.blatt__hebel-preis {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.blatt__abschluss {
    border-top: 2px solid var(--green);
    padding-top: 0.75rem;
    font-size: 0.875rem;
    max-width: 42rem;
}

.blatt__rueck {
    font-size: 0.75rem;
    color: var(--text-sec);
    overflow-wrap: anywhere;
}

.blatt__rueck a {
    text-decoration: underline;
}

/* Das Regal: die eigene Marke im selben Maßstab zwischen den Wettbewerbern.
   Vorher stand hier eine Liste fremder Namen, aus der der Leser seine eigene
   Lage nicht ablesen konnte. Die eigene Zeile ist hervorgehoben, trägt aber
   zusätzlich ihren Namen und ihre Zahl: nie nur Farbe. */
.regal-aussage {
    font-size: 1.125rem;
    font-weight: 700;
    max-width: 42rem;
    margin: 0 0 1.5rem;
}

.regal {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: 44rem;
    display: grid;
    gap: 0.4rem;
}

.regal__zeile {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr 2.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0;
}

.regal__name {
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.regal__balken {
    display: block;
    height: 0.75rem;
    background: var(--divider);
}

.regal__fuellung {
    display: block;
    height: 100%;
    background: var(--text-sec);
}

.regal__wert {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    text-align: right;
    color: var(--text-sec);
}

/* Die eigene Zeile: kräftiger Balken, fetter Name, dunkle Zahl. Drei Träger
   derselben Information, damit sie ohne Farbwahrnehmung auffindbar bleibt. */
.regal__zeile--eigen .regal__name {
    font-weight: 700;
}

.regal__zeile--eigen .regal__fuellung {
    background: var(--green);
}

.regal__zeile--eigen .regal__wert {
    color: var(--text-body);
    font-weight: 700;
}

@media (max-width: 600px) {
    .regal__zeile {
        grid-template-columns: 1fr 2.5rem;
    }

    .regal__balken {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* Belege einklappen. Sie bleiben vollständig, das ist die Ehrlichkeit des
   Produkts, aber sie sollen nicht das Erste sein, was der Leser sieht.
   Ohne JavaScript, wie das ganze Projekt. */
.belege {
    border-top: 1px solid var(--divider);
    margin-top: 1rem;
}

.belege__schalter {
    cursor: pointer;
    padding: 1rem 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-text);
    list-style: none;
}

.belege__schalter::-webkit-details-marker {
    display: none;
}

/* Eigener Pfeil, damit der Zustand ohne Systemmarker erkennbar bleibt. */
.belege__schalter::before {
    content: "+";
    display: inline-block;
    width: 1.25rem;
    font-size: 1rem;
}

.belege[open] > .belege__schalter::before {
    content: "\2212";
}

.belege__schalter:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
}

.belege__inhalt {
    padding-bottom: 1rem;
}

/* Kaufsituationen je Kategorie. Der Ueberblick, den der Leser vorher aus
   einer Tabelle mit zehn Zeilen selbst zusammensuchen musste. Der Balken ist
   Zugabe, die Zahl daneben traegt die Aussage: nie nur Farbe. */
.kategorie-liste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-width: 42rem;
    display: grid;
    gap: 0.5rem;
}

.kategorie-liste__item {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.kategorie-liste__name {
    font-weight: 700;
    font-size: 0.9375rem;
}

.kategorie-liste__balken {
    display: block;
    height: 0.5rem;
    background: var(--divider);
}

.kategorie-liste__fuellung {
    display: block;
    height: 100%;
    background: var(--green);
}

.kategorie-liste__wert {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sec);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .kategorie-liste__item {
        grid-template-columns: 1fr auto;
    }

    .kategorie-liste__balken {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* Hebel: Titel trägt die Aussage, Wirkung und Aufwand stehen als Fakten
   darunter. Der Preis gehört dazu, weil ein Hebel ohne Preis keine
   Entscheidung erlaubt. */
.hebel-list__titel {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
}

.hebel-list__grund {
    margin: 0 0 0.75rem;
    color: var(--text-sec);
}

.hebel-fakten {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
}

.hebel-fakten dt {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-text);
    padding-top: 0.2rem;
}

.hebel-fakten dd {
    margin: 0;
}

@media (max-width: 600px) {
    .hebel-fakten {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .hebel-fakten dd {
        margin-bottom: 0.6rem;
    }
}

/* Der technische Grund einer abgelehnten Anfrage: für den Fachmann nachlesbar,
   aber leiser als die Aussage darüber. */
/* Gruene Variante fuer eine Rueckmeldung, die nichts anmahnt. Der orange
   Rand der Grundform liest sich als Warnung; eine bestaetigte Adresse ist
   das Gegenteil davon. */
.hinweis--gut {
    border-left-color: var(--green-dark);
    background: var(--green-lightest);
}

/* Ueberschrift innerhalb eines Hinweises. Die Klasse stand seit TASK-12 im
   Markup und hatte nie eine Regel, weshalb Titel und Text ununterscheidbar
   uebereinander klebten. */
.hinweis__titel {
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.hinweis__grund {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-sec);
}

/* ---------- Landing: Prüf-Fragen, Impact, Betreiber (TASK-09) ---------- */

/* Beispiel-Queries mit Kategorie-Label */
.queries {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.query {
    background: var(--white);
    border: 1px solid var(--divider);
    border-top: 2px solid var(--green);
    border-radius: 0;
    margin: 0;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.query__label {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-darkest);
    background: var(--green-lightest);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
}

.query__text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin: 0;
}

/* Impact-Satz unter den Queries */
.queries-impact {
    max-width: 48rem;
    font-size: 1.25rem;
    line-height: 1.55;
    border-left: 3px solid var(--green-dark);
    padding-left: 1.5rem;
    margin: 0;
}

/* Punkte-Listen (Impact-Sektion, Methodik) */
.impact-points,
.operator-method {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    max-width: 48rem;
}

.impact-points__item,
.operator-method__item {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.75rem;
    margin: 0;
}

.impact-points__item::before,
.operator-method__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45rem;
    width: 0.75rem;
    height: 2px;
    background: var(--green-dark);
}

/* Betreiber-Fakten (E-E-A-T) */
.operator-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.operator-fact {
    border-top: 2px solid var(--green);
    padding-top: 1rem;
    margin: 0;
}

.operator-fact__value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.operator-fact__label {
    display: block;
    color: rgba(14, 17, 22, 0.72);
}

.operator-impressum {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    margin-top: 2.5rem;
}

.operator-impressum a {
    color: var(--green-dark);
    text-decoration: underline;
}

.operator-impressum a:hover,
.operator-impressum a:focus-visible {
    color: var(--green-darkest);
}

@media (max-width: 900px) {
    .queries {
        grid-template-columns: 1fr;
    }

    .operator-facts {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ---------- Dezente Section-CTAs (TASK-10) ---------- */

/* Abstand des CTA unter dem Section-Inhalt (keine Änderung an .section) */
.section-cta {
    margin: 2.5rem 0 0;
}

/* Ghost-Button: dezente Variante von .btn für CTAs mitten auf der Seite */
.btn--outline {
    background: transparent;
    color: var(--green-darkest);
    border: 1px solid var(--green-dark);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--green-dark);
    color: var(--white);
}

/* ---------- Zusatzfeld im Check-Formular (TASK-12) ---------- */
/* Steht außerhalb des Viewports statt type=hidden/display:none, beides
   erkennen einfache Bots zuverlässig und umgehen das Feld dann. */
.f-confirm {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Druckansicht: Das Ergebnis ist das Dokument, das intern weitergereicht wird
   (Geschäftsführung, Marketing, Agentur). Ohne diese Regeln druckt der Browser
   Navigation, CTA-Band und Farbflächen mit, und die Belegtabellen brechen.
   --------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .cta-band {
        display: none !important;
    }

    .cta-print {
        display: block;
        margin: 1.5rem 0 0;
        padding-top: 0.75rem;
        border-top: 1pt solid #000;
        font-size: 10pt;
        page-break-inside: avoid;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .section,
    .section--alt,
    .hero {
        background: none !important;
        padding: 0.6cm 0 !important;
        page-break-inside: avoid;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    /* Score-Balken sind Farbflächen, im Druck als Zahl lesbar halten */
    .score-card__bar,
    .bar {
        border: 1px solid #666;
    }

    .score-card__bar-fill,
    .bar__fill {
        background: #666 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Gefuellte Rasterfelder muessen im Druck gefuellt bleiben, sonst zeigt
       das Blatt lauter leere Kaestchen und behauptet damit das Gegenteil. */
    .raster__feld--voll,
    .badge--eigen {
        background: #000 !important;
        border-color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .skala__fuellung {
        fill: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .wert-anker {
        border-left-color: #000;
    }

    .raster,
    .skala,
    .checkliste,
    .fortschritt {
        page-break-inside: avoid;
    }

    .table {
        page-break-inside: auto;
    }

    .table tr,
    .quote,
    .score-card,
    .hebel-list__item,
    .rival-list__item {
        page-break-inside: avoid;
    }

    /* Auf Papier gibt es keinen dunklen Grund. Ohne diese Regel blieben
       Skala und Prüf-Zeile weiß auf weiß, weil ihre Farbe am Element steht
       und die Vorgabe an body damit nicht greift. */
    .result-score__max,
    .result-meta,
    .section--dark .result-score__max,
    .section--dark .result-meta {
        color: #333 !important;
    }

    .section--dark .result-score__value {
        color: #000 !important;
    }

    /* Eingeklappte Belege gehoeren auf Papier aufgeklappt: ein gedruckter
       Report kann nichts aufklappen. Chrome verbirgt den Inhalt eines
       geschlossenen details ueber ::details-content, deshalb wird dort
       ausdruecklich sichtbar geschaltet. */
    .belege__schalter {
        color: #333 !important;
    }

    .belege::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
    }

    /* Das Blatt soll auf eine Seite passen. Auf dem Bildschirm ist es
       grosszuegig gesetzt, auf Papier zaehlt jeder Millimeter: engere
       Zeilen, kleinere Ueberschriften, flachere Balken. Gemessen wurde am
       Bildschirm 1.140 Pixel, nutzbar auf A4 sind rund 1.000. */
    .blatt {
        padding: 0 !important;
    }

    .blatt__titel {
        font-size: 18pt;
    }

    .blatt__aussage {
        font-size: 12pt;
        margin-bottom: 0.4cm;
    }

    .blatt__score-wert {
        font-size: 20pt;
    }

    .blatt__teilwerte {
        margin-bottom: 0.5cm;
    }

    .blatt__ueberschrift {
        font-size: 11pt;
        margin-bottom: 0.2cm;
    }

    .blatt__hebel li {
        margin-bottom: 0.25cm;
    }

    .blatt .regal {
        gap: 0.1rem;
        margin-bottom: 0.5cm;
    }

    .blatt .regal__balken {
        height: 0.4rem;
    }

    /* Sechs Zeilen brauchen mehr Platz, als das Blatt hat. Die letzte faellt
       im Druck weg; wer sie sehen will, hat den Link auf das vollstaendige
       Ergebnis am Fuss des Blattes. */
    .blatt .regal__zeile:nth-child(n+6) {
        display: none;
    }

    .blatt__abschluss,
    .blatt__rueck {
        font-size: 9pt;
    }

    /* Quellen sind der Beleg, im Druck muss die Adresse mitkommen */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}

/* Im dunklen Band kehren sich die Textfarben um */
.section--dark .hero__sub,
.section--dark .hero__hint {
    color: rgba(255, 255, 255, 0.78);
}

.section--dark .hero__title em {
    color: var(--green);
}

/* ---------------------------------------------------------------------------
   Navigation, FAQ und Schritte: Bausteine der Inhaltsseiten
   --------------------------------------------------------------------------- */

.site-header__inner {
    gap: 2rem;
}

.site-nav {
    display: flex;
    gap: 1.75rem;
    margin-right: auto;
}

/* Checkbox-Muster fürs Handy-Menü (Regeln unter 900px). Die Liste bleibt
   dabei ein ganz gewöhnliches Flex-Kind von .site-header__inner, genau wie
   zuvor, deshalb ist an .site-nav oben nichts zu ändern. Nur die Checkbox
   und ihr Schalter sind neu, und beide stehen dem Desktop im Weg, wenn sie
   sichtbar oder per Tab erreichbar bleiben. */
.site-nav-toggle-input {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    /* Auf dem Desktop gibt es kein Menü zu öffnen, deshalb hier auch per Tab
       nicht erreichbar. Die Regel unter 900px hebt das wieder auf. */
    visibility: hidden;
}

.site-nav-toggle__button {
    display: none;
}

.site-nav__link {
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--size-sm);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link--aktiv {
    border-bottom-color: var(--green);
}

.site-header__meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-header__cta--stark {
    border: 1px solid var(--text-body);
    padding: 0.5rem 1rem;
    color: var(--text-body);
}

.site-header__cta--stark:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--green-ink);
}

/* Aufklappbare Fragen: ohne JavaScript, damit sie auch dann funktionieren,
   wenn Skripte blockiert sind. KI-Crawler lesen den Inhalt ohnehin. */
.faq {
    display: grid;
    gap: 0.75rem;
    max-width: 52rem;
}

.faq__item {
    background: var(--white);
    border: 1px solid var(--divider);
    padding: 1.25rem 1.5rem;
}

.faq__question {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 500;
    cursor: pointer;
}

.faq__answer {
    margin: 0.75rem 0 0;
    color: var(--text-sec);
}

.section--dark .faq__item {
    background: var(--navy-alt);
    border-color: rgba(255, 255, 255, 0.12);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.step {
    border-top: 2px solid var(--green);
    padding-top: 1.25rem;
}

.step__number {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-text);
    margin: 0 0 0.5rem;
}

.step__title {
    font-family: var(--font-display);
    font-size: var(--size-h6, 1.25rem);
    margin: 0 0 0.5rem;
}

.step__text {
    color: var(--text-sec);
    margin: 0;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.site-footer__nav a {
    font-size: var(--size-sm);
}

@media (max-width: 900px) {
    .site-nav-toggle-input {
        visibility: visible;
    }

    /* Menü-Schalter statt Linkzeile: Für drei Linkziele ist auf dem Handy
       neben Marke und Sprachschalter kein Platz mehr in einer Zeile. */
    .site-nav-toggle__button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-body);
        padding: 0.5rem 0.25rem;
        cursor: pointer;
    }

    /* Die Checkbox selbst bleibt unsichtbar, der sichtbare Ring gehört auf
       das <label> daneben, sonst sieht ein Tastatur-Nutzer den Fokus nie. */
    .site-nav-toggle-input:focus-visible + .site-nav-toggle__button {
        outline: 2px solid var(--green-dark);
        outline-offset: 2px;
    }

    /* Drei Striche aus Rahmenlinien, keine zusätzliche Bilddatei nötig */
    .site-nav-toggle__icon {
        width: 1.125rem;
        height: 0.8rem;
        border-top: 2px solid var(--text-body);
        border-bottom: 2px solid var(--text-body);
        position: relative;
    }

    .site-nav-toggle__icon::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--text-body);
        transform: translateY(-50%);
    }

    /* Grundzustand zu, wie zuvor beim einfachen Ausblenden */
    .site-nav {
        display: none;
    }

    /* Angehakt hängt die Liste als Fläche unter dem klebenden Kopf, statt ihn
       in die Höhe zu schieben. Der Kopf bleibt dadurch an Ort und Stelle
       klickbar, während darunter gescrollt wird. */
    .site-nav-toggle-input:checked ~ .site-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0.5rem var(--container-padding) 1rem;
        background: var(--bg);
        border-bottom: 1px solid var(--divider);
    }

    .site-nav-toggle-input:checked ~ .site-nav .site-nav__link {
        padding: 0.875rem 0;
        border-bottom-color: var(--divider);
    }
}

/* Der Gesamt-Score steht auf hellem Grund: kräftiges Grün statt Signalgrün,
   sonst verschwindet die Zahl im Hintergrund. */
.result-score__value {
    color: var(--green-text);
}

.section--dark .result-score__value {
    color: var(--green);
}

.section--dark .result-score__max,
.section--dark .result-meta {
    color: rgba(255, 255, 255, 0.72);
}

/* Zugehörigkeit zur Agentur im Kopf: Die Subdomain ist für Suchmaschinen eine
   eigene Website, für den Besucher soll sie sichtbar zur Marke gehören. */
.brand {
    align-items: baseline;
    gap: 0.6rem;
}

.brand__von {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-sec);
    font-weight: 400;
}

.brand__agentur {
    color: var(--green-text);
}

@media (max-width: 1100px) {
    .brand__von {
        display: none;
    }
}

/* ---------- Check-Formular (eigene Seite, zwei beschriftete Felder) ---------- */

.check-form {
    max-width: 36rem;
    margin: 0 0 1rem;
}

.check-form__feld {
    margin-bottom: 1.25rem;
}

.check-form__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green-text);
}

.check-form__input {
    display: block;
    width: 100%;
    padding: 0.875rem 1.125rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--navy);
    background: var(--white);
    border: 1px solid var(--white);
    border-radius: 0;
    outline: none;
}

.check-form__input::placeholder {
    color: rgba(14, 17, 22, 0.45);
}

.check-form__input:focus {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green);
}

/* Einwilligung: eine Frage, zwei gleich gewichtete Antworten, keine
   vorangekreuzt. Vorher standen hier zwei gleich aussehende Haken, einer
   Pflicht und einer frei; der Pflichthaken erzog zum Abhaken-und-weiter und
   der freie blieb daneben leer. Ja und Nein muessen gleich prominent sein,
   sonst ist das Ja nicht mehr freiwillig und damit keine Einwilligung. */
.check-form__einwilligung {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
    max-width: 34rem;
    /* fieldset bringt Rahmen, Innenabstand und eine eigene Mindestbreite mit,
       die das Grid im schmalen Viewport sprengt. */
    border: 0;
    padding: 0;
    margin-inline: 0;
    min-inline-size: 0;
}

.check-form__einwilligung > legend {
    padding: 0;
    margin-bottom: 0.25rem;
}

/* Der Satz zur Adresse. Kein Haken, weil er keine Einwilligung ist: den
   angeforderten Bericht an die angegebene Adresse zu schicken ist Erfuellung
   dessen, was bestellt wurde. Er steht trotzdem sichtbar da, weil der
   Nutzer wissen soll, was er gerade erklaert. */
.check-form__rechtssatz {
    margin-top: 1rem;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted, var(--text-body));
}

.check-form__haken {
    display: grid;
    grid-template-columns: 1.125rem 1fr;
    gap: 0.75rem;
    align-items: start;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-body);
    cursor: pointer;
}

.check-form__haken input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1875rem 0 0;
    accent-color: var(--green-dark);
}

.check-form__haken input:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
}

.check-form__aktion {
    margin-top: 1.5rem;
}

.check-form__aktion .btn {
    width: auto;
}

/* ---------- Warteansicht ---------- */

.warten {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin: 2.5rem 0;
}

/* Echte Schritte, aus dem Status der Auswertung. */
.warten-schritte {
    list-style: none;
    margin: 0;
    padding: 0;
}

.warten-schritte__item {
    position: relative;
    padding: 0.75rem 0 0.75rem 2rem;
    border-top: 1px solid var(--divider);
    color: var(--text-sec);
}

.warten-schritte__item:last-child {
    border-bottom: 1px solid var(--divider);
}

.warten-schritte__marke {
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--divider);
}

.warten-schritte__item.is-fertig {
    color: var(--text-body);
}

.warten-schritte__item.is-fertig .warten-schritte__marke {
    background: var(--green);
}

.warten-schritte__item.is-laeuft {
    color: var(--text-body);
}

.warten-schritte__item.is-laeuft .warten-schritte__marke {
    background: var(--green);
    animation: warten-puls 1.4s ease-in-out infinite;
}

@keyframes warten-puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
}

/* Dekorative Betriebsanzeige. Zeigt Arbeit, nicht Verfahren. */
.maschine {
    background: var(--navy);
    color: var(--white);
    padding: 1.25rem 1.5rem 1.5rem;
}

.maschine__kopf {
    margin: 0 0 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green);
}

.maschine__caret {
    display: inline-block;
    width: 0.5rem;
    height: 0.85em;
    margin-left: 0.4rem;
    vertical-align: -0.1em;
    background: var(--green);
    animation: maschine-blinken 1s step-end infinite;
}

@keyframes maschine-blinken {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

.maschine__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.maschine__zeile {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.maschine__label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.maschine__spur {
    display: block;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.maschine__balken {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--green);
    transform-origin: left center;
    animation: maschine-lauf 2.2s ease-in-out infinite;
    animation-delay: var(--verzoegerung, 0s);
}

@keyframes maschine-lauf {
    0%   { transform: scaleX(0); opacity: 0.55; }
    45%  { transform: scaleX(1); opacity: 1; }
    75%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 0.55; }
}

/* ---------- Countdown bis zum nächsten Laden ---------- */

.countdown {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

.countdown__ring {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background:
        conic-gradient(var(--green) var(--fortschritt, 0turn), rgba(14, 17, 22, 0.12) 0);
    animation: countdown-ring var(--countdown-dauer, 5s) linear infinite;
}

.countdown__ring::after {
    content: "";
    position: absolute;
    inset: 0.3125rem;
    border-radius: 50%;
    background: var(--bg);
}

@property --fortschritt {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0turn;
}

@keyframes countdown-ring {
    from { --fortschritt: 1turn; }
    to   { --fortschritt: 0turn; }
}

.countdown__zahl {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.countdown__text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-sec);
}

.countdown__hinweis {
    display: block;
    margin-top: 0.25rem;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .warten {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* Wer Bewegung abbestellt hat, bekommt denselben Inhalt ohne Animation. */
@media (prefers-reduced-motion: reduce) {
    .warten-schritte__item.is-laeuft .warten-schritte__marke,
    .maschine__caret,
    .maschine__balken,
    .countdown__ring {
        animation: none;
    }

    .maschine__balken {
        transform: scaleX(1);
        opacity: 0.8;
    }

    .countdown__ring {
        background: rgba(14, 17, 22, 0.12);
    }
}

/* ---------- Angekuendigte, noch nicht gemessene Zeile ---------- */

.table__zeile--angekuendigt td {
    color: var(--text-sec);
    font-size: 0.9375rem;
}

.marke-bald {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-text);
    border: 1px solid var(--green);
    white-space: nowrap;
}