/* SG Empfingen – Demo-Stylesheet
   Schriften sind Systemschriften: keine Verbindung zu Google Fonts (DSGVO). */

:root {
  --red: #c8102e;
  --red-dark: #9b0c23;
  --red-soft: rgba(200,16,46,.18);
  --ink: #eef0f3;
  --dark: #0f0f11;
  --card: #25252a;
  --card-2: #2e2e34;
  --red-text: #ff5a72;
  --ink-2: #a3a9b4;
  --line: #36363d;
  --bg: #17171a;
  --bg-2: #1f1f23;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --max: 1180px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--red-text); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1, h2 { text-transform: uppercase; letter-spacing: .02em; font-weight: 900; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; font-weight: 800; }
p { margin: 0 0 1em; }

.container { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--grey { background: radial-gradient(ellipse at 85% 0%, rgba(200,16,46,.16), transparent 55%), var(--bg-2); }

/* Dunkler Blickfang-Abschnitt mit Wappen-Streifen */
.section--dark {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.82)), url("../img/bg-stadion-dunkel.jpg") center / cover #111317;
}

.section--mark { position: relative; }

/* Foto-Hintergrund für Aufruf-Kästen */
.cta.cta--photo {
  background: linear-gradient(100deg, rgba(140,10,30,.96) 0%, rgba(140,10,30,.78) 40%, rgba(10,10,11,.1) 75%), url("../img/bg-wappen-wand.jpg") right 30% / cover;
  min-height: 260px;
}
.section--dark .container { position: relative; z-index: 1; }
.section--dark .section__head p { color: #aab0bb; }
.section--dark .eyebrow { color: #ff4d67; }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.section__head p { color: var(--ink-2); margin: 0; }
.eyebrow { color: var(--red-text); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: .4em; display: block; }

/* ---------- Header ---------- */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 100; }

.topbar { background: var(--dark); color: #c9ccd3; font-size: .82rem; }
.topbar .container { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,11,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .crest { width: 52px; height: 52px; flex: none; object-fit: contain; }
.brand strong { display: block; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.brand small { color: var(--ink-2); font-size: .75rem; }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.nav__list > li { position: relative; display: flex; align-items: center; }
.nav a {
  display: block; padding: 10px 11px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.nav__list > li > a, .brand strong, .brand small { white-space: nowrap; }
/* Bis 1600px: Menü etwas kompakter und Untertitel beim Logo ausblenden, damit das Menü Luft hat */
@media (min-width: 1241px) and (max-width: 1600px) {
  .nav__list { gap: 2px; }
  .nav a { padding: 10px 9px; font-size: .9rem; }
  .brand .crest { width: 46px; height: 46px; }
  .brand small { display: none; }
}
.nav a:hover { background: var(--bg-2); }
.nav a[aria-current="page"] { color: var(--red-text); }
.nav__top[aria-current="page"] { background: var(--red-soft); }
.nav .btn { margin-left: 8px; }
.sub-toggle { background: none; border: 0; cursor: pointer; font-size: .8rem; color: var(--ink-2); padding: 8px 4px; margin-left: -10px; }

.sub {
  position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(20,22,30,.14);
  padding: 10px; display: none; z-index: 60;
}
.sub a { font-weight: 600; padding: 8px 12px; font-size: .92rem; }
.sub--mega { display: none; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 8px; min-width: 620px; left: -40px; }
.sub h5 { margin: 6px 12px 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red-text); }
@media (min-width: 1241px) {
  .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
  .has-sub:hover .sub--mega, .has-sub:focus-within .sub--mega { display: grid; }
}

.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }

@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px);
    background: var(--card); overflow-y: auto; border-top: 1px solid var(--line); display: none;
  }
  .nav.open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding: 12px 16px 32px; }
  .nav__list > li { flex-wrap: wrap; }
  .nav__list > li > a { flex: 1; padding: 14px; font-size: 1.05rem; }
  .sub-toggle { margin: 0; padding: 14px 16px; font-size: 1rem; }
  .sub, .sub--mega { position: static; box-shadow: none; border: 0; min-width: 0; width: 100%; padding: 0 0 8px 12px; }
  .has-sub.open .sub { display: block; }
  .has-sub.open .sub--mega { display: grid; grid-template-columns: 1fr; }
  .nav .btn { margin: 12px 0 0; text-align: center; flex: 1; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 22px; border-radius: 999px; font-weight: 800;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: .95rem;
}
.nav a.btn, .btn--red { background: var(--red); color: #fff; }
.nav a.btn:hover, .btn--red:hover { background: var(--red-dark); }
.btn--white { background: #fff; color: var(--red); }
.btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { border-color: var(--red-text); color: var(--red-text); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: #222 url("../img/hero-fallrueckzieher.jpg") 70% 35%/cover;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(140,10,30,.94) 0%, rgba(190,16,44,.78) 38%, rgba(120,10,28,.25) 68%, rgba(0,0,0,.05) 100%);
}
.hero .container { position: relative; padding: clamp(64px, 11vw, 140px) 0; }
.hero__badge {
  display: inline-block; background: #fff; color: var(--red); font-weight: 900;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
.hero h1 { font-size: clamp(2.4rem, 7vw, 5rem); margin: 18px 0 14px; max-width: 14ch; }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 52ch; opacity: .95; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* Grußwort rechts im Kopfbild (Handy: darunter) */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.gruss { background: rgba(255,255,255,.96); color: #1d1d1f; border-radius: var(--radius); padding: 26px 28px; box-shadow: 0 18px 40px rgba(0,0,0,.25); border-top: 5px solid var(--red); }
.gruss__label { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.gruss h2 { font-size: 1.5rem; margin: 6px 0 10px; color: #1d1d1f; }
.hero .gruss p { font-size: .98rem; max-width: none; opacity: 1; color: #3a3d44; margin: 0 0 14px; line-height: 1.6; }
.hero .gruss .gruss__name { margin: 0 0 12px; display: grid; }
.gruss__name b { color: #1d1d1f; }
.gruss__name span { font-size: .85rem; color: #6b6f78; }
.geschaeftsstelle { margin-bottom: 32px; }
.geschaeftsstelle p { margin: 0; line-height: 1.7; }
.gruss__mehr { font-weight: 800; color: var(--red); text-decoration: none; font-size: .92rem; }

.page-hero { background: linear-gradient(100deg, var(--red-dark), var(--red)); color: #fff; }
.page-hero .container { padding: clamp(44px, 7vw, 80px) 0; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 8px; }
.page-hero p { margin: 0; opacity: .9; max-width: 60ch; }
.crumbs { font-size: .85rem; opacity: .85; margin-bottom: 10px; }
.crumbs a { color: #fff; }

/* ---------- Kennzahlen ---------- */
.stats { margin-top: -44px; position: relative; z-index: 2; }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.stat { padding: 22px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 2rem; color: var(--red-text); font-weight: 900; line-height: 1.1; }
.stat span { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 700px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Spiel-Karten ---------- */
.match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.match {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow);
}
.match__meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.match__label { color: var(--red-text); }
.match__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 18px 0 8px; text-align: center; }
.match__team { font-weight: 800; font-size: .95rem; }
.match__team i {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--bg-2); font-style: normal; font-weight: 900; color: var(--ink-2);
}
.match__team.is-home i { background: var(--red); color: #fff; }
.match__score { font-size: 2rem; font-weight: 900; letter-spacing: .04em; }
.match__score small { display: block; font-size: .75rem; color: var(--ink-2); font-weight: 700; letter-spacing: 0; }
.tag { display: inline-block; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.tag--win { background: #e3f6e8; color: #1c7a3a; }
.tag--next { background: var(--red-soft); color: var(--red-text); }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s;
  text-decoration: none; color: inherit;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__img { aspect-ratio: 16/9; background: var(--bg-2) center/cover; position: relative; }
.card__img .tag { position: absolute; left: 14px; top: 14px; background: #fff; color: var(--red); }
.card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__body time { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.card__body p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.card__more { margin-top: auto; padding-top: 10px; color: var(--red-text); font-weight: 800; font-size: .9rem; }

.ph { display: grid; place-items: center; color: rgba(255,255,255,.9); font-weight: 900; font-size: 2.2rem; letter-spacing: .05em; }
.ph--red { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.ph--dark { background: linear-gradient(135deg, #2b2f38, #16181d); }
.ph--grey { background: linear-gradient(135deg, #6b7280, #3f444e); }

/* ---------- Abteilungen ---------- */
.dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.dept {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px;
  color: #fff; text-decoration: none; display: flex; align-items: flex-end; padding: 24px;
}
.dept::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.75)); }
.dept > * { position: relative; z-index: 1; }
.dept__icon { position: absolute; top: 20px; right: 20px; font-size: 2.6rem; z-index: 1; }
.dept h3 { font-size: 1.5rem; text-transform: uppercase; font-weight: 900; margin-bottom: 4px; }
.dept p { margin: 0; opacity: .9; font-size: .95rem; }
.dept:hover h3 { text-decoration: underline; }

/* ---------- Banner / Jubiläum / Spenden ---------- */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
.feature__img { border-radius: var(--radius); aspect-ratio: 4/3; background: center/cover; box-shadow: var(--shadow); }
.progress { background: var(--line); border-radius: 999px; height: 14px; overflow: hidden; margin: 14px 0 6px; }
.progress span { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.progress-meta { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-2); }

.cta {
  background: linear-gradient(100deg, var(--red-dark), var(--red)); color: #fff;
  border-radius: calc(var(--radius) + 6px); padding: clamp(28px, 5vw, 56px);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cta h2 { margin: 0 0 6px; }
.cta p { margin: 0; opacity: .92; }

/* ---------- Sponsoren ---------- */
.sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sponsor {
  height: 90px; border: 1px dashed #3a3f48; border-radius: 12px; display: grid; place-items: center;
  color: #8b909a; font-weight: 700; background: var(--card); font-size: .9rem; text-align: center; padding: 8px;
}

/* ---------- Tabellen, Listen ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--bg-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
tr.is-us td { background: var(--red-soft); font-weight: 800; }
tr:last-child td { border-bottom: 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }

/* Mannschaftsseite: Spiele & Tabelle im Mittelpunkt, Trainerteam am rechten Rand.
   Handy: erst die nächsten Spiele, dann Trainer/Training, dann Tabelle */
.team-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "spiele side" "rest side"; column-gap: 40px; row-gap: 48px; align-items: start; }
.team-layout__spiele { grid-area: spiele; }
.team-layout__side { grid-area: side; display: grid; gap: 18px; }
.team-layout__rest { grid-area: rest; }
.team-layout__side .box { margin: 0; }
@media (max-width: 960px) {
  .team-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "spiele" "side" "rest"; row-gap: 36px; }
}
.coaches--leitung { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.coaches--leitung .coach__photo { height: 300px; }
.coaches--leitung .coach__photo img { object-position: center 8%; }
.ausschuss-titel { margin: 48px 0 18px; font-size: 1.3rem; }
/* Ausschuss: kompakte Karten mit kleinem Foto */
.coaches--ausschuss { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.coaches--ausschuss .coach { flex-direction: row; align-items: stretch; }
.coaches--ausschuss .coach__photo { width: 92px; height: auto; min-height: 96px; flex: none; }
.coaches--ausschuss .coach__photo span { width: 52px; height: 52px; font-size: 1.1rem; }
.coaches--ausschuss .coach__body { padding: 12px 14px; align-self: center; }
.coaches--ausschuss .coach h3 { font-size: 1rem; margin: 2px 0 4px; }
.coaches--ausschuss .coach__contact { font-size: .85rem; }
.coaches--side { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.coaches--side .coach { flex-direction: row; align-items: stretch; }
.coaches--side .coach__photo { width: 92px; height: auto; min-height: 104px; flex: none; }
.coaches--side .coach__photo span { width: 56px; height: 56px; font-size: 1.2rem; }
.coaches--side .coach__body { padding: 12px 14px; min-width: 0; }
.coaches--side .coach h3 { font-size: 1rem; margin: 2px 0 6px; }
.coaches--side .coach__contact { font-size: .85rem; }
.coaches--side .coach__contact a { overflow-wrap: anywhere; }
@media (min-width: 600px) and (max-width: 960px) { .coaches--side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Spielliste */
.matches { display: grid; gap: 10px; margin-top: 18px; }
.spiel { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 14px 18px; }
.spiel__datum b { display: block; font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
.spiel__datum span { font-size: .82rem; color: var(--ink-2); font-weight: 700; }
.spiel__body { display: grid; gap: 2px; min-width: 0; }
.spiel__body b { font-size: 1rem; line-height: 1.3; }
.spiel__body .muted { font-size: .82rem; margin-top: 4px; }
.spiel__ort { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.spiel__ort.is-heim { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 520px) {
  .spiel { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .spiel__datum b { font-size: 1.1rem; }
  .spiel__ort { grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.box + .box { margin-top: 20px; }
.box h3 { margin-bottom: 12px; }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.person { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.person i {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--red-soft); color: var(--red-text);
  display: grid; place-items: center; font-style: normal; font-weight: 900;
}
.person b { display: block; }
.person span { color: var(--ink-2); font-size: .88rem; }

.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.group { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 10px; padding: 16px 18px; }
.group h3 { margin-bottom: 4px; }
.group p { margin: 0; color: var(--ink-2); font-size: .92rem; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tabs button {
  border: 1px solid var(--line); background: var(--card); padding: 9px 16px; border-radius: 999px;
  font-weight: 700; cursor: pointer; font-family: inherit; font-size: .9rem; color: var(--ink);
}
.tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red-text); color: #fff; }
.tab-panel[hidden] { display: none; }

.note {
  background: var(--card)8e6; border: 1px solid #f3d98b; color: #6b5310; border-radius: 10px;
  padding: 12px 16px; font-size: .9rem;
}

.timeline { border-left: 3px solid var(--red); padding-left: 24px; margin-left: 8px; }
.timeline div { position: relative; padding-bottom: 22px; }
.timeline div::before {
  content: ""; position: absolute; left: -32px; top: 6px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--card); border: 3px solid var(--red);
}
.timeline b { color: var(--red-text); font-size: 1.1rem; }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(180deg, rgba(12,12,13,.94), rgba(12,12,13,.97)), url("../img/bg-rauch-dunkel.jpg") center / cover var(--ink); color: #b9bdc6; padding: 56px 0 24px; margin-top: 0; font-size: .93rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer h4 { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__bottom { border-top: 1px solid #2c3039; margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .85rem; }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: #2c3039; display: grid; place-items: center; }
.social a:hover { background: var(--red); text-decoration: none; }
.social a { color: #fff; }
.social svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- Ergänzungen ---------- */
.muted { color: var(--ink-2); }
.btn--sm { padding: 8px 16px; font-size: .85rem; }
svg { flex: none; }
.box h3 svg, .facts svg, .coach__contact svg { width: 16px; height: 16px; fill: currentColor; vertical-align: -2px; margin-right: 6px; }
.box--red { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; border: 0; }
.box--red p { opacity: .9; }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.facts li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.tgroup .facts li { justify-content: flex-start; flex-wrap: nowrap; color: var(--ink-2); font-size: .92rem; }
.tgroup .facts svg { color: var(--red-text); }

/* Team-Kopf */
.team-hero { position: relative; color: #fff; background: var(--red-dark) center 30% / cover no-repeat; }
.team-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.78) 38%, rgba(10,10,11,.5) 70%, rgba(10,10,11,.4) 100%),
    linear-gradient(0deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,0) 40%);
  border-left: 6px solid var(--red);
}
@media (max-width: 700px) {
  .team-hero::before { background: linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.78) 45%, rgba(10,10,11,.9) 100%); }
}
.team-hero:not([style*="background-image"])::before { background: linear-gradient(100deg, rgba(140,10,30,.95), rgba(190,16,44,.8)); }
.team-hero .container { position: relative; padding: clamp(44px, 7vw, 88px) 0; }
.team-hero .crumbs a { color: #fff; }
.team-hero__badge { display: inline-block; background: #fff; color: var(--red); font-weight: 900; padding: 4px 12px; border-radius: 999px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.team-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 12px 0 10px; }
.team-hero p { max-width: 60ch; opacity: .95; }
.team-hero__facts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.team-hero__facts div { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 10px 16px; }
.team-hero__facts span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.team-hero__facts b { font-size: 1.05rem; }

.subnav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 72px; z-index: 40; }
.subnav .container { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.subnav a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: .88rem; }
.subnav a:hover { background: var(--bg-2); }
.subnav a[aria-current="page"] { background: var(--red); color: #fff; }

/* Trainer */
.coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.coach { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.coach__photo { height: 230px; overflow: hidden; background: linear-gradient(135deg, #3a1019, #1a1d23); display: grid; place-items: center; }
.coach__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.coach__photo span { width: 96px; height: 96px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 2rem; }
.coach__body { padding: 16px 18px 18px; }
.coach__role { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--red-text); }
.coach h3 { margin: 4px 0 10px; }
.coach__contact { display: grid; gap: 6px; font-size: .92rem; }
.coach__contact a { color: var(--ink); text-decoration: none; font-weight: 600; }
.coach__contact a:hover { color: var(--red-text); }
.coach__contact .muted svg { opacity: .6; }

@media (max-width: 600px) {
  .coach { flex-direction: row; align-items: center; }
  .coach__photo, .coaches--leitung .coach__photo { position: relative; width: 108px; height: auto; min-height: 128px; align-self: stretch; flex: none; }
  /* Foto füllt die Spalte immer ganz aus – Kopf bleibt sichtbar */
  .coach__photo img { position: absolute; inset: 0; object-position: center 12%; }
  .coach__photo span { width: 64px; height: 64px; font-size: 1.4rem; }
  .coach__body { padding: 14px 16px; min-width: 0; }
}

.team-photo { padding: 0; overflow: hidden; margin: 20px 0 0; }
.team-photo img { width: 100%; }
.team-photo figcaption { padding: 10px 16px; font-size: .85rem; color: var(--ink-2); }

/* Team-Karten */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.team-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.team-card__img { aspect-ratio: 3/2; background: linear-gradient(135deg, var(--red), var(--red-dark)) center/cover; position: relative; display: grid; place-items: center; }
.team-card__img span { color: #fff; font-size: 3rem; font-weight: 900; }
.team-card__img em { position: absolute; left: 12px; top: 12px; background: #fff; color: var(--red); font-style: normal; font-weight: 900; font-size: .78rem; padding: 3px 10px; border-radius: 999px; }
.team-card__body { padding: 14px 18px 18px; }
.team-card__body h3 { margin: 0 0 4px; }
.team-card__body p { margin: 0; color: var(--ink-2); font-size: .9rem; }

/* Einwilligung */
.consent-box {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center;
  background: rgba(10,10,11,.85); backdrop-filter: blur(3px); padding: 20px;
}
.consent-box p { margin: 0 0 10px; font-size: .92rem; color: var(--ink-2); max-width: 40ch; }
.consent-box b { color: var(--ink); }
.consent-box--light { position: static; background: var(--bg-2); border-radius: 10px; padding: 28px 20px; }

/* Instagram */
.insta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.insta__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.insta__head > div:nth-child(2) { flex: 1; }
.insta__head b { display: block; }
.insta__head span { color: var(--ink-2); font-size: .88rem; }
.insta__avatar { width: 48px; height: 48px; border-radius: 50%; padding: 3px; background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); display: grid; place-items: center; }
.insta__avatar .crest { width: 42px; height: 42px; background: #fff; border-radius: 50%; padding: 4px; object-fit: contain; }
.trainer-photo { width: 100%; border-radius: var(--radius); margin-bottom: 18px; aspect-ratio: 16/9; object-fit: cover; object-position: center 25%; }

/* Fotostreifen */
.photo-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.photo-strip img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.photo-strip img:first-child { aspect-ratio: auto; }
@media (max-width: 700px) { .photo-strip { grid-template-columns: 1fr 1fr; } .photo-strip img:first-child { grid-column: span 2; aspect-ratio: 16/9; } }

.photo-strip--2 { grid-template-columns: 2fr 1fr; }
.photo-strip--2 img { max-height: 360px; }
.photo-strip--2 img:last-child { object-position: center 20%; }
@media (max-width: 700px) { .photo-strip--2 { grid-template-columns: 1fr 1fr; } }

/* Chronik mit Bildern */
/* 100 Jahre: Jubiläumsjahr-Karten und Bildergalerie */
.jubi-jahr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.jubi-jahr__item { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.jubi-jahr__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.jubi-jahr__item .tag { margin: 18px 20px 0; align-self: flex-start; }
.jubi-jahr__item h3 { margin: 10px 20px 6px; }
.jubi-jahr__item p { margin: 0 20px 20px; color: var(--ink-2); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 240px), 1fr)); gap: 12px; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; cursor: zoom-in; transition: transform .15s; }
.galerie img:hover { transform: scale(1.02); }
.galerie__credit { margin: 12px 0 0; font-size: .82rem; color: var(--ink-2); }
.chronik { display: grid; gap: 28px; position: relative; }
.chronik::before { content: ""; position: absolute; left: 87px; top: 0; bottom: 0; width: 3px; background: var(--red); }
.chronik__item { display: grid; grid-template-columns: 72px 1fr; gap: 32px; align-items: start; }
.chronik__jahr { font-size: 1.4rem; font-weight: 900; color: var(--red-text); text-align: right; padding-top: 2px; }
.chronik__body { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.chronik__body img { width: 100%; max-height: 360px; object-fit: cover; filter: saturate(.9); }
.chronik__body div { padding: 14px 18px; }
.chronik__body h3 { margin: 0 0 4px; }
.chronik__body p { margin: 0; color: var(--ink-2); font-size: .93rem; }
@media (max-width: 600px) {
  .chronik::before { left: 6px; }
  .chronik__item { grid-template-columns: 1fr; gap: 6px; padding-left: 22px; }
  .chronik__jahr { text-align: left; }
}
.insta__feed { position: relative; min-height: 200px; }
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 700px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }
.insta__tile { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, hsl(calc(350 + var(--i) * 6) 70% 52%), hsl(calc(10 + var(--i) * 8) 60% 38%)); }
.insta__tile svg { width: 28px; fill: rgba(255,255,255,.7); }
.note--overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90%, 420px); text-align: center; }

/* fussball.de */
.fbde { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.fbde__head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--dark); color: #fff; font-size: .9rem; }
.fbde__head span { opacity: .7; font-size: .8rem; }
.fbde__body { padding: 16px; }
.fbde__body .table-wrap { border-radius: 10px; }
.fbde__body .note { margin: 0 0 12px; }

/* Termine */
.termin { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.termin:last-child { border-bottom: 0; }
.termin__date { flex: none; width: 46px; height: 48px; border-radius: 9px; background: var(--c); color: #fff; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.termin__date b { font-size: 1.15rem; }
.termin__date span { font-size: .66rem; text-transform: uppercase; font-weight: 700; }
.termin__body { flex: 1; display: grid; min-width: 0; font-size: .92rem; line-height: 1.35; }
.termin__kat { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.termin__kat i { color: var(--ink-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.termin__body .muted { font-size: .8rem; }
.termin__ics { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.termin__ics:hover { background: var(--red); color: #fff; border-color: var(--red-text); }
.termin__ics svg { width: 18px; height: 18px; fill: currentColor; }
/* Startseite: Termine je Bereich */
.termin-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .termin-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .termin-cols { grid-template-columns: minmax(0, 1fr); } }
.termin-col { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--radius); padding: 12px 16px 6px; box-shadow: 0 4px 16px rgba(20,22,30,.05); }
.termin-col__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.termin-col__head h3 { margin: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--c); }
.termin-col__head a { font-size: .82rem; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.termin-col__head a:hover { color: var(--c); }
.termin-col .termin { gap: 10px; }
.termin-col .termin__date { width: 40px; height: 42px; }
.termin-col .termin__date b { font-size: 1rem; }
.termin-col .termin__kat { display: none; }
.termin-col .termin__ics { width: 30px; height: 30px; }
.termin-col .termin__ics svg { width: 15px; height: 15px; }
.termin-col__leer { padding: 14px 0; margin: 0; font-size: .9rem; }
/* Sonstiges (Ferien, Pausen …): eine breite Leiste unter den vier Spalten */
/* Tischtennis: Tabellen & Ergebnisse von click-TT */
.tt-liga { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.tt-liga__team h3 small { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.tt-liga__team h4 { margin: 20px 0 8px; font-size: .95rem; }
.tt-tabelle { width: 100%; font-size: .88rem; }
.tt-tabelle td:nth-child(n+3), .tt-tabelle th:nth-child(n+3) { text-align: center; white-space: nowrap; }
.tt-tabelle td:last-child { font-weight: 800; }
.tt-tabelle td, .tt-tabelle th { padding: 8px 8px; }
@media (max-width: 600px) {
  .tt-tabelle td:nth-child(4), .tt-tabelle td:nth-child(5), .tt-tabelle td:nth-child(6),
  .tt-tabelle th:nth-child(4), .tt-tabelle th:nth-child(5), .tt-tabelle th:nth-child(6) { display: none; }
  .tt-tabelle td, .tt-tabelle th { padding: 7px 5px; font-size: .82rem; }
  .tt-erg { grid-template-columns: 58px minmax(0, 1fr) auto; font-size: .82rem; }
}
.tt-tabelle tr.ist-sge td { background: var(--red-soft, rgba(200,16,46,.16)); color: var(--red-text); font-weight: 800; }
.tt-ergebnisse { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.tt-erg { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--bg-2); border-left: 4px solid var(--line); font-size: .88rem; }
.tt-erg b { font-size: 1rem; }
.tt-erg--sieg { border-left-color: #2e9e5b; }
.tt-erg--niederlage { border-left-color: var(--red); }
.tt-erg--remis { border-left-color: #c9a227; }
.tt-kurz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 960px) { .tt-kurz { grid-template-columns: minmax(0, 1fr); } }
.tt-kompakt h3 small { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.tt-kompakt .tt-tabelle td { padding: 6px 8px; border: 0; border-bottom: 1px solid var(--line); }
.tt-kompakt .tt-tabelle td:nth-child(2) { text-align: left; white-space: normal; }
.tt-kompakt .tt-tabelle td:first-child { width: 28px; color: var(--ink-2); }
.tt-stand { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.tt-stand li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.tt-stand span { color: var(--ink-2); }
.hinweis-klein { margin: 14px 0 0; font-size: .8rem; opacity: .8; }
/* Mitglied werden */
.mitglied { display: grid; gap: 22px; }
.mitglied__schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mitglied__schritte h3 { margin: 10px 0 6px; }
.mitglied__schritte p { margin: 0; }
.mitglied__nr { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 900; }
.mitglied__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.mitglied__seite { display: grid; gap: 22px; }
.beitraege { width: 100%; }
.beitraege td:last-child, .beitraege th:last-child { text-align: right; white-space: nowrap; font-weight: 800; }
.club100 { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-left: 5px solid var(--red); }
.club100 h3 { margin: 4px 0 6px; }
.club100 p { margin: 0; max-width: 62ch; }
.club100__btns { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.club100 .btn { flex: none; }
.mitglied__teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.downloads--reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) {
  .mitglied__schritte, .mitglied__grid, .mitglied__teaser, .downloads--reihe { grid-template-columns: minmax(0, 1fr); }
  .club100 { flex-direction: column; align-items: flex-start; }
}
.kimmich-banner { display: block; width: 100%; max-width: 720px; height: auto; border-radius: var(--radius); margin: 0 auto 48px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.termin-cols--sonst { grid-template-columns: minmax(0, 1fr) !important; margin-top: 18px; }
.termin-cols--sonst .termin-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.termin-cols--sonst .termin-col__head { grid-column: 1 / -1; }
@media (max-width: 1100px) { .termin-cols--sonst .termin-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .termin-cols--sonst .termin-col { grid-template-columns: minmax(0, 1fr); } }
.termin-highlight {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  background: var(--dark); color: #fff; border-radius: var(--radius); padding: 14px 18px;
  border-left: 6px solid var(--red);
}
.termin-highlight__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; background: var(--red); padding: 3px 10px; border-radius: 6px; }
.termin-highlight b { font-size: 1.05rem; }
.termin-highlight span:not(.termin-highlight__label) { color: #c3c7cf; font-size: .9rem; flex: 1; }
.termin-highlight .termin__ics { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }

/* Startseite: Projekte */
.projekt-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--card); border-radius: calc(var(--radius) + 4px); overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 860px) { .projekt-main { grid-template-columns: minmax(0, 1fr); } }
.projekt-main__img { min-height: 320px; background: center / cover; }
.projekt-main__body { padding: clamp(24px, 4vw, 40px); }
.projekt-main__body h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 12px 0 10px; }
.projekt-main__body p { color: var(--ink-2); }
.projekt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 860px) { .projekt-grid { grid-template-columns: minmax(0, 1fr); } }
.projekt { display: grid; grid-template-columns: 110px minmax(0, 1fr); background: var(--card); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.projekt:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.projekt img { width: 100%; height: 100%; object-fit: cover; }
.projekt div { padding: 14px 16px; }
.projekt h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.projekt p { margin: 0; color: var(--ink-2); font-size: .86rem; }
.projekt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .projekt-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.projekt-grid--2 .projekt { grid-template-columns: 160px minmax(0, 1fr); }
.projekt-main__img--jubi { position: relative; filter: sepia(.25); }
.jubi-badge {
  position: absolute; left: 24px; bottom: 24px; display: grid; justify-items: center; line-height: 1;
  background: var(--red); color: #fff; padding: 14px 18px 12px; border-radius: 12px; transform: rotate(-4deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.4); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
}
.jubi-badge b { font-size: 2.8rem; letter-spacing: 0; font-weight: 900; }
.projekt__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--red-text); }

.termine-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 20px; }

.cal-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cal-filter button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cal-filter button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.cal-filter button[aria-pressed="true"] { background: var(--red); color: #fff; border-color: var(--red-text); }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .cal-wrap { grid-template-columns: minmax(0, 1fr); } }
.cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__head h3 { margin: 0; }
.cal__head button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 1.3rem; cursor: pointer; }
.cal__head button:hover { background: var(--bg-2); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; max-height: 12px; overflow: hidden; }
@media (max-width: 520px) { .cal { padding: 12px; } .cal__day { padding: 4px 2px; font-size: .85rem; } }
.cal__wd { text-align: center; font-size: .75rem; font-weight: 800; color: var(--ink-2); padding: 6px 0; text-transform: uppercase; }
.cal__day { aspect-ratio: 1.35; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: .9rem; }
.cal__day.has-ev { background: var(--card-2); font-weight: 800; border: 0; color: inherit; font-family: inherit; cursor: pointer; }
.cal__day.has-ev:hover { outline: 2px solid var(--line); }
.cal__day.is-sel { outline: 2px solid var(--red) !important; }
.cal-mehr { margin-top: 14px; display: inline-block; background: none; border: 0; cursor: pointer; font: inherit; }
.cal-mehr.btn { border: 1px solid var(--line); }
.cal__day.is-today span { background: var(--red); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; }
.cal__dots i { width: 7px; height: 7px; border-radius: 50%; }
.cal-list h3 { margin-bottom: 8px; }

/* Turnen */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } }
.week__day { background: var(--bg-2); border-radius: var(--radius); padding: 14px; }
.week__day h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red-text); margin-bottom: 10px; }
.week__item { display: grid; background: var(--card); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; text-decoration: none; color: var(--ink); border-left: 3px solid var(--red); }
.week__item:hover { box-shadow: var(--shadow); }
.week__item b { font-size: .8rem; color: var(--ink-2); }
.week__item small { color: var(--ink-2); font-size: .78rem; }
.tgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tgroup { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; scroll-margin-top: 100px; }
.tgroup h3 { font-size: 1.25rem; margin-bottom: 8px; }
.tgroup .facts { margin: 14px 0; gap: 6px; }
.tgroup p { color: var(--ink-2); font-size: .93rem; margin: 0; }

/* Tischtennis */
.reports { display: grid; gap: 16px; }
.report { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 12px; padding: 18px 20px; }
.report time { font-size: .8rem; color: var(--ink-2); font-weight: 700; }
.report h3 { margin: 4px 0 8px; }
.report p { margin: 0; color: var(--ink-2); }

/* Abteilungs-Kacheln Startseite */
.dept-grid--3 { grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .dept-grid--3 { grid-template-columns: 1fr; } }
.dept--big { min-height: 440px; }
.dept-grid--3 .dept { min-height: 440px; background: #1b1e24; box-shadow: 0 20px 50px rgba(0,0,0,.45); border-radius: 18px; isolation: isolate; }
@media (max-width: 860px) {
  .dept-grid--3 .dept { min-height: 380px; }
  .dept-grid--3 .dept::after { background: linear-gradient(180deg, rgba(10,11,14,.1) 0%, rgba(10,11,14,.55) 40%, rgba(10,11,14,.92) 100%) !important; }
}
.dept__bg { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1 !important; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; filter: saturate(.95); }
.dept:hover .dept__bg { transform: scale(1.07); filter: saturate(1.1); }
.dept-grid--3 .dept::after { background: linear-gradient(180deg, rgba(10,11,14,0) 35%, rgba(10,11,14,.88) 100%); z-index: 0; }
.dept__nr { position: absolute !important; top: 18px; left: 22px; font-size: .8rem; font-weight: 900; letter-spacing: .15em; color: #fff; background: var(--red); padding: 4px 10px; border-radius: 6px; transform: skewX(-10deg); }
.dept__go {
  position: absolute !important; right: 20px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--red); font-weight: 900; font-size: 1.2rem;
  transition: transform .25s, background .25s, color .25s;
}
.dept:hover .dept__go { transform: translateX(4px); background: var(--red); color: #fff; }
.dept-grid--3 .dept h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: .02em; }
.dept-grid--3 .dept > div { padding-right: 60px; }
.dept__links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.dept__links span { background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; }

/* ---------- Wappen-Streifen als Gestaltungselement ---------- */
.hero::after, .page-hero::after, .team-hero::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: 14%; height: 42px;
  background: rgba(255,255,255,.1); transform: rotate(-4deg); pointer-events: none;
}
.hero .container { z-index: 1; }
.page-hero { position: relative; overflow: hidden; }
.page-hero .container { position: relative; z-index: 1; }
.team-hero { overflow: hidden; }
.team-hero .container { z-index: 1; }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 3px; background: currentColor; margin-right: 8px; vertical-align: middle; transform: skewX(-20deg); }

.topbar__shops a { margin-left: 4px; }
@media (max-width: 600px) { .topbar__shops { display: none; } }
.sub--right { left: auto; right: 0; }

/* ---------- Shops ---------- */
.shopband { background: var(--bg-2); border-top: 1px solid var(--line); padding: 64px 0; }
.shopband .container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: stretch; }
@media (max-width: 800px) { .shopband { padding: 48px 0; } .shopband .container { grid-template-columns: 1fr; } }
.shopband__intro { align-self: center; }
.shopband__intro h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.shopband__intro p { margin: 10px 0 0; color: var(--ink-2); }
.shopband__card {
  position: relative; overflow: hidden; display: grid; gap: 4px; align-content: end; min-height: 190px; padding: 26px 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.shopband__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }
.shopband__icon svg { width: 26px; height: 26px; }
.shopband__card b { font-size: 1.5rem !important; }
.shopband__card .shopband__go { margin-top: 10px; color: var(--red-text); font-size: 1rem; }
.shopband__card::after { content: ""; position: absolute; right: -30px; top: 0; bottom: 0; width: 90px; background: var(--red); transform: skewX(-16deg); opacity: .08; transition: opacity .15s; }
.shopband__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.shopband__card:hover::after { opacity: .16; }
.shopband__kurz { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--red-text); }
.shopband__card b { font-size: 1.2rem; }
.shopband__go { font-weight: 700; color: var(--ink-2); font-size: .9rem; }

.shoptab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; align-items: center; }
.shoptab__btn {
  writing-mode: vertical-rl; transform: rotate(180deg); background: var(--red); color: #fff; border: 0; cursor: pointer;
  padding: 18px 12px; border-radius: 0 12px 12px 0; font: inherit; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(155,12,35,.35); display: flex; align-items: center; gap: 10px;
}
.shoptab__btn svg { width: 22px; height: 22px; transform: rotate(90deg); }
.shoptab__panel { display: none; background: var(--card); border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; box-shadow: var(--shadow); padding: 8px; }
.shoptab.open .shoptab__panel { display: grid; gap: 4px; }
.shoptab__panel a { display: grid; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.shoptab__panel a:hover { background: var(--bg-2); }
.shoptab__panel span { font-size: .8rem; color: var(--red-text); font-weight: 700; }
@media (max-width: 600px) {
  .shoptab { top: auto; bottom: 70px; transform: none; }
  .shoptab__btn { padding: 12px 8px; }
  .shoptab__btn span { display: none; }
}

.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 800px) { .shop-grid { grid-template-columns: 1fr; } }
.shop-card { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 6px); padding: clamp(28px, 4vw, 44px); background: var(--card); border: 1px solid var(--line); min-height: 300px; display: flex; flex-direction: column; align-items: flex-start; }
.shop-card::after { content: ""; position: absolute; right: -60px; top: -20%; bottom: -20%; width: 160px; background: var(--red); transform: skewX(-14deg); opacity: .1; }
.shop-card p { color: var(--ink-2); max-width: 46ch; flex: 1; }
.shop-card--dark { background: var(--dark); color: #fff; border: 0; }
.shop-card--dark p { color: #c9ccd3; }
.shop-card--dark::after { opacity: .5; }
.shop-card > * { position: relative; z-index: 1; }

/* ---------- Veo ---------- */
.veo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.veo__head { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: .9rem; }
.veo__head span { color: var(--ink-2); font-size: .8rem; }
.veo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.veo__item { display: grid; gap: 4px; text-decoration: none; color: var(--ink); font-size: .9rem; }
.veo__item .muted { font-size: .8rem; }
.veo__thumb {
  aspect-ratio: 16/9; border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2f7a3b 0%, #3f9a4c 50%, #2f7a3b 100%);
}
.veo__thumb::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255,255,255,.5); }
.veo__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; transform: translate(-50%, -50%); }
.veo__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.55); z-index: 1; }
.veo__play::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.veo__item:hover .veo__play { background: var(--red); }

/* ---------- Hallencup ---------- */
.cup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .cup-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cup-grid { grid-template-columns: 1fr; } }
.cup-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; }
.cup-card__nr { font-size: 3rem; font-weight: 900; color: var(--red-text); opacity: .15; position: absolute; right: 14px; top: 2px; line-height: 1; }
.cup-card p { color: var(--ink-2); font-size: .93rem; margin: 0; }
.winners { display: grid; gap: 12px; margin-top: 8px; }
.winner { display: grid; grid-template-columns: 120px 1fr; gap: 2px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.winner span { grid-row: span 2; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--red-text); align-self: center; }
.winner b { font-size: 1.1rem; }
.winner p { margin: 0; color: var(--ink-2); font-size: .9rem; }
@media (max-width: 520px) { .winner { grid-template-columns: 1fr; } .winner span { grid-row: auto; } }
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.downloads a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.downloads a:hover { background: var(--red-soft); color: var(--red-text); }
.downloads span { font-size: .7rem; font-weight: 800; background: var(--red); color: #fff; padding: 2px 6px; border-radius: 4px; }

/* ---------- Sponsoren ---------- */
.sponsor img { max-height: 64px; max-width: 80%; object-fit: contain; }
.sponsor__ph { display: grid; justify-items: center; gap: 2px; }
.sponsor__ph b { font-size: 1.3rem; letter-spacing: .2em; color: #b5b9c2; font-weight: 900; }
.sponsor__ph small { font-size: .72rem; color: #9aa0aa; text-transform: uppercase; letter-spacing: .08em; }
.sponsors--premium .sponsor__ph b { font-size: 2rem; }

.gremium + .gremium { margin-top: 36px; }
.gremium__titel { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red-text); margin-bottom: 14px; }
a.sponsor { text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.sponsor:hover { border-color: var(--red-text); box-shadow: var(--shadow); }
.sponsor-group + .sponsor-group { margin-top: 36px; }
.sponsor-group + .sponsor-group { margin-top: 48px; }
.sponsor-group h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: 16px; padding-left: 12px; border-left: 4px solid var(--red); }
.sponsors--premium { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.sponsors--premium .sponsor { height: 140px; border-style: solid; border-width: 2px; }
.sponsors--gold { grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); }
.sponsors--gold .sponsor { height: 100px; border-style: solid; }
.sponsors--silber { grid-template-columns: repeat(auto-fill, minmax(min(30%, 130px), 1fr)); gap: 10px; }
.sponsors--silber .sponsor { height: 74px; border-style: solid; padding: 6px; }
.sponsors--ausruester { grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); }
.sponsors--ausruester .sponsor { height: 110px; border-style: solid; }
/* Logo immer innerhalb der Kachel halten */
.sponsor { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sponsor img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .sponsor-packages { grid-template-columns: 1fr; } }
.package { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.package--hl { border: 2px solid var(--red); }
.package ul { padding-left: 18px; color: var(--ink-2); margin: 10px 0 0; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 780px; }
.legal h2 { font-size: 1.35rem; text-transform: none; letter-spacing: 0; margin-top: 40px; }
.legal h3 { margin-top: 24px; }
.legal p, .legal li { color: #d6d9de; }
.legal .todo { background: var(--card)8e6; border-bottom: 2px solid #f3c64b; padding: 0 3px; }

/* ---------- Dunkles Schema: Feinschliff ---------- */
.page-hero {
  background: linear-gradient(100deg, rgba(140,10,30,.95) 0%, rgba(190,16,44,.82) 45%, rgba(120,10,28,.55) 100%), url("../img/bg-rauch-dunkel.jpg") center / cover var(--red-dark);
}
.section--mark::before { filter: grayscale(1) brightness(5); opacity: .035; }
.section--smoke { background: linear-gradient(180deg, rgba(10,10,11,.9), rgba(10,10,11,.96)), url("../img/bg-rauch-dunkel.jpg") center / cover var(--bg); }
.sponsor:has(img) { background: #fff; border-style: solid; border-color: transparent; }
.box, .coach, .team-card, .termin-col, .projekt, .projekt-main, .cup-card, .winner, .tgroup, .report, .package, .chronik__body, .veo, .insta, .fbde, .cal, .shopband__card, .group, .match {
  border-color: var(--line);
}
.team-card:hover, .projekt:hover, .shopband__card:hover { border-color: rgba(200,16,46,.6); }
.shopband { border-top: 0; }
.shopband__card::after { opacity: .2; }
.footer { border-top: 1px solid var(--line); }
input, select, textarea { background: var(--card-2) !important; color: var(--ink); border-color: var(--line) !important; }
.week__item { background: var(--card); }
.downloads a { background: var(--card-2); }
.btn--outline { border-color: var(--red); color: #fff; }
.btn--outline:hover { background: var(--red); }
.nav__top[aria-current="page"] { color: #fff; background: var(--red-soft); }
.nav a[aria-current="page"] { color: #fff; }

/* ---------- Abteilungs-Unterseiten ---------- */
.projekt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1100px) { .projekt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .projekt-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.projekt-grid--4 .projekt { grid-template-columns: minmax(0, 1fr); }
.projekt-grid--4 .projekt img { aspect-ratio: 16/10; height: auto; }

.checklist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.checklist li { padding-left: 28px; position: relative; color: var(--ink-2); }
.checklist li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 6px; border-left: 3px solid var(--red-text); border-bottom: 3px solid var(--red-text); transform: rotate(-45deg); }

.namen { display: flex; flex-wrap: wrap; gap: 8px; }
.namen span { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 600; }

.tt-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tt-teams--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .tt-teams, .tt-teams--2 { grid-template-columns: minmax(0, 1fr); } }
.tt-team { display: block; background: var(--card); border: 1px solid var(--line); border-top: 4px solid #1c9a5b; border-radius: var(--radius); padding: 22px; color: inherit; text-decoration: none; }
.tt-team h3 { font-size: 1.5rem; margin: 4px 0 8px; }
.tt-team p { color: var(--ink-2); }
.tt-team h4 { margin: 18px 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
a.tt-team:hover { border-color: rgba(28,154,91,.7); }
.tt-team--meister { border-top-color: #e0b13a; background: linear-gradient(135deg, rgba(224,177,58,.12), var(--card) 60%); }
.saison { margin: 32px 0 14px; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red-text); }
.saison:first-of-type { margin-top: 0; }

/* ==========================================================
   Startseite in Vereinsfarben Rot & Weiß  (<body class="theme-light">)
   ========================================================== */
.theme-light {
  --ink: #16181d; --ink-2: #545a65; --bg: #ffffff; --bg-2: #f5f5f6;
  --card: #ffffff; --card-2: #f2f2f4; --line: #e7e7ea;
  --red-text: #c8102e; --red-soft: #fdecef; --shadow: 0 10px 30px rgba(20,22,30,.08);
}
.theme-light .topbar { background: var(--red-dark); color: rgba(255,255,255,.85); }
.theme-light .header { background: rgba(255,255,255,.96); }
.theme-light .nav-toggle span { background: var(--ink); }
.theme-light .nav a[aria-current="page"], .theme-light .nav__top[aria-current="page"] { color: var(--red); }
.theme-light .btn--outline { color: var(--red); border-color: var(--red); }
.theme-light .btn--outline:hover { color: #fff; }
.theme-light .note { background: #fff8e6; border-color: #f3d98b; color: #6b5310; }
.theme-light .consent-box { background: rgba(255,255,255,.9); }
.theme-light .section--grey { background: var(--bg-2); }
.theme-light .termin-highlight { background: var(--red); border-left-color: var(--red-dark); }
.theme-light .termin-highlight__label { background: #fff; color: var(--red); }
.theme-light .termin-highlight span:not(.termin-highlight__label) { color: rgba(255,255,255,.85); }
.theme-light .termin-col { box-shadow: var(--shadow); }
.theme-light .stats__grid { border: 1px solid var(--line); }

/* rote Abschnitte */
.section--red {
  color: #fff;
  background: linear-gradient(135deg, rgba(155,12,35,.97), rgba(200,16,46,.93)), url("../img/bg-rauch-dunkel.jpg") center / cover var(--red);
}
.section--red .eyebrow, .section--red .section__head p { color: rgba(255,255,255,.85); }
.section--red .projekt-main, .section--red .projekt { color: var(--ink); border-color: transparent; }
.section--red .tag--next { background: var(--red-soft); color: var(--red); }
.theme-light .section--dark { background: linear-gradient(180deg, rgba(150,10,32,.86), rgba(110,8,24,.92)), url("../img/bg-stadion-dunkel.jpg") center / cover var(--red-dark); }
.theme-light .section--dark .eyebrow { color: #fff; }
.theme-light .section--dark .section__head p { color: rgba(255,255,255,.85); }
.theme-light .shopband { background: var(--bg-2); }
.theme-light .footer { background: linear-gradient(180deg, rgba(120,8,26,.96), rgba(85,6,18,.98)), url("../img/bg-rauch-dunkel.jpg") center / cover var(--red-dark); color: rgba(255,255,255,.8); border-top: 0; }
.theme-light .footer__bottom { border-top-color: rgba(255,255,255,.18); }
.theme-light .social a { background: rgba(255,255,255,.15); }

/* ---------- Bild-Vergrößerung ---------- */
.zoombar { cursor: zoom-in; transition: filter .2s; }
.zoombar:hover { filter: brightness(1.08); }
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(8,8,9,.92); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px; cursor: zoom-out; animation: lb-in .2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1400px, 100%); cursor: default; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); margin: 0 auto; }
.lightbox figcaption { color: #e9eaee; text-align: center; padding-top: 12px; font-size: .95rem; }
.lightbox__close {
  position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 2.2rem; line-height: 1; display: none; place-items: center; padding-bottom: 4px;
}
.lightbox__nav:hover { background: var(--red); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox--blaettern .lightbox__nav { display: grid; }
@media (max-width: 700px) { .lightbox__nav { width: 42px; height: 42px; font-size: 1.8rem; top: auto; bottom: 16px; transform: none; } }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* Bildergalerie-Seite */
.galerie-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.galerie-filter button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.galerie-filter button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.galerie--seite { grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr)); }
.galerie img[hidden] { display: none; }

.demo-flag {
  position: fixed; right: 12px; bottom: 12px; z-index: 60; background: var(--dark); color: #fff;
  font-size: .75rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; opacity: .85;
}