/* =====================================================================
   Schiefbahn Riders – Dark Sport Theme
   Look & Feel angelehnt an "Ruggby" (Oswald + Roboto, dunkel + Gold).
   CI: Navy #1C2441 · Gold #BCA42E
   ===================================================================== */
:root {
    --navy:       #1C2441;   /* CI-Navy */
    --gold:       #BCA42E;   /* CI-Gold */
    --gold-2:     #d8bd44;   /* Gold hell (Hover) */
    --blue:       #2f56a8;   /* Akzent-Blau, dunkel (z. B. „in Willich") */

    --bg:         #0B1020;   /* Seiten-Hintergrund */
    --bg-2:       #161d36;   /* Panel etwas heller */
    --bg-3:       #0b1020;   /* sehr dunkel */
    --line:       rgba(255,255,255,.10);

    --text:       #e9ebf2;
    --muted:      #97a0b8;

    --head: "Oswald", "Arial Narrow", system-ui, sans-serif;
    --body: "Roboto", system-ui, -apple-system, sans-serif;

    --maxw: 1180px;
    --r: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
    background-color: var(--bg);
    /* Durchgängig dieselbe Hintergrundfarbe; einziger Effekt: ein leichter
       Gold-Glow oben (fixiert = überall gleich). */
    background-image:
        radial-gradient(36rem 15rem at 50% -2rem, rgba(188,164,46,.18), transparent 72%);
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }

h1, h2, h3, h4 {
    font-family: var(--head);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff;
    margin: 0 0 .5em;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; }
strong { color: #fff; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* Akzente */
.gold { color: var(--gold); }
.blue { color: var(--blue); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--head); font-weight: 600; text-transform: uppercase;
    letter-spacing: .22em; font-size: .8rem; color: var(--gold);
    margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--gold); display: inline-block; }

/* Buttons */
.btn {
    display: inline-block; cursor: pointer;
    font-family: var(--head); font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; font-size: .92rem;
    background: var(--gold); color: #11162b;
    border: 2px solid var(--gold); border-radius: var(--r);
    padding: .8rem 1.7rem; transition: all .18s ease;
}
.btn:hover { background: transparent; color: var(--gold); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold { /* Alias */ background: var(--gold); color: #11162b; }
/* Button im Fließtext: nicht von ".page-body a { color: gold }" einfärben lassen */
.page-body a.btn { color: #11162b; }
.page-body a.btn:hover { color: var(--gold); }

/* Sections */
.section { padding: 5.5rem 0; }
/* Einheitlicher Hintergrund: alle Sektionen zeigen das durchgehende Navy.
   Farbabweichungen nur an definierten Stellen (z. B. .sponsors-box). */
.section-alt { background: transparent; }
.section-dark { background: transparent; }
.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* Swoosh hinter einer Überschrift – als randloses Vollband quer über die ganze
   Seite (hinter Text und Bild), ohne das Headline-Layout/-Farben zu ändern. */
.swoosh-head { position: relative; display: inline-block; }
.swoosh-head::before {
    content: ""; position: absolute; z-index: -1;
    top: 50%; transform: translateY(-50%);
    height: clamp(2.4rem, 4.5vw, 4.8rem);
    background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
.swoosh-head.swoosh-gold::before { background-image: url("../img/swoosh-gold.webp"); }
.swoosh-head.swoosh-navy::before { background-image: url("../img/swoosh-navy.webp"); }
/* randlos – je nach Ausrichtung der Überschrift */
.swoosh-head.swoosh-left::before   { left: calc(-1 * (max((100vw - var(--maxw)) / 2, 0px) + 1.25rem)); width: 100vw; }
.swoosh-head.swoosh-center::before { left: 50%; margin-left: -50vw; width: 100vw; }

/* verhindert horizontalen Scroll durch die 100vw-Bänder */
.swoosh-section { overflow-x: clip; }

/* Eyebrow eng über einer Swoosh-Überschrift */
.swoosh-intro { text-align: center; margin-bottom: .25rem; }
.swoosh-intro .eyebrow { justify-content: center; margin-bottom: 0; }

/* Voll-breites Swoosh-Band mit zentrierter Überschrift darauf (garantiert mittig,
   da eigenes Element über die ganze Seitenbreite). Für zentrierte Headlines. */
.swoosh-row {
    margin: 0;
    text-align: center;
    padding: .85rem 1rem;
    background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
.swoosh-row.swoosh-gold { background-image: url("../img/swoosh-gold.webp"); }
.swoosh-row.swoosh-navy { background-image: url("../img/swoosh-navy.webp"); }

/* =========================== Header / Nav =========================== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(11,16,32,.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.nav-wrap { max-width: var(--maxw); margin: 0 auto; padding: .55rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: #fff; }
.brand-logo { height: 52px; width: auto; }
.brand-text { font-family: var(--head); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; font-size: 1.15rem; }

.main-nav ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; align-items: center; }
.main-nav a, .nav-section {
    display: block; color: #fff; cursor: pointer; text-align: center;
    font-family: var(--head); font-weight: 500; text-transform: uppercase;
    letter-spacing: .06em; font-size: .9rem; padding: .6rem .85rem;
}
.main-nav a:hover, .main-nav a.active, .has-sub:hover > .nav-section { color: var(--gold); }
.nav-shop { background: var(--gold); color: #11162b !important; border-radius: var(--r); }
.nav-shop:hover { background: var(--gold-2); }
.nav-members { border: 1px solid var(--gold); color: var(--gold) !important; border-radius: var(--r); }
.nav-members:hover { background: var(--gold); color: #11162b !important; }

.has-sub { position: relative; }
.has-sub > .sub {
    display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #0c1226; border: 1px solid var(--line); padding: .4rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.5); flex-direction: column;
}
.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: flex; }
.has-sub > .sub a { padding: .55rem .8rem; font-size: .85rem; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #fff; margin: 4px 0; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-close { display: none; }

/* =============================== Hero =============================== */
.hero {
    position: relative; min-height: 90vh; display: flex; align-items: center;
    background: var(--bg-3) var(--hero-img) center/cover no-repeat;
    overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,11,22,.92) 0%, rgba(8,11,22,.78) 45%, rgba(8,11,22,.45) 100%);
}
.hero-ghost {
    position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
    font-family: var(--head); font-weight: 700; text-transform: uppercase;
    font-size: 26vw; line-height: .8; color: rgba(255,255,255,.04);
    letter-spacing: -.02em; pointer-events: none; white-space: nowrap;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; padding: 7rem 0; }
.hero h1 { margin-bottom: 1rem; }
.hero p { font-size: 1.15rem; color: #d4d8e6; max-width: 560px; margin-bottom: 1.8rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ============================= About/Feature ======================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split .media img {
    border-radius: var(--r); width: 100%; object-fit: cover;
    /* leicht schräg + Rahmen, richtet sich beim Hover gerade */
    transform: rotate(-1.8deg);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    border: 6px solid rgba(255,255,255,.04);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.split .media:hover img { transform: rotate(0); box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.lead { font-size: 1.1rem; color: #d4d8e6; }

/* Stats / Counter */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat {
    position: relative; overflow: hidden; text-align: center;
    padding: 2.1rem 1rem 1.7rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7; }
.stat:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.stat .num {
    font-family: var(--head); font-weight: 700; line-height: 1; color: var(--gold);
    font-size: clamp(2.6rem, 5vw, 3.6rem); text-shadow: 0 2px 16px rgba(188,164,46,.28);
    font-variant-numeric: tabular-nums;
}
.stat .num::after { content: ""; display: block; width: 34px; height: 3px; margin: .6rem auto 0;
    background: var(--gold); border-radius: 2px; opacity: .85; }
.stat .label { margin-top: .7rem; font-family: var(--head); font-weight: 500;
    text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: #cfd6e6; }

/* ============================ Team-Karten ========================== */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.team-card {
    position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
    border-radius: var(--r); background: var(--bg-3); color: #fff;
}
.team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; opacity: .85; }
.team-card::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,11,22,.92) 5%, rgba(8,11,22,.1) 60%); }
.team-card:hover img { transform: scale(1.08); }
.team-card .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem; }
.team-card .cap .t { font-family: var(--head); font-weight: 600; text-transform: uppercase; font-size: 1.25rem; }
.team-card .cap .s { display: block; margin-bottom: .15rem; font-size: .82rem; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; }
.team-card .cap .t::after { content: ""; display: block; width: 0; height: 3px; background: var(--gold); transition: width .3s ease; margin-top: .4rem; }
.team-card:hover .cap .t::after { width: 48px; }
.team-card.placeholder { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.team-card.placeholder .cap { position: static; text-align: center; }

/* ============================ Inhaltsseiten ======================== */
.page-hero {
    position: relative; padding: 8rem 0 3rem; min-height: 38vh; display: flex; align-items: flex-end;
    background: var(--bg-3) var(--hero-img) center/cover no-repeat;
}
.page-hero::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,11,22,.95), rgba(8,11,22,.55)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { margin: 0; }

.page-body { font-size: 1.05rem; color: #d4d8e6; }
.page-body h2, .page-body h3 { color: #fff; margin-top: 1.6rem; }
.page-body h2::after { content: ""; display: block; width: 46px; height: 3px; background: var(--gold); margin-top: .5rem; }
.page-body a { color: var(--gold); }
.page-body ul { padding-left: 1.2rem; }
.page-body li { margin: .3rem 0; }
.placeholder-note { color: var(--muted); font-style: italic; }

.team-facts { background: var(--bg-2); border-left: 3px solid var(--gold); padding: 1.1rem 1.3rem; border-radius: var(--r); margin: 1.6rem 0; }
.team-facts div { margin: .2rem 0; }
.cta { margin-top: 2rem; }

/* ============================== Galerie ============================ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.4rem; }
.gallery-item {
    position: relative; display: block; overflow: hidden; cursor: zoom-in;
    border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--bg-3);
    box-shadow: 0 14px 30px rgba(0,0,0,.45);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
/* „hier und da schräg" – jedes Bild leicht anders gekippt */
.gallery-item:nth-child(4n+1) { transform: rotate(-1.6deg); }
.gallery-item:nth-child(4n+2) { transform: rotate(1.2deg); }
.gallery-item:nth-child(4n+3) { transform: rotate(2.1deg); }
.gallery-item:nth-child(4n+4) { transform: rotate(-1deg); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover { transform: rotate(0) scale(1.03); box-shadow: 0 22px 46px rgba(0,0,0,.6); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .2s ease; }
.gallery-item:hover::after { box-shadow: inset 0 0 0 3px var(--gold); }

/* Team-Seite: Mannschaftsfoto – schräg, klickbar (Lightbox), Gold-Swoosh durchgehend dahinter */
.teamphoto-band { position: relative; padding: 3.2rem 0;
    background: url("../img/swoosh-gold.webp") center / 100% auto no-repeat; }
.team-photo { display: block; max-width: 720px; margin: 0 auto; cursor: zoom-in;
    border-radius: var(--r); overflow: hidden;
    transform: rotate(-1.8deg); box-shadow: 0 22px 50px rgba(0,0,0,.55);
    border: 6px solid rgba(255,255,255,.06);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.team-photo:hover { transform: rotate(0) scale(1.015); box-shadow: 0 28px 60px rgba(0,0,0,.65); }
.team-photo img { display: block; width: 100%; height: auto; }

/* Gameday-Galerie: Navy-Swoosh durchgehend & mittig dahinter (egal ob 1–3 Zeilen) */
.gallery-swoosh { position: relative; padding: 2.6rem 0;
    background: url("../img/swoosh-navy.webp") center / 100% auto no-repeat; }

/* ============================== Social ============================= */
.social-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.social-card { display: flex; flex-direction: column; gap: .25rem; padding: 1.3rem;
    border-radius: var(--r); color: #fff; font-family: var(--head); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; transition: transform .15s ease; }
.social-card:hover { transform: translateY(-3px); color: #fff; }
.social-card .social-card-handle { font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .92; font-size: .9rem; }
/* Instagram-Feed (Behold, gecached) – 4 Posts */
.ig-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ig-post { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
    border-radius: var(--r); background: var(--bg-3); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig-post:hover img { transform: scale(1.06); }
.ig-post-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    gap: .45rem; padding: .8rem; color: #fff;
    background: linear-gradient(to top, rgba(8,11,22,.88), rgba(8,11,22,0) 62%);
    opacity: 0; transition: opacity .25s ease; }
.ig-post:hover .ig-post-ov { opacity: 1; }
.ig-post-ov svg { width: 22px; height: 22px; fill: #fff; }
.ig-post-cap { font-size: .78rem; line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ig-cta { text-align: center; margin-top: 1.6rem; }
@media (max-width: 700px) { .ig-feed { grid-template-columns: repeat(2, 1fr); } }

.social-card.ig { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.social-card.fb { background: #1877f2; }
.social-card.yt { background: #ff0000; }
.fb-embed { margin-top: 1.5rem; }

/* ============================== Sponsoren ========================== */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 1rem; align-items: center; }
.sponsor-item { display: flex; align-items: center; justify-content: center; min-height: 120px;
    padding: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .2s ease; }
.sponsor-item:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,.5); }
.sponsor-item img { max-height: 80px; width: auto; object-fit: contain; transition: transform .25s ease; }
.sponsor-item:hover img { transform: scale(1.06); }
/* Hauptsponsoren: größer, mittig über den anderen */
.sponsor-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.sponsor-item--main { flex: 0 1 340px; min-height: 180px; padding: 1.8rem; }
.sponsor-item--main img { max-height: 120px; }
@media (max-width: 560px) { .sponsor-item--main { flex-basis: 100%; min-height: 150px; } }
/* Partnerschaft: zwei Felder nebeneinander */
.partner-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
.partner-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.partner-box p { margin: 0 0 .5rem; }
.partner-box p:last-child { margin-bottom: 0; }
.partner-box a { color: var(--gold); }
.partner-box--person { flex-direction: row; align-items: center; gap: 1.3rem; }
.partner-box--person .coach-photo { margin: 0; flex-shrink: 0; }
.partner-lead { font-family: var(--head); color: var(--gold); font-size: 1.2rem; }
@media (max-width: 640px) { .partner-boxes { grid-template-columns: 1fr; } }
.muted-note { color: var(--muted); font-size: .85rem; }

/* ===================== Sponsoren-Laufband (Startseite) ============= */
.sponsors-box { background: #263960; padding: 3.5rem 0 3.2rem; }
.sponsors-box .swoosh-intro { margin-bottom: 1.9rem; }
/* Unterer Abschluss: auslaufender Swoosh (oben #263960, nach unten transparent) */
.sponsors-edge {
    width: 100%; aspect-ratio: 2900 / 149; margin-top: -1px;
    background: url("../img/sponsors-bottom.webp") top center / 100% 100% no-repeat;
}
.sponsor-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sponsor-track {
    display: flex; align-items: center; gap: 1.8rem; width: max-content;
    animation: sponsorScroll 50s linear infinite;
}
.sponsor-marquee:hover .sponsor-track { animation-play-state: paused; }
@keyframes sponsorScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Helle Kachel, Logo in Schwarz/Weiß (Graustufen) – bei Hover voll farbig. */
.sponsor-logo {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    height: 96px; padding: 1rem 1.7rem;
    background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.sponsor-logo img {
    max-height: 66px; max-width: 210px; width: auto; object-fit: contain;
    filter: grayscale(1); transition: filter .3s ease;
}
.sponsor-logo:hover img { filter: none; }
@media (prefers-reduced-motion: reduce) { .sponsor-track { animation: none; } }

/* ============================== Kontakt ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.contact-form label { display: block; margin-bottom: .9rem; font-family: var(--head);
    text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--muted); }
.contact-form input, .contact-form textarea {
    width: 100%; margin-top: .35rem; padding: .8rem .9rem; font: inherit; color: #fff;
    background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.hp { display: none !important; }
.notice { padding: .8rem 1rem; border-radius: var(--r); margin-bottom: 1rem; }
.notice.success { background: rgba(40,160,80,.15); color: #7fe0a0; border: 1px solid rgba(40,160,80,.4); }
.notice.error { background: rgba(200,50,50,.15); color: #ff9a9a; border: 1px solid rgba(200,50,50,.4); }
.contact-info p { color: #d4d8e6; }
.contact-info a { color: var(--gold); }

/* ============================== Footer ============================= */
.site-footer { position: relative; background: var(--bg-3); }
/* Zone zwischen Inhalt und Footer-Spalten: Swoosh + Pferd, beide mittig zentriert.
   Dadurch sitzen die Spalten danach sauber gleich ausgerichtet darunter. */
.footer-top { position: relative; height: clamp(170px, 20vw, 250px); }
.footer-swoosh {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 100%; aspect-ratio: 2900 / 149;
    background: url("../img/swoosh-footer.webp") center / 100% 100% no-repeat;
}
.footer-mascot {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: clamp(150px, 18vw, 230px); width: auto;
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
    pointer-events: none;
}
.footer-wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem 3.5rem;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 2rem; }
.site-footer strong { color: #fff; display: block; margin-bottom: .7rem; font-family: var(--head);
    text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; }
.site-footer p, .site-footer li { color: var(--muted); }
.site-footer a { color: var(--gold); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .15rem 0; }
.footer-locations { columns: 2; column-gap: 1.1rem; }
.footer-locations li { break-inside: avoid; }
/* Kleine Social-Icons (Footer) */
.social-icons { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .1rem; }
.social-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; color: var(--muted);
    background: rgba(255,255,255,.06); border: 1px solid var(--line);
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.social-icon svg { width: 19px; height: 19px; fill: currentColor; }
.social-icon:hover { color: #fff; transform: translateY(-2px); }
.social-icon--instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); border-color: transparent; }
.social-icon--facebook:hover  { background: #1877f2; border-color: transparent; }
.social-icon--youtube:hover   { background: #ff0000; border-color: transparent; }
.social-icon--tiktok:hover    { background: #000; border-color: rgba(255,255,255,.5); }
.footer-bottom { position: relative; text-align: center; padding: 1.1rem 1.25rem; border-top: 1px solid var(--line);
    font-size: .85rem; color: var(--muted); font-family: var(--head); letter-spacing: .08em; text-transform: uppercase; }
.footer-credit { display: inline-block; margin-top: .35rem; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.footer-credit a { color: var(--gold); }
/* 3 Wappen klein unten rechts in der letzten Footer-Zeile */
.footer-badges { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .7rem; }
.footer-badges img { height: 30px; width: auto; opacity: .9; transition: opacity .2s ease; }
.footer-badges img:hover { opacity: 1; }
@media (max-width: 680px) {
    .footer-badges { position: static; transform: none; display: flex; justify-content: center; margin-top: .8rem; }
}

/* 404 */
.page-404 { padding: 7rem 0; text-align: center; }

/* ============================== Lightbox =========================== */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 4vmin;
    background: rgba(6,9,18,.92); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.7);
    transform: scale(.95); transition: transform .25s ease;
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-btn {
    position: absolute; z-index: 2; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-size: 1.7rem; line-height: 1;
    color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--line);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lightbox-btn:hover { background: var(--gold); color: #11162b; border-color: var(--gold); }
.lightbox-close { top: 3vmin; right: 3vmin; }
.lightbox-prev { left: 3vmin; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 3vmin; top: 50%; transform: translateY(-50%); }
.lightbox.single .lightbox-prev, .lightbox.single .lightbox-next { display: none; }

/* ===================== Cookie-Banner + Google-Maps ================= */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: #0c1226; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0,0,0,.5); }
.cookie-inner { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cookie-inner p { margin: 0; flex: 1 1 320px; color: #d4d8e6; font-size: .92rem; }
.cookie-actions { display: flex; gap: .6rem; }
.cookie-actions .btn { padding: .6rem 1.2rem; }

.team-map { margin-top: 2rem; }
.team-map h2 { margin-bottom: .6rem; }
.team-map-grid { display: grid; gap: 1.3rem; }
.team-map-grid.two { grid-template-columns: 1fr 1fr; }
.team-map-item > p { color: var(--muted); margin: 0 0 .6rem; }
@media (max-width: 700px) { .team-map-grid.two { grid-template-columns: 1fr; } }
.map-embed { position: relative; width: 100%; aspect-ratio: 16 / 6; overflow: hidden;
    border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 1.5rem; }
.map-consent p { margin: 0; color: var(--muted); max-width: 360px; }

/* Coaches & Staff */
.coach-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.coach-card { text-align: center; flex: 0 0 calc((100% - 6rem) / 6); }
.coach-photo { display: block; position: relative; width: clamp(104px, 12vw, 132px); height: clamp(104px, 12vw, 132px);
    border-radius: 50%; overflow: hidden; margin: 0 auto .7rem;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-photo--ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-weight: 700; font-size: 1.6rem; color: var(--gold); }
.coach-name { display: block; font-family: var(--head); font-weight: 600; text-transform: uppercase;
    font-size: .95rem; letter-spacing: .03em; color: #fff; }
.coach-role { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
@media (max-width: 900px) { .coach-card { flex-basis: calc((100% - 2.4rem) / 3); } }
/* Mobile: nur die ersten 4 Coaches zeigen, Rest per "+ Mehr" aufklappen */
.coach-more { display: none; margin: 1.6rem auto 0; cursor: pointer;
    font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
    color: var(--gold); background: transparent; border: 1px solid var(--gold); border-radius: var(--r);
    padding: .65rem 1.5rem; transition: background .18s ease, color .18s ease; }
.coach-more:hover { background: var(--gold); color: #11162b; }
@media (max-width: 640px) {
    .coach-card { flex-basis: calc((100% - 1.2rem) / 2); }
    .coach-grid:not(.coaches-expanded) .coach-card:nth-child(n+5) { display: none; }
    .coach-more { display: block; }
}

/* Ansprechpartner */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.contact-card { padding: 1.5rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r);
    background: rgba(255,255,255,.03); text-align: center; transition: border-color .2s ease, transform .2s ease; }
.contact-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.contact-name { font-family: var(--head); font-weight: 600; text-transform: uppercase; color: #fff; font-size: 1.05rem; }
.contact-role { color: var(--gold); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .7rem; }
.contact-card a { display: block; color: #d4d8e6; font-size: .92rem; margin-top: .25rem; }
.contact-card a:hover { color: var(--gold); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* Mehr Luft zwischen den Rubriken der Teamseite */
.team-sections > * + * { margin-top: clamp(2.8rem, 5vw, 4.5rem); }
.team-sections > .gallery-swoosh { margin-top: 1.2rem; } /* eng an den Galerie-Titel */

/* Team-Intro: Text + optionale Erfolge-Box (2/3 zu 1/3) */
.team-intro.has-achievements { display: grid; grid-template-columns: 2fr 1fr; gap: 2.4rem; align-items: start; }
.team-intro-text { max-width: none; }
.achievements { background: rgba(255,255,255,.03); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.5rem 1.6rem; }
.achievements h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.achievements ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.achievements li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.35; color: #d4d8e6; }
.achievements .trophy { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold); margin-top: .1rem; }
@media (max-width: 760px) { .team-intro.has-achievements { grid-template-columns: 1fr; gap: 1.8rem; } }

/* Trainingszeiten als Liste (ein Tag pro Zeile) */
.training-times { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.training-times li { font-size: 1.05rem; color: #d4d8e6; }

/* Ansprechpartner-Boxen: zentriert, passt sich 2 oder 3 Boxen an */
.ansprech-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.ansprech-grid .contact-card { flex: 1 1 260px; max-width: 360px; }
@media (max-width: 760px) { .ansprech-grid .contact-card { flex-basis: 100%; } }

/* Vorstand: Mitglieder-Raster (runde Icons wie Coaches, ohne Mobile-Klappen) */
.member-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .member-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .member-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-group { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gold); font-size: .95rem; padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }

/* Sportanlagen (Stadion-Seite) mit Karte */
.venues { display: flex; flex-direction: column; gap: 2.8rem; }
.venue h2 { margin-bottom: .3rem; }
.venue-address { color: var(--gold); margin: 0 0 .4rem; }
.venue .map-embed { margin-top: 1.1rem; max-width: 760px; }

/* Probetraining: Trainingszeiten-Boxen mit Gold-Swoosh */
.tryout-times-band { position: relative; padding: 2.6rem 0;
    background: url("../img/swoosh-gold.webp") center / 100% auto no-repeat; }
.tryout-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.time-card { background: var(--navy); border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.6rem 1.4rem; text-align: center; box-shadow: 0 16px 34px rgba(0,0,0,.5);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.time-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 24px 46px rgba(0,0,0,.62); }
.time-card h3 { font-family: var(--head); text-transform: uppercase; letter-spacing: .04em;
    color: var(--gold); font-size: 1.4rem; margin: 0 0 .8rem; }
.time-card ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.time-card li { color: #fff; }
.time-card .time-note { margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 820px) { .tryout-times { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* Probetraining: Dokumente-Box */
.docs-box { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r);
    background: rgba(255,255,255,.03); padding: 1.6rem 1.8rem; }
.docs-box h2 { margin: 0 0 .4rem; }
.docs-box > p { color: var(--muted); margin: 0 0 1rem; }
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.doc-list a { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold);
    font-family: var(--head); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.doc-list a::before { content: "\2193"; font-weight: 700; } /* Download-Pfeil */
.doc-list a span { color: var(--muted); font-weight: 400; }
.doc-list a:hover { color: var(--gold-2); }

/* Probetraining: SEO-Fließtext unten */
.seo-text { color: var(--muted); font-size: .9rem; line-height: 1.7; max-width: 900px; }

/* Probetraining/Jugend: kompaktere Sektionsabstände auf der ganzen Seite */
.probetraining-page .section, .jugend-page .section { padding: 2rem 0; }

/* Probetraining: Intro – schräges Bild, Text fließt drumherum */
.tryout-subhead { font-size: clamp(1.4rem, 3vw, 2rem); }
.tryout-intro::after { content: ""; display: block; clear: both; }
/* Swoosh-Headline im Intro block-level, damit der Text ums Float-Bild fließt */
.tryout-intro .swoosh-head { display: block; }
.tryout-intro-img { float: right; position: relative; z-index: 1;
    width: clamp(280px, 40%, 460px); margin: .4rem 0 1.2rem 2.2rem;
    border-radius: var(--r); transform: rotate(-1.8deg);
    box-shadow: 0 18px 40px rgba(0,0,0,.5); border: 6px solid rgba(255,255,255,.04); }
@media (max-width: 700px) { .tryout-intro-img { float: none; width: 100%; margin: 0 0 1.4rem; transform: none; } }

/* Jugend-Football: Eltern-FAQ (Akkordeon) */
.faq { display: flex; flex-direction: column; gap: .8rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.03); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
    font-family: var(--head); font-weight: 600; color: #fff; font-size: 1.1rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--gold); }
.faq-a { padding: 0 1.3rem 1.2rem; color: #d4d8e6; }
.faq-a p { margin: .5rem 0 0; }

/* Checkliste (Häkchen in Gold) */
.check-list { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.check-list li { position: relative; padding-left: 1.8rem; color: #d4d8e6; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* Jugendschutz: Info-Karten (vier Säulen + Werte) mit Hover */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.info-card { background: var(--navy); border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.6rem 1.4rem; text-align: center; box-shadow: 0 12px 28px rgba(0,0,0,.42);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
/* Gold-Swoosh hinter den Werte-Boxen */
.value-band { position: relative; padding: 2.6rem 0; background: url("../img/swoosh-gold.webp") center / 100% auto no-repeat; }
.info-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.info-card .icon { width: 60px; height: 60px; object-fit: contain; display: block; margin: 0 auto .9rem; filter: invert(1); }
.info-card h3 { font-family: var(--head); text-transform: uppercase; letter-spacing: .03em;
    color: var(--gold); font-size: 1.15rem; margin: 0 0 .5rem; }
.info-card p { color: var(--muted); margin: 0; font-size: .95rem; line-height: 1.5; }
@media (max-width: 900px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .info-grid { grid-template-columns: 1fr; } }

/* Jugendschutz: Ansprechpartner (runde Fotos wie Coaches, zentriert) */
.js-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 760px; margin: 0 auto; }
.coach-contact { display: block; color: var(--gold); font-size: .9rem; margin-top: .2rem; }
.coach-contact:hover { color: var(--gold-2); }
@media (max-width: 620px) { .js-contacts { grid-template-columns: 1fr; max-width: 320px; } }

/* Unterschrift (Handschrift) */
.signature { font-family: 'Sacramento', cursive; color: var(--gold); line-height: 1;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 1.8rem 0 0; }
.signature-role { color: var(--muted); margin: .1rem 0 0; }

/* ============================== Spielplan =========================== */
.sp-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.sp-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-btn { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
    color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px;
    padding: .45rem 1rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.sp-btn:hover { border-color: var(--gold); }
.sp-btn.active { background: var(--gold); color: #11162b; border-color: var(--gold); }
.sp-upcoming-wrap { display: inline-flex; align-items: center; gap: .5rem; color: #d4d8e6; font-size: .9rem; cursor: pointer; }
.sp-upcoming-wrap input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }

.sp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.spielplan { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
.spielplan th { text-align: left; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em;
    font-size: .76rem; color: var(--gold); padding: .8rem 1rem; background: var(--navy); white-space: nowrap; }
.spielplan td { padding: .75rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; color: #d4d8e6; }
.spielplan tbody tr:hover { background: rgba(255,255,255,.03); }
.sp-row.past { opacity: .45; }
.sp-row.riders-home { background: rgba(188,164,46,.06); }
.sp-row.riders-home td:first-child { box-shadow: inset 3px 0 0 0 var(--gold); }
.sp-when { white-space: nowrap; }
.sp-when .sp-date { display: block; color: #fff; font-weight: 600; }
.sp-when .sp-time { display: block; font-size: .82rem; color: var(--muted); }
.sp-badge { display: inline-block; padding: .22rem .6rem; border-radius: 6px; color: #11162b;
    font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .02em; white-space: nowrap; }
.sp-u10 { background: #cf94db; }
.sp-u13 { background: #84cf90; }
.sp-u13-flag { background: #b9c0d0; }
.sp-u16 { background: #74acec; }
.sp-u19 { background: #ecae78; }
.sp-btn.sp-u10.active { background: #cf94db; border-color: #cf94db; }
.sp-btn.sp-u13.active { background: #84cf90; border-color: #84cf90; }
.sp-btn.sp-u13-flag.active { background: #b9c0d0; border-color: #b9c0d0; }
.sp-btn.sp-u16.active { background: #74acec; border-color: #74acec; }
.sp-btn.sp-u19.active { background: #ecae78; border-color: #ecae78; }
.sp-empty { text-align: center; padding: 2.6rem 1rem; }
.sp-empty p { color: #d4d8e6; font-size: 1.05rem; margin: 0; line-height: 1.5; }
.sp-empty .sp-empty-season { font-family: var(--head); }
@media (max-width: 600px) {
    .spielplan { font-size: .8rem; min-width: 560px; }
    .spielplan th, .spielplan td { padding: .5rem .6rem; }
    .sp-badge { font-size: .68rem; padding: .14rem .42rem; }
    .sp-when .sp-time { font-size: .72rem; }
    .sp-btn { font-size: .76rem; padding: .4rem .85rem; }
    .sp-controls { gap: .7rem; }
}

/* ============================= Responsive ========================== */
@media (max-width: 900px) {
    .split, .contact-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .nav-toggle { display: block; }
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #0c1226; border-top: 1px solid var(--line); padding: .5rem;
        max-height: 82vh; overflow-y: auto; }
    .main-nav.open { display: block; }
    .nav-close { display: block; width: 100%; text-align: right; background: none; border: 0;
        color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 .4rem .2rem; }
    .nav-close:hover { color: var(--gold); }
    .main-nav ul { flex-direction: column; align-items: stretch; }
    /* Rubriken als Akkordeon: erst zu, antippen klappt auf */
    .main-nav .nav-section { display: flex; justify-content: space-between; align-items: center; }
    .has-sub > .nav-section::after { content: "+"; color: var(--gold); font-size: 1.3rem; line-height: 1; }
    .has-sub.open > .nav-section::after { content: "\2212"; }
    .has-sub > .sub,
    .has-sub:hover > .sub,
    .has-sub:focus-within > .sub { position: static; display: none; background: transparent;
        box-shadow: none; border: 0; padding-left: 1rem; }
    .has-sub.open > .sub { display: block; }
    .hero { min-height: 80vh; }
    .hero-ghost { display: none; }
}
@media (max-width: 560px) {
    .stats, .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr 1fr; }
    .section { padding: 3.5rem 0; }
    .lightbox-btn { width: 42px; height: 42px; font-size: 1.4rem; }
    .lightbox-prev { left: 2vmin; }
    .lightbox-next { right: 2vmin; }
}

/* Weniger Bewegung: Kippung & Animationen zurücknehmen */
@media (prefers-reduced-motion: reduce) {
    .gallery-item, .split .media img { transform: none !important; }
    * { transition-duration: .01ms !important; }
}