/* =========================================================================
   DigiKom e.V. – style.css
   Fundament: Markenfarben, Typografie, Buttons, Header/Footer, Layout.
   Zielgruppe: ältere, digital unerfahrene Menschen.
   -> große Schrift, hoher Kontrast, große Klickflächen, klare Fokus-Zustände.
   ========================================================================= */

/* ----------------------------------------------------------------- Tokens */
:root {
    /* Markenfarben (exakt aus dem Logo) */
    --blau:            #055BC3;
    --tuerkis:         #40AE6F;
    --gruen:           #86C21B;

    --text-dunkel:     #1A3A5A; /* Überschriften */
    --text:            #4D4D4D; /* Fließtext */
    --text-sekundaer:  #666666;

    --flaeche-hell:    #F5F8FB;
    --weiss:           #FFFFFF;
    --rahmen:          #DCE6F0;

    /* dunklere Varianten für Hover/Kontrast */
    --blau-dunkel:     #044a9e;
    --gruen-dunkel:    #5d9111;
    --teal-text:       #1f7a4e; /* barrierefreies Türkis-Grün für Text auf Weiß */

    /* Marken-Verlauf (ca. 135°) */
    --verlauf: linear-gradient(135deg, #055BC3 0%, #40AE6F 55%, #86C21B 100%);

    /* Typografie */
    --schrift: "Segoe UI", "Source Sans 3", "Open Sans", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
    --basis-groesse: 1.1875rem; /* 19px bei 16px-Root */
    --zeilenhoehe: 1.65;

    /* Abstände */
    --breite-max: 75rem;     /* 1200px Container */
    --abstand-s: 0.5rem;
    --abstand-m: 1rem;
    --abstand-l: 2rem;
    --abstand-xl: 4rem;

    /* Radien & Schatten */
    --radius: 14px;
    --radius-pill: 999px;
    --schatten: 0 6px 24px rgba(5, 91, 195, 0.10);
    --schatten-stark: 0 10px 30px rgba(5, 91, 195, 0.16);

    /* Mindest-Klickfläche */
    --klick-min: 48px;
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: var(--basis-groesse);
    line-height: var(--zeilenhoehe);
    color: var(--text);
    background: var(--weiss);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
    color: var(--text-dunkel);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p { margin: 0 0 1em; }

a { color: var(--blau); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--blau-dunkel); }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }

/* Akzentwort in Überschriften (z. B. "digital" grün) */
.akzent-gruen { color: var(--gruen-dunkel); }

/* --------------------------------------------------- Fokus & Skip-Link */
:focus-visible {
    outline: 3px solid var(--blau);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--weiss);
    color: var(--blau);
    padding: 0.75rem 1.25rem;
    border: 3px solid var(--blau);
    border-radius: 0 0 var(--radius) 0;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

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

.abschnitt { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.abschnitt--hell { background: var(--flaeche-hell); }

.abschnitt__kopf { text-align: center; max-width: 48rem; margin: 0 auto 2.5rem; }
.abschnitt__kopf p { color: var(--text-sekundaer); font-size: 1.15rem; }

/* ---------------------------------------------------------------- Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--klick-min);
    padding: 0.75rem 1.6rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primaer {
    background-image: var(--verlauf);
    color: var(--weiss);
    box-shadow: var(--schatten);
}
.btn--primaer:hover { color: var(--weiss); box-shadow: var(--schatten-stark); }

.btn--sekundaer {
    background: var(--weiss);
    color: var(--blau);
    border: 2px solid var(--blau);
}
.btn--sekundaer:hover { background: var(--flaeche-hell); color: var(--blau-dunkel); }

/* Heller Sekundärbutton auf farbigem Hintergrund (z. B. im Hero/Banner) */
.btn--auf-verlauf {
    background: var(--weiss);
    color: var(--blau);
    border: 2px solid var(--weiss);
}
.btn--auf-verlauf:hover { background: rgba(255, 255, 255, 0.9); }

.btn--gross { font-size: 1.1rem; padding: 0.95rem 2rem; }

/* ----------------------------------------------------------------- Header */
.kopf {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--weiss);
    border-bottom: 1px solid var(--rahmen);
}
.kopf__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}
.kopf__logo { flex: 0 0 auto; text-decoration: none; }

/* Marken-Lockup: Icon + Schriftzug „DigiKom e.V." + Slogan */
.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.marke__icon { width: auto; height: 46px; flex: 0 0 auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1.1; }
.marke__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blau);
    letter-spacing: -0.01em;
}
.marke__ev { color: var(--text-sekundaer); font-weight: 600; font-size: 0.9rem; }
.marke__slogan { font-size: 0.74rem; color: var(--text-sekundaer); font-weight: 600; }

/* Footer-Variante (etwas größer) */
.marke--fuss .marke__icon { height: 60px; }
.marke--fuss .marke__name { color: var(--text-dunkel); }

/* Navigation (Desktop) */
.nav__liste {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--klick-min);
    padding: 0.5rem 0.7rem;
    color: var(--text-dunkel);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 8px;
}
.nav__link:hover { background: var(--flaeche-hell); color: var(--blau); }
.nav__link--aktiv { color: var(--blau); }
.nav__link--aktiv::after {
    content: "";
    display: block;
}
.nav__item--cta { margin-left: 0.5rem; }
.nav__mitmachen { padding-inline: 1.5rem; }

/* Burger-Button (nur mobil sichtbar) */
.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: var(--klick-min);
    min-height: var(--klick-min);
    padding: 0.5rem;
    background: var(--weiss);
    border: 2px solid var(--rahmen);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-dunkel);
}
.nav-toggle__balken {
    display: block;
    width: 26px;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
}
.nav-toggle__text { font-size: 0.7rem; font-weight: 700; }

/* ----------------------------------------------------------------- Footer */
.fuss {
    margin-top: auto;
    background: var(--flaeche-hell);
    border-top: 4px solid transparent;
    border-image: var(--verlauf) 1;
    color: var(--text);
}
.fuss__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 2rem;
    padding-block: 3rem;
}
.fuss__logo { height: 56px; width: auto; }
.fuss__slogan { color: var(--text-sekundaer); margin-top: 0.75rem; }
.fuss__titel { font-size: 1.1rem; color: var(--text-dunkel); margin-bottom: 0.75rem; }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: 0.4rem; }
.fuss__liste a {
    display: inline-block;
    padding: 0.35rem 0;
    color: var(--text);
    text-decoration: none;
}
.fuss__liste a:hover { color: var(--blau); text-decoration: underline; }
.fuss__adresse { font-style: normal; line-height: 1.9; }
.fuss__adresse a { color: var(--blau); }
.fuss__qr { margin-top: 1rem; }
.fuss__qr-platzhalter {
    display: inline-grid;
    place-items: center;
    width: 96px;
    height: 96px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-sekundaer);
    background: var(--weiss);
    border: 2px dashed var(--rahmen);
    border-radius: 10px;
}
.fuss__copyright {
    background: var(--text-dunkel);
    color: #cfe0f0;
    text-align: center;
    padding-block: 1rem;
    font-size: 0.95rem;
}
.fuss__copyright p { margin: 0; }
.fuss__credit { display: inline-block; opacity: 0.85; }

/* ---------------------------------------------------------- Hilfsklassen */
.visuell-versteckt {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ============================================================ Responsive */
/* Mobile: Navigation einklappen, Burger zeigen.
   Seit dem Menüpunkt „Preise" sind es 7 Punkte + Mitmachen-Button. Die Grenze
   liegt deshalb bei 72rem (vorher 68rem) – darunter passt die Zeile nicht mehr
   nebeneinander. Zwischen 72rem und 80rem rücken die Punkte enger zusammen
   (Regel direkt darunter). */
@media (max-width: 71.99rem) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--weiss);
        border-bottom: 1px solid var(--rahmen);
        box-shadow: var(--schatten);
        /* Ohne JS sichtbar (Progressive Enhancement); mit JS standardmäßig zu. */
    }
    body.js .nav { display: none; }
    body.js .nav.nav--offen { display: block; }

    .nav__liste {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1.25rem 1rem;
    }
    .nav__item { border-bottom: 1px solid var(--rahmen); }
    .nav__item--cta { border-bottom: 0; margin: 0.75rem 0 0; }
    .nav__link {
        min-height: 52px;
        padding: 0.75rem 0.5rem;
        font-size: 1.1rem;
    }
    .nav__mitmachen { width: 100%; }
}

/* Schmaler Desktop: Navigation kompakter, damit 7 Punkte + Button sicher in
   eine Zeile passen, ohne dass der Kopf umbricht. */
@media (min-width: 72rem) and (max-width: 80rem) {
    .nav__liste { gap: 0; }
    .nav__link { padding-inline: 0.45rem; }
    .nav__mitmachen { padding-inline: 1.1rem; }
}

@media (max-width: 48rem) {
    .fuss__inner { grid-template-columns: 1fr 1fr; }
    .fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
    .fuss__inner { grid-template-columns: 1fr; }
}

/* Marken-Lockup auf sehr schmalen Screens kompakter */
@media (max-width: 26rem) {
    .marke__slogan { display: none; }
    .marke__name { font-size: 1.3rem; }
    .marke__icon { height: 44px; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

/* =====================================================================
   STARTSEITE (und wiederverwendete Bausteine)
   ===================================================================== */

/* ------------------------------------------------------------- Icons */
.icon { display: block; width: 28px; height: 28px; }

/* --------------------------------------------------------------- Hero */
.hero {
    position: relative;
    background: var(--weiss);
    overflow: hidden;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__kicker {
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--teal-text);
}
.hero h1 { margin-bottom: 0.6rem; } /* erbt dunkles Markenblau */
.hero__text {
    font-size: 1.2rem;
    max-width: 34rem;
    color: var(--text);
    margin-bottom: 1.75rem;
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Medien-Bereich rechts: Foto + Deko-Kreise + schwebende Badges */
.hero__medien { position: relative; }
.hero__kreis { position: absolute; border-radius: 50%; z-index: 0; }
.hero__kreis--blau {
    width: clamp(140px, 22vw, 200px);
    aspect-ratio: 1;
    height: auto;
    background: var(--blau);
    top: -26px;
    right: 24px;
}
.hero__kreis--teal {
    width: clamp(110px, 17vw, 160px);
    aspect-ratio: 1;
    height: auto;
    background: var(--tuerkis);
    bottom: -22px;
    right: -8px;
    opacity: 0.92;
}
.hero__bild {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--schatten-stark);
    background: var(--weiss);
    aspect-ratio: 4 / 3;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__badge {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--weiss);
    box-shadow: var(--schatten);
}
.hero__badge .icon { width: 28px; height: 28px; }
.hero__badge--chat    { top: 6px;  left: -16px; background: var(--blau); color: #fff; }
.hero__badge--schloss { top: 28px; right: -12px; color: var(--gruen-dunkel); }
.hero__badge--wlan    { bottom: 30px; left: -12px; color: var(--tuerkis); }

/* Allgemeine Button-Gruppe */
.button-gruppe { display: flex; flex-wrap: wrap; gap: 1rem; }
.button-gruppe--zentriert { justify-content: center; }

/* ------------------------------------------------------ Angebots-Kacheln */
/* Wie in der Vorlage: alle sechs Kacheln in einer Reihe (responsiv brechend). */
.kachel-gitter {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}
.kachel {
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    box-shadow: var(--schatten);
    text-align: center;
    height: 100%;
}
.kachel__icon {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 0.9rem;
    color: var(--blau);
    background: var(--flaeche-hell);
    border-radius: 50%;
}
.kachel__icon .icon { width: 28px; height: 28px; }
.kachel h3 { margin-bottom: 0.4rem; font-size: 1.05rem; }
.kachel p { color: var(--text-sekundaer); margin: 0; font-size: 0.95rem; }

/* --------------------------------------------------------- Verlauf-Banner */
.banner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 2rem;
    background-image: var(--verlauf);
    color: var(--weiss);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, 3.5rem);
    box-shadow: var(--schatten);
    overflow: hidden;
}
.banner h2 { color: var(--weiss); }
.banner p { font-size: 1.2rem; color: #f2f8ff; max-width: 40rem; }
.banner__text .btn { margin-top: 0.5rem; }
.banner__deko { width: 100%; max-width: 540px; height: auto; justify-self: end; }

/* ------------------------------------------------------------- Standorte */
.standort-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.standort-karte {
    display: flex;
    flex-direction: column;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.standort-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-stark); }
.standort-karte__bild {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: var(--flaeche-hell);
}
.standort-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.standort-karte__pin {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--blau);
    color: #fff;
    box-shadow: var(--schatten);
}
.standort-karte__pin .icon { width: 22px; height: 22px; }
.standort-karte__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}
.standort-karte__titel { display: block; color: var(--text-dunkel); font-size: 1.25rem; font-weight: 700; margin: 0 0 0.25rem; }
.standort-karte__adresse { display: block; color: var(--text-sekundaer); font-style: normal; }
.standort-karte__pfeil { color: var(--blau); flex: 0 0 auto; }

/* --------------------------------------------------------- Termin-Karten */
.termin-gitter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.termin-karte {
    display: flex;
    flex-direction: column;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-left: 6px solid var(--tuerkis);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--schatten);
    height: 100%;
}
.termin-karte__kategorie {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blau);
    background: var(--flaeche-hell);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    margin-bottom: 0.75rem;
}
.termin-karte h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.termin-karte__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dunkel);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.termin-karte__meta .icon { width: 20px; height: 20px; color: var(--tuerkis); flex: 0 0 auto; }
.termin-karte__beschreibung { color: var(--text-sekundaer); margin-top: 0.5rem; }
.termin-karte__plaetze { margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: var(--gruen-dunkel); }

/* --------------------------------------------- Promo (Aktuelles-Block) - */
.promo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.promo__bild { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 5 / 4; }
.promo__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Inhaltsbilder (Über uns, Unser Angebot) */
.inhalt-bild {
    margin: 2rem auto 0;
    max-width: 60rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
}
.inhalt-bild img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.promo__text {
    background: var(--flaeche-hell);
    border: 1px solid var(--rahmen);
    border-radius: 20px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.promo__text h2 { margin-top: 0; }
.promo__text p { color: var(--text-sekundaer); font-size: 1.15rem; }
.aktuelles__titel { text-align: center; margin: 2.75rem 0 1.5rem; }

/* ----------------------------------------------- Aktuelles / Beiträge --- */
.beitrag-liste { display: grid; gap: 1.5rem; max-width: 52rem; }
.beitrag-karte {
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-left: 6px solid var(--gruen);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--schatten);
}
.beitrag-karte__datum { display: flex; align-items: center; gap: 0.4rem; color: var(--text-sekundaer); font-weight: 600; margin: 0 0 0.4rem; }
.beitrag-karte__datum .icon { width: 20px; height: 20px; color: var(--tuerkis); }
.beitrag-karte__titel { margin: 0 0 0.5rem; font-size: 1.4rem; }
.beitrag-karte__titel a { color: var(--text-dunkel); text-decoration: none; }
.beitrag-karte__titel a:hover { color: var(--blau); }
.beitrag-karte__teaser { color: var(--text-sekundaer); margin: 0 0 0.75rem; }
.beitrag-karte__mehr { font-weight: 700; text-decoration: none; }
.beitrag-inhalt { font-size: 1.15rem; line-height: 1.7; }

/* ----------------------------------------------- Mitgliedschaft & Beiträge */
.mitglied-info {
    background: var(--flaeche-hell);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: 2rem;
}
.mitglied-info__titel { text-align: center; margin-top: 0; }
.mitglied-info__text {
    text-align: center;
    font-size: 1.15rem;
    max-width: 48rem;
    margin: 0 auto 1.5rem;
}
.mitglied-karten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 46rem;
    margin-inline: auto;
}
.mitglied-karte {
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-top: 4px solid var(--gruen);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--schatten);
    text-align: center;
}
.mitglied-karte__icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--flaeche-hell);
    color: var(--blau);
    margin-bottom: 0.5rem;
}
.mitglied-karte__titel { font-size: 1.15rem; margin: 0.25rem 0 0.5rem; }
.mitglied-karte__preis { font-size: 1.9rem; font-weight: 800; color: var(--text-dunkel); margin: 0; }
.mitglied-karte__zeitraum { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-sekundaer); }

@media (max-width: 36rem) {
    .mitglied-karten { grid-template-columns: 1fr; }
}

/* ----------------------------------------------- Angebote im Detail (Preise) */
.angebot-detail {
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--schatten);
    margin-bottom: 2rem;
    max-width: 60rem;
}
.angebot-detail h2 { margin-top: 0; }
.angebot-detail__sub { font-weight: 700; color: var(--text-dunkel); margin: 1.25rem 0 0.5rem; }
.angebot-detail__themen {
    columns: 2;
    column-gap: 2rem;
    margin: 0 0 0.5rem;
    padding-left: 1.2em;
}
.angebot-detail__themen li { margin-bottom: 0.35rem; break-inside: avoid; }
.angebot-detail__umfang { font-weight: 600; color: var(--text-dunkel); }
.angebot-detail__abschluss { font-style: italic; color: var(--text-sekundaer); margin-bottom: 0; }

.preis-box {
    background: var(--flaeche-hell);
    border: 1px solid var(--rahmen);
    border-left: 6px solid var(--gruen);
    border-radius: 10px;
    padding: 1.1rem 1.4rem;
    margin: 1.25rem 0;
}
.preis-box__titel { display: block; font-weight: 800; color: var(--text-dunkel); margin-bottom: 0.4rem; }
.preis-liste { list-style: none; margin: 0; padding: 0; }
.preis-liste li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--rahmen);
}
.preis-liste li:last-child { border-bottom: 0; }
.preis-liste b { color: var(--blau); font-size: 1.1rem; white-space: nowrap; }

@media (max-width: 40rem) {
    .angebot-detail__themen { columns: 1; }
}

/* ------------------------------------------------------------- CTA-Leiste */
.cta-leiste {
    background-image: var(--verlauf);
    color: var(--weiss);
}
.cta-leiste h2 { color: var(--weiss); text-align: center; }
.cta-punkte {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.cta-punkt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
    color: var(--weiss);
    text-decoration: none;
    font-weight: 700;
    transition: background 0.15s ease;
}
.cta-punkt:hover { background: rgba(255, 255, 255, 0.22); color: var(--weiss); }
.cta-punkt .icon { width: 34px; height: 34px; }

/* zentrierte Aktionszeile unter Abschnitten */
.abschnitt__aktion { text-align: center; margin-top: 2.5rem; }

/* ============================ Responsive (Startseiten-Bausteine) ======= */
@media (max-width: 75rem) {
    .kachel-gitter { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 60rem) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__medien { order: -1; max-width: 34rem; margin-inline: auto; }
    .banner { grid-template-columns: 1fr; }
    .banner__deko { display: none; }
    .promo { grid-template-columns: 1fr; }
    .promo__bild { order: -1; max-width: 34rem; margin-inline: auto; }
    .termin-gitter { grid-template-columns: 1fr; }
    .cta-punkte { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
    .kachel-gitter { grid-template-columns: 1fr 1fr; }
    .standort-gitter { grid-template-columns: 1fr; }
    .cta-punkte { grid-template-columns: 1fr; }
    .hero__buttons .btn, .button-gruppe .btn { width: 100%; }
}
@media (max-width: 26rem) {
    .kachel-gitter { grid-template-columns: 1fr; }
}

/* =====================================================================
   INHALTSSEITEN (Unterseiten, Impressum, Datenschutz, Danke …)
   ===================================================================== */

/* Kleiner Seitenkopf mit Marken-Verlauf */
.seiten-hero {
    background-image: var(--verlauf);
    color: var(--weiss);
    padding-block: clamp(2rem, 5vw, 3.5rem);
}
.seiten-hero h1 { color: var(--weiss); margin-bottom: 0.4rem; }
.seiten-hero p { color: #f2f8ff; font-size: 1.2rem; max-width: 46rem; margin: 0; }

/* Lesefreundlicher Textbereich */
.prosa { max-width: 52rem; }
.prosa--mittig { margin-inline: auto; }
.prosa h2 { margin-top: 2rem; }
.prosa h3 { margin-top: 1.5rem; }
.prosa ul { padding-left: 1.4em; }
.prosa li { margin-bottom: 0.4rem; }

/* Personen-Vorstellung (Über uns) – Foto rechts, Text umfließend */
.person-bio::after { content: ""; display: table; clear: both; }
.person__bild {
    float: right;
    width: min(300px, 100%);
    margin: 0.25rem 0 1rem 2rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
    background: var(--flaeche-hell);
}
.person__bild img { display: block; width: 100%; height: auto; }
.person__name { margin-top: 0; }
.person__claim { margin-top: 0.25rem; font-weight: 600; color: var(--gruen-dunkel); }
.person__lead { font-size: 1.2rem; font-weight: 700; color: var(--text-dunkel); }
.person__appell { font-weight: 600; color: var(--text-dunkel); }
.person__schluss { font-size: 1.15rem; font-weight: 700; color: var(--text-dunkel); }
@media (max-width: 600px) {
    .person__bild { float: none; width: 100%; margin: 0 0 1.5rem; }
}

/* Angebot im Detail (abwechselnde Blöcke) */
.angebot-block {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.75rem;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    margin-bottom: 1.5rem;
}
.angebot-block__icon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: var(--blau);
    background: var(--flaeche-hell);
    border-radius: 16px;
}
.angebot-block__icon .icon { width: 36px; height: 36px; }
.angebot-block h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
/* Im Organisations-Abschnitt sind die Blöcke einer h2-Überschrift untergeordnet
   und nutzen daher h3 – optisch aber gleichwertig zu den h2-Blöcken darüber. */
.angebot-block h3 { margin: 0 0 0.5rem; font-size: 1.4rem; color: var(--text-dunkel); }
.angebot-block p:last-child { margin-bottom: 0; }

/* Werte-Kacheln (Über uns) */
.werte-gitter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.wert-karte {
    text-align: center;
    padding: 1.75rem;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.wert-karte h3 { color: var(--blau); }
.wert-karte p { margin: 0; color: var(--text-sekundaer); }

/* Vorstand */
.vorstand-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 44rem;
}
.vorstand-karte {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.vorstand-karte__avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    color: var(--weiss);
    background-image: var(--verlauf);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.25rem;
}
.vorstand-karte__name { color: var(--text-dunkel); font-weight: 700; font-size: 1.2rem; }
.vorstand-karte__rolle { color: var(--text-sekundaer); }

/* Standort-Infoblöcke (Über uns / Kontakt) */
.info-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.info-karte {
    padding: 1.5rem;
    background: var(--flaeche-hell);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
}
.info-karte h3 { display: flex; align-items: center; gap: 0.5rem; }
.info-karte h3 .icon { color: var(--blau); }
.info-karte address { font-style: normal; line-height: 1.8; }

/* Hinweis-/Warnkasten (Datenschutz, Formular) */
.hinweis {
    border-left: 6px solid var(--gruen);
    background: #f3faec;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.hinweis--warnung { border-left-color: var(--blau); background: #eef5ff; }
.hinweis h3 { margin-top: 0; }
.hinweis p:last-child { margin-bottom: 0; }

@media (max-width: 48rem) {
    .werte-gitter { grid-template-columns: 1fr; }
    .vorstand-gitter { grid-template-columns: 1fr; }
    .info-gitter { grid-template-columns: 1fr; }
    .angebot-block { grid-template-columns: 1fr; }
    .angebot-block__icon { width: 64px; height: 64px; }
}

/* =====================================================================
   FORMULARE (Mitmachen-Formular)
   ===================================================================== */
.formular { max-width: 50rem; }

.feld-gruppe {
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    background: var(--weiss);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
    box-shadow: var(--schatten);
}
.feld-gruppe > legend {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dunkel);
    padding: 0 0.5rem;
    margin-left: -0.5rem;
}
.feld-gruppe__hinweis { color: var(--text-sekundaer); margin-top: 0; }

/* Einzelfeld (Label über Eingabe) */
.feld { margin-bottom: 1.25rem; }
.feld:last-child { margin-bottom: 0; }
.feld > label,
.feld-set > legend {
    display: block;
    font-weight: 700;
    color: var(--text-dunkel);
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
}
.pflicht { color: #c0392b; }
.feld__hilfe { color: var(--text-sekundaer); font-size: 0.95rem; margin: 0.15rem 0 0.4rem; }

/* Text-, E-Mail-, Datums-Eingaben und Auswahllisten */
.eingabe,
.auswahl,
textarea.eingabe {
    width: 100%;
    min-height: var(--klick-min);
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--text);
    background: var(--weiss);
    border: 2px solid var(--rahmen);
    border-radius: 10px;
}
textarea.eingabe { min-height: 7rem; resize: vertical; line-height: 1.5; }
.eingabe:focus, .auswahl:focus, textarea.eingabe:focus {
    border-color: var(--blau);
    outline: 3px solid rgba(5, 91, 195, 0.25);
    outline-offset: 0;
}

/* Auswahllisten – Spaltenraster für Checkbox-/Radio-Optionen */
.feld-set { border: 0; padding: 0; margin: 0 0 1.25rem; }
.optionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.5rem 1rem;
}
.optionen--schmal { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* Eine Option = große, anklickbare Fläche (mind. 48px hoch) */
.option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--klick-min);
    padding: 0.6rem 0.85rem;
    border: 2px solid var(--rahmen);
    border-radius: 10px;
    cursor: pointer;
    background: var(--weiss);
    line-height: 1.35;
}
.option:hover { border-color: var(--blau); background: var(--flaeche-hell); }
.option input { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; accent-color: var(--blau); cursor: pointer; }
.option:focus-within { border-color: var(--blau); outline: 3px solid rgba(5, 91, 195, 0.25); }

/* Die zwei großen „Ich möchte …"-Optionen ganz oben */
.wunsch-optionen { grid-template-columns: 1fr 1fr; }
.wunsch-option {
    min-height: 64px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dunkel);
}

/* Bedingter Mitglieds-Bereich */
.bedingt-mitglied {
    border-left: 6px solid var(--blau);
    background: var(--flaeche-hell);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
}
.bedingt-mitglied > h3 { margin-top: 0; }

/* Honeypot – für Menschen unsichtbar, nur für Bots */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* Einwilligung */
.einwilligung {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 2px solid var(--rahmen);
    border-radius: 10px;
    background: var(--weiss);
}
.einwilligung input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--blau); }

.formular__absenden { margin-top: 1.5rem; }

/* Validierungs-Fehler */
.feld__fehler { color: #c0392b; font-weight: 600; margin: 0.4rem 0 0; }
.eingabe[aria-invalid="true"],
.auswahl[aria-invalid="true"] { border-color: #c0392b; }
.formular-fehler {
    border-left: 6px solid #c0392b;
    background: #fdecea;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}
.formular-fehler h2 { margin-top: 0; margin-bottom: 0.4rem; color: #a5281b; font-size: 1.3rem; }
.formular-fehler p { margin: 0; }

/* Zwei nebeneinander (z. B. PLZ / Ort) */
.feld-reihe { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }

@media (max-width: 40rem) {
    .wunsch-optionen { grid-template-columns: 1fr; }
    .feld-reihe { grid-template-columns: 1fr; }
    .formular__absenden .btn { width: 100%; }
}

/* ----------------------------------------------------- Dankesseite ----- */
.danke {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}
.danke__haken {
    display: inline-grid;
    place-items: center;
    width: 88px; height: 88px;
    margin-bottom: 1rem;
    color: var(--weiss);
    background-image: var(--verlauf);
    border-radius: 50%;
}
.danke__haken .icon { width: 48px; height: 48px; }

/* =====================================================================
   VERANSTALTUNGEN (Liste + Kalender)
   ===================================================================== */

/* Filter-/Ansichtsleiste */
.veranstaltung-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    margin-bottom: 2rem;
}
.filter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filter-gruppe__titel { font-weight: 700; color: var(--text-dunkel); margin-right: 0.25rem; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--klick-min);
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: var(--radius-pill);
    /* Rahmen als inset-Schatten: kein echter Rahmen -> kein „Notch" beim
       aktiven Verlauf-Chip, und die Größe bleibt aktiv/inaktiv identisch. */
    box-shadow: inset 0 0 0 2px var(--rahmen);
    color: var(--text-dunkel);
    font-weight: 600;
    text-decoration: none;
}
.filter-chip:hover { box-shadow: inset 0 0 0 2px var(--blau); color: var(--blau); background: var(--flaeche-hell); }
.filter-chip--aktiv {
    background-image: var(--verlauf);
    color: var(--weiss);
    box-shadow: none;
}
.filter-chip--aktiv:hover { color: var(--weiss); }

/* Listenansicht */
.termin-liste { display: flex; flex-direction: column; gap: 1.25rem; }
.termin-zeile {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-left: 6px solid var(--tuerkis);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.termin-zeile__datum {
    text-align: center;
    background: var(--flaeche-hell);
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
}
.termin-zeile__tag { display: block; font-size: 2rem; font-weight: 700; color: var(--blau); line-height: 1; }
.termin-zeile__monat { display: block; font-weight: 700; color: var(--text-dunkel); text-transform: uppercase; font-size: 0.85rem; }
.termin-zeile__wtag { display: block; color: var(--text-sekundaer); font-size: 0.9rem; }
.termin-zeile__titel { margin: 0 0 0.35rem; font-size: 1.3rem; }
.termin-zeile__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--text-dunkel); font-weight: 600; }
.termin-zeile__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.termin-zeile__meta .icon { width: 20px; height: 20px; color: var(--tuerkis); }
.termin-zeile__beschreibung { color: var(--text-sekundaer); margin: 0.5rem 0 0; }
.termin-zeile__rechts { text-align: right; }
.termin-zeile__kategorie {
    display: inline-block;
    font-size: 0.85rem; font-weight: 700; color: var(--blau);
    background: var(--flaeche-hell); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
    margin-bottom: 0.5rem;
}
.termin-zeile__plaetze { color: var(--gruen-dunkel); font-weight: 700; }
.termin-zeile__preis { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--blau); font-weight: 700; margin-top: 0.35rem; }
.termin-zeile__preis .icon { width: 20px; height: 20px; }

/* Kalenderansicht */
.kalender-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.kalender-kopf h2 { margin: 0; }
.kalender-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.kalender-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--klick-min); min-height: var(--klick-min);
    padding: 0.4rem 1rem;
    border: 2px solid var(--rahmen); border-radius: var(--radius-pill);
    color: var(--blau); font-weight: 700; text-decoration: none;
}
.kalender-nav a:hover { background: var(--flaeche-hell); }

.kalender {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    overflow: hidden;
}
.kalender th {
    background: var(--flaeche-hell);
    color: var(--text-dunkel);
    padding: 0.6rem 0.5rem;
    font-size: 0.95rem;
    border: 1px solid var(--rahmen);
}
.kalender td {
    vertical-align: top;
    height: 6.5rem;
    padding: 0.4rem;
    border: 1px solid var(--rahmen);
}
.kalender td.kalender__leer { background: #fafcfe; }
.kalender__tagzahl { font-weight: 700; color: var(--text-sekundaer); font-size: 0.95rem; }
.kalender__heute .kalender__tagzahl {
    display: inline-grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    color: var(--weiss); background: var(--blau); border-radius: 50%;
}
.kalender__chip {
    display: block;
    margin-top: 0.3rem;
    padding: 0.25rem 0.4rem;
    background-image: var(--verlauf);
    color: var(--weiss);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}
.kalender__chip:hover { color: var(--weiss); filter: brightness(1.05); }
.kalender__chip-zeit { display: block; font-weight: 700; }

.kalender-legende { margin-top: 1rem; color: var(--text-sekundaer); }

/* leerer Zustand */
.leer-hinweis {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--flaeche-hell);
    border: 2px dashed var(--rahmen);
    border-radius: var(--radius);
    color: var(--text-sekundaer);
}

@media (max-width: 52rem) {
    .termin-zeile { grid-template-columns: 5rem 1fr; }
    .termin-zeile__rechts { grid-column: 1 / -1; text-align: left; }
    /* Kalender auf kleinen Geräten horizontal scrollbar halten */
    .kalender-wrap { overflow-x: auto; }
    .kalender { min-width: 44rem; }
}
@media (max-width: 40rem) {
    .termin-zeile { grid-template-columns: 1fr; }
    .veranstaltung-leiste { flex-direction: column; align-items: stretch; }
}

/* ===================================================== Preise (preise.php) */
/* Umschalter zwischen den Zielgruppen: zwei große, gut sichtbare Schaltflächen
   (echte Links, damit beide Ansichten ohne JavaScript funktionieren). */
.zielgruppen-schalter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.zielgruppen-schalter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;                 /* deutlich über der 48px-Mindestfläche */
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    /* Rahmen als inset-Schatten: gleiche Größe im aktiven und inaktiven Zustand */
    box-shadow: inset 0 0 0 2px var(--rahmen);
    background: var(--weiss);
    color: var(--text-dunkel);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.zielgruppen-schalter__btn:hover {
    box-shadow: inset 0 0 0 2px var(--blau);
    color: var(--blau);
    background: var(--flaeche-hell);
}
.zielgruppen-schalter__btn--aktiv,
.zielgruppen-schalter__btn--aktiv:hover {
    background-image: var(--verlauf);
    color: var(--weiss);
    box-shadow: none;
}

.preis-claim {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--teal-text);
    margin-bottom: 0.5rem;
}

/* Preistabellen: bewusst echte Tabellen (caption + th scope) und auch mobil
   nicht horizontal scrollend – auf schmalen Geräten wird nur die Schrift
   kleiner, die Tabellenstruktur bleibt für Screenreader erhalten. */
.preis-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.75rem;
    background: var(--weiss);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    /* KEIN overflow:hidden – das würde je nach Browser die <caption>
       abschneiden. Die Ecken werden stattdessen an den Kopfzellen gerundet. */
}
.preis-tabelle thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.preis-tabelle thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.preis-tabelle + .preis-tabelle { margin-top: 2rem; }
.preis-tabelle caption {
    caption-side: top;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dunkel);
    padding: 1.5rem 0 0.75rem;
}
.preis-tabelle th,
.preis-tabelle td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--rahmen);
    text-align: left;
    vertical-align: top;
}
.preis-tabelle thead th {
    background: var(--flaeche-hell);
    color: var(--text-dunkel);
    font-size: 1rem;
    font-weight: 700;
}
.preis-tabelle tbody th {
    font-weight: 600;
    color: var(--text);
}
.preis-tabelle tbody tr:last-child th,
.preis-tabelle tbody tr:last-child td { border-bottom: 0; }
.preis-tabelle__betrag {
    text-align: right;
    white-space: nowrap;
}
.preis-tabelle tbody td.preis-tabelle__betrag {
    color: var(--blau);
    font-weight: 800;
    font-size: 1.1rem;
}
.preis-tabelle__hinweis {
    color: var(--text-sekundaer);
    margin: 0 0 1.5rem;
}

/* Infokästen auf der Preise-Seite (Sprechstunde, „Im Preis enthalten") */
.preis-box--weit { margin-top: 2.5rem; }
.preis-box--weit .preis-box__titel { font-size: 1.25rem; }
.preis-box--weit .preis-box__titel .icon {
    width: 28px; height: 28px; vertical-align: -6px; margin-right: 0.4rem;
}
.preis-box__fuss { margin-bottom: 0; }
.sprechstunde-liste { margin: 0.75rem 0; padding-left: 1.2em; }
.sprechstunde-liste li { margin-bottom: 0.4rem; }
.enthalten-liste { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.enthalten-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.35rem 0;
}
.enthalten-liste__haken .icon { width: 24px; height: 24px; color: var(--gruen-dunkel); }

/* Nutzen-/Kurzbeschreibungskarten (2–3 je Reihe, je nach Platz) */
.nutzen-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem;
}
.nutzen-karte__icon { display: inline-block; margin-bottom: 0.25rem; }
.nutzen-karte__icon .icon { width: 40px; height: 40px; color: var(--blau); }

/* Themen als Schlagwort-Liste */
.themen-wolke {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.themen-wolke__eintrag {
    padding: 0.6rem 1.2rem;
    background: var(--flaeche-hell);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-pill);
    color: var(--text-dunkel);
    font-weight: 600;
}

.cta-leiste__text { color: #f2f8ff; max-width: 46rem; margin: 0 auto 1.5rem; }

/* Verweis von „Unser Angebot" auf die Preisseite */
.angebot-block__preislink { margin: 1rem 0; font-weight: 700; }
.organisationen-hinweis { color: var(--text-sekundaer); margin-top: 1.5rem; }

@media (max-width: 40rem) {
    /* Tabellen bleiben intakt, nur kompakter – kein horizontales Scrollen. */
    .preis-tabelle { font-size: 0.95rem; }
    .preis-tabelle th,
    .preis-tabelle td { padding: 0.6rem 0.5rem; }
    .preis-tabelle caption { font-size: 1.2rem; }
    .preis-tabelle tbody td.preis-tabelle__betrag { font-size: 1rem; }
    .zielgruppen-schalter__btn { width: 100%; }
}

/* ============================================ Kennzeichnung von KI-Bildern */
/* EU AI Act, Art. 50: fotorealistische KI-Bilder muessen als solche erkennbar
   sein. Gesteuert wird das ueber app/ki_bilder.php + ki_hinweis() – hier steht
   nur das Aussehen. Bewusst sichtbarer Text (nicht nur alt/title) und nicht
   per Hover versteckt.
   Die Bildcontainer haben alle overflow:hidden, das Label kann also nicht
   ueber den Bildrand hinauslaufen. */
.ki-hinweis {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 3;
    max-width: calc(100% - 1.2rem);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    /* Dunkler, halbtransparenter Grund + Weiss: Kontrast deutlich ueber
       WCAG AA, unabhaengig davon, wie hell das Bild an dieser Stelle ist. */
    background: rgba(15, 32, 51, 0.78);
    color: #ffffff;
    font-size: 0.875rem;   /* 14px – untere Grenze laut Vorgabe */
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    text-decoration: none;
    pointer-events: none;  /* verdeckt keine darunterliegenden Links */
}

/* Container, die noch keinen Positionierungsrahmen haben, brauchen einen –
   sonst wuerde sich das Label an einem weiter aussen liegenden Element
   ausrichten. (.hero__bild und .standort-karte__bild sind bereits relativ.) */
.promo__bild,
.inhalt-bild { position: relative; }

@media (max-width: 40rem) {
    /* Auf schmalen Geraeten etwas kompakter, aber nicht kleiner als 14px. */
    .ki-hinweis { right: 0.45rem; bottom: 0.45rem; padding: 0.25rem 0.6rem; }
}

/* Preis der offenen Sprechstunde im Infokasten hervorheben */
.sprechstunde-preis { margin: 0.75rem 0 0.5rem; color: var(--text-dunkel); }
.sprechstunde-preis strong { color: var(--text-dunkel); }