/* ==========================================================================
   Basis/Variablen
   ========================================================================== */

:root {
    --color-bg: #ffffff;
    --color-text: #212121;
    --color-muted: #757575;
    --color-border: #bdbdbd;

    --color-primary: #006b33;
    --color-primary-contrast: #ffffff;
    --color-secondary: #32d94b;
    --color-accent: #ff5100;
    --color-warm: #e8e6d5;
    --color-tertiary: #b1d923;
    --color-tablerow: #f7f7f7;

    --container-max: 1200px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    --radius: 12px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --header-height: 72px;
    /* für Sticky-Offsets */

    /* Desktop: Höhe der gesamten sticky Kopfzeile (Header Bar + Desktop Nav) */
    --sticky-header-desktop: 142.6px;
    /* Wert im Browser gemessen */
}

/* ==========================================================================
   Fonts – Roboto, Lora self-hosted (WOFF), performance: font-display swap
   ========================================================================== */

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-italic.woff") format("woff");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-bold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-thin.woff") format("woff");
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-light.woff") format("woff");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-medium.woff") format("woff");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-black.woff") format("woff");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Condensed";
    src: url("/fonts/roboto-condensed.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Lora";
    src: url("/fonts/lora-v37-latin-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Lora";
    src: url("/fonts/lora-v37-latin-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

/* ==========================================================================
   Reset/Grundlayout
   ========================================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font:
        400 16px/1.6 "Roboto",
        "Segoe UI",
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* OL-Listen: Aufzähler fett formatieren */
ol li::marker {
    font-weight: bold;
}

/* Listenpunkte mit Abstand */
li {
    margin-bottom: var(--space-1);
}

/* === Globale Linkfarben gemäß Farbschema (statt Standard-Blau) === */
a {
    color: var(--color-primary);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0, 107, 51, 0.35);
}

a:hover {
    color: #00562a;
    /* dunkleres Grün */
    text-decoration-color: currentColor;
}

a:visited {
    color: #004a29;
}

/* Fokus sichtbar & kontrastreich (WCAG) */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Skip-Link (für Tastatur) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
    width: auto;
    height: auto;
    background: #000;
    color: #fff;
    padding: var(--space-3) var(--space-4);
    z-index: 10000;
    border-radius: 8px;
}

/* SR-only Utility für Live-Regionen etc. */
.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* Hidden-Attribut robust machen – gewinnt gegen globale !important-Displays */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   Header & Navigation (sticky)
   ========================================================================== */

.site-header {
    position: sticky;
    /* bleibt beim Scrollen sichtbar */
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    gap: var(--space-4);
}

.logo img {
    display: block;
}

.contact-head {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    text-decoration: none;
}

.contact-link:hover,
.contact-link:focus-visible {
    color: var(--color-primary);
}

.icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

/* Navigation */
.site-nav {
    border-top: 1px solid #f2f2f2;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-desktop {
    display: none;
    /* Mobile-first: Desktop-Menü später aktiv */
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    /* === Desktop-Navigation mittig ausrichten === */
    justify-content: center;
    width: 100%;
}

.menu-desktop > li {
    position: relative;
}

.nav-link {
    display: inline-block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 8px;
}

.nav-link:hover,
.nav-link:focus-visible {
    background: var(--color-warm);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 700;
    outline-offset: 0;
}

/* Submenüs: per :hover und :focus-within öffnen (ohne JS) */
.has-submenu {
    position: relative;
}

.submenu {
    position: absolute;
    inset-inline-start: 0;
    /*  Versatz der Submenüs verkürzt (von 4 auf 1px) wg. Mausfokus:  */
    top: calc(100% + 1px);
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 0.5rem;
    display: none;
    /* default versteckt */
    z-index: 1001;
}

.submenu li a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 8px;
}

.submenu li a:hover,
.submenu li a:focus-visible {
    background: var(--color-warm);
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
    display: block;
}

/* Mobile Navigation via <details> – ohne JS */
.nav-mobile {
    padding: 0.25rem var(--space-4);
}

.nav-mobile > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
}

.nav-mobile > summary::-webkit-details-marker {
    display: none;
}

.nav-mobile[open] .summary-text {
    font-weight: 700;
}

.nav-mobile .menu {
    display: grid;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
}

.nav-mobile .submenu {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 0 0.5rem 0.5rem;
}

/* Navigation: Submenüs ohne Aufzählungszeichen (Desktop + Mobile) */
.site-nav .submenu {
    list-style: none;
    margin: 0;
}

/* Globale li-Abstände in Submenüs kontrollieren */
.site-nav .submenu > li {
    margin: 0;
}

.site-nav .submenu > li + li {
    margin-top: var(--space-1);
}

/* ==========================================================================
   Hauptnavigation: Indikatoren für Untermenüs
   ========================================================================== */

/* Elternpunkte mit Untermenü als flexible Zeile mit Chevron */
.nav-link--has-submenu,
.nav-link--toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Mobile-Toggle soll die volle Zeile nutzen */
.nav-mobile .nav-link--toggle {
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
}

/* Default-Chevron: geschlossen */
.nav-link--has-submenu::after,
.nav-link--toggle::after {
    content: "";
    inline-size: 0.33rem;
    block-size: 0.33rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    margin-inline-start: 0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    opacity: 0.85;
    transition:
        transform 0.16s ease,
        opacity 0.16s ease;
}

/* Desktop: beim Öffnen nach oben drehen */
.menu-desktop .has-submenu:hover > .nav-link--has-submenu::after,
.menu-desktop .has-submenu:focus-within > .nav-link--has-submenu::after {
    transform: rotate(-135deg);
    opacity: 1;
}

/* Mobile: natives <details> pro Hauptpunkt */
.nav-mobile .nav-group {
    display: block;
}

.nav-mobile .nav-group > summary {
    list-style: none;
}

.nav-mobile .nav-group > summary::-webkit-details-marker {
    display: none;
}

/* Wichtig: bisher waren mobile Submenüs immer sichtbar.
   Das wird hier bewusst überschrieben. */
.nav-mobile .has-submenu > .nav-group > .submenu {
    display: none;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0.5rem 0.5rem;
}

/* Mobile: offenes Untermenü sichtbar */
.nav-mobile .has-submenu > .nav-group[open] > .submenu {
    display: block;
}

/* Mobile: offenes Toggle visuell hervorheben */
.nav-mobile .nav-group[open] > .nav-link--toggle,
.nav-mobile .has-submenu.is-active-root > .nav-group > .nav-link--toggle {
    color: var(--color-primary);
    font-weight: 700;
}

/* Mobile: offenes Chevron nach oben drehen */
.nav-mobile .nav-group[open] > .nav-link--toggle::after {
    transform: rotate(-135deg);
    opacity: 1;
}

/* Desktop: aktiver Root-Punkt mit Untermenü klar markieren */
.menu-desktop .has-submenu > .nav-link--has-submenu.is-active::after,
.menu-desktop .has-submenu > .nav-link--has-submenu[aria-current="page"]::after {
    opacity: 1;
}

/* Tastatur- und Motion-Preference berücksichtigen */
@media (prefers-reduced-motion: reduce) {
    .nav-link--has-submenu::after,
    .nav-link--toggle::after {
        transition: none;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    /* Overlay sauber stapeln */
    color: #fff;
}

.hero-media img,
.hero-media source {
    display: block;
    width: 100%;
}

.hero::after {
    /* dunkles Overlay für Lesbarkeit */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    z-index: 0;
}

.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    z-index: 1;
}

.kicker {
    margin: 0;
    font:
        500 0.95rem/1 "Roboto",
        sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #e8e6d5;
}

.hero h1 {
    margin: 0;
    font:
        700 clamp(1.5rem, 4vw, 2.5rem)/1.2 "Roboto",
        sans-serif;
}

.lead {
    max-width: 60ch;
    margin: 0;
}

/* ==========================================================================
   Komponenten (modular wiederverwendbar)
   ========================================================================== */

/* Cards/Teaser */
.c-card,
.card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-media img {
    width: 100%;
    height: auto;
    display: block;
}

.card-body {
    padding: var(--space-5);
}

.c-card__title {
    margin: 0.25rem 0 0.5rem;
}

.c-card__text {
    margin: 0 0 0.75rem;
}

/* ==========================================================================
   Bild-Galerie / Formular-Vorschau (Lightbox-tauglich)
   ========================================================================== */

.c-image-gallery {
    margin: var(--space-6) 0;
}

.c-image-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-5);
}

/* Einzelnes Vorschaubild */
.c-image-gallery__item {
    margin: 0;
}

.c-image-gallery__link {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-warm);
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    text-decoration: none;
}

.c-image-gallery__link img {
    display: block;
    width: 100%;
    height: auto;
    /* leichte Micro-Interaktion beim Hover */
    transform-origin: center;
    transition: transform 0.15s ease-out;
}

.c-image-gallery__link:hover img,
.c-image-gallery__link:focus-visible img {
    transform: scale(1.02);
}

.c-image-gallery__link::after {
    /* Hinweis-Overlay "Klicken zum Vergrößern" – verbessert die UX */
    content: "Klicken zum Vergrößern";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0.35rem 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
}

/* Bildbeschreibung unterhalb der Vorschaubilder */
.c-image-gallery__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ==========================================================================
   Bild-Lightbox (dialog-basiert)
   ========================================================================== */

.c-lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 96vw;
    margin: 0;
}

/* Zentrierung und Layout, wenn geöffnet */
.c-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Abgedunkelter Hintergrund */
.c-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.c-lightbox__inner {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-4);
    max-width: 960px;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    position: relative;
}

.c-lightbox__figure {
    margin: 0;
}

.c-lightbox__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 7rem);
    object-fit: contain;
}

/* Caption im Overlay, optional (wird per JS befüllt) */
.c-lightbox__caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Schließen-Button oben rechts */
.c-lightbox__close {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    border: none;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
}

.c-lightbox__close:hover,
.c-lightbox__close:focus-visible {
    background: rgba(0, 0, 0, 0.12);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print-Fallback: Lightbox nicht ausgeben, Thumbnails normal drucken */
@media print {
    .c-lightbox {
        display: none !important;
    }
}

/* Info-Boxen (Sidebar, CTAs, etc.) */
.c-box,
.box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    --btn-bg: #eaeaea;
    --btn-color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-color);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition:
        transform 0.12s ease,
        background-color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
    /* === Micro-Interaction Übergänge erweitert === */
}

.btn:hover {
    /* === dezente Micro-Interaction (Hover) === */
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.btn:active {
    /* === Micro-Interaction (Active) === */
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) inset;
}

.btn:focus-visible {
    /* === Micro-Interaction (Focus) === */
    box-shadow: 0 0 0 4px rgba(0, 107, 51, 0.2);
}

.btn--primary {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-primary-contrast) !important;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: #00562a;
    color: var(--btn-color) !important;
    /* behält definierte Button-Textfarbe bei */
}

.btn--secondary {
    --btn-bg: var(--color-tertiary);
    --btn-color: #0b3a1e;
}

.btn--ghost {
    --btn-bg: transparent;
    border-color: #e0e0e0;
}

.icon--inline {
    inline-size: 1rem;
    block-size: 1rem;
}

/* === Buttons (Anchor-Links) – visited-Zustand neutralisieren für bessere Lesbarkeit === */
.btn:visited,
.btn--primary:visited,
.btn--secondary:visited,
.btn--ghost:visited,
.teaser-grid .btn--ghost:visited {
    color: var(--btn-color) !important;
    /* behält definierte Button-Textfarbe bei */
    text-decoration-color: currentColor;
    /* keine abweichende Underline-Farbe */
}

/* ==========================================================================
   Sektionen & Grid
   ========================================================================== */

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

.section--alt {
    background: #fafafa;
}

.teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

/* ==========================================================================
   Formulare + ARIA-Fehlerdarstellung
   ========================================================================== */

.form {
    display: grid;
    gap: var(--space-4);
    max-width: 760px;
}

.form-row {
    display: grid;
    gap: 0.5rem;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible {
    border-color: var(--color-primary);
}

.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.15);
}

.field-error {
    margin: 0;
    min-height: 1.25em;
    /* reserviert Platz, verhindert Layout-Sprung */
    font-size: 0.95rem;
    color: #b73a00;
    /* AA-Kontrast zu weißem Hintergrund */
}

.form-row input[type="checkbox"] {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    accent-color: var(--color-primary);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.form-note {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ==========================================================================
   Blockquotes, Tabellen, Code und klassengebundene Elemente
   ========================================================================== */

/* Blockquotes für Beispiele und Definitionen */
blockquote {
    border-left: 5px solid var(--color-primary);
    background-color: var(--color-primary-contrast);
    padding: 15px 20px;
    margin: 1.5em 0;
    color: var(--color-text);
    font-style: italic;
    border-radius: var(--radius);
}

/* Tabellen */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
    background-color: var(--color-primary-contrast);
    box-shadow: var(--shadow);
}

table caption {
    text-align: left;
    font-weight: normal;
    padding: 10px;
    color: #757575;
}

table th,
table td {
    border: 1px solid var(--color-border);
    padding: 10px;
    text-align: left;
}

table th {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

table tbody tr:nth-child(even) {
    background-color: var(--color-tablerow);
}

/* Hervorhebung für Formeln oder Werte */
code {
    background-color: var(--color-warm);
    padding: 2px 5px;
    border-radius: var(--radius);
    font-family: "Courier New", Courier, monospace;
}

/* Hervorgehobener Absatz (für Fazit, Zusammenfassungen, Hinweise u.ä.) */
p.fazit {
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-warm);
    padding: 15px 20px;
    border-left: 5px solid var(--color-primary);
    border-radius: var(--radius);
}

/* Quellenangaben, Literatur */
article.quelle {
    padding: var(--space-2) 0;
}

article.quelle cite {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
}

/* Absätze mit Space */
p.margintop {
    margin-top: var(--space-6);
}

p.marginbottom {
    margin-bottom: var(--space-6);
}

p.margintopbottom {
    margin: var(--space-6) 0;
}

/* Text, helleres Grau */
.text-muted {
    color: var(--color-muted);
}

/* DL-Liste im Fliesstext */
dl.fliesstext {
    margin-top: var(--space-4);
}

dl.fliesstext dt {
    font-weight: bold;
    margin-top: var(--space-4);
}

dl.fliesstext dd {
    margin-left: var(--space-5);
    margin-bottom: var(--space-2);
}

/* Liste als Literaturverzeichnis */
.bibliography {
    list-style-type: none;
    padding-left: 0;
}

.bibliography li {
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
    text-indent: -1.5em;
}

/* Abbildung und Abbildungsbeschreibung */
figure {
    margin-top: var(--space-5);
}

figcaption {
    text-align: left;
    font-weight: normal;
    padding: var(--space-3);
    color: #757575;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
    margin-top: var(--space-5);
}

.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-muted);
}

.breadcrumbs li + li::before {
    content: "›";
    margin: 0 0.25rem;
    color: var(--color-border);
}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Zwei-Spalten-Layout (Artikel + Sidebar)
   ========================================================================== */

.layout {
    display: grid;
    gap: var(--space-6);
}

.content {
    min-width: 0;
}

.article-header h1 {
    font-family: "Lora", "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.3;
}

.article-header .meta {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.article-header .subline {
    font-size: 1.1em;
    color: var(--color-text);
    font-weight: bold;
    margin-top: var(--space-6);
}

.h3 {
    font:
        700 1.125rem/1.3 "Roboto",
        sans-serif;
    margin: 0.25rem 0 0.5rem;
}

.sidebar {
    display: grid;
    gap: var(--space-5);
}

/* Serifen-Schrift */
.serif {
    font-family: "Lora", "Times New Roman", serif;
}

/* Sticky Sidebar auf Desktop mit sinnvoller Top-Position */
@media (min-width: 1024px) {
    .layout {
        grid-template-columns: 2fr 1fr;
        /* 2/3 - 1/3 */
        align-items: start;
    }

    .sidebar {
        position: sticky;
        top: calc(var(--sticky-header-desktop) + 16px);
    }
}

/* ==========================================================================
   FAQ – Sprungnavigation & Akkordeon
   ========================================================================== */

.faq-nav {
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--color-warm);
    /* heller Hintergrundblock für Themenwahl */
}

.faq-nav__intro {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* Grid-Layout für gleichmäßige Karten, unabhängig von Textlängen */
.faq-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: eine Spalte */
    gap: var(--space-3);
}

/* Tablet / Desktop: mehrere Spalten, gleichmäßig verteilt */
@media (min-width: 768px) {
    .faq-nav__list {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.faq-nav__item {
    margin: 0;
}

/* Basis-Style für die Karten-Links
   Hinweis: überschreibt generische .btn/.btn--ghost-Styles gezielt */
.faq-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 3.25rem;
    /* sorgt für optische Gleichmäßigkeit */
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + 6px);
    /* Platz für Balken links */
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: #ffffff;
    text-align: left;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;

    /* Dezent animierte Zustandswechsel */
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
}

/* Farbbalken links in der Karte */
.faq-nav__link::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    /* oben/unten leicht eingerückt */
    left: 6px;
    width: 4px;
    border-radius: 999px;
    background: var(--color-secondary);
    /* dezent grün im Normalzustand */
}

/* Visited-Farbe vereinheitlichen:
   Kein lila Standard-Linkton mehr, sondern wie Normalzustand */
.faq-nav__link:link,
.faq-nav__link:visited {
    color: var(--color-text);
}

/* Hover / Focus: leicht andere Hintergrundfarbe, bessere Erkennbarkeit */
.faq-nav__link:hover {
    background: #f5fbf7;
    /* sehr helles Grün/Neutral */
    border-color: var(--color-primary);
}

.faq-nav__link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Aktiver Themenblock:
   - Balken in Primärfarbe
   - Rahmen verstärkt
   - Text in Primärfarbe
   - leichter Schatten für Hervorhebung */
.faq-nav__link.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow);
}

.faq-nav__link.is-active::before {
    background: var(--color-primary);
}

/* Optional: Hover im aktiven Zustand leicht hinterlegen */
.faq-nav__link.is-active:hover {
    background: #f5fbf7;
}

/* Für Screenreader – falls aria-current genutzt wird */
.faq-nav__link[aria-current="true"] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow);
}

.faq-nav__link[aria-current="true"]::before {
    background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   FAQ-Sektionen & Akkordeon
   -------------------------------------------------------------------------- */

/* Sektionen mit eigenem Scroll-Offset (Sticky-Header berücksichtigen) */
.faq-section {
    margin-bottom: var(--space-6);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
    /* Verhindert, dass der Sticky-Header die Überschrift verdeckt */
}

/* DL-Liste, die per JS in Akkordeon umgebaut wird */
.faq-accordion {
    margin-top: var(--space-4);
}

.faq-accordion dt,
.faq-accordion dd {
    margin: 0;
}

/* Abstand zwischen Fragenblöcken */
.faq-accordion dt:not(:first-of-type) {
    margin-top: var(--space-3);
}

/* Frage-Button (per JS ins <dt> eingefügt) */
.faq-question {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    position: relative;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    /* Animation wird bei prefers-reduced-motion reduziert */
}

/* Einfaches Plus/Minus-Symbol ohne Icon-Sprite */
.faq-question::after {
    content: "+";
    margin-left: auto;
    font-weight: 700;
}

.faq-question:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Zustand: geöffnet (dt erhält Klasse .is-open) */
.faq-item.is-open .faq-question {
    background: var(--color-warm);
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

.faq-item.is-open .faq-question::after {
    content: "–";
}

/* Antwortbereich (dd), wird per JS ein-/ausgeblendet */
.faq-answer {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-top: none;
    /* vermeidet doppelte Linie zum Button */
    border-radius: 0 0 var(--radius) var(--radius);
    background: #fafafa;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-answer p {
    margin-top: var(--space-3);
}

.faq-answer ul,
.faq-answer ol {
    margin-top: var(--space-3);
    padding-inline-start: 1.25rem;
}

/* Steuerleiste "Alle öffnen / schließen" pro Sektion */
.faq-controls {
    margin: var(--space-2) 0 var(--space-1);
    font-size: 0.875rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.faq-controls__btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.faq-controls__btn:hover,
.faq-controls__btn:focus-visible {
    color: var(--color-text);
    text-decoration: none;
    outline: none;
}

/* Weniger Bewegung bei System-Präferenz */
@media (prefers-reduced-motion: reduce) {
    .faq-question {
        transition: none;
    }

    .faq-nav__link {
        transition: none;
    }
}

/* ==========================================================================
   FAQ – Druckansicht
   Alle Antworten im Akkordeon standardmäßig geöffnet anzeigen
   ========================================================================== */

@media print {

    /* Alle Antworten sichtbar machen – hidden ignorieren */
    .faq-answer {
        display: block !important;
        border: 1px solid #000 !important;
        /* im Druck gut sichtbar */
        border-top: none !important;
    }

    .faq-answer[hidden] {
        display: block !important;
    }

    /* Fragen-Header optisch als Block lassen, aber ohne Plus/Minus-Symbol */
    .faq-question::after {
        content: "" !important;
    }

    /* Akkordeon-Items im Druck als „geöffnet“ behandeln */
    .faq-item {
        break-inside: avoid;
    }

    /* Steuerleisten & Sprungnavigation im Druck ausblenden
       (optional – Fokus auf Inhalte) */
    .faq-controls,
    .faq-nav {
        display: none !important;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    margin-top: var(--space-8);
    background: #0d2c1a;
    color: #dfeee6;
    padding: var(--space-6) 0;
}

.footer-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-links a {
    color: #dfeee6;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Informations-Übersicht (/info/)
   ========================================================================== */

/* Sprungleiste für Rubriken */
.info-nav {
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e0e0e0;
    background: #fafafa;
}

.info-nav__kicker {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.info-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.info-nav__item {
    flex: 1 1 auto;
}

/* Ab Tablet: Elemente nicht mehr zwangsweise gleich breit */
@media (min-width: 768px) {
    .info-nav__item {
        flex: 0 0 auto;
    }
}

.info-nav__link {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.55rem 0.9rem 0.55rem 1.1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
    transition:
        background-color 0.18s ease-out,
        border-color 0.18s ease-out,
        color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

/* Dekorativer Balken links – angelehnt an FAQ-Stil */
.info-nav__link::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 4px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.info-nav__link:hover,
.info-nav__link:focus-visible {
    background: #f0f7f3;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.info-nav__link:hover::before,
.info-nav__link:focus-visible::before {
    background: var(--color-primary);
}

.info-nav__link:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.info-nav__link:visited {
    /* Verhindert Lila-auf-Grün-Effekt */
    color: var(--color-text);
}

/* Aktiver Zustand (z. B. serverseitig gesetzt) */
.info-nav__link.is-active {
    background: #e0f3e8;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-nav__link.is-active::before {
    background: var(--color-primary);
}

@media (max-width: 599px) {
    .info-nav {
        padding-inline: 0.75rem;
    }

    .info-nav__list {
        gap: 0.35rem;
    }

    .info-nav__link {
        font-size: 0.9rem;
        padding-block: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Top-Artikel-Zeile oberhalb der Rubriken
   -------------------------------------------------------------------------- */

.info-featured {
    margin-top: 0;
    /* Abstand übernimmt im Wesentlichen die info-nav */
    margin-bottom: var(--space-7);
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: 1rem;
    background: #f5faf7;
    /* sehr leichtes Grün, nahe am Corporate-Style */
    border: 1px solid #e0f0e7;
}

.info-featured__header {
    margin-bottom: var(--space-3);
}

.info-featured__intro {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
    max-width: 40rem;
}

/* Grid für die Top-Artikel: 1 / 2 / 3 Spalten wie bei den Rubrikenkarten */
.teaser-grid.info-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobil: eine Spalte */
    gap: var(--space-4);
}

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

@media (min-width: 1024px) {
    .teaser-grid.info-featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Visuelle Akzentuierung der Top-Artikel-Cards */
.info-card--featured {
    border: 1px solid rgba(0, 107, 51, 0.18);
    /* leicht hervorgehobener Rahmen in Primärfarbe */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.info-card--featured .card-body {
    padding: 1.4rem 1.4rem 1.25rem;
    /* etwas mehr Innenabstand als Standard-Cards */
}

.info-card--featured .info-card__meta {
    color: var(--color-primary);
}

/* Rubrik-Sektionen */
.info-section {
    margin-bottom: var(--space-8);
    /* verhindert, dass Rubrik-Überschriften unter dem sticky Header verschwinden */
    scroll-margin-top: calc(var(--header-height, 64px) + 24px);
}

.info-section:last-of-type {
    margin-bottom: 0;
}

.info-section__header {
    margin-bottom: var(--space-3);
}

.info-section__intro {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
    max-width: 42rem;
}

/* Grid für Karten – gezielt für die Info-Übersicht anpassen */
.info-grid {
    margin-top: var(--space-4);
}

/* höhere Spezifität gegenüber .teaser-grid, damit die Info-Übersicht gewinnt */
.teaser-grid.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobil: eine Spalte */
    gap: var(--space-5);
    /* mehr Luft zwischen den Cards */
}

/* Ab Tablet: 2 Spalten */
@media (min-width: 768px) {
    .teaser-grid.info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ab Desktop: maximal 3 Spalten – mehr werden bewusst unterbunden */
@media (min-width: 1024px) {
    .teaser-grid.info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Karten / Teaser */
.info-card {
    height: 100%;
}

.info-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* CTA am unteren Rand der Card halten */
    row-gap: 0.5rem;
    /* etwas Luft zwischen Meta, Titel, Teaser */
}

/* Bessere Lesbarkeit des Teasertexts in der Info-Übersicht */
.info-card .c-card__text {
    line-height: 1.6;
}

/* Meta-Zeile oberhalb des Titels */
.info-card__meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin: 0 0 0.25rem;
}

.info-card__meta span + span::before {
    content: "•";
    margin: 0 0.375rem;
}

/* CTA-Bereich */
.info-card__link {
    margin-top: var(--space-3);
}

/* CTA-Button kompakter + einzeilig halten */
.info-card__link .btn {
    font-size: 0.9rem;
    padding: 0.35rem 0.85rem;
    white-space: nowrap;
    /* „Zum Artikel“ + Icon bleiben in einer Zeile */
}

.info-card__link .icon {
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.35rem;
}

/* Bewegungen für Nutzer mit reduzierter Bewegung minimieren */
@media (prefers-reduced-motion: reduce) {
    .info-nav__link {
        transition: none;
    }

    .info-nav__link:active {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Feintuning für sehr große Screens (WQHD / 4K)
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {

    /* Mehr Abstand zwischen den Karten auf sehr breiten Viewports */
    .teaser-grid.info-grid {
        gap: var(--space-6);
        /* etwas größer als Standard-Abstand */
    }

    /* Rubrik-Headlines und Einleitung leicht vergrößern */
    .info-section__header h2 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    .info-section__intro {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Kartentitel + Teaser-Text besser lesbar machen */
    .info-card .c-card__title {
        font-size: 1.05rem;
        /* dezent größer */
        line-height: 1.4;
    }

    .info-card .c-card__text {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    /* Meta-Zeile minimal mitziehen */
    .info-card__meta {
        font-size: 0.82rem;
    }

    /* Innenabstände der Cards nur im Info-Bereich leicht erhöhen */
    .info-card .card-body {
        padding: 1.5rem 1.5rem 1.25rem;
        /* mehr Luft, aber CTA bleibt greifbar */
    }

    /* Sprungleiste darf auch etwas „erwachsener“ sein */
    .info-nav__link {
        font-size: 0.98rem;
        padding-block: 0.6rem;
    }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* ≥ 768px (Tablet) */
@media (min-width: 768px) {
    .teaser-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-content {
        padding-top: 10vh;
    }
}

/* ≥ 1024px (Desktop) */
@media (min-width: 1024px) {
    .menu-desktop {
        display: flex;
    }

    .nav-mobile {
        display: none;
    }

    /* Burger nur mobil sichtbar */
    .teaser-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ≥ 1280px – optional weitere Kachel */
@media (min-width: 1280px) {
    .teaser-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === Mobile-Optimierungen < 480px (Hero & Contact-Head ausblenden) === */
@media (max-width: 479px) {

    /* Logo in der Mobil-Ansicht mittig ausrichten (Flex-Item zentrieren) und ein wenig Padding oben + unten */
    .header-bar .logo {
        margin-left: auto;
        margin-right: auto;
        padding: var(--space-2) 0;
    }

    .hero .kicker,
    .hero .lead {
        display: none;
    }

    /* nur Titel + CTA bleiben sichtbar */
    .contact-head {
        display: none;
    }

    /* Telefonnummer/E-Mail im Header ausblenden */
}

/* === Print-Optimierungen (Mobil-Navi, Breadcrumbs, Artikel-Footer/Feedback-Form ausblenden) === */
@media print {

    .nav-mobile,
    .breadcrumbs,
    .article-footer {
        display: none !important;
    }
}

/* ==========================================================================
   Bewegungen reduzieren – respektiert Nutzerpräferenz
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Utility: .external-link (Unicode ↗, U+2197)
   - Kennzeichnet externe Links (Text & Buttons/CTAs) rein per CSS-Pseudo-Element
   - Verwendet U+2197 mit Variation Selector-15 (U+FE0E) -> Textdarstellung (monochrom)
   - Dekorativ: wird von Screenreadern i. d. R. ignoriert (kein zusätzliches ARIA nötig)
   ========================================================================== */

a.external-link,
button.external-link,
.external-link {
    /* generisch, falls Klasse auf span/.btn etc. sitzt */
    position: relative;
    --ext-icon-size: 1em;
    /* Standardgröße am Text ausgerichtet */
    --ext-icon-gap: 0.375em;
    /* Abstand zwischen Text und Symbol */
    --ext-icon-shift: -0.05em;
    /* optische Ausrichtung zur Grundlinie */
}

/* Symbol nachstellen */
.external-link::after {
    /* U+1F517 + U+FE0E (Text-Variante, keine farbige Emoji-Darstellung) */
    content: "\02197\FE0E";
    display: inline-block;
    font: inherit;
    /* übernimmt Schrift (Roboto-Stack) */
    font-size: 0.95em;
    /* dezent kleiner als Text */
    line-height: 1;
    margin-inline-start: var(--ext-icon-gap);
    /* RTL-sicherer Abstand */
    vertical-align: var(--ext-icon-shift);
    /* bessere Baseline-Ausrichtung */
    opacity: 0.9;
    /* leichte Mikrointeraktion (s.u. reduced-motion) */
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

/* Hover/Focus: kleine Bewegung – dezent halten */
.external-link:hover::after,
.external-link:focus-visible::after {
    transform: translate(1px, -1px) rotate(6deg);
    opacity: 1;
}

/* Buttons/CTAs: etwas größere Symbolfläche & anderer Gap passend zu Buttons */
button.external-link::after,
.btn.external-link::after {
    font-size: 1rem;
    /* konsistente Größe in Buttons */
    margin-inline-start: 0.5rem;
    vertical-align: 0;
    /* in Buttons nicht nötig */
}

/* Reduced Motion: Animationen abschalten */
@media (prefers-reduced-motion: reduce) {
    .external-link::after {
        transition: none !important;
        transform: none !important;
    }
}

/* Optional: kompakte/kleine Variante für enge UI-Bereiche
.external-link--sm { --ext-icon-size: .9em; --ext-icon-gap: .3em; --ext-icon-shift: -.06em; }
*/

/* Optional: Symbol vor dem Text (z.B. Sonderfälle)
.external-link--lead::after { order: -1; margin-inline: 0 .4em; }
*/

/* ==========================================================================
   Feedback-Formular
   ========================================================================== */

.article-footer {
    margin-top: var(--space-6);
}

/* Container & Status */
.feedback {
    margin-top: var(--space-4);
    background: var(--color-tablerow);
    padding: var(--space-1);
    border-radius: var(--radius);
}

.feedback-hint {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
    min-height: 1.25em;
    /* Platz reservieren, kein Layout-Sprung */
}

/* Honey-Pot unsichtbar (auch für Screenreader) */
.hp-field {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Wahl-Buttons (Radio) */
.feedback-options {
    margin-top: var(--space-3);
    border: 0;
}

.choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

@media (min-width: 480px) {
    .choices {
        grid-template-columns: repeat(3, 1fr);
    }
}

.choice {
    position: relative;
    display: block;
}

.choice input[type="radio"] {
    /* visuell verstecken, tastaturbedienbar belassen */
    position: absolute;
    opacity: 0;
    inset: 0;
}

/* UI-Kapsel mit Icon + Label */
.choice-ui {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.choice-ui .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

/* Hover/Focus */
.choice:hover .choice-ui,
.choice input[type="radio"]:focus-visible + .choice-ui {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 107, 51, 0.12);
}

/* Zustände je Option */
.choice--positive .choice-ui .icon {
    color: var(--color-primary);
}

.choice--neutral .choice-ui .icon {
    color: var(--color-border);
}

.choice--negative .choice-ui .icon {
    color: var(--color-accent);
}

/* Checked: deutliche Hervorhebung je Option */
.choice--positive input:checked + .choice-ui {
    border-color: var(--color-primary);
    background: color-mix(in oklab, var(--color-primary) 12%, #fff);
    color: var(--color-primary);
}

.choice--neutral input:checked + .choice-ui {
    border-color: var(--color-border);
    background: #fafafa;
    color: #424242;
}

.choice--negative input:checked + .choice-ui {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 12%, #fff);
    color: #9a2a00;
    /* AA-Kontrast zum Akzentton */
}

/* Erfolgsbox nach Submit */
.feedback-success {
    border-left: 4px solid var(--color-primary);
    background: #f1faf4;
}

/* ==========================================================================
   /ausweise/ – Seitenspezifische Ergänzungen
   ========================================================================== */

/* Utilities */
.center {
    text-align: center;
}

.actions {
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
}

/* Liste Block 1: mobil 1-spaltig, ab Desktop 3 */
.list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

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

@media (min-width: 1024px) {
    .list--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.list--checks .icon {
    color: var(--color-primary);
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 auto;
}

/* Markenfläche (Block 2) – dunkler Grünton → Weißer Text (AA) */
.section--brand {
    background: linear-gradient(180deg, #006b33 0%, #00562a 100%);
    color: #ffffff;
    /* AA auf Dunkel */
}

.section--brand :is(h2, p, .lead) {
    color: #ffffff;
}

/* klare Weißführung */

/* Karten-Grid */
.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    [data-product="verbrauch-wg"] {
        order: 1;
    }

    /* Desktop-Reihenfolge */
    [data-product="bedarf"] {
        order: 2;
    }

    [data-product="verbrauch-nwg"] {
        order: 3;
    }
}

/* Karten */
.product-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    padding: var(--space-5);
    color: #ffffff;
    /* Lesbarkeit auf Markenfläche */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-head {
    margin-bottom: var(--space-4);
}

.product-price {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 1.5rem;
}

.product-title {
    margin: 0 0 0.25rem;
    font:
        700 1.15rem/1.2 "Roboto",
        Segoe UI,
        Arial,
        sans-serif;
}

.product-sub {
    margin: 0;
    opacity: 0.9;
}

.product-card .muted {
    color: rgba(255, 255, 255, 0.9);
}

/* Feature-Liste in Karten */
.list--features {
    margin-top: var(--space-4);
}

.list--features .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

/* CTA in Karten */
.product-cta {
    margin: var(--space-6) 0 var(--space-6);
}

.btn--block {
    width: 100%;
    justify-content: center;
}

/* --- Farb-Leitplanke: Bedarfsausweis als Primat -------------------------- */
.product-card--featured {
    background: var(--color-secondary, #32d94b);
    /* Sekundärfläche */
    color: #0b3a1e;
    /* dunkler Text → AA */
    border-color: rgba(0, 0, 0, 0.15);
}

.product-card--featured .product-title,
.product-card--featured .product-price,
.product-card--featured .product-sub {
    color: #0b3a1e;
}

/* Buttons für Karten – dezente Micro-Interaktionen */
.btn--light {
    --btn-bg: transparent;
    --btn-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--btn-color);
}

.btn--light:hover,
.btn--light:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Für Bedarfsausweis auf Sekundärfläche: dunkler Primär-Button mit AA */
.btn--dark {
    --btn-bg: var(--color-primary, #006b33);
    --btn-color: var(--color-primary-contrast, #ffffff);
    color: var(--btn-color);
}

.btn--dark:hover,
.btn--dark:focus-visible {
    background: #00562a;
    color: #ffffff;
}

/* Visuelle Mikro-Interaktionen für alle Buttons (dezent, barrierearm) */
.btn,
.btn--primary,
.btn--secondary,
.btn--ghost,
.btn--light,
.btn--dark {
    transition:
        transform 0.12s ease,
        background-color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.btn:focus-visible {
    outline: 2px solid transparent;
    /* sichtbarer, systemnaher Fokus */
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.65),
        0 0 0 6px rgba(0, 107, 51, 0.6);
}

@media (prefers-reduced-motion: reduce) {

    .btn,
    .btn--light,
    .btn--dark {
        transition: none;
    }
}

/* Fußnote NWG */
.footnote {
    margin-top: var(--space-3);
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ============================================================
   /ausweise/ – Feintuning
   ============================================================ */

/* Utility ist bereits vorhanden, hier nur der Verweis:
   .center { text-align: center } */

/* Preiszusatz in den Karten deutlich kleiner, damit der Preis dominiert */
.product-price .muted {
    font-size: 0.5em;
    /* deutlich verkleinert */
    font-weight: 400;
    opacity: 0.85;
    /* etwas zurückgenommen */
}

/* Kontrast sicherstellen: unterschiedliche Farben je Kartentyp */
.product-card .product-price .muted {
    color: rgba(255, 255, 255, 0.85);
    /* auf dunkler Markenfläche gut lesbar */
}

.product-card--featured .product-price .muted {
    color: #0b3a1e;
    /* auf Sekundärfläche: dunkler Text für AA-Kontrast */
}

/* (bereits vorhanden, aber zur Orientierung)
.section--brand { color:#fff; }            /* weißer Text auf dunklem Grün */
/* .product-card--featured { background: var(--color-secondary); color:#0b3a1e }  */
/* /ausweise/ Block 2 – Lead-Absatz als Block mittig ausrichten */
.section--brand .lead.center {
    margin-left: auto;
    /* Block horizontal zentrieren */
    margin-right: auto;
    /* Block horizontal zentrieren */
    /* max-width: 60ch bleibt bestehen → gute Lesbarkeit */
}

/* Größere Headline in Block 1 (responsiv, AA-konform) */
#b1-title {
    font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem);
    /* mobil → desktop */
    font-family: "Lora", "Times New Roman", serif;
    line-height: 1.2;
    letter-spacing: 0.005em;
}

/* Weniger Weißraum zwischen den Vorteils-Punkten (nur Desktop) */
@media (min-width: 1024px) {
    [aria-labelledby="b1-title"] .list--grid {
        grid-template-columns: repeat(3, 1fr);
        /* bleibt 3-spaltig */
        gap: 0.1rem;
        /* vorher größer → jetzt kompakter */
    }
}

/* ==========================================================================
   Downloads (/download/) – Akkordeon-Listen
   ========================================================================== */

.downloads {
    margin-top: 0;
}

.downloads-header {
    margin-bottom: var(--space-5);
    max-width: 46rem;
}

.downloads-intro {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
}

/* Steuerleiste: „Alle öffnen / Alle schließen“ */

.downloads-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
    color: var(--color-muted);
}

.downloads-controls__label {
    font-weight: 500;
    color: var(--color-text);
}

.downloads-controls__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.downloads-controls__btn:hover {
    background: #f5fbf7;
    border-color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.downloads-controls__btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.downloads-controls__btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Akkordeon-Rahmen */

.downloads-accordion {
    border-radius: var(--radius);
    border: 1px solid #e0e0e0;
    background: #fafafa;
    overflow: hidden;
}

/* Einzelne Kategorie (Details-Element) */

.downloads-category {
    border-bottom: 1px solid #e0e0e0;
}

.downloads-category:last-of-type {
    border-bottom: none;
}

/* Summary-Header der Kategorie */

.downloads-category__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    position: relative;
}

.downloads-category__summary::-webkit-details-marker {
    display: none;
}

.downloads-category__icon .icon {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    color: var(--color-primary);
}

.downloads-category__title {
    font-weight: 700;
    margin-right: 0.25rem;
}

.downloads-category__count {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.downloads-category__toggle-icon {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.downloads-category__toggle-icon .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transition: transform 0.18s ease;
}

/* Zustand: geöffnet – Chevron drehen, Zeile leicht hervorheben */

.downloads-category[open] .downloads-category__summary {
    background: #f5fbf7;
}

.downloads-category[open] .downloads-category__toggle-icon .icon {
    transform: rotate(180deg);
}

/* Panel-Inhalt */

.downloads-category__panel {
    padding: 0 var(--space-4) var(--space-4);
}

.download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.download-list__item {
    margin: 0;
}

/* Komplettes Listenelement als Link – große Klickfläche */

.download-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid #eeeeee;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    text-decoration: none;
    color: var(--color-text);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.download-item:hover {
    background: #f9fbfa;
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.download-item:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Fokus explizit hervorheben (a:focus-visible wird global gestylt) */
.download-item:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.16);
}

/* Icon links (PDF) */

.download-item__icon .icon {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    flex: 0 0 auto;
    color: var(--color-primary);
    margin-top: 0.15rem;
}

/* Textblock */

.download-item__content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    /* verhindert Überlaufen bei langen Titeln */
}

.download-item__title {
    font-weight: 600;
    line-height: 1.4;
}

.download-item__desc {
    font-size: 0.95rem;
    color: var(--color-text);
}

.download-item__meta {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* CTA-Badge rechts */

.download-item__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #f5f5f5;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.download-item__cta-text {
    font-weight: 500;
}

.download-item__cta .icon {
    inline-size: 1rem;
    block-size: 1rem;
}

/* Mobile: CTA unterhalb des Textblocks anordnen */

@media (max-width: 599px) {
    .download-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-item__cta {
        margin-left: 0;
        margin-top: var(--space-2);
    }
}

/* Tablet/Desktop: etwas mehr Luft in der Liste */

@media (min-width: 768px) {
    .download-list {
        gap: var(--space-3);
    }
}

/* Weniger Bewegung bei Nutzerpräferenz „reduce“ */

@media (prefers-reduced-motion: reduce) {

    .downloads-controls__btn,
    .downloads-category__toggle-icon .icon,
    .download-item {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   Print-Styles – Downloads
   - Alle Kategorien im Druck „geöffnet“
   - Links inkl. URL in Klammern
   ========================================================================== */

@media print {

    /* Steuerleiste im Druck ausblenden */
    .downloads-controls {
        display: none !important;
    }

    /* Rahmen & Hintergründe vereinfachen */
    .downloads-accordion {
        border: 0;
        background: #ffffff;
    }

    .downloads-category {
        border: 0;
        page-break-inside: avoid;
    }

    .downloads-category__summary {
        padding: 0 0 0.25rem;
        background: transparent !important;
    }

    .downloads-category__toggle-icon {
        display: none !important;
    }

    /* Panels immer anzeigen, auch wenn <details> geschlossen ist */
    details.downloads-category > .downloads-category__panel {
        display: block !important;
        padding: 0 0 var(--space-3);
    }

    /* Listen-Einträge kompakter und ohne Schatten */
    .download-item {
        border: 0;
        box-shadow: none;
        padding: 0 0 0.35rem;
    }

    .download-item__cta {
        display: none !important;
        /* Download-Button im Druck überflüssig */
    }

    /* Links mit URL in Klammern darstellen */
    .downloads a[href]::after {
        content: " ("attr(href) ")";
        font-size: 0.85em;
    }

    /* Icon etwas dezenter im Druck */
    .download-item__icon .icon {
        inline-size: 1.2rem;
        block-size: 1.2rem;
    }
}

/* ==========================================================================
   Sofort-Tools (Homepage + Sidebar)
   ========================================================================== */

.section--tools {
    background: var(--color-warm);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.tools-intro {
    margin: 0.5rem 0 0;
    max-width: 72ch;
    /* Lesbarkeit */
    color: var(--color-text);
}

.tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile-first */
    gap: var(--space-5);
    margin-top: var(--space-5);
}

@media (min-width: 768px) {
    .tools-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        /* skalierbar für weitere Tools */
    }
}

/* Tool-Card basiert auf .card/.c-card und wird hier nur akzentuiert */
.tool-card {
    border-color: rgba(0, 0, 0, 0.08);
}

.tool-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    color: inherit;
    text-decoration: none;
    /* gesamte Card ist klickbar */
    height: 100%;
}

.tool-card__title {
    margin: 0;
    font:
        700 1.125rem/1.25 "Roboto",
        sans-serif;
    letter-spacing: 0.1px;
}

.tool-card__text {
    margin: 0;
    color: var(--color-muted);
}

.tools-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.72);
    font:
        700 0.8rem/1.2 "Roboto",
        sans-serif;
    letter-spacing: 0.2px;
}

.tools-badge--check {
    color: var(--color-primary);
}

.tools-badge--docs {
    color: #0b3a1e;
}

.tool-card__cta {
    margin-top: auto;
    /* CTA unten ausrichten */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.7);
    font:
        700 0.95rem/1.2 "Roboto",
        sans-serif;
}

/* Hover/Focus: dezent, aber klar */
.tool-card:hover {
    border-color: rgba(0, 107, 51, 0.35);
    box-shadow: var(--shadow);
}

.tool-card__link:hover .tool-card__cta,
.tool-card__link:focus-visible .tool-card__cta {
    border-color: rgba(0, 107, 51, 0.35);
}

/* Sidebar-Box (optional akzentuiert, ohne bestehende Sidebar-Logik zu ändern) */
.c-box--tools {
    /*border-left: 4px solid var(--color-primary);*/
    padding-left: calc(var(--space-5) - 3px);
}

.tools-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: grid;
    gap: var(--space-3);
}

.tools-list__link {
    display: block;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.7);
    color: inherit;
    text-decoration: none;
    /* klare Card-Optik in der Sidebar */
}

.tools-list__title {
    display: block;
    margin-top: 0.35rem;
    font:
        700 1rem/1.25 "Roboto",
        sans-serif;
}

.tools-list__text {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.tools-list__link:hover {
    border-color: rgba(0, 107, 51, 0.35);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .tool-card,
    .tools-list__link {
        transition: none;
        /* Bewegungen deaktivieren */
    }
}

/* ==========================================================================
   Schritt für Schritt ( /ausweise/step/ )
   Ergänzungen ohne Überschreiben bestehender Komponenten
   ========================================================================== */

.step-guide .article-header .meta {
    margin-top: 0.5rem;
}

.step-intro {
    margin-top: var(--space-5);
}

.step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.step-toc {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.step-toc__item {
    display: block;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e5e5e5;
    border-radius: var(--radius);
    background: var(--color-warm);
    text-decoration: none;
    color: var(--color-text);
}

.step-toc__item:hover,
.step-toc__item:focus-visible {
    border-color: var(--color-primary);
}

.step-media {
    margin-top: var(--space-6);
}

.step-figure {
    margin: var(--space-4) 0 0;
}

.step-figure__link {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: var(--color-warm);
    text-decoration: none;
}

.step-figure__hint {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-end: var(--space-3);
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.85rem;
}

.step-figure__caption {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.step-steps {
    margin-top: var(--space-6);
}

.stepper {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: grid;
    gap: var(--space-4);
}

.stepper__panel {
    border: 1px solid #e5e5e5;
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    scroll-margin-top: calc(var(--header-height) + 16px);
    /* Sticky Header Offset */
}

.stepper__panel[open] {
    border-color: rgba(0, 107, 51, 0.35);
}

.stepper__summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: var(--space-4);
    cursor: pointer;
    background: var(--color-warm);
}

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

.stepper__num {
    inline-size: 2.1rem;
    block-size: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
}

.stepper__title {
    font-weight: 700;
}

.stepper__hint {
    grid-column: 2;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.stepper__body {
    padding: var(--space-5);
    background: var(--color-bg);
}

.step-callout {
    background: var(--color-warm);
    border-color: rgba(0, 107, 51, 0.2);
}

.step-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.step-card {
    background: var(--color-bg);
}

.step-subtitle {
    margin: var(--space-4) 0 var(--space-2);
    font:
        700 1rem/1.3 "Roboto",
        sans-serif;
}

.c-list {
    margin: 0;
    padding-left: 1.25rem;
}

.c-list li + li {
    margin-top: 0.35rem;
}

/* Tablet */
@media (min-width: 768px) {
    .step-toc {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-compare {
        grid-template-columns: repeat(2, 1fr);
    }

    .stepper__summary {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .stepper__hint {
        grid-column: auto;
        justify-self: end;
        text-align: right;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .step-toc {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Podcasts
   ========================================================================== */

.podcast-player {
    margin-top: var(--space-5);
    border-left: 4px solid var(--color-primary);
}

.podcast-player__now {
    margin: 0 0 var(--space-3);
}

.podcast-player__label {
    color: var(--color-muted);
    font-weight: 500;
}

.podcast-audio {
    width: 100%;
    margin-top: var(--space-3);
}

.podcast-player__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.podcast-grid {
    margin-top: var(--space-6);
}

.podcast-card__kicker {
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font:
        500 0.9rem/1.2 "Roboto Condensed",
        "Roboto",
        sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.podcast-card__title {
    margin: 0 0 var(--space-2);
}

.podcast-card__title a {
    text-decoration: none;
}

.podcast-card__title a:hover,
.podcast-card__title a:focus-visible {
    text-decoration: underline;
}

.podcast-card__text {
    margin: 0 0 var(--space-4);
}

.podcast-card__meta {
    margin: 0 0 var(--space-4);
}

.podcast-card__meta-row {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
}

.podcast-card__meta-row + .podcast-card__meta-row {
    margin-top: 0.25rem;
}

.podcast-card__meta dt {
    min-width: 5.5rem;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.podcast-card__meta dd {
    margin: 0;
    font-size: 0.95rem;
}

.podcast-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.podcast-card:focus-within {
    outline: 2px solid rgba(0, 107, 51, 0.35);
    outline-offset: 3px;
}

.podcast-card.is-active {
    border-color: rgba(0, 107, 51, 0.45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.podcast-card.is-playing {
    border-color: rgba(50, 217, 75, 0.55);
}

/* ======================================================================
   Podcasts: Grid Override
   Fix für schmale Cards bei wenigen Episoden und im Layout mit Sidebar
   ====================================================================== */

.teaser-grid.podcast-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
}

/* Tablet */
@media (min-width: 768px) {
    .teaser-grid.podcast-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .teaser-grid.podcast-grid {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }
}

/* Schutz vor Textabschneidung in Grid Items */
.podcast-card {
    min-width: 0;
}

.podcast-card__title,
.podcast-card__text,
.podcast-card__meta dd {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Dark Mode – optional per prefers-color-scheme (AA-Kontraste)
   (unten ergänzt: Linkfarben & bunter CTA)
   Dieser Block muss am Dateiende stehen, damit er die späteren
   Light Defaults (z. B. background: #fff) sicher überschreibt.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0b1f14;
        /* dunkler Grund */
        --color-text: #e6f2ec;
        /* hoher Kontrast */
        --color-muted: #b7c7bf;
        --color-border: #2e4a3d;

        --color-warm: #13281f;
        /* dezente Flächen */
    }

    body {
        background: var(--color-bg);
        color: var(--color-text);
    }

    .site-header {
        background: #0f261a;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .nav-link:hover,
    .nav-link:focus-visible {
        background: #10261c;
    }

    .submenu {
        background: #10261c;
        border-color: #2e4a3d;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }

    .submenu li a:hover,
    .submenu li a:focus-visible {
        background: var(--color-border);
    }

    .card,
    .c-card,
    .box,
    .c-box {
        background: #13281f;
        border-color: #2e4a3d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .section--alt {
        background: #0e2219;
    }

    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row textarea {
        background: #0f2018;
        border-color: #345846;
        color: var(--color-text);
    }

    .footer-links a {
        color: #dfeee6;
    }

    .site-footer {
        background: #08170f;
        color: #dfeee6;
    }

    .field-error {
        color: #ffb79a;
    }

    /* === Linkfarben im Dark Mode für AA-Kontrast === */
    a {
        color: #8ee4a0;
        text-decoration-color: rgba(142, 228, 160, 0.5);
    }

    a:hover {
        color: #b1f0c1;
        text-decoration-color: currentColor;
    }

    a:visited {
        color: #7ad692;
    }

    /* ======================================================================
   Dark Mode Ergänzungen: Navigation, Cards, Formulare, Sidebar, Info, FAQ,
   Downloads, Tabellen, Blockquote
   Einfügen innerhalb von: @media (prefers-color-scheme: dark) { ... }
   ====================================================================== */

    /* System UI im Dark Mode korrekt rendern (Form Controls etc.) */
    :root {
        color-scheme: dark;

        /* bislang im Dark Mode nicht überschrieben, führt sonst zu hellen Flächen */
        --color-tablerow: #10261c;

        /* Komponenten, die var(--shadow) nutzen, brauchen im Dark Mode mehr Tiefe */
        --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }

    /* Header Bar und Navigation */
    .site-nav {
        background: #0f261a;
        border-top-color: #2e4a3d;
    }

    /* Hover im Header nicht in dunklem Primärgrün, sondern in heller Linkfarbe */
    .contact-link:hover,
    .contact-link:focus-visible {
        color: #b1f0c1;
    }

    /* Aktive Navigation nicht in dunklem Primärgrün (Kontrastproblem) */
    .nav-link.is-active,
    .nav-link[aria-current="page"] {
        color: #8ee4a0;
    }

    /* Mobile Navigation (details) */
    .nav-mobile {
        background: #0f261a;
    }

    .nav-mobile > summary {
        color: var(--color-text);
    }

    /* Cards und Boxen: Textfarbe absichern */
    .card,
    .c-card,
    .box,
    .c-box {
        color: var(--color-text);
    }

    /* Artikel Cards und Tool Cards: harte Hellwerte in Sub Elementen neutralisieren */
    .tools-badge,
    .tool-card__cta,
    .tools-list__link {
        background: rgba(255, 255, 255, 0.06);
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    .tool-card {
        border-color: #2e4a3d;
    }

    /* Buttons: Default Varianten im Dark Mode kontrastreich */
    .btn {
        --btn-bg: rgba(255, 255, 255, 0.08);
        --btn-color: var(--color-text);
    }

    .btn--ghost {
        border-color: #2e4a3d;
    }

    /* Button Bedarfsausweis unter Energieausweise */
    .product-card--featured .btn--dark {
        border-color: #2e4a3d;
        background: #006b33;
    }

    /* Formulare: zusätzliche Feldtypen + Placeholder */
    .form-row input[type="tel"],
    .form-row input[type="url"],
    .form-row input[type="number"],
    .form-row input[type="password"],
    .form-row input[type="search"],
    .form-row select {
        background: #0f2018;
        border-color: #345846;
        color: var(--color-text);
    }

    .form-row input::placeholder,
    .form-row textarea::placeholder {
        color: rgba(183, 199, 191, 0.85);
    }

    /* Feedback Formular (Artikelseiten) */
    .feedback {
        background: #0e2219;
        border: 1px solid #2e4a3d;
    }

    .choice-ui {
        background: #13281f;
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    .choice:hover .choice-ui,
    .choice input[type="radio"]:focus-visible + .choice-ui {
        border-color: rgba(142, 228, 160, 0.55);
        box-shadow: 0 0 0 4px rgba(142, 228, 160, 0.18);
    }

    .choice--positive .choice-ui .icon,
    .choice--neutral .choice-ui .icon {
        color: #8ee4a0;
    }

    .choice--positive input:checked + .choice-ui {
        border-color: rgba(142, 228, 160, 0.75);
        background: rgba(142, 228, 160, 0.12);
        color: var(--color-text);
    }

    .choice--neutral input:checked + .choice-ui {
        border-color: #345846;
        background: rgba(183, 199, 191, 0.1);
        color: var(--color-text);
    }

    .choice--negative input:checked + .choice-ui {
        border-color: rgba(255, 81, 0, 0.85);
        background: rgba(255, 81, 0, 0.14);
        color: var(--color-text);
    }

    /* Breadcrumbs: Separator im Dark Mode sichtbar halten */
    .breadcrumbs li + li::before {
        color: rgba(183, 199, 191, 0.75);
    }

    /* Info Übersicht: Rubriken Navigation und Featured Band */
    .info-nav {
        background: #0e2219;
        border-color: #2e4a3d;
    }

    .info-nav__link {
        background: #13281f;
        border-color: #2e4a3d;
        color: var(--color-text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .info-nav__link:hover,
    .info-nav__link:focus-visible {
        background: #10261c;
        border-color: rgba(142, 228, 160, 0.45);
        color: #b1f0c1;
    }

    .info-nav__link.is-active {
        background: rgba(142, 228, 160, 0.1);
        border-color: rgba(142, 228, 160, 0.55);
        color: #b1f0c1;
    }

    .info-featured {
        background: #0e2219;
        border-color: #2e4a3d;
    }

    .info-card--featured {
        border-color: rgba(142, 228, 160, 0.28);
    }

    .info-card--featured .info-card__meta {
        color: #8ee4a0;
    }

    /* FAQ Themen Navigation und Akkordeon */
    .faq-nav {
        background: #0e2219;
    }

    .faq-nav__link {
        background: #13281f;
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    .faq-nav__link:hover {
        background: #10261c;
        border-color: rgba(142, 228, 160, 0.45);
    }

    .faq-question {
        background: #13281f;
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    .faq-item.is-open .faq-question {
        background: #10261c;
    }

    .faq-answer {
        background: #0f2018;
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    .faq-controls__btn {
        color: #8ee4a0;
    }

    .faq-controls__btn:hover,
    .faq-controls__btn:focus-visible {
        color: #b1f0c1;
    }

    /* Downloads: Steuerleiste, Akkordeon, Listeneinträge */
    .downloads-controls__btn {
        background: #13281f;
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    .downloads-controls__btn:hover {
        background: #10261c;
        border-color: rgba(142, 228, 160, 0.45);
    }

    .downloads-accordion {
        background: #0e2219;
        border-color: #2e4a3d;
    }

    .downloads-category {
        border-bottom-color: #2e4a3d;
    }

    .downloads-category[open] .downloads-category__summary {
        background: #10261c;
    }

    .downloads-category__icon .icon,
    .download-item__icon .icon {
        color: #8ee4a0;
    }

    .download-item {
        background: #13281f;
        border-color: #2e4a3d;
        color: var(--color-text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .download-item:hover {
        background: #10261c;
        border-color: rgba(142, 228, 160, 0.45);
    }

    .download-item__meta {
        color: var(--color-muted);
    }

    .download-item__cta {
        background: rgba(255, 255, 255, 0.06);
        border-color: #2e4a3d;
        color: var(--color-text);
    }

    /* Tabellen */
    table {
        background-color: #13281f;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    }

    table caption {
        color: var(--color-muted);
    }

    table td {
        color: var(--color-text);
    }

    table tbody tr:nth-child(even) {
        background-color: #10261c;
    }

    /* Blockquote */
    blockquote {
        background-color: #10261c;
        border-left-color: #32d94b;
        color: var(--color-text);
    }

    /* Bildunterschriften */
    figcaption {
        color: var(--color-muted);
    }

    /* Ergänzung: Feedback-Erfolgsbox (war bislang im kleinen Dark-Mode-Block) */
    .feedback-success {
        background: #0f261a;
        border-left-color: #2e4a3d;
        color: var(--color-text);
    }

    /* Ergänzung: Tools-Sektion (war bislang im kleinen Dark-Mode-Block) */
    .section--tools {
        background: #0e2219;
        border-top-color: #2e4a3d;
        border-bottom-color: #2e4a3d;
    }

    .tools-intro {
        color: #dfeee6;
    }

    .tools-list__text,
    .tool-card__text {
        color: rgba(223, 238, 230, 0.78);
    }

    .tool-card:hover,
    .tools-list__link:hover {
        border-color: rgba(142, 228, 160, 0.35);
    }
}