/* ========================================================================
   Gartenfreunde Design System (GDS)
   ========================================================================

   Datei:
   custom_season_base.css

   Version:
   1.2.20 · Bücherwelt Cover-Sonderlayout 1.0 · Natur & Gartenleben Tierporträt Goldstandard 1.0 · Hero-Textbox Theme-Bridge · GGW Kategorie-Intro-Komponente 1.0 · GGW Kategorieblog Goldstandard 1.0 · Universelle Theme-Partikelbühne · Footer im Seitenhintergrund · 8er-Raster 24px · Theme Studio Bridge 1.0 · Modulwrapper FINAL transparent · Durchgehender Seitenhintergrund · Ebenenarchitektur Goldstandard · Theme Engine 2.0 · Header-Architektur FINAL / Entwicklungsstand GDS Header v0.8 / Navigation v2.1 Mobile Menü oben links / Infoleiste v1.0 / Hero-Position v0.1 / Quickinfo xwide / M003 Integration v1.0 / M005 Integration v1.0 / M006 Seitenrhythmus v0.2 / M009 Integration v1.0 / M010 Integration v1.0 / M011 Integration v1.0 / F001 Schriftgrößenumschaltung v1.0 / Section Spacing v0.1 / Seitenlayout Kontakt v0.4 / Kontaktcenter v1.2 / Seitenlayout Vorstand v0.1 / M007 Dokumentencenter v1.1 / M008 Strukturierte Inhaltsseite v1.0 / R010 Vereinsgeschichte v0.3 Vorschaugalerie mit Lightbox / C014 Responsive Tabelle v1.0 / C015 Redaktioneller Inhaltsabschnitt v0.3 Magazinreportage

   Projekt:
   Webseite Gartenfreunde Rendsburg e.V.

   Projektleitung:
   Sven Traichel

   Technische Architektur:
   Kira & Sven

   ------------------------------------------------------------------------
   BESCHREIBUNG

   Diese Datei enthält ausschließlich saisonunabhängige CSS-Regeln.

   Nicht enthalten:
   - feste Farben
   - Jahreszeiten
   - Spezialeffekte

   Farben und saisonale Werte werden ausschließlich über Theme-Dateien
   und CSS-Variablen gesteuert.

======================================================================== */


/* ========================================================================
   01 RESET & GRUNDLAGEN
======================================================================== */

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

html,
body {
    margin: 0;
    padding: 0;
}

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

input,
button,
textarea,
select {
    font: inherit;
}


/* ========================================================================
   02 TYPOGRAFIE
======================================================================== */

body {
    line-height: 1.6;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    line-height: 1.3;
    font-weight: 700;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}


/* ========================================================================
   03 LAYOUT
======================================================================== */

/* Goldstandard: Der Verlauf wird genau einmal auf body gezeichnet.
   Alle darunterliegenden Seiten- und Modulflächen bleiben transparent. */
body {
    background: var(--gds-page-background);
}

#sp-main-body,
.gds-main-content {
    background: transparent;
}

.gds-layout {
    width: 100%;
}

.gds-layout-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}



/* ========================================================================
   GDS THEME STUDIO BRIDGE 1.0
======================================================================== */

/*
   Verbindliche Zuständigkeit:
   - Das System-Plugin liest theme.json und liefert ausschließlich Laufzeitwerte.
   - Diese CSS-Dateien bestimmen, wo Farben und Verläufe eingesetzt werden.
   - Transparenz, Blur, Schatten, Rundungen, Assets und Animationen bleiben CSS.
   - Jede Theme-Datei enthält weiterhin ihre bisherigen Werte als Fallback.
*/

/* ========================================================================
   GDS THEME ENGINE 2.0 – OFFIZIELLE SCHNITTSTELLE
   Sprint 1: Header · Navigation · Infoleiste
======================================================================== */

/*
   Architekturregel:
   - Die Base enthält Struktur und Komponenten.
   - Theme-Dateien liefern ausschließlich Werte für diese Variablen.
   - Die Fallbacks halten bestehende ältere Themes kompatibel.
*/

:root {
    /* Ebenenarchitektur:
       Seite = Hintergrundverlauf
       Module = transparent
       Karten / Panels = Theme-Oberflächen */
    --gds-page-background: transparent;

    /* Gemeinsamer Theme-Kopf: Markenheader + Navigation + optionale Infoleiste */
    --gds-theme-head-background: transparent;
    --gds-theme-head-left-image: none;
    --gds-theme-head-right-image: none;
    --gds-theme-head-left-width: 0px;
    --gds-theme-head-right-width: 0px;
    --gds-theme-head-left-height: 0px;
    --gds-theme-head-right-height: 0px;
    --gds-theme-head-left-position: left top;
    --gds-theme-head-right-position: right top;
    --gds-theme-head-left-size: contain;
    --gds-theme-head-right-size: contain;
    --gds-theme-head-decoration-opacity: 1;
    --gds-theme-head-decoration-filter: none;

    /* Gemeinsamer saisonaler Übergangsraum nach der Navigation.
       Standardmäßig ohne zusätzliche Höhe; aktive Themes können den Wert
       passend zu ihren Dekorationen überschreiben. */
    --gds-theme-transition-min-height: 0px;

    /* Markenheader */
    --gds-header-background: var(--gds-header-gradient, var(--header-bg, transparent));
    --gds-header-text: var(--gds-text-primary, var(--text, inherit));
    --gds-header-muted: var(--gds-text-secondary, var(--muted, inherit));
    --gds-header-accent: var(--gds-link, var(--accent-dark, currentColor));
    --gds-header-border-color: var(--gds-border-soft, var(--border-card, transparent));
    --gds-header-shadow: var(--gds-shadow-header, var(--shadow-soft, none));
    --gds-header-tool-background: var(--gds-surface-card, var(--card, transparent));
    --gds-header-tool-hover-background: var(--gds-surface-muted, var(--header-bg, transparent));

    /* Navigation */
    --gds-navigation-background: var(--gds-navigation-gradient, var(--gds-header-background));
    --gds-navigation-text: var(--menu-text, inherit);
    --gds-navigation-border-color: var(--gds-header-border-color);
    --gds-navigation-shadow: var(--gds-shadow-header, none);
    --gds-navigation-backdrop-filter: none;
    --gds-navigation-radius: 0;
    --gds-navigation-item-radius: 14px;
    --gds-navigation-dropdown-radius: 16px;
    --gds-navigation-dropdown-item-radius: 10px;
    --gds-navigation-dropdown-padding: 8px;
    --gds-navigation-dropdown-item-gap: 3px;
    --gds-navigation-dropdown-backdrop-filter: blur(18px) saturate(1.14);
    --gds-navigation-dropdown-hover-shadow: none;

    /* Infoleiste */
    --gds-infoleiste-wrapper-bg: transparent;
    --gds-infoleiste-bg: var(--gds-surface-card, var(--card, transparent));
    --gds-infoleiste-text: var(--gds-text-primary, var(--text, inherit));
    --gds-infoleiste-border: var(--gds-border-soft, var(--border-card, transparent));
    --gds-infoleiste-divider: var(--gds-border-soft, var(--border-card, transparent));
    --gds-infoleiste-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    --gds-infoleiste-label-bg: var(--accent-dark, transparent);
    --gds-infoleiste-label-text: var(--menu-active-text, inherit);
    --gds-infoleiste-label-border: var(--gds-infoleiste-label-bg);
    --gds-infoleiste-label-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    --gds-infoleiste-radius: 10px;
    --gds-infoleiste-label-radius: 10px;
    --gds-infoleiste-transition: .22s ease;
}

/* ========================================================================
   GDS EBENENARCHITEKTUR – GOLDSTANDARD
======================================================================== */

/*
   Ebene 1: body / #sp-main-body
            durchgehender Hintergrund über --gds-gradient-background

   Ebene 2: Modul- und Positionswrapper
            transparent; sie liefern nur Struktur und Abstände

   Ebene 3: Karten, Panels und Boxen
            behalten ihre Theme-Oberflächen und den Sekundärverlauf
*/

#sp-main-body,
.gds-main-content,
.gds-quickinfo-wrapper,
.gds-content-wrapper,
.gds-partners-wrapper,
.gds-gallery-wrapper,
.gds-module--quickinfo,
.gds-module--content-panel,
#gds-m009-showcase,
.gds-module--partners,
.gds-module--gallery {
    background: transparent;
}


/* ========================================================================
   GDS ABSCHNITTSABSTÄNDE
======================================================================== */

/*
   Einheitlicher vertikaler Rhythmus für aufeinanderfolgende Hauptmodule.

   Der Abstand wird an den Modulgrenzen eingesetzt, damit nicht gleichzeitig
   der untere Abstand des vorherigen und der obere Abstand des folgenden
   Moduls zusammenwirken.
*/

:root {
    --gds-section-spacing: 24px;
}

/* ========================================================================
   04 CONTAINER
======================================================================== */

.gds-container {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.gds-container--narrow {
    max-width: 900px;
}

.gds-container--wide {
    max-width: 1300px;
}

.gds-container--full {
    max-width: none;
}

.gds-container--xwide {
    max-width: 1600px;
}


/* ========================================================================
   05 KARTEN / BOXEN
======================================================================== */

.gds-card {
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    padding: 28px;
    margin-bottom: 24px;
}

.gds-card--compact {
    padding: 16px;
}

.gds-card--large {
    padding: 32px;
}

.gds-card--highlight {
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-card__header {
    margin-bottom: 16px;
}

.gds-card__title {
    margin-bottom: 8px;
}

.gds-card__body > :last-child {
    margin-bottom: 0;
}


/* ========================================================================
   06 BUTTONS & LINKS
======================================================================== */

.gds-link {
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-weight: 600;
    text-decoration: none;
}

.gds-link:hover,
.gds-link:focus {
    color: var(--gds-link-hover, var(--accent, currentColor));
    text-decoration: underline;
}

.gds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 40px;
    padding: 8px 16px;

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;

    background: var(--gds-button-bg, var(--accent, transparent));
    color: var(--gds-button-text, var(--menu-active-text, inherit));

    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gds-button:hover,
.gds-button:focus {
    background: var(--gds-button-hover-bg, var(--accent-dark, transparent));
    color: var(--gds-button-hover-text, var(--menu-active-text, inherit));
    text-decoration: none;
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-button:active {
    transform: translateY(1px);
}

.gds-button--secondary {
    background: var(--gds-button-secondary-bg, var(--header-bg, transparent));
    color: var(--gds-button-secondary-text, var(--text, inherit));
}

.gds-button--ghost {
    background: transparent;
    color: var(--gds-link, var(--accent-dark, currentColor));
}

.gds-button--small {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 1.02rem;
}

.gds-button--large {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 1.05rem;
}

.gds-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ========================================================================
   07 KONTAKTKARTEN / PERSONENKARTEN
======================================================================== */

/*
   Die gds-contact-card ist die erste fachliche GDS-Komponente.

   Einsatzbereiche:
   - Vorstand
   - erweiterter Vorstand
   - Ansprechpartner
   - Obleute
   - Vereinsfachberater
   - Kontaktpersonen

   Wichtig:
   Die Komponente enthält keine festen Farben.
   Farben, Rahmen und Schatten kommen aus dem aktiven Theme.
*/

.gds-contact-list {
    display: grid;
    gap: 16px;
}

.gds-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 14px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    padding: 14px 16px;
}

.gds-contact-card__icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--gds-contact-icon-bg, var(--accent, transparent));
    color: var(--gds-contact-icon-text, var(--menu-active-text, inherit));

    font-size: 1.12rem;
    line-height: 1;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-contact-card__content {
    flex: 1 1 auto;
    min-width: 0;
}

.gds-contact-card__title {
    margin: 0 0 4px 0;
    font-weight: 700;
    color: var(--gds-text-primary, var(--text, inherit));
}

.gds-contact-card__name {
    font-weight: 600;
}

.gds-contact-card__meta {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-contact-card__link {
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-weight: 600;
    text-decoration: none;

    /* Lange E-Mail-Adressen und URLs sauber umbrechen */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gds-contact-card__link:hover,
.gds-contact-card__link:focus {
    color: var(--gds-link-hover, var(--accent, currentColor));
    text-decoration: underline;
}

@media (max-width: 600px) {
    .gds-contact-card {
        gap: 12px;
        padding: 12px 14px;
    }

    .gds-contact-card__icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
}



/* ========================================================================
   08 KONTAKTGRUPPEN
======================================================================== */

/*
   Kontaktgruppen bündeln mehrere Contact Cards unter einer gemeinsamen
   Überschrift.

   Einsatzbereiche:
   - Ansprechpartner je Anlage
   - Vorstand / erweiterter Vorstand
   - Arbeitsgruppen
   - Obleute

   Die Gruppe selbst enthält keine festen Farben.
*/

.gds-contact-group {
    margin-bottom: 24px;
}

.gds-contact-group:last-child {
    margin-bottom: 0;
}

.gds-contact-group__title {
    margin: 0 0 10px 0;
    color: var(--gds-text-primary, var(--accent-dark, inherit));
    font-size: 1rem;
    font-weight: 700;
}

.gds-contact-group__description {
    margin: 0 0 12px 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-contact-group .gds-contact-card {
    margin-bottom: 0;
}

/* ========================================================================
   09 DOWNLOAD CARDS
======================================================================== */

/*
   C008 Download Card

   Einsatzbereiche:
   - Anträge
   - Formulare
   - Satzungen und Ordnungen
   - Merkblätter
   - Versicherungsunterlagen
   - sonstige Downloads

   Die Komponente enthält keine festen Farben.
   Farben, Rahmen und Schatten kommen aus dem aktiven Theme.
*/

.gds-download-list {
    display: grid;
    gap: 14px;
}

.gds-download-group {
    margin-bottom: 28px;
}

.gds-download-group:last-child {
    margin-bottom: 0;
}

.gds-download-group__title {
    margin: 0 0 12px 0;
    color: var(--gds-text-primary, var(--accent-dark, inherit));
    font-size: 1.2rem;
    font-weight: 700;
}

.gds-download-group__description {
    margin: 0 0 14px 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-download-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 14px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    padding: 16px;
}

.gds-download-card__icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--gds-download-icon-bg, var(--accent, transparent));
    color: var(--gds-download-icon-text, var(--menu-active-text, inherit));

    font-size: 1.35rem;
    line-height: 1;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-download-card__content {
    min-width: 0;
}

.gds-download-card__title {
    margin: 0 0 4px 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1rem;
    font-weight: 700;
}

.gds-download-card__description {
    margin: 0 0 4px 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-download-card__meta {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .9rem;
}

.gds-download-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 720px) {
    .gds-download-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        gap: 14px;
    }

    .gds-download-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 60px;
    }
}

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

    .gds-download-card__icon {
        width: 42px;
        height: 42px;
    }

    .gds-download-card__actions {
        grid-column: auto;
        padding-left: 0;
    }

    .gds-download-card__actions .gds-button {
        width: 100%;
    }
}

/* ========================================================================
   10 RESOURCE CARDS
======================================================================== */

/*
   C009 Resource Card

   Einsatzbereiche:
   - Partnerseiten
   - Social-Media-Angebote
   - Vereinsnetzwerke
   - Bücher und Informationsangebote
   - interne oder externe Ressourcen
   - spätere Inhalte für Günnis Gartenwelt

   Die Komponente enthält keine festen Farben.
   Farben, Rahmen und Schatten kommen aus dem aktiven Theme.

   Aufbau:
   - Bild oder Logo
   - Titel
   - optionale Beschreibung
   - optionale Metadaten
   - Aktionsbereich mit bestehendem GDS-Button
*/

.gds-resource-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.gds-resource-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-resource-card:hover,
.gds-resource-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-resource-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;

    background: var(--gds-surface-muted, var(--header-bg, transparent));
    border-bottom: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}

.gds-resource-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gds-resource-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px;
}

.gds-resource-card__title {
    margin: 0 0 8px 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.1rem;
    font-weight: 700;
}

.gds-resource-card__description {
    margin: 0 0 10px 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-resource-card__meta {
    margin: 0 0 16px 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .9rem;
}

.gds-resource-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.gds-resource-card__actions .gds-button {
    width: 100%;
}

@media (max-width: 900px) {
    .gds-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .gds-resource-grid {
        grid-template-columns: 1fr;
    }

    .gds-resource-card__body {
        padding: 16px;
    }
}

/* ========================================================================
   11 FORMS
======================================================================== */

/*
   C010 Form

   Einsatzbereiche:
   - Kontaktformular
   - Gartenanfrage
   - Mitgliedsantrag
   - Feedbackformular
   - Newsletter
   - spätere Formulare für Günnis Gartenwelt

   Das GDS steuert ausschließlich Struktur und Darstellung.
   Validierung, Versandlogik und Erfolgsmeldungen bleiben Aufgabe
   des jeweiligen Joomla-Moduls oder der Formularerweiterung.

   Die Komponente enthält keine festen Farben.
   Farben, Rahmen und Schatten kommen aus dem aktiven Theme.
*/

.gds-form {
    display: grid;
    gap: 18px;
}

.gds-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.gds-form__group {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.gds-form__label {
    color: var(--gds-text-primary, var(--text, inherit));
    font-weight: 700;
}

.gds-form__required {
    color: var(--gds-form-required, var(--accent, currentColor));
}

.gds-form__input,
.gds-form__select,
.gds-form__textarea {
    width: 100%;
    min-width: 0;

    background: var(--gds-form-field-bg, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;

    padding: 10px 12px;

    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.gds-form__textarea {
    min-height: 150px;
    resize: vertical;
}

.gds-form__input:focus,
.gds-form__select:focus,
.gds-form__textarea:focus {
    outline: none;
    border-color: var(--gds-form-focus-border, var(--accent, currentColor));
    box-shadow: 0 0 0 3px var(--gds-form-focus-ring, transparent);
}

.gds-form__hint,
.gds-form__error {
    margin: 0;
    font-size: .9rem;
}

.gds-form__hint {
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-form__error {
    color: var(--gds-form-error, currentColor);
    font-weight: 600;
}

.gds-form__choices {
    display: grid;
    gap: 10px;
}

.gds-form__choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--gds-text-primary, var(--text, inherit));
}

.gds-form__choice input {
    flex: 0 0 auto;
    margin-top: .25em;
}

.gds-form__choice label {
    cursor: pointer;
}

.gds-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.gds-form__input[disabled],
.gds-form__select[disabled],
.gds-form__textarea[disabled] {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .gds-form__row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .gds-form__actions {
        flex-direction: column;
    }

    .gds-form__actions .gds-button {
        width: 100%;
    }
}

/* ========================================================================
   GDS HERO-POSITION
======================================================================== */

/*
   Eigenständige Template-Position für M001.

   Aufgabe:
   - trennt den GDS-Hero vollständig von alten Helix-Positionen wie "title"
   - stellt eine projektübergreifend wiederverwendbare Position bereit
   - liefert das aktuell vereinbarte Hero-Bild nur als austauschbaren Fallback
   - greift nicht in den alten Slider oder das Helix-Layout ein
*/

.gds-hero-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;

    --gds-hero-image: url("/images/headers/1234_normal.jpg");
}

.gds-hero-wrapper > .moduletable,
.gds-hero-wrapper > [class*="moduletable"],
.gds-hero-wrapper > .module,
.gds-hero-wrapper > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gds-hero-wrapper .gds-module--hero {
    width: 100%;
    margin: 0;
}


/* ========================================================================
   12 MODULE M001 HERO
======================================================================== */

/*
   M001 Hero
   Version 1.0 · Abgeschlossene GDS-Fassung

   Das Hero-Bild wird im aktuellen Test über eine CSS-Variable im HTML
   gesetzt. Später übernimmt das aktive Saison-Theme diese Variable.
*/

.gds-module {
    width: 100%;
}

.gds-module--hero {
    position: relative;
    min-height: clamp(520px, 68vh, 760px);
    display: grid;
    overflow: hidden;
    isolation: isolate;
}

.gds-module--hero .gds-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image: var(--gds-hero-image, none);
    background-position: var(--gds-hero-position, center);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--gds-surface-muted, var(--header-bg, transparent));
}

.gds-module--hero .gds-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gds-hero-overlay, transparent);
}

.gds-module--hero .gds-hero__inner {
    width: 100%;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    padding-top: clamp(12px, 2vw, 20px);
    padding-bottom: 40px;
    padding-left: 20px;
}

.gds-module--hero .gds-hero__content {
    width: min(100%, 580px);
    margin-bottom: 0;

    background: var(--gds-surface-card, var(--card, transparent));

    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.gds-module--hero .gds-hero__eyebrow {
    margin: 0 0 10px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-weight: 700;
}

.gds-module--hero .gds-hero__title {
    margin-bottom: 16px;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    font-weight: 700;
}

.gds-module--hero .gds-hero__text {
    max-width: 58ch;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.gds-module--hero .gds-hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.gds-module--hero .gds-hero__actions .gds-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .gds-module--hero {
        min-height: auto;
        display: block;
    }

    .gds-module--hero .gds-hero__media {
        position: relative;
        min-height: 280px;
    }

    .gds-module--hero .gds-hero__inner {
        min-height: 0;
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }

    .gds-module--hero .gds-hero__content {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        background: var(--gds-surface-card, var(--card, transparent));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 700px) {
    .gds-module--hero .gds-hero__actions {
        flex-direction: column;
        align-items: start;
    }

    .gds-module--hero .gds-hero__actions .gds-button {
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .gds-module--hero .gds-hero__media {
        min-height: 220px;
    }
}

/* ========================================================================
   13 COMPONENT C011 INFO CARD
======================================================================== */

/*
   C011 Info Card
   Version 1.0 · Abgeschlossene GDS-Fassung

   Universelle Informationskarte für Kennzahlen, Termine, Wetter,
   Links, Social Media, Downloads und vergleichbare Kurzinformationen.

   Die Komponente kennt keine festen Farben.
   Die Tonstufen werden ausschließlich durch das aktive Theme geliefert.
*/

.gds-info-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.gds-info-card {
    --gds-info-card-background: var(--gds-info-tone-1, var(--gds-surface-card, var(--card, transparent)));
    --gds-info-card-text: var(--gds-info-text, var(--gds-text-primary, var(--text, inherit)));
    --gds-info-card-muted: var(--gds-info-muted, var(--gds-text-secondary, var(--muted, inherit)));
    --gds-info-card-icon-bg: var(--gds-info-icon-bg, rgba(255, 255, 255, .30));
    --gds-info-card-icon-text: var(--gds-info-icon-text, currentColor);

    min-width: 0;
    min-height: 230px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 16px 12px 14px;

    background: var(--gds-info-card-background);
    color: var(--gds-info-card-text);

    border: 1px solid var(--gds-info-border, rgba(255, 255, 255, .28));
    border-radius: 18px;
    box-shadow: var(--gds-info-shadow, var(--gds-shadow-card, var(--shadow-soft, none)));

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-info-card:hover,
.gds-info-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--gds-info-shadow-hover, var(--gds-shadow-card-hover, var(--shadow-strong, none)));
}

.gds-info-card__header {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.gds-info-card__icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--gds-info-card-icon-bg);
    color: var(--gds-info-card-icon-text);

    font-size: 1.12rem;
    line-height: 1;
}

.gds-info-card__title {
    margin: 0;
    color: inherit;
    font-size: 1.2rem;
    font-weight: 700;
}

.gds-info-card__content {
    flex: 1 1 auto;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gds-info-card__primary {
    margin: 0 0 6px;
    color: inherit;
    font-size: clamp(1.3rem, 1.7vw, 1.65rem);
    line-height: 1.1;
    font-weight: 800;
}

.gds-info-card__secondary {
    margin: 0;
    color: var(--gds-info-card-muted);
    font-size: .88rem;
}

.gds-info-card__primary--number {
    width: 100%;
    margin: 0 0 6px;
    font-size: clamp(2rem, 2.8vw, 2.25rem);
    line-height: 1.1;
    font-weight: 700;
    text-align: center;
}

.gds-info-card__primary--text {
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
}

.gds-info-card__footer {
    width: 100%;
    margin-top: 14px;
}

.gds-info-card__footer .gds-button {
    width: 100%;
}

/* Theme-neutrale Auswahl der Tonstufen */
.gds-info-card--tone-1 {
    --gds-info-card-background: var(--gds-info-tone-1);
}

.gds-info-card--tone-2 {
    --gds-info-card-background: var(--gds-info-tone-2);
}

.gds-info-card--tone-3 {
    --gds-info-card-background: var(--gds-info-tone-3);
}

.gds-info-card--tone-4 {
    --gds-info-card-background: var(--gds-info-tone-4);
}

.gds-info-card--tone-5 {
    --gds-info-card-background: var(--gds-info-tone-5);
}

.gds-info-card--tone-6 {
    --gds-info-card-background: var(--gds-info-tone-6);
}

@media (max-width: 900px) {
    .gds-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gds-info-card {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 600px) {
    .gds-info-grid {
        grid-template-columns: 1fr;
    }

    .gds-info-card {
        min-height: 0;
    }
}


/* ========================================================================
   GDS QUICKINFO-POSITION
======================================================================== */

/*
   Eigenständige Template-Position für M002.

   Aufgabe:
   - trennt die GDS-Schnellinformationen von Helix-Layoutpositionen
   - stellt eine projektübergreifend wiederverwendbare Position bereit
   - entfernt mögliche Joomla-Modulabstände und Wrapper-Margins
   - greift nicht in den Hero oder den normalen Joomla-Hauptinhalt ein
*/

.gds-quickinfo-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gds-quickinfo-wrapper > .moduletable,
.gds-quickinfo-wrapper > [class*="moduletable"],
.gds-quickinfo-wrapper > .module,
.gds-quickinfo-wrapper > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gds-quickinfo-wrapper .gds-module--quickinfo {
    width: 100%;
    margin: 0;
}


/* ========================================================================
   14 MODULE M002 QUICKINFO
======================================================================== */

/*
   M002 Schnellinformationen
   Version 1.0 · Abgeschlossene GDS-Fassung

   Aufgabe:
   - eigenständiger Seitenbereich für mehrere C011 Info Cards
   - optionaler Modulkopf mit Überschrift und Kurzbeschreibung
   - themefähige Hintergrundfläche
   - keine Definition einzelner Karteninhalte

   Wichtig:
   Die Darstellung der einzelnen Karten bleibt vollständig Aufgabe von C011.
   M002 steuert ausschließlich den äußeren Modulbereich und den Modulkopf.
*/

.gds-module--quickinfo {
    background: transparent;
    padding-top: clamp(16px, 2vw, 24px);
    padding-bottom: clamp(12px, 2vw, 20px);
}

.gds-module--quickinfo .gds-quickinfo__inner {
    width: 100%;
}

.gds-module--quickinfo .gds-quickinfo__header {
    margin-bottom: 20px;
}

.gds-module--quickinfo .gds-quickinfo__title {
    margin: 0 0 6px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
}

.gds-module--quickinfo .gds-quickinfo__description {
    max-width: 65ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

@media (max-width: 600px) {
    .gds-module--quickinfo {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .gds-module--quickinfo .gds-quickinfo__header {
        margin-bottom: 16px;
    }
}

/* ========================================================================
   15 COMPONENT C012 CONTENT PREVIEW CARD
======================================================================== */

/*
   C012 Content Preview Card
   Version 1.0 · Abgeschlossene GDS-Fassung

   Aufgabe:
   - Vorschau eines einzelnen redaktionellen Inhalts
   - horizontales Grundlayout mit Medienbereich links und Inhalt rechts
   - Medienbereich kann Bild, Logo, Icon, SVG oder vergleichbare Medien aufnehmen
   - responsiver Wechsel zu einer vertikalen Darstellung

   Architektur:
   - Medienbereich: 30 %
   - Inhaltsbereich: 70 %
   - beide Bereiche liegen mit Innenabstand frei innerhalb der Karte
   - overflow: hidden gilt nur für den Medienrahmen

   Wichtig:
   C012 beschreibt ausschließlich eine einzelne Inhaltsvorschau.
   Anzahl und Anordnung mehrerer Karten bleiben Aufgabe des jeweiligen Moduls.
*/

.gds-content-card {
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 70%);
    gap: clamp(20px, 2.5vw, 32px);
    min-width: 0;

    padding: clamp(18px, 2.2vw, 28px);

    background: var(--gds-content-card-background, var(--gds-surface-card, var(--card, transparent)));
    color: var(--gds-content-card-text, var(--gds-text-primary, var(--text, inherit)));

    border: 1px solid var(--gds-content-card-border, var(--gds-border-soft, var(--border-card, transparent)));
    border-radius: 18px;
    box-shadow: var(--gds-content-card-shadow, var(--gds-shadow-card, var(--shadow-soft, none)));

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-content-card:hover,
.gds-content-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--gds-content-card-shadow-hover, var(--gds-shadow-card-hover, var(--shadow-strong, none)));
}

.gds-content-card__media {
    align-self: stretch;
    min-width: 0;
    min-height: 220px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--gds-content-card-media-background, var(--gds-surface-muted, var(--header-bg, transparent)));
    border-radius: 14px;
}

.gds-content-card__image,
.gds-content-card__media > picture,
.gds-content-card__media > svg,
.gds-content-card__media > video {
    width: 100%;
    height: 100%;
}

.gds-content-card__image,
.gds-content-card__media > video {
    object-fit: cover;
}

.gds-content-card__media > svg {
    object-fit: contain;
}

.gds-content-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 4px 0;
}

.gds-content-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 14px;

    color: var(--gds-content-card-muted, var(--gds-text-secondary, var(--muted, inherit)));
    font-size: .9rem;
}

.gds-content-card__category {
    font-weight: 700;
}

.gds-content-card__date {
    white-space: nowrap;
}

.gds-content-card__title {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.2;
    font-weight: 700;
}

.gds-content-card__description {
    margin: 0;
    color: var(--gds-content-card-muted, var(--gds-text-secondary, var(--muted, inherit)));
}

.gds-content-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}

@media (max-width: 820px) {
    .gds-content-card {
        grid-template-columns: minmax(0, 34%) minmax(0, 66%);
        gap: 20px;
        padding: 20px;
    }

    .gds-content-card__media {
        min-height: 200px;
    }
}

@media (max-width: 640px) {
    .gds-content-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 16px;
    }

    .gds-content-card__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .gds-content-card__body {
        padding: 0;
    }

    .gds-content-card__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .gds-content-card__actions .gds-button {
        width: 100%;
    }
}


/* ------------------------------------------------------------------------
   C012 VARIANTEN
------------------------------------------------------------------------ */

/*
   Featured:
   Großzügige Hauptdarstellung für hervorgehobene Inhalte.
*/

.gds-content-card--featured {
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
    gap: clamp(24px, 3vw, 38px);
    padding: clamp(20px, 2.6vw, 32px);
}

.gds-content-card--featured .gds-content-card__media {
    min-height: 260px;
}

.gds-content-card--featured .gds-content-card__title {
    font-size: clamp(1.55rem, 2.2vw, 2rem);
}

.gds-content-card--featured .gds-content-card__description {
    font-size: 1rem;
    line-height: 1.7;
}

/*
   Compact:
   Verdichtete Vorschau für weitere Meldungen innerhalb eines Content Panels.
*/

.gds-content-card--compact {
    grid-template-columns: minmax(0, 26%) minmax(0, 74%);
    gap: 18px;
    padding: 16px;
}

.gds-content-card--compact .gds-content-card__media {
    min-height: 150px;
    border-radius: 12px;
}

.gds-content-card--compact .gds-content-card__body {
    padding: 0;
}

.gds-content-card--compact .gds-content-card__meta {
    margin-bottom: 8px;
    font-size: .82rem;
}

.gds-content-card--compact .gds-content-card__title {
    margin-bottom: 8px;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.gds-content-card--compact .gds-content-card__description {
    font-size: .92rem;
    line-height: 1.5;
}

.gds-content-card--compact .gds-content-card__actions {
    padding-top: 14px;
}

.gds-content-card--compact .gds-button {
    min-height: 34px;
    padding: 6px 12px;
    font-size: .88rem;
}

/*
   List:
   Stark reduzierte Darstellung für kurze Meldungen,
   Verbandsinformationen und Linklisten.
*/

.gds-content-card--list {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
}

.gds-content-card--list .gds-content-card__body {
    padding: 0;
}

.gds-content-card--list .gds-content-card__meta {
    justify-content: flex-start;
    margin-bottom: 6px;
    font-size: .78rem;
}

.gds-content-card--list .gds-content-card__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.gds-content-card--list .gds-content-card__description,
.gds-content-card--list .gds-content-card__actions,
.gds-content-card--list .gds-content-card__media {
    display: none;
}

@media (max-width: 820px) {
    .gds-content-card--featured {
        grid-template-columns: minmax(0, 36%) minmax(0, 64%);
    }

    .gds-content-card--compact {
        grid-template-columns: minmax(0, 30%) minmax(0, 70%);
    }
}

@media (max-width: 640px) {
    .gds-content-card--featured,
    .gds-content-card--compact {
        grid-template-columns: 1fr;
    }

    .gds-content-card--featured .gds-content-card__media,
    .gds-content-card--compact .gds-content-card__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .gds-content-card--compact {
        gap: 14px;
        padding: 14px;
    }

    .gds-content-card--compact .gds-content-card__actions .gds-button {
        width: 100%;
    }
}



/* ========================================================================
   GDS CONTENT-POSITION
======================================================================== */

/*
   Eigenständige Template-Position für M003.

   Aufgabe:
   - trennt das GDS Content Panel von alten Helix- und Slider-Positionen
   - entfernt mögliche Joomla-Modulabstände und Wrapper-Margins
   - stellt einen projektübergreifend wiederverwendbaren Inhaltsbereich bereit
*/

.gds-content-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gds-content-wrapper > .moduletable,
.gds-content-wrapper > [class*="moduletable"],
.gds-content-wrapper > .module,
.gds-content-wrapper > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gds-content-wrapper .gds-module--content-panel {
    width: 100%;
    margin: 0;
}


/* ========================================================================
   16 MODULE M003 CONTENT PANEL
======================================================================== */

/*
   M003 – Aktuelles
   Version 2.1.1 · Größere untere Inhaltskarten

   Aufgabe:
   - ordnet Vereinsleben, Gartentipp und Termine in einer breiten Hauptspalte an
   - bündelt Social Media, Öffnungszeiten und Landesverband in einer Service-Spalte
   - verwendet C012 für redaktionelle Inhalte und vorhandene GDS-Basiskarten für Serviceinhalte
   - enthält keine saisonabhängigen Farben und noch keine dynamische Beitragslogik
*/

.gds-module--content-panel {
    padding-top: var(--gds-section-spacing);
    padding-bottom: var(--gds-section-spacing);
    background: transparent;
}

.gds-content-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
}

.gds-content-panel__heading {
    min-width: 0;
}

.gds-content-panel__title {
    margin: 0 0 8px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    line-height: 1.2;
}

.gds-content-panel__description {
    max-width: 72ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-content-panel__layout {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(280px, .75fr);
    gap: 24px;
    align-items: start;
}

.gds-content-panel__main,
.gds-content-panel__column {
    min-width: 0;
}

.gds-content-panel__main {
    display: grid;
    gap: 12px;
    align-content: start;
    align-self: start;
}

.gds-content-panel__featured > .gds-content-card,
.gds-content-panel__compact-list > .gds-content-card {
    margin: 0;
}

.gds-content-panel__compact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* M003 V2.1.1:
   Die beiden unteren Inhaltskarten erhalten mehr visuelle Präsenz,
   ohne den korrigierten Abstand zur Hauptkarte zu verändern. */
.gds-content-panel__compact-list .gds-content-card--compact {
    min-height: 265px;
    grid-template-columns: minmax(140px, 34%) minmax(0, 66%);
    padding: 18px;
}

.gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__media {
    min-height: 225px;
}

.gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__body {
    min-height: 225px;
}

.gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__actions {
    margin-top: auto;
}

.gds-content-panel__column {
    display: grid;
    gap: 24px;
    align-content: start;
    align-self: start;
}

.gds-content-panel__column--right {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.gds-content-panel__side-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 22px;
}

.gds-content-panel__side-card .gds-card__header {
    margin-bottom: 14px;
}

.gds-content-panel__side-card .gds-card__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.gds-content-panel__side-card .gds-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.gds-content-panel__side-card .gds-card__body > :last-child {
    margin-bottom: 0;
}

.gds-content-panel__footer {
    margin-top: 18px;
}

.gds-content-panel__footer .gds-button {
    width: 100%;
}

.gds-content-panel__social-list {
    display: grid;
    gap: 12px;
}

.gds-content-panel__social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 12px;
    background: var(--gds-surface-muted, var(--header-bg, transparent));
    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-content-panel__social-link:hover,
.gds-content-panel__social-link:focus {
    color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-content-panel__social-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gds-button-bg, var(--accent, transparent));
    color: var(--gds-button-text, var(--menu-active-text, inherit));
    font-size: 1.1rem;
}

.gds-content-panel__social-text {
    min-width: 0;
}

.gds-content-panel__social-title,
.gds-content-panel__social-description {
    display: block;
}

.gds-content-panel__social-title {
    font-weight: 700;
}

.gds-content-panel__social-description {
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .82rem;
    line-height: 1.4;
}

.gds-content-panel__hours {
    display: grid;
    gap: 10px;
    margin: 0;
}

.gds-content-panel__hours-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}

.gds-content-panel__hours-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gds-content-panel__hours dt,
.gds-content-panel__hours dd {
    margin: 0;
}

.gds-content-panel__hours dt {
    font-weight: 700;
}

.gds-content-panel__hours dd {
    text-align: right;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

/* Featured-Bild innerhalb des Startseitenrasters */
.gds-content-panel__featured .gds-content-card--featured {
    align-items: start;
}

.gds-content-panel__featured .gds-content-card--featured .gds-content-card__media {
    align-self: stretch;
    min-height: 320px;
    aspect-ratio: auto;
}

.gds-content-panel__featured .gds-content-card--featured .gds-content-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1180px) {
    .gds-content-panel__layout {
        grid-template-columns: minmax(0, 1.75fr) minmax(270px, .75fr);
    }
}

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

    .gds-content-panel__column--right {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .gds-content-panel__column--right > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .gds-content-panel__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 24px;
    }

    .gds-content-panel__compact-list,
    .gds-content-panel__column--right {
        grid-template-columns: 1fr;
    }

    .gds-content-panel__column--right > :last-child {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .gds-module--content-panel {
        padding-top: var(--gds-section-spacing);
        padding-bottom: var(--gds-section-spacing);
    }

    .gds-content-panel__layout,
    .gds-content-panel__main,
    .gds-content-panel__compact-list,
    .gds-content-panel__column {
        gap: 16px;
    }

    .gds-content-panel__side-card {
        padding: 18px;
    }

    .gds-content-panel__featured .gds-content-card--featured .gds-content-card__media,
    .gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__media {
        width: 100%;
        max-width: none;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ========================================================================
   17 COMPONENT C006 LOCATION CARD
======================================================================== */

/*
   C006 Location Card
   Version 0.1 · Entwicklungsfassung

   Aufgabe:
   - Darstellung genau einer Kleingartenanlage
   - vollständige Karte führt zur Anlagendetailseite
   - Google Maps bleibt eine eigenständige Aktion
   - keine feste Anzahl oder Rasterlogik

   Wichtig:
   Farben, Rahmen und Schatten werden ausschließlich über Theme-Variablen
   oder vorhandene GDS-Fallbacks gesteuert.
*/

.gds-location-card {
    min-width: 0;
    overflow: hidden;

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-location-card:hover,
.gds-location-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-location-card__main-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gds-location-card__main-link:hover,
.gds-location-card__main-link:focus {
    color: inherit;
    text-decoration: none;
}

.gds-location-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 20px 20px 0;

    background: var(--gds-surface-muted, var(--header-bg, transparent));
    border-radius: 14px;
}

.gds-location-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .3s ease;
}

.gds-location-card:hover .gds-location-card__image,
.gds-location-card:focus-within .gds-location-card__image {
    transform: scale(1.02);
}

.gds-location-card__body {
    padding: 22px 20px 20px;
}

.gds-location-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.gds-location-card__title-icon,
.gds-location-card__fact-icon {
    flex: 0 0 auto;
    color: var(--gds-link, var(--accent-dark, currentColor));
}

.gds-location-card__title {
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 700;
}

.gds-location-card__facts {
    display: grid;
    gap: 10px;
}

.gds-location-card__fact {
    display: grid;
    grid-template-columns: 20px auto 1fr;
    align-items: baseline;
    gap: 7px;
    margin: 0;

    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-location-card__fact-label {
    font-weight: 700;
    color: var(--gds-text-primary, var(--text, inherit));
}

.gds-location-card__fact-value {
    min-width: 0;
}

.gds-location-card__footer {
    padding: 0 20px 20px;
}

.gds-location-card__maps-link {
    width: 100%;
}

@media (max-width: 600px) {
    .gds-location-card__media {
        margin: 16px 16px 0;
        border-radius: 12px;
    }

    .gds-location-card__body {
        padding: 18px 16px 16px;
    }

    .gds-location-card__footer {
        padding: 0 16px 16px;
    }

    .gds-location-card__title {
        font-size: 1.2rem;
    }
}

/* ========================================================================
   18 MODULE M005 ANLAGENÜBERSICHT
======================================================================== */

/*
   M005 Anlagenübersicht
   Version 1.0 · HTML- und CSS-Testfassung

   Aufgabe:
   - ordnet mehrere C006 Location Cards als vollständige Unterseite an
   - steuert Seitenkopf, Raster und responsive Spaltenanzahl
   - enthält keine eigene Anlagenlogik

   Responsive:
   - Desktop: 3 Spalten
   - Tablet: 2 Spalten
   - Smartphone: 1 Spalte
*/

.gds-module--locations {
    padding-top: clamp(36px, 5vw, 64px);
    padding-bottom: clamp(48px, 6vw, 72px);
}

.gds-locations__header {
    margin-bottom: 32px;
}

.gds-locations__title {
    margin: 0 0 10px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.8rem, 2.5vw, 2.35rem);
    line-height: 1.2;
    font-weight: 700;
}

.gds-locations__description {
    max-width: 72ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-location-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.gds-location-grid .gds-location-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gds-location-grid .gds-location-card__main-link {
    flex: 1 1 auto;
}

@media (max-width: 980px) {
    .gds-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gds-module--locations {
        padding-top: 28px;
        padding-bottom: 48px;
    }

    .gds-locations__header {
        margin-bottom: 24px;
    }

    .gds-location-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


/* ========================================================================
   19 MODULE M006 ANLAGENDETAIL
======================================================================== */

/*
   M006 Anlagendetail
   Version 0.2 · Kompakter GDS-Seitenrhythmus

   Aufgabe:
   - setzt eine vollständige Detailseite für genau eine Kleingartenanlage um
   - verwendet vorhandene GDS-Bausteine: M001, C011, Contact Cards,
     Download Cards, Buttons und C006 Location Cards
   - ergänzt nur die für die Detailseite erforderliche Seitenstruktur
   - führt Besucher am Seitenende zurück zur Anlagenübersicht oder zu
     weiteren Anlagen

   Wichtig:
   M006 enthält keine festen Farben. Alle Farbwerte werden über vorhandene
   GDS- und Theme-Variablen gesteuert.
*/

.gds-module--location-detail {
    width: 100%;
}

.gds-location-detail__section {
    padding-top: var(--gds-section-spacing);
    padding-bottom: var(--gds-section-spacing);
}

.gds-location-detail__section--compact {
    padding-top: clamp(16px, 1.5vw, 22px);
    padding-bottom: clamp(16px, 1.5vw, 22px);
}

.gds-location-detail__section--muted {
    background: transparent;
}

.gds-location-detail__header {
    max-width: 760px;
    margin-bottom: clamp(18px, 2vw, 26px);
}

.gds-location-detail__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background var(--gds-infoleiste-transition), color var(--gds-infoleiste-transition),
                border-color var(--gds-infoleiste-transition), box-shadow var(--gds-infoleiste-transition);
}

.gds-location-detail__title {
    margin: 0 0 12px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    line-height: 1.2;
}

.gds-location-detail__lead {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
}

.gds-location-detail__intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

.gds-location-detail__prose {
    max-width: 72ch;
}

.gds-location-detail__prose > :last-child {
    margin-bottom: 0;
}

.gds-location-detail__prose p {
    line-height: 1.8;
}

.gds-location-detail__feature-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gds-location-detail__feature {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.gds-location-detail__feature-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gds-contact-icon-bg, var(--accent, transparent));
    color: var(--gds-contact-icon-text, var(--menu-active-text, inherit));
}

.gds-location-detail__feature-title {
    display: block;
    margin-bottom: 2px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-weight: 700;
}

.gds-location-detail__feature-text {
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-location-detail__facts .gds-info-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gds-location-detail__facts .gds-info-card {
    min-height: 265px;
}

.gds-location-detail__gallery {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    grid-template-rows: repeat(2, minmax(180px, 1fr));
    gap: 16px;
}

.gds-location-detail__gallery-item {
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--gds-surface-muted, var(--header-bg, transparent));
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-location-detail__gallery-item--large {
    grid-row: 1 / 3;
}

.gds-location-detail__gallery-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    transition: transform .3s ease;
}

.gds-location-detail__gallery-item:hover .gds-location-detail__gallery-image,
.gds-location-detail__gallery-item:focus-within .gds-location-detail__gallery-image {
    transform: scale(1.02);
}

.gds-location-detail__two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 44px);
    align-items: start;
}

.gds-location-detail__panel {
    min-width: 0;
}

.gds-location-detail__panel-title {
    margin: 0 0 16px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.35rem;
}

.gds-location-detail__map {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    background: var(--gds-surface-muted, var(--header-bg, transparent));
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-location-detail__map-placeholder {
    width: min(100%, 560px);
    padding: 32px;
    text-align: center;
}

.gds-location-detail__map-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--gds-contact-icon-bg, var(--accent, transparent));
    color: var(--gds-contact-icon-text, var(--menu-active-text, inherit));
    font-size: 1.45rem;
}

.gds-location-detail__map-title {
    margin-bottom: 8px;
}

.gds-location-detail__map-text {
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-location-detail__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 20px;
    background: var(--gds-surface-card, var(--card, transparent));
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-location-detail__cta-content {
    max-width: 700px;
}

.gds-location-detail__cta-title {
    margin: 0 0 8px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.gds-location-detail__cta-text {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-location-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* C006 Compact wird ausschließlich dort eingesetzt, wo eine kleine
   Anlagenempfehlung benötigt wird. Die Grundkomponente bleibt unverändert. */
.gds-location-card--compact .gds-location-card__media {
    margin: 12px 12px 0;
    border-radius: 10px;
}

.gds-location-card--compact .gds-location-card__body {
    padding: 14px 14px 12px;
}

.gds-location-card--compact .gds-location-card__header {
    margin-bottom: 10px;
}

.gds-location-card--compact .gds-location-card__title {
    font-size: 1.05rem;
}

.gds-location-card--compact .gds-location-card__facts {
    gap: 6px;
}

.gds-location-card--compact .gds-location-card__fact {
    font-size: .88rem;
}

.gds-location-card--compact .gds-location-card__footer {
    padding: 0 14px 14px;
}

.gds-location-card--compact .gds-location-card__maps-link {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .88rem;
}

.gds-location-detail__footer-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

@media (max-width: 980px) {
    .gds-location-detail__facts .gds-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gds-location-detail__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .gds-location-detail__gallery-item,
    .gds-location-detail__gallery-item--large {
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }

    .gds-location-detail__gallery-item--large {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 8;
    }
}

@media (max-width: 820px) {
    .gds-location-detail__intro-grid,
    .gds-location-detail__two-column {
        grid-template-columns: 1fr;
    }

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

    .gds-location-detail__cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .gds-location-detail__section {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .gds-location-detail__section--compact {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .gds-location-detail__facts .gds-info-grid,
    .gds-location-detail__related-grid,
    .gds-location-detail__gallery {
        grid-template-columns: 1fr;
    }

    .gds-location-detail__gallery-item,
    .gds-location-detail__gallery-item--large {
        grid-column: auto;
        aspect-ratio: 4 / 3;
    }

    .gds-location-detail__cta .gds-button,
    .gds-location-detail__footer-actions .gds-button {
        width: 100%;
    }
}

/* ========================================================================
   19 MODULE M007 DOKUMENTENCENTER
======================================================================== */

/*
   M007 Dokumentencenter
   Version 1.0 · Joomla-Testfassung

   Aufgabe:
   - ordnet vorhandene C008 Download Cards zu einem vollständigen Servicebereich
   - gliedert Dokumente in Vereinsgrundlagen, Formulare, Gesetze und Versicherungen
   - stellt eine Bereichsnavigation mit Sprungmarken bereit
   - ergänzt Statusangaben und kompakte Icon-Aktionen
   - enthält keine eigene Dokumenten- oder Datenlogik

   Wiederverwendete Bausteine:
   - M001 Hero
   - C008 Download Card
   - GDS Buttons
   - GDS Card
   - GDS Container

   Farben und saisonale Werte werden ausschließlich über Theme-Variablen
   und vorhandene GDS-Fallbacks gesteuert.
*/

html {
    scroll-behavior: smooth;
}

.gds-module--document-center {
    width: 100%;
}

.gds-document-center__navigation {
    padding: 34px 0 14px;
    background: transparent;
}

.gds-document-center__navigation-title {
    margin: 0 0 18px;
    text-align: center;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: 1rem;
    font-weight: 700;
}

.gds-document-center__navigation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.gds-document-center__navigation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 9px 15px;

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 999px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    font-weight: 700;
    text-decoration: none;

    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.gds-document-center__navigation-link:hover,
.gds-document-center__navigation-link:focus {
    transform: translateY(-2px);
    background: var(--gds-button-secondary-bg, var(--header-bg, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
    text-decoration: none;
}

.gds-document-center__section {
    padding-top: clamp(48px, 6vw, 72px);
    padding-bottom: clamp(48px, 6vw, 72px);
    scroll-margin-top: 24px;
}

.gds-document-center__section--muted {
    background: transparent;
}

.gds-document-center__header {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.gds-document-center__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-weight: 800;
    letter-spacing: .02em;
}

.gds-document-center__title {
    margin: 0 0 10px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

.gds-document-center__lead {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-document-center__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 8px;
    padding: 4px 9px;

    background: var(--gds-document-status-bg, var(--gds-surface-muted, var(--header-bg, transparent)));
    color: var(--gds-document-status-text, var(--gds-link, var(--accent-dark, currentColor)));

    border-radius: 999px;

    font-size: .78rem;
    font-weight: 700;
}

.gds-document-center__icon-action {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;

    border-radius: 50%;
}

.gds-document-center__icon-action i {
    font-size: 1rem;
}

.gds-document-center__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    padding: clamp(24px, 4vw, 38px);
}

.gds-document-center__cta-title {
    margin: 0 0 8px;
}

.gds-document-center__cta-text {
    max-width: 64ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

@media (max-width: 720px) {
    .gds-document-center__navigation-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gds-document-center__navigation-link {
        width: 100%;
    }

    .gds-document-center__cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .gds-document-center__navigation-list {
        grid-template-columns: 1fr;
    }

    .gds-module--document-center .gds-download-card__actions {
        padding-left: 0;
    }

    .gds-document-center__cta .gds-button {
        width: 100%;
    }
}

/* ------------------------------------------------------------------------
   M007 ERGÄNZUNG V1.1 · HERO M UND ORIENTIERUNGSKARTEN
------------------------------------------------------------------------ */

/* Hero M für zentrale Bereichsseiten */
.gds-module--hero.gds-module--hero-m {
    min-height: clamp(390px, 48vh, 540px);
}

.gds-module--hero.gds-module--hero-m .gds-hero__inner {
    padding-bottom: clamp(28px, 4vw, 40px);
}

/* Einstieg und große Bereichsauswahl */
.gds-document-center__intro {
    padding-top: clamp(44px, 6vw, 68px);
    padding-bottom: clamp(48px, 6vw, 76px);
    background: transparent;
}

.gds-document-center__service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.gds-document-center__service-card {
    --gds-document-service-bg: var(--gds-info-tone-1, var(--gds-surface-card, var(--card, transparent)));

    min-width: 0;
    min-height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    padding: 24px 18px 20px;

    background: var(--gds-document-service-bg);
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-info-border, var(--gds-border-soft, rgba(255, 255, 255, .28)));
    border-radius: 18px;
    box-shadow: var(--gds-info-shadow, var(--gds-shadow-card, var(--shadow-soft, none)));

    text-align: center;
    text-decoration: none;

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-document-center__service-card:hover,
.gds-document-center__service-card:focus {
    transform: translateY(-3px);
    color: var(--gds-text-primary, var(--text, inherit));
    box-shadow: var(--gds-info-shadow-hover, var(--gds-shadow-card-hover, var(--shadow-strong, none)));
    text-decoration: none;
}

.gds-document-center__service-card--tone-1 {
    --gds-document-service-bg: var(--gds-info-tone-1, var(--gds-surface-card, var(--card, transparent)));
}

.gds-document-center__service-card--tone-2 {
    --gds-document-service-bg: var(--gds-info-tone-2, var(--gds-surface-card, var(--card, transparent)));
}

.gds-document-center__service-card--tone-3 {
    --gds-document-service-bg: var(--gds-info-tone-3, var(--gds-surface-card, var(--card, transparent)));
}

.gds-document-center__service-card--tone-4 {
    --gds-document-service-bg: var(--gds-info-tone-4, var(--gds-surface-card, var(--card, transparent)));
}

.gds-document-center__service-icon {
    width: 54px;
    height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 4px;

    background: var(--gds-info-icon-bg, rgba(255, 255, 255, .30));
    color: var(--gds-info-icon-text, currentColor);

    border-radius: 50%;
    font-size: 1.35rem;
}

.gds-document-center__service-title {
    color: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
}

.gds-document-center__service-text {
    flex: 1 1 auto;
    color: var(--gds-info-muted, var(--gds-text-secondary, var(--muted, inherit)));
    font-size: .92rem;
    line-height: 1.55;
}

.gds-document-center__service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 6px;
    padding-top: 12px;
    width: 100%;

    border-top: 1px solid var(--gds-border-soft, rgba(255, 255, 255, .35));

    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: .9rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .gds-document-center__service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gds-document-center__service-card {
        min-height: 225px;
    }
}

@media (max-width: 720px) {
    .gds-module--hero.gds-module--hero-m {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .gds-document-center__service-grid {
        grid-template-columns: 1fr;
    }

    .gds-document-center__service-card {
        min-height: 0;
    }
}

/* ========================================================================
   20 MODULE M008 STRUKTURIERTE INHALTSSEITE
   Version 1.0 · Produktive GDS-Leseansicht
======================================================================== */

.gds-m008 {
    --gds-m008-surface: var(--gds-surface-card, var(--card, transparent));
    --gds-m008-surface-muted: var(--gds-surface-muted, var(--header-bg, transparent));
    --gds-m008-text: var(--gds-text-primary, var(--text, inherit));
    --gds-m008-muted: var(--gds-text-secondary, var(--muted, inherit));
    --gds-m008-accent: var(--gds-link, var(--accent-dark, currentColor));
    --gds-m008-border: var(--gds-border-soft, var(--border-card, transparent));
    --gds-m008-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    color: var(--gds-m008-text);
}

.gds-m008 [id] {
    scroll-margin-top: 120px;
}

.gds-m008 .gds-structured-content {
    padding-block: clamp(36px, 5vw, 64px);
    background: transparent;
}

.gds-m008 .gds-structured-content__document-head,
.gds-m008 .gds-structured-content__search,
.gds-m008 .gds-structured-content__toc {
    background: var(--gds-m008-surface);
    border: 1px solid var(--gds-m008-border);
    border-radius: 18px;
    box-shadow: var(--gds-m008-shadow);
}

.gds-m008 .gds-structured-content__document-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    gap: 24px 40px;
    padding: clamp(24px, 3vw, 36px);
    margin-bottom: var(--gds-section-spacing);
}

.gds-m008 .gds-structured-content__document-copy {
    max-width: 74ch;
}

.gds-m008 .gds-structured-content__eyebrow {
    margin: 0 0 6px;
    color: var(--gds-m008-muted);
    font-size: .9rem;
    font-weight: 700;
}

.gds-m008 .gds-structured-content__document-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(1.55rem, 2.3vw, 2rem);
}

.gds-m008 .gds-structured-content__document-copy > :last-child {
    margin-bottom: 0;
}

.gds-m008 .gds-structured-content__metadata {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 220px;
    margin: 0;
}

.gds-m008 .gds-structured-content__metadata > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gds-m008-border);
}

.gds-m008 .gds-structured-content__metadata dt,
.gds-m008 .gds-structured-content__metadata dd {
    margin: 0;
}

.gds-m008 .gds-structured-content__metadata dt {
    color: var(--gds-m008-muted);
    font-weight: 700;
}

.gds-m008 .gds-structured-content__status {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gds-m008-surface-muted);
    color: var(--gds-m008-accent);
    font-weight: 700;
}

.gds-m008 .gds-structured-content__actions {
    grid-column: 1 / -1;
    padding-top: 4px;
}

.gds-m008 .gds-structured-content__search {
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(300px, 1.25fr);
    gap: 20px 32px;
    align-items: end;
    padding: 22px 24px;
    margin-bottom: var(--gds-section-spacing);
}

.gds-m008 .gds-structured-content__search h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.gds-m008 .gds-structured-content__search p {
    margin: 0;
    color: var(--gds-m008-muted);
}

.gds-m008 .gds-structured-content__search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.gds-m008 .gds-structured-content__search-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--gds-m008-text);
    background: var(--gds-m008-surface);
    border: 1px solid var(--gds-m008-border);
    border-radius: 10px;
}

.gds-m008 .gds-structured-content__search-input:focus {
    outline: 3px solid var(--gds-form-focus-ring, transparent);
    border-color: var(--gds-form-focus-border, var(--gds-m008-accent));
}

.gds-m008 .gds-structured-content__search-info {
    grid-column: 1 / -1;
    min-height: 1.5em;
    font-size: .92rem;
}

.gds-m008 .gds-structured-content__layout {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

.gds-m008 .gds-structured-content__sidebar {
    min-width: 0;
}

.gds-m008 .gds-structured-content__toc {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 140px);
    overflow: auto;
    padding: 22px;
}

.gds-m008 .gds-structured-content__toc h2 {
    margin: 0 0 14px;
    font-size: 1.15rem;
}

.gds-m008 .gds-structured-content__toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gds-m008 .gds-structured-content__toc a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--gds-m008-text);
    font-size: .92rem;
    line-height: 1.35;
    text-decoration: none;
}

.gds-m008 .gds-structured-content__toc a:hover,
.gds-m008 .gds-structured-content__toc a:focus {
    background: var(--gds-m008-surface-muted);
    color: var(--gds-m008-accent);
}

.gds-m008 .gds-structured-content__reader {
    min-width: 0;
    max-width: 82ch;
}

.gds-m008 .gds-structured-content__chapter {
    padding: 0 0 clamp(32px, 5vw, 56px);
    margin: 0 0 clamp(32px, 5vw, 56px);
    border-bottom: 1px solid var(--gds-m008-border);
}

.gds-m008 .gds-structured-content__chapter > h2 {
    margin: 0 0 20px;
    padding-left: 16px;
    border-left: 4px solid var(--gds-m008-accent);
    color: var(--gds-m008-text);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.3;
}

.gds-m008 .gds-structured-content__section {
    padding: 18px 0;
}

.gds-m008 .gds-structured-content__section + .gds-structured-content__section {
    border-top: 1px solid var(--gds-m008-border);
}

.gds-m008 .gds-structured-content__section h3 {
    margin: 0 0 8px;
    color: var(--gds-m008-accent);
    font-size: 1.05rem;
}

.gds-m008 .gds-structured-content__section p,
.gds-m008 .gds-structured-content__section li {
    line-height: 1.75;
}

.gds-m008 .gds-structured-content__section p:last-child,
.gds-m008 .gds-structured-content__section ul:last-child,
.gds-m008 .gds-structured-content__section ol:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------------------
   M008 v1.1 · Semantische Dokumentelemente
   Ergänzungen für Listen, Haushaltsgliederung, Hinweise und Tabellen
------------------------------------------------------------------------ */

.gds-m008 .gds-structured-content__chapter h4 {
    margin: 22px 0 10px;
    color: var(--gds-m008-text);
    font-size: 1rem;
    line-height: 1.4;
}

.gds-m008 .gds-structured-content__numbered-list,
.gds-m008 .gds-structured-content__alpha-list,
.gds-m008 .gds-structured-content__payment-list {
    margin: 0;
    padding-left: 1.55rem;
}

.gds-m008 .gds-structured-content__numbered-list > li,
.gds-m008 .gds-structured-content__alpha-list > li {
    padding-left: .35rem;
    margin-bottom: 16px;
}

.gds-m008 .gds-structured-content__numbered-list > li:last-child,
.gds-m008 .gds-structured-content__alpha-list > li:last-child {
    margin-bottom: 0;
}

.gds-m008 .gds-structured-content__alpha-list {
    margin-top: 22px;
}

.gds-m008 .gds-structured-content__alpha-list > li::marker,
.gds-m008 .gds-structured-content__numbered-list > li::marker {
    color: var(--gds-m008-accent);
    font-weight: 700;
}

.gds-m008 .gds-structured-content__alpha-list strong {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--gds-m008-text);
}

.gds-m008 .gds-structured-content__payment-list {
    display: grid;
    gap: 10px;
    padding-left: 0;
    list-style: none;
}

.gds-m008 .gds-structured-content__payment-list > li {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(100px, auto) minmax(90px, auto);
    gap: 12px 20px;
    align-items: baseline;
    padding: 12px 14px;
    background: var(--gds-m008-surface-muted);
    border: 1px solid var(--gds-m008-border);
    border-radius: 10px;
}

.gds-m008 .gds-structured-content__payment-list > li > :first-child {
    font-weight: 700;
}

.gds-m008 .gds-structured-content__budget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 18px;
}

.gds-m008 .gds-structured-content__budget-grid > section {
    min-width: 0;
    padding: 20px;
    background: var(--gds-m008-surface-muted);
    border: 1px solid var(--gds-m008-border);
    border-radius: 12px;
}

.gds-m008 .gds-structured-content__budget-grid h4 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gds-m008-border);
    color: var(--gds-m008-accent);
}

.gds-m008 .gds-structured-content__budget-grid ol {
    margin-bottom: 0;
    padding-left: 1.4rem;
}

.gds-m008 .gds-structured-content__budget-grid ol ol {
    margin-top: 6px;
}

.gds-m008 .gds-structured-content__note {
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--gds-m008-surface-muted);
    border: 1px solid var(--gds-m008-border);
    border-left: 4px solid var(--gds-m008-accent);
    border-radius: 12px;
}

.gds-m008 .gds-structured-content__note h3 {
    margin-top: 0;
}

.gds-m008 .gds-structured-content__table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--gds-m008-border);
    border-radius: 12px;
    background: var(--gds-m008-surface);
    -webkit-overflow-scrolling: touch;
}

.gds-m008 .gds-structured-content__table-wrap table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: collapse;
}

.gds-m008 .gds-structured-content__table-wrap th,
.gds-m008 .gds-structured-content__table-wrap td {
    padding: 12px 14px;
    border-right: 1px solid var(--gds-m008-border);
    border-bottom: 1px solid var(--gds-m008-border);
    text-align: left;
    vertical-align: top;
}

.gds-m008 .gds-structured-content__table-wrap th:last-child,
.gds-m008 .gds-structured-content__table-wrap td:last-child {
    border-right: 0;
}

.gds-m008 .gds-structured-content__table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.gds-m008 .gds-structured-content__table-wrap th {
    background: var(--gds-m008-surface-muted);
    color: var(--gds-m008-text);
    font-weight: 700;
}

@media (max-width: 720px) {
    .gds-m008 .gds-structured-content__budget-grid {
        grid-template-columns: 1fr;
    }

    .gds-m008 .gds-structured-content__payment-list > li {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

.gds-m008 .gds-structured-content__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    background: var(--gds-m008-surface);
    border: 1px solid var(--gds-m008-border);
    border-radius: 16px;
    box-shadow: var(--gds-m008-shadow);
}

.gds-m008 .gds-is-hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .gds-m008 .gds-structured-content__layout {
        grid-template-columns: 1fr;
    }

    .gds-m008 .gds-structured-content__toc {
        position: static;
        max-height: none;
    }

    .gds-m008 .gds-structured-content__reader {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .gds-m008 .gds-structured-content__document-head,
    .gds-m008 .gds-structured-content__search {
        grid-template-columns: 1fr;
    }

    .gds-m008 .gds-structured-content__metadata {
        min-width: 0;
    }

    .gds-m008 .gds-structured-content__search-controls {
        grid-template-columns: 1fr;
    }

    .gds-m008 .gds-structured-content__search-controls .gds-button,
    .gds-m008 .gds-structured-content__actions .gds-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .gds-m008 .gds-structured-content__document-head,
    .gds-m008 .gds-structured-content__search,
    .gds-m008 .gds-structured-content__toc,
    .gds-m008 .gds-structured-content__footer {
        padding: 18px;
        border-radius: 14px;
    }

    .gds-m008 .gds-structured-content__metadata > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}


/* ========================================================================
   GDS SHOWCASE-POSITION
   M009 Integration v1.0
======================================================================== */

.gds-showcase-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gds-showcase-wrapper > .moduletable,
.gds-showcase-wrapper > [class*="moduletable"],
.gds-showcase-wrapper > .module,
.gds-showcase-wrapper > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================
   M009 – Fotostrecke Anlagen · Entwicklungsstand V0.6 / Integration v0.4
   ========================================================== */

#gds-m009-showcase {
    --gds-m009-surface: var(--gds-surface-card, var(--card, transparent));
    --gds-m009-text: var(--gds-text-primary, var(--text, inherit));
    --gds-m009-muted: var(--gds-text-secondary, var(--muted, inherit));
    --gds-m009-accent: var(--gds-link, var(--accent-dark, currentColor));
    --gds-m009-radius: 18px;
    --gds-m009-shadow: 0 12px 30px rgba(31, 55, 40, .13);
    --gds-m009-shadow-hover: 0 18px 42px rgba(31, 55, 40, .2);
    --gds-m009-action-width: 208px;
/* Eigenständige 8-Pixel-Skala gemäß A014 */
    --gds-m009-space-1: 8px;
    --gds-m009-space-2: 16px;
    --gds-m009-space-3: 24px;
    --gds-m009-space-4: 32px;

    color: var(--gds-m009-text);
    margin-top: var(--gds-m009-space-3);
    background: transparent;
}

#gds-m009-showcase .gds-photo-strip__inner {
    width: calc(100% - 40px);
    max-width: 1560px;
    margin-inline: auto;

    padding: var(--gds-m009-space-4);

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 24px;

    background: var(--gds-surface-card, var(--card, transparent));

    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

#gds-m009-showcase .gds-photo-strip__header {
    margin-bottom: var(--gds-m009-space-3);
}

#gds-m009-showcase .gds-photo-strip__title {
    margin: 0;
    color: var(--gds-m009-text);
    font-size: clamp(1.2rem, 1.35vw, 1.45rem);
    line-height: 1.2;
}

#gds-m009-showcase .gds-photo-strip__description {
    max-width: 62ch;
    margin: var(--gds-m009-space-1) 0 0;
    color: var(--gds-m009-muted);
    font-size: .98rem;
    line-height: 1.6;
}

#gds-m009-showcase .gds-photo-strip__content {
    display: flex;
    align-items: stretch;
    gap: var(--gds-m009-space-3);
    width: 100%;
    min-width: 0;
}

#gds-m009-showcase .gds-photo-strip__track {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: clamp(8px, 1vw, 14px);
    min-width: 0;
}

#gds-m009-showcase .gds-photo-strip__item {
    position: relative;
    flex: var(--gds-m009-grow, 1) 1 0;
    min-width: 0;
    height: clamp(180px, 15vw, 230px);
    overflow: hidden;
    border-radius: var(--gds-m009-radius);
    background: #e8eee9;
    box-shadow: var(--gds-m009-shadow);
    isolation: isolate;
    text-decoration: none;
    transform: translateZ(0);
    transition: transform .24s ease, box-shadow .24s ease;
}

#gds-m009-showcase .gds-photo-strip__item--narrow { --gds-m009-grow: .78; }
#gds-m009-showcase .gds-photo-strip__item--medium { --gds-m009-grow: 1; }
#gds-m009-showcase .gds-photo-strip__item--wide { --gds-m009-grow: 1.22; }

#gds-m009-showcase .gds-photo-strip__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .38s ease;
}

#gds-m009-showcase .gds-photo-strip__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(10, 26, 16, .58), transparent 48%);
    pointer-events: none;
}

#gds-m009-showcase .gds-photo-strip__caption {
    position: absolute;
    right: 12px;
    bottom: 11px;
    left: 12px;
    z-index: 2;
    overflow: hidden;
    color: #ffffff;
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    white-space: nowrap;
}

#gds-m009-showcase .gds-photo-strip__item:hover,
#gds-m009-showcase .gds-photo-strip__item:focus-visible {
    z-index: 3;
    box-shadow: var(--gds-m009-shadow-hover);
    transform: translateY(-4px);
}

#gds-m009-showcase .gds-photo-strip__item:hover .gds-photo-strip__image,
#gds-m009-showcase .gds-photo-strip__item:focus-visible .gds-photo-strip__image {
    transform: scale(1.035);
}

#gds-m009-showcase .gds-photo-strip__item:focus-visible,
#gds-m009-showcase .gds-photo-strip__gallery-card:focus-visible {
    outline: 3px solid var(--gds-m009-accent);
    outline-offset: 3px;
}

#gds-m009-showcase .gds-photo-strip__action {
    flex: 0 0 var(--gds-m009-action-width);
    display: flex;
    align-items: stretch;
}

#gds-m009-showcase .gds-photo-strip__gallery-card {
    position: relative;
    width: 100%;
    min-height: clamp(180px, 15vw, 230px);
    padding: var(--gds-m009-space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gds-m009-space-1);
    overflow: hidden;
    border: 1px solid var(--gds-border-soft, rgba(50, 115, 74, .18));
    border-radius: var(--gds-m009-radius);
    background: var(--gds-button-bg, var(--gds-m009-accent));
    color: var(--gds-button-text, #ffffff);
    box-shadow: var(--gds-m009-shadow);
    text-decoration: none;
    transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

#gds-m009-showcase .gds-photo-strip__gallery-card:hover,
#gds-m009-showcase .gds-photo-strip__gallery-card:focus-visible {
    background: var(--gds-button-hover-bg, var(--accent-dark, #245c39));
    color: var(--gds-button-hover-text, #ffffff);
    box-shadow: var(--gds-m009-shadow-hover);
    text-decoration: none;
    transform: translateY(-4px);
}

#gds-m009-showcase .gds-photo-strip__gallery-icon {
    font-size: 1.65rem;
    line-height: 1;
}

#gds-m009-showcase .gds-photo-strip__gallery-title {
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.25;
}

#gds-m009-showcase .gds-photo-strip__gallery-text {
    font-size: .9rem;
    line-height: 1.35;
    opacity: .9;
}

#gds-m009-showcase .gds-photo-strip__gallery-arrow {
    position: absolute;
    right: var(--gds-m009-space-2);
    bottom: var(--gds-m009-space-2);
}

@media (max-width: 1120px) {
    #gds-m009-showcase .gds-photo-strip__content {
        flex-direction: column;
    }

    #gds-m009-showcase .gds-photo-strip__track {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #gds-m009-showcase .gds-photo-strip__item {
        height: clamp(180px, 27vw, 240px);
    }

    #gds-m009-showcase .gds-photo-strip__action {
        flex-basis: auto;
    }

    #gds-m009-showcase .gds-photo-strip__gallery-card {
        min-height: 112px;
        padding: var(--gds-m009-space-2) var(--gds-m009-space-3);
    }
}

@media (max-width: 620px) {
    #gds-m009-showcase .gds-photo-strip__inner {
        width: min(100% - 28px, 1100px);
        padding: var(--gds-m009-space-3) var(--gds-m009-space-2);
        border-radius: 18px;
    }

    #gds-m009-showcase .gds-photo-strip__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gds-m009-space-1);
    }

    #gds-m009-showcase .gds-photo-strip__item {
        height: clamp(165px, 43vw, 220px);
        border-radius: 14px;
    }

    #gds-m009-showcase .gds-photo-strip__caption {
        right: 10px;
        bottom: 9px;
        left: 10px;
        font-size: .84rem;
    }

    #gds-m009-showcase .gds-photo-strip__gallery-card {
        min-height: 128px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gds-m009-showcase .gds-photo-strip__item,
    #gds-m009-showcase .gds-photo-strip__image,
    #gds-m009-showcase .gds-photo-strip__gallery-card {
        transition: none;
    }

    #gds-m009-showcase .gds-photo-strip__item:hover,
    #gds-m009-showcase .gds-photo-strip__item:focus-visible,
    #gds-m009-showcase .gds-photo-strip__item:hover .gds-photo-strip__image,
    #gds-m009-showcase .gds-photo-strip__item:focus-visible .gds-photo-strip__image,
    #gds-m009-showcase .gds-photo-strip__gallery-card:hover,
    #gds-m009-showcase .gds-photo-strip__gallery-card:focus-visible {
        transform: none;
    }
}


/* ========================================================================
   GDS PARTNER-POSITION
   ======================================================================== */

.gds-partners-wrapper {
    width: 100%;
    margin: var(--gds-section-spacing) 0 0;
    padding: 0;
}

.gds-partners-wrapper > .moduletable,
.gds-partners-wrapper > [class*="moduletable"],
.gds-partners-wrapper > .module,
.gds-partners-wrapper > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================
   M010 – Unsere Partner · GDS-Integration V1.1.1
   Große Partnerkarten · Beschreibung als Hover-Overlay
   ========================================================== */

.gds-module--partners {
    --gds-m010-surface: var(--gds-color-surface, #ffffff);
    --gds-m010-text: var(--gds-color-text, #26342b);
    --gds-m010-accent: var(--gds-color-primary, #32734a);
    --gds-m010-muted: var(--gds-color-text-muted, #617066);
    --gds-m010-surface-tint: color-mix(in srgb, var(--gds-m010-accent) 8%, var(--gds-m010-surface));
    --gds-m010-surface-tint-soft: color-mix(in srgb, var(--gds-m010-accent) 3%, var(--gds-m010-surface));
    --gds-m010-border: color-mix(in srgb, var(--gds-m010-accent) 16%, transparent);
    --gds-m010-focus: var(--gds-m010-accent);
    --gds-m010-space-1: 8px; --gds-m010-space-2: 16px; --gds-m010-space-3: 24px; --gds-m010-space-4: 32px;
    width: 100%; color: var(--gds-m010-text); background: transparent;
}
.gds-module--partners .gds-partners__inner {
    width: calc(100% - 40px); max-width: 1560px; margin-inline: auto; padding: var(--gds-m010-space-4);
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 24px;
    background: var(--gds-surface-card, var(--card, transparent)); box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}
.gds-module--partners .gds-partners__header { margin-bottom: var(--gds-m010-space-3); text-align: left; }
.gds-module--partners .gds-partners__title { margin:0; color:var(--gds-m010-text); font-size:clamp(1.2rem,1.35vw,1.45rem); line-height:1.2; font-weight:700; }
.gds-module--partners .gds-partners__description { max-width:62ch; margin:var(--gds-m010-space-1) 0 0; color:var(--gds-m010-muted); }
.gds-module--partners .gds-partners__grid {
    display:grid; grid-template-columns:repeat(var(--gds-m010-columns, 3), minmax(0,1fr)); gap:clamp(16px,1.5vw,24px); align-items:stretch;
}
.gds-module--partners .gds-partner {
    position:relative; min-width:0; min-height:220px; padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
    border:1px solid var(--gds-m010-border); border-radius:18px;
    background:linear-gradient(145deg,var(--gds-m010-surface-tint) 0%,var(--gds-m010-surface) 62%,var(--gds-m010-surface-tint-soft) 100%);
    box-shadow:0 8px 22px rgba(31,55,40,.08); color:inherit; text-decoration:none;
}
.gds-module--partners a.gds-partner { cursor:pointer; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.gds-module--partners a.gds-partner:hover,.gds-module--partners a.gds-partner:focus-visible {
    border-color:color-mix(in srgb,var(--gds-m010-accent) 34%,transparent); box-shadow:0 14px 30px rgba(31,55,40,.16); text-decoration:none; transform:translateY(-2px);
}
.gds-module--partners a.gds-partner:focus-visible { outline:3px solid var(--gds-m010-focus); outline-offset:3px; }
.gds-module--partners .gds-partner__media { width:100%; height:100%; min-height:220px; padding:28px; display:flex; align-items:center; justify-content:center; }
.gds-module--partners .gds-partner__logo { display:block; width:100%; max-width:300px; height:130px; object-fit:contain; object-position:center; transition:transform .28s ease,filter .28s ease,opacity .28s ease; }
.gds-module--partners .gds-partner__overlay {
    position:absolute; inset:0; z-index:2; padding:26px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    background:color-mix(in srgb,var(--gds-m010-surface) 94%,var(--gds-m010-accent) 6%); color:var(--gds-m010-text);
    opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.gds-module--partners .gds-partner__name { display:block; margin:0 0 10px; font-size:1.12rem; line-height:1.25; font-weight:750; }
.gds-module--partners .gds-partner__text { display:block; color:var(--gds-m010-muted); font-size:.93rem; line-height:1.5; }
.gds-module--partners .gds-partner__cta { display:block; margin-top:16px; color:var(--gds-m010-accent); font-size:.9rem; font-weight:700; }
.gds-module--partners a.gds-partner--has-description:hover .gds-partner__overlay,
.gds-module--partners a.gds-partner--has-description:focus-visible .gds-partner__overlay { opacity:1; visibility:visible; transform:translateY(0); }
.gds-module--partners a.gds-partner--has-description:hover .gds-partner__logo,
.gds-module--partners a.gds-partner--has-description:focus-visible .gds-partner__logo { transform:scale(.97); opacity:.15; }
.gds-module--partners.gds-partners--grayscale .gds-partner__logo { filter:grayscale(1); opacity:.86; }
.gds-module--partners.gds-partners--grayscale a.gds-partner:hover .gds-partner__logo,
.gds-module--partners.gds-partners--grayscale a.gds-partner:focus-visible .gds-partner__logo { filter:grayscale(0); }
.gds-module--partners.gds-partners--no-hover a.gds-partner:hover,.gds-module--partners.gds-partners--no-hover a.gds-partner:focus-visible { transform:none; }
.gds-module--partners.gds-partners--no-hover .gds-partner__overlay { display:none; }
@media (max-width:980px) { .gds-module--partners .gds-partners__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
    .gds-module--partners .gds-partners__inner { width:min(100% - 28px,1100px); padding:var(--gds-m010-space-3) var(--gds-m010-space-2); border-radius:18px; }
    .gds-module--partners .gds-partners__grid { grid-template-columns:1fr; gap:var(--gds-m010-space-2); }
    .gds-module--partners .gds-partner { min-height:0; display:block; border-radius:16px; }
    .gds-module--partners .gds-partner__media { min-height:170px; height:170px; padding:22px; }
    .gds-module--partners .gds-partner__logo { max-width:280px; height:110px; }
    .gds-module--partners .gds-partner__overlay { position:static; padding:18px 20px 20px; opacity:1; visibility:visible; transform:none; background:transparent; border-top:1px solid var(--gds-m010-border); }
    .gds-module--partners a.gds-partner--has-description:hover .gds-partner__logo,.gds-module--partners a.gds-partner--has-description:focus-visible .gds-partner__logo { transform:none; opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .gds-module--partners a.gds-partner,.gds-module--partners .gds-partner__logo,.gds-module--partners .gds-partner__overlay { transition:none; } }

/* ========================================================================
   GDS FOOTER-POSITION
   ======================================================================== */

.gds-footer-wrapper {
    width: 100%;
    margin: var(--gds-section-spacing) 0 0;
    padding: 0;
}

.gds-footer-wrapper > .moduletable,
.gds-footer-wrapper > [class*="moduletable"],
.gds-footer-wrapper > .module,
.gds-footer-wrapper > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================
   M011 – Footer · GDS-Integration V1.0
   ========================================================== */

/*
   Architektur:
   - saisonales Abschlussbild über --gds-footer-image
   - vier Inhaltsblöcke: Projekt, Kontakt, Social Media, Newsletter
   - schmale rechtliche Abschlussleiste
   - Desktop 4 Spalten, Tablet 2 Spalten, Smartphone 1 Spalte
   - keine festen Saisonfarben oder produktiven Bildpfade
*/

#gds-m011-footer {
    --gds-footer-surface:
        var(--gds-footer-background, var(--gds-color-primary-dark, #174c3b));
    --gds-footer-surface-deep:
        var(--gds-footer-background-deep, #10372d);
    --gds-footer-text:
        var(--gds-footer-text-color, #ffffff);
    --gds-footer-muted:
        var(--gds-footer-muted-color, rgba(255, 255, 255, .78));
    --gds-footer-link:
        var(--gds-footer-link-color, #ffffff);
    --gds-footer-link-hover:
        var(--gds-footer-link-hover-color, rgba(255, 255, 255, .82));
    --gds-footer-border:
        var(--gds-footer-border-color, rgba(255, 255, 255, .18));
    --gds-footer-icon-bg:
        var(--gds-footer-icon-background, rgba(255, 255, 255, .13));
    --gds-footer-image:
        none;
    --gds-footer-image-position:
        center;
    --gds-footer-overlay:
        linear-gradient(
            180deg,
            rgba(16, 55, 45, .04) 0%,
            rgba(16, 55, 45, .26) 100%
        );

    width: 100%;
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    background: transparent;
}

#gds-m011-footer .gds-footer__media {
    position: relative;
    min-height: clamp(150px, 18vw, 230px);
    overflow: hidden;
    background-color: transparent;
    background-image: var(--gds-footer-image);
    background-position: var(--gds-footer-image-position);
    background-repeat: no-repeat;
    background-size: cover;
}

#gds-m011-footer .gds-footer__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gds-footer-overlay);
    pointer-events: none;
}

#gds-m011-footer .gds-footer__main {
    padding: clamp(40px, 5vw, 64px) 0;
    background: transparent;
}

#gds-m011-footer .gds-footer__inner {
    width: min(100% - 40px, 1100px);
    margin-inline: auto;
}

#gds-m011-footer .gds-footer__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr .9fr 1.25fr;
    gap: clamp(28px, 4vw, 54px);
    align-items: start;
}

#gds-m011-footer .gds-footer__block {
    min-width: 0;
}

#gds-m011-footer .gds-footer__title {
    margin: 0 0 16px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 750;
}

#gds-m011-footer .gds-footer__brand {
    margin: 0 0 12px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 750;
}

#gds-m011-footer .gds-footer__text,
#gds-m011-footer .gds-footer__address {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .94rem;
    line-height: 1.65;
    font-style: normal;
}

#gds-m011-footer .gds-footer__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#gds-m011-footer .gds-footer__link {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--gds-link, var(--gds-primary, currentColor));
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: opacity .2s ease, transform .2s ease;
}

#gds-m011-footer .gds-footer__link:hover,
#gds-m011-footer .gds-footer__link:focus-visible {
    color: var(--gds-link-hover, var(--gds-accent, currentColor));
    text-decoration: underline;
}

#gds-m011-footer .gds-footer__link:focus-visible,
#gds-m011-footer .gds-footer__social-link:focus-visible,
#gds-m011-footer .gds-footer__newsletter-button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

#gds-m011-footer .gds-footer__link-icon {
    flex: 0 0 auto;
    width: 18px;
    margin-top: .2em;
    text-align: center;
}

#gds-m011-footer .gds-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#gds-m011-footer .gds-footer__social-link {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gds-border-soft, transparent);
    border-radius: 50%;
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-link, var(--gds-primary, currentColor));
    font-size: 1.05rem;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

#gds-m011-footer .gds-footer__social-link:hover,
#gds-m011-footer .gds-footer__social-link:focus-visible {
    background: color-mix(
        in srgb,
        var(--gds-footer-icon-bg) 70%,
        #ffffff
    );
    color: var(--gds-link, var(--gds-primary, currentColor));
    text-decoration: none;
    transform: translateY(-2px);
}

#gds-m011-footer .gds-footer__newsletter-text {
    margin: 0 0 16px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .94rem;
    line-height: 1.55;
}

#gds-m011-footer .gds-footer__newsletter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid var(--gds-border-soft, transparent);
    border-radius: 10px;
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-link, var(--gds-primary, currentColor));
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

#gds-m011-footer .gds-footer__newsletter-button:hover,
#gds-m011-footer .gds-footer__newsletter-button:focus-visible {
    background: color-mix(
        in srgb,
        var(--gds-footer-icon-bg) 62%,
        #ffffff
    );
    color: var(--gds-link, var(--gds-primary, currentColor));
    text-decoration: none;
    transform: translateY(-2px);
}

#gds-m011-footer .gds-footer__legal {
    border-top: 0;
    background: var(--gds-primary, var(--gds-color-primary, currentColor));
}

#gds-m011-footer .gds-footer__legal-inner {
    width: min(100% - 40px, 1100px);
    min-height: 58px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    padding: 14px 0;
}

#gds-m011-footer .gds-footer__copyright {
    margin: 0;
    color: var(--gds-button-primary-text, #ffffff);
    font-size: .86rem;
}

#gds-m011-footer .gds-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 18px;
}

#gds-m011-footer .gds-footer__legal-link {
    color: var(--gds-link, var(--gds-primary, currentColor));
    font-size: .86rem;
    text-decoration: none;
}

#gds-m011-footer .gds-footer__legal-link:hover,
#gds-m011-footer .gds-footer__legal-link:focus-visible {
    color: var(--gds-link-hover, var(--gds-accent, currentColor));
    text-decoration: underline;
}

@media (max-width: 900px) {
    #gds-m011-footer .gds-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 44px;
    }
}

@media (max-width: 620px) {
    #gds-m011-footer .gds-footer__media {
        min-height: 140px;
    }

    #gds-m011-footer .gds-footer__inner,
    #gds-m011-footer .gds-footer__legal-inner {
        width: min(100% - 28px, 1100px);
    }

    #gds-m011-footer .gds-footer__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #gds-m011-footer .gds-footer__legal-inner {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 0;
    }

    #gds-m011-footer .gds-footer__legal-links {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gds-m011-footer .gds-footer__link,
    #gds-m011-footer .gds-footer__social-link,
    #gds-m011-footer .gds-footer__newsletter-button {
        transition: none;
    }

    #gds-m011-footer .gds-footer__social-link:hover,
    #gds-m011-footer .gds-footer__social-link:focus-visible,
    #gds-m011-footer .gds-footer__newsletter-button:hover,
    #gds-m011-footer .gds-footer__newsletter-button:focus-visible {
        transform: none;
    }
}


/* ========================================================================
   24 TEMPLATE – GDS HEADER
   ======================================================================== */

/*
   GDS Header v0.1

   Aufgabe:
   - saisonunabhängige Struktur des oberen Markenbereichs
   - klare Trennung zwischen Vereinsidentität und Servicebereich
   - responsive Darstellung für Desktop, Tablet und Smartphone
   - Navigation bleibt ein eigenständiger Bereich unterhalb des Markenheaders

   Wichtig:
   - keine festen Saisonfarben
   - Farben, Flächen, Konturen und Schatten kommen ausschließlich aus
     vorhandenen GDS-/Theme-Variablen
   - die drei Schriftgrößen-Schaltflächen sind in v0.1 nur gestaltet;
     die Funktion wird später ergänzt
*/

/* Gemeinsame saisonale Bühne für Markenheader, Navigation und Infoleiste.
   Die Base stellt nur die Layer bereit; Assets, Größen und Positionen kommen
   ausschließlich aus der aktiven Theme-Datei. */
/* Seitentypen werden in index.php eindeutig markiert:
   - .gds-theme-head--home    = Startseite mit Infoleiste
   - .gds-theme-head--content = Inhaltsseite ohne Infoleiste

   Theme-Dateien dürfen diese Klassen für notwendige, gezielte Unterschiede
   verwenden. Gemeinsame Struktur bleibt weiterhin Aufgabe der Base. */
.gds-theme-head {
    position: relative;
    z-index: 100;
    overflow: visible;
    width: 100%;
    background: var(--gds-theme-head-background);
}

.gds-theme-head::before,
.gds-theme-head::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    opacity: var(--gds-theme-head-decoration-opacity);
    filter: var(--gds-theme-head-decoration-filter);
}

.gds-theme-head::before {
    left: 0;
    width: var(--gds-theme-head-left-width);
    height: var(--gds-theme-head-left-height);
    background-image: var(--gds-theme-head-left-image);
    background-position: var(--gds-theme-head-left-position);
    background-size: var(--gds-theme-head-left-size);
}

.gds-theme-head::after {
    right: 0;
    width: var(--gds-theme-head-right-width);
    height: var(--gds-theme-head-right-height);
    background-image: var(--gds-theme-head-right-image);
    background-position: var(--gds-theme-head-right-position);
    background-size: var(--gds-theme-head-right-size);
}

.gds-theme-head > * {
    position: relative;
    z-index: 1;
}

/* Universelle, saisonunabhängige Animationsbühne.
   Standardmäßig vollständig ausgeblendet. Erst das aktive Theme bestimmt,
   welche Partikel sichtbar sind und wie sie sich bewegen. */
.gds-theme-particles {
    display: none;
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.gds-theme-particle {
    position: absolute;
    display: block;
    pointer-events: none;
}

/* Einheitliche saisonale Übergangsfläche für alle Seitentypen.
   Auf der Startseite enthält sie optional die Infoleiste. Auf Inhaltsseiten
   bleibt sie leer, reserviert jedoch denselben vom Theme benötigten Raum.
   Die Höhe ist eine Theme-Variable und wächst bei echtem Inhalt automatisch. */
.gds-theme-transition {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: var(--gds-theme-transition-min-height, 0px);
    box-sizing: border-box;
}

.gds-theme-transition > .gds-infoleiste-wrapper {
    min-height: inherit;
}

/* Die saisonalen Seitenassets liegen über den transparenten Flächen,
   aber unter allen bedienbaren Inhalten. So können sie Markenheader und
   Navigation optisch verbinden, ohne Menütexte oder Links zu überdecken. */
.gds-theme-head .gds-brand-header__inner,
.gds-theme-head #sp-header > .container,
.gds-theme-head #sp-header > .container-inner,
.gds-theme-head .gds-theme-transition > *,
.gds-theme-head .gds-infoleiste-wrapper > * {
    position: relative;
    z-index: 3;
}

/* Der Theme-Kopf bleibt über dem nachfolgenden Hero. Dropdowns dürfen den
   Wrapper verlassen und werden dadurch nicht mehr vom Hero überlagert. */
.gds-hero-wrapper {
    position: relative;
    z-index: 1;
}

.gds-brand-header {
    width: 100%;
    background: var(--gds-header-background);
    color: var(--gds-header-text);
    border-bottom: 1px solid var(--gds-header-border-color);
    box-shadow: var(--gds-header-shadow);
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.gds-header-shell {
    width: 100%;
}

.gds-header-inner {
    width: min(calc(100% - 32px), 1600px);
    margin-inline: auto;
}

.gds-brand-header__inner {
    min-height: 104px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    padding-block: 16px;
}

.gds-brand-header__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 28px);
}

.gds-brand-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gds-brand-header__logo .logo,
.gds-brand-header__logo .logo-image,
.gds-brand-header__logo img {
    display: block;
    width: auto;
    max-width: 88px;
    max-height: 88px;
    margin: 0;
}

.gds-brand-header__logo .logo-image-phone {
    display: none;
}

.gds-brand-header__text {
    min-width: 0;
}

.gds-brand-header__eyebrow,
.gds-brand-header__title,
.gds-brand-header__claim {
    margin: 0;
}

.gds-brand-header__eyebrow {
    color: var(--gds-header-text);
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
    line-height: 1.1;
    font-weight: 700;
}

.gds-brand-header__title {
    color: var(--gds-header-text);
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
}

.gds-brand-header__claim {
    margin-top: 5px;
    color: var(--gds-header-muted);
    font-size: clamp(.82rem, 1vw, .98rem);
    line-height: 1.35;
    font-weight: 600;
}

.gds-brand-header__service {
    min-width: 0;
    display: grid;
    justify-items: end;
    gap: 14px;
}

.gds-brand-header__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 18px;
}

.gds-font-tools {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.gds-font-tools__button {
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--gds-header-text);
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.gds-font-tools__button--medium {
    font-size: .9rem;
}

.gds-font-tools__button--large {
    font-size: 1.02rem;
}

.gds-font-tools__button:hover,
.gds-font-tools__button:focus-visible {
    outline: none;
    background: var(--gds-header-tool-hover-background);
    border-color: var(--gds-header-border-color);
    color: var(--gds-header-accent);
}

.gds-brand-header__search,
.gds-brand-header__service-modules {
    min-width: 0;
}

.gds-brand-header__search .sp-module,
.gds-brand-header__service-modules .sp-module,
.gds-brand-header__search .sp-module-content,
.gds-brand-header__service-modules .sp-module-content {
    margin: 0;
}

.gds-brand-header__service-modules {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.gds-brand-header__service-modules .custom,
.gds-brand-header__service-modules .sp-module-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.gds-brand-header__service a {
    color: var(--gds-header-text);
    text-decoration: none;
}

.gds-brand-header__service a:hover,
.gds-brand-header__service a:focus-visible {
    color: var(--gds-header-accent);
    text-decoration: none;
}

.gds-brand-header__motto {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--gds-header-text);
    font-size: clamp(.96rem, 1.1vw, 1.1rem);
    line-height: 1.2;
    text-align: right;
    font-style: italic;
}

.gds-brand-header__leaf {
    color: var(--gds-header-accent);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    transform: rotate(-12deg);
}

.gds-brand-header__motto strong {
    font-weight: 700;
}

.gds-navigation-placeholder {
    position: relative;
    z-index: 20;
    background: var(--gds-navigation-background);
    color: var(--gds-navigation-text);
    border-bottom: 1px solid var(--gds-navigation-border-color);
    box-shadow: var(--gds-navigation-shadow);
    -webkit-backdrop-filter: var(--gds-navigation-backdrop-filter);
    backdrop-filter: var(--gds-navigation-backdrop-filter);
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

@media (max-width: 1050px) {
    .gds-brand-header__inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gds-brand-header__service {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-items: stretch;
    }

    .gds-brand-header__tools {
        justify-content: flex-start;
    }

    .gds-brand-header__motto {
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .gds-header-inner {
        width: min(calc(100% - 24px), 1600px);
    }

    .gds-brand-header__inner {
        min-height: 0;
        padding-block: 14px;
    }

    .gds-brand-header__identity {
        align-items: flex-start;
        gap: 14px;
    }

    .gds-brand-header__logo .logo,
    .gds-brand-header__logo .logo-image,
    .gds-brand-header__logo img {
        max-width: 68px;
        max-height: 68px;
    }

    .gds-brand-header__title {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }

    .gds-brand-header__service {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 10px;
    }

    .gds-brand-header__tools,
    .gds-brand-header__service-modules,
    .gds-brand-header__service-modules .custom,
    .gds-brand-header__service-modules .sp-module-content {
        justify-content: flex-start;
    }

    .gds-brand-header__motto {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .gds-header-inner {
        width: min(calc(100% - 16px), 1600px);
    }

    .gds-brand-header__identity {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gds-brand-header__eyebrow {
        font-size: .82rem;
    }

    .gds-brand-header__claim {
        font-size: .78rem;
    }

    .gds-brand-header__tools {
        gap: 8px 12px;
    }

    .gds-brand-header__motto {
        display: none;
    }
}

/* ========================================================================
   GGW GARTENKALENDER – MONATSBEITRAG GOLDSTANDARD – V1.0.6
   Vier unterstützende September-Kartenbilder integriert
   Ausgewogene Desktop-Spalten ohne Leerraum in der ersten Kartenreihe
   September-Pilot · Fullwidth-Hero mit Höhenbegrenzung
   breitere Desktop-Karten
   vollständig auf .ggw-month-page gekapselt
======================================================================== */
.ggw-month-intro-source {
    display: none !important;
}

/* Der leere Joomla-/Helix-Bearbeitungscontainer erzeugt oberhalb des Heros
   sonst einen schmalen Streifen. Nur auf einem GGW-Monatsbeitrag ausblenden. */
body:has(.ggw-month-page) .article-can-edit {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.ggw-month-page {
    /* Theme-Bridge: Monatsbeiträge beziehen ihre Farbwelt aus Theme Studio. */
    --ggw-month-green: var(--gds-text-primary, var(--gds-text, #294c2f));
    --ggw-month-green-mid: var(--gds-primary, var(--gds-color-primary, #587d35));
    --ggw-month-green-soft: var(--gds-surface-muted, #eaf2da);
    --ggw-month-cream: var(--gds-surface-card, #fffdf4);
    --ggw-month-warm: var(--gds-info-card-background, var(--gds-surface-muted, #fff2c5));
    --ggw-month-gold: var(--gds-accent, var(--gds-secondary, #e89a12));
    --ggw-month-rust: var(--gds-link, var(--gds-accent, #b74d27));
    --ggw-month-line: var(--gds-border-soft, var(--gds-color-border, rgba(73, 101, 48, .22)));
    --ggw-month-shadow: var(--gds-shadow-card, 0 10px 28px rgba(54, 76, 39, .11));
    position: relative;
    left: 50%;
    width: min(1600px, calc(100vw - 36px));
    margin: 0;
    padding: 0 0 38px;
    transform: translateX(-50%);
    color: var(--gds-text, var(--gds-color-text, #3d4938));
    font-family: "Open Sans", sans-serif;
}

.ggw-month-page h1,
.ggw-month-page h2,
.ggw-month-page h3 {
    color: var(--ggw-month-green);
}

.ggw-month-page h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: clamp(1.08rem, 1.35vw, 1.38rem);
    line-height: 1.25;
}

.ggw-month-page h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.ggw-month-page p {
    margin: 0 0 12px;
    line-height: 1.55;
}

.ggw-month-hero {
    position: relative;
    left: 50%;
    width: 100vw;
    height: clamp(360px, 24vw, 460px);
    min-height: 0;
    max-height: 460px;
    margin: 0 0 14px;
    overflow: hidden;
    transform: translateX(-50%);
    border-radius: 0;
    box-shadow: var(--ggw-month-shadow);
    background: var(--gds-surface-muted, #dce7bc);
}

.ggw-month-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(36, 59, 32, .18), transparent 58%);
    pointer-events: none;
}

.ggw-month-hero > img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center;
}

.ggw-month-hero__panel {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: clamp(18px, 5vw, 72px);
    width: min(560px, calc(100% - 36px));
    padding: clamp(22px, 3vw, 38px);
    transform: translateY(-50%);
    border: 1px solid var(--ggw-month-line);
    border-radius: 20px;
    background: var(--ggw-month-cream);
    box-shadow: var(--ggw-month-shadow);
    backdrop-filter: blur(5px);
}

.ggw-month-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--ggw-month-rust);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.ggw-month-hero h1 {
    margin: 0 0 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.65rem);
    line-height: 1.08;
}

.ggw-month-hero__panel > p {
    margin-bottom: 14px;
    font-size: clamp(.95rem, 1.25vw, 1.12rem);
}

.ggw-month-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 9px;
    color: var(--gds-button-primary-text, var(--gds-button-text, #fff));
    background: var(--gds-button-bg, var(--ggw-month-rust));
    box-shadow: 0 5px 12px rgba(160, 69, 35, .22);
    font-size: .86rem;
    font-weight: 800;
}

.ggw-month-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.ggw-month-grid--top {
    grid-template-columns: 1.05fr .95fr 1.35fr;
}

.ggw-month-grid--middle {
    grid-template-columns: 1.1fr .78fr 1.02fr;
}

.ggw-month-grid--bottom {
    grid-template-columns: 1.25fr .95fr;
}

.ggw-month-card {
    overflow: hidden;
    border: 1px solid var(--ggw-month-line);
    border-radius: 15px;
    background: var(--ggw-month-cream);
    box-shadow: var(--gds-shadow-sm, 0 5px 16px rgba(55, 78, 40, .07));
}

.ggw-month-card__body {
    padding: clamp(16px, 1.7vw, 23px);
}

.ggw-month-card--work {
    display: grid;
    grid-template-columns: minmax(150px, .48fr) 1fr;
}

.ggw-month-card__visual {
    height: 330px;
    min-height: 0;
    padding: 10px 0 10px 10px;
    align-self: start;
}

.ggw-month-card__visual img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.ggw-card-media-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 15px;
    align-items: stretch;
}

.ggw-card-media-row__image {
    width: 100%;
    height: 100%;
    min-height: 225px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.ggw-card-media-row__content p:last-child,
.ggw-card-media-row__content ul:last-child {
    margin-bottom: 0;
}

.ggw-month-inline-image {
    height: 170px;
    margin: 0 0 13px;
    overflow: hidden;
    border-radius: 10px;
}

.ggw-month-inline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ggw-month-card--with-photo {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) 1fr;
}

.ggw-month-card__photo {
    min-height: 100%;
    padding: 10px 0 10px 10px;
}

.ggw-month-card__photo img {
    width: 100%;
    height: 100%;
    min-height: 245px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.ggw-check-list,
.ggw-sprout-list,
.ggw-nature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ggw-check-list li,
.ggw-sprout-list li,
.ggw-nature-list li {
    position: relative;
    margin: 6px 0;
    padding-left: 25px;
    line-height: 1.4;
}

.ggw-check-list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ggw-month-green-mid);
    font-size: .72rem;
    font-weight: 900;
}

.ggw-sprout-list li::before,
.ggw-nature-list li::before {
    content: "◆";
    position: absolute;
    left: 4px;
    color: var(--ggw-month-green-mid);
    font-size: .68rem;
}

.ggw-sow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ggw-soft-panel,
.ggw-month-note,
.ggw-tip-strip,
.ggw-history-note,
.ggw-weather-facts {
    border-radius: 10px;
    background: var(--ggw-month-warm);
}

.ggw-soft-panel {
    padding: 13px;
}

.ggw-soft-panel h3 {
    color: var(--ggw-month-rust);
}

.ggw-month-note,
.ggw-tip-strip,
.ggw-history-note {
    margin: 12px 0 0 !important;
    padding: 11px 13px;
    border: 1px solid var(--ggw-month-line);
    background: var(--ggw-month-green-soft);
}

.ggw-tip-strip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ggw-month-card--rule blockquote,
.ggw-month-card--guenni-rule blockquote {
    margin: 10px 0 12px;
    padding: 22px 18px;
    border: 0;
    border-radius: 10px;
    color: var(--ggw-month-rust);
    background: var(--ggw-month-warm);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.12rem, 1.55vw, 1.4rem);
    font-style: italic;
    line-height: 1.45;
    text-align: center;
}

.ggw-month-card--guenni-rule blockquote {
    color: var(--ggw-month-green);
    background: var(--ggw-month-green-soft);
}

.ggw-small-print {
    margin-bottom: 0 !important;
    color: var(--gds-text-secondary, var(--gds-color-text-muted, #66715f));
    font-size: .82rem;
}

.ggw-weather-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
}

.ggw-weather-facts span {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
}

.ggw-month-card--guenni-tip {
    background: var(--ggw-month-cream);
}

.ggw-signature {
    margin: 14px 0 0 !important;
    color: var(--ggw-month-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    font-style: italic;
}

.ggw-signature span {
    display: inline-block;
    margin-left: 8px;
    color: var(--ggw-month-rust);
    font-weight: 700;
}

.ggw-month-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.ggw-month-nav a,
.ggw-month-nav__disabled {
    min-width: 150px;
    padding: 10px 18px;
    border: 1px solid var(--ggw-month-line);
    border-radius: 10px;
    color: var(--ggw-month-green);
    background: rgba(255, 253, 242, .94);
    box-shadow: 0 4px 11px rgba(55, 78, 40, .09);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.ggw-month-nav a:hover,
.ggw-month-nav a:focus-visible {
    color: #fff;
    background: var(--ggw-month-green-mid);
}

.ggw-month-nav__disabled {
    opacity: .55;
}

@media (max-width: 1180px) {
    .ggw-month-grid--top,
    .ggw-month-grid--middle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ggw-month-card--work,
    .ggw-month-card--nature,
    .ggw-month-card--calendar {
        grid-column: span 2;
    }

    .ggw-card-media-row {
        grid-template-columns: minmax(220px, .72fr) 1fr;
    }
}

@media (max-width: 760px) {
    .ggw-month-page {
        width: min(100vw - 20px, 680px);
    }

    .ggw-month-hero {
        height: 420px;
        min-height: 390px;
        max-height: 420px;
        border-radius: 0 0 18px 18px;
    }

    .ggw-month-hero::after {
        background: linear-gradient(0deg, rgba(31, 48, 27, .3), transparent 62%);
    }

    .ggw-month-hero__panel {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        padding: 20px;
        transform: none;
    }

    .ggw-month-grid--top,
    .ggw-month-grid--middle,
    .ggw-month-grid--bottom {
        grid-template-columns: 1fr;
    }

    .ggw-month-card--work,
    .ggw-month-card--nature,
    .ggw-month-card--calendar {
        grid-column: auto;
    }

    .ggw-month-card--work {
        grid-template-columns: 1fr;
    }

    .ggw-card-media-row,
    .ggw-month-card--with-photo {
        grid-template-columns: 1fr;
    }

    .ggw-month-card__visual {
        height: 220px;
        padding: 10px 10px 0;
    }

    .ggw-month-card__photo {
        height: 245px;
        min-height: 0;
        padding: 10px 10px 0;
    }

    .ggw-month-card__visual img {
        min-height: 0;
    }

    .ggw-month-card__photo img,
    .ggw-card-media-row__image {
        min-height: 0;
    }

    .ggw-card-media-row__image {
        height: 220px;
    }

    .ggw-month-nav {
        flex-direction: column;
    }

    .ggw-month-nav a,
    .ggw-month-nav__disabled {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ggw-month-hero {
        height: 460px;
        min-height: 460px;
        max-height: 460px;
    }

    .ggw-sow-grid,
    .ggw-weather-facts {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-font-tools__button {
        transition: none;
    }
}

/* ------------------------------------------------------------------------
   GDS HEADER v0.7 – tatsächliche Headerstruktur
   ------------------------------------------------------------------------

   Tatsächlicher Aufbau:
   .gds-brand-header
     > .gds-header-shell
       > .gds-header-inner

   Im eigenen Header existiert kein Helix-/Bootstrap-.container.
   Der Außenabstand wird deshalb direkt am realen .gds-header-inner gesetzt.
*/

.gds-brand-header > .gds-header-shell > .gds-header-inner,
.gds-navigation-placeholder > .gds-header-shell > .gds-header-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .gds-brand-header > .gds-header-shell > .gds-header-inner,
    .gds-navigation-placeholder > .gds-header-shell > .gds-header-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 520px) {
    .gds-brand-header > .gds-header-shell > .gds-header-inner,
    .gds-navigation-placeholder > .gds-header-shell > .gds-header-inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}



/* ========================================================================
   GDS HEADER v0.8 – Servicebereich Feinschliff
   ======================================================================== */

.gds-font-tools{
    display:flex;
    align-items:center;
    gap:10px;
}

.gds-brand-header__tools{
    display:flex;
    align-items:center;
    gap:24px;
}

.gds-brand-header__service-links{
    display:flex;
    align-items:center;
    gap:30px;
}

.gds-service-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    text-decoration:none;
    color:inherit;
    transition:opacity .2s ease;
}

.gds-service-link:hover{
    opacity:.75;
}


/* ========================================================================
   25 TEMPLATE – GDS NAVIGATION v2.0
   Phase 8 · Bereinigte Abschlussfassung
   ======================================================================== */

/*
   Architektur:
   - Joomla verwaltet ausschließlich Menütexte, Hierarchie und Links.
   - Helix Ultimate erzeugt die Menüstruktur für Desktop und Offcanvas.
   - Das GDS steuert Geometrie, Zustände, Dropdowns und Icons.
   - Icons werden ausschließlich über CSS-Pseudoelemente erzeugt.
   - In Joomla sind keine Font-Awesome-Klassen erforderlich.
   - Farben und saisonale Werte kommen ausschließlich aus Theme-Variablen.

   Theme-Schnittstelle:
   --gds-navigation-height
   --gds-navigation-item-padding
   --gds-navigation-hover-bg
   --gds-navigation-hover-text
   --gds-navigation-hover-radius
   --gds-navigation-hover-shadow
   --gds-navigation-active-bg
   --gds-navigation-active-text
   --gds-navigation-active-radius
   --gds-navigation-active-shadow
   --gds-navigation-dropdown-bg
   --gds-navigation-dropdown-text
   --gds-navigation-dropdown-border
   --gds-navigation-dropdown-divider
   --gds-navigation-dropdown-hover-bg
   --gds-navigation-dropdown-hover-text
   --gds-navigation-dropdown-active-bg
   --gds-navigation-dropdown-active-text
   --gds-navigation-dropdown-active-line
   --gds-navigation-dropdown-shadow
   --gds-navigation-icon-color
   --gds-navigation-icon-hover-color
   --gds-navigation-icon-active-color
   --gds-navigation-icon-size
   --gds-navigation-icon-gap
*/

/* ------------------------------------------------------------------------
   25.1 Grundgeometrie
   ------------------------------------------------------------------------ */

#sp-header.gds-navigation-placeholder {
    --gds-navigation-height: 48px;
    --gds-navigation-item-padding: 14px;

    min-height: var(--gds-navigation-height);
    height: var(--gds-navigation-height);
    padding: 0;
    background: var(--gds-navigation-background) !important;
    border: 1px solid var(--gds-navigation-border-color) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: var(--gds-navigation-radius, 0);
    box-shadow: var(--gds-navigation-shadow) !important;
    backdrop-filter: var(--gds-navigation-backdrop-filter);
    -webkit-backdrop-filter: var(--gds-navigation-backdrop-filter);
}

#sp-header.gds-navigation-placeholder::before,
#sp-header.gds-navigation-placeholder::after {
    border: 0 !important;
    box-shadow: none !important;
}

#sp-header .gds-header-shell,
#sp-header .gds-header-inner,
#sp-header .gds-navigation,
#sp-header .gds-navigation__inner,
#sp-header .gds-navigation__inner > .row,
#sp-header #sp-menu,
#sp-header #sp-menu > .sp-column {
    min-height: var(--gds-navigation-height);
    height: var(--gds-navigation-height);
    padding-top: 0;
    padding-bottom: 0;
}

#sp-header .gds-navigation__inner > .row {
    margin: 0;
    align-items: stretch;
}

#sp-header #sp-menu {
    min-width: 0;
    padding-left: 32px;
    padding-right: 32px;
}

#sp-header #sp-menu > .sp-column {
    width: 100%;
}

#sp-header .offcanvas-toggler-secondary {
    height: var(--gds-navigation-height);
    display: flex;
    align-items: center;
}

/* ------------------------------------------------------------------------
   25.2 Desktop-Hauptnavigation
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
    #sp-header .sp-megamenu-wrapper,
    #sp-header .sp-megamenu-parent,
    #sp-header .sp-megamenu-parent > li {
        min-height: var(--gds-navigation-height);
        height: var(--gds-navigation-height);
        align-items: stretch;
    }

    #sp-header .sp-megamenu-wrapper {
        display: flex;
    }

    #sp-header .sp-megamenu-parent {
        display: flex !important;
        flex-direction: row !important;
        gap: 0;
        margin: 0;
    }

    #sp-header .sp-megamenu-parent > li {
        display: flex;
        margin: 0;
    }

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        min-height: var(--gds-navigation-height) !important;
        height: var(--gds-navigation-height) !important;
        display: flex !important;
        align-items: center;
        padding: 0 var(--gds-navigation-item-padding) !important;
        border: 0 !important;
        line-height: 1.2 !important;
        text-decoration: none;
        transition: background .28s ease, color .28s ease, box-shadow .28s ease,
                    border-radius .28s ease;
    }

    #sp-header .sp-megamenu-parent > li:hover > a,
    #sp-header .sp-megamenu-parent > li:hover > span,
    #sp-header .sp-megamenu-parent > li:focus-within > a,
    #sp-header .sp-megamenu-parent > li:focus-within > span {
        background: var(
            --gds-navigation-hover-bg,
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--menu-active-bg, var(--accent)) 82%, transparent),
                var(--menu-active-bg, var(--accent))
            )
        );
        color: var(--gds-navigation-hover-text, var(--menu-active-text, currentColor));
        border-radius: var(--gds-navigation-hover-radius, var(--gds-navigation-item-radius, 14px));
        box-shadow: var(
            --gds-navigation-hover-shadow,
            0 6px 16px color-mix(
                in srgb,
                var(--accent-dark, var(--menu-active-bg)) 24%,
                transparent
            )
        );
    }

    #sp-header .sp-megamenu-parent > li.active > a,
    #sp-header .sp-megamenu-parent > li.current > a,
    #sp-header .sp-megamenu-parent > li.current-item > a {
        background: var(
            --gds-navigation-active-bg,
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--menu-active-bg, var(--accent)) 88%, white),
                var(--menu-active-bg, var(--accent))
            )
        );
        color: var(--gds-navigation-active-text, var(--menu-active-text, currentColor));
        border-radius: var(--gds-navigation-active-radius, var(--gds-navigation-item-radius, 14px));
        box-shadow: var(
            --gds-navigation-active-shadow,
            inset 0 -3px 0 var(--accent-dark, var(--menu-active-bg)),
            0 8px 18px color-mix(
                in srgb,
                var(--accent-dark, var(--menu-active-bg)) 20%,
                transparent
            )
        );
        font-weight: 700;
    }

    /* Ruhiger CSS-Pfeil für Hauptpunkte mit Untermenü */
    #sp-header .sp-megamenu-parent > li.sp-has-child > a::after,
    #sp-header .sp-megamenu-parent > li.sp-has-child > span::after {
        content: "" !important;
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        margin-left: 8px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        font-family: inherit !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: translateY(-2px) rotate(45deg);
        opacity: .72;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #sp-header {
        --gds-navigation-item-padding: 12px;
    }

    #sp-header #sp-menu {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ------------------------------------------------------------------------
   25.3 Desktop-Dropdowns
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
    #sp-header .sp-megamenu-parent .sp-dropdown {
        padding-top: 0 !important;
        border: 0 !important;
        border-radius: var(--gds-navigation-dropdown-radius, 16px) !important;
        overflow: visible !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        box-shadow: var(
            --gds-navigation-dropdown-shadow,
            0 10px 24px rgba(0, 0, 0, .18)
        ) !important;
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    #sp-header .sp-megamenu-parent li:hover > .sp-dropdown,
    #sp-header .sp-megamenu-parent li:focus-within > .sp-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #sp-header .sp-megamenu-parent .sp-dropdown-inner {
        padding: var(--gds-navigation-dropdown-padding, 8px) !important;
        overflow: hidden !important;
        background: var(
            --gds-navigation-dropdown-bg,
            var(--menu-active-bg, var(--accent))
        ) !important;
        color: var(
            --gds-navigation-dropdown-text,
            var(--menu-active-text, #fff)
        ) !important;
        border: 1px solid var(
            --gds-navigation-dropdown-border,
            var(--accent-dark, transparent)
        ) !important;
        border-radius: var(--gds-navigation-dropdown-radius, 16px) !important;
        background-clip: padding-box !important;
        backdrop-filter: var(--gds-navigation-dropdown-backdrop-filter, blur(18px) saturate(1.14));
        -webkit-backdrop-filter: var(--gds-navigation-dropdown-backdrop-filter, blur(18px) saturate(1.14));
    }

    #sp-header .sp-megamenu-parent .sp-dropdown-items {
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        gap: var(--gds-navigation-dropdown-item-gap, 3px);
        overflow: hidden !important;
        border-radius: calc(var(--gds-navigation-dropdown-radius, 16px) - 4px) !important;
    }

    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item {
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: var(--gds-navigation-dropdown-item-radius, 10px) !important;
    }

    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item + .sp-menu-item {
        border-top: 0;
    }



    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item > a,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item > span {
        min-height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 !important;
        padding: 9px 13px !important;
        background: transparent !important;
        color: inherit !important;
        border: 0 !important;
        border-radius: var(--gds-navigation-dropdown-item-radius, 10px) !important;
        font-size: .9rem;
        line-height: 1.25;
        text-decoration: none;
        transition: background-color .18s ease, color .18s ease,
                    padding-left .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item:hover > a,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item:hover > span,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item:focus-within > a,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item:focus-within > span {
        padding-left: 18px !important;
        background: var(
            --gds-navigation-dropdown-hover-bg,
            var(--accent-dark, rgba(0, 0, 0, .14))
        ) !important;
        color: var(
            --gds-navigation-dropdown-hover-text,
            var(--menu-active-text, #fff)
        ) !important;
        transform: translateX(2px);
        box-shadow: var(--gds-navigation-dropdown-hover-shadow, none);
    }

    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item.active > a,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item.current > a,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item.current-item > a {
        background: var(
            --gds-navigation-dropdown-active-bg,
            var(--accent-dark, rgba(0, 0, 0, .18))
        ) !important;
        color: var(
            --gds-navigation-dropdown-active-text,
            var(--menu-active-text, #fff)
        ) !important;
        box-shadow: inset 3px 0 0 var(
            --gds-navigation-dropdown-active-line,
            var(--menu-active-text, #fff)
        );
        font-weight: 700;
    }

    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item.sp-has-child > a::after,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item.sp-has-child > span::after {
        content: "" !important;
        width: 6px;
        height: 6px;
        flex: 0 0 auto;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        font-family: inherit !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: rotate(45deg);
        opacity: .75;
    }

    #sp-header .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub {
        margin-left: 0 !important;
        margin-top: -1px !important;
    }
}

/* ------------------------------------------------------------------------
   25.4 Themefähige GDS-Menüicons
   ------------------------------------------------------------------------ */

#sp-header .sp-megamenu-parent > li > a::before,
#sp-header .sp-megamenu-parent > li > .sp-menu-heading::before,
#sp-header .sp-megamenu-parent > li > .sp-menu-separator::before,
.offcanvas-menu .mod-menu > li > a::before,
.offcanvas-menu .mod-menu > li > .mod-menu__heading::before,
.offcanvas-menu .mod-menu > li > .menu-separator::before {
    flex: 0 0 auto;
    width: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--gds-navigation-icon-gap, 8px);
    color: var(
        --gds-navigation-icon-color,
        var(--gds-link, var(--accent-dark, currentColor))
    );
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: var(--gds-navigation-icon-size, .95em);
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color .22s ease, transform .22s ease;
}

#sp-header .sp-megamenu-parent > li:hover > a::before,
#sp-header .sp-megamenu-parent > li:hover > .sp-menu-heading::before,
#sp-header .sp-megamenu-parent > li:hover > .sp-menu-separator::before,
#sp-header .sp-megamenu-parent > li:focus-within > a::before,
#sp-header .sp-megamenu-parent > li:focus-within > .sp-menu-heading::before,
#sp-header .sp-megamenu-parent > li:focus-within > .sp-menu-separator::before,
.offcanvas-menu .mod-menu > li:hover > a::before,
.offcanvas-menu .mod-menu > li:hover > .mod-menu__heading::before,
.offcanvas-menu .mod-menu > li:hover > .menu-separator::before,
.offcanvas-menu .mod-menu > li:focus-within > a::before,
.offcanvas-menu .mod-menu > li:focus-within > .mod-menu__heading::before,
.offcanvas-menu .mod-menu > li:focus-within > .menu-separator::before {
    color: var(
        --gds-navigation-icon-hover-color,
        var(--menu-active-text, currentColor)
    );
}

#sp-header .sp-megamenu-parent > li.active > a::before,
#sp-header .sp-megamenu-parent > li.current > a::before,
#sp-header .sp-megamenu-parent > li.current-item > a::before,
.offcanvas-menu .mod-menu > li.active > a::before,
.offcanvas-menu .mod-menu > li.current > a::before {
    color: var(
        --gds-navigation-icon-active-color,
        var(--menu-active-text, currentColor)
    );
}

/* Desktop: Helix gibt den Hauptpunkten keine Joomla-item-ID mit aus.
   Die Zuordnung ist deshalb bewusst auf die acht direkten Hauptpunkte begrenzt. */
#sp-header .sp-megamenu-parent > li:nth-child(1) > a::before {
    content: "\f015"; /* Home */
}

#sp-header .sp-megamenu-parent > li:nth-child(2) > .sp-menu-heading::before {
    content: "\f1ad"; /* Geschäftsstelle */
}

#sp-header .sp-megamenu-parent > li:nth-child(3) > .sp-menu-heading::before {
    content: "\f1bb"; /* Anlagen */
}

#sp-header .sp-megamenu-parent > li:nth-child(4) > .sp-menu-heading::before {
    content: "\f15c"; /* Dokumente INFO */
}

#sp-header .sp-megamenu-parent > li:nth-child(5) > a::before {
    content: "\f0c1"; /* Links */
}

#sp-header .sp-megamenu-parent > li:nth-child(6) > .sp-menu-heading::before {
    content: "\f1da"; /* Geschichte */
}

#sp-header .sp-megamenu-parent > li:nth-child(7) > .sp-menu-separator::before {
    content: "\f1ea"; /* Gartennews */
}

#sp-header .sp-megamenu-parent > li:nth-child(8) > a::before {
    content: "\f0e0"; /* Kontakt */
}

/* Offcanvas: stabile Joomla-Menü-IDs. */
.offcanvas-menu .mod-menu > li.item-101 > a::before {
    content: "\f015";
}

.offcanvas-menu .mod-menu > li.item-102 > .mod-menu__heading::before {
    content: "\f1ad";
}

.offcanvas-menu .mod-menu > li.item-105 > .mod-menu__heading::before {
    content: "\f1bb";
}

.offcanvas-menu .mod-menu > li.item-106 > .mod-menu__heading::before {
    content: "\f15c";
}

.offcanvas-menu .mod-menu > li.item-109 > a::before {
    content: "\f0c1";
}

.offcanvas-menu .mod-menu > li.item-134 > .mod-menu__heading::before {
    content: "\f1da";
}

.offcanvas-menu .mod-menu > li.item-136 > .menu-separator::before {
    content: "\f1ea";
}

.offcanvas-menu .mod-menu > li.item-140 > a::before {
    content: "\f0e0";
}

/* ------------------------------------------------------------------------
   25.5 Offcanvas-Geometrie und Schutz vor Alt-Metadaten
   ------------------------------------------------------------------------ */

.offcanvas-menu .mod-menu > li > a,
.offcanvas-menu .mod-menu > li > .mod-menu__heading,
.offcanvas-menu .mod-menu > li > .menu-separator {
    display: flex;
    align-items: center;
}

/* Eventuell noch vorhandene manuelle Menüicons werden nur im GDS ausgeblendet. */
#sp-header .sp-megamenu-parent > li > a > i,
#sp-header .sp-megamenu-parent > li > span > i,
.offcanvas-menu .mod-menu > li > a > i,
.offcanvas-menu .mod-menu > li > span > i {
    display: none !important;
}

/* ------------------------------------------------------------------------
   25.6 Barrierearme Bewegung
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span,
    #sp-header .sp-megamenu-parent .sp-dropdown,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item > a,
    #sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item > span,
    #sp-header .sp-megamenu-parent > li > a::before,
    #sp-header .sp-megamenu-parent > li > .sp-menu-heading::before,
    #sp-header .sp-megamenu-parent > li > .sp-menu-separator::before,
    .offcanvas-menu .mod-menu > li > a::before,
    .offcanvas-menu .mod-menu > li > .mod-menu__heading::before,
    .offcanvas-menu .mod-menu > li > .menu-separator::before {
        transition: none !important;
    }
}


/* ========================================================================
   26 GDS-INFOLEISTE
   ======================================================================== */

/*
   Version 0.2 · Linksbündige GDS-Fassung mit eigenständigem Labelblock

   Aufgabe:
   - statische Hinweisliste zwischen Navigation und Hero
   - eigenständige Darstellung des Moduls mod_newsticker_admin
   - vollständige Trennung vom klassischen laufenden Newsticker
   - themefähige Farben über CSS-Variablen
   - kontrollierte SVG-Größen ohne externe Icon-Abhängigkeit

   Aufbau:
   - eigenständiger linker Bezeichnungsblock
   - flexibler Meldungsbereich für mehrere Hinweise
   - optionaler Link auf der rechten Seite

   Ausrichtung:
   - der Gesamtcontainer wird nicht mehr mittig zentriert
   - seine linke Kante folgt der Navigationsachse
   - der vorhandene obere und untere Abstand bleibt erhalten
*/

.gds-infoleiste-wrapper {
    width: 100%;
    padding:
        12px
        var(--gds-infoleiste-page-padding-right, 24px)
        12px
        var(--gds-infoleiste-page-padding-left, clamp(40px, 2.6vw, 44px));
    background: var(--gds-infoleiste-wrapper-bg, transparent);
    transition: background var(--gds-infoleiste-transition);
}

.gds-infoleiste-wrapper > * {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.gds-infoleiste {
    min-width: 0;
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    column-gap: var(--gds-infoleiste-block-gap, 8px);
    overflow: visible;

    /* Der äußere Rahmen bleibt bewusst transparent. Label und Inhalt
       bilden zwei eigenständige, optisch verbundene GDS-Blöcke. */
    background: transparent;
    color: var(
        --gds-infoleiste-text,
        var(--gds-text-primary, var(--text, inherit))
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ------------------------------------------------------------------------
   26.1 Eigenständiger linker Bezeichnungsblock
   ------------------------------------------------------------------------ */

.gds-infoleiste__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    padding: 10px 16px;

    background: var(
        --gds-infoleiste-label-bg,
        var(--accent-dark, transparent)
    );
    color: var(
        --gds-infoleiste-label-text,
        var(--menu-active-text, inherit)
    );

    border: 1px solid var(
        --gds-infoleiste-label-border,
        var(--gds-infoleiste-label-bg, var(--accent-dark, transparent))
    );
    border-radius: var(--gds-infoleiste-label-radius, 8px);
    box-shadow: var(
        --gds-infoleiste-label-shadow,
        var(--gds-shadow-card, var(--shadow-soft, none))
    );

    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .015em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------------
   26.2 Meldungsbereich
   ------------------------------------------------------------------------ */

.gds-infoleiste__items {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    overflow: hidden;

    background: var(
        --gds-infoleiste-bg,
        var(--gds-surface-card, var(--card, transparent))
    );
    border: 1px solid var(
        --gds-infoleiste-border,
        var(--gds-border-soft, var(--border-card, transparent))
    );
    border-radius: var(--gds-infoleiste-radius, 8px);
    box-shadow: var(
        --gds-infoleiste-shadow,
        var(--gds-shadow-card, var(--shadow-soft, none))
    );
    transition: background var(--gds-infoleiste-transition), border-color var(--gds-infoleiste-transition),
                box-shadow var(--gds-infoleiste-transition);
}

/* Ist ein rechter Link vorhanden, bilden Meldungsbereich und Link optisch
   eine gemeinsame Einheit. */
.gds-infoleiste:has(.gds-infoleiste__more) .gds-infoleiste__items {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.gds-infoleiste__item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    position: relative;
    border-radius: calc(var(--gds-infoleiste-radius, 12px) - 3px);
    transition: background var(--gds-infoleiste-transition), transform var(--gds-infoleiste-transition);
}

.gds-infoleiste__item:hover {
    background: var(--gds-infoleiste-item-hover-bg, transparent);
    transform: translateY(-1px);
}

.gds-infoleiste__item + .gds-infoleiste__item::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 0;
    width: 1px;
    background: var(
        --gds-infoleiste-divider,
        var(--gds-border-soft, var(--border-card, transparent))
    );
}

.gds-infoleiste__text {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------------
   26.3 SVG-Icons
   ------------------------------------------------------------------------ */

.gds-infoleiste__icon,
.gds-infoleiste__more-icon {
    flex: 0 0 auto;
    width: var(--gds-infoleiste-icon-size, 17px);
    height: var(--gds-infoleiste-icon-size, 17px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(
        --gds-infoleiste-icon-color,
        var(--gds-link, var(--accent-dark, currentColor))
    );
    line-height: 1;
}

.gds-infoleiste__icon svg,
.gds-infoleiste__more-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
    fill: currentColor;
}

/* Optionale, separat themefähige Kategorien */
.gds-infoleiste__item--wichtig .gds-infoleiste__icon {
    color: var(
        --gds-infoleiste-icon-wichtig,
        var(--gds-infoleiste-icon-color, var(--accent-dark, currentColor))
    );
}

.gds-infoleiste__item--termin .gds-infoleiste__icon {
    color: var(
        --gds-infoleiste-icon-termin,
        var(--gds-infoleiste-icon-color, var(--accent-dark, currentColor))
    );
}

.gds-infoleiste__item--garten .gds-infoleiste__icon {
    color: var(
        --gds-infoleiste-icon-garten,
        var(--gds-infoleiste-icon-color, var(--accent-dark, currentColor))
    );
}

.gds-infoleiste__item--hinweis .gds-infoleiste__icon,
.gds-infoleiste__item--info .gds-infoleiste__icon {
    color: var(
        --gds-infoleiste-icon-info,
        var(--gds-infoleiste-icon-color, var(--accent-dark, currentColor))
    );
}

/* ------------------------------------------------------------------------
   26.4 Rechter Link
   ------------------------------------------------------------------------ */

.gds-infoleiste__more {
    display: flex;
    align-items: stretch;
    margin-left: calc(-1 * var(--gds-infoleiste-block-gap, 8px));

    background: var(
        --gds-infoleiste-bg,
        var(--gds-surface-card, var(--card, transparent))
    );
    border: 1px solid var(
        --gds-infoleiste-border,
        var(--gds-border-soft, var(--border-card, transparent))
    );
    border-left: 0;
    border-radius: 0 var(--gds-infoleiste-radius, 8px) var(--gds-infoleiste-radius, 8px) 0;
    box-shadow: var(
        --gds-infoleiste-shadow,
        var(--gds-shadow-card, var(--shadow-soft, none))
    );
}

.gds-infoleiste__more > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    color: var(
        --gds-infoleiste-link,
        var(--gds-link, var(--accent-dark, currentColor))
    );
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.gds-infoleiste__more > a:hover,
.gds-infoleiste__more > a:focus-visible {
    background: var(
        --gds-infoleiste-link-hover-bg,
        var(--gds-surface-muted, transparent)
    );
    color: var(
        --gds-infoleiste-link-hover,
        var(--gds-link-hover, currentColor)
    );
    text-decoration: none;
}

.gds-infoleiste__more-icon {
    width: 15px;
    height: 15px;
    color: currentColor;
}

/* ------------------------------------------------------------------------
   26.5 Responsive Verhalten
   ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
    .gds-infoleiste {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gds-infoleiste:has(.gds-infoleiste__more) .gds-infoleiste__items {
        border-top-right-radius: var(--gds-infoleiste-radius, 8px);
        border-bottom-right-radius: var(--gds-infoleiste-radius, 8px);
    }

    .gds-infoleiste__more {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-top: var(--gds-infoleiste-block-gap, 8px);
        border: 1px solid var(
            --gds-infoleiste-border,
            var(--gds-border-soft, var(--border-card, transparent))
        );
        border-radius: var(--gds-infoleiste-radius, 8px);
    }

    .gds-infoleiste__more > a {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 850px) {
    .gds-infoleiste__items {
        grid-template-columns: 1fr;
    }

    .gds-infoleiste__item + .gds-infoleiste__item::before {
        top: 0;
        right: 16px;
        bottom: auto;
        left: 16px;
        width: auto;
        height: 1px;
    }

    .gds-infoleiste__text {
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .gds-infoleiste-wrapper {
        padding: 10px 12px;
    }

    .gds-infoleiste {
        grid-template-columns: 1fr;
        row-gap: var(--gds-infoleiste-block-gap, 8px);
    }

    .gds-infoleiste__label {
        justify-content: flex-start;
        min-width: 0;
        padding: 10px 14px;
    }

    .gds-infoleiste__item {
        padding: 10px 14px;
    }

    .gds-infoleiste__more {
        grid-column: auto;
        margin-top: 0;
    }

    .gds-infoleiste__more > a {
        justify-content: space-between;
        padding: 10px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-infoleiste__more > a {
        transition: none;
    }
}

/* ========================================================================
   F001 – SCHRIFTGRÖSSENUMSCHALTUNG
   Version 1.0
   ======================================================================== */

/*
   Die ausgewählte Schriftstufe wird als Klasse auf dem html-Element gesetzt.
   rem-basierte Größen im gesamten GDS reagieren dadurch automatisch.

   Stufen:
   - gds-font-small  = Standardschrift (100 %)
   - gds-font-medium = vergrößerte Schrift (112.5 %)
   - gds-font-large  = große Schrift (125 %)
*/

html.gds-font-small {
    font-size: 100%;
}

html.gds-font-medium {
    font-size: 112.5%;
}

html.gds-font-large {
    font-size: 125%;
}

.gds-font-tools__button[aria-pressed="true"],
.gds-font-tools__button.is-active {
    background: var(--gds-header-tool-hover-background);
    border-color: var(--gds-header-accent);
    color: var(--gds-header-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gds-header-accent) 18%, transparent);
}

.gds-font-tools__button:focus-visible {
    outline: 2px solid var(--gds-header-accent);
    outline-offset: 2px;
}

@supports not (color: color-mix(in srgb, black, white)) {
    .gds-font-tools__button[aria-pressed="true"],
    .gds-font-tools__button.is-active {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-font-tools__button {
        transition: none;
    }
}

/* ========================================================================
   GDS SEITENLAYOUTS
   ======================================================================== */

/* ------------------------------------------------------------------------
   KONTAKTSEITE
   Version 0.2
   ------------------------------------------------------------------------ */

/*
   Aufgabe:
   - ordnet vorhandene GDS-Bausteine zu einer kompakten Kontakt-Einstiegsseite
   - verwendet C001 Container, C002 Card und C003 Button
   - lehnt die visuelle Sprache an C011 Info Card an, ohne eine neue
     Komponente einzuführen
   - enthält keine festen Saisonfarben
   - hält den Seitenkopf bewusst kompakt, damit die Servicekarten im Fokus stehen
*/

.gds-contact-page {
    width: 100%;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(48px, 6vw, 84px);
}

.gds-contact-page__intro {
    margin-bottom: clamp(20px, 2.5vw, 30px);
}

.gds-contact-page__header {
    max-width: 720px;
}

.gds-contact-page__title {
    margin: 0 0 8px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.9rem, 2.8vw, 2.45rem);
    line-height: 1.1;
}

.gds-contact-page__lead {
    max-width: 60ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: 1rem;
    line-height: 1.65;
}

.gds-contact-page__section-header {
    max-width: 76ch;
    margin-bottom: 24px;
}

.gds-contact-page__section-title {
    margin: 0 0 8px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.55rem, 2.5vw, 2.05rem);
    line-height: 1.2;
}

.gds-contact-page__section-description {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-contact-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 26px);
    align-items: stretch;
}

.gds-contact-page__service-card {
    --gds-contact-card-background: var(
        --gds-info-tone-1,
        var(--gds-surface-card, var(--card, transparent))
    );
    --gds-contact-card-icon-background: var(
        --gds-info-icon-bg,
        rgba(255, 255, 255, .30)
    );

    min-width: 0;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: clamp(24px, 3vw, 34px) clamp(20px, 2.5vw, 28px) 24px;
    text-align: center;

    background: var(--gds-contact-card-background);
    border-radius: 18px;

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-contact-page__service-card:nth-child(1) {
    --gds-contact-card-background: var(
        --gds-info-tone-1,
        var(--gds-surface-card, var(--card, transparent))
    );
}

.gds-contact-page__service-card:nth-child(2) {
    --gds-contact-card-background: var(
        --gds-info-tone-3,
        var(--gds-surface-card, var(--card, transparent))
    );
}

.gds-contact-page__service-card:nth-child(3) {
    --gds-contact-card-background: var(
        --gds-info-tone-5,
        var(--gds-surface-card, var(--card, transparent))
    );
}

.gds-contact-page__service-card:hover,
.gds-contact-page__service-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(
        --gds-info-shadow-hover,
        var(--gds-shadow-card-hover, var(--shadow-strong, none))
    );
}

.gds-contact-page__service-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;

    background: var(--gds-contact-card-icon-background);
    color: var(--gds-info-icon-text, currentColor);
    border-radius: 50%;

    font-size: 1.65rem;
    line-height: 1;
}

.gds-contact-page__service-title {
    margin: 0 0 6px;
    color: inherit;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.2;
}

.gds-contact-page__service-subtitle {
    margin: 0 0 16px;
    color: inherit;
    font-weight: 700;
}

.gds-contact-page__service-text {
    max-width: 32ch;
    margin: 0 auto 24px;
    color: var(--gds-info-muted, var(--gds-text-secondary, var(--muted, inherit)));
}

.gds-contact-page__service-card > .gds-button {
    width: 100%;
    margin-top: auto;
}

@media (max-width: 900px) {
    .gds-contact-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gds-contact-page__service-card:last-child {
        grid-column: 1 / -1;
        width: min(100%, calc(50% - 9px));
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .gds-contact-page {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .gds-contact-page__intro {
        margin-bottom: 22px;
    }

    .gds-contact-page__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gds-contact-page__service-card,
    .gds-contact-page__service-card:last-child {
        grid-column: auto;
        width: 100%;
        min-height: 0;
        padding: 24px 18px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-contact-page__service-card {
        transition: none;
    }
}

/* ------------------------------------------------------------------------
   VORSTANDSSEITE
   Version 0.1
   ------------------------------------------------------------------------ */

/*
   Aufgabe:
   - stellt den Vorstand als großzügige, persönliche Ansprechpartnerseite dar
   - verwendet eine kompakte Einleitungskarte und drei große Personenkarten
   - bereitet den späteren Einsatz echter Portraitbilder vor
   - ermöglicht wechselnde Bild-/Textausrichtung auf großen Bildschirmen
   - bleibt vollständig themefähig und enthält keine festen Saisonfarben
   - dient als Praxiserprobung für die spätere Komponente C013 Person Card
*/

.gds-board-page {
    width: 100%;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(48px, 6vw, 84px);
}

.gds-board-page__intro {
    margin-bottom: clamp(22px, 3vw, 34px);
}

.gds-board-page__intro-card {
    margin: 0;
    padding: clamp(24px, 3vw, 38px);
    background: var(
        --gds-board-intro-background,
        var(--gds-surface-card, var(--card, transparent))
    );
}

.gds-board-page__header {
    max-width: 82ch;
}

.gds-board-page__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-board-role-color, var(--gds-link, var(--accent-dark, inherit)));
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.gds-board-page__title {
    margin: 0 0 12px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.9rem, 2.8vw, 2.45rem);
    line-height: 1.1;
}

.gds-board-page__lead {
    max-width: 70ch;
    margin: 0 0 10px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.02rem, 1.4vw, 1.14rem);
    line-height: 1.65;
}

.gds-board-page__intro-text {
    max-width: 76ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    line-height: 1.65;
}

.gds-board-page__member-list {
    display: grid;
    gap: clamp(20px, 2.5vw, 30px);
}

.gds-board-card {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(24px, 3.5vw, 48px);

    min-width: 0;
    margin: 0;
    padding: clamp(22px, 2.7vw, 34px);

    background: var(
        --gds-board-card-background,
        var(--gds-surface-card, var(--card, transparent))
    );

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-board-card:hover,
.gds-board-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(
        --gds-board-card-shadow-hover,
        var(--gds-shadow-card-hover, var(--shadow-strong, none))
    );
}

.gds-board-card__media {
    width: 100%;
    max-width: 230px;
    aspect-ratio: 1 / 1;
    align-self: center;
    justify-self: start;
    overflow: hidden;

    background: var(
        --gds-board-image-background,
        var(--gds-surface-muted, var(--header-bg, transparent))
    );
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-board-image-shadow, var(--gds-shadow-card, var(--shadow-soft, none)));
}

.gds-board-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gds-board-card__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 0;
}

.gds-board-card__role {
    margin: 0 0 7px;
    color: var(--gds-board-role-color, var(--gds-link, var(--accent-dark, inherit)));
    font-size: .95rem;
    font-weight: 700;
}

.gds-board-card__name {
    margin: 0 0 16px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 1.15;
}

.gds-board-card__description {
    max-width: 68ch;
    margin: 0 0 22px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    line-height: 1.7;
}

.gds-board-card__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: auto;
}

.gds-board-card__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 13px;

    background: var(
        --gds-board-contact-background,
        var(--gds-surface-muted, var(--header-bg, transparent))
    );
    color: var(--gds-link, var(--accent-dark, currentColor));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;

    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;

    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gds-board-card__contact-link:hover,
.gds-board-card__contact-link:focus {
    background: var(
        --gds-board-contact-hover-background,
        var(--gds-button-bg, var(--accent, transparent))
    );
    color: var(
        --gds-board-contact-hover-text,
        var(--gds-button-text, var(--menu-active-text, inherit))
    );
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-board-card__contact-link:focus-visible {
    outline: 2px solid var(--gds-link, var(--accent-dark, currentColor));
    outline-offset: 3px;
}

.gds-board-card--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
}

.gds-board-card--reverse .gds-board-card__media {
    order: 2;
    justify-self: end;
}

.gds-board-card--reverse .gds-board-card__content {
    order: 1;
}

@media (max-width: 820px) {
    .gds-board-card,
    .gds-board-card--reverse {
        grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
        gap: 24px;
    }

    .gds-board-card--reverse .gds-board-card__media,
    .gds-board-card--reverse .gds-board-card__content {
        order: initial;
    }

    .gds-board-card--reverse .gds-board-card__media {
        justify-self: start;
    }

    .gds-board-card__media {
        max-width: 190px;
    }
}

@media (max-width: 640px) {
    .gds-board-page {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .gds-board-page__intro {
        margin-bottom: 20px;
    }

    .gds-board-page__intro-card {
        padding: 22px 18px;
    }

    .gds-board-page__member-list {
        gap: 16px;
    }

    .gds-board-card,
    .gds-board-card--reverse {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 18px;
    }

    .gds-board-card__media,
    .gds-board-card--reverse .gds-board-card__media {
        order: initial;
        width: min(100%, 220px);
        max-width: 220px;
        justify-self: center;
    }

    .gds-board-card__content,
    .gds-board-card--reverse .gds-board-card__content {
        order: initial;
        padding: 0;
        text-align: center;
    }

    .gds-board-card__description {
        margin-left: auto;
        margin-right: auto;
    }

    .gds-board-card__contact {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .gds-board-card__media,
    .gds-board-card--reverse .gds-board-card__media {
        width: min(100%, 190px);
        max-width: 190px;
    }

    .gds-board-card__contact-link {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-board-card,
    .gds-board-card__contact-link {
        transition: none;
    }
}



/* ========================================================================
   C013 PERSON CARD
======================================================================== */

.gds-person-list{
display:grid;
gap:24px;
margin-bottom:32px;
}

.gds-person-card{
display:grid;
grid-template-columns:minmax(180px,220px) 1fr;
gap:clamp(24px,3vw,40px);
align-items:center;
padding:clamp(24px,3vw,36px);
background:var(--gds-surface-card,var(--card,transparent));
color:var(--gds-text-primary,var(--text,inherit));
border:1px solid var(--gds-border-soft,var(--border-card,transparent));
border-radius:18px;
box-shadow:var(--gds-shadow-card,var(--shadow-soft,none));
margin-bottom:24px;
}
.gds-person-card--reverse{
grid-template-columns:1fr minmax(180px,220px);
}
.gds-person-card--reverse .gds-person-card__media{order:2;}
.gds-person-card__media{display:flex;justify-content:center}
.gds-person-card__image{
width:100%;
max-width:220px;
aspect-ratio:1/1;
object-fit:cover;
border-radius:18px;
border:4px solid var(--gds-surface-card,var(--card,#fff));
box-shadow:var(--gds-shadow-card,var(--shadow-soft,none));
}
.gds-person-card__role{
margin:0 0 .35rem;
font-weight:700;
color:var(--gds-text-secondary,var(--muted,inherit));
text-transform:uppercase;
font-size:.9rem;
letter-spacing:.05em;
}
.gds-person-card__name{
margin:0 0 1rem;
font-size:clamp(1.7rem,2.2vw,2.2rem);
}
.gds-person-card__description{margin-bottom:1.2rem;}
.gds-person-card__contact-item{
display:flex;gap:12px;align-items:flex-start;margin:0;
}
.gds-person-card__contact-icon{
width:42px;height:42px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:var(--gds-contact-icon-bg,var(--accent,transparent));
color:var(--gds-contact-icon-text,var(--menu-active-text,inherit));
}
.gds-person-card__contact-label{display:block;font-size:.85rem;color:var(--gds-text-secondary,var(--muted,inherit));}
.gds-person-card__contact-link{
color:var(--gds-link,var(--accent-dark,currentColor));
text-decoration:none;font-weight:600;
}
.gds-person-card__contact-link:hover{text-decoration:underline;}
@media (max-width:768px){
.gds-person-card,.gds-person-card--reverse{
grid-template-columns:1fr;
}
.gds-person-card--reverse .gds-person-card__media{order:0;}
.gds-person-card__image{max-width:180px;}
}
/* ========================================================================
   GDS SEITENLAYOUT – GESCHÄFTSSTELLE
   Version 1.3
======================================================================== */

/*
   Aufgabe:
   - baut die Geschäftsstelle als moderne Service- und Kontaktseite auf
   - verwendet C001 Container, C002 Card und C011 Info Card
   - nutzt ein saisonal austauschbares Hero-Bild
   - enthält keine festen Saisonfarben
   - ergänzt keine neue allgemeine Komponente
*/

.gds-office-page {
    width: 100%;
    padding-bottom: clamp(48px, 6vw, 84px);
}

.gds-office-hero {
    --gds-office-hero-image: url("/images/headers/1234_normal.jpg");

    position: relative;
    min-height: clamp(340px, 42vh, 500px);
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            var(--gds-office-hero-overlay-strong, rgba(0, 0, 0, .18)),
            var(--gds-office-hero-overlay-soft, rgba(0, 0, 0, .02))
        ),
        var(--gds-office-hero-image) center / cover no-repeat;
}

.gds-office-hero__inner {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(24px, 3vw, 40px);
}

.gds-office-hero__panel {
    width: min(100%, 470px);
    padding: clamp(18px, 2vw, 22px);
    transform: translateY(-28px);

    background: var(
        --gds-office-hero-panel-background,
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .62) 0%,
            rgba(255, 255, 255, .50) 55%,
            rgba(255, 255, 255, .44) 100%
        )
    );
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.gds-office-hero__eyebrow,
.gds-office-intro__eyebrow,
.gds-office-location__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gds-office-hero__title {
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.65rem, 2.5vw, 2.3rem);
    line-height: 1.02;
}

.gds-office-hero__title::after,
.gds-office-intro__title::after,
.gds-office-location__title::after {
    content: "";
    width: 54px;
    height: 3px;
    display: block;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--gds-link, var(--accent-dark, currentColor));
}

.gds-office-hero__text {
    max-width: 46ch;
    margin: 12px 0 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(.96rem, 1.1vw, 1.04rem);
    line-height: 1.55;
}

.gds-office-hero__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}

.gds-office-hero__feature {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 0 8px;
    text-align: center;
}

.gds-office-hero__feature + .gds-office-hero__feature {
    border-left: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}

.gds-office-hero__feature-icon {
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: 1.18rem;
}

.gds-office-hero__feature strong {
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: .86rem;
}

.gds-office-hero__feature span:last-child {
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .8rem;
    line-height: 1.4;
}

.gds-office-page__content {
    padding-top: clamp(44px, 6vw, 80px);
}

.gds-office-intro {
    max-width: 820px;
    margin: 0 auto clamp(30px, 4vw, 48px);
    text-align: center;
}

.gds-office-intro__title {
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.12;
}

.gds-office-intro__title::after {
    margin-left: auto;
    margin-right: auto;
}

.gds-office-intro__text {
    margin: 22px 0 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.75;
}

.gds-office-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    margin-bottom: clamp(28px, 4vw, 48px);
}

.gds-office-service-card {
    min-height: 310px;
    align-items: flex-start;
    padding: clamp(24px, 3vw, 34px);
    text-align: left;
}

.gds-office-service-card .gds-info-card__header {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
}

.gds-office-service-card .gds-info-card__content {
    align-items: flex-start;
    justify-content: flex-start;
}

.gds-office-service-card .gds-info-card__secondary {
    font-size: .96rem;
    line-height: 1.7;
}

.gds-office-service-card__link {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gds-office-service-card__link:hover,
.gds-office-service-card__link:focus {
    text-decoration: underline;
}

.gds-office-service-card__mail {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.35;
}

.gds-office-location {
    margin-bottom: clamp(24px, 3vw, 36px);
}

.gds-office-location__content {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.35fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
}

.gds-office-location__title {
    margin: 0 0 30px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.9rem, 3vw, 2.55rem);
}

.gds-office-location__list {
    display: grid;
    gap: 24px;
}

.gds-office-location__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.gds-office-location__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--gds-contact-icon-bg, var(--accent, transparent));
    color: var(--gds-contact-icon-text, var(--menu-active-text, inherit));
    border-radius: 50%;
}

.gds-office-location__item h3 {
    margin: 0 0 4px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1rem;
}

.gds-office-location__item p,
.gds-office-location__item address {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-style: normal;
    line-height: 1.6;
}

.gds-office-location__media {
    min-width: 0;
    margin: 0;
}

.gds-office-location__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-office-closing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
    gap: clamp(20px, 3vw, 34px);
    align-items: center;

    padding: clamp(24px, 3vw, 34px);

    background: var(
        --gds-office-closing-background,
        var(--gds-info-tone-1, var(--gds-surface-card, var(--card, transparent)))
    );
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-office-closing__icon {
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: 2.2rem;
}

.gds-office-closing__title {
    margin: 0 0 6px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.gds-office-closing__content p {
    max-width: 72ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    line-height: 1.65;
}

.gds-office-closing__message {
    margin: 0;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: clamp(1.2rem, 2.3vw, 1.8rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}


@media (max-width: 980px) {
    .gds-office-location__content {
        grid-template-columns: 1fr;
    }

    .gds-office-location__media {
        order: -1;
    }

    .gds-office-closing {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gds-office-closing__message {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .gds-office-service-grid {
        grid-template-columns: 1fr;
    }

    .gds-office-service-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .gds-office-hero {
        min-height: auto;
        align-items: flex-end;
        padding-top: 260px;
        background-position: center top;
    }

    .gds-office-hero__inner {
        padding: 20px;
    }

    .gds-office-hero__panel {
        width: 100%;
        padding: 24px 20px;
        transform: none;
    }

    .gds-office-hero__features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gds-office-hero__feature {
        grid-template-columns: 30px minmax(0, 1fr);
        justify-items: start;
        padding: 0;
        text-align: left;
    }

    .gds-office-hero__feature + .gds-office-hero__feature {
        padding-top: 14px;
        border-top: 1px solid var(--gds-border-soft, var(--border-card, transparent));
        border-left: 0;
    }

    .gds-office-hero__feature span:last-child {
        grid-column: 2;
    }

    .gds-office-location {
        padding: 22px 18px;
    }

    .gds-office-closing {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gds-office-closing__icon {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-office-service-card {
        transition: none;
    }
}

/* ========================================================================
   GDS SEITENLAYOUT – IT-AUSSCHUSS
   Version 1.0
======================================================================== */

/*
   Aufgabe:
   - nutzt den bestehenden M-Hero der Geschäftsstelle als Unterseitenstandard
   - stellt den IT-Ausschuss, den Ansprechpartner und seine Schwerpunkte dar
   - verwendet ausschließlich themefähige GDS-Flächen und Variablen
   - verändert den bestehenden Footer nicht
*/

.gds-it-page {
    width: 100%;
    padding-bottom: clamp(48px, 6vw, 84px);
}

.gds-it-hero {
    --gds-office-hero-image: url("/images/headers/1234_normal.jpg");
}

.gds-it-page__content {
    padding-top: clamp(44px, 6vw, 76px);
}

.gds-it-intro {
    max-width: 850px;
    margin: 0 auto clamp(30px, 4vw, 48px);
    text-align: center;
}

.gds-it-intro__eyebrow,
.gds-it-focus__eyebrow,
.gds-it-profile__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gds-it-intro__title {
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.12;
}

.gds-it-intro__title::after,
.gds-it-profile__name::after,
.gds-it-focus__eyebrow::after {
    content: "";
    width: 54px;
    height: 3px;
    display: block;
    margin-top: 16px;
    border-radius: 999px;
    background: var(--gds-link, var(--accent-dark, currentColor));
}

.gds-it-intro__title::after,
.gds-it-focus__eyebrow::after {
    margin-left: auto;
    margin-right: auto;
}

.gds-it-intro__text {
    margin: 22px 0 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.75;
}

.gds-it-profile {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(250px, .85fr) minmax(280px, 1fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: center;
    margin-bottom: clamp(36px, 5vw, 56px);
    padding: clamp(26px, 3vw, 38px);

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-it-profile__portrait img {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    border: 4px solid var(--gds-surface-card, var(--card, transparent));
    border-radius: 50%;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-it-profile__name {
    margin: 0 0 24px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.8rem, 2.6vw, 2.45rem);
    line-height: 1.12;
}

.gds-it-profile__name::after {
    margin-top: 12px;
}

.gds-it-profile__contact {
    display: grid;
    gap: 16px;
}

.gds-it-profile__contact-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
}

.gds-it-profile__contact-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: 1.15rem;
}

.gds-it-profile__contact-item strong,
.gds-it-profile__contact-item a {
    display: block;
}

.gds-it-profile__contact-item a {
    color: var(--gds-link, var(--accent-dark, currentColor));
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gds-it-profile__contact-item a:hover,
.gds-it-profile__contact-item a:focus {
    text-decoration: underline;
}

.gds-it-profile__quote {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: clamp(24px, 3vw, 34px);

    background: var(--gds-info-tone-1, var(--gds-surface-muted, var(--header-bg, transparent)));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
}

.gds-it-profile__quote-icon {
    display: block;
    margin-bottom: 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: 2rem;
    line-height: 1;
}

.gds-it-profile__quote p {
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
}

.gds-it-profile__quote footer {
    margin-top: 20px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 700;
    text-align: right;
}

.gds-it-focus__header {
    margin-bottom: 20px;
    text-align: center;
}

.gds-it-focus__eyebrow::after {
    margin-top: 10px;
}

.gds-it-focus__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.gds-it-focus-card {
    min-width: 0;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(22px, 2.5vw, 30px) 20px;
    text-align: center;

    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    transition: transform .2s ease, box-shadow .2s ease;
}

.gds-it-focus-card:hover,
.gds-it-focus-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-it-focus-card__icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;

    background: var(--gds-info-icon-bg, rgba(255, 255, 255, .30));
    color: var(--gds-link, var(--accent-dark, currentColor));
    border-radius: 50%;
    font-size: 1.75rem;
}

.gds-it-focus-card h3 {
    margin: 0 0 10px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.05rem;
    line-height: 1.35;
}

.gds-it-focus-card p {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .94rem;
    line-height: 1.6;
}

@media (max-width: 1050px) {
    .gds-it-profile {
        grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    }

    .gds-it-profile__quote {
        grid-column: 1 / -1;
    }

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

@media (max-width: 700px) {
    .gds-it-profile {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gds-it-profile__portrait img {
        margin: 0 auto;
    }

    .gds-it-profile__name::after {
        margin-left: auto;
        margin-right: auto;
    }

    .gds-it-profile__contact {
        width: min(100%, 340px);
        margin: 0 auto;
        text-align: left;
    }

    .gds-it-profile__quote {
        grid-column: auto;
        text-align: left;
    }

    .gds-it-focus__grid {
        grid-template-columns: 1fr;
    }

    .gds-it-focus-card {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-it-focus-card {
        transition: none;
    }
}

/* ========================================================================
   GDS R009 / M012 KONTAKTCENTER
   Version 1.2
   ======================================================================== */

.gds-contact-center {
    width: 100%;
    padding: clamp(28px, 4vw, 54px) 0 clamp(52px, 7vw, 92px);
}

.gds-contact-center__intro {
    max-width: 900px;
    margin: 0 auto clamp(30px, 4vw, 46px);
    text-align: center;
}

.gds-contact-center__eyebrow,
.gds-contact-center__section-kicker,
.gds-contact-center__form-kicker {
    margin: 0 0 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-weight: 700;
    letter-spacing: .02em;
}

.gds-contact-center__eyebrow i { margin-right: 8px; }

.gds-contact-center__title {
    margin: 0 0 14px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.08;
}

.gds-contact-center__lead {
    max-width: 72ch;
    margin: 0 auto;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
}

.gds-contact-center__choices { margin-bottom: clamp(30px, 4vw, 48px); }
.gds-contact-center__section-heading { margin-bottom: 18px; text-align: center; }
.gds-contact-center__section-title { margin: 0; font-size: clamp(1.55rem, 2.3vw, 2rem); }

.gds-contact-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 28px);
    max-width: 1050px;
    margin: 0 auto;
}

.gds-contact-choice-card {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: clamp(22px, 3vw, 30px);
    text-align: left;
    color: var(--gds-text-primary, var(--text, inherit));
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 20px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gds-contact-choice-card:hover,
.gds-contact-choice-card:focus-visible,
.gds-contact-choice-card.is-active {
    transform: translateY(-3px);
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
    border-color: var(--gds-link, var(--accent, currentColor));
    outline: none;
}

.gds-contact-choice-card__icon,
.gds-contact-center__form-icon,
.gds-contact-service-card__icon,
.gds-contact-form-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gds-contact-icon-bg, var(--accent, transparent));
    color: var(--gds-contact-icon-text, var(--menu-active-text, inherit));
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-contact-choice-card__icon { width: 64px; height: 64px; border-radius: 18px; font-size: 1.55rem; }
.gds-contact-choice-card__content { display: flex; flex-direction: column; min-width: 0; }
.gds-contact-choice-card__title { margin-bottom: 7px; font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 800; }
.gds-contact-choice-card__text { color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.65; }
.gds-contact-choice-card__action { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--gds-link, var(--accent-dark, currentColor)); font-weight: 700; }

.gds-contact-center__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(270px, .68fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
}

.gds-contact-center__form-card { margin: 0; padding: clamp(22px, 3vw, 36px); scroll-margin-top: 120px; }
.gds-contact-center__form-header { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 26px; }
.gds-contact-center__form-icon { width: 54px; height: 54px; border-radius: 16px; font-size: 1.3rem; }
.gds-contact-center__form-title { margin: 0 0 5px; font-size: clamp(1.55rem, 2.3vw, 2rem); }
.gds-contact-center__form-description { margin: 0; color: var(--gds-text-secondary, var(--muted, inherit)); }

.gds-contact-center__aside { display: grid; gap: 18px; }
.gds-contact-service-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 15px;
    padding: 20px;
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}
.gds-contact-service-card__icon { width: 46px; height: 46px; border-radius: 50%; font-size: 1.05rem; }
.gds-contact-service-card__title { margin: 1px 0 8px; font-size: 1.08rem; }
.gds-contact-service-card__text { margin: 0; color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.6; }
.gds-contact-service-card__steps { display: grid; gap: 9px; margin: 0; padding-left: 20px; color: var(--gds-text-secondary, var(--muted, inherit)); }

.gds-contact-form-module { width: 100%; }
.gds-contact-form-module .gds-form { gap: 20px; }

.gds-contact-form-section {
    overflow: hidden;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
    background: var(--gds-surface-muted, var(--header-bg, transparent));
}
.gds-contact-form-section__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}
.gds-contact-form-section__icon { width: 44px; height: 44px; border-radius: 14px; }
.gds-contact-form-section__title { margin: 0 0 3px; font-size: 1.12rem; }
.gds-contact-form-section__description { margin: 0; color: var(--gds-text-secondary, var(--muted, inherit)); font-size: .9rem; }
.gds-contact-form-section__body { display: grid; gap: 18px; padding: 20px; }

.gds-contact-form-module .gds-form__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.gds-contact-form-module .gds-form__legend { margin: 0 0 10px; padding: 0; font-weight: 700; }
.gds-contact-form-module__topic-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gds-contact-form-module__topic-choices .gds-form__choice {
    min-height: 86px;
    padding: 14px;
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gds-contact-form-module__topic-choices .gds-form__choice:hover,
.gds-contact-form-module__topic-choices .gds-form__choice.is-selected {
    border-color: var(--gds-link, var(--accent, currentColor));
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    transform: translateY(-1px);
}
.gds-contact-form-module__topic-choices strong,
.gds-contact-form-module__topic-choices small { display: block; }
.gds-contact-form-module__topic-choices small { margin-top: 3px; color: var(--gds-text-secondary, var(--muted, inherit)); font-size: .82rem; line-height: 1.4; }

.gds-contact-form-module__context {
    display: none;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 17px;
    background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 14px;
}
.gds-contact-form-module__context.is-visible { display: grid; }
.gds-contact-form-module__context-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gds-contact-icon-bg, var(--accent, transparent)); color: var(--gds-contact-icon-text, var(--menu-active-text, inherit)); }
.gds-contact-form-module__context-title { display: block; margin-bottom: 2px; }
.gds-contact-form-module__context-text { margin: 0; color: var(--gds-text-secondary, var(--muted, inherit)); }

.gds-contact-form-module__footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; background: var(--gds-surface-muted, var(--header-bg, transparent)); border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 14px; }
.gds-contact-form-module__privacy { flex: 1 1 auto; }
.gds-contact-form-module__privacy .gds-form__choice { padding: 0; border: 0; background: transparent; }
.gds-contact-form-module__status { display: none; margin-top: 4px; padding: 13px 15px; border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 10px; font-weight: 600; }
.gds-contact-form-module__status.is-visible { display: block; }
.gds-contact-form-module__status.is-success { background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent)); }
.gds-contact-form-module__status.is-error { background: var(--gds-surface-muted, var(--header-bg, transparent)); color: var(--gds-form-error, currentColor); }
.gds-contact-form-module__submit[disabled] { opacity: .65; cursor: wait; }

@media (max-width: 980px) {
    .gds-contact-center__layout { grid-template-columns: 1fr; }
    .gds-contact-center__aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .gds-contact-choice-grid,
    .gds-contact-center__aside,
    .gds-contact-form-module__topic-choices { grid-template-columns: 1fr; }
    .gds-contact-form-module__footer { align-items: stretch; flex-direction: column; }
    .gds-contact-form-module__footer .gds-form__actions,
    .gds-contact-form-module__footer .gds-button { width: 100%; }
}

@media (max-width: 560px) {
    .gds-contact-center { padding-top: 24px; }
    .gds-contact-center__form-card { padding: 18px 14px; }
    .gds-contact-choice-card { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 20px 16px; }
    .gds-contact-choice-card__icon { width: 52px; height: 52px; border-radius: 15px; }
    .gds-contact-center__form-header { grid-template-columns: 46px minmax(0, 1fr); }
    .gds-contact-center__form-icon { width: 46px; height: 46px; border-radius: 14px; }
    .gds-contact-form-section__header { padding: 16px; }
    .gds-contact-form-section__body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .gds-contact-choice-card,
    .gds-contact-form-module__topic-choices .gds-form__choice { transition: none; }
}


/* ========================================================================
   M012 PARTNER & RESSOURCEN · ERGÄNZUNG V1.1
======================================================================== */

.gds-module--resources {
    width: 100%;
}

.gds-resources__intro,
.gds-resources__section,
.gds-resources__footer {
    padding-top: var(--gds-section-spacing);
    padding-bottom: var(--gds-section-spacing);
}

.gds-resources__intro {
    padding-top: clamp(40px, 5vw, 64px);
}

.gds-resources__section--muted {
    background: var(--gds-surface-muted, var(--header-bg, transparent));
}

.gds-resources__section-header {
    max-width: 760px;
    margin-bottom: 24px;
}

.gds-resources__section-header h2 {
    margin: 0 0 10px;
}

.gds-resources__section-header > :last-child {
    margin-bottom: 0;
}

.gds-resources__eyebrow {
    margin: 0 0 6px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-weight: 700;
}

.gds-resources__navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

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

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

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

/*
   GDS-Bildstandard Partner & Ressourcen:
   - Logos und Banner: 400 × 240 px (5:3), WEBP, proportional, transparente Arbeitsfläche
   - Buchcover: 400 × 600 px (2:3), WEBP, proportional, transparente Arbeitsfläche
   - Die vorbereitete Arbeitsfläche liefert den Innenabstand; CSS verzerrt oder beschneidet nicht.
*/
.gds-resource-card__media--contain,
.gds-resource-card__media--portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.gds-resource-card__media--contain {
    aspect-ratio: 5 / 3;
}

.gds-resource-card__media--portrait {
    aspect-ratio: 2 / 3;
}

.gds-resource-card__media--contain .gds-resource-card__image,
.gds-resource-card__media--portrait .gds-resource-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}



.gds-resources__footer {
    padding-bottom: clamp(44px, 6vw, 72px);
}

@media (max-width: 900px) {
    .gds-resource-grid--3,
    .gds-resource-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .gds-resource-grid--2,
    .gds-resource-grid--3,
    .gds-resource-grid--4 {
        grid-template-columns: 1fr;
    }

    .gds-resources__navigation .gds-button {
        width: 100%;
    }
}


/* ========================================================================
   23 REFERENZSEITE R010 VEREINSGESCHICHTE
   Version 0.3 · Auszeichnungsarchiv mit Vorschaubildern und Lightbox
======================================================================== */

.gds-history { color: var(--gds-text-primary, var(--text, inherit)); }
.gds-history [id] { scroll-margin-top: 120px; }
.gds-history__hero .gds-hero__media::after { background: linear-gradient(90deg, rgba(22, 35, 20, .66), rgba(22, 35, 20, .16) 65%, rgba(22, 35, 20, .08)); }
.gds-history__paper-intro { position: relative; padding: clamp(56px, 7vw, 88px) 0 clamp(68px, 8vw, 100px); background: transparent; }
.gds-history__paper-intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 36px; background: var(--gds-surface-card, var(--card, transparent)); clip-path: polygon(0 0, 3% 38%, 7% 10%, 12% 55%, 18% 18%, 24% 62%, 30% 14%, 36% 52%, 43% 20%, 50% 64%, 57% 16%, 64% 56%, 72% 12%, 79% 60%, 86% 20%, 93% 50%, 100% 8%, 100% 0); z-index: 2; }
.gds-history__section { padding: clamp(58px, 7vw, 88px) 0; }
.gds-history__section--muted { background: transparent; }
.gds-history__section-head { max-width: 840px; margin: 0 auto clamp(30px, 4vw, 46px); text-align: center; }
.gds-history__eyebrow { margin: 0 0 8px; color: var(--gds-link, var(--accent-dark, currentColor)); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gds-history__title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1.14; }
.gds-history__lead { margin: 16px auto 0; max-width: 780px; color: var(--gds-text-secondary, var(--muted, inherit)); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.75; }
.gds-history__growth-note { max-width: 860px; margin: 34px auto 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 24px; border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 18px; background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent)); box-shadow: var(--gds-shadow-card, var(--shadow-soft, none)); }
.gds-history__growth-icon, .gds-history__collection-icon, .gds-history__closing-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--gds-info-icon-bg, rgba(255,255,255,.35)); color: var(--gds-link, var(--accent-dark, currentColor)); font-size: 1.35rem; }
.gds-history__growth-note h3, .gds-history__growth-note p { margin: 0; }
.gds-history__growth-note p { margin-top: 6px; color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.65; }
.gds-history__timeline { list-style: none; max-width: 980px; margin: 0 auto; padding: 0; position: relative; }
.gds-history__timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 92px; width: 2px; background: var(--gds-border-soft, rgba(0,0,0,.15)); }
.gds-history__timeline li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 42px; padding: 0 0 28px; }
.gds-history__timeline li:last-child { padding-bottom: 0; }
.gds-history__timeline li::before { content: ""; position: absolute; top: 7px; left: 85px; width: 16px; height: 16px; border-radius: 50%; background: var(--gds-link, var(--accent-dark, currentColor)); border: 4px solid var(--gds-surface-card, var(--card, #fff)); box-shadow: 0 0 0 1px var(--gds-border-soft, rgba(0,0,0,.15)); }
.gds-history__timeline time { font-size: 1.1rem; font-weight: 900; color: var(--gds-link, var(--accent-dark, currentColor)); text-align: right; }
.gds-history__timeline h3, .gds-history__timeline p { margin: 0; }
.gds-history__timeline p { margin-top: 5px; color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.6; }
.gds-history__collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gds-history__collection-card { min-width: 0; min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 18px; background: var(--gds-surface-card, var(--card, transparent)); color: inherit; box-shadow: var(--gds-shadow-card, var(--shadow-soft, none)); text-decoration: none; }
.gds-history__collection-card--active { transition: transform .2s ease, box-shadow .2s ease; }
.gds-history__collection-card--active:hover, .gds-history__collection-card--active:focus { transform: translateY(-3px); box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none)); color: inherit; text-decoration: none; }
.gds-history__collection-card h3 { margin: 18px 0 8px; font-size: 1.18rem; }
.gds-history__collection-card p { margin: 0; color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.55; }
.gds-history__status { margin-top: auto; padding-top: 18px; color: var(--gds-link, var(--accent-dark, currentColor)); font-size: .82rem; font-weight: 800; }
.gds-history__award-intro { max-width: 780px; margin-bottom: 2rem; }
.gds-history__award-group + .gds-history__award-group { margin-top: 3rem; }
.gds-history__award-group-title { margin: 0 0 .5rem; color: var(--gds-link, var(--accent-dark, currentColor)); }
.gds-history__award-group-text { max-width: 760px; margin: 0 0 1.5rem; color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.68; }
.gds-history__award-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gds-history__award-card { overflow: hidden; margin: 0; border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 18px; background: var(--gds-surface-card, var(--card, transparent)); box-shadow: var(--gds-shadow-card, var(--shadow-soft, none)); }
.gds-history__award-link { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--gds-surface-muted, rgba(255,255,255,.28)); color: inherit; text-decoration: none; }
.gds-history__award-card img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .25s ease; }
.gds-history__award-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--gds-link, var(--accent-dark, currentColor)); box-shadow: 0 4px 14px rgba(0,0,0,.22); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.gds-history__award-link:hover img, .gds-history__award-link:focus-visible img { transform: scale(1.025); }
.gds-history__award-link:hover .gds-history__award-zoom, .gds-history__award-link:focus-visible .gds-history__award-zoom { opacity: 1; transform: none; }
.gds-history__award-link:focus-visible { outline: 3px solid var(--gds-link, var(--accent-dark, currentColor)); outline-offset: 3px; }
.gds-history__award-card figcaption { padding: 18px 20px 22px; }
.gds-history__award-year { display: block; margin-bottom: 4px; color: var(--gds-link, var(--accent-dark, currentColor)); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gds-history__award-card strong { display: block; margin-bottom: 5px; font-size: 1.06rem; }
.gds-history__award-card p { margin: 0; color: var(--gds-text-secondary, var(--muted, inherit)); font-size: .94rem; line-height: 1.55; }
.gds-history__capsule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gds-history__capsule { overflow: hidden; display: grid; grid-template-columns: minmax(180px, 34%) 1fr; border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 20px; background: var(--gds-surface-card, var(--card, transparent)); box-shadow: var(--gds-shadow-card, var(--shadow-soft, none)); }
.gds-history__capsule--letter { grid-template-columns: 1fr; background: var(--gds-info-tone-2, var(--gds-surface-card, transparent)); }
.gds-history__capsule-media { min-height: 310px; background: var(--gds-surface-muted, transparent); }
.gds-history__capsule-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gds-history__capsule-body { padding: clamp(24px, 3vw, 34px); }
.gds-history__capsule-meta { margin: 0 0 8px; color: var(--gds-link, var(--accent-dark, currentColor)); font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.gds-history__capsule h3 { margin: 0 0 12px; font-size: 1.45rem; }
.gds-history__capsule p { line-height: 1.68; }
.gds-history__capsule blockquote { margin: 22px 0; padding: 18px 20px; border-left: 4px solid var(--gds-link, var(--accent-dark, currentColor)); background: rgba(255,255,255,.28); font-size: 1.08rem; font-style: italic; }
.gds-history__capsule-note { margin: 20px 0 0; color: var(--gds-text-secondary, var(--muted, inherit)); font-size: .9rem; }
.gds-history__capsule-note i { margin-right: 7px; }
.gds-history__closing { padding: 0 0 clamp(64px, 8vw, 96px); }
.gds-history__closing-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: clamp(28px, 4vw, 42px); border-radius: 20px; background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent)); border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); box-shadow: var(--gds-shadow-card, var(--shadow-soft, none)); }
.gds-history__closing-card h2, .gds-history__closing-card p { margin: 0; }
.gds-history__closing-card h2 { margin-bottom: 10px; }
.gds-history__closing-card p:last-child { color: var(--gds-text-secondary, var(--muted, inherit)); line-height: 1.7; }

@media (max-width: 1100px) { .gds-history__collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gds-history__award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gds-history__capsule-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .gds-history__timeline::before { left: 18px; } .gds-history__timeline li { grid-template-columns: 1fr; gap: 5px; padding-left: 48px; } .gds-history__timeline li::before { left: 11px; } .gds-history__timeline time { text-align: left; } .gds-history__award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gds-history__capsule { grid-template-columns: 1fr; } .gds-history__capsule-media { min-height: 240px; max-height: 360px; } }
@media (max-width: 480px) { .gds-history__award-grid { grid-template-columns: 1fr; } .gds-history__award-zoom { opacity: 1; transform: none; } }
@media (max-width: 560px) { .gds-history__collection-grid { grid-template-columns: 1fr; } .gds-history__growth-note, .gds-history__closing-card { grid-template-columns: 1fr; } .gds-history__collection-card { min-height: 0; } }

/* ========================================================================
   M002 DYNAMISCHE KENNZAHL – FREIE GÄRTEN
   Version 1.0 · Integration mod_freiegaerten
   ======================================================================== */

/*
   Zweck:
   - bindet die Joomla-Position gds-freiegaerten in C011 Info Card ein
   - hält die Ausgabe unabhängig von Joomla-Modulwrappern
   - verhindert zusätzliche Abstände innerhalb der Kennzahl
   - bleibt für weitere dynamische Zahlenwerte wiederverwendbar

   Voraussetzung:
   - Site-Modul mod_freiegaerten
   - Anzeigemodus: Gesamtsumme freie Gärten
   - Position: gds-freiegaerten
   - M002-Custom-Modul: Inhalte vorbereiten = Ja
*/

.gds-info-card__dynamic-number {
    width: 100%;
    margin: 0 0 6px;
    color: inherit;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    line-height: 1.1;
    font-weight: 800;
    text-align: center;
}

.gds-info-card__dynamic-number > .moduletable,
.gds-info-card__dynamic-number > [class*="moduletable"],
.gds-info-card__dynamic-number > .module,
.gds-info-card__dynamic-number > [class*="module"] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
}

.gds-info-card__dynamic-number p,
.gds-info-card__dynamic-number div,
.gds-info-card__dynamic-number span {
    margin-top: 0;
    margin-bottom: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
}

.gds-info-card__dynamic-number .mod-custom {
    margin: 0;
    padding: 0;
}

/* ========================================================================
   C014 EVENT CARD – KOMPAKTE STARTSEITENAUSGABE
   Version 1.1 · mod_gdstermine 1.1.1
   ======================================================================== */

/*
   C014 ergänzt C011 ausschließlich um die terminbezogene Inhaltsstruktur.
   Die Karte selbst, Höhe, Tonstufe, Hover-Effekt und der Button bleiben
   vollständig Aufgabe von C011. Es werden keine festen Farben definiert.
*/

.gds-event-card {
    height: 100%;
    margin: 0;
}

.gds-event-card__date {
    margin: 0 0 8px;
    font-size: clamp(1.45rem, 1.8vw, 1.8rem);
}

.gds-event-card__date time {
    color: inherit;
    font: inherit;
}

.gds-event-card__title {
    margin: 0;
    color: inherit;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.gds-event-card__meta {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 5px;
    margin-top: 11px;
    color: var(--gds-info-card-muted);
    font-size: .86rem;
    line-height: 1.4;
}

.gds-event-card__meta span {
    display: grid;
    grid-template-columns: 1.1em minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}

.gds-event-card__meta i {
    width: 1.1em;
    margin-top: .2em;
    text-align: center;
}

.mod-gdstermine--compact {
    min-width: 0;
}

@media (max-width: 600px) {
    .gds-event-card__date {
        font-size: 1.45rem;
    }
}

/* ========================================================================
   M012 GDS TERMINKALENDER – MOD_GDSKALENDER
   Version 0.1.0 · Kalenderansicht und Kategorien nach GDS-Tonstufe
   ======================================================================== */

/*
   Architekturregel A-T003:
   Der Kategoriename hat keinen Einfluss auf die Farbe. Die Komponente liefert
   ausschließlich tone-1 bis tone-8. Das Theme definiert die tatsächlichen
   Farbwerte. Kalender, Listen- und Detailansichten verwenden dieselbe Regel.
*/
.gds-tone-1 { --gds-category-color: var(--gds-info-tone-1, var(--gds-accent, currentColor)); }
.gds-tone-2 { --gds-category-color: var(--gds-info-tone-2, var(--gds-accent, currentColor)); }
.gds-tone-3 { --gds-category-color: var(--gds-info-tone-3, var(--gds-accent, currentColor)); }
.gds-tone-4 { --gds-category-color: var(--gds-info-tone-4, var(--gds-accent, currentColor)); }
.gds-tone-5 { --gds-category-color: var(--gds-info-tone-5, var(--gds-accent, currentColor)); }
.gds-tone-6 { --gds-category-color: var(--gds-info-tone-6, var(--gds-accent, currentColor)); }
.gds-tone-7 { --gds-category-color: var(--gds-info-tone-7, var(--gds-accent, currentColor)); }
.gds-tone-8 { --gds-category-color: var(--gds-info-tone-8, var(--gds-accent, currentColor)); }

.gds-calendar {
    width: 100%;
    padding: clamp(18px, 3vw, 30px);
    color: var(--gds-text-primary, var(--text, inherit));
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-calendar__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.gds-calendar__heading { text-align: center; }
.gds-calendar__heading h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.gds-calendar__eyebrow { margin: 0 0 3px; color: var(--gds-text-secondary, var(--muted, inherit)); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.gds-calendar__nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-weight: 700;
    text-decoration: none;
}
.gds-calendar__nav--next { justify-self: end; }
.gds-calendar__nav:hover, .gds-calendar__nav:focus-visible { text-decoration: underline; }

.gds-calendar__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
.gds-calendar__toolbar .gds-button { width: auto; }

.gds-calendar__scroll { width: 100%; overflow-x: auto; border-radius: 12px; }
.gds-calendar__grid { min-width: 760px; border: 1px solid var(--gds-border-soft, var(--border-card, transparent)); border-radius: 12px; overflow: hidden; }
.gds-calendar__weekdays, .gds-calendar__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gds-calendar__weekday { padding: 10px 8px; text-align: center; font-weight: 800; background: var(--gds-surface-muted, var(--header-bg, transparent)); border-right: 1px solid var(--gds-border-soft, var(--border-card, transparent)); }
.gds-calendar__weekday:last-child { border-right: 0; }
.gds-calendar__week + .gds-calendar__week { border-top: 1px solid var(--gds-border-soft, var(--border-card, transparent)); }

.gds-calendar__day {
    min-height: 132px;
    padding: 9px;
    background: var(--gds-surface-card, var(--card, transparent));
    border-right: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}
.gds-calendar__day:last-child { border-right: 0; }
.gds-calendar__day.is-outside-month { opacity: .48; background: var(--gds-surface-muted, transparent); }
.gds-calendar__day.is-today { box-shadow: inset 0 0 0 2px var(--gds-accent, currentColor); }
.gds-calendar__day-number { display: inline-grid; place-items: center; min-width: 1.85rem; min-height: 1.85rem; margin-bottom: 7px; font-weight: 800; border-radius: 999px; }
.gds-calendar__day.is-today .gds-calendar__day-number { color: var(--gds-button-primary-text, inherit); background: var(--gds-accent, transparent); }

.gds-calendar__events { display: grid; gap: 6px; }
.gds-calendar__event {
    display: grid;
    grid-template-columns: .65rem minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 0;
    color: inherit;
    font-size: .82rem;
    line-height: 1.3;
    font-weight: 650;
    text-decoration: none;
}
.gds-calendar__event:hover .gds-calendar__event-title,
.gds-calendar__event:focus-visible .gds-calendar__event-title { text-decoration: underline; }
.gds-calendar__event-dot { width: .55rem; height: .55rem; margin-top: .22em; border-radius: 50%; background: var(--gds-category-color, currentColor); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gds-category-color, currentColor) 18%, transparent); }
.gds-calendar__event-title { min-width: 0; overflow-wrap: anywhere; }
.gds-calendar__more { color: var(--gds-text-secondary, var(--muted, inherit)); font-size: .78rem; font-weight: 700; }
.gds-calendar__empty { text-align: center; }
.gds-calendar__empty h2, .gds-calendar__empty p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .gds-calendar { padding: 14px; }
    .gds-calendar__header { grid-template-columns: 1fr auto 1fr; gap: 8px; }
    .gds-calendar__nav span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .gds-calendar__day { min-height: 116px; }
}


/* ========================================================================
   R012 TERMINLISTE – ANSICHTSWECHSEL
   Version 0.1 · Wechsel zwischen Terminliste und Monatskalender
   ======================================================================== */

.gds-termine-view-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
    margin-top: clamp(28px, 5vw, 52px);
    padding: clamp(20px, 3vw, 30px);
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-termine-view-switch__icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--gds-info-tone-2, var(--gds-surface-muted, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.35rem;
}

.gds-termine-view-switch__content {
    min-width: 0;
}

.gds-termine-view-switch__eyebrow {
    margin: 0 0 4px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gds-termine-view-switch__title {
    margin: 0 0 6px;
    color: inherit;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.gds-termine-view-switch__text {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    line-height: 1.55;
}

.gds-termine-view-switch__action {
    justify-self: end;
}

.gds-termine-view-switch__action .gds-button {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .gds-termine-view-switch {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gds-termine-view-switch__action {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
    }

    .gds-termine-view-switch__action .gds-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .gds-termine-view-switch {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gds-termine-view-switch__icon {
        justify-self: center;
    }
}

/* ========================================================================
   C014 GDS CONTENT INTRO CARD
   Version 0.1 · Hochwertiger Einstieg unterhalb eines Hero-Bereichs
   ======================================================================== */

.gds-termine__intro {
    padding-block: clamp(44px, 6vw, 76px) clamp(48px, 7vw, 88px);
}

.gds-content-intro-card {
    position: relative;
    margin: 0 0 clamp(30px, 5vw, 52px);
    padding: clamp(24px, 4vw, 40px);
    color: var(--gds-text-primary, var(--text, inherit));
    background: var(--gds-surface-card, var(--card, rgba(255, 255, 255, .78)));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 20px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    overflow: hidden;
}

.gds-content-intro-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--gds-accent, currentColor);
}

.gds-content-intro-card__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.4;
    text-transform: uppercase;
}

.gds-content-intro-card__title {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.15;
}

.gds-content-intro-card__lead {
    max-width: 72ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1rem, 1.3vw, 1.08rem);
    line-height: 1.7;
}

.gds-termine__output {
    min-width: 0;
}

@media (max-width: 600px) {
    .gds-termine__intro {
        padding-block: 32px 56px;
    }

    .gds-content-intro-card {
        padding: 22px 20px 22px 24px;
        border-radius: 16px;
    }
}

/* ========================================================================
   R012 TERMINLISTE – GRID UND BREITENKORREKTUR
   Version 0.3 · CSS-Gesamtstand 1.0.83
   ======================================================================== */

/* Die Komponenten-CSS begrenzt .gds-termine__intro auf 48rem.
   Auf der GDS-Beitragsseite muss der Bereich die volle Modulbreite nutzen. */
.gds-module--terminliste .gds-termine__intro {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-block: clamp(52px, 6vw, 82px) clamp(56px, 7vw, 92px);
}

.gds-module--terminliste .gds-content-intro-card.gds-termine__header {
    width: min(100%, 70rem);
    max-width: 70rem;
    margin-bottom: clamp(38px, 5vw, 58px);
    padding: clamp(28px, 4vw, 44px);
}

.gds-module--terminliste .gds-termine__output,
.gds-module--terminliste .mod-gdstermine,
.gds-module--terminliste .gds-termine__content {
    width: 100%;
    max-width: none;
}

.gds-module--terminliste .gds-termine-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(22px, 2.4vw, 34px);
}

.gds-module--terminliste .gds-termine-grid > .gds-termine-card {
    min-width: 0;
    height: 100%;
}

.gds-module--terminliste .gds-termine-card__content {
    display: flex;
    flex-direction: column;
}

.gds-module--terminliste .gds-termine-card__actions {
    margin-top: auto;
    padding-top: 1.25rem;
}

.gds-module--terminliste .gds-termine-view-switch {
    width: 100%;
    max-width: none;
    margin-top: clamp(38px, 5vw, 60px);
    padding: clamp(24px, 3vw, 34px);
}

@media (max-width: 1120px) {
    .gds-module--terminliste .gds-termine-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .gds-module--terminliste .gds-termine__intro {
        padding-block: 36px 60px;
    }

    .gds-module--terminliste .gds-content-intro-card.gds-termine__header {
        margin-bottom: 30px;
        padding: 24px 22px 24px 26px;
    }

    .gds-module--terminliste .gds-termine-grid {
        gap: 20px;
    }
}

/* ========================================================================
   R012 TERMINLISTE – FINALER LAYOUT-FEINSCHLIFF
   Version 0.4 · CSS-Gesamtstand 1.0.84
   - Intro-Card bündig zur gesamten Inhaltsbreite
   - dauerhaft gleich hohe Karten je Grid-Zeile
   - stabiler Kartenaufbau bei unterschiedlich langen Inhalten
   ======================================================================== */

/* Intro-Card, Terminraster und Ansichtswechsel folgen exakt derselben Breite. */
.gds-module--terminliste .gds-content-intro-card.gds-termine__header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* Jede Zeile richtet ihre Karten zuverlässig an der höchsten Karte aus. */
.gds-module--terminliste .gds-termine-grid {
    grid-auto-rows: auto;
}

.gds-module--terminliste .gds-termine-grid > .gds-termine-card {
    align-self: stretch;
    height: 100%;
}

/* Der Inhaltsbereich füllt die komplette Kartenhöhe aus.
   Die Aktionsleiste bleibt dadurch immer am unteren Kartenrand. */
.gds-module--terminliste .gds-termine-card__content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.gds-module--terminliste .gds-termine-card__summary {
    margin-bottom: 0;
}

.gds-module--terminliste .gds-termine-card__actions {
    min-height: 2.75rem;
    margin-top: auto;
    padding-top: 1.25rem;
    align-items: flex-end;
}

/* Auf kleinen Geräten bleibt der natürliche Inhalt maßgeblich. */
@media (max-width: 700px) {
    .gds-module--terminliste .gds-termine-card__content {
        min-height: 0;
    }
}


/* ========================================================================
   R013 TERMINDETAIL – BEITRAGS-/MODULLÖSUNG
   Version 0.2 · CSS-Gesamtstand 1.0.86
   ======================================================================== */

.gds-module--termindetail {
    width: 100%;
    padding-block: clamp(52px, 6vw, 82px) clamp(56px, 7vw, 92px);
}

.gds-module--termindetail .gds-termindetail-position,
.gds-module--termindetail .gds-termindetail-module,
.gds-module--termindetail .gds-termindetail {
    width: 100%;
    min-width: 0;
}

.gds-termindetail {
    --gds-termindetail-tone: var(--gds-info-tone-1, var(--gds-accent, currentColor));
}

.gds-termindetail.gds-tone-1 { --gds-termindetail-tone: var(--gds-info-tone-1); }
.gds-termindetail.gds-tone-2 { --gds-termindetail-tone: var(--gds-info-tone-2); }
.gds-termindetail.gds-tone-3 { --gds-termindetail-tone: var(--gds-info-tone-3); }
.gds-termindetail.gds-tone-4 { --gds-termindetail-tone: var(--gds-info-tone-4); }
.gds-termindetail.gds-tone-5 { --gds-termindetail-tone: var(--gds-info-tone-5); }
.gds-termindetail.gds-tone-6 { --gds-termindetail-tone: var(--gds-info-tone-6); }
.gds-termindetail.gds-tone-7 { --gds-termindetail-tone: var(--gds-info-tone-7); }
.gds-termindetail.gds-tone-8 { --gds-termindetail-tone: var(--gds-info-tone-8); }

.gds-termindetail__intro {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 34px);
    margin-bottom: clamp(28px, 4vw, 42px);
}

.gds-termindetail__intro::before {
    background: var(--gds-termindetail-tone, var(--gds-accent, currentColor));
}

.gds-termindetail__intro-icon {
    width: clamp(64px, 7vw, 84px);
    height: clamp(64px, 7vw, 84px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gds-termindetail-tone, var(--gds-surface-muted, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-termindetail__intro-content { min-width: 0; }

.gds-termindetail__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(28px, 4vw, 42px);
}

.gds-termindetail-fact {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(18px, 2.2vw, 24px);
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-termindetail-fact__icon,
.gds-termindetail__section-icon,
.gds-termindetail__navigation-icon,
.gds-termindetail__notice-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--gds-termindetail-tone, var(--gds-button-bg, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: 1.1rem;
}

.gds-termindetail-fact h2,
.gds-termindetail__section-header h2,
.gds-termindetail__navigation h2,
.gds-termindetail__notice h2 {
    margin: 0;
    color: inherit;
    font-size: 1.08rem;
    line-height: 1.3;
}

.gds-termindetail-fact p {
    margin: 6px 0 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    overflow-wrap: anywhere;
}

.gds-termindetail-fact__secondary { font-size: .92rem; }

.gds-termindetail__badge {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--gds-termindetail-tone, var(--gds-surface-muted, transparent));
    font-size: .82rem;
    font-weight: 700;
}

.gds-termindetail__section {
    margin-bottom: clamp(22px, 3vw, 30px);
    padding: clamp(22px, 3vw, 32px);
}

.gds-termindetail__section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.gds-termindetail__section-header h2 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.gds-termindetail__richtext > :last-child,
.gds-termindetail__section > :last-child,
.gds-termindetail__contact-note > :last-child {
    margin-bottom: 0;
}

.gds-termindetail__contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

.gds-termindetail__contact-grid p,
.gds-termindetail__contact-note { margin: 0; }
.gds-termindetail__contact-note { grid-column: 1 / -1; }

.gds-termindetail__navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    margin-top: clamp(34px, 5vw, 54px);
    padding: clamp(24px, 3vw, 34px);
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-termindetail__navigation-text {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.gds-termindetail__navigation p,
.gds-termindetail__notice p {
    margin: 5px 0 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-termindetail__notice {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
}

.gds-termindetail__notice .gds-button-group { margin-top: 18px; }

@media (max-width: 1100px) {
    .gds-termindetail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .gds-module--termindetail { padding-block: 36px 60px; }
    .gds-termindetail__intro { grid-template-columns: 1fr; align-items: flex-start; }
    .gds-termindetail__facts,
    .gds-termindetail__contact-grid { grid-template-columns: 1fr; }
    .gds-termindetail__contact-note { grid-column: auto; }
    .gds-termindetail__navigation { grid-template-columns: 1fr; }
    .gds-termindetail__navigation .gds-button-group { width: 100%; }
    .gds-termindetail__navigation .gds-button { flex: 1 1 220px; }
}

@media (max-width: 520px) {
    .gds-termindetail__intro-icon { width: 58px; height: 58px; }
    .gds-termindetail__facts { grid-template-columns: 1fr; }
    .gds-termindetail__navigation-text,
    .gds-termindetail__notice { align-items: flex-start; }
    .gds-termindetail__navigation .gds-button-group,
    .gds-termindetail__navigation .gds-button,
    .gds-termindetail__notice .gds-button { width: 100%; }
}

/* ========================================================================
   R011 TERMINKALENDER – INTRO-CARD FEINSCHLIFF
   Version 0.1 · CSS-Gesamtstand 1.0.87

   Aufgabe:
   - Einleitung der Kalenderseite als C014 Content Intro Card darstellen
   - Intro-Card und Kalenderausgabe auf dieselbe Inhaltsbreite ausrichten
   - Kalenderlogik und Modul selbst bleiben unverändert
   ======================================================================== */

.gds-module--termine .gds-termine__intro {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-block: clamp(52px, 6vw, 82px) clamp(56px, 7vw, 92px);
}

.gds-module--termine .gds-content-intro-card.gds-termine__header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-bottom: clamp(30px, 4vw, 46px);
    padding: clamp(28px, 4vw, 44px);
}

.gds-module--termine .gds-termine__output {
    width: 100%;
    max-width: none;
    min-width: 0;
}

@media (max-width: 700px) {
    .gds-module--termine .gds-termine__intro {
        padding-block: 36px 60px;
    }

    .gds-module--termine .gds-content-intro-card.gds-termine__header {
        margin-bottom: 26px;
        padding: 24px 22px 24px 26px;
    }
}


/* ========================================================================
   M012 GARTENWETTER – KOMPAKTE STARTSEITENAUSGABE
   Version 0.1.1 · mod_gdswetter 0.1.1
   ======================================================================== */

/*
   M012 ergänzt C011 ausschließlich um die wetterbezogene Inhaltsgewichtung.
   Temperatur, Wetterlage und Spruch bleiben innerhalb der vorhandenen
   GDS-Infokarte. Es werden keine festen Farben und keine Trennlinien gesetzt.
*/

.gds-weather-card {
    height: 100%;
    margin: 0;
}

.gds-weather-card__content {
    justify-content: center;
}

.gds-weather-card__temperature {
    width: 100%;
    margin: 0 0 6px;
    color: inherit;
    font-size: clamp(1.45rem, 1.8vw, 1.8rem);
    line-height: 1.1;
    font-weight: 800;
    text-align: center;
}

.gds-weather-card__condition {
    margin: 0;
    color: var(--gds-info-card-muted);
    font-size: .86rem;
    line-height: 1.35;
    text-align: center;
}

.gds-weather-card__quote {
    min-height: 3.9em;
    margin: 8px 0 0;
    color: inherit;
    font-size: clamp(.94rem, 1vw, 1.02rem);
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .gds-weather-card__temperature {
        font-size: 1.45rem;
    }

    .gds-weather-card__quote {
        min-height: 0;
    }
}


/* ========================================================================
   M003 V2.2 – GEMEINSAME ABSCHLUSSLINIE
   ========================================================================

   Auf Desktop bestimmt die höhere der beiden Spalten die Gesamthöhe.
   Die linke Content-Spalte und die rechte Service-Spalte werden auf dieselbe
   Höhe gestreckt. Die unteren Inhaltskarten füllen den verbleibenden Raum,
   sodass ihre Unterkante exakt mit der Landesverband-Karte abschließt.
======================================================================== */

@media (min-width: 901px) {
    .gds-content-panel__layout {
        align-items: stretch;
    }

    .gds-content-panel__main,
    .gds-content-panel__column--right {
        height: 100%;
        align-self: stretch;
    }

    .gds-content-panel__main {
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
    }

    .gds-content-panel__compact-list {
        height: 100%;
        align-items: stretch;
    }

    .gds-content-panel__compact-list .gds-content-card--compact {
        height: 100%;
        min-height: 0;
        align-self: stretch;
    }

    .gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__media,
    .gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__body {
        height: 100%;
        min-height: 0;
    }

    .gds-content-panel__compact-list .gds-content-card--compact .gds-content-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gds-content-panel__column--right {
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: stretch;
    }

    .gds-content-panel__column--right > :last-child {
        height: 100%;
    }
}


/* ========================================================================
   R009 REFERENZSEITE VEREINSNEWS
   Version 0.2
======================================================================== */

.gds-r009 {
    background: var(--gds-r009-page-bg, transparent);
    color: var(--gds-text-primary, var(--text, inherit));
}

.gds-r009__hero {
    --gds-hero-position: center;
}

.gds-r009__hero .gds-hero__media {
    background-image:
        linear-gradient(90deg, rgba(12, 34, 20, .16), rgba(12, 34, 20, .03)),
        var(--gds-hero-image);
    background-position: var(--gds-hero-position, center);
    background-size: cover;
    background-repeat: no-repeat;
}

.gds-r009__content {
    padding-top: var(--gds-section-spacing);
    padding-bottom: calc(var(--gds-section-spacing) * 2);
}

.gds-r009__intro {
    max-width: 920px;
    margin: 0 auto clamp(32px, 5vw, 56px);
}

.gds-r009__section-title {
    margin: 0 0 12px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    line-height: 1.2;
}

.gds-r009__intro-text > :last-child,
.gds-r009__heading > :last-child {
    margin-bottom: 0;
}

.gds-r009__heading {
    margin-bottom: 24px;
}

.gds-r009__heading p {
    max-width: 70ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-r009__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 30px);
    align-items: stretch;
}

.gds-r009-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.gds-r009-card .gds-content-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.gds-r009-card .gds-content-card__body {
    min-height: 0;
    padding: clamp(18px, 2.5vw, 26px);
}

.gds-r009-card .gds-content-card__meta {
    justify-content: flex-start;
    margin-bottom: 10px;
}

.gds-r009-card .gds-content-card__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
}

.gds-r009-card .gds-content-card__date .fa-calendar-days {
    color: var(--gds-link, var(--accent-dark, currentColor));
}

.gds-r009-card__title-link {
    color: inherit;
    text-decoration: none;
}

.gds-r009-card__title-link:hover,
.gds-r009-card__title-link:focus {
    color: var(--gds-link, var(--accent-dark, currentColor));
    text-decoration: underline;
    text-underline-offset: .15em;
}

.gds-r009-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.gds-r009__empty {
    text-align: center;
}

.gds-r009__empty > .fa-solid {
    display: block;
    margin-bottom: 14px;
    font-size: 2.4rem;
}

.gds-r009__links,
.gds-r009__children,
.gds-r009__pagination,
.gds-r009__plugin-output {
    margin-top: clamp(28px, 4vw, 44px);
}

.gds-r009__more-list {
    margin: 0;
    padding-left: 1.2rem;
}

.gds-r009__more-list li + li {
    margin-top: 8px;
}

.gds-r009__pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gds-r009__pagination-counter {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .92rem;
}

.gds-r009__pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.gds-r009__pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-link, var(--accent-dark, currentColor));
    text-decoration: none;
}

.gds-r009__pagination .page-link:hover,
.gds-r009__pagination .page-link:focus,
.gds-r009__pagination .active .page-link {
    background: var(--gds-button-bg, var(--accent, transparent));
    color: var(--gds-button-text, var(--menu-active-text, inherit));
}

.gds-r009__pagination .disabled .page-link {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 760px) {
    .gds-r009__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .gds-r009__content {
        padding-bottom: var(--gds-section-spacing);
    }

    .gds-r009-card .gds-content-card__actions .gds-button {
        width: 100%;
    }
}


/* ========================================================================
   R012 REFERENZSEITE GARTENTIPS
   Version 0.1
======================================================================== */

.gds-r012 {
    background: var(--gds-r012-page-bg, transparent);
    color: var(--gds-text-primary, var(--text, inherit));
}

.gds-r012__hero {
    --gds-hero-position: center;
}

.gds-r012__hero .gds-hero__media {
    background-image:
        linear-gradient(90deg, rgba(12, 34, 20, .16), rgba(12, 34, 20, .03)),
        var(--gds-hero-image);
    background-position: var(--gds-hero-position, center);
    background-size: cover;
    background-repeat: no-repeat;
}

.gds-r012__content {
    padding-top: var(--gds-section-spacing);
    padding-bottom: calc(var(--gds-section-spacing) * 2);
}

.gds-r012__intro {
    max-width: 920px;
    margin: 0 auto clamp(32px, 5vw, 56px);
}

.gds-r012__section-title {
    margin: 0 0 12px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    line-height: 1.2;
}

.gds-r012__intro-text > :last-child,
.gds-r012__heading > :last-child {
    margin-bottom: 0;
}

.gds-r012__heading {
    margin-bottom: 24px;
}

.gds-r012__heading p {
    max-width: 70ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.gds-r012__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 30px);
    align-items: stretch;
}

.gds-r012-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.gds-r012-card .gds-content-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.gds-r012-card .gds-content-card__body {
    min-height: 0;
    padding: clamp(18px, 2.5vw, 26px);
}

.gds-r012-card .gds-content-card__meta {
    justify-content: flex-start;
    margin-bottom: 10px;
}

.gds-r012-card .gds-content-card__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
}

.gds-r012-card .gds-content-card__date .fa-calendar-days {
    color: var(--gds-link, var(--accent-dark, currentColor));
}

.gds-r012-card__title-link {
    color: inherit;
    text-decoration: none;
}

.gds-r012-card__title-link:hover,
.gds-r012-card__title-link:focus {
    color: var(--gds-link, var(--accent-dark, currentColor));
    text-decoration: underline;
    text-underline-offset: .15em;
}

.gds-r012-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.gds-r012__empty {
    text-align: center;
}

.gds-r012__empty > .fa-solid {
    display: block;
    margin-bottom: 14px;
    font-size: 2.4rem;
}

.gds-r012__links,
.gds-r012__children,
.gds-r012__pagination,
.gds-r012__plugin-output {
    margin-top: clamp(28px, 4vw, 44px);
}

.gds-r012__more-list {
    margin: 0;
    padding-left: 1.2rem;
}

.gds-r012__more-list li + li {
    margin-top: 8px;
}

.gds-r012__pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gds-r012__pagination-counter {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .92rem;
}

.gds-r012__pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.gds-r012__pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;
    background: var(--gds-surface-card, var(--card, transparent));
    color: var(--gds-link, var(--accent-dark, currentColor));
    text-decoration: none;
}

.gds-r012__pagination .page-link:hover,
.gds-r012__pagination .page-link:focus,
.gds-r012__pagination .active .page-link {
    background: var(--gds-button-bg, var(--accent, transparent));
    color: var(--gds-button-text, var(--menu-active-text, inherit));
}

.gds-r012__pagination .disabled .page-link {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 760px) {
    .gds-r012__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .gds-r012__content {
        padding-bottom: var(--gds-section-spacing);
    }

    .gds-r012-card .gds-content-card__actions .gds-button {
        width: 100%;
    }
}


/* ========================================================================
   17 COMPONENT C014 RESPONSIVE TABELLE
   ======================================================================== */

/*
   C014 – Responsive Tabelle
   Version 1.0

   Einsatzbereiche:
   - Wettbewerbs- und Bewertungslisten
   - Gebühren- und Zahlenübersichten
   - strukturierte Vereinsinformationen
   - redaktionelle Beiträge mit tabellarischen Daten

   Architektur:
   - .gds-table-wrap erzeugt den responsiven, horizontal scrollbareren Rahmen
   - .gds-table enthält die eigentliche Tabelle
   - Farben und Schatten werden ausschließlich über GDS-Variablen geliefert
   - keine Bootstrap-Abhängigkeit
*/

.gds-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 20px 0 24px;

    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 14px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));

    -webkit-overflow-scrolling: touch;
}

.gds-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    background: transparent;
}

.gds-table caption {
    padding: 14px 16px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-weight: 600;
    text-align: left;
    caption-side: top;
}

.gds-table th,
.gds-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    text-align: left;
    vertical-align: middle;
}

.gds-table thead th {
    background: var(--gds-surface-muted, var(--header-bg, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}

.gds-table tbody tr:nth-child(even) {
    background: var(--gds-table-row-alt, var(--gds-surface-muted, transparent));
}

.gds-table tbody tr:hover {
    background: var(--gds-table-row-hover, var(--gds-info-tone-1, transparent));
}

.gds-table tbody tr:last-child th,
.gds-table tbody tr:last-child td {
    border-bottom: 0;
}

.gds-table .gds-table__number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gds-table .gds-table__center {
    text-align: center;
}

.gds-table .gds-table__highlight {
    font-weight: 700;
}

.gds-table-note {
    margin: -12px 0 24px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .9rem;
}

@media (max-width: 720px) {
    .gds-table-wrap {
        margin-top: 16px;
        margin-bottom: 20px;
        border-radius: 12px;
    }

    .gds-table {
        min-width: 680px;
    }

    .gds-table th,
    .gds-table td {
        padding: 11px 12px;
        font-size: .94rem;
    }
}

/* ========================================================================
   18 COMPONENT C015 REDAKTIONELLER INHALTSABSCHNITT
   ======================================================================== */

/*
   C015 – Redaktioneller Inhaltsabschnitt
   Version 0.2

   Grundlage:
   - Desktop-Magazinlayout aus Version 0.1 bleibt unverändert.
   - Bild links und Bild rechts nutzen weiterhin 4:3 mit bewusstem Beschnitt.
   - Nur die breite Standardvariante zeigt das vollständige Bild.
   - Eine breite Magazinvariante mit Beschnitt bleibt optional verfügbar.
   - Die Lightbox übernimmt Abschnittsüberschrift, Bildunterschrift und Zähler.

   Klassen:
   - gds-article--left
   - gds-article--right
   - gds-article--wide
   - gds-article--wide gds-article--crop  (optionaler Magazinbeschnitt)
*/

.gds-editorial {
    display: grid;
    gap: clamp(22px, 3vw, 38px);
}

.gds-editorial__intro {
    max-width: 78ch;
    margin: 0 auto clamp(10px, 2vw, 20px);
    font-size: clamp(1.02rem, 1.2vw, 1.12rem);
    line-height: 1.75;
}

.gds-article {
    display: grid;
    grid-template-columns: minmax(240px, 36%) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 38px);
    align-items: start;
    padding: clamp(20px, 2.8vw, 32px) 0;
    border-top: 1px solid var(--gds-border-soft, var(--border-card, transparent));
}

.gds-article:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.gds-article--right {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 36%);
}

.gds-article--right .gds-article__media {
    grid-column: 2;
    grid-row: 1;
}

.gds-article--right .gds-article__content {
    grid-column: 1;
    grid-row: 1;
}

.gds-article--wide {
    grid-template-columns: 1fr;
}

.gds-article--wide .gds-article__media,
.gds-article--wide .gds-article__content {
    width: 100%;
}

.gds-article__media {
    margin: 0;
    min-width: 0;
}

.gds-article__zoom {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
    background: var(--gds-surface-muted, var(--header-bg, transparent));
    text-decoration: none;
}

/* Bild links / rechts: bewährte Magazinwirkung aus V0.1 */
.gds-article__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .25s ease;
}

/*
   Breites Standardbild:
   - vollständiges Bild ohne Beschnitt
   - natürliche Proportionen
   - begrenzte Höhe
   - Bildrahmen schrumpft auf die tatsächliche Bildbreite
   - breite Standardbilder erhalten keine farbigen Seitenflächen
   - dadurch keine großen farbigen Leerflächen links und rechts
*/
.gds-article--wide:not(.gds-article--crop) .gds-article__media {
    text-align: center;
}

.gds-article--wide:not(.gds-article--crop) .gds-article__zoom {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    vertical-align: top;
}

.gds-article--wide:not(.gds-article--crop) .gds-article__image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(580px, 72vh);
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

/* Breite Magazinvariante: bewusster Beschnitt */
.gds-article--wide.gds-article--crop .gds-article__image {
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.gds-article__zoom:hover .gds-article__image,
.gds-article__zoom:focus-visible .gds-article__image {
    transform: scale(1.025);
}

.gds-article__zoom:focus-visible {
    outline: 3px solid var(--gds-link, var(--accent-dark, currentColor));
    outline-offset: 3px;
}

.gds-article__zoom-icon {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(20, 30, 24, .76);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: transform .2s ease, background .2s ease;
}

.gds-article__zoom:hover .gds-article__zoom-icon,
.gds-article__zoom:focus-visible .gds-article__zoom-icon {
    transform: scale(1.06);
    background: rgba(20, 30, 24, .9);
}

.gds-article__caption {
    margin-top: 9px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .88rem;
    line-height: 1.45;
}

.gds-article__content {
    min-width: 0;
}

.gds-article__title {
    margin-bottom: 14px;
    font-size: clamp(1.28rem, 2vw, 1.65rem);
}

.gds-article__content > :last-child {
    margin-bottom: 0;
}

.gds-article__tip {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 4px solid var(--gds-link, var(--accent-dark, currentColor));
    border-radius: 0 12px 12px 0;
    background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent));
    color: var(--gds-text-primary, var(--text, inherit));
}

.gds-article__tip strong {
    display: inline-block;
    margin-right: .25em;
}

.gds-editorial__closing {
    margin-top: clamp(10px, 2vw, 20px);
}

.gds-lightbox-lock {
    overflow: hidden;
}

.gds-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: clamp(14px, 2vw, 28px);
    background: rgba(8, 12, 10, .94);
    color: #fff;
}

.gds-lightbox[hidden] {
    display: none;
}

.gds-lightbox__topbar {
    display: flex;
    justify-content: flex-end;
}

.gds-lightbox__close,
.gds-lightbox__previous,
.gds-lightbox__next {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.gds-lightbox__close:hover,
.gds-lightbox__close:focus-visible,
.gds-lightbox__previous:hover,
.gds-lightbox__previous:focus-visible,
.gds-lightbox__next:hover,
.gds-lightbox__next:focus-visible {
    background: rgba(255, 255, 255, .26);
    transform: scale(1.04);
    outline: none;
}

.gds-lightbox__stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 2vw, 24px);
    align-items: center;
    min-height: 0;
}

.gds-lightbox__figure {
    min-width: 0;
    min-height: 0;
    margin: 0;
    text-align: center;
}

.gds-lightbox__image {
    max-width: 100%;
    max-height: calc(100vh - 230px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.gds-lightbox__title {
    max-width: 80ch;
    margin: 14px auto 0;
    color: #fff;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.3;
    font-weight: 700;
}

.gds-lightbox__caption {
    max-width: 80ch;
    margin: 6px auto 0;
    color: rgba(255, 255, 255, .82);
    font-size: .94rem;
    line-height: 1.45;
}

.gds-lightbox__status {
    min-height: 24px;
    margin: 8px 0 0;
    text-align: center;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
}

@media (max-width: 820px) {
    .gds-article,
    .gds-article--right {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gds-article--right .gds-article__media,
    .gds-article--right .gds-article__content {
        grid-column: 1;
    }

    .gds-article--right .gds-article__media {
        grid-row: 1;
    }

    .gds-article--right .gds-article__content {
        grid-row: 2;
    }

    .gds-article__image,
    .gds-article--wide.gds-article--crop .gds-article__image {
        aspect-ratio: 16 / 10;
    }

    .gds-article--wide:not(.gds-article--crop) .gds-article__image {
        max-height: min(520px, 64vh);
        aspect-ratio: auto;
    }
}

@media (max-width: 620px) {
    .gds-article {
        padding: 22px 0;
    }

    .gds-article__zoom-icon {
        width: 36px;
        height: 36px;
        right: 10px;
        bottom: 10px;
    }

    .gds-lightbox {
        padding: 10px;
    }

    .gds-lightbox__stage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .gds-lightbox__figure {
        grid-column: 1 / -1;
    }

    .gds-lightbox__previous,
    .gds-lightbox__next {
        justify-self: center;
    }

    .gds-lightbox__image {
        max-height: calc(100vh - 275px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gds-article__image,
    .gds-article__zoom-icon,
    .gds-lightbox__close,
    .gds-lightbox__previous,
    .gds-lightbox__next {
        transition: none;
    }
}

/* ========================================================================
   C015 V0.3 – MAGAZINREPORTAGE

   Zentraler Beitragsstandard für lange, redaktionelle Vereinsbeiträge.
   Farben stammen vollständig aus den saisonalen GDS-Variablen.
   ======================================================================== */

.gds-magazine {
    width: min(84%, 1600px);
    max-width: none;
    margin-inline: auto;
}

.gds-magazine > article {
    display: grid;
    gap: 2rem;
}

.gds-magazine .gds-card__body {
    font-size: 1.05rem;
    line-height: 1.75;
}

.gds-magazine .gds-card__body p,
.gds-magazine .gds-editorial__copy p {
    margin-top: 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    orphans: 3;
    widows: 3;
}

.gds-editorial__hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: 2rem;
    align-items: start;
}

.gds-editorial__split {
    display: block;
}

.gds-editorial__split--spaced,
.gds-editorial__media-row {
    margin-top: 1.5rem;
}

.gds-editorial__media-row {
    display: flow-root;
}

.gds-editorial__hero .gds-card__header {
    padding-bottom: 1rem;
}

.gds-editorial__hero-image,
.gds-editorial__media-image {
    width: 100%;
    margin: 0 !important;
    justify-self: center;
}

.gds-editorial__hero-image {
    max-width: 320px;
}

.gds-editorial__media-image {
    float: left;
    width: 34%;
    max-width: 430px;
    margin: 0 2rem 1rem 0 !important;
}

.gds-editorial__media-row--reverse .gds-editorial__media-image {
    float: right;
    margin: 0 0 1rem 2rem !important;
}

.gds-editorial__hero-copy > .gds-card__body > p:first-of-type::first-letter {
    float: left;
    margin: .08em .12em 0 0;
    color: var(--gds-color-secondary, var(--gds-secondary, #df9d13));
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.6em;
    font-weight: 700;
    line-height: .82;
}

.gds-editorial__section-title {
    margin-top: 0;
}

.gds-magazine blockquote {
    clear: both;
    position: relative;
    width: min(92%, 1100px);
    margin: 2rem auto;
    padding: 1.35rem 1.75rem 1.3rem 2.4rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gds-color-secondary, var(--gds-secondary, #df9d13)) 38%, transparent);
    border-left: 6px solid var(--gds-color-secondary, var(--gds-secondary, #df9d13));
    border-radius: 0 16px 16px 0;
    background-color: rgba(255, 255, 255, .72);
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--gds-color-primary, var(--gds-primary, #2f5530)) 10%, white),
        color-mix(in srgb, var(--gds-color-secondary, var(--gds-secondary, #df9d13)) 16%, white)
    );
    box-shadow: 0 10px 26px rgba(34, 61, 35, .14);
}

.gds-magazine blockquote::before {
    content: "„";
    position: absolute;
    top: -.18em;
    left: .28em;
    color: var(--gds-color-secondary, var(--gds-secondary, #df9d13));
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    opacity: .42;
}

.gds-magazine blockquote p {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.55;
}

.gds-editorial__wide-image {
    width: min(100%, 980px);
    margin: 1.75rem auto !important;
}

@media (max-width: 1000px) {
    .gds-editorial__hero {
        grid-template-columns: minmax(0, 1.6fr) minmax(230px, .65fr);
    }
}

@media (max-width: 760px) {
    .gds-magazine {
        width: calc(100% - 2rem);
    }

    .gds-editorial__hero {
        grid-template-columns: 1fr;
    }

    .gds-editorial__hero-image,
    .gds-editorial__media-image,
    .gds-editorial__media-row--reverse .gds-editorial__media-image {
        float: none;
        width: min(100%, 560px);
        margin: 0 auto 1.5rem !important;
    }

    .gds-magazine .gds-card__body p,
    .gds-magazine .gds-editorial__copy p {
        text-align: left;
        hyphens: none;
    }

    .gds-magazine blockquote {
        width: 100%;
        padding: 1.2rem 1.25rem 1.2rem 1.8rem;
    }
}



/* =========================================================
   GDS – Rechtliche Seiten V1.0
   Ergänzung für custom_season_base.css

   Hinweis:
   Die Selektoren verwenden ausschließlich den GDS-Präfix.
   ========================================================= */

.gds-legal-page {
  width: min(100% - 2rem, 980px);
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 4rem);
}

.gds-legal-page__header {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.gds-legal-page__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gds-color-primary, #2e7d32);
}

.gds-legal-page__title {
  margin: 0;
}

.gds-legal-page__intro {
  max-width: 70ch;
  margin: 0.85rem 0 0;
  color: var(--gds-color-text-muted, #58625b);
}

.gds-legal-page__content {
  display: grid;
  gap: 1rem;
}

.gds-legal-section {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--gds-color-border, rgba(46, 125, 50, 0.18));
  border-radius: var(--gds-radius-lg, 1rem);
  background: var(--gds-color-surface, #fff);
  box-shadow: var(--gds-shadow-sm, 0 0.4rem 1.2rem rgba(25, 55, 31, 0.06));
}

.gds-legal-section h2 {
  margin-top: 0;
}

.gds-legal-section p:last-child {
  margin-bottom: 0;
}

.gds-legal-page__footer {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--gds-color-text-muted, #58625b);
}

/* M011 – Breite des Footer-Inhalts an die xwide-Startseitencontainer angleichen */
.gds-footer__inner,
.gds-footer__legal-inner {
  width: min(calc(100% - 2rem), 1340px);
  max-width: none;
  margin-inline: auto;
}

@media (max-width: 767.98px) {
  .gds-legal-page {
    width: min(100% - 1.25rem, 980px);
  }

  .gds-footer__inner,
  .gds-footer__legal-inner {
    width: min(calc(100% - 1.25rem), 1340px);
  }
}







/* ========================================================================
   GDS M012 – Galeriesystem
   Version 0.1.0
======================================================================== */

.gds-module--gallery {
    padding-block: var(--gds-section-spacing, 4rem);
    background: transparent;
}

.gds-gallery__header {
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.gds-gallery__eyebrow {
    margin: 0 0 .45rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gds-color-primary, currentColor);
}

.gds-gallery__title {
    margin: 0;
}

.gds-gallery__intro {
    margin: .75rem 0 0;
    font-size: 1.075rem;
}

.gds-gallery__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: .95rem;
}

.gds-gallery__meta span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.gds-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.gds-gallery__item {
    margin: 0;
    min-width: 0;
}

.gds-gallery__link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--gds-radius-large, 1rem);
    box-shadow: var(--gds-shadow-card, 0 .4rem 1.2rem rgba(0, 0, 0, .12));
    background: var(--gds-surface-muted, #f2f2f2);
}

.gds-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.gds-gallery__zoom {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--gds-color-primary, #286b35);
    opacity: 0;
    transform: translateY(.35rem);
    transition: opacity .2s ease, transform .2s ease;
}

.gds-gallery__link:hover .gds-gallery__image,
.gds-gallery__link:focus-visible .gds-gallery__image {
    transform: scale(1.035);
}

.gds-gallery__link:hover .gds-gallery__zoom,
.gds-gallery__link:focus-visible .gds-gallery__zoom {
    opacity: 1;
    transform: translateY(0);
}

.gds-gallery__empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}

.gds-gallery__empty p { margin: 0; }
.gds-gallery__empty-icon { font-size: 2rem; }
.gds-gallery__actions { margin-top: 1.5rem; }

@media (max-width: 1100px) {
    .gds-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .gds-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .gds-gallery__grid { grid-template-columns: 1fr; }
    .gds-gallery__zoom { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gds-gallery__image,
    .gds-gallery__zoom { transition: none; }
}

/* ========================================================================
   GDS EBENENARCHITEKTUR – ABSCHLUSSREGEL STARTSEITE
   Version 1.0 · Goldstandard

   Der Seitenverlauf wird ausschließlich auf body gezeichnet.
   Äußere Positions- und Modulwrapper bleiben vollständig transparent.
   Karten, Panels, Medienflächen und Boxen sind hiervon ausdrücklich
   nicht betroffen und behalten ihre Theme-Oberflächen.
======================================================================== */

#sp-main-body,
.gds-main-content,
.gds-quickinfo-wrapper,
.gds-content-wrapper,
.gds-partners-wrapper,
.gds-gallery-wrapper,
.gds-module--quickinfo,
.gds-module--content-panel,
#gds-m009-showcase,
.gds-module--partners,
.gds-module--gallery {
    background: transparent !important;
    background-image: none !important;
}

/* ========================================================================
   GDS FOOTER – GOLDSTANDARD ABSCHLUSSREGEL
   Hauptfooter = Teil des gemeinsamen Seitenhintergrunds
   Rechtsleiste = Primärfarbe
======================================================================== */

.gds-footer-wrapper,
#gds-m011-footer,
#gds-m011-footer .gds-footer__main {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#gds-m011-footer .gds-footer__title,
#gds-m011-footer .gds-footer__brand {
    color: var(--gds-text-primary, var(--gds-text, inherit));
}

#gds-m011-footer .gds-footer__text,
#gds-m011-footer .gds-footer__address,
#gds-m011-footer .gds-footer__newsletter-text {
    color: var(--gds-text-secondary, var(--muted, inherit));
}

#gds-m011-footer .gds-footer__link {
    color: var(--gds-link, var(--gds-primary, currentColor));
}

#gds-m011-footer .gds-footer__legal {
    border: 0 !important;
    background: var(--gds-primary, var(--gds-color-primary, currentColor)) !important;
}

#gds-m011-footer .gds-footer__copyright,
#gds-m011-footer .gds-footer__legal-link {
    color: var(--gds-button-primary-text, #ffffff);
}

/* ========================================================================
   M006 ANLAGENDETAIL – DURCHGEHENDER SEITENHINTERGRUND
   Goldstandard: Alle äußeren Abschnittsflächen bleiben transparent.
   Karten, Infoboxen, Downloads, Karte und CTA behalten ihre Oberflächen.
======================================================================== */

.gds-module--location-detail,
.gds-location-detail__section,
.gds-location-detail__section--compact,
.gds-location-detail__section--muted {
    background: transparent !important;
    background-image: none !important;
}

/* ========================================================================
   M007 DOKUMENTENCENTER – DURCHGEHENDER SEITENHINTERGRUND
   Goldstandard: Intro, Navigation und äußere Inhaltssektionen sind transparent.
   Servicekarten, Dokumentkarten, Statusflächen und Buttons bleiben unverändert.
======================================================================== */

.gds-document-center,
.gds-document-center__intro,
.gds-document-center__navigation,
.gds-document-center__section,
.gds-document-center__section--muted {
    background: transparent !important;
    background-image: none !important;
}



/* ========================================================================
   M012 Partner & Ressourcen – durchgehender Seitenhintergrund V1.2
======================================================================== */
.gds-resources__intro,
.gds-resources__section,
.gds-resources__footer,
.gds-resources__section--muted{
    background: transparent !important;
}


/* ========================================================================
   GDS NAVIGATION v2.1 – MOBILER MENÜSCHALTER OBEN LINKS
   Version 0.1 · ausschließlich Smartphone bis 760px
======================================================================== */

@media (max-width: 760px) {
    /* Der Helix-Navigationsblock wird aus seiner eigenen Zeile genommen. */
    #sp-header.gds-navigation-placeholder {
        position: absolute !important;
        z-index: 40 !important;
        top: 14px !important;
        left: 12px !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #sp-header .gds-header-shell,
    #sp-header .gds-header-inner,
    #sp-header .gds-navigation,
    #sp-header .gds-navigation__inner,
    #sp-header .gds-navigation__inner > .row,
    #sp-header #sp-menu,
    #sp-header #sp-menu > .sp-column {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sp-header #sp-menu > .sp-column {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #sp-header .offcanvas-toggler-secondary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--gds-header-border-color, rgba(0,0,0,.14)) !important;
        border-radius: 12px !important;
        background: var(--gds-header-tool-hover-background, rgba(255,255,255,.42)) !important;
        color: var(--gds-header-text, currentColor) !important;
        box-shadow: var(--gds-shadow-card, 0 4px 14px rgba(0,0,0,.12)) !important;
    }

    /* Platz für den neuen Schalter links neben Logo und Vereinsnamen. */
    .gds-brand-header__identity {
        padding-left: 58px;
    }
}

@media (max-width: 520px) {
    #sp-header.gds-navigation-placeholder {
        top: 12px !important;
        left: 8px !important;
    }

    .gds-brand-header__identity {
        padding-left: 54px;
    }
}

/* ========================================================================
   GDS MITGLIEDER-LOGIN – GDS 1.0.2
   Joomla Core Login optisch in das Gartenfreunde Design System integriert.
   Funktion und Core-Markup bleiben unverändert.
======================================================================== */

.com-users-login {
    width: min(100% - 32px, 760px);
    margin: 0 auto;
    padding: 40px 0 56px;
}

/*
 * Joomla setzt das Loginformular ab dem Bootstrap-Breakpoint "lg" in eine
 * .col-lg-4 und begrenzt es dadurch auf 4/12 der verfügbaren Breite.
 * Die Korrektur bleibt bewusst auf die exakte Struktur des nativen
 * com_users-Logins beschränkt; andere Bootstrap-Spalten bleiben unberührt.
 */
@media (min-width: 992px) {
    .com-users-login > .row.justify-content-center > .col-lg-4 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 760px;
    }

    .com-users-login > .row.justify-content-center > .col-lg-4 > form#com-users-login__form {
        width: 100%;
        max-width: none;
    }
}

.com-users-login .login,
.com-users-login > form,
.com-users-login form.form-validate {
    width: min(100%, 560px);
    margin-left: auto;
    margin-right: auto;
    padding: 28px 30px;
    border: 1px solid var(--gds-border-soft, var(--border-card, rgba(0,0,0,.12)));
    border-radius: var(--gds-radius-large, 18px);
    background: var(--gds-surface-card, var(--card, #fff));
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, 0 12px 30px rgba(0,0,0,.10)));
    color: var(--gds-text-primary, var(--text, inherit));
}

.com-users-login fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.com-users-login .control-group {
    margin-bottom: 18px;
}

.com-users-login .control-label,
.com-users-login label {
    display: block;
    margin-bottom: 7px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-weight: 650;
}

.com-users-login input[type="text"],
.com-users-login input[type="email"],
.com-users-login input[type="password"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid var(--gds-border-soft, var(--border-card, rgba(0,0,0,.18)));
    border-radius: 10px;
    background: rgba(255,255,255,.88);
    color: var(--gds-text-primary, var(--text, inherit));
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.com-users-login input[type="text"]:focus,
.com-users-login input[type="email"]:focus,
.com-users-login input[type="password"]:focus {
    outline: 0;
    border-color: var(--gds-link, var(--accent-dark, currentColor));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gds-accent, var(--accent, #69b86d)) 18%, transparent);
}

.com-users-login .input-group {
    width: 100%;
}

.com-users-login .input-group > .form-control {
    border-radius: 10px 0 0 10px;
}

.com-users-login .input-group .btn {
    border-color: var(--gds-border-soft, var(--border-card, rgba(0,0,0,.18)));
    border-radius: 0 10px 10px 0;
    background: var(--gds-surface-muted, rgba(255,255,255,.72));
    color: var(--gds-text-primary, var(--text, inherit));
}

.com-users-login .form-check {
    margin: 4px 0 18px;
}

.com-users-login .form-check-input {
    border-color: var(--gds-border-soft, var(--border-card, rgba(0,0,0,.25)));
}

.com-users-login .form-check-input:checked {
    border-color: var(--gds-button-bg, var(--accent, currentColor));
    background-color: var(--gds-button-bg, var(--accent, currentColor));
}

.com-users-login .btn-primary,
.com-users-login button[type="submit"] {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;
    background: var(--gds-button-bg, var(--accent, transparent));
    color: var(--gds-button-text, #fff);
    font-weight: 700;
    box-shadow: var(--gds-shadow-sm, none);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.com-users-login .btn-primary:hover,
.com-users-login .btn-primary:focus,
.com-users-login button[type="submit"]:hover,
.com-users-login button[type="submit"]:focus {
    background: var(--gds-button-hover-bg, var(--accent-dark, transparent));
    color: var(--gds-button-hover-text, #fff);
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
    transform: translateY(-1px);
}

.com-users-login .btn-secondary,
.com-users-login button[class*="passkey"] {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;
    background: var(--gds-button-secondary-bg, var(--gds-surface-muted, #f3f3f3));
    color: var(--gds-button-secondary-text, var(--gds-text-primary, inherit));
    font-weight: 650;
}

.com-users-login ul,
.com-users-login .list-group {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border-radius: 12px;
    overflow: hidden;
}

.com-users-login li,
.com-users-login .list-group-item {
    border-color: var(--gds-border-soft, var(--border-card, rgba(0,0,0,.12)));
    background: rgba(255,255,255,.58);
}

.com-users-login li a,
.com-users-login .list-group-item a {
    color: var(--gds-link, var(--accent-dark, currentColor));
    text-decoration: none;
}

.com-users-login li a:hover,
.com-users-login .list-group-item a:hover {
    color: var(--gds-link-hover, var(--accent, currentColor));
    text-decoration: underline;
}

@media (max-width: 760px) {
    .com-users-login {
        width: min(100% - 24px, 760px);
        padding: 24px 0 40px;
    }

    .com-users-login .login,
    .com-users-login > form,
    .com-users-login form.form-validate {
        padding: 22px 18px;
        border-radius: 14px;
    }
}


/* ========================================================================
   GDS MITGLIEDERBEREICH
   Version 1.0.0
   ======================================================================== */

/*
   Gemeinsamer Rahmen fuer den geschuetzten Mitgliederbereich.

   Aufbau:
   - Beitrag 106 liefert die erste Informationskarte fuer Registriert.
   - Die Position gds-mitglieder-menu liefert die zusaetzlichen Karten
     entsprechend der aktiven Joomla-Zugriffsebene.
   - Die Position gds-mitglieder-account bleibt ausserhalb des Kartenrasters.

   Die Karten verwenden weiterhin die bestehende GDS-Komponente C011.
*/

.gds-module--members {
    width: 100%;
    padding: clamp(22px, 3vw, 40px) 0 clamp(34px, 4vw, 56px);
}

.gds-module--members .gds-members__inner {
    width: 100%;
}

.gds-members-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.gds-members-grid .gds-info-card {
    width: 100%;
    height: 100%;
}

.gds-members-account {
    margin-top: clamp(24px, 3vw, 36px);
    padding: 16px 18px;

    background: var(--gds-surface-card, var(--card, rgba(255, 255, 255, .78)));
    color: var(--gds-text-primary, var(--text, inherit));

    border: 1px solid var(--gds-border-soft, var(--border-card, rgba(0, 0, 0, .10)));
    border-radius: 16px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.gds-members-account .mod-login-logout,
.gds-members-account form {
    width: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gds-members-account .mod-login-logout__login-greeting,
.gds-members-account .login-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;

    font-size: 1rem;
    font-weight: 700;
}

.gds-members-account .mod-login-logout__login-greeting::before,
.gds-members-account .login-greeting::before {
    content: "\f2bd";

    width: 38px;
    height: 38px;

    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--gds-info-icon-bg, rgba(255, 255, 255, .42));
    color: var(--gds-info-icon-text, currentColor);

    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.gds-members-account .mod-login-logout__button,
.gds-members-account .logout-button {
    margin: 0;
}

.gds-members-account button[type="submit"] {
    min-height: 40px;
    padding: 8px 18px;

    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 10px;

    background: var(--gds-button-bg, var(--accent, transparent));
    color: var(--gds-button-text, var(--menu-active-text, inherit));

    font-weight: 700;
    line-height: 1.2;

    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gds-members-account button[type="submit"]:hover,
.gds-members-account button[type="submit"]:focus {
    background: var(--gds-button-hover-bg, var(--accent-dark, transparent));
    color: var(--gds-button-hover-text, var(--menu-active-text, inherit));
    box-shadow: var(--gds-shadow-card-hover, var(--shadow-strong, none));
}

.gds-members-account button[type="submit"]:active {
    transform: translateY(1px);
}

@media (max-width: 1100px) {
    .gds-members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .gds-module--members {
        padding-top: 20px;
        padding-bottom: 36px;
    }

    .gds-members-grid {
        grid-template-columns: 1fr;
    }

    .gds-members-account {
        padding: 16px;
    }

    .gds-members-account .mod-login-logout,
    .gds-members-account form {
        align-items: stretch;
        flex-direction: column;
    }

    .gds-members-account button[type="submit"] {
        width: 100%;
    }
}

/* ========================================================================
   GDS HEADER – BREITES MARKENLOGO – V1.0.0
   Aktiv bei Helix: GDS-Darstellung im Kopfbereich = Breites Markenlogo.
   Das breite Markenlogo ersetzt Symbol + ausgeschriebenen Seitennamen.
======================================================================== */
.gds-brand-header__inner--wide-logo .gds-brand-header__identity--wide-logo {
    gap: 0;
}

.gds-brand-header__inner--wide-logo .gds-brand-header__text {
    display: none !important;
}

.gds-brand-header__inner--wide-logo .gds-brand-header__logo {
    justify-content: flex-start;
    min-width: 0;
}

.gds-brand-header__inner--wide-logo .gds-brand-header__logo .logo,
.gds-brand-header__inner--wide-logo .gds-brand-header__logo .logo-image,
.gds-brand-header__inner--wide-logo .gds-brand-header__logo img {
    width: auto !important;
    height: auto !important;
    max-width: min(420px, 42vw) !important;
    max-height: 125px !important;
    object-fit: contain;
}

@media (max-width: 760px) {
    .gds-brand-header__inner--wide-logo .gds-brand-header__logo .logo,
    .gds-brand-header__inner--wide-logo .gds-brand-header__logo .logo-image,
    .gds-brand-header__inner--wide-logo .gds-brand-header__logo img {
        max-width: min(300px, 62vw) !important;
        max-height: 72px !important;
    }
}

@media (max-width: 520px) {
    .gds-brand-header__inner--wide-logo .gds-brand-header__logo .logo,
    .gds-brand-header__inner--wide-logo .gds-brand-header__logo .logo-image,
    .gds-brand-header__inner--wide-logo .gds-brand-header__logo img {
        max-width: min(240px, 68vw) !important;
        max-height: 62px !important;
    }
}


/* ========================================================================
   GGW KATEGORIEBLOG – GOLDSTANDARD 1.0
   Version 1.0.0 · 19.09.2026

   Gilt ausschließlich für den universellen GGW-Kategorieblog.
   Saisonfarben bleiben vollständig über vorhandene GDS-Variablen angebunden.

   Aufbau:
   - kompakter Hero
   - ruhiger Einführungsbereich
   - Beitragsraster Desktop 3 / Tablet 2 / Smartphone 1
   - flache 16:9-Vorschaubilder; Originaldateien bleiben unverändert
======================================================================== */

.ggw-category {
    width: 100%;
    color: var(--gds-text-primary, var(--text, inherit));
}

.ggw-category__hero.gds-module--hero {
    min-height: clamp(330px, 38vw, 470px);
}

.ggw-category__hero .gds-hero__media {
    background-image: var(--gds-hero-image, none);
    background-position: var(--ggw-category-hero-position, center);
}

.ggw-category__hero .gds-hero__media::after {
    background: var(--gds-hero-overlay, linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .03)));
}

.ggw-category__hero .gds-hero__inner {
    align-items: flex-end;
    padding-top: 24px;
    padding-bottom: clamp(24px, 4vw, 42px);
    padding-left: 0;
}

.ggw-category__hero .gds-hero__content {
    width: min(100%, 620px);
    padding: clamp(20px, 3vw, 30px);
    border-radius: 18px;
}

.ggw-category__hero .gds-hero__eyebrow,
.ggw-category__eyebrow {
    margin: 0 0 8px;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .92rem;
    font-weight: 700;
}

.ggw-category__hero .gds-hero__title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
}

.ggw-category__hero-tagline {
    margin: 10px 0 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.35;
    font-weight: 600;
}

.ggw-category__content {
    padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 76px);
}

.ggw-category__fallback-hero {
    margin-bottom: clamp(26px, 4vw, 42px);
    padding: clamp(22px, 3vw, 32px);
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 18px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.ggw-category__fallback-hero .ggw-category__section-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
}

.ggw-category__intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: start;
    max-width: 1040px;
    margin: 0 auto clamp(40px, 6vw, 64px);
    padding: clamp(22px, 3vw, 32px) clamp(24px, 4vw, 40px);
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: var(--gds-radius-card, 18px);
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.ggw-category__intro-mark {
    display: grid;
    place-items: center;
    width: clamp(46px, 5vw, 62px);
    aspect-ratio: 1;
    color: var(--gds-accent, var(--accent, currentColor));
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.ggw-category__intro-text {
    min-width: 0;
    max-width: 82ch;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1rem, 1.35vw, 1.08rem);
    line-height: 1.7;
}

.ggw-category__intro-text > :first-child {
    margin-top: 0;
}

.ggw-category__intro-text > p:first-child,
.ggw-category__intro-text > h2:first-child,
.ggw-category__intro-text > h3:first-child {
    margin: 0 0 12px;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.18;
    font-weight: 700;
}

.ggw-category__intro-text > :last-child {
    margin-bottom: 0;
}


/* ========================================================================
   GGW KATEGORIE-INTRO-KOMPONENTE
   Version 1.0 · 19.09.2026

   HTML-Struktur innerhalb der Joomla-Kategoriebeschreibung:
   .ggw-category-intro
   .ggw-category-intro__title

   Die Komponente verwendet ausschließlich GDS-/Theme-Variablen.
   Saisonfarben bleiben damit Aufgabe der aktiven Theme-CSS.
======================================================================== */

.ggw-category__intro-text .ggw-category-intro {
    min-width: 0;
}

.ggw-category__intro-text .ggw-category-intro__title {
    margin: 0 0 clamp(12px, 1.5vw, 16px);
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.18;
    font-weight: 700;
}

.ggw-category__intro-text .ggw-category-intro p {
    margin: 0 0 clamp(10px, 1.3vw, 14px);
    color: var(--gds-text-secondary, var(--muted, inherit));
    line-height: 1.7;
}

.ggw-category__intro-text .ggw-category-intro p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .ggw-category__intro-text .ggw-category-intro__title {
        font-size: clamp(1.4rem, 7vw, 1.75rem);
    }
}

.ggw-category__articles {
    margin-top: 0;
}

.ggw-category__articles-heading {
    display: grid;
    grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
    gap: clamp(12px, 2vw, 22px);
    align-items: center;
    margin: 0 0 clamp(24px, 3vw, 34px);
    text-align: center;
}

.ggw-category__articles-heading h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: var(--gds-text-primary, var(--text, inherit));
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.15;
}

.ggw-category__articles-heading h2 .fa-leaf {
    color: var(--gds-accent, var(--accent, currentColor));
    font-size: .78em;
}

.ggw-category__heading-line {
    height: 1px;
    background: var(--gds-border-soft, var(--border-card, currentColor));
    opacity: .8;
}

.ggw-category__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
    align-items: stretch;
}

.ggw-category .ggw-category-card.gds-content-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.ggw-category .ggw-category-card .gds-content-card__media {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
}

.ggw-category .ggw-category-card .gds-content-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s ease;
}

.ggw-category .ggw-category-card:hover .gds-content-card__image,
.ggw-category .ggw-category-card:focus-within .gds-content-card__image {
    transform: scale(1.025);
}

.ggw-category .ggw-category-card .gds-content-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(18px, 2vw, 24px);
}

.ggw-category .ggw-category-card .gds-content-card__meta {
    justify-content: flex-start;
    margin: 0 0 10px;
    font-size: .82rem;
}

.ggw-category .ggw-category-card .gds-content-card__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ggw-category .ggw-category-card .gds-content-card__title {
    margin: 0 0 10px;
    font-size: clamp(1.2rem, 1.7vw, 1.48rem);
    line-height: 1.18;
}

.ggw-category-card__title-link {
    color: inherit;
    text-decoration: none;
}

.ggw-category-card__title-link:hover,
.ggw-category-card__title-link:focus-visible {
    color: var(--gds-accent, var(--accent, inherit));
    text-decoration: none;
}

.ggw-category .ggw-category-card .gds-content-card__description {
    margin: 0;
    font-size: .98rem;
    line-height: 1.55;
}

.ggw-category .ggw-category-card .gds-content-card__actions {
    margin-top: auto;
    padding-top: 20px;
}

.ggw-category .ggw-category-card .gds-content-card__actions .gds-button {
    width: auto;
}

.ggw-category-card--no-image .gds-content-card__body {
    padding-top: clamp(22px, 3vw, 30px);
}

.ggw-category__empty {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 28px);
}

.ggw-category__empty > .fa-seedling {
    flex: 0 0 auto;
    color: var(--gds-accent, var(--accent, currentColor));
    font-size: 2rem;
}

.ggw-category__empty h3,
.ggw-category__empty p {
    margin: 0;
}

.ggw-category__empty p {
    margin-top: 4px;
    color: var(--gds-text-secondary, var(--muted, inherit));
}

.ggw-category__links,
.ggw-category__children,
.ggw-category__pagination,
.ggw-category__plugin-output {
    margin-top: clamp(28px, 4vw, 44px);
}

.ggw-category__pagination {
    text-align: center;
}

.ggw-category__pagination-counter {
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .9rem;
}

@media (max-width: 980px) {
    .ggw-category__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ggw-category__hero.gds-module--hero {
        min-height: 0;
    }

    .ggw-category__hero .gds-hero__media {
        min-height: clamp(220px, 58vw, 330px);
    }

    .ggw-category__hero .gds-hero__inner {
        padding: 0;
    }

    .ggw-category__hero .gds-hero__content {
        width: 100%;
        padding: 20px;
        border-radius: 0;
    }

    .ggw-category__content {
        padding-top: 28px;
    }

    .ggw-category__intro {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ggw-category__intro-mark {
        width: 40px;
    }

    .ggw-category__articles-heading {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ggw-category__heading-line {
        display: none;
    }
}

@media (max-width: 640px) {
    .ggw-category__grid {
        grid-template-columns: 1fr;
    }

    .ggw-category .ggw-category-card .gds-content-card__media {
        aspect-ratio: 16 / 9;
    }

    .ggw-category .ggw-category-card .gds-content-card__body {
        padding: 18px;
    }

    .ggw-category .ggw-category-card .gds-content-card__meta {
        flex-direction: row;
        align-items: center;
    }

    .ggw-category .ggw-category-card .gds-content-card__actions .gds-button {
        width: 100%;
    }

    .ggw-category__empty {
        align-items: flex-start;
    }
}

/* ========================================================================
   GGW – UNTERKATEGORIE-KARTENRASTER
   Ergänzung 20.09.2026
   Fridas Gartenwissen / universell für GGW-Kategorie-Unterkategorien

   Desktop:    3 Spalten
   Tablet:     2 Spalten
   Smartphone: 1 Spalte
======================================================================== */

.ggw-category .ggw-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
    align-items: stretch;
    width: 100%;
}

.ggw-category .ggw-subcategory-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.ggw-category .ggw-subcategory-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ggw-category .ggw-subcategory-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s ease;
}

.ggw-category .ggw-subcategory-card:hover .ggw-subcategory-card__image,
.ggw-category .ggw-subcategory-card:focus-within .ggw-subcategory-card__image {
    transform: scale(1.025);
}

.ggw-category .ggw-subcategory-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: clamp(18px, 2vw, 24px);
}

.ggw-category .ggw-subcategory-card__title {
    margin: 0 0 10px;
    font-size: clamp(1.2rem, 1.7vw, 1.48rem);
    line-height: 1.18;
}

.ggw-category .ggw-subcategory-card__title a {
    color: inherit;
    text-decoration: none;
}

.ggw-category .ggw-subcategory-card__title a:hover,
.ggw-category .ggw-subcategory-card__title a:focus-visible {
    color: var(--gds-accent, var(--accent, inherit));
    text-decoration: none;
}

.ggw-category .ggw-subcategory-card__description {
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .98rem;
    line-height: 1.55;
}

.ggw-category .ggw-subcategory-card__actions {
    margin-top: auto;
    padding-top: 20px;
}

.ggw-category .ggw-subcategory-card__actions .gds-button {
    width: auto;
}

@media (max-width: 980px) {
    .ggw-category .ggw-subcategory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ggw-category .ggw-subcategory-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ggw-category .ggw-subcategory-card__body {
        padding: 18px;
    }

    .ggw-category .ggw-subcategory-card__actions .gds-button {
        width: 100%;
    }
}


/* ========================================================================
   GGW M011 FOOTER – FULL-WIDTH 6-SPALTEN FEINJUSTIERUNG
   Version 1.3.1 – 20.09.2026
   Außenbilder nutzen die Footerhöhe und sitzen direkt an den Seitenrändern.
   ======================================================================== */
@media (min-width: 1200px) {
  #gds-m011-footer .ggw-footer-inner,
  .ggw-footer-main .ggw-footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 245px;
    margin-inline: 0 !important;
    padding: 0 !important;
    grid-template-columns:
      minmax(250px, 1.15fr)
      minmax(230px, 1.20fr)
      minmax(125px, .70fr)
      minmax(125px, .70fr)
      minmax(180px, .90fr)
      minmax(300px, 1.35fr) !important;
    column-gap: clamp(18px, 1.7vw, 32px) !important;
    align-items: center !important;
  }

  #gds-m011-footer .ggw-footer-brand-art,
  .ggw-footer-main .ggw-footer-brand-art {
    height: 245px;
    align-self: stretch !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
  }

  #gds-m011-footer .ggw-footer-brand-art img,
  .ggw-footer-main .ggw-footer-brand-art img {
    width: 100% !important;
    max-width: 330px !important;
    height: 225px !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    margin: 0 !important;
  }

  #gds-m011-footer .ggw-footer-right,
  .ggw-footer-main .ggw-footer-right {
    height: 245px;
    align-self: stretch !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
  }

  #gds-m011-footer .ggw-footer-right img,
  .ggw-footer-main .ggw-footer-right img {
    width: 100% !important;
    max-width: 390px !important;
    height: 225px !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    margin: 0 !important;
  }

  #gds-m011-footer .ggw-footer-brand,
  #gds-m011-footer .ggw-footer-block,
  .ggw-footer-main .ggw-footer-brand,
  .ggw-footer-main .ggw-footer-block {
    align-self: center;
  }
}

/* ========================================================================
   GGW M011 FOOTER – GOLDSTANDARD FEINSCHLIFF
   Version 1.3.2 – 20.09.2026
   Randgrafiken nutzen die Footerhöhe; Mittelspalten bleiben ruhig verteilt.
   ======================================================================== */
@media (min-width: 1200px) {
  #ggw-m011-footer .ggw-footer-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 225px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns:
      minmax(285px, 1.18fr)
      minmax(255px, 1.12fr)
      minmax(145px, .72fr)
      minmax(145px, .72fr)
      minmax(205px, .90fr)
      minmax(335px, 1.38fr) !important;
    column-gap: clamp(16px, 1.45vw, 28px) !important;
    align-items: center !important;
  }

  #ggw-m011-footer .ggw-footer-brand-art,
  #ggw-m011-footer .ggw-footer-right {
    height: 225px !important;
    min-height: 225px !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  #ggw-m011-footer .ggw-footer-brand-art {
    justify-content: flex-start !important;
  }

  #ggw-m011-footer .ggw-footer-right {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  #ggw-m011-footer .ggw-footer-brand-art img {
    width: auto !important;
    max-width: 100% !important;
    height: 218px !important;
    max-height: calc(100% - 2px) !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    margin: 0 !important;
  }

  #ggw-m011-footer .ggw-footer-right img {
    width: auto !important;
    max-width: 100% !important;
    height: 218px !important;
    max-height: calc(100% - 2px) !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    margin: 0 !important;
  }

  #ggw-m011-footer .ggw-footer-brand,
  #ggw-m011-footer .ggw-footer-block {
    align-self: center !important;
  }

  #ggw-m011-footer .ggw-footer-brand {
    padding-top: 0 !important;
  }

  #ggw-m011-footer .ggw-footer-block h2 {
    margin-top: 0 !important;
  }
}

/* ========================================================================
   GGW – FRIDAS KRÄUTER & GEWÜRZE – WEBSITE-GOLDSTANDARD
   Pilot ANIS – Bauabschnitt 1: Hero, Steckbrief, Herkunft & Geschichte
   Version 1.0.0 – 25.09.2026
   Farben und Oberflächen ausschließlich über bestehende GDS-/Theme-Variablen.
   ======================================================================== */
.ggw-herb {
  color: var(--gds-content-card-text, var(--gds-color-text, inherit));
}

.ggw-herb__hero {
  position: relative;
  left: 50%;
  width: 100vw;
  width: 100dvw;
  min-height: clamp(300px, 21vw, 350px);
  margin: 0 0 clamp(22px, 3vw, 38px);
  margin-left: -50vw;
  margin-left: -50dvw;
  overflow: hidden;
  border-top: 1px solid var(--gds-content-card-border, transparent);
  border-bottom: 1px solid var(--gds-content-card-border, transparent);
  border-radius: 0;
  box-shadow: var(--gds-content-card-shadow, none);
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-herb__hero-media,
.ggw-herb__hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ggw-herb__hero-media img {
  object-fit: cover;
  object-position: center;
}

.ggw-herb__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 38%, rgba(0,0,0,.08) 68%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.ggw-herb__hero-content {
  position: relative;
  z-index: 1;
  width: min(560px, 54%);
  padding: clamp(28px, 3.6vw, 52px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.42);
}

.ggw-herb__eyebrow {
  margin: 0 0 .45rem;
  font-size: clamp(.76rem, .85vw, .92rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ggw-herb__title {
  margin: 0;
  color: inherit;
  font-size: clamp(2.9rem, 4.6vw, 4.2rem);
  line-height: .95;
}

.ggw-herb__flavour {
  margin: .6rem 0 .8rem;
  font-size: clamp(1.02rem, 1.35vw, 1.3rem);
  font-weight: 700;
}

.ggw-herb__intro {
  max-width: 42rem;
  margin: 0;
  font-size: clamp(.94rem, 1vw, 1.06rem);
  line-height: 1.55;
}

.ggw-herb__opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}

.ggw-herb__panel {
  overflow: hidden;
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-large, 1.25rem);
  background: var(--gds-content-card-background, var(--gds-color-surface, transparent));
  box-shadow: var(--gds-content-card-shadow, none);
}

.ggw-herb__panel-inner {
  padding: clamp(22px, 3vw, 34px);
}

.ggw-herb__section-title {
  margin: 0 0 1rem;
  color: var(--gds-color-primary, currentColor);
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  line-height: 1.15;
}

.ggw-herb__profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: center;
}

.ggw-herb__facts {
  margin: 0;
}

.ggw-herb__fact {
  display: grid;
  grid-template-columns: minmax(125px, .8fr) minmax(0, 1.35fr);
  gap: 12px;
  padding: .48rem 0;
  border-bottom: 1px solid var(--gds-content-card-border, transparent);
}

.ggw-herb__fact:last-child { border-bottom: 0; }
.ggw-herb__fact dt { font-weight: 800; }
.ggw-herb__fact dd { margin: 0; }

.ggw-herb__profile-image {
  overflow: hidden;
  border-radius: var(--gds-radius-lg, 1rem);
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-herb__profile-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ggw-herb__note {
  margin: 1rem 0 0;
  color: var(--gds-content-card-muted, var(--gds-color-text-muted, inherit));
  line-height: 1.6;
}

.ggw-herb__history {
  display: flex;
  flex-direction: column;
}

.ggw-herb__history .ggw-herb__panel-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.ggw-herb__history p {
  margin: 0 0 1rem;
  line-height: 1.72;
}

.ggw-herb__history p:last-child { margin-bottom: 0; }

.ggw-herb__closing {
  margin-top: clamp(26px, 4vw, 44px);
}

@media (max-width: 900px) {
  .ggw-herb__opening-grid { grid-template-columns: 1fr; }
  .ggw-herb__hero-content { width: min(680px, 78%); }
}

@media (max-width: 680px) {
  .ggw-herb__hero {
    min-height: 390px;
  }

  .ggw-herb__hero::after {
    background: linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 52%, rgba(0,0,0,.08) 100%);
  }

  .ggw-herb__hero-content {
    position: absolute;
    inset: auto 0 0;
    width: auto;
    padding: 26px 22px;
  }

  .ggw-herb__profile-layout { grid-template-columns: 1fr; }
  .ggw-herb__profile-image { order: -1; }
  .ggw-herb__fact { grid-template-columns: 1fr; gap: 2px; }
}


/* ==========================================================================
   GGW – Fridas Kräuter & Gewürze – redaktionelle Inhaltsbereiche
   Goldstandard Pilot ANIS
   ========================================================================== */

.ggw-herb__section {
  margin-top: clamp(28px, 4.5vw, 56px);
}

.ggw-herb__section-head {
  max-width: 860px;
  margin: 0 auto clamp(18px, 2.6vw, 30px);
  text-align: center;
}

.ggw-herb__section-head > p:last-child {
  margin: 0;
  color: var(--gds-content-card-muted, var(--gds-color-text-muted, inherit));
  line-height: 1.7;
}

.ggw-herb__kicker {
  margin: 0 0 .35rem;
  color: var(--gds-color-primary, currentColor);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ggw-herb__garden-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.ggw-herb__media-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-large, 1.25rem);
  background: var(--gds-content-card-background, var(--gds-color-surface, transparent));
  box-shadow: var(--gds-content-card-shadow, none);
  color: var(--gds-content-card-text, var(--gds-color-text, inherit));
}

.ggw-herb__media-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-herb__media-card-body {
  padding: clamp(15px, 1.7vw, 22px);
}

.ggw-herb__media-card h3 {
  margin: 0 0 .5rem;
  color: var(--gds-color-primary, currentColor);
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
}

.ggw-herb__media-card p {
  margin: 0;
  line-height: 1.62;
}

.ggw-herb__split,
.ggw-herb__knowledge,
.ggw-herb__health,
.ggw-herb__tip {
  overflow: hidden;
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-large, 1.25rem);
  background: var(--gds-content-card-background, var(--gds-color-surface, transparent));
  box-shadow: var(--gds-content-card-shadow, none);
}

.ggw-herb__split {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
}

.ggw-herb__split-media,
.ggw-herb__knowledge-media,
.ggw-herb__tip-media {
  margin: 0;
  min-height: 100%;
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-herb__split-media img,
.ggw-herb__knowledge-media img,
.ggw-herb__tip-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.ggw-herb__split-content,
.ggw-herb__knowledge-content,
.ggw-herb__tip-content {
  padding: clamp(24px, 3.5vw, 44px);
}

.ggw-herb__split-content p,
.ggw-herb__knowledge-content p,
.ggw-herb__tip-content p {
  line-height: 1.72;
}

.ggw-herb__checklist {
  display: grid;
  gap: .45rem;
  margin: 1.1rem 0;
  padding: 0;
  list-style: none;
}

.ggw-herb__checklist li {
  position: relative;
  padding-left: 1.55rem;
}

.ggw-herb__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gds-color-primary, currentColor);
  font-weight: 900;
}

.ggw-herb__kitchen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.ggw-herb__knowledge {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  align-items: stretch;
}

.ggw-herb__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 1.15rem 0;
}

.ggw-herb__compare > div {
  display: grid;
  gap: .28rem;
  padding: 16px;
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-lg, 1rem);
  background: var(--gds-content-panel-background, transparent);
}

.ggw-herb__compare strong {
  color: var(--gds-color-primary, currentColor);
  font-size: 1.08rem;
}

.ggw-herb__compare span {
  display: block;
  line-height: 1.45;
}

.ggw-herb__health {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(24px, 3.5vw, 44px);
}

.ggw-herb__health p {
  margin-bottom: 0;
  line-height: 1.72;
}

.ggw-herb__notice {
  align-self: center;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-lg, 1rem);
  background: var(--gds-content-panel-background, transparent);
}

.ggw-herb__notice strong {
  color: var(--gds-color-primary, currentColor);
  font-size: 1.08rem;
}

.ggw-herb__notice p {
  margin: .5rem 0 0;
}

.ggw-herb__tip {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
}

.ggw-herb__tip .ggw-herb__kicker {
  font-size: .9rem;
}

.ggw-herb__closing {
  padding-bottom: clamp(8px, 2vw, 20px);
}

@media (max-width: 1100px) {
  .ggw-herb__garden-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .ggw-herb__garden-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ggw-herb__split,
  .ggw-herb__knowledge,
  .ggw-herb__health,
  .ggw-herb__tip {
    grid-template-columns: 1fr;
  }

  .ggw-herb__knowledge-media,
  .ggw-herb__tip-media {
    order: -1;
  }

  .ggw-herb__split-media img,
  .ggw-herb__knowledge-media img,
  .ggw-herb__tip-media img {
    min-height: 260px;
    max-height: 420px;
  }
}

@media (max-width: 560px) {
  .ggw-herb__garden-grid,
  .ggw-herb__kitchen-grid,
  .ggw-herb__compare {
    grid-template-columns: 1fr;
  }

  .ggw-herb__section {
    margin-top: 30px;
  }

  .ggw-herb__section-head {
    text-align: left;
  }
}

/* ==========================================================================
   GGW – NATUR & GARTENLEBEN – TIERPORTRÄT GOLDSTANDARD
   Pilot: DER IGEL IM GARTEN
   Version 1.0.0 – 26.09.2026
   Namensraum: .ggw-nature
   Farben und Oberflächen ausschließlich über bestehende GDS-/Theme-Variablen.
   ========================================================================== */

.ggw-nature {
  width: min(1300px, calc(100vw - 48px));
  max-width: 100%;
  margin-inline: auto;
  color: var(--gds-content-card-text, var(--gds-color-text, inherit));
}

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

.ggw-nature img {
  display: block;
  max-width: 100%;
}

.ggw-nature p {
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   FULL-WIDTH HERO – bewusst identisch im Grundprinzip mit Fridas Gewürzen
   -------------------------------------------------------------------------- */

.ggw-nature__hero {
  position: relative;
  left: 50%;
  width: 100vw;
  width: 100dvw;
  min-height: clamp(330px, 25vw, 430px);
  margin: 0 0 clamp(28px, 4vw, 52px);
  margin-left: -50vw;
  margin-left: -50dvw;
  overflow: hidden;
  border-top: 1px solid var(--gds-content-card-border, transparent);
  border-bottom: 1px solid var(--gds-content-card-border, transparent);
  border-radius: 0;
  box-shadow: var(--gds-content-card-shadow, none);
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-nature__hero-media,
.ggw-nature__hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ggw-nature__hero-media img {
  object-fit: cover;
  object-position: center 56%;
}

.ggw-nature__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.66) 0%,
    rgba(0,0,0,.46) 35%,
    rgba(0,0,0,.13) 66%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
}

.ggw-nature__hero-content {
  position: relative;
  z-index: 1;
  width: min(650px, 58%);
  padding: clamp(34px, 4.5vw, 70px) clamp(28px, 5vw, 82px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.48);
}

.ggw-nature__eyebrow,
.ggw-nature__kicker {
  margin: 0 0 .5rem;
  color: var(--gds-color-primary, currentColor);
  font-size: clamp(.76rem, .88vw, .94rem);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ggw-nature__hero .ggw-nature__eyebrow {
  color: inherit;
}

.ggw-nature__title {
  margin: 0;
  color: inherit;
  font-size: clamp(2.8rem, 4.8vw, 4.6rem);
  line-height: .98;
}

.ggw-nature__flavour {
  margin: .7rem 0 .9rem;
  font-size: clamp(1.08rem, 1.5vw, 1.42rem);
  font-weight: 750;
}

.ggw-nature__intro {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   TYPOGRAFIE / GRUNDRHYTHMUS
   -------------------------------------------------------------------------- */

.ggw-nature__section {
  margin-top: clamp(34px, 5vw, 66px);
}

.ggw-nature__section-head {
  max-width: 900px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  text-align: center;
}

.ggw-nature__section-head > p:last-child {
  margin: 0;
  color: var(--gds-content-card-muted, var(--gds-color-text-muted, inherit));
}

.ggw-nature__section-title {
  margin: 0 0 1rem;
  color: var(--gds-color-primary, currentColor);
  font-size: clamp(1.7rem, 2.45vw, 2.35rem);
  line-height: 1.14;
}

.ggw-nature h3 {
  margin: 0 0 .65rem;
  color: var(--gds-color-primary, currentColor);
  font-size: clamp(1.08rem, 1.35vw, 1.3rem);
  line-height: 1.2;
}

.ggw-nature__note {
  margin: 1rem 0 0;
  padding: .9rem 1rem;
  border-left: 4px solid var(--gds-color-primary, currentColor);
  border-radius: 0 var(--gds-radius-md, .8rem) var(--gds-radius-md, .8rem) 0;
  background: var(--gds-content-card-background-soft, var(--gds-content-card-background, transparent));
  color: var(--gds-content-card-muted, var(--gds-color-text-muted, inherit));
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   GEMEINSAME KARTENOBERFLÄCHEN
   -------------------------------------------------------------------------- */

.ggw-nature__panel,
.ggw-nature__profile,
.ggw-nature__split,
.ggw-nature__knowledge,
.ggw-nature__help,
.ggw-nature__myths,
.ggw-nature__legal,
.ggw-nature__frida,
.ggw-nature__tip,
.ggw-nature__horst,
.ggw-nature__media-card,
.ggw-nature__notice {
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-large, 1.25rem);
  background: var(--gds-content-card-background, var(--gds-color-surface, transparent));
  box-shadow: var(--gds-content-card-shadow, none);
}

.ggw-nature__panel,
.ggw-nature__media-card,
.ggw-nature__profile,
.ggw-nature__split,
.ggw-nature__knowledge,
.ggw-nature__help,
.ggw-nature__frida,
.ggw-nature__horst {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   EINSTIEG – STORY + FRIDA
   -------------------------------------------------------------------------- */

.ggw-nature__opening-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}

.ggw-nature__panel {
  display: flex;
  flex-direction: column;
}

.ggw-nature__panel-media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-nature__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ggw-nature__panel-inner {
  flex: 1;
  padding: clamp(22px, 3vw, 34px);
}

.ggw-nature__panel-inner > p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   TIERSTECKBRIEF
   -------------------------------------------------------------------------- */

.ggw-nature__profile {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: stretch;
}

.ggw-nature__profile-content {
  padding: clamp(24px, 3.5vw, 42px);
}

.ggw-nature__facts {
  margin: 0;
}

.ggw-nature__fact {
  display: grid;
  grid-template-columns: minmax(150px, .78fr) minmax(0, 1.5fr);
  gap: 16px;
  padding: .62rem 0;
  border-bottom: 1px solid var(--gds-content-card-border, transparent);
}

.ggw-nature__fact:last-child {
  border-bottom: 0;
}

.ggw-nature__fact dt {
  font-weight: 800;
}

.ggw-nature__fact dd {
  margin: 0;
}

.ggw-nature__profile-media {
  min-height: 100%;
  margin: 0;
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-nature__profile-media img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   MEDIENKARTEN – 5 / 4 / 3
   -------------------------------------------------------------------------- */

.ggw-nature__five-grid,
.ggw-nature__four-grid,
.ggw-nature__danger-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.ggw-nature__five-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

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

.ggw-nature__media-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ggw-nature__media-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-nature__media-card-body {
  flex: 1;
  padding: clamp(16px, 2vw, 22px);
}

.ggw-nature__media-card-body p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   GROSSE BILD-/TEXTBLÖCKE
   -------------------------------------------------------------------------- */

.ggw-nature__split,
.ggw-nature__knowledge,
.ggw-nature__help,
.ggw-nature__frida,
.ggw-nature__horst {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  align-items: stretch;
}

.ggw-nature__split-media,
.ggw-nature__knowledge-media,
.ggw-nature__help-media,
.ggw-nature__frida-media,
.ggw-nature__horst-media {
  min-height: 390px;
  background: var(--gds-content-card-media-background, transparent);
}

.ggw-nature__split-media img,
.ggw-nature__knowledge-media img,
.ggw-nature__help-media img,
.ggw-nature__frida-media img,
.ggw-nature__horst-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ggw-nature__split-content,
.ggw-nature__knowledge-content,
.ggw-nature__help-content,
.ggw-nature__frida-content,
.ggw-nature__horst-content {
  padding: clamp(26px, 4vw, 48px);
}

.ggw-nature__knowledge {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.ggw-nature__knowledge-media {
  order: 2;
}

.ggw-nature__help {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.ggw-nature__frida {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.ggw-nature__horst {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

/* --------------------------------------------------------------------------
   LISTEN / WISSENSBAUSTEINE
   -------------------------------------------------------------------------- */

.ggw-nature__checklist {
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
}

.ggw-nature__checklist li {
  position: relative;
  margin: .5rem 0;
  padding-left: 1.65rem;
  line-height: 1.55;
}

.ggw-nature__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gds-color-primary, currentColor);
  font-weight: 900;
}

.ggw-nature__mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 1.2rem;
}

.ggw-nature__mini-grid > div,
.ggw-nature__fact-stack > div {
  padding: 1rem;
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-lg, 1rem);
  background: var(--gds-content-card-background-soft, var(--gds-content-card-background, transparent));
}

.ggw-nature__mini-grid strong,
.ggw-nature__mini-grid span {
  display: block;
}

.ggw-nature__mini-grid strong {
  margin-bottom: .3rem;
  color: var(--gds-color-primary, currentColor);
}

.ggw-nature__fact-stack {
  display: grid;
  gap: 14px;
  margin-top: 1.1rem;
}

.ggw-nature__fact-stack strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--gds-color-primary, currentColor);
  font-size: 1.05rem;
}

.ggw-nature__fact-stack p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   HINWEIS / ZITAT / MERKSATZ
   -------------------------------------------------------------------------- */

.ggw-nature__notice {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: clamp(18px, 2.5vw, 28px);
}

.ggw-nature__notice strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--gds-color-primary, currentColor);
  font-size: 1.08rem;
}

.ggw-nature__notice p {
  margin: 0;
}

.ggw-nature__quote {
  margin-top: 1.35rem;
  padding: clamp(18px, 2.5vw, 26px);
  border-left: 5px solid var(--gds-color-primary, currentColor);
  border-radius: 0 var(--gds-radius-lg, 1rem) var(--gds-radius-lg, 1rem) 0;
  background: var(--gds-content-card-background-soft, var(--gds-content-card-background, transparent));
}

.ggw-nature__quote strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--gds-color-primary, currentColor);
}

.ggw-nature__quote p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   TAGAKTIV / RECHT – ruhige Doppelkarten
   -------------------------------------------------------------------------- */

.ggw-nature__myths,
.ggw-nature__legal {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(24px, 3.5vw, 42px);
  align-items: center;
}

.ggw-nature__myths .ggw-nature__notice,
.ggw-nature__legal .ggw-nature__notice {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   GÜNNIS NATURTIPP – bewusst ohne Bild
   -------------------------------------------------------------------------- */

.ggw-nature__tip {
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}

.ggw-nature__tip .ggw-nature__quote {
  max-width: 760px;
  margin-inline: auto;
  margin-top: 1.4rem;
  text-align: left;
}

/* --------------------------------------------------------------------------
   HORST-TEASER
   -------------------------------------------------------------------------- */

.ggw-nature__next {
  margin-top: 1.4rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gds-content-card-border, transparent);
  border-radius: var(--gds-radius-lg, 1rem);
  background: var(--gds-content-card-background-soft, var(--gds-content-card-background, transparent));
}

.ggw-nature__next span,
.ggw-nature__next strong {
  display: block;
}

.ggw-nature__next span {
  margin-bottom: .25rem;
  color: var(--gds-content-card-muted, var(--gds-color-text-muted, inherit));
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ggw-nature__next strong {
  color: var(--gds-color-primary, currentColor);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

/* --------------------------------------------------------------------------
   ABSCHLUSS
   -------------------------------------------------------------------------- */

.ggw-nature__closing {
  margin-top: clamp(30px, 5vw, 60px);
  padding-bottom: clamp(12px, 2vw, 24px);
  text-align: center;
}

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ggw-nature__five-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  .ggw-nature {
    width: min(100%, calc(100vw - 36px));
  }

  .ggw-nature__hero-content {
    width: min(720px, 76%);
  }

  .ggw-nature__opening-grid,
  .ggw-nature__profile,
  .ggw-nature__split,
  .ggw-nature__knowledge,
  .ggw-nature__help,
  .ggw-nature__frida,
  .ggw-nature__horst,
  .ggw-nature__myths,
  .ggw-nature__legal {
    grid-template-columns: 1fr;
  }

  .ggw-nature__profile-media,
  .ggw-nature__knowledge-media {
    order: -1;
  }

  .ggw-nature__profile-media img,
  .ggw-nature__split-media,
  .ggw-nature__knowledge-media,
  .ggw-nature__help-media,
  .ggw-nature__frida-media,
  .ggw-nature__horst-media {
    min-height: 0;
  }

  .ggw-nature__profile-media img,
  .ggw-nature__split-media img,
  .ggw-nature__knowledge-media img,
  .ggw-nature__help-media img,
  .ggw-nature__frida-media img,
  .ggw-nature__horst-media img {
    aspect-ratio: 16 / 9;
  }

  .ggw-nature__myths .ggw-nature__notice,
  .ggw-nature__legal .ggw-nature__notice {
    margin-top: 0;
  }

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

/* --------------------------------------------------------------------------
   SMARTPHONE
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  .ggw-nature {
    width: min(100%, calc(100vw - 28px));
  }

  .ggw-nature__hero {
    min-height: 470px;
    margin-bottom: 28px;
  }

  .ggw-nature__hero-media img {
    object-position: 58% center;
  }

  .ggw-nature__hero::after {
    background: linear-gradient(
      0deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.52) 48%,
      rgba(0,0,0,.10) 100%
    );
  }

  .ggw-nature__hero-content {
    position: absolute;
    inset: auto 0 0;
    width: auto;
    padding: 30px 22px;
  }

  .ggw-nature__title {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
  }

  .ggw-nature__five-grid,
  .ggw-nature__four-grid,
  .ggw-nature__danger-grid,
  .ggw-nature__mini-grid {
    grid-template-columns: 1fr;
  }

  .ggw-nature__fact {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .ggw-nature__media-card > img {
    aspect-ratio: 16 / 10;
  }

  .ggw-nature__panel-inner,
  .ggw-nature__profile-content,
  .ggw-nature__split-content,
  .ggw-nature__knowledge-content,
  .ggw-nature__help-content,
  .ggw-nature__frida-content,
  .ggw-nature__horst-content,
  .ggw-nature__myths,
  .ggw-nature__legal,
  .ggw-nature__tip {
    padding: 22px;
  }

  .ggw-nature__section-head {
    text-align: left;
  }
}


/* ==========================================================================
   GGW – GARTENGESCHICHTEN – BEITRAGSGOLDSTANDARD
   Pilot: GÜNNI UND DIE GEHEIMNISVOLLE SAATGUTKISTE
   Version 1.0.0 – 03.10.2026
   Namensraum: .ggw-story
   Erzählerischer Beitragstyp mit großzügigen Bild-/Text-Kapiteln.
   Farben und Oberflächen ausschließlich über bestehende GDS-/Theme-Variablen.
   ========================================================================== */

.ggw-story {
    width: min(1300px, calc(100vw - 48px));
    max-width: 100%;
    margin-inline: auto;
    color: var(--gds-text-primary, var(--text, inherit));
}

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

.ggw-story img {
    display: block;
    max-width: 100%;
}

.ggw-story p {
    line-height: 1.75;
}

/* Story-Kopf – bewusst ohne zweites Hero-Bild, damit Kategorie-Hero und
   Beitragsinhalt nicht gegeneinander arbeiten. */
.ggw-story__hero {
    margin: clamp(22px, 3vw, 40px) 0 0;
    padding: clamp(28px, 4vw, 52px);
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 22px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.ggw-story__hero-inner {
    max-width: 900px;
}

.ggw-story__eyebrow,
.ggw-story__kicker {
    margin: 0 0 .55rem;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: clamp(.78rem, .9vw, .94rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ggw-story__title {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.08;
}

.ggw-story__lead {
    max-width: 72ch;
    margin: 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: clamp(1.05rem, 1.5vw, 1.24rem);
}

.ggw-story__opening {
    max-width: 82ch;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 54px) clamp(4px, 1vw, 12px);
    font-size: clamp(1.02rem, 1.2vw, 1.12rem);
}

.ggw-story__opening > :last-child,
.ggw-story__copy > :last-child,
.ggw-story__feature-copy > :last-child {
    margin-bottom: 0;
}

/* Joomla Readmore darf den visuellen Rhythmus nicht beeinflussen. */
.ggw-story #system-readmore {
    margin: 0;
    border: 0;
}

/* Kapitel */
.ggw-story__chapter,
.ggw-story__feature {
    display: grid;
    grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
    margin: 0 0 clamp(34px, 5vw, 68px);
    padding: clamp(24px, 3vw, 38px);
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 22px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.ggw-story__chapter--media-right {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
}

.ggw-story__chapter--media-right .ggw-story__media {
    grid-column: 2;
    grid-row: 1;
}

.ggw-story__chapter--media-right .ggw-story__copy {
    grid-column: 1;
    grid-row: 1;
}

.ggw-story__chapter--wide {
    display: block;
}

.ggw-story__copy--narrow {
    max-width: 82ch;
    margin-inline: auto;
}

.ggw-story__media,
.ggw-story__feature-media {
    min-width: 0;
    margin: 0;
}

.ggw-story__media .gds-article__zoom,
.ggw-story__feature-media .gds-article__zoom {
    border-radius: 18px;
}

.ggw-story__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .25s ease;
}

.ggw-story__chapter--portrait .ggw-story__image {
    aspect-ratio: 4 / 5;
    object-position: center;
}

.ggw-story__caption {
    margin: 10px 2px 0;
    color: var(--gds-text-secondary, var(--muted, inherit));
    font-size: .9rem;
    line-height: 1.5;
}

.ggw-story__copy {
    min-width: 0;
}

.ggw-story__chapter-title {
    margin: 0 0 18px;
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    line-height: 1.2;
}

/* Günnis Gedanken / Pointen – kein sachlicher Infokasten */
.ggw-story__thought {
    position: relative;
    margin: clamp(20px, 2.5vw, 28px) 0;
    padding: 18px 20px 18px 24px;
    background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-left: 5px solid var(--gds-link, var(--accent-dark, currentColor));
    border-radius: 0 16px 16px 0;
    box-shadow: none;
}

.ggw-story__thought p {
    margin: 0;
    font-size: clamp(1.02rem, 1.25vw, 1.14rem);
}

.ggw-story__thought--punchline {
    transform: rotate(-.25deg);
}

.ggw-story__thought--large {
    max-width: 720px;
    margin-inline: auto;
    padding: clamp(20px, 3vw, 28px);
    text-align: center;
    border-left-width: 1px;
    border-radius: 18px;
}

.ggw-story__thought--large p {
    font-size: clamp(1.18rem, 2vw, 1.5rem);
}

/* Großes atmosphärisches Hochformat */
.ggw-story__feature {
    grid-template-columns: minmax(300px, 45%) minmax(0, 1fr);
    align-items: center;
}

.ggw-story__feature-image {
    width: 100%;
    max-height: 760px;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    object-position: center;
    transition: transform .25s ease;
}

/* Lightbox-Hover auch für Story-eigene Bilder */
.ggw-story .gds-article__zoom:hover .ggw-story__image,
.ggw-story .gds-article__zoom:focus-visible .ggw-story__image,
.ggw-story .gds-article__zoom:hover .ggw-story__feature-image,
.ggw-story .gds-article__zoom:focus-visible .ggw-story__feature-image {
    transform: scale(1.025);
}

/* Fortsetzung */
.ggw-story__continuation {
    max-width: 920px;
    margin: clamp(10px, 2vw, 24px) auto 0;
    padding: clamp(26px, 4vw, 42px);
    text-align: center;
    background: var(--gds-info-tone-1, var(--gds-surface-card, var(--card, transparent)));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 22px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.ggw-story__continuation-label {
    margin: 0 0 8px;
    color: var(--gds-link, var(--accent-dark, currentColor));
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ggw-story__continuation h2 {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
}

.ggw-story__continuation p:last-child {
    max-width: 68ch;
    margin: 0 auto;
}

.ggw-story__closing {
    margin-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(20px, 3vw, 36px);
}

/* Tablet */
@media (max-width: 900px) {
    .ggw-story__chapter,
    .ggw-story__chapter--media-right,
    .ggw-story__feature {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ggw-story__chapter--media-right .ggw-story__media,
    .ggw-story__chapter--media-right .ggw-story__copy {
        grid-column: 1;
    }

    .ggw-story__chapter--media-right .ggw-story__media {
        grid-row: 1;
    }

    .ggw-story__chapter--media-right .ggw-story__copy {
        grid-row: 2;
    }

    .ggw-story__image {
        aspect-ratio: 16 / 10;
    }

    .ggw-story__chapter--portrait .ggw-story__image,
    .ggw-story__feature-image {
        width: min(100%, 620px);
        max-height: 680px;
        margin-inline: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .ggw-story {
        width: min(100%, calc(100vw - 28px));
    }

    .ggw-story__hero {
        margin-top: 14px;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .ggw-story__opening {
        padding: 28px 4px;
    }

    .ggw-story__chapter,
    .ggw-story__feature {
        margin-bottom: 28px;
        padding: 18px;
        border-radius: 18px;
    }

    .ggw-story__chapter-title {
        margin-bottom: 14px;
    }

    .ggw-story__image {
        aspect-ratio: auto;
        height: auto;
        object-fit: contain;
    }

    .ggw-story__thought {
        margin: 18px 0;
        padding: 15px 16px 15px 18px;
    }

    .ggw-story__continuation {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .ggw-story__closing .gds-button {
        width: 100%;
    }
}

/* ==========================================================================
   GGW – GARTENGESCHICHTEN – V1.1 ERGÄNZUNGEN
   03.10.2026
   - Einleitung als eigener Container
   - Keimprobe / Platzbilanz
   ========================================================================== */

.ggw-story__opening-card {
    margin: clamp(28px, 4vw, 48px) 0 clamp(34px, 5vw, 60px);
    padding: clamp(24px, 3vw, 38px);
    background: var(--gds-surface-card, var(--card, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 22px;
    box-shadow: var(--gds-shadow-card, var(--shadow-soft, none));
}

.ggw-story__opening-card .ggw-story__opening {
    max-width: 82ch;
    margin: 0 auto;
    padding: 0;
}

.ggw-story__space-check {
    margin: clamp(18px, 2.5vw, 26px) 0;
    padding: 16px 20px;
    background: var(--gds-info-tone-1, var(--gds-surface-muted, transparent));
    border: 1px solid var(--gds-border-soft, var(--border-card, transparent));
    border-radius: 16px;
}

.ggw-story__space-check p {
    margin: 0;
}

.ggw-story__space-check p + p {
    margin-top: 6px;
}

@media (max-width: 600px) {
    .ggw-story__opening-card {
        margin: 22px 0 28px;
        padding: 20px 18px;
        border-radius: 18px;
    }

    .ggw-story__space-check {
        padding: 14px 16px;
    }
}


/* ========================================================================
   GGW Fridas Gartenküche – Rezeptbeitrag V1.0 · 03.10.2026
   Referenz: Gedeckter Apfelkuchen. Ausschließlich .ggw-recipe.
   Eigene saisonunabhängige Papier-/Food-Palette gemäß Freigabe.
======================================================================== */
.ggw-recipe {
  --recipe-paper: #f4efdf;
  --recipe-card: #fffbef;
  --recipe-green: #283b26;
  --recipe-rust: #963523;
  --recipe-border: #ded4b9;
  --recipe-tip: #e5e9d6;
  width: min(1300px, 100%);
  margin: 24px auto;
  padding: clamp(18px, 3vw, 44px);
  background: var(--recipe-paper);
  color: var(--recipe-green);
  border-radius: 24px;
  font-size: 1.05rem;
  line-height: 1.7;
}
.ggw-recipe *, .ggw-recipe *::before, .ggw-recipe *::after { box-sizing: border-box; }
.ggw-recipe h1, .ggw-recipe h2, .ggw-recipe h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--recipe-green); line-height: 1.2; }
.ggw-recipe h1 { color: var(--recipe-rust); font-size: clamp(2rem, 4vw, 3.4rem); margin: 12px 0; }
.ggw-recipe h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0 0 16px; }
.ggw-recipe h3 { font-size: 1.25rem; margin: 0 0 10px; }
.ggw-recipe p { margin: 0 0 16px; }
.ggw-recipe img { display: block; width: 100%; max-width: 100%; height: auto; }
.ggw-recipe figure { margin: 0; min-width: 0; }
.ggw-recipe__header { text-align: center; padding: 12px 0 28px; }
.ggw-recipe__eyebrow, .ggw-recipe__kicker { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.ggw-recipe__kicker { color: var(--recipe-rust); }
.ggw-recipe__lead { font-family: Georgia, serif; font-size: 1.35rem; font-style: italic; }
.ggw-recipe__opening { padding: clamp(20px, 3vw, 28px); border-radius: 18px; background: var(--recipe-card); border: 1px solid var(--recipe-border); margin-bottom: 28px; }
.ggw-recipe__opening p:last-child, .ggw-recipe__tip p:last-child, .ggw-recipe__step-copy p:last-child { margin-bottom: 0; }
.ggw-recipe #system-readmore { margin: 0; border: 0; height: 0; }
.ggw-recipe__intro, .ggw-recipe__chapter-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ggw-recipe__main-image, .ggw-recipe__chapter-image { border-radius: 18px; }
.ggw-recipe__caption { font-size: .9rem; margin-top: 10px; }
.ggw-recipe__ingredients { padding: clamp(20px, 2.5vw, 30px); background: var(--recipe-card); border: 1px solid var(--recipe-border); border-radius: 18px; }
.ggw-recipe__ingredients ul { margin: 0 0 20px; padding-left: 22px; }
.ggw-recipe__ingredients li { padding: 2px 0; }
.ggw-recipe__chapter { margin-top: 42px; }
.ggw-recipe__chapter-head { align-items: center; margin-bottom: 24px; }
.ggw-recipe__chapter-head--image-left .ggw-recipe__chapter-media { order: -1; }
.ggw-recipe__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 0; margin: 0; list-style: none; }
.ggw-recipe__step { background: var(--recipe-card); border: 1px solid var(--recipe-border); border-radius: 18px; overflow: hidden; }
.ggw-recipe__step-copy { padding: 20px 22px 24px; }
.ggw-recipe__step h3 { display: flex; align-items: baseline; gap: 10px; }
.ggw-recipe__number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--recipe-green); color: var(--recipe-card); font-family: Georgia, serif; }
.ggw-recipe__tip { margin-top: 22px; padding: 22px 26px; border-left: 4px solid #677952; background: var(--recipe-tip); border-radius: 0 18px 18px 0; }
.ggw-recipe__finish { margin-top: 42px; border: 1px solid var(--recipe-border); border-radius: 22px; overflow: hidden; background: var(--recipe-card); }
.ggw-recipe__finish-copy { padding: clamp(24px, 3vw, 36px); }
.ggw-recipe__quote { padding: 18px 22px; margin: 20px 0 0; border-left: 4px solid var(--recipe-rust); background: var(--recipe-tip); color: var(--recipe-green); font-family: Georgia, serif; }
.ggw-recipe__quote p:last-child { margin: 0; }
.ggw-recipe__download { margin-top: 30px; padding: 24px; border-radius: 18px; background: var(--recipe-tip); }
.ggw-recipe__footer { margin-top: 30px; }
.ggw-recipe .ggw-recipe__button { display: inline-block; background: var(--recipe-green); color: var(--recipe-card); padding: 13px 22px; border: 1px solid var(--recipe-green); border-radius: 10px; text-decoration: none; font-weight: 700; }
.ggw-recipe .ggw-recipe__button:hover { background: #40583a; color: var(--recipe-card); }
.ggw-recipe .ggw-recipe__button:focus-visible { outline: 3px solid var(--recipe-rust); outline-offset: 4px; }
@media (max-width: 900px) {
 .ggw-recipe__intro, .ggw-recipe__chapter-head { grid-template-columns: 1fr; }
 .ggw-recipe__chapter-head .ggw-recipe__chapter-media { order: -1; }
}
@media (max-width: 600px) {
 .ggw-recipe { margin: 16px auto; border-radius: 16px; padding: 16px; }
 .ggw-recipe__steps { grid-template-columns: 1fr; }
 .ggw-recipe__chapter { margin-top: 30px; }
 .ggw-recipe__step-copy, .ggw-recipe__tip { padding: 18px; }
 .ggw-recipe .ggw-recipe__button { display: block; text-align: center; }
}


/* ========================================================================
   GGW BÜCHERWELT – BUCHCOVER IM KRÄUTERKARTENRASTER
   Version 1.7 · 18.10.2026 · GDS Base 1.2.26

   Bestehendes GGW 3/2/1-Kartenraster bleibt erhalten.
   Der flache 16:9-Medienrahmen entspricht den übrigen Kategorie-Karten.
   Das komplette Originalcover wird proportional, mittig und ohne Beschnitt
   auf einem ruhigen GDS-Theme-Hintergrund gezeigt.
   Ausschließlich auf der Bücherwelt-Seitenklasse aktiv.
======================================================================== */

:is(.ggw-buecherwelt .ggw-category, .ggw-category.ggw-buecherwelt) .ggw-category-card .gds-content-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 12px;
    overflow: hidden;
    background: var(--gds-surface-card, var(--card, transparent));
}

:is(.ggw-buecherwelt .ggw-category, .ggw-category.ggw-buecherwelt) .ggw-category-card .gds-content-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
}

:is(.ggw-buecherwelt .ggw-category, .ggw-category.ggw-buecherwelt) .ggw-category-card:hover .gds-content-card__image,
:is(.ggw-buecherwelt .ggw-category, .ggw-category.ggw-buecherwelt) .ggw-category-card:focus-within .gds-content-card__image {
    transform: none;
}