/* Startseite: Titelbereich mit Beispielsiegel, Vollbreit-Formular, Ablauf, CTA, Verfahren. */
.titelbereich {
    background:
        radial-gradient(circle at 85% 12%, rgba(0, 105, 180, 0.55) 0%, transparent 45%),
        linear-gradient(160deg, var(--farbe-primaer) 0%, var(--farbe-primaer-dunkel) 100%);
    color: var(--farbe-text-invers);
    padding-block: var(--abstand-xgross);
}

.titelbereich__raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--abstand-gross);
    align-items: center;
}

@media (min-width: 900px) {
    .titelbereich__raster {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--abstand-xgross);
    }
}

.titelbereich__titel {
    color: var(--farbe-text-invers);
    margin-bottom: var(--abstand-mittel);
}

.titelbereich__text {
    color: #d7e5f2;
    font-size: 1.1rem;
    max-width: 52ch;
}

.titelbereich__text strong {
    color: #ffffff;
}

.titelbereich__vorteile {
    margin-top: var(--abstand-gross);
    display: grid;
    gap: 0.6rem;
}

.titelbereich__vorteil {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #e6eef7;
    font-weight: 600;
}

.titelbereich__vorteil svg {
    flex: 0 0 auto;
    color: #7fc4ff;
}

/* Beispielsiegel im Titelbereich (rechts neben dem Text) */
.titelbereich__siegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.titelbereich__siegel-text {
    color: #cfe0f0;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Muster-/Beispielsiegel */
.mustersiegel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    background: #ffffff;
    padding: 0.9rem;
    border-radius: var(--radius-gross);
    box-shadow: 0 12px 40px rgba(0, 25, 51, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    max-width: 300px;
}

a.mustersiegel:hover,
a.mustersiegel:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0, 25, 51, 0.45);
}

.mustersiegel__grafik {
    width: 100%;
    height: auto;
    display: block;
}

.mustersiegel__hinweis {
    font-size: 0.78rem;
    color: var(--farbe-text-leise);
    font-weight: 600;
}

.mustersiegel--cta {
    box-shadow: var(--schatten-karte);
}

/* Test-Karte – jetzt auf Vollbreite unter dem Text. */
.testkarte {
    background: var(--farbe-flaeche);
    border-radius: var(--radius-gross);
    box-shadow: 0 12px 40px rgba(0, 25, 51, 0.35);
    padding: var(--abstand-gross);
    color: var(--farbe-text);
}

.testkarte--voll {
    margin-top: var(--abstand-xgross);
    border-top: 5px solid var(--farbe-sekundaer);
}

.testkarte__titel {
    margin-bottom: 0.3rem;
}

.testkarte__untertitel {
    color: var(--farbe-text-leise);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.testkarte__agb-hinweis {
    font-size: 0.85rem;
    color: var(--farbe-text-leise);
    margin-bottom: 0;
}

.testkarte__agb-hinweis a {
    color: var(--farbe-link);
    text-decoration: underline;
    font-weight: 600;
}

/* Hervorgehobenes Eingabefeld für die Domain. */
.eingabe-hervorheben {
    background: var(--farbe-flaeche-gedaempft);
    border: 2px solid var(--farbe-sekundaer);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel);
    margin-bottom: var(--abstand-mittel);
    box-shadow: inset 0 0 0 1px rgba(0, 105, 180, 0.08);
}

.eingabe-hervorheben .formularfeld {
    margin-bottom: 0;
}

.formularfeld__eingabe--gross {
    font-size: 1.15rem;
    padding: 0.85rem 1rem;
}

/* Kopfzeile der Testkarte: Titel/Untertitel links, Testumfang rechts fließend. */
.testkarte__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-mittel);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--abstand-mittel);
}

.testkarte__einleitung {
    flex: 1 1 260px;
}

.testkarte__umfang {
    flex: 1 1 340px;
    margin-bottom: 0;
}

.umfang-optionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* Prüfverfahren in Zweierreihen unter dem Eingabefeld. */
.verfahren-optionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* Kompakte Auswahloptionen (Testumfang und Prüfverfahren im Formular). */
.auswahloption--kompakt {
    padding: 0.55rem 0.75rem;
    margin-bottom: 0;
    gap: 0.5rem;
}

.auswahloption--kompakt .auswahloption__titel {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.auswahloption--kompakt .auswahloption__beschreibung {
    font-size: 0.8rem;
}

/* Badge für das in Deutschland gängigste Verfahren (BITV 2.0). */
.auswahloption--gaengig {
    border-color: var(--farbe-sekundaer);
}

.verfahren-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--farbe-sekundaer);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .umfang-optionen,
    .verfahren-optionen {
        grid-template-columns: 1fr;
    }
}

.ablauf {
    padding-block: var(--abstand-gross);
}

/* CTA-Band mit Beispielsiegel */
/* Gemeinsames CTA-Band (Siegel + Plugin) – durchgehende Fläche ohne trennenden Streifen */
.cta-band {
    background: var(--farbe-flaeche-gedaempft);
    border-block: 1px solid var(--farbe-rahmen);
    margin-block: var(--abstand-gross);
}
.cta-band__zeile { padding-block: var(--abstand-xgross); }
.cta-band__zeile--trenner { border-top: 1px solid var(--farbe-rahmen); }

.siegel-cta__raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--abstand-gross);
    align-items: center;
}

@media (min-width: 820px) {
    .siegel-cta__raster {
        grid-template-columns: auto 1fr;
        gap: var(--abstand-xgross);
    }
}

.siegel-cta__siegel {
    display: flex;
    justify-content: center;
}

.siegel-cta__titel {
    margin-bottom: 0.6rem;
    color: var(--farbe-primaer);
}

.siegel-cta__text {
    color: var(--farbe-text-leise);
    max-width: 60ch;
    margin-bottom: var(--abstand-mittel);
}

.siegel-cta__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-mittel);
}

/* Plugin-CTA-Zeile: gespiegelt zum Siegel-CTA (Text links, Grafik rechts) */
.plugin-cta-band__raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--abstand-gross);
    align-items: center;
}
@media (min-width: 820px) {
    .plugin-cta-band__raster {
        grid-template-columns: 1fr auto;
        gap: var(--abstand-xgross);
    }
}
.plugin-cta-band__titel { margin-bottom: 0.6rem; color: var(--farbe-primaer); }
.plugin-cta-band__text { color: var(--farbe-text-leise); max-width: 60ch; margin-bottom: var(--abstand-mittel); }
.plugin-cta-band__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-mittel); }
.plugin-cta-band__grafik { display: flex; justify-content: center; }
.plugin-cta-band__grafik .score-vergleich { margin: 0; }

.verfahren-uebersicht {
    padding-block: var(--abstand-gross);
}

.abschnitt__einleitung {
    color: var(--farbe-text-leise);
    max-width: 70ch;
    margin-bottom: var(--abstand-gross);
}

/* Verfahren-Kachel als Link auf die Detailseite. */
.verfahren-karte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--farbe-rahmen);
    border-top: 4px solid var(--farbe-sekundaer);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel) var(--abstand-gross);
    background: var(--farbe-flaeche);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.verfahren-karte:hover,
a.verfahren-karte:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--schatten-karte);
    border-top-color: var(--farbe-primaer);
}

.verfahren-karte__kuerzel {
    display: inline-block;
    font-weight: 700;
    color: var(--farbe-sekundaer-dunkel);
    letter-spacing: 0.02em;
    margin-bottom: 0.3rem;
}

.verfahren-karte__name {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
    color: var(--farbe-primaer);
}

.verfahren-karte__text {
    color: var(--farbe-text-leise);
    font-size: 0.92rem;
    flex: 1 1 auto;
}

.verfahren-karte__mehr {
    display: inline-block;
    margin-top: var(--abstand-mittel);
    font-weight: 700;
    color: var(--farbe-sekundaer-dunkel);
    font-size: 0.92rem;
}

/* Auf Handybreite waren mehrere inhaltstragende Texte zu klein: Die
   Auswahlbeschreibungen (12,8 px) informieren eine Entscheidung, das Verfahrens-
   Abzeichen lag bei 10,9 px. Die Größenhierarchie bleibt, nur die Untergrenze
   steigt. Diese Datei lädt nach formulare.css – nötig, da Media Queries die
   Spezifität nicht erhöhen. */
@media (max-width: 640px) {
    .auswahloption__beschreibung,
    .auswahloption--kompakt .auswahloption__beschreibung {
        font-size: 0.9rem;
    }
    .verfahren-badge {
        font-size: 0.8rem;
    }
    .mustersiegel__hinweis {
        font-size: 0.85rem;
    }
}