/* =========================================================================
   SportStart – Inhaltsseiten-Skin (Header/Footer/Standort)
   Farbwelt: Grün/Pink aus dem Design-Handoff (Basis) + Orange als warmer Akzent
   ("Mischung", 2026-07-01). Fonts wie im Splash: Baloo 2 (Headlines) / Nunito (Text).
   ========================================================================= */

:root {
    /* Marke */
    /* === NUR ORIGINALFARBEN (T-18, Entscheidung Stephan/Michael 2026-08-19). ===
       Quelle: Grafik/AUFBEREITET/README.md (Styleguide Aug 2018) + Floh-Figurenpalette.
       KEINE abgeleiteten Töne mehr (green-strong/deep/ink, pink-strong/deep, orange-dark sind
       ersatzlos entfallen). Regel dahinter: Marken-Hue = FLÄCHE, Text darauf ist Ink oder Weiß.
       Als Textfarbe auf Weiß trägt von den Markenfarben NUR Blau (5,39). */
    --green: #b5c800;        /* Styleguide-Grün: Fläche/Akzent – Text darauf IMMER Ink (8,26); weiß = 1,87 ✗ */
    --green-tint: #f7f9e6;   /* helle grüne Füllfläche (Ink darauf 14,45) */
    --pink: #e94268;         /* Styleguide-Pink: Fläche. Weiß darauf nur ab 18,66px fett (3,86 ≥ 3,0) */
    --orange: #f68712;       /* Floh-Figuren-Orange – NUR Illustration, NIE Bedienelement (T-18) */
    --orange-soft: #ffb347;  /* Floh-Verlauf (Illustration) */
    --blue: #466f89;         /* Styleguide-Blau: einzige Markenfarbe, die als TEXT trägt (5,39) */
    /* Flächen & Text (W10: wärmer) */
    --cream: #fff8ec;      /* warmer heller Hintergrund */
    --sand: #fdeede;       /* leicht wärmere Fläche */
    --ink: #2a2320;        /* Haupt-Text (warm-schwarz, W10) */
    --ink-soft: #6b615a;   /* Sekundärtext (W10) */
    --muted: var(--ink-soft); /* Alias (Altbestand) */
    --line: #ece2d4;       /* Trennlinien (W10, wärmer) */
    --bg: #ffffff;
    /* Radien (W10) */
    --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
    --radius: var(--r-md); /* Alias (Altbestand) */
    /* Schatten warm getönt (W10) */
    --sh-1: 0 2px 8px rgba(60,45,20,.06);
    --sh-2: 0 10px 24px rgba(60,45,20,.10);
    --sh-3: 0 20px 44px rgba(60,45,20,.16);
    --sh-pink: 0 12px 26px rgba(233,66,104,.30);  /* Original-Pink */
    --sh-green: 0 12px 26px rgba(181,200,0,.35);  /* Original-Grün (T-18, vorher green-strong) */
    --sh-blue: 0 12px 26px rgba(70,111,137,.30);  /* Original-Blau */
    /* Spacing 8pt (W10) */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
    /* Type-Skala fluid (W10) */
    --t-hero: clamp(40px, 6vw, 82px);
    --t-h2: clamp(26px, 3vw, 40px);
    --t-h3: clamp(20px, 2vw, 26px);
    --t-lead: clamp(17px, 1.5vw, 21px);
    --t-kicker: 13px;
    --wrap: 1160px;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: "Baloo 2", var(--font-body);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.05; color: var(--ink); font-weight: 800; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: transform .12s ease, box-shadow .16s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--pink); color: #fff; box-shadow: 0 10px 22px rgba(233,66,104,.28); }
.btn-primary:hover { background: var(--pink); color: #fff; }
.btn-blau { background: var(--blue); color: #fff; box-shadow: 0 10px 22px rgba(70,111,137,.28); }
.btn-blau:hover { background: var(--blue); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--green); }
.btn-ghost:hover { background: var(--green-tint); }

/* --- Header --- */
.site-header { border-bottom: 3px solid var(--green); background: #fff; position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; }
.logo img { display: block; height: 48px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav > a { color: var(--ink); font-weight: 800; }
.main-nav > a:hover { color: var(--blue); text-decoration: none; }
.main-nav > a.btn { color: #fff; }
.main-nav > a.btn-ghost { color: var(--ink); }

/* --- Hero --- */
.hero { background: var(--green-tint); padding: 56px 0; border-bottom: 4px solid var(--green); }
.hero h1 { margin: 0 0 8px; }
.hero-adresse { color: var(--muted); font-size: 1.05rem; margin: 0; font-weight: 700; }
.hero-img { width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }

/* --- Intro --- */
.intro { padding: 28px 0 0; }
/* Michael 26.08.: „Überschrift eingerückt, Abstand zum Text zu groß" (beide Standorte).
   Ursache war NICHT der Inhalt, sondern dass `wrap` und `prose` auf DEMSELBEN Element sitzen:
   `.wrap` bringt `margin:0 auto` mit, `.prose` verengt auf 720px → der Text wurde in der Mitte
   zentriert, während die H1 im Hero (nur `.wrap`) am Seitenrand blieb. Ergebnis: drei verschiedene
   linke Kanten auf einer Seite. Jetzt linksbündig zum Wrap – Überschrift und Text fluchten.
   Betrifft ALLE Inhaltsseiten (seite/buchung/news-show/standort-home), nicht nur Floh-Programm. */
.prose { max-width: 760px; font-size: 1.08rem; }
/* Sitzt `prose` auf demselben Element wie `wrap` (so in allen Templates), darf die schmalere
   Textbreite die Position des Wraps NICHT verschieben: der Block bleibt auf der Wrap-Kante
   (fluchtet mit der H1), die Lesebreite begrenzen stattdessen die Kinder. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 760px; }
.lead { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose strong { color: var(--ink); }

/* --- Kurse --- */
.kurse { padding: 20px 0 64px; }
.kurse h2 { margin-bottom: 6px; }
.kurse-hint { color: var(--muted); margin-top: 0; font-weight: 700; }
.kurs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin: 26px 0; }
.kurs-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; text-align: center; background: #fff; box-shadow: 0 6px 18px rgba(40,55,10,.06); transition: transform .12s ease, box-shadow .16s ease; }
.kurs-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(40,55,10,.12); }
.kurs-figur { height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.kurs-figur img { max-height: 90px; width: auto; }
.kurs-figur-fallback { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--ink); font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kurs-card h3 { margin: 4px 0; }
.kurs-zeit { color: var(--muted); margin: 0 0 10px; font-size: .95rem; font-weight: 700; }
.kurs-preis { display: flex; gap: 8px; justify-content: center; align-items: baseline; margin: 0; }
.preis-voll { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.preis-erm { color: var(--blue); font-weight: 800; }
.preis-erm::before { content: "/ "; color: var(--muted); font-weight: 600; }
.kurse-leer { color: var(--muted); }
.kurse-quelle { color: var(--muted); font-size: .9rem; border-left: 3px solid var(--blue); padding-left: 12px; }  /* T-18: Orange war Deko */
.kurse-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* --- Redaktionelle Seiten --- */
.lead { font-size: 1.2rem; color: var(--ink); font-weight: 700; }
.page-body { padding: 8px 0 56px; }
/* (Breite jetzt einheitlich in `.prose` – die frühere Sonderbreite hier erzeugte eine zweite Kante.) */
.prose h2 { margin: 1.6em 0 .4em; }
.prose h3 { margin: 1.2em 0 .3em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose a { color: var(--blue); font-weight: 700; }
/* Buttons IM Fließtext (Seiten-Bodies aus den Seedern): `.prose a` (0,1,1) ist spezifischer als
   `.btn-*` (0,1,0) und hat die Button-Textfarbe überschrieben – blauer Text auf blauer Fläche (1,0).
   Hier zurückgeholt: Weiß auf Blau/Pink 5,39 / 3,86 (≥19px fett), Ink auf Grün 8,26. */
.prose a.btn-primary, .prose a.btn-blau { color: #fff; }
.prose a.btn-green, .prose a.btn-ghost { color: var(--ink); }
/* Paket D · Rechtstexte: Preistabelle (AGB) + Muster-Widerrufsformular (<pre>). */
.prose table { border-collapse: collapse; width: 100%; margin: .6em 0 1.2em; font-size: .98rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5em .7em; text-align: left; vertical-align: top; }
.prose thead th { background: var(--green-tint); }
/* AGB-Preistabelle (Paket D): Beträge rechtsbündig, damit die Spalten sauber untereinander stehen.
   Die Klasse stand bisher ohne Regel im Seiten-Body – gefunden per `php artisan css:klassen-pruefen`. */
.prose table.agb-preise td + td, .prose table.agb-preise th + th { text-align: right; white-space: nowrap; }
.prose pre { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: .9em 1em; overflow-x: auto; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; margin: 0 0 1.2em; }

/* --- News --- */
.news-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; background: #fff; box-shadow: 0 6px 18px rgba(40,55,10,.05); }
.news-date { color: var(--blue); font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.news-card h2 { margin: 0 0 8px; }
.news-card h2 a { color: var(--ink); text-decoration: none; }
.news-card h2 a:hover { color: var(--blue); }
.news-more { font-weight: 800; color: var(--blue); }

/* --- Footer --- */
.site-footer { background: var(--ink); color: var(--cream); padding: 40px 0; margin-top: 40px; }
.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { height: 54px; width: auto; display: block; }
.footer-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; font-family: var(--font-head); font-size: 1.2rem; color: #fff; }
.footer-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.footer-nav a { color: var(--green); font-weight: 700; }
.footer-nav a:hover { color: #fff; }
.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.legal-nav a { color: #fff; }
.copyright { color: rgba(255,248,236,.72); font-size: .85rem; margin: 0; }

/* --- W9: „Nach oben"-Rakete (Scroll-to-top) --- */
.rocket-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    /* T-18: Fläche Blau – die weiße Raketen-Silhouette braucht einen tragenden Grund (5,39);
       auf dem hellen Original-Grün wäre sie 1,87. Blau ist die UI-Farbe der Marke. */
    background: var(--blue);
    box-shadow: 0 8px 22px rgba(40,55,10,.30);
    display: flex; align-items: center; justify-content: center; overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .2s ease;
}
.rocket-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.rocket-top:hover { box-shadow: 0 12px 28px rgba(40,55,10,.36); transform: translateY(-2px) scale(1.06); }
.rocket-top:active { transform: translateY(0) scale(.97); }
.rocket-top:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.rocket-top__icon { position: relative; width: 26px; height: 30px; display: block; z-index: 2; }
.rocket-top__flame {
    position: absolute; left: 50%; bottom: 7px; width: 12px; height: 14px; transform: translateX(-50%) scaleY(0);
    transform-origin: top center; border-radius: 0 0 50% 50%;
    background: radial-gradient(60% 90% at 50% 0%, #fff3aa 0%, var(--orange) 45%, rgba(233,66,104,0) 85%);
    filter: blur(1px); opacity: 0; z-index: 1; pointer-events: none;
}
.rt-spark { position: fixed; width: 8px; height: 8px; border-radius: 2px; z-index: 59; pointer-events: none; opacity: 0; }

/* Abheben beim Klick */
.rocket-top.is-launching .rocket-top__icon { animation: rtLaunch .72s cubic-bezier(.35,0,.5,1) forwards; }
.rocket-top.is-launching .rocket-top__flame { animation: rtFlame .5s ease-out forwards; }
@keyframes rtLaunch {
    0% { transform: translateY(0) scale(1); }
    18% { transform: translateY(4px) scale(.96); }      /* kurzes Zünden */
    100% { transform: translateY(-70px) scale(.6); opacity: 0; }
}
@keyframes rtFlame {
    0% { transform: translateX(-50%) scaleY(.2); opacity: 0; }
    25% { transform: translateX(-50%) scaleY(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(.3) translateY(10px); opacity: 0; }
}

@media (max-width: 640px) {
    .rocket-top { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .rocket-top { transition: opacity .2s ease, visibility .2s; transform: none; }
    .rocket-top.is-visible { transform: none; }
    .rocket-top:hover, .rocket-top:active { transform: none; }
    .rocket-top.is-launching .rocket-top__icon,
    .rocket-top.is-launching .rocket-top__flame { animation: none; }
    .rocket-top__flame { display: none; }
}

@media (max-width: 640px) {
    .header-inner { flex-direction: column; align-items: flex-start; }
    .main-nav { gap: 12px; }
}

/* --- W8: Buchung (Yolawo, consent-gated) --- */
.buchung-frame { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 18px rgba(40,55,10,.05); overflow: hidden; margin: 10px 0 20px; }
.consent-box { padding: 30px 24px; text-align: center; }
.consent-box h3 { margin: 0 0 10px; }
.consent-box p { color: var(--muted); max-width: 540px; margin: 0 auto 16px; font-weight: 600; }
.consent-remember { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); margin-bottom: 18px; cursor: pointer; }
.buchung-embed { padding: 6px; }
.buchung-embed iframe { width: 100%; border: 0; display: block; }

/* ===================================================================
   W10 · Design-Direction-Handoff (Buttons, Hero-Slider, Karten, Bänder)
   =================================================================== */

/* --- Kicker (Sektions-Auftakt) --- */
.kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700;
    font-size:var(--t-kicker); letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:var(--s-3); }
.kicker::before { content:""; width:22px; height:3px; border-radius:2px; background:var(--pink); }

/* --- Buttons: wärmer, runder, Baloo, mit Pfeil (Handoff) ---
   T-18: Schriftgröße 19px bei font-weight 700 ⇒ „großer Text" nach WCAG (Schwelle 18,66px fett).
   Damit trägt der Primär-CTA das ORIGINAL-Pink #e94268 mit weißer Schrift regelkonform (3,86 ≥ 3,0)
   und wir brauchen keinen abgeleiteten Ton. Größe gilt für ALLE Buttons – sonst fiele der Pink-Knopf
   neben Blau/Ghost aus der Reihe. Hover ändert NIE die Fläche (kein zweiter Ton), nur Lift + Schatten. */
.btn { font-family:var(--font-head); font-weight:700; font-size:19px; letter-spacing:.01em;
    text-transform:none; padding:13px 26px; border:0; border-radius:var(--r-pill); box-shadow:var(--sh-pink);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary { background:var(--pink); color:#fff; box-shadow:var(--sh-pink); }
.btn-primary:hover { background:var(--pink); color:#fff; box-shadow:0 16px 30px rgba(233,66,104,.38); }
/* Probestunde & sekundäre CTAs: Blau statt Orange (T-18) – Orange bleibt den Floh-Figuren. */
.btn-blau { background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.btn-blau:hover { background:var(--blue); color:#fff; box-shadow:0 16px 30px rgba(70,111,137,.38); }
.btn-green { background:var(--green); color:var(--ink); box-shadow:var(--sh-green); }
.btn-green:hover { background:var(--green); color:var(--ink); box-shadow:0 16px 30px rgba(181,200,0,.45); }
.btn-ghost { background:transparent; color:var(--ink); border:2px solid var(--ink); box-shadow:none; padding:12px 24px; }
.btn-ghost:hover { background:var(--ink); color:#fff; }
.btn:hover { transform:translateY(-2px); }
/* Stand vorher VOR .btn und war damit wirkungslos (gleiche Spezifität, frühere Regel). */
.btn-lg { padding:16px 32px; font-size:21px; }
.btn .arr { transition:transform .15s ease; }
.btn:hover .arr { transform:translateX(3px); }

/* --- Hero-Foto-Slider (Standortseiten) --- */
.hero-slider { position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:min(560px,72vh);
    box-shadow:var(--sh-3); background:#111; isolation:isolate; margin-bottom:var(--s-6); }
.hero-slider__slide { position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hero-slider__slide.is-active { opacity:1; }
.hero-slider__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.hero-slider__slide.is-active .hero-slider__img { animation:heroKenburns 7s ease-out forwards; }
@keyframes heroKenburns { from{transform:scale(1.06)} to{transform:scale(1.16)} }
.hero-slider__scrim { position:absolute; inset:0; z-index:2;
    background:linear-gradient(90deg, rgba(30,22,10,.72) 0%, rgba(30,22,10,.38) 42%, transparent 70%); }
.hero-slider__copy { position:absolute; z-index:3; left:0; bottom:0; padding:clamp(24px,5vw,64px); max-width:640px; color:#fff; }
.hero-slider__copy .kicker { color:#fff; }
.hero-slider__copy h1 { color:#fff; font-size:var(--t-hero); line-height:1.05; margin:0; text-wrap:balance; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.hero-slider__copy p { margin-top:var(--s-4); font-size:var(--t-lead); color:#fff; opacity:.95; max-width:38ch; }
.hero-cta { display:flex; gap:var(--s-3); margin-top:var(--s-5); flex-wrap:wrap; }
.hero-slider__copy .btn-ghost { color:#fff; border-color:#fff; background:transparent; }
.hero-slider__copy .btn-ghost:hover { background:#fff; color:var(--ink); }
.hero-slider__badge { position:absolute; z-index:3; top:clamp(18px,4vw,34px); right:clamp(18px,4vw,34px);
    background:#fff; color:var(--ink); font-family:var(--font-head); font-weight:700; border-radius:var(--r-pill);
    padding:10px 18px; box-shadow:var(--sh-2); display:flex; align-items:center; gap:8px; font-size:14px; }
.hero-slider__badge .dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(181,200,0,.25); }
.hero-slider__dots { position:absolute; z-index:4; left:clamp(24px,5vw,64px); bottom:16px; display:flex; gap:9px; }
.hero-slider__dots button { width:11px; height:11px; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.45); transition:all .2s ease; }
.hero-slider__dots button[aria-current="true"] { background:#fff; width:30px; border-radius:var(--r-pill); }
.hero-slider__arrows { position:absolute; z-index:4; right:16px; bottom:16px; display:flex; gap:8px; }
.hero-slider__arrows button { width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(255,255,255,.9); color:var(--ink); font-size:18px; display:grid; place-items:center;
    box-shadow:var(--sh-1); transition:background .15s ease, transform .15s ease; }
.hero-slider__arrows button:hover { background:#fff; transform:translateY(-2px); }
@media (max-width:640px){
    .hero-slider__scrim { background:linear-gradient(0deg, rgba(30,22,10,.82) 0%, rgba(30,22,10,.35) 55%, rgba(30,22,10,.15) 100%); }
    .hero-slider__copy { max-width:100%; }
    .hero-slider__arrows { display:none; }
}
@media (prefers-reduced-motion: reduce){
    .hero-slider__slide { transition:none; }
    .hero-slider__slide.is-active .hero-slider__img { animation:none; transform:scale(1.02); }
}

/* --- Foto-Karten & Preis-Karten & Galerie (Handoff, für Ausbau) --- */
.foto-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); border:1px solid var(--line);
    display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.foto-card:hover { transform:translateY(-4px); box-shadow:var(--sh-3); }
.foto-card img { aspect-ratio:4/3; width:100%; object-fit:cover; }
/* G1: Grün-Band trägt weißen Text → dunkle Grüntöne (weiß 4,53–5,85 ✓), nicht das helle CD-Grün. */
/* T-18: Band trägt jetzt das ORIGINAL-Grün – darauf ist Text IMMER Ink (8,26), nie weiß (1,87). */
.cta-band { margin:var(--s-7) 0; background:var(--green); border-radius:var(--r-xl);
    padding:clamp(28px,5vw,56px); color:var(--ink); box-shadow:var(--sh-2); }
.cta-band .kicker { color:var(--ink); } .cta-band h2 { color:var(--ink); max-width:18ch; }
.cta-band .kicker::before { background:var(--ink); }

/* --- W10 · Mobile-Navigation (Burger) --- */
.nav-toggle { display:none; width:46px; height:46px; border:0; background:transparent; cursor:pointer;
    flex-direction:column; justify-content:center; gap:5px; padding:10px; }
.nav-toggle span { display:block; height:3px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
@media (max-width: 900px) {
    .header-inner { position:relative; }
    .nav-toggle { display:flex; }
    .main-nav {
        position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:20;
        flex-direction:column; align-items:stretch; gap:0;
        background:#fff; padding:8px 20px 16px; box-shadow:var(--sh-2); border-bottom:3px solid var(--green);
        opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .main-nav.is-open { opacity:1; visibility:visible; transform:none; }
    .main-nav > a { padding:13px 4px; border-bottom:1px solid var(--line); }
    .main-nav > a.btn { margin-top:10px; justify-content:center; border-bottom:0; }
    .main-nav > a.btn-blau { margin-top:12px; }
}

/* --- W10 · Foto-Startseite (Sektionen) --- */
.section { padding: clamp(48px,7vw,88px) 0; }
.section--sand { background: var(--sand); }
.section-head { max-width: 720px; margin: 0 auto clamp(28px,4vw,48px); text-align: center; }
.section-head .kicker { justify-content: center; }
.section-head h2 { font-size: var(--t-h2); margin: 0; }
.section-lead { color: var(--ink-soft); font-size: var(--t-lead); margin: var(--s-3) 0 0; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s-5); }
.feature { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
    text-align: center; box-shadow: var(--sh-1); }
.feature-ico { display:inline-grid; place-items:center; width:66px; height:66px; border-radius:50%; font-size:30px;
    margin-bottom: var(--s-4); box-shadow: var(--sh-1); }
.feature-ico--green { background: var(--green-tint); }
.feature-ico--pink { background: var(--sand); }
.feature-ico--orange { background: #fff4e2; }
.feature h3 { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.feature p { margin: 0; color: var(--ink-soft); }

.standort-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--s-6); }
.standort-card { }
.standort-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.standort-card__body h3 { margin: 0 0 var(--s-1); font-size: var(--t-h3); }
.standort-card__adr { color: var(--ink-soft); margin: 0 0 var(--s-4); font-weight: 700; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s-6); counter-reset: step; }
.step { position: relative; padding-top: var(--s-6); }
/* G1: Zahlen sind weiß → kontrastsichere CD-Farben (Pink-CTA/Blau/Grün-Button), nie helles Grün/Orange. */
.step-num { display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%;
    background: var(--pink); color:#fff; font-family: var(--font-head); font-weight:800; font-size:24px;
    box-shadow: var(--sh-pink); margin-bottom: var(--s-3); }
.step:nth-child(2) .step-num { background: var(--blue); box-shadow: 0 12px 26px rgba(70,111,137,.30); }
.step:nth-child(3) .step-num { background: var(--green); color: var(--ink); box-shadow: var(--sh-green); }
.step h3 { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.step p { margin: 0; color: var(--ink-soft); }

.cta-band .hero-cta { margin-top: var(--s-5); }
/* T-18: Auf dem hellen Original-Grün liegt JEDE Markenfarbe als Buttonfläche unter der 3,0-Schwelle
   (Blau 2,88 · Pink 2,06). Im Band deshalb neutrale Ink-Fläche: 8,26 gegen das Band, Text 15,44. */
.cta-band .btn-primary, .cta-band .btn-blau { background:var(--ink); color:#fff; box-shadow:var(--sh-2); }
.cta-band .btn-primary:hover, .cta-band .btn-blau:hover { background:var(--ink); color:#fff; }
.cta-band .btn-ghost, .cta-ghost { color:var(--ink); border-color:var(--ink); background:transparent; }
.cta-band .btn-ghost:hover, .cta-ghost:hover { background:var(--ink); color:#fff; }

/* --- W10.2 · Floh-Vorschau (Startseite) --- */
.floh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--s-5); }
.floh-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-3);
    text-align:center; box-shadow: var(--sh-1); transition: transform .16s ease, box-shadow .16s ease; }
.floh-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.floh-fig { width:96px; height:96px; margin:0 auto var(--s-3); border-radius:50%; background: var(--green-tint);
    display:grid; place-items:center; box-shadow: var(--sh-1); }
.floh-fig img { width:76px; height:76px; object-fit:contain; }
.floh-card:nth-child(2) .floh-fig { background: var(--sand); }
.floh-card:nth-child(3) .floh-fig { background: #fff4e2; }
.floh-card:nth-child(4) .floh-fig { background: var(--green-tint); }
.floh-card:nth-child(5) .floh-fig { background: var(--sand); }
.floh-card h3 { margin: 0 0 var(--s-1); font-size: 1.15rem; }
.floh-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; font-weight: 700; }
.section-cta { text-align:center; margin-top: clamp(24px,4vw,40px); }

/* --- W10.2 · Galerie-Mosaik (Startseite) --- */
.galerie { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 178px; grid-auto-flow: dense; gap: var(--s-3); }
.g-item { margin:0; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--sh-1); background:#eee; }
.g-item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.g-item:hover img { transform: scale(1.05); }
.g-big { grid-column: span 2; grid-row: span 2; }
.g-wide { grid-column: span 2; }
@media (max-width: 820px) {
    .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .g-big { grid-column: span 2; grid-row: span 2; }
    .g-wide { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 520px) {
    .galerie { grid-auto-rows: 140px; }
}

/* --- W14 · Team-Grid (Trainer:innen-Karten in der Seite-Prose) ---
   Design-Direction (Handoff): Portraits/Trainer:innen als KREIS; kein aufgezwungenes
   Schwarz-Weiß (Bildwelt bleibt sonnig – gelieferte s/w-Portraits bleiben, Farbfotos auch). */
.team-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6);
    margin: var(--s-6) 0; padding: 0; }
.team-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); padding: 24px 20px 18px; text-align: center;
    transition: transform .18s ease, box-shadow .18s ease; }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.team-card picture { display: block; }
.team-photo { width: min(180px, 60%); height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    margin: 0 auto; border-radius: 50%; box-shadow: var(--sh-2); }
.team-card h3 { margin: 16px 0 2px; font-size: 1.2rem; }
.team-role { margin: 0 0 10px; color: var(--blue); font-weight: 700; }
.team-quals { margin: 0 auto; padding: 0; list-style: none; max-width: 32ch; }
.team-quals li { margin: 0 0 4px; color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* --- W11 · Fehlerseite (404 im Layout) --- */
.error-page { padding: clamp(48px,10vw,120px) 0; text-align: center; }
.error-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(72px,16vw,150px); line-height: 1; color: var(--blue); margin: 0; }
.error-page h1 { font-size: var(--t-h2); margin: 0 0 var(--s-3); }
.error-lead { color: var(--ink-soft); font-size: var(--t-lead); max-width: 48ch; margin: 0 auto var(--s-6); }
.error-cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* --- W11 · Consent-Banner (schlank, TDDDG §25) --- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff;
    border-top: 3px solid var(--green); box-shadow: 0 -10px 24px rgba(60,45,20,.14); }
.consent__inner { display: flex; align-items: center; gap: var(--s-5); padding-top: 16px; padding-bottom: 16px; }
.consent__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); flex: 1; }
.consent__text a { color: var(--blue); font-weight: 700; }
.consent__actions { display: flex; gap: var(--s-3); flex-shrink: 0; }
/* W19: Beide Consent-Buttons GLEICHWERTIG – gleiche Größe, gleiches Gewicht, gleiche Auffälligkeit
   (kein Dark Pattern: Ablehnen so leicht wie Zustimmen). Identischer solider Stil, gleiche Farbe. */
.consent .btn { padding: 12px 22px; font-size: 15px; }
.consent__actions .btn-consent { background: var(--green); color: var(--ink); border: 0; box-shadow: var(--sh-green); }
.consent__actions .btn-consent:hover { background: var(--green); color: var(--ink); }
.consent-settings-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.consent-settings-btn:hover { color: var(--blue); }
@media (max-width: 720px) {
    .consent__inner { flex-direction: column; align-items: stretch; gap: var(--s-3); }
    .consent__actions .btn { flex: 1; justify-content: center; }
}
/* T-18: Mit der 19px-Schrift passen die beiden gleichwertigen Consent-Buttons auf schmalen
   Schirmen nicht mehr nebeneinander → gestapelt, volle Breite. Gleichwertigkeit bleibt (W19). */
@media (max-width: 480px) {
    .consent__actions { flex-direction: column; }
    .consent__actions .btn { width: 100%; }
}

/* --- Kindergeburtstage: Ortsangabe + Hinweis an anderen Standorten (24.08.) --- */
/* Ort prominent auf der Geburtstagsseite – gleich unter dem Hero, nicht im Kleingedruckten. */
.geburtstag-ort { display:flex; align-items:center; gap:12px; margin:var(--s-5) 0 0;
    padding:14px 20px; background:var(--green-tint); border-left:5px solid var(--green);
    border-radius:var(--r-md); font-size:1.06rem; font-weight:700; color:var(--ink); }
.geburtstag-ort span[aria-hidden] { font-size:1.3rem; line-height:1; }
/* Ortsangabe auf der Raum-mieten-Seite – gleiche Optik wie oben (24.08.). */
.prose .raum-ort { display:flex; align-items:flex-start; gap:12px; margin:var(--s-4) 0;
    padding:14px 20px; background:var(--green-tint); border-left:5px solid var(--green);
    border-radius:var(--r-md); font-weight:700; color:var(--ink); }
.prose .raum-ort span[aria-hidden] { font-size:1.3rem; line-height:1.3; }
/* A57 §2: Weiter-Knopf des Zwischenschritts – bewusst das auffälligste Element der Seite. */
.hero-weiter { margin:var(--s-5) 0 0; }   /* A57 §2: Weiter-Knopf im Kopfbereich */
.prose .ablauf-fuss { margin-top:var(--s-5); color:var(--ink-soft); font-size:.98rem; }

/* Hinweisblock auf den Standortseiten ohne eigenes Geburtstagsangebot. */
.geburtstag-hinweis { display:flex; align-items:center; gap:clamp(20px,4vw,44px);
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    padding:clamp(24px,3vw,40px); box-shadow:var(--sh-1); }
.geburtstag-hinweis__floh { flex-shrink:0; width:clamp(90px,12vw,140px); height:auto; }
.geburtstag-hinweis__text { flex:1; }
.geburtstag-hinweis__text h2 { margin:0 0 var(--s-3); }
.geburtstag-hinweis__text p { margin:0 0 var(--s-3); }
.geburtstag-hinweis__adresse { font-weight:800; color:var(--ink); }
@media (max-width:640px) {
    .geburtstag-hinweis { flex-direction:column; text-align:center; }
    .geburtstag-hinweis__text p { text-align:left; }
}

/* --- W11 · Kontaktseite & Formular --- */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,4vw,56px); align-items: start; }
.kontakt-liste { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.kontakt-liste li { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; font-size: 1.1rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.kontakt-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-tint); flex-shrink: 0; }
.kontakt-liste a { color: var(--ink); }
.kontakt-liste a:hover { color: var(--blue); }
.kontakt-links { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.kontakt-links p { flex-basis: 100%; margin: 0 0 var(--s-2); }
.kontakt-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,40px); box-shadow: var(--sh-1); }
.kontakt-form-wrap h2 { margin: 0 0 var(--s-5); font-size: var(--t-h3); }
.form-row { margin-bottom: var(--s-4); display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-weight: 700; font-size: 15px; }
.form-row .opt { color: var(--ink-soft); font-weight: 600; }
.form-row input, .form-row textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid var(--line);
    border-radius: var(--r-sm); background: var(--cream); color: var(--ink); width: 100%; }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.form-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.form-check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.form-check label { font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.form-check a { color: var(--blue); font-weight: 700; }
.form-hint { color: var(--ink-soft); font-size: 13px; margin: var(--s-3) 0 0; }
.form-success { background: var(--green-tint); border: 1px solid var(--green); color: var(--ink);
    border-radius: var(--r-md); padding: 14px 18px; margin-bottom: var(--s-5); font-weight: 700; }
.form-error { background: #fdeaf1; border: 1px solid var(--pink); color: var(--ink);
    border-radius: var(--r-md); padding: 14px 18px; margin-bottom: var(--s-5); }
.form-error ul { margin: 6px 0 0; padding-left: 1.2em; }
/* Honeypot: für Menschen unsichtbar (off-screen, nicht display:none) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .kontakt-grid { grid-template-columns: 1fr; } }

/* --- W11 · a11y-Feinschliff --- */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--ink); color: #fff;
    padding: 10px 18px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 8px; outline: 3px solid var(--pink); outline-offset: 2px; }
/* Kontrast: voller Beitrag dunkler (Orange auf Weiß besser lesbar) */
.preis-voll { color: var(--ink); }

/* =========================================================================
   MF-17/18/19 · Standort-First: Weiche, Wochenansicht, Ampel, Standortwechsel
   ========================================================================= */

/* (MF-32: Karten-Weiche entfernt – Startseite / ist wieder der Splash mit Rakete + Standortauswahl unten.) */

/* --- Standortwechsel im Header --- */
.nav-standort { display: inline-flex; align-items: center; gap: 4px; font-size: .92rem; color: var(--blue);
    background: var(--green-tint); border-radius: 999px; padding: 6px 14px; text-decoration: none; }
.nav-standort:hover { background: var(--green); }
.nav-standort-wechsel { text-decoration: underline; }

/* --- Kurs-Wochenansicht (MF-18) --- */
.kurstag { margin: 0 0 var(--s-6); }
.kurstag-titel { font-size: 1.35rem; margin: 0 0 var(--s-3); padding-bottom: var(--s-2);
    border-bottom: 3px solid var(--green); display: inline-block; }
.kursliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.kurszeile { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: var(--s-4);
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--sh-1); }
/* W12: feste Grid-Spalten – Ampel (3) links vom Preis (4). Preis bleibt bündig, auch ohne Ampel. */
.kurszeile-zeit { grid-column: 1; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.kurszeile-info { grid-column: 2; }
.kurszeile > .kurs-ampel { grid-column: 3; justify-self: end; }
.kurszeile-uhr { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.kurszeile-info { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.kurszeile-text { display: flex; flex-direction: column; }
.kurszeile-figur { height: 43px; width: auto; flex-shrink: 0; } /* G2: Floh-Vektor je Kurs */
.kurszeile-name { font-weight: 700; }
.kurszeile-alter { color: var(--ink-soft); font-size: .92rem; }
.kurszeile-preis { grid-column: 4; justify-self: end; text-align: right; white-space: nowrap; }
.kurszeile-preis .preis-voll { font-family: var(--font-head); font-weight: 800; color: var(--ink); }
.kurszeile-preis .preis-erm { color: var(--ink-soft); font-size: .9rem; margin-left: 6px; }

/* --- A57 §1 · Kurse aufklappbar und einzeln verlinkbar --- */
.kurszeile-wrap { list-style: none; scroll-margin-top: 90px; }   /* Platz für den klebenden Kopf beim Anspringen */
.kurs-zweitanker { display: block; height: 0; scroll-margin-top: 90px; }
.kurs-details > summary { cursor: pointer; list-style: none; }
.kurs-details > summary::-webkit-details-marker { display: none; }
/* Aufklapp-Zeichen rechts, dreht sich beim Öffnen. */
/* Das Aufklapp-Zeichen darf im Grid der Kurszeile KEINE eigene Zeile aufmachen –
   deshalb absolut in der rechten Innenkante, vertikal mittig. */
.kurs-details > summary { position: relative; padding-right: 34px; }
.kurs-details > summary::after {
    content: "›"; position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-head); font-size: 1.6rem; line-height: 1; color: var(--blue);
    transition: transform .15s ease;
}
.kurs-details[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.kurs-details > summary:hover { background: var(--green-tint); }
.kurs-details > summary:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }
.kurs-panel {
    padding: var(--s-4) var(--s-5) var(--s-5);
    background: var(--green-tint);
    border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    margin: -6px 0 var(--s-3);   /* schließt an die Kurszeile an, statt zu schweben */
}
.kurs-details[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; }
.kurs-panel__bezeichnung { margin: 0 0 var(--s-3); font-weight: 800; color: var(--ink); }
.kurs-panel__trainerin { margin: 0 0 var(--s-3); }
.kurs-panel__text { margin: 0 0 var(--s-3); }
.kurs-panel__preis { margin: 0 0 var(--s-4); color: var(--ink); }
.kurs-panel__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 620px) { .kurs-panel__cta .btn { flex: 1; justify-content: center; } }

/* --- Ampel (MF-19), nur sichtbar wenn Daten vorliegen --- */
.kurs-ampel { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.kurs-ampel-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.kurs-ampel--gruen { background: var(--green-tint); color: var(--ink); }
.kurs-ampel--gruen .kurs-ampel-dot { background: #4caf50; }
.kurs-ampel--orange { background: #fff2e0; color: var(--ink); }
.kurs-ampel--orange .kurs-ampel-dot { background: var(--orange); }
.kurs-ampel--rot { background: #fde8ee; color: var(--ink); }
.kurs-ampel--rot .kurs-ampel-dot { background: #e53935; }
.floh-kurse-link { margin-top: var(--s-5); }

/* G2: Floh-Deko im Seiten-Body (Vektor, transparent) – Text umfließt rechts. */
.seite-floh { float: right; width: clamp(84px, 16vw, 150px); height: auto; margin: 0 0 12px 24px; shape-outside: margin-box; }
@media (max-width: 520px) { .seite-floh { width: 88px; margin: 0 0 8px 14px; } }

@media (max-width: 620px) {
    /* Mobil 2-spaltig: Info oben, darunter Preis dann Ampel (linksbündig). Spezifität an W12 angeglichen. */
    .kurszeile { grid-template-columns: 72px 1fr; grid-auto-rows: min-content; row-gap: 6px; }
    .kurszeile-info { grid-column: 2; }
    .kurszeile-preis { grid-column: 2; justify-self: start; text-align: left; }
    .kurszeile > .kurs-ampel { grid-column: 2; justify-self: start; }
}

/* =========================================================================
   T-31 · Kurs-News (aus der App gepflegt). BLAUE Info-Spur – bewusst getrennt von
   der Ampel (grün/gelb/rot = Auslastung). „wichtig" kräftiger, aber NIE Rot als Fläche.
   ========================================================================= */
.kurs-news-wrap { margin: var(--s-5) auto 0; }
.kurs-news { display: flex; flex-direction: column; gap: var(--s-2); }
.kurs-news-item { display: flex; align-items: flex-start; gap: 10px;
    background: #eef4f7; border: 1px solid #cfe0e8; border-left: 4px solid var(--blue);
    border-radius: var(--r-md); padding: 12px 16px; color: var(--ink); }
.kurs-news-ico { flex: 0 0 auto; color: var(--blue); font-size: 1.15rem; line-height: 1.4; }
.kurs-news-text { font-size: 1rem; line-height: 1.45; }
.kurs-news-badge { display: inline-block; background: var(--blue); color: #fff; font-family: var(--font-head);
    font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 9px; border-radius: 999px; vertical-align: middle; margin-right: 2px; }
/* „wichtig": kräftigerer Rahmen + Symbol, kein Rot-Fill (Rot = volle Ampel). */
.kurs-news-item--wichtig { border-left-width: 6px; border-color: #b9d2df; border-left-color: var(--blue);
    background: #e6eff4; box-shadow: var(--sh-1); font-weight: 500; }
.kurs-news-item--wichtig .kurs-news-ico { color: var(--blue); }
/* Kompakt: direkt am Kurs in der Wochenansicht. */
.kurs-news--kompakt .kurs-news-item { padding: 8px 12px; border-radius: var(--r-sm); }
.kurs-news--kompakt .kurs-news-text { font-size: .92rem; }
.kurszeile-news { grid-column: 1 / -1; margin-top: 10px; }