/* ============================================
   100-Tage-Check
   Seite: pages/tools/100-tage-check.html
   Präfix htc-, mobile-first. Formular-Klassen kommen aus whitepaper.css.
   ============================================ */

/* hidden-Attribut gewinnt gegen Komponenten-Display (Formular-Hilfselemente, Buttons) */
.page-htc [hidden] {
    display: none;
}

/* Honeypot: für Menschen unsichtbar, nicht fokussierbar */
.htc-honeypot {
    position: absolute;
    left: -100vw;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================================
   Gemeinsame Bausteine
   ============================================ */
.htc-container {
    max-width: 72rem;
}

.htc-screen {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
}

.htc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    min-height: var(--touch-target-min);
    padding: var(--spacing-xs) var(--spacing-lg);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    /* Umbruch nur zwischen Wörtern (main.css bricht Links sonst mitten im Wort) */
    word-break: normal;
    hyphens: manual;
    cursor: pointer;
    transition: transform var(--transition-base);
}

.htc-btn:hover {
    transform: translateY(-2px);
}

.htc-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.htc-btn--primary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.htc-btn--ghost,
.htc-btn--outline {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: var(--color-text-dark);
}

.htc-btn--ghost-light {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.htc-btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.htc-btn--disabled:hover {
    transform: none;
}

.htc-kicker {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-blue);
}

.htc-kicker--light {
    color: var(--color-secondary);
}

.htc-kicker--card {
    margin-bottom: var(--spacing-xs);
}

.htc-section-title {
    margin: 0 0 var(--spacing-xs);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.htc-section-lead {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.htc-block {
    margin-top: var(--spacing-2xl);
}

.htc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 0;
    padding: 0;
}

.htc-list-reset {
    list-style: none;
}

.htc-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    padding: var(--spacing-md);
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    color: var(--color-text-dark);
}

.htc-card-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.htc-card-heading {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.htc-card-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.htc-num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) {
    .htc-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .htc-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .htc-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .htc-grid--tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .htc-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .htc-grid--tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   S0: Einstieg
   ============================================ */
.htc-intro {
    display: flex;
    align-items: center;
    min-height: 70vh;
}

/* Zweispaltig mit Bild; mobil steht das Bild oben */
.htc-intro-grid {
    display: grid;
    gap: var(--spacing-lg);
    align-items: center;
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.htc-intro-inner {
    max-width: 40rem;
    order: 2;
}

.htc-intro-visual {
    position: relative;
    order: 1;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
}

.htc-intro-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent 45%);
    pointer-events: none;
}

.htc-intro-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 50%;
}

.htc-intro-kicker {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.htc-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-heavy);
    line-height: 1.05;
}

.htc-subtitle {
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    font-size: var(--font-size-lg);
    color: color-mix(in srgb, var(--color-white) 78%, transparent);
}

.htc-benefits {
    display: grid;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    list-style: none;
    font-size: var(--font-size-base);
    line-height: 1.45;
}

.htc-benefits li {
    position: relative;
    padding-left: calc(1.375rem + var(--spacing-sm));
}

/* Häkchen im türkisen Kreis */
.htc-benefits li::before {
    content: "";
    position: absolute;
    top: 0.05em;
    left: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.htc-intro-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

.htc-intro-facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.htc-intro-fact-icon {
    flex: 0 0 auto;
}

.htc-intro-trust {
    margin: var(--spacing-lg) 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-white) 60%, transparent);
}

@media (min-width: 1024px) {
    .htc-intro-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: var(--spacing-2xl);
        padding-top: var(--spacing-xl);
    }

    .htc-intro-inner {
        order: 1;
    }

    .htc-intro-visual {
        order: 2;
        aspect-ratio: 4 / 3;
    }
}

.htc-hint {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

.htc-intro .htc-btn:focus-visible,
.htc-hero .htc-btn:focus-visible,
.htc-gate .htc-btn:focus-visible,
.htc-teaser .htc-btn:focus-visible {
    outline-color: var(--color-white);
}

/* ============================================
   S1 bis S10: Fragen
   ============================================ */
/* Fragen-Bereich mindestens so hoch wie das Fenster, damit der Footer beim Weiterklicken nicht springt */
.htc-questions {
    min-height: 100vh;
    min-height: 100svh;
}

.htc-questions-inner {
    max-width: 48rem;
    margin: 0 auto;
}

.htc-progress {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue);
}

.htc-progress-track {
    height: 0.25rem;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.htc-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary);
    transform: scaleX(var(--htc-progress, 0));
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.htc-fieldset {
    min-width: 0;
    margin: 0 0 var(--spacing-md);
    padding: 0;
    border: 0;
}

.htc-legend {
    display: block;
    width: 100%;
    margin: 0 0 var(--spacing-md);
    padding: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-text-dark);
}

.htc-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xs);
}

.htc-options--scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.htc-option {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
}

/* Radio-Button echt im DOM, optisch durch die Tippfläche ersetzt */
.htc-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.htc-option-face {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-sizing: border-box;
    width: 100%;
    min-height: 3.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    color: var(--color-text-dark);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.htc-options--scale .htc-option-face {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-xs);
}

.htc-option-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.htc-option:hover .htc-option-face {
    border-color: var(--color-blue);
}

.htc-option-input:checked + .htc-option-face {
    border-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 12%, var(--color-white));
    font-weight: var(--font-weight-bold);
}

.htc-option-input:focus-visible + .htc-option-face {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Antwort als Begriff plus kurze Erläuterung */
.htc-option-text--stacked {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.htc-option-title {
    font-weight: var(--font-weight-bold);
}

.htc-option-desc {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: color-mix(in srgb, var(--color-text-dark) 75%, transparent);
}

@media (min-width: 768px) {
    .htc-options--scale {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   S11: Kurzergebnis
   ============================================ */
.htc-print-logo {
    display: none;
}

/* Dunkler Kopf, darunter überlappend die Ampeln */
.htc-hero {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-3xl);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
    color: var(--color-text);
}

.htc-profile {
    margin: 0 0 var(--spacing-sm);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heavy);
    line-height: 1.15;
    color: var(--color-white);
}

.htc-lead {
    max-width: 44rem;
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

/* Kopf-Buttons (S11: zum Formular, S12: zur Download-Sektion und zur Wildcard).
   Mobil gestapelt in voller Breite unter dem Lead, ab 768 px nebeneinander,
   ab 1024 px rechts oben im Kopf (siehe dort). */
.htc-hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Antworten: eingeklappt eine Zeile, aufgeklappt alle zehn */
.htc-answers {
    margin-top: var(--spacing-md);
}

.htc-answers-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 2.75rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.htc-answers-toggle::-webkit-details-marker {
    display: none;
}

/* Pfeil, dreht beim Aufklappen */
.htc-answers-toggle::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
    transition: transform var(--transition-fast);
}

.htc-answers[open] .htc-answers-toggle::after {
    transform: translateY(0.15rem) rotate(-135deg);
}

.htc-answers-toggle:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.htc-answers-list {
    display: grid;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin: var(--spacing-xs) 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}

.htc-answers-question {
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-white) 60%, transparent);
}

.htc-answers-answer {
    margin: 0.125rem 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

/* Weiße Flächen für Ampeln und Maßnahmen */
.htc-panel {
    position: relative;
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent), 0 1rem 3rem color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.htc-block.htc-panel {
    margin-top: var(--spacing-2xl);
}

.htc-block.htc-panel--lights {
    margin-top: calc(-1 * var(--spacing-2xl));
}

.htc-panel .htc-section-title {
    font-size: var(--font-size-lg);
}

.htc-lights {
    display: grid;
    margin-top: var(--spacing-md);
}

.htc-light {
    padding: var(--spacing-md) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.htc-light:first-child {
    padding-top: 0;
    border-top: 0;
}

.htc-light-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* Kleine Ampel: dunkles Gehäuse, drei Lichter */
.htc-lamp {
    display: inline-flex;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-black) 35%, var(--color-primary));
}

.htc-lamp-light {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-white) 18%, transparent);
}

.htc-lamp-light--rot {
    background-color: var(--color-ampel-rot);
    box-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-ampel-rot) 75%, transparent);
}

.htc-lamp-light--gelb {
    background-color: var(--color-ampel-gelb);
    box-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-ampel-gelb) 75%, transparent);
}

.htc-lamp-light--gruen {
    background-color: var(--color-ampel-gruen);
    box-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-ampel-gruen) 75%, transparent);
}

.htc-light-word {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-heavy);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Wortfarben abgedunkelt, damit sie auf Weiß gut lesbar sind */
.htc-light-word--rot {
    color: color-mix(in srgb, var(--color-ampel-rot) 80%, var(--color-black));
}

.htc-light-word--gelb {
    color: color-mix(in srgb, var(--color-ampel-gelb) 55%, var(--color-black));
}

.htc-light-word--gruen {
    color: color-mix(in srgb, var(--color-ampel-gruen) 80%, var(--color-black));
}

.htc-light-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-base);
    line-height: 1.3;
}

.htc-light-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.htc-toolref {
    margin: 0;
    padding-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text-dark) 75%, transparent);
}

.htc-toolref strong {
    color: var(--color-text-dark);
}

/* Maßnahmen: große Ziffern, keine Karten */
.htc-focus-list {
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    list-style: none;
}

.htc-focus-item {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.htc-focus-item:first-child {
    padding-top: var(--spacing-xs);
    border-top: 0;
}

.htc-focus-num {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heavy);
    line-height: 1;
    color: var(--color-secondary);
}

.htc-focus-title {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.35;
}

@media (min-width: 768px) {
    .htc-hero {
        padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-3xl);
    }

    .htc-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .htc-panel {
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    .htc-answers-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    /* Kopf: Buttons rechts oben in der Zeile des Kickers; Profil, Lead und Antworten darunter über volle Breite */
    .htc-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--spacing-lg);
        align-items: start;
    }

    .htc-hero > * {
        grid-column: 1 / -1;
    }

    .htc-hero > .htc-kicker {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        margin: 0;
    }

    .htc-hero > .htc-hero-actions {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: nowrap;
        margin: 0 0 var(--spacing-sm);
    }

    .htc-profile {
        font-size: var(--font-size-2xl);
    }

    .htc-lights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .htc-light {
        padding: 0 var(--spacing-md);
        border-top: 0;
        border-left: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    }

    .htc-light:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .htc-light:last-child {
        padding-right: 0;
    }
}

/* ============================================
   E-Mail-Schranke (Formular)
   ============================================ */
/* Mobil seitlich nur sm, damit die Formularkarte breiter wird */
.htc-gate {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
    color: var(--color-text);
}

.htc-gate-text {
    min-width: 0;
}

.htc-gate-list {
    display: grid;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-base);
    line-height: 1.45;
}

.htc-gate-list li {
    position: relative;
    padding-left: calc(1.375rem + var(--spacing-sm));
}

/* Häkchen im türkisen Kreis, wie auf der Startseite */
.htc-gate-list li::before {
    content: "";
    position: absolute;
    top: 0.05em;
    left: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.htc-gate-form-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heavy);
    line-height: 1.25;
    color: var(--color-text-dark);
}

/* Formularkarte kompakter als auf den Whitepaper-Seiten.
   Überschreibt das Polster von .whitepaper-download-form (whitepaper.css lädt vorher, bleibt unberührt). */
.htc-gate-form {
    min-width: 0;
    padding: var(--spacing-md);
}

/* Feldabstand sm statt md */
.htc-gate-form .whitepaper-form-field {
    margin-bottom: var(--spacing-sm);
}

/* Vor- und Nachname auch mobil nebeneinander. Zeilenabstand 0:
   vertikal trägt der Feldabstand, gestapelte Felder bekommen so keinen doppelten Abstand. */
.htc-gate-form .whitepaper-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--spacing-sm);
}

/* E-Mail und Seniorität nur von 768 bis 1023 px nebeneinander (Formular dort volle Breite);
   ab 1024 steht das Formular in der schmaleren Spalte, nebeneinander würden Platzhalter und Optionen abgeschnitten */
.htc-gate-form .whitepaper-form-row--contact {
    grid-template-columns: minmax(0, 1fr);
}

/* Einwilligungen kleiner und enger gesetzt, Wortlaut unverändert:
   Trennlinie mit Feldabstand sm, innerhalb des Blocks durchgehend xs und Zeilenhöhe 1.5 */
.htc-gate-form .whitepaper-form-consent {
    margin-top: 0;
    padding-top: var(--spacing-sm);
}

.htc-gate-form .whitepaper-form-consent-hint,
.htc-gate-form .whitepaper-form-consent-item {
    margin-bottom: var(--spacing-xs);
}

.htc-gate-form .whitepaper-form-consent-item label {
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

.htc-gate-form .whitepaper-form-consent-footer {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    line-height: 1.5;
}

.htc-gate-form .whitepaper-form-submit {
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .htc-gate {
        padding: var(--spacing-xl);
    }

    .htc-gate-form {
        padding: var(--spacing-lg);
    }

    .htc-gate-form .whitepaper-form-row--contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Formular breiter als der Text daneben (5:7), oben bündig */
@media (min-width: 1024px) {
    .htc-gate {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
        gap: var(--spacing-xl);
    }

    .htc-gate-form .whitepaper-form-row--contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================
   S12: Startreport
   ============================================ */
.htc-deep {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

.htc-deep-head {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.htc-deep-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.htc-tag {
    display: inline-block;
    margin: var(--spacing-sm) 0 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-secondary) 15%, var(--color-white));
    font-size: var(--font-size-sm);
}

.htc-why {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.htc-steps {
    margin: var(--spacing-sm) 0 0;
    padding-left: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.htc-signal {
    margin: var(--spacing-sm) 0 0;
    padding: var(--spacing-sm);
    border-left: 0.25rem solid var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-white));
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Risiko links in Orange, Gegenmittel rechts in Türkis */
.htc-trap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--spacing-sm);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

.htc-trap-side {
    padding: var(--spacing-md);
    border-left: 4px solid var(--color-orange);
    background-color: color-mix(in srgb, var(--color-orange) 7%, var(--color-white));
}

.htc-trap-side--remedy {
    border-left-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 9%, var(--color-white));
}

.htc-trap-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-heavy);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-orange) 85%, var(--color-black));
}

.htc-trap-side--remedy .htc-trap-label {
    color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-black));
}

/* Symbole: Warndreieck beim Risiko, Häkchen beim Gegenmittel */
.htc-trap-label::before {
    content: "";
    flex: 0 0 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l8.5 15h-17z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.8' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l8.5 15h-17z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.8' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.htc-trap-side--remedy .htc-trap-label::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M6.3 10.4l2.5 2.5 4.9-5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M6.3 10.4l2.5 2.5 4.9-5.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.htc-trap-copy {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
}

@media (min-width: 768px) {
    .htc-trap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .htc-trap-side {
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* Überschriften, die nur per Skript Fokus bekommen, ohne sichtbaren Rahmen */
.page-htc [tabindex="-1"]:focus,
.page-htc [tabindex="-1"]:focus-visible {
    outline: none;
}

/* Sprungziele der Kopf-Buttons: Abstand zum festen Header */
.page-htc [data-htc="gate-form"],
.page-htc [data-htc="sprint"],
.page-htc [data-htc="wildcard-info"] {
    scroll-margin-top: calc(var(--header-height-mobile) + var(--spacing-sm));
}

@media (min-width: 1024px) {
    .page-htc [data-htc="gate-form"],
    .page-htc [data-htc="sprint"],
    .page-htc [data-htc="wildcard-info"] {
        scroll-margin-top: calc(var(--header-height-desktop) + var(--spacing-sm));
    }
}

.htc-week-label {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue);
}

.htc-tip {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.htc-tile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    padding: var(--spacing-sm);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

.htc-tile--marked {
    border-color: var(--color-secondary);
}

.htc-tile-name {
    font-size: var(--font-size-base);
}

.htc-tile-line {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.htc-mark {
    margin-top: auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-blue);
}

/* Download-Sektion Strategy Sprint */
.htc-teaser {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
    color: var(--color-text);
}

/* Nicht größer als die Überschriften der zwei Angebote darunter, die sollen hervorstechen */
.htc-teaser-title {
    max-width: 52rem;
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

/* Einleitung: was der Strategy Sprint leistet */
.htc-teaser-lead {
    max-width: 52rem;
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

/* Zwei Wege in den Sprint, ohne Boxen: mobil gestapelt, ab 1024 px nebeneinander, getrennt durch Linien */
.htc-explain {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
}

/* Text oben, Button unten bündig, damit beide Buttons auf einer Linie stehen */
.htc-explain-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.htc-explain-item + .htc-explain-item {
    padding-top: var(--spacing-lg);
    border-top: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
}

.htc-explain-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.htc-explain-text {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

/* Unten bündig; Whitepaper und Werkzeugpaket nebeneinander, wenn Platz ist, sonst untereinander */
.htc-explain-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-sm);
}

/* Mobil volle Breite, ab 768 px so breit wie der Text; seitlich md, damit der lange Download-Text einzeilig bleibt */
.htc-explain-action .htc-btn {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Wildcard-Bewerbung: weiße Karte unter den Erklärungen (Felder über die whitepaper-Klassen) */
.htc-wildcard-panel {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

.htc-wildcard-panel .whitepaper-custom-form {
    max-width: 40rem;
}

.htc-wildcard-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heavy);
    line-height: 1.25;
    color: var(--color-text-dark);
}

/* Feld wie in Formular 1 gestrafft */
.htc-wildcard-panel .whitepaper-form-field {
    margin-bottom: var(--spacing-sm);
}

.htc-wildcard-panel .whitepaper-form-row {
    gap: 0 var(--spacing-sm);
}

.htc-wildcard-privacy {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text-dark) 70%, transparent);
}

.htc-wildcard-privacy a {
    color: var(--color-blue);
    text-decoration: underline;
    word-break: normal;
}

.htc-wildcard-privacy a:hover {
    color: var(--color-hover);
}

.htc-wildcard-panel .whitepaper-form-submit {
    margin-top: var(--spacing-md);
}

/* Dank nach erfolgreicher Bewerbung */
.htc-wildcard-done {
    margin: 0;
    padding: var(--spacing-sm);
    border-left: 0.25rem solid var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-white));
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .htc-teaser {
        padding: var(--spacing-xl);
    }

    .htc-wildcard-panel {
        padding: var(--spacing-lg);
    }

    .htc-wildcard-panel .whitepaper-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .htc-explain-action .htc-btn {
        width: auto;
    }
}

@media (min-width: 1024px) {
    /* 7:5, weil der Download-Weg den längeren Text und Button hat. Jede Spalte ist mindestens
       so breit wie ihr einzeiliger Button (Mindestbreite aus dem Inhalt), der Rest verteilt sich 7:5. */
    .htc-explain {
        grid-template-columns: 7fr 5fr;
        gap: var(--spacing-md);
    }

    .htc-explain-item {
        min-width: auto;
    }

    .htc-explain-item + .htc-explain-item {
        padding-top: 0;
        padding-left: var(--spacing-md);
        border-top: 0;
        border-left: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
    }

    .htc-explain-action .htc-btn {
        white-space: nowrap;
    }
}

/* Abschluss */
.htc-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
}

/* Pop-up nach dem Whitepaper-Download: bietet das Werkzeugpaket an (natives dialog in der obersten Ebene) */
/* margin: auto stellt die Zentrierung des Browsers wieder her, die der globale Reset in main.css aufhebt */
.htc-dialog {
    width: calc(100% - 2 * var(--spacing-md));
    max-width: 32rem;
    margin: auto;
    padding: var(--spacing-lg);
    border: 0;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

.htc-dialog::backdrop {
    background-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.htc-dialog-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-heavy);
    line-height: 1.25;
}

.htc-dialog-text {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
}

.htc-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .htc-dialog-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Nach dem Absenden: Bitte um Bestätigung der E-Mail-Adresse statt Startreport */
.htc-gate-done-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-heavy);
    line-height: 1.25;
    color: var(--color-text-dark);
}

.htc-gate-done-text {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--color-text-dark);
}

.htc-gate-done-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text-dark) 70%, transparent);
}

@media (min-width: 768px) {
    .htc-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ============================================
   Druckansicht: A4, Ziel höchstens vier Seiten
   ============================================ */
@page {
    size: A4;
    margin: 12mm;
}

/* ============================================
   Fragen mit Segmenten, Auswahlkreis und Linien-Skala
   ============================================ */
.htc-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.htc-progress-rest {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

.htc-segments {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: var(--spacing-xl);
}

.htc-segment {
    height: 0.3rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.htc-segment--done {
    background-color: var(--color-secondary);
}

.htc-segment--now {
    background-color: var(--color-primary);
}

.htc-option-circle {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}

.htc-option:hover .htc-option-circle {
    border-color: var(--color-blue);
}

/* Häkchen im türkisen Kreis */
.htc-option-input:checked + .htc-option-face .htc-option-circle,
.htc-option-input:checked + .htc-lk-dot {
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.6 2.6L11 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Skalenfragen: vier Punkte auf einer Linie, Beschriftung darunter */
.htc-likert {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--spacing-xl);
}

.htc-likert::before {
    content: "";
    position: absolute;
    top: calc(1.375rem - 1.5px);
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.htc-lk {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 2.75rem;
    padding: 0.25rem 0.25rem var(--spacing-xs);
    text-align: center;
    cursor: pointer;
}

.htc-lk-dot {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: 50%;
    background-color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}

.htc-lk:hover .htc-lk-dot {
    border-color: var(--color-blue);
}

.htc-lk-label {
    font-size: var(--font-size-base);
    line-height: 1.3;
    color: var(--color-text-dark);
}

.htc-option-input:checked ~ .htc-lk-label {
    font-weight: var(--font-weight-bold);
}

.htc-option-input:focus-visible + .htc-lk-dot {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

@media print {
    .header,
    .footer,
    .cookie-banner,
    .cookie-settings-modal,
    .scroll-to-top,
    .liquid-glass-test-menu,
    .mobile-menu-toggle,
    [id^="hubspot-messages"],
    .htc-intro,
    .htc-questions,
    .htc-gate,
    .htc-actions,
    .htc-hero-actions,
    .htc-explain-action,
    .htc-wildcard-panel,
    .htc-dialog,
    .htc-progress-track {
        display: none;
    }

    .page-htc {
        background-color: var(--color-white);
        color: var(--color-text-dark);
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .page-htc .main-content {
        padding-top: 0;
    }

    .page-htc .htc-result {
        padding: 0;
        background-color: var(--color-white);
        color: var(--color-text-dark);
        font-size: var(--font-size-xs);
    }

    .page-htc .htc-container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .htc-print-logo {
        display: block;
        width: auto;
        height: 1.5rem;
        margin-bottom: var(--spacing-sm);
    }

    .htc-block,
    .htc-teaser {
        margin-top: var(--spacing-md);
    }

    .htc-grid {
        gap: var(--spacing-xs);
        margin-top: var(--spacing-xs);
    }

    .htc-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .htc-grid--4,
    .htc-grid--tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Schwerpunkt-Details und Download-Sektion dürfen umbrechen, sonst bleiben halbe Seiten leer
       (Ziel: höchstens vier Seiten). Zusammen bleiben nur kleine Einheiten. */
    .htc-card,
    .htc-trap,
    .htc-tile,
    .htc-explain-item,
    .htc-signal,
    .htc-why,
    .htc-steps li,
    .htc-light,
    .htc-focus-item,
    .htc-hero {
        break-inside: avoid;
    }

    /* Leitfaden und Fünf Fragen sind hoch und dürfen ebenfalls umbrechen */
    .htc-card--guide {
        break-inside: auto;
    }

    .htc-section-title,
    .htc-card-heading,
    .htc-deep-head,
    .htc-tag {
        break-after: avoid;
    }

    .htc-card,
    .htc-deep,
    .htc-trap,
    .htc-tile {
        padding: var(--spacing-xs);
        border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
        border-radius: var(--radius-md);
    }

    .htc-card--ampel {
        border-top-width: 0.375rem;
    }

    .htc-tile--marked {
        border-color: var(--color-secondary);
    }

    .htc-profile {
        font-size: var(--font-size-xl);
    }

    .htc-lead {
        font-size: var(--font-size-base);
    }

    .htc-section-title {
        font-size: var(--font-size-lg);
    }

    .htc-deep-title {
        font-size: var(--font-size-base);
    }

    .htc-card-text,
    .htc-steps,
    .htc-signal,
    .htc-why,
    .htc-tile-line,
    .htc-trap,
    .htc-toolref,
    .htc-explain-text {
        font-size: var(--font-size-xs);
        line-height: 1.45;
    }

    .htc-teaser {
        padding: var(--spacing-xs);
        border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
        background-color: var(--color-white);
        color: var(--color-text-dark);
    }

    /* Wie am Bildschirm nicht größer als die Angebots-Überschriften */
    .htc-teaser-title {
        font-size: var(--font-size-sm);
    }

    /* Einleitung und zwei Wege hell mit dunklem Text, nebeneinander, Linien in Dunkelblau */
    .htc-teaser-lead,
    .htc-explain-text {
        font-size: var(--font-size-xs);
        color: var(--color-text-dark);
    }

    .htc-explain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xs);
        padding-top: var(--spacing-xs);
        border-top-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    }

    .htc-explain-item {
        color: var(--color-text-dark);
    }

    .htc-explain-item + .htc-explain-item {
        padding-top: 0;
        padding-left: var(--spacing-sm);
        border-top: 0;
        border-left: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    }

    .htc-explain-title {
        font-size: var(--font-size-sm);
    }

    .htc-kicker--light {
        color: var(--color-blue);
    }

    /* Verdichtung auf höchstens vier A4-Seiten. Die Druckbreite liegt unter 768 px,
       mehrspaltige Raster werden deshalb hier gesetzt. */
    .htc-block,
    .htc-teaser {
        margin-top: var(--spacing-sm);
    }

    .htc-hero {
        padding: 0;
        border-radius: 0;
        background-color: var(--color-white);
        color: var(--color-text-dark);
    }

    .htc-hero .htc-profile {
        color: var(--color-text-dark);
        font-size: var(--font-size-lg);
    }

    .htc-hero .htc-lead {
        color: var(--color-text-dark);
        font-size: var(--font-size-sm);
    }

    .htc-answers {
        display: none;
    }

    .htc-block.htc-panel,
    .htc-block.htc-panel--lights {
        margin-top: var(--spacing-sm);
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .htc-section-title,
    .htc-panel .htc-section-title {
        font-size: var(--font-size-base);
    }

    .htc-section-lead {
        margin-bottom: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .htc-lights,
    .htc-focus-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xs);
    }

    .htc-light,
    .htc-light:first-child,
    .htc-focus-item,
    .htc-focus-item:first-child {
        padding: 0;
        border: 0;
    }

    .htc-light-top {
        margin-bottom: var(--spacing-xs);
    }

    .htc-light-title,
    .htc-focus-title,
    .htc-deep-title,
    .htc-card-heading,
    .htc-tile-name,
    .htc-week-label {
        font-size: var(--font-size-sm);
    }

    .htc-light-text,
    .htc-trap-copy,
    .htc-tip {
        font-size: var(--font-size-xs);
        line-height: 1.45;
    }

    .htc-focus-item {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: var(--spacing-xs);
    }

    .htc-focus-num {
        font-size: var(--font-size-lg);
    }

    .htc-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .htc-deep {
        margin-top: var(--spacing-xs);
    }

    .htc-tag {
        margin-top: var(--spacing-xs);
        padding: var(--spacing-2xs) var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .htc-why,
    .htc-steps,
    .htc-tip {
        margin-top: var(--spacing-xs);
    }

    .htc-signal {
        margin-top: var(--spacing-xs);
        padding: var(--spacing-xs);
    }

    .htc-trap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: var(--spacing-xs);
        padding: 0;
        border-radius: var(--radius-md);
    }

    .htc-trap-side {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}