/* ---------------------------------------------------------------------------
   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);
}

.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(3, 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;
}

/* ---------- 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;
}

/* 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. */
.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;
    }

    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;
    }

    .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;
    }
}