/* ==========================================================================
   Skipool Tirol – Komponenten (Homepage + spt_core-Plugins)
   --------------------------------------------------------------------------
   Mobile-first. Setzt Tokens aus main.css voraus. BEM-Klassen entsprechen
   exakt dem bestehenden Markup von spt_sitepackage und spt_core.
   ========================================================================== */

/* --- Wiederverwendbare Bausteine --------------------------------------- */
.spt-grid {
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 40em) {
    .spt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56em) {
    .spt-grid { grid-template-columns: repeat(3, 1fr); }
}

.spt-section-heading { margin-bottom: var(--spt-space-lg); }

.spt-empty {
    padding: var(--spt-space-lg);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius);
    color: var(--spt-color-muted);
}
.spt-athletes__empty, .spt-squads__empty, .spt-campaigns__empty,
.spt-logowall__empty, .spt-packages__empty, .spt-thanks__empty,
.spt-talents-teaser__empty {
    padding: var(--spt-space-lg);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius);
    color: var(--spt-color-muted);
}

/* Generische Card-Optik */
.spt-card,
.spt-athlete-card,
.spt-squad-card,
.spt-campaign-card,
.spt-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--spt-color-surface);
    border: 1px solid var(--spt-color-border);
    border-radius: var(--spt-radius);
    box-shadow: var(--spt-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--spt-transition), transform var(--spt-transition);
}
.spt-athlete-card:hover,
.spt-squad-card:hover,
.spt-campaign-card:hover,
.spt-news-card:hover {
    box-shadow: var(--spt-shadow-md);
    transform: translateY(-2px);
}

/* ==========================================================================
   Homepage – Hero (Figma-FINAL 2173:996)
   --------------------------------------------------------------------------
   Full-bleed Foto + diagonaler Dunkel-Verlauf; Versal-Headline + roter CTA
   linksbündig unten. Hero bricht über die Container-Gutter + obere
   .spt-main-Polsterung aus (negativer Margin). Die weiße Stats-Card ist ein
   Sibling und überlappt die Hero-Unterkante (negativer margin-top).
   Hero-Foto = committeter Platzhalter (ÖSV/A1-Motiv aus dem Mockup) — produktiv
   lizenzfreigegebenes Bild einsetzen.
   ========================================================================== */
.spt-hero {
    position: relative;
    margin: calc(-1 * var(--spt-space-xl)) calc(-1 * var(--spt-space-md)) 0;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    background-color: var(--spt-color-dark);
    color: #fff;
    isolation: isolate;
}
@media (min-width: 40em) {
    .spt-hero { margin-inline: calc(-1 * var(--spt-space-lg)); }
}
.spt-hero__bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 28% center;
}
.spt-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    /* Figma: linear-gradient(73deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.38) 82.7%) */
    background: linear-gradient(73deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.38) 82.7%);
}
.spt-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--spt-container-max);
    margin-inline: auto;
    /* Extra-Bottom-Polsterung reserviert Platz für die überlappende Stats-Card. */
    padding: var(--spt-space-xl) var(--spt-space-md) calc(var(--spt-space-xl) + 44px);
}
@media (min-width: 40em) { .spt-hero__inner { padding-inline: var(--spt-space-lg); } }

.spt-hero__title {
    margin: 0 0 var(--spt-space-md);
    color: #fff;
    font-family: var(--spt-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: clamp(2.75rem, 12.5vw, 3.5rem);   /* Figma 50px */
    line-height: 1.1;                             /* Figma 55px */
    max-width: 6em;
}
.spt-hero__cta { padding: 1rem 1.9rem; }         /* Figma px30 py18 */

/* Stats-Card (Sibling): überlappt die Hero-Unterkante. Höhere Selektor-
   Spezifität als die generische `* + *`-Abstandsregel im Layout-Container. */
.spt-main > .spt-container > .spt-hero__facts { margin-top: -44px; }
.spt-hero__facts { position: relative; z-index: 2; }

.spt-stats {
    list-style: none; margin: 0;
    padding: var(--spt-space-md) var(--spt-space-lg);
    display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
    background: var(--spt-color-surface);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05), var(--spt-shadow-md);
}
.spt-stats__item {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    text-align: center; padding-inline: 0.5rem;
}
.spt-stats__item--divided { border-inline: 1px solid rgba(213, 214, 214, 0.5); }
.spt-stats__value {
    font-family: var(--spt-font-display); font-weight: 700;
    font-size: clamp(1.75rem, 8vw, 2.125rem);    /* Figma 34px */
    line-height: 1.1; color: var(--spt-color-ink);
}
.spt-stats__label {
    font-family: var(--spt-font-condensed); font-weight: 500;
    font-size: 1rem; line-height: 1.2; color: var(--spt-color-muted);
}

/* Seiten-Hero (Unterseiten, Figma-FINAL 2137:912): kompakter als der
   Startseiten-Hero – Logo oben, Seitentitel unten, Diagonal-Verlauf. */
.spt-page-hero {
    position: relative;
    margin: calc(-1 * var(--spt-space-xl)) calc(-1 * var(--spt-space-md)) var(--spt-space-2xl);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--spt-color-dark);
    color: #fff;
    isolation: isolate;
}
@media (min-width: 40em) {
    .spt-page-hero { margin-inline: calc(-1 * var(--spt-space-lg)); }
}
.spt-page-hero__bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.spt-page-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    /* Figma: linear-gradient(62deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,0) 82.7%) */
    background: linear-gradient(62deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 82.7%);
}
.spt-page-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--spt-container-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: var(--spt-space-md) var(--spt-space-md) var(--spt-space-lg);
}
@media (min-width: 40em) { .spt-page-hero__inner { padding-inline: var(--spt-space-lg); } }
.spt-page-hero__logo { width: 67px; height: auto; }
.spt-page-hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--spt-font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0;
    font-size: clamp(2rem, 10vw, 2.5rem);   /* Figma 40px */
    line-height: 1.05;
}

/* ==========================================================================
   Homepage – Mission (Figma-FINAL 2173:779)
   ========================================================================== */
.spt-mission__title {
    margin: 0 0 var(--spt-space-lg);
    font-size: clamp(1.75rem, 8vw, 2rem);        /* Figma 32px */
    line-height: 1.125;                           /* Figma 36px */
}
.spt-mission__body {
    max-width: 62ch;
    margin: 0 0 var(--spt-space-xl);
    font-family: var(--spt-font-base);
    font-size: 1.125rem;                          /* Figma 18px */
    line-height: 1.4;
    text-transform: none;
    color: var(--spt-color-ink);
}
.spt-mission__body > * { margin: 0; }
.spt-mission__body > * + * { margin-top: 1rem; }

/* Pill-Cards: weiße Karte mit Icon-Box + Titel/Text. */
.spt-pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spt-pill {
    display: flex; align-items: center; gap: 8px;
    padding: var(--spt-space-md) var(--spt-space-lg);
    background: var(--spt-color-surface);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}
.spt-pill__icon { flex: 0 0 45px; width: 45px; height: 45px; }
.spt-pill__text { min-width: 0; }
.spt-pill__title {
    margin: 0;
    font-family: var(--spt-font-condensed); font-weight: 700;
    font-size: 1.125rem; line-height: 1.4; color: var(--spt-color-ink);
}
.spt-pill__desc {
    margin: 0;
    font-family: var(--spt-font-base);
    font-size: 1rem; line-height: 1.4; color: var(--spt-color-muted);
}

/* Redaktioneller Hauptinhalt (colPos 0), z. B. „Über Skipool Tirol". */
.spt-home__intro > * + * { margin-top: var(--spt-space-lg); }

.spt-home__teasers { display: grid; gap: var(--spt-space-2xl); }

/* ==========================================================================
   Athlet:innen
   ========================================================================== */
.spt-athletes__filter,
.spt-filter__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spt-space-md);
    align-items: flex-end;
    margin-bottom: var(--spt-space-xl);
    padding: var(--spt-space-md);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius);
}
.spt-athletes__filter > *,
.spt-filter__field { flex: 1 1 12rem; }
.spt-athletes__filter label,
.spt-filter__field label { font-size: var(--spt-fs-300); font-weight: 600; }

.spt-athletes__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40em) { .spt-athletes__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56em) { .spt-athletes__grid { grid-template-columns: repeat(4, 1fr); } }

.spt-athlete-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.spt-athlete-card__media {
    position: relative;
    line-height: 0;
}
.spt-athlete-card__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--spt-color-bg-alt);
}
.spt-athlete-card__photo--placeholder {
    display: block;
    background: linear-gradient(135deg, var(--spt-color-bg-alt), var(--spt-color-border-strong));
}
/* Tag-Overlay am unteren Bildrand (GS / SL grau, Kader rot) */
.spt-athlete-card__badges {
    position: absolute;
    left: var(--spt-space-xs);
    right: var(--spt-space-xs);
    bottom: var(--spt-space-xs);
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.spt-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--spt-radius-sm);
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-size: var(--spt-fs-300);
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-transform: uppercase;
}
.spt-tag--discipline {
    background: rgba(255, 255, 255, 0.92);
    color: var(--spt-color-ink);
    box-shadow: var(--spt-shadow-sm);
}
.spt-tag--squad {
    background: var(--spt-color-primary);
    color: #fff;
}
.spt-athlete-card__name {
    display: block;
    padding: var(--spt-space-sm) var(--spt-space-md) var(--spt-space-md);
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    font-size: var(--spt-fs-500);
}
.spt-athlete-card__firstname { color: var(--spt-color-ink); }
.spt-athlete-card__lastname { color: var(--spt-color-primary); }
.spt-athlete-card__meta {
    display: block;
    padding: 0 var(--spt-space-md) var(--spt-space-md);
    margin-top: 0.15rem;
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}

/* ==========================================================================
   Athlet:innen – Detailseite
   --------------------------------------------------------------------------
   Aufbau (mobile-first, Figma-FINAL 2023:838 „Nina Astner"):
   HERO (dunkles Skibild + Diagonalverlauf, Eyebrow + großer Name, opt.
   „Eingeloggt"-Pill) → Fakten-Card (quadr. Porträt, Name, 3 Mini-Stats,
   verschachtelte Fakten-Row-Card) → Zitat → Bestzeiten & Ergebnisse →
   Saison-Highlight → Impressionen-Galerie → „Mehr über mich" → Social.
   Karten weiß, radius 12px, weicher Schatten; Section-Abstand 40/60px.
   ========================================================================== */

/* Gemeinsamer Block-Abstand zwischen den Detail-Sektionen (Figma: 40/60px). */
.spt-athlete__quote,
.spt-athlete__results,
.spt-athlete__highlight,
.spt-athlete__impressions,
.spt-athlete__about,
.spt-athlete__social { margin-top: 40px; }
@media (min-width: 40em) {
    .spt-athlete__quote,
    .spt-athlete__results,
    .spt-athlete__highlight,
    .spt-athlete__impressions,
    .spt-athlete__about,
    .spt-athlete__social { margin-top: 60px; }
}

/* --- 1. HERO (dunkel, full-bleed innerhalb des Containers) --------------- */
.spt-athlete__hero {
    /* Aus dem Container-Padding herausziehen → randlos bis zur Containerkante,
       nach oben bündig unter den (dunklen) Header. */
    position: relative;
    margin: calc(-1 * var(--spt-space-xl)) calc(-1 * var(--spt-space-md)) 40px;
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    padding: var(--spt-space-xl) var(--spt-space-md) var(--spt-space-lg);
    color: var(--spt-color-on-dark);
    /* Diagonaler Verlauf (~72°) über dem Motiv sichert Textkontrast (WCAG).
       --spt-hero-img: Porträt (inline gesetzt) ODER committetes Platzhalter-
       Motiv als Fallback. */
    --spt-hero-img: url("../Images/hero-skiracer.jpg");
    background-image:
        linear-gradient(72deg, rgba(26, 26, 24, 0.94) 8%, rgba(26, 26, 24, 0.62) 48%, rgba(26, 26, 24, 0.28) 100%),
        var(--spt-hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--spt-color-dark);
}
@media (min-width: 40em) {
    .spt-athlete__hero {
        margin-inline: calc(-1 * var(--spt-space-lg));
        padding-inline: var(--spt-space-lg);
        min-height: 66vh;
    }
}
.spt-athlete__hero-inner { max-width: 34rem; }

/* „Eingeloggt"-Pill (nur FE-Login) – dunkle Chip-Chrome lt. FINAL */
.spt-athlete__status {
    position: absolute;
    top: var(--spt-space-md);
    right: var(--spt-space-md);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.3rem 0.8rem;
    background: #323436;
    border: 1px solid #53575a;
    border-radius: var(--spt-radius-pill);
    font-family: var(--spt-font-condensed);
    font-size: var(--spt-fs-300);
    font-weight: 600;
    color: var(--spt-color-on-dark);
}
.spt-athlete__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #46c37b;
}

.spt-athlete__eyebrow {
    margin: 0 0 var(--spt-space-2xs);
    font-family: var(--spt-font-condensed);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Aufgehelltes Markenrot: erreicht auf Dunkel die AA-Kontrastschwelle. */
    color: var(--spt-color-primary-on-dark);
}
.spt-athlete__eyebrow-sep { color: var(--spt-color-on-dark); opacity: 0.5; }
.spt-athlete__name {
    margin: 0;
    font-size: var(--spt-fs-800);
    line-height: 0.92;
    color: var(--spt-color-on-dark);
}
/* Vorname kräftig (Saira Bold), Nachname zweite Zeile, leichter. */
.spt-athlete__name .spt-athlete__firstname { display: block; font-weight: 700; }
.spt-athlete__name .spt-athlete__lastname {
    display: block;
    font-weight: 400;
    color: var(--spt-color-on-dark-muted);
}
/* Card-Name: Vorname Ink, Nachname rot (heller Karten-Hintergrund). */
.spt-athlete__card-name .spt-athlete__firstname { color: var(--spt-color-ink); }
.spt-athlete__card-name .spt-athlete__lastname { color: var(--spt-color-primary); }

/* --- 2. Fakten-Card ----------------------------------------------------- */
.spt-athlete__card {
    padding: var(--spt-space-lg);
    background: var(--spt-color-surface);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}
.spt-athlete__portrait {
    margin: 0 0 var(--spt-space-md);
    line-height: 0;
    border-radius: var(--spt-radius);
    overflow: hidden;
}
.spt-athlete__portrait-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--spt-color-bg-alt);
}
.spt-athlete__card-name {
    margin: 0 0 var(--spt-space-md);
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.0;
    font-size: var(--spt-fs-600);
    text-align: center;
}
.spt-athlete__card-name .spt-athlete__firstname,
.spt-athlete__card-name .spt-athlete__lastname { display: inline; }

/* 3-Spalten Stat-Row (Wert groß, Label klein darunter) */
.spt-athlete__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 var(--spt-space-lg);
    text-align: center;
}
.spt-athlete__stat {
    margin: 0;
    padding: 0 var(--spt-space-xs);
}
.spt-athlete__stat + .spt-athlete__stat { border-left: 1px solid var(--spt-color-border); }
.spt-athlete__stat-value {
    margin: 0;
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: var(--spt-fs-500);
    color: var(--spt-color-ink);
}
.spt-athlete__stat-label {
    margin-top: 0.15rem;
    font-size: var(--spt-fs-300);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--spt-color-muted);
}

/* Verschachtelte Fakten-Row-Card (getönt, zeilenweise 2 Spalten) */
.spt-athlete__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spt-space-md) var(--spt-space-lg);
    margin: 0;
    padding: var(--spt-space-md);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius-sm);
}
.spt-athlete__fact { margin: 0; }
.spt-athlete__fact-label {
    margin: 0 0 0.1rem;
    font-family: var(--spt-font-condensed);
    font-weight: 700;
    font-size: var(--spt-fs-300);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--spt-color-muted);
}
.spt-athlete__fact-value {
    margin: 0;
    font-weight: 500;
    color: var(--spt-color-ink);
    overflow-wrap: anywhere;
}

.spt-athlete__section-title { margin: 0 0 var(--spt-space-md); }

/* --- 3. Zitat ----------------------------------------------------------- */
.spt-athlete__quote { max-width: var(--spt-container-narrow); }
.spt-athlete__quote-text {
    position: relative;
    margin: 0;
    padding-top: 1.6rem;
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    line-height: 1.12;
    font-size: clamp(1.6rem, 4vw + 0.8rem, 2rem);
    color: var(--spt-color-ink);
}
.spt-athlete__quote-text::before {
    content: "\201C";
    position: absolute;
    top: -0.25em;
    left: -0.02em;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--spt-color-primary);
}
.spt-athlete__quote-body {
    margin-top: var(--spt-space-md);
    color: var(--spt-color-text);
}
.spt-athlete__quote-body p:last-child { margin-bottom: 0; }

.spt-athlete__badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: var(--spt-space-md) 0 0;
    padding: var(--spt-space-md) 0 0;
    border-top: 1px solid var(--spt-color-border);
}
.spt-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--spt-radius-pill);
    font-size: var(--spt-fs-300);
    font-weight: 600;
    background: var(--spt-color-bg-alt);
    color: var(--spt-color-ink);
    border: 1px solid var(--spt-color-border);
}
.spt-badge--squad { background: var(--spt-color-ink); color: #fff; border-color: var(--spt-color-ink); }
.spt-badge--discipline { background: var(--spt-color-primary-tint); color: var(--spt-color-primary-dark); border-color: var(--spt-color-primary-ring); }

/* --- 4. Ergebnis-Liste (Card-Liste: Bewerb links, Platz groß rechts) ---- */
.spt-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--spt-color-surface);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.spt-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spt-space-md);
    padding: var(--spt-space-md);
}
.spt-result + .spt-result { border-top: 1px solid var(--spt-color-border); }
.spt-result__main { min-width: 0; }
.spt-result__competition {
    display: block;
    font-family: var(--spt-font-condensed);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--spt-color-ink);
}
.spt-result__detail {
    display: block;
    font-size: 1rem;
    color: var(--spt-color-muted);
}
.spt-result__rank {
    flex: none;
    font-family: var(--spt-font-condensed);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--spt-color-ink);
    white-space: nowrap;
}

/* --- 5. Saison-Highlight (Card mit rotem Akzentbalken links) ------------ */
.spt-athlete__highlight {
    padding: var(--spt-space-md) var(--spt-space-md) var(--spt-space-md) var(--spt-space-lg);
    background: var(--spt-color-surface);
    border-left: 4px solid var(--spt-color-primary);
    border-radius: 0 var(--spt-radius) var(--spt-radius) 0;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}
.spt-athlete__highlight-title {
    margin: 0.2rem 0 0.3rem;
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: 1.625rem;
    color: var(--spt-color-ink);
}
.spt-athlete__highlight-date {
    display: block;
    color: var(--spt-color-muted);
}

/* --- 6. Impressionen-Galerie (responsives Raster) ----------------------- */
.spt-athlete__gallery {
    list-style: none;
    display: grid;
    gap: var(--spt-space-sm);
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
}
@media (min-width: 40em) { .spt-athlete__gallery { gap: var(--spt-space-md); grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56em) { .spt-athlete__gallery { grid-template-columns: repeat(4, 1fr); } }
.spt-athlete__gallery-item { margin: 0; line-height: 0; }
.spt-athlete__gallery-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px;
    background: var(--spt-color-bg-alt);
}

/* --- 7. „Mehr über mich" ------------------------------------------------ */
.spt-athlete__about { max-width: var(--spt-container-narrow); }
.spt-athlete__about-intro { color: var(--spt-color-text); }
.spt-athlete__profile-facts {
    display: grid;
    gap: 0;
    margin: 0 0 var(--spt-space-md);
    padding: var(--spt-space-sm) var(--spt-space-md);
    background: var(--spt-color-surface);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}
.spt-athlete__profile-fact {
    display: grid;
    gap: 0.1rem 0.75rem;
    margin: 0;
    padding: var(--spt-space-sm) 0;
}
.spt-athlete__profile-fact + .spt-athlete__profile-fact { border-top: 1px solid var(--spt-color-border); }
@media (min-width: 40em) {
    .spt-athlete__profile-fact { grid-template-columns: 12rem 1fr; align-items: baseline; }
}
.spt-athlete__profile-fact-label {
    margin: 0;
    font-family: var(--spt-font-condensed);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--spt-color-ink);
}
.spt-athlete__profile-fact-value {
    margin: 0;
    font-size: 1rem;
    color: var(--spt-color-muted);
}
.spt-athlete__about-explainer {
    margin-bottom: 0;
    color: var(--spt-color-muted);
}

/* --- 8. Social (Pill-Buttons 2-spaltig + Website-Textlink) -------------- */
.spt-athlete__social-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spt-space-sm);
    margin: 0;
    padding: 0;
}
.spt-social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--spt-color-ink);
    border-radius: var(--spt-radius);
    text-decoration: none;
    font-family: var(--spt-font-condensed);
    font-weight: 700;
    color: var(--spt-color-ink);
    background: var(--spt-color-surface);
    transition: border-color var(--spt-transition), background var(--spt-transition), color var(--spt-transition);
}
.spt-social-button__label { text-transform: capitalize; }
.spt-social-button:hover {
    border-color: var(--spt-color-primary);
    color: var(--spt-color-primary-dark);
}
.spt-athlete__website {
    margin: var(--spt-space-md) 0 0;
}
.spt-athlete__website a {
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: var(--spt-fs-500);
    color: var(--spt-color-primary);
    text-decoration: none;
}
.spt-athlete__website a:hover { color: var(--spt-color-primary-dark); }

.spt-athlete__back { margin-top: 40px; }
.spt-squad__back { margin-top: var(--spt-space-xl); }

/* ==========================================================================
   Kader / Squads
   ========================================================================== */
.spt-squads__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 40em) { .spt-squads__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .spt-squads__grid { grid-template-columns: repeat(3, 1fr); } }

.spt-squad-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.spt-squad-card__media { line-height: 0; }
.spt-squad-card__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--spt-color-bg-alt); }
.spt-squad-card__photo--placeholder {
    display: block;
    background: linear-gradient(135deg, var(--spt-color-bg-alt), var(--spt-color-border-strong));
}
.spt-squad-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--spt-space-md);
}
.spt-squad-card__title {
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--spt-color-ink);
    font-size: var(--spt-fs-500);
}
.spt-squad-card__trainer { font-size: var(--spt-fs-300); color: var(--spt-color-muted); }

.spt-squad__header { margin-bottom: var(--spt-space-lg); }
.spt-squad__eyebrow { margin-bottom: var(--spt-space-2xs); }
.spt-squad__title { margin: 0; }
.spt-squad__trainer { margin: var(--spt-space-2xs) 0 0; color: var(--spt-color-muted); }
.spt-squad__trainer-photo { width: 100%; border-radius: var(--spt-radius-lg); margin-bottom: var(--spt-space-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.spt-squad__description { max-width: var(--spt-container-narrow); }
.spt-squad__athletes { margin-top: var(--spt-space-xl); }
.spt-squad__athletes-title { margin-bottom: var(--spt-space-md); }
.spt-squad__athletes-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40em) { .spt-squad__athletes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56em) { .spt-squad__athletes-grid { grid-template-columns: repeat(4, 1fr); } }

/* Talents-Teaser (Startseite) – Eyebrow (Kader) + Headline + „Alle →" rechts */
.spt-talents-teaser__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spt-space-md);
    margin-bottom: var(--spt-space-lg);
}
.spt-talents-teaser__heading { min-width: 0; }
.spt-talents-teaser__eyebrow { margin-bottom: var(--spt-space-2xs); }
.spt-talents-teaser__title { margin: 0; }
.spt-talents-teaser__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: var(--spt-color-primary);
}
.spt-talents-teaser__more:hover { color: var(--spt-color-primary-dark); }
.spt-talents-teaser__more-arrow { font-size: 1.1em; line-height: 1; }
.spt-talents-teaser__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-md);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40em) { .spt-talents-teaser__grid { gap: var(--spt-space-lg); grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Sponsoren
   ========================================================================== */
.spt-logowall__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-md);
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
}
@media (min-width: 40em) { .spt-logowall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56em) { .spt-logowall__grid { grid-template-columns: repeat(4, 1fr); } }

.spt-logowall__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spt-space-lg);
    background: var(--spt-color-surface);
    border: 1px solid var(--spt-color-border);
    border-radius: var(--spt-radius);
    min-height: 120px;
}
.spt-logowall__item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.spt-logowall__logo { max-height: 70px; width: auto; object-fit: contain; }
.spt-logowall__name { font-weight: 700; color: var(--spt-color-ink); text-align: center; }
/* Hauptpartner hervorheben */
.spt-logowall__item--mainpartner {
    grid-column: span 2;
    border-color: var(--spt-color-border-strong);
    box-shadow: var(--spt-shadow-sm);
}
.spt-logowall__item--mainpartner .spt-logowall__logo { max-height: 100px; }

/* ==========================================================================
   Förderpartner / SPT-Leistungspakete (Figma-FINAL 2137:825)
   ========================================================================== */
/* Intro: Eyebrow + Headline + Lead + Value-Pills (Pill-Komponente wiederverwendet). */
.spt-packages__intro { display: grid; gap: var(--spt-space-lg); margin-bottom: var(--spt-space-2xl); }
.spt-packages__title { margin: 0; }
.spt-packages__lead { margin: 0; font-size: var(--spt-fs-500); color: var(--spt-color-ink); }
.spt-pills--value { margin-top: var(--spt-space-2xs); }
/* Icon der Value-Pills als getönte Box (Figma: bg rgba(218,37,29,.1), rounded 6). */
.spt-pill__icon--box {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--spt-color-primary);
    background: var(--spt-color-primary-tint);
    border-radius: var(--spt-radius-sm);
}

/* Zwischenzeile über dem Paket-Grid – bewusst KEIN Heading (H2-Redundanz). */
.spt-packages__grid-label {
    margin: 0 0 var(--spt-space-md);
    font-family: var(--spt-font-display); font-weight: 700;
    text-transform: uppercase; line-height: 1.1;
    font-size: clamp(1.5rem, 6vw, 1.6875rem);   /* Figma 27px */
    color: var(--spt-color-ink);
}

.spt-packages__grid {
    display: grid;
    gap: var(--spt-space-md);
    grid-template-columns: 1fr;                 /* FINAL ist mobil gestapelt */
    align-items: stretch;
}

.spt-package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spt-space-lg);
    padding: 30px;
    background: var(--spt-color-surface);
    border: 1px solid rgba(213, 214, 214, 0.6);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}

/* „am beliebtesten"-Badge (nur Premium): getönte Pille oben links, kein Overlay. */
.spt-package__badge {
    align-self: flex-start;
    margin: 0;
    padding: 6px 13px;
    font-family: var(--spt-font-display); font-weight: 700;
    font-size: 0.875rem; line-height: 1.4;
    color: var(--spt-color-primary);
    background: var(--spt-color-primary-tint);
    border-radius: var(--spt-radius-lg);
}

.spt-package__head { display: grid; gap: 14px; padding: 0; border: 0; }
.spt-package__title { margin: 0; text-transform: uppercase; line-height: 1.1; font-size: clamp(1.5rem, 6vw, 1.6875rem); }
.spt-package__description { margin: 0; font-size: var(--spt-fs-500); color: var(--spt-color-ink); }

/* Preis (priceInfo, Freitext): prominent, Premium in Primärrot. */
.spt-package__price {
    margin: 0;
    font-family: var(--spt-font-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.5rem, 6vw, 1.6875rem); line-height: 1.1;
    color: var(--spt-color-ink);
}
.spt-package--premium .spt-package__price { color: var(--spt-color-primary); }

/* Benefits mit Trennlinie darüber + Häkchen-Icon (Inline-SVG). */
.spt-package__benefits {
    list-style: none;
    margin: 0;
    padding: var(--spt-space-lg) 0 0;
    border-top: 1px solid var(--spt-color-border);
    display: grid;
    gap: var(--spt-space-lg);
}
.spt-package__benefit { display: flex; align-items: center; gap: 10px; }
.spt-package__check {
    flex: 0 0 20px; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--spt-color-primary);
    background: var(--spt-color-primary-tint);
    border-radius: var(--spt-radius-pill);
}
.spt-package__benefit-label { font-size: var(--spt-fs-400); line-height: 1.4; color: var(--spt-color-ink); }

.spt-package__reach {
    margin: 0;
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}

/* CTA am Kartenfuß. Premium = roter Primär-Button, sonst dunkel. */
.spt-package__cta { margin-top: auto; width: 100%; }
.spt-button--dark { background: #323436; border-color: #53575a; color: #fff; }
.spt-button--dark:hover { background: var(--spt-color-ink); color: #fff; }

.spt-package--premium { border-color: var(--spt-color-primary); }

/* Danke / Spender:innen */
.spt-thanks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 40em) { .spt-thanks__list { grid-template-columns: repeat(2, 1fr); } }
.spt-thanks__item {
    display: flex;
    align-items: center;
    gap: var(--spt-space-md);
    padding: var(--spt-space-md);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius);
}
.spt-thanks__text { margin: 0; }

/* Mein Bereich (rollenabhängiges Dashboard, Plugin sptcore_area) */
.spt-area__badge-line { margin: 0 0 var(--spt-space-md); }
.spt-area__badge {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: var(--spt-radius-pill);
    background: var(--spt-color-primary);
    color: var(--spt-color-on-dark);
    font-weight: 700;
    font-size: var(--spt-fs-300);
}
.spt-area__tiles {
    list-style: none;
    margin: 0 0 var(--spt-space-lg);
    padding: 0;
    display: grid;
    gap: var(--spt-space-md);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.spt-area__tile {
    border: 1px solid var(--spt-color-border);
    border-radius: var(--spt-radius);
    background: var(--spt-color-bg-alt);
}
.spt-area__tile-link {
    display: flex;
    flex-direction: column;
    gap: var(--spt-space-xs);
    padding: var(--spt-space-md);
    height: 100%;
    text-decoration: none;
}
.spt-area__tile-link:hover .spt-area__tile-title,
.spt-area__tile-link:focus-visible .spt-area__tile-title { text-decoration: underline; }
.spt-area__tile-title { font-weight: 700; color: var(--spt-color-ink); }
.spt-area__tile-text { color: var(--spt-color-muted); font-size: var(--spt-fs-300); }
.spt-area__downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spt-space-sm); }
.spt-area__download {
    display: flex;
    flex-direction: column;
    gap: var(--spt-space-xs);
    padding: var(--spt-space-md);
    border: 1px solid var(--spt-color-border);
    border-radius: var(--spt-radius);
}
.spt-area__download-link { font-weight: 700; }
.spt-area__download-desc { color: var(--spt-color-muted); font-size: var(--spt-fs-300); }

/* ==========================================================================
   Kampagnen & Spenden
   ========================================================================== */
.spt-campaigns__grid {
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 40em) { .spt-campaigns__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .spt-campaigns__grid { grid-template-columns: repeat(3, 1fr); } }

.spt-campaign-card { padding-bottom: var(--spt-space-md); }
.spt-campaign-card__link { text-decoration: none; color: inherit; display: block; }
.spt-campaign-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--spt-color-bg-alt); }
.spt-campaign-card__title { padding: var(--spt-space-md) var(--spt-space-md) 0; font-size: var(--spt-fs-500); }
.spt-campaign-card__subtitle { padding: 0 var(--spt-space-md); margin: 0.2rem 0 var(--spt-space-sm); color: var(--spt-color-muted); }
.spt-campaign-card .spt-campaign-progress { padding-inline: var(--spt-space-md); }
.spt-campaign-card__more { display: inline-block; margin: var(--spt-space-sm) var(--spt-space-md) 0; font-weight: 700; }

/* Fortschritts-Balken */
.spt-campaign-progress { margin: var(--spt-space-sm) 0; }
.spt-campaign-progress__bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border: 0;
    border-radius: var(--spt-radius-pill);
    background: var(--spt-color-border);
    overflow: hidden;
}
.spt-campaign-progress__bar::-webkit-progress-bar { background: var(--spt-color-border); border-radius: var(--spt-radius-pill); }
.spt-campaign-progress__bar::-webkit-progress-value { background: var(--spt-color-primary); border-radius: var(--spt-radius-pill); }
.spt-campaign-progress__bar::-moz-progress-bar { background: var(--spt-color-primary); border-radius: var(--spt-radius-pill); }
/* Ziel uebererfuellt: Balken ist visuell voll (value == max), gruen markiert. */
.spt-campaign-progress__bar.is-overfunded::-webkit-progress-value { background: #1e6b2e; }
.spt-campaign-progress__bar.is-overfunded::-moz-progress-bar { background: #1e6b2e; }
.spt-campaign-progress__label { font-size: var(--spt-fs-300); color: var(--spt-color-muted); margin: 0.4rem 0 0; }
.spt-campaign-progress__label strong { color: var(--spt-color-ink); font-size: var(--spt-fs-400); }

/* Kampagnen-Detail */
.spt-campaign__header { margin-bottom: var(--spt-space-md); }
.spt-campaign__subtitle { font-size: var(--spt-fs-500); color: var(--spt-color-muted); }
.spt-campaign__image { width: 100%; border-radius: var(--spt-radius-lg); margin-bottom: var(--spt-space-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.spt-campaign__donate {
    margin-top: var(--spt-space-xl);
    padding: var(--spt-space-lg);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius-lg);
}
.spt-campaign__closed { color: var(--spt-color-muted); font-style: italic; }

/* Kampagnen-Teaser (Startseite, „Aktuelle Kampagne") */
.spt-campaign-teaser__card {
    background: var(--spt-color-surface);
    border-radius: var(--spt-radius-lg);
    box-shadow: var(--spt-shadow-md);
    padding: var(--spt-space-lg);
}
@media (min-width: 40em) { .spt-campaign-teaser__card { padding: var(--spt-space-xl); } }
.spt-campaign-teaser__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spt-space-sm);
    margin-bottom: var(--spt-space-md);
}
.spt-campaign-teaser__eyebrow {
    font-size: var(--spt-fs-300);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spt-color-primary);
}
.spt-campaign-teaser__badge {
    flex: none;
    font-size: var(--spt-fs-300);
    font-weight: 600;
    color: var(--spt-color-ink);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius-pill);
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}
.spt-campaign-teaser__title {
    margin: 0 0 var(--spt-space-sm);
    text-transform: uppercase;
    font-size: var(--spt-fs-600);
    line-height: 1.1;
}
.spt-campaign-teaser__text {
    margin: 0 0 var(--spt-space-lg);
    color: var(--spt-color-muted);
}
.spt-campaign-teaser__bar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: var(--spt-radius-pill);
    background: var(--spt-color-border);
    overflow: hidden;
}
.spt-campaign-teaser__bar::-webkit-progress-bar { background: var(--spt-color-border); border-radius: var(--spt-radius-pill); }
.spt-campaign-teaser__bar::-webkit-progress-value { background: var(--spt-color-primary); border-radius: var(--spt-radius-pill); }
.spt-campaign-teaser__bar::-moz-progress-bar { background: var(--spt-color-primary); border-radius: var(--spt-radius-pill); }
.spt-campaign-teaser__bar.is-overfunded::-webkit-progress-value { background: #1e6b2e; }
.spt-campaign-teaser__bar.is-overfunded::-moz-progress-bar { background: #1e6b2e; }
.spt-campaign-teaser__amounts {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spt-space-sm);
    margin: var(--spt-space-sm) 0 var(--spt-space-lg);
}
.spt-campaign-teaser__raised { color: var(--spt-color-primary); font-size: var(--spt-fs-500); font-weight: 700; }
.spt-campaign-teaser__goal { color: var(--spt-color-muted); font-size: var(--spt-fs-300); }
.spt-campaign-teaser__cta { display: block; width: 100%; text-align: center; }

/* Spendenformular */
.spt-donation, .spt-donation-form { max-width: var(--spt-container-narrow); }
.spt-donation__intro { color: var(--spt-color-muted); }
.spt-donation-form__campaign { font-size: var(--spt-fs-400); }
.spt-donation-fieldset { border: 0; margin: 0 0 var(--spt-space-md); padding: 0; }
.spt-donation-fieldset legend { font-weight: 700; padding: 0; margin-bottom: var(--spt-space-sm); }
.spt-donation-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--spt-space-md); }
.spt-donation-quick__btn {
    min-height: 48px;
    padding: 0.6rem 1.2rem;
    font: inherit;
    font-weight: 700;
    background: var(--spt-color-surface);
    border: 2px solid var(--spt-color-border-strong);
    border-radius: var(--spt-radius-pill);
    cursor: pointer;
    transition: border-color var(--spt-transition), background var(--spt-transition);
}
.spt-donation-quick__btn:hover { border-color: var(--spt-color-primary); color: var(--spt-color-primary-dark); }
/* Aktive Schnellwahl (per JS gesetzt) – spiegelt aria-pressed="true". */
.spt-donation-quick__btn.is-active,
.spt-donation-quick__btn[aria-pressed="true"] {
    background: var(--spt-color-primary);
    border-color: var(--spt-color-primary);
    color: #fff;
}
.spt-donation-field { margin-bottom: var(--spt-space-md); }
.spt-donation-field__label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.spt-donation-required { color: var(--spt-color-primary); }
.spt-donation-field__hint { margin: 0.35rem 0 0; font-size: var(--spt-fs-300); color: var(--spt-color-muted); }
.spt-donation-field--check { display: flex; align-items: flex-start; gap: 0.6rem; }
.spt-donation-field--check input { width: auto; min-height: 0; margin-top: 0.3rem; }
.spt-donation-field--check label { font-weight: 500; margin: 0; }
.spt-donation-privacy { font-size: var(--spt-fs-300); color: var(--spt-color-muted); }
.spt-donation-submit { /* erbt von .spt-button-Stil über Markup; Fallback hier */
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0.7rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--spt-radius-pill);
    background: var(--spt-color-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.spt-donation-submit:hover { background: var(--spt-color-primary-dark); }

/* Flash-Message-Region am Spendenformular (leer = kein Platzverbrauch) */
.spt-donation__messages:empty { display: none; }

/* Danke-/Status-Seite nach Mollie-Redirect */
.spt-donation-thanks {
    max-width: var(--spt-container-narrow);
    margin-inline: auto;
    padding: var(--spt-space-xl);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius-lg);
    border-top: 4px solid var(--spt-color-border-strong);
    text-align: center;
}
.spt-donation-thanks--ok { border-top-color: #1e6b2e; }
.spt-donation-thanks--pending { border-top-color: #b8860b; }
.spt-donation-thanks--failed { border-top-color: var(--spt-color-primary); }
.spt-donation-thanks__icon {
    font-size: 2.5rem;
    line-height: 1;
    margin: 0 0 var(--spt-space-sm);
}
.spt-donation-thanks--ok .spt-donation-thanks__icon { color: #1e6b2e; }
.spt-donation-thanks--pending .spt-donation-thanks__icon { color: #b8860b; }
.spt-donation-thanks--failed .spt-donation-thanks__icon { color: var(--spt-color-primary); }
.spt-donation-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spt-space-sm);
    justify-content: center;
    margin: var(--spt-space-lg) 0 0;
}

/* ==========================================================================
   News & Events
   ========================================================================== */
.spt-news-teaser__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 40em) { .spt-news-teaser__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .spt-news-teaser__grid { grid-template-columns: repeat(3, 1fr); } }

.spt-news-card__link, .spt-news-card a { text-decoration: none; color: inherit; }
.spt-news-card__image, .spt-news-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--spt-color-bg-alt); }

/* Startseiten-Teaser-Variante (.spt-news-card als <li> mit __link-Wrapper).
   Titel als Block + overflow-wrap, damit lange Titel/URLs sauber umbrechen
   und nicht aus dem Padding laufen (Fix Layout-Bruch, kein CLS). */
.spt-news-teaser .spt-news-card__link { display: block; }
.spt-news-card__date {
    display: block;
    padding: var(--spt-space-sm) var(--spt-space-md) 0;
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}
.spt-news-teaser .spt-news-card__title {
    display: block;
    padding: 0.2rem var(--spt-space-md) var(--spt-space-md);
    margin: 0;
    font-size: var(--spt-fs-500);
    color: var(--spt-color-ink);
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* ----- News-Listenansicht (eigenes Override-Partial List/Item.html) -------
   Responsives Card-Grid analog zu Athlet:innen/Events. .spt-news-card teilt
   sich die Card-Optik (Border/Surface/Shadow) mit der Sammelregel oben. */
.spt-news-list {
    display: grid;
    gap: var(--spt-space-lg);
    grid-template-columns: 1fr;
}
@media (min-width: 40em) { .spt-news-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .spt-news-list { grid-template-columns: repeat(3, 1fr); } }

.spt-news-card__media { position: relative; }
.spt-news-card__media--placeholder {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--spt-color-bg-alt), var(--spt-color-border-strong));
}
.spt-news-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spt-space-xs);
    /* min-width:0 verhindert, dass langer Inhalt das Grid-/Flex-Item sprengt. */
    min-width: 0;
    padding: var(--spt-space-md);
}
.spt-news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem var(--spt-space-sm);
    margin: 0;
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}
.spt-news-card__category {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    background: var(--spt-color-primary-tint);
    color: var(--spt-color-primary-dark);
    border-radius: var(--spt-radius-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.spt-news-card__body .spt-news-card__title {
    margin: 0;
    font-size: var(--spt-fs-500);
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.spt-news-card__body .spt-news-card__title a { color: var(--spt-color-ink); }
/* Ganze Karte klickbar über Stretched-Link, Fokus/Hover bleiben am Titel. */
.spt-news-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.spt-news-card__teaser {
    margin: 0;
    color: var(--spt-color-text);
    overflow-wrap: anywhere;
}
.spt-news-card__more {
    margin-top: auto;
    padding-top: var(--spt-space-xs);
    font-weight: 700;
    color: var(--spt-color-primary);
    /* über dem Stretched-Link, damit der „mehr"-Link separat fokussierbar bleibt
       (er zeigt aufs selbe Ziel, ist aber kein zweites verdecktes Klickfeld). */
    position: relative;
    z-index: 1;
}
.spt-news-card__more:hover { color: var(--spt-color-primary-dark); }
.no-news-found {
    padding: var(--spt-space-lg);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius);
    color: var(--spt-color-muted);
}

/* Filter-Chips (Event-Kategorien, generisch wiederverwendbar).
   Touch-Target >= 44px (min-height), klar als interaktiv erkennbar (Pill,
   Border, Hover). Aktiver Zustand zusätzlich über ein vorangestelltes
   Häkchen (::before) – nicht nur Farbe (WCAG 1.4.1). Fokus erbt den globalen
   :focus-visible-Ring aus main.css. */
.spt-event-filter,
.spt-news-filter { margin-bottom: var(--spt-space-lg); }
.spt-event-filter__chips,
.spt-news-filter__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spt-space-xs);
}
.spt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 1.1rem;
    background: var(--spt-color-surface);
    color: var(--spt-color-ink);
    border: 2px solid var(--spt-color-border-strong);
    border-radius: var(--spt-radius-pill);
    font-size: var(--spt-fs-300);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--spt-transition), border-color var(--spt-transition), color var(--spt-transition);
}
.spt-chip:hover {
    border-color: var(--spt-color-primary);
    color: var(--spt-color-primary-dark);
}
.spt-chip--active {
    background: var(--spt-color-primary);
    border-color: var(--spt-color-primary);
    color: #fff;
}
.spt-chip--active:hover { color: #fff; }
/* Häkchen als zweites, nicht-farbliches Unterscheidungsmerkmal des aktiven Chips. */
.spt-chip--active::before {
    content: "\2713";
    font-size: 0.9em;
    line-height: 1;
}

/* Events-Listenansicht – nutzt die kompakte Teaser-Item-Optik (.spt-event-item)
   und verdichtet sie über den Modifier --list weiter. */
.spt-event-list {
    list-style: none;
    margin: 0 0 var(--spt-space-lg);
    padding: 0;
    display: grid;
    gap: var(--spt-space-xs);
}

/* Events-Teaser (Startseite): Hero + 2 kompakte Items */
.spt-events-teaser__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spt-space-md);
}
.spt-events-teaser__eyebrow {
    margin: 0 0 var(--spt-space-2xs);
    font-size: var(--spt-fs-300);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spt-color-muted);
}
.spt-events-teaser__title { margin: 0; }
.spt-events-teaser__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--spt-color-primary);
}
.spt-events-teaser__more:hover { color: var(--spt-color-primary-dark); }
.spt-events-teaser__empty {
    padding: var(--spt-space-lg);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius);
    color: var(--spt-color-muted);
}

/* Hero-Event */
.spt-event-hero {
    margin-bottom: var(--spt-space-lg);
    border-radius: var(--spt-radius);
    overflow: hidden;
    box-shadow: var(--spt-shadow-sm);
    transition: box-shadow var(--spt-transition), transform var(--spt-transition);
}
.spt-event-hero:hover { box-shadow: var(--spt-shadow-md); transform: translateY(-2px); }
.spt-event-hero__link { display: block; text-decoration: none; color: inherit; position: relative; }
.spt-event-hero__media { position: relative; }
.spt-event-hero__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--spt-color-bg-alt);
}
.spt-event-hero__image--placeholder {
    background: linear-gradient(135deg, var(--spt-color-bg-alt), var(--spt-color-border-strong));
}
.spt-event-hero__badge {
    position: absolute;
    top: var(--spt-space-md);
    left: var(--spt-space-md);
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--spt-color-primary);
    color: #fff;
    font-size: var(--spt-fs-300);
    font-weight: 700;
    border-radius: var(--spt-radius-pill);
}
/* Titel/Datum auf dem Bild – Gradient für Kontrast (WCAG-Lesbarkeit) */
.spt-event-hero__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--spt-space-xl) var(--spt-space-md) var(--spt-space-md);
    background: linear-gradient(to top, rgba(26, 26, 24, 0.85), rgba(26, 26, 24, 0));
    color: var(--spt-color-on-dark);
}
.spt-event-hero__title { margin: 0 0 0.3rem; color: #fff; font-size: var(--spt-fs-600); }
.spt-event-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--spt-fs-400);
    font-weight: 600;
    color: var(--spt-color-on-dark);
}

/* Kompakte Event-Items unter dem Hero */
.spt-events-teaser__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-md);
}
.spt-event-item {
    background: var(--spt-color-surface);
    border: 1px solid var(--spt-color-border);
    border-radius: var(--spt-radius);
    box-shadow: var(--spt-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--spt-transition);
}
.spt-event-item:hover { box-shadow: var(--spt-shadow-md); }
/* Fokus innen halten: .spt-event-item hat overflow:hidden, sonst würde der
   globale :focus-visible-Outline (offset 2px) am Card-Rand abgeschnitten. */
.spt-event-item__link:focus-visible { outline-offset: -3px; }
.spt-event-item__link {
    display: flex;
    align-items: center;
    gap: var(--spt-space-md);
    padding: var(--spt-space-sm);
    text-decoration: none;
    color: inherit;
}
.spt-event-item__media { flex: 0 0 auto; }
.spt-event-item__image {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--spt-radius-sm);
    background: var(--spt-color-bg-alt);
}
.spt-event-item__image--placeholder {
    background: linear-gradient(135deg, var(--spt-color-bg-alt), var(--spt-color-border-strong));
}
.spt-event-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.spt-event-item__category {
    font-size: var(--spt-fs-300);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--spt-color-primary);
}
.spt-event-item__title { font-weight: 600; color: var(--spt-color-ink); font-size: var(--spt-fs-400); }
.spt-event-item__date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}
.spt-event-item__chevron {
    flex: 0 0 auto;
    font-size: var(--spt-fs-600);
    line-height: 1;
    color: var(--spt-color-border-strong);
    padding-right: var(--spt-space-xs);
}

/* Listen-Variante: kompakter als der Startseiten-Teaser.
   Roter Akzentbalken links als visueller Anker (wie zuvor die Card),
   kleineres Thumbnail und engere Innenabstände -> weniger Höhe pro Item. */
.spt-event-item--list { border-left: 4px solid var(--spt-color-primary); }
.spt-event-item--list .spt-event-item__link {
    gap: var(--spt-space-sm);
    padding: var(--spt-space-xs) var(--spt-space-sm);
}
.spt-event-item--list .spt-event-item__image {
    width: 56px;
    height: 56px;
}
.spt-event-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem var(--spt-space-sm);
}
.spt-event-item__location {
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}
.spt-event-item__location::before {
    content: "\1F4CD";
    margin-right: 0.3rem;
}

/* ==========================================================================
   News-Detail (Artikel)
   --------------------------------------------------------------------------
   Schmale Lesespalte für Fließtext (Zeilenlänge ~65–75 Zeichen = beste
   Lesbarkeit), Lead-Bild in fester 16:9-Box gegen CLS. Reuse: .spt-eyebrow,
   .spt-badge, .spt-button.
   ========================================================================== */
.spt-article { max-width: var(--spt-container-narrow); margin-inline: auto; }
.spt-article__header { margin-bottom: var(--spt-space-lg); }
.spt-article__title { margin: 0 0 var(--spt-space-sm); }
.spt-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem var(--spt-space-md);
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}
.spt-article__date { font-weight: 600; }
.spt-article__author span { color: var(--spt-color-ink); }
.spt-article__categories {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: var(--spt-space-sm) 0 0;
    padding: 0;
}

.spt-article__lead { margin: 0 0 var(--spt-space-lg); }
.spt-article__lead-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--spt-radius);
    background: var(--spt-color-bg-alt);
}
.spt-article__caption {
    margin-top: var(--spt-space-xs);
    font-size: var(--spt-fs-300);
    color: var(--spt-color-muted);
}

.spt-article__body { font-size: var(--spt-fs-400); }
.spt-article__lead-text {
    font-size: var(--spt-fs-500);
    font-weight: 600;
    color: var(--spt-color-ink);
}
.spt-article__text > * + * { margin-top: var(--spt-space-md); }
.spt-article__text img { border-radius: var(--spt-radius-sm); margin-block: var(--spt-space-md); }
.spt-article__text h2 { margin-top: var(--spt-space-xl); }
.spt-article__text h3 { margin-top: var(--spt-space-lg); }

.spt-article__gallery {
    list-style: none;
    margin: var(--spt-space-lg) 0 0;
    padding: 0;
    display: grid;
    gap: var(--spt-space-md);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.spt-article__gallery-item { margin: 0; }
.spt-article__gallery-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--spt-radius);
    background: var(--spt-color-bg-alt);
}

.spt-article__related,
.spt-article__downloads {
    margin-top: var(--spt-space-xl);
    padding-top: var(--spt-space-lg);
    border-top: 1px solid var(--spt-color-border);
}
.spt-article__related-title { font-size: var(--spt-fs-500); }
.spt-article__related-list,
.spt-article__downloads-list { list-style: none; margin: 0; padding: 0; }
.spt-article__related-item + .spt-article__related-item { margin-top: var(--spt-space-xs); }
.spt-article__related-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: var(--spt-space-sm);
    border-radius: var(--spt-radius-sm);
    text-decoration: none;
    color: inherit;
}
.spt-article__related-link:hover { background: var(--spt-color-bg-alt); }
.spt-article__related-date { font-size: var(--spt-fs-300); color: var(--spt-color-muted); font-weight: 600; }
.spt-article__related-headline { font-weight: 600; color: var(--spt-color-ink); }
.spt-article__download { font-weight: 600; }
.spt-article__download-size { font-weight: 400; color: var(--spt-color-muted); font-size: var(--spt-fs-300); }
.spt-article__back { margin-top: var(--spt-space-xl); }

/* ==========================================================================
   Event-Detail
   --------------------------------------------------------------------------
   Hero (Lead-Bild 16:9 mit Kategorie-Badge) + Kopf, darunter zweispaltig:
   Fließtext links, Eckdaten-Box (Definition-List) als Aside rechts.
   Auf Mobile gestapelt (Eckdaten zuerst über den Text? -> Text zuerst,
   Eckdaten danach – Lesefluss). Reuse: .spt-eyebrow, .spt-button.
   ========================================================================== */
.spt-event-detail__hero { margin-bottom: var(--spt-space-lg); }
.spt-event-detail__media {
    position: relative;
    border-radius: var(--spt-radius-lg);
    overflow: hidden;
}
.spt-event-detail__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--spt-color-bg-alt);
}
.spt-event-detail__image--placeholder {
    background: linear-gradient(135deg, var(--spt-color-bg-alt), var(--spt-color-border-strong));
}
.spt-event-detail__badge {
    position: absolute;
    top: var(--spt-space-md);
    left: var(--spt-space-md);
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--spt-color-primary);
    color: #fff;
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-size: var(--spt-fs-300);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--spt-radius-pill);
}
.spt-event-detail__head { margin-top: var(--spt-space-lg); }
.spt-event-detail__title { margin: 0 0 var(--spt-space-sm); }
.spt-event-detail__head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem var(--spt-space-md);
    margin: 0;
    font-size: var(--spt-fs-500);
    color: var(--spt-color-muted);
}
.spt-event-detail__head-date { font-weight: 600; color: var(--spt-color-ink); }
.spt-event-detail__head-location::before { content: "\1F4CD"; margin-right: 0.3rem; }

.spt-event-detail__grid { display: grid; gap: var(--spt-space-xl); }
@media (min-width: 56em) {
    .spt-event-detail__grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.spt-event-detail__teaser {
    font-size: var(--spt-fs-500);
    font-weight: 600;
    color: var(--spt-color-ink);
}
.spt-event-detail__text > * + * { margin-top: var(--spt-space-md); }
.spt-event-detail__program,
.spt-event-detail__downloads { margin-top: var(--spt-space-lg); }
.spt-event-detail__program h2,
.spt-event-detail__downloads h2 { font-size: var(--spt-fs-500); }
.spt-event-detail__downloads-list { list-style: none; margin: 0; padding: 0; }
.spt-event-detail__download { font-weight: 600; }
.spt-event-detail__download-size { font-weight: 400; color: var(--spt-color-muted); font-size: var(--spt-fs-300); }

/* Eckdaten-Box: optisch eine Karte, auf Desktop sticky neben dem Text */
.spt-event-detail__facts {
    padding: var(--spt-space-lg);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius-lg);
}
@media (min-width: 56em) {
    .spt-event-detail__facts { position: sticky; top: calc(var(--spt-header-h) + var(--spt-space-md)); }
}
.spt-event-detail__facts-title { font-size: var(--spt-fs-500); margin-top: 0; }
.spt-event-detail__dl { margin: 0; }
.spt-event-detail__dl-row { padding: var(--spt-space-sm) 0; border-bottom: 1px solid var(--spt-color-border); }
.spt-event-detail__dl-row:last-child { border-bottom: 0; }
.spt-event-detail__dl dt {
    font-size: var(--spt-fs-300);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--spt-color-muted);
    margin-bottom: 0.15rem;
}
.spt-event-detail__dl dd { margin: 0; color: var(--spt-color-text); }
.spt-event-detail__place-name { display: block; font-weight: 600; color: var(--spt-color-ink); }
.spt-event-detail__place-address,
.spt-event-detail__place-room { display: block; font-size: var(--spt-fs-300); color: var(--spt-color-muted); }
.spt-event-detail__speakers { list-style: none; margin: 0; padding: 0; }
.spt-event-detail__actions { display: flex; flex-wrap: wrap; gap: var(--spt-space-sm); margin-top: var(--spt-space-lg); }

.spt-event-detail__related {
    margin-top: var(--spt-space-xl);
    padding-top: var(--spt-space-lg);
    border-top: 1px solid var(--spt-color-border);
}
.spt-event-detail__related-title { font-size: var(--spt-fs-500); }
.spt-event-detail__related-list { list-style: none; margin: 0; padding: 0; }
.spt-event-detail__related-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: var(--spt-space-sm);
    border-radius: var(--spt-radius-sm);
    text-decoration: none;
    color: inherit;
}
.spt-event-detail__related-link:hover { background: var(--spt-color-bg-alt); }
.spt-event-detail__related-date { font-size: var(--spt-fs-300); color: var(--spt-color-muted); font-weight: 600; }
.spt-event-detail__related-headline { font-weight: 600; color: var(--spt-color-ink); }
.spt-event-detail__back { margin-top: var(--spt-space-xl); }

/* ==========================================================================
   Auth / Self-Service (Onboarding, Profil)
   ========================================================================== */
.spt-onboarding, .spt-editprofile { max-width: var(--spt-container-narrow); }
.spt-editprofile__gallery {
    display: grid;
    gap: var(--spt-space-md);
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin-bottom: var(--spt-space-md);
}
.spt-editprofile__photo { margin: 0; }
.spt-editprofile__photo img { width: 100%; border-radius: var(--spt-radius-sm); aspect-ratio: 1 / 1; object-fit: cover; }
.spt-editprofile__photo label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: var(--spt-fs-300); margin-top: 0.35rem; }
.spt-editprofile__photo input { width: auto; min-height: 0; }
.spt-form__row--social { display: flex; gap: var(--spt-space-sm); }
.spt-form__row--social select { flex: 0 0 11rem; }
.spt-form__row--fact { display: flex; gap: var(--spt-space-sm); }
.spt-form__row--fact input:first-child { flex: 0 0 11rem; }
.spt-editprofile__view-link { margin-bottom: var(--spt-space-md); font-weight: 600; }

/* ==========================================================================
   Vereins-Bereich & Talent-Nominierung (Briefing v2)
   Baut auf den generischen .spt-form/.spt-button/.spt-message-Stilen (main.css)
   auf; hier nur bereichsspezifisches Layout. Mobile-first: einspaltig, ab
   Tablet-Breite werden zusammengehörige Felder (Vor-/Nachname, Jahrgang/Sparte)
   nebeneinander gesetzt.
   ========================================================================== */
.spt-talentnom, .spt-clubarea { max-width: var(--spt-container-narrow); }
.spt-talentnom__intro, .spt-clubarea__intro { color: var(--spt-color-muted); }
.spt-talentnom__form { max-width: none; }

/* Pflichtfeld-Markierung: Farbe genügt nicht (WCAG 1.4.1) – das „*" ist ein
   zusätzliches, nicht-farbliches Signal, deshalb aria-hidden im Markup. */
.spt-talentnom__required { color: var(--spt-color-primary); font-weight: 700; }

/* Flash-Message-Container erst sichtbar machen, wenn befüllt (kein Leerraum). */
.spt-talentnom__messages:empty, .spt-clubarea__messages:empty { display: none; }

.spt-talentnom__actions, .spt-clubarea .spt-talentnom__actions { margin-top: var(--spt-space-lg); }

/* Bereichs-Abschnitte der Übersicht klar voneinander absetzen. */
.spt-clubarea__subheading { margin-top: 0; }
.spt-clubarea__info, .spt-clubarea__nomination {
    margin-top: var(--spt-space-lg);
    padding-top: var(--spt-space-lg);
    border-top: 1px solid var(--spt-color-border);
}
.spt-clubarea__info-text { color: var(--spt-color-muted); }

/* Zwei-Spalten-Zeilen ab Tablet; darunter gestapelt (mobile-first). */
@media (min-width: 40rem) {
    .spt-talentnom__row--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spt-space-md);
    }
    .spt-talentnom__row--split .spt-form__field { margin-bottom: 0; }
}

/* ==========================================================================
   Startseiten-Conversion-Cards (Figma-FINAL)
   - Sponsoren-CTA  (2173:946): dunkle Gradient-Card, Versal-Headline 38px
   - Recruiting     (2243:3323): helle Rot-Tint-Card, Versal-Headline 50px rot
   Beide teilen Card-Rahmen (radius 12, padding 40/20, gap 20, weiche Schatten).
   ========================================================================== */
.spt-cta-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spt-space-lg);
    margin-top: var(--spt-space-2xl);
    padding: var(--spt-space-xl) var(--spt-space-lg);
    border-radius: var(--spt-radius);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05), var(--spt-shadow-md);
}
.spt-cta-card > * { margin: 0; }

/* Dunkle Variante (Sponsoren-CTA): Diagonal-Gradient wie im FINAL. */
.spt-cta-card--dark {
    background-image: linear-gradient(134deg, #1a1a18 1%, rgba(26, 26, 24, 0.9) 99%);
    color: var(--spt-color-on-dark);
}
/* Eyebrow auf Dunkel: helleres Marken-Rot (#ff5a3c ≈ 5,9:1 auf Ink) statt
   #da251d (nur ~3,7:1 → unter WCAG-AA für 16px-Normaltext). */
.spt-cta-card--dark .spt-eyebrow { color: var(--spt-color-primary-on-dark); }

/* Helle Rot-Tint-Variante (Recruiting/Talente Club). */
.spt-cta-card--tint {
    background: #fceae9;
    border: 1px solid var(--spt-color-primary);
    color: var(--spt-color-ink);
}

.spt-cta-card__title {
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-size: clamp(2rem, 6vw + 0.6rem, 2.375rem);   /* Figma: 38px */
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--spt-color-on-dark);
}
/* Recruiting-Headline: größer (50px) und in Markenrot. */
.spt-cta-card__title--primary {
    font-size: clamp(2.5rem, 9vw + 0.4rem, 3.125rem);  /* Figma: 50px */
    line-height: 1;
    color: var(--spt-color-primary);
}
.spt-cta-card__body {
    font-family: var(--spt-font-base);
    font-size: var(--spt-fs-500);                       /* Figma: 18px */
    line-height: 1.4;
    color: inherit;
    max-width: 42ch;
}

/* Ink-Badge (Recruiting): weiße Versalien-Schrift auf Ink, Pill. */
.spt-cta-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--spt-radius-lg);
    background: var(--spt-color-ink);
    color: #fff;
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
}

/* Aktionen der dunklen Card: Primär-Button + Text-Link „Ich möchte spenden". */
.spt-cta-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spt-space-md);
}
.spt-cta-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--spt-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
}
.spt-cta-card__link:hover { color: var(--spt-color-primary-on-dark); }
.spt-cta-card__link:hover .spt-cta-card__arrow { transform: translateX(3px); }
.spt-cta-card__arrow { transition: transform var(--spt-transition); }

/* Benefit-Liste (Recruiting): Check-Icon in Rot-Tint-Kreis + Label. */
.spt-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spt-space-md);
    width: 100%;
}
.spt-benefits__item { display: flex; align-items: center; gap: 0.625rem; }
.spt-benefits__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--spt-radius-pill);
    background: var(--spt-color-primary-tint);
    color: var(--spt-color-primary);
}
.spt-benefits__label {
    font-family: var(--spt-font-condensed);
    font-weight: 700;
    font-size: var(--spt-fs-500);                       /* Figma: 18px */
    line-height: 1.4;
    color: var(--spt-color-ink);
}

/* ==========================================================================
   Login (Figma-FINAL 2054:973) – zentrale FE-Login-Maske
   ========================================================================== */
.spt-login {
    max-width: 34rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
/* Close/Zurück – runder Button oben rechts. */
.spt-login__close {
    align-self: flex-end;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: var(--spt-space-lg);
    font-size: 1.6rem; line-height: 1;
    color: var(--spt-color-ink);
    background: var(--spt-color-bg-alt);
    border-radius: var(--spt-radius-pill);
    text-decoration: none;
    transition: background var(--spt-transition);
}
.spt-login__close:hover { background: var(--spt-color-border-strong); color: var(--spt-color-ink); }

.spt-login__inner { display: grid; gap: var(--spt-space-xl); }
.spt-login__head { display: grid; gap: var(--spt-space-md); }
.spt-login__title { margin: 0; text-transform: uppercase; }   /* H1 – Display-Font via h1-Regel */
.spt-login__intro { margin: 0; font-size: var(--spt-fs-500); color: var(--spt-color-ink); }

/* Formular: Felder rounded 12, Labels in Barlow Condensed regular. */
.spt-form--login { max-width: none; display: grid; gap: var(--spt-space-md); }
.spt-form--login .spt-form__row { margin-bottom: 0; }
.spt-form--login label {
    font-family: var(--spt-font-condensed); font-weight: 400;
    font-size: 1rem; color: var(--spt-color-ink); margin-bottom: 0.5rem;
}
.spt-form--login input[type="email"],
.spt-form--login input[type="password"] {
    border-color: var(--spt-color-border-strong);
    border-radius: var(--spt-radius);
}

/* „Angemeldet bleiben" + „Passwort vergessen" in einer Zeile. */
.spt-login__options {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spt-space-md); flex-wrap: wrap;
}
.spt-form--login .spt-login__remember {
    display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
    font-family: var(--spt-font-condensed); font-weight: 400; cursor: pointer;
}
.spt-form--login .spt-login__remember input {
    width: auto; min-height: 0; margin: 0; accent-color: var(--spt-color-primary);
}
.spt-login__forgot {
    font-family: var(--spt-font-condensed);
    color: var(--spt-color-ink); text-decoration: underline;
}
.spt-login__forgot:hover { color: var(--spt-color-primary); }

.spt-login__submit { width: 100%; }

.spt-login__message {
    padding: var(--spt-space-md); border-radius: var(--spt-radius);
    background: var(--spt-color-surface); border: 1px solid var(--spt-color-border);
}
.spt-login__message-title { margin: 0 0 var(--spt-space-xs); font-size: var(--spt-fs-500); }