/* =========================================================
   Jugend braucht Bewegung, Gestaltung seit 29.10.2026
   Drei Farbwelten ueber data-theme am <html>:
     (ohne)   Landingpage, hell und neutral
     verein   Foerderverein, Petrol aus dem Logo-Schriftzug
     court    Sparkassen SportCourt, Anthrazit und Hellblau aus dem Logo
   Nur Systemschriften, keine Fremdressourcen, Bewegung nur ueber
   transform und opacity. Ebenen: 50 Seitenkopf, 60 Koernung, 70 Lightbox.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

:root {
  /* Landingpage: hell, leicht kuehl, Petrol als Akzent */
  --bg: #F2F4F2;
  --bg-2: #E7ECEA;
  --surface: #FFFFFF;
  --surface-2: #FAFBFA;
  --ink: #15222A;
  --ink-soft: #55646B;
  --line: #D9E0DE;
  --line-strong: #C3CDCA;
  --accent: #1E6078;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEAEE;
  --accent-2: #66A8D2;
  --glow: rgba(30, 96, 120, .18);
  --shadow: 0 12px 32px rgba(21, 34, 42, .08);
  --shadow-lg: 0 28px 70px rgba(21, 34, 42, .16);

  /* Logofarben des Foerdervereins, fuer kleine Marken */
  --c-gruen: #7EB43C;
  --c-blau: #0C6CA2;
  --c-rot: #E4121E;
  --c-lila: #841E78;
  --c-gelb: #F6B400;
  --c-petrol: #1E6078;
  --c-hellblau: #66A8D2;
  --c-anthrazit: #424E54;

  --font-sans: "Avenir Next", "Segoe UI", Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, "Liberation Mono", Courier, monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --header-h: 72px;
  --container: 1160px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

[data-theme="verein"] {
  --bg: #0E3944;
  --bg-2: #0B303A;
  --surface: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .04);
  --ink: #F2F7F7;
  --ink-soft: #B6CBD0;
  --line: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .26);
  --accent: #F6B400;
  --accent-ink: #14303A;
  --accent-soft: rgba(246, 180, 0, .16);
  --accent-2: #7EB43C;
  --glow: rgba(246, 180, 0, .22);
  --shadow: 0 14px 40px rgba(0, 0, 0, .28);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .42);
}

[data-theme="court"] {
  --bg: #0C1215;
  --bg-2: #10181C;
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .03);
  --ink: #EEF3F6;
  --ink-soft: #A1B0B8;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .22);
  --accent: #66A8D2;
  --accent-ink: #0C1215;
  --accent-soft: rgba(102, 168, 210, .16);
  --accent-2: #9ED0F0;
  --glow: rgba(102, 168, 210, .28);
  --shadow: 0 14px 40px rgba(0, 0, 0, .38);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
[data-theme] body { color-scheme: dark; }

/* Feine Koernung ueber allem, nur auf den dunklen Welten */
[data-theme] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Farbstreifen des Vereins am oberen Rand */
.brand-stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 55;
  background: linear-gradient(90deg, var(--c-gruen) 0 20%, var(--c-blau) 20% 40%, var(--c-rot) 40% 60%, var(--c-lila) 60% 80%, var(--c-gelb) 80% 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
strong { font-weight: 700; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Schrift ---------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }
.accent { color: var(--accent); }
[data-theme="verein"] .accent { color: var(--accent); }

/* Kurzer Farbbalken unter Abschnittsueberschriften */
.section-head h2::after, .h-bar::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: .55em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
  line-height: 1.55;
}
.prose { max-width: 68ch; }
.prose p { text-wrap: pretty; }
.muted { color: var(--ink-soft); }
.small { font-size: .92rem; }
.mono { font-family: var(--font-mono); }

/* Verweise im Fliesstext fett und unterstrichen */
.prose a, .doc-text a, .note a, .lede a, .quote a, .post-body a, .s-text a, .t-text a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
.prose a:hover, .doc-text a:hover, .note a:hover, .lede a:hover, .quote a:hover,
.post-body a:hover, .s-text a:hover, .t-text a:hover { color: var(--accent); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide { max-width: 1400px; }
.container-narrow { max-width: 820px; }

.section { padding: var(--section) 0; position: relative; }
.section-tight { padding: calc(var(--section) * .6) 0; }
.section + .section { padding-top: 0; }
.section-alt { background: var(--bg-2); }
.section-alt.section { padding-top: var(--section); }
.section-alt + .section { padding-top: var(--section); }

/* Band: abgerundete Flaeche ueber die volle Breite */
.band {
  margin: 0 clamp(.4rem, 1.2vw, 1rem);
  border-radius: calc(var(--radius) * 1.6);
  background: var(--bg-2);
  padding: var(--section) 0;
}
.band + .section { padding-top: var(--section); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { margin-bottom: .4em; }
.section-head .lede { margin: 0; }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) { .split, .split-rev { grid-template-columns: minmax(0, 1fr); } }

.stack > * + * { margin-top: 1rem; }

/* ---------- Sprunglink, Vorleseprogramm ---------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: 999px;
  transition: top 160ms ease;
}
.skip-link:focus { top: 1rem; outline-offset: 4px; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Seitenkopf ---------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.site-head.scrolled { border-bottom-color: var(--line); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-head { background: var(--bg); } }
.site-head .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.brand img { width: 44px; height: 44px; object-fit: contain; flex: none; transition: transform 300ms var(--ease-out); }
.brand:hover img { transform: rotate(-6deg) scale(1.06); }
.brand-court img { width: 46px; height: 46px; border-radius: 10px; }
.brand-text { display: flex; flex-direction: column; font-size: .98rem; }
.brand-text small { font-weight: 500; font-size: .78rem; color: var(--ink-soft); letter-spacing: 0; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
  transition: color 160ms ease, background-color 160ms ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.nav-cta { margin-left: .5rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out);
}
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle span {
  position: relative; display: block;
  width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 220ms var(--ease-out), background-color 160ms ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 220ms var(--ease-out), top 220ms var(--ease-out);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.nav-mail { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-mail { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink); }
  .nav-mail svg { width: 22px; height: 22px; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .25rem;
    padding: 1.25rem var(--gutter) 2rem;
    background: var(--bg);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .nav-links.open { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
  .nav-links li { opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
  .nav-links.open li { opacity: 1; transform: none; }
  .nav-links a { display: block; font-size: 1.5rem; font-weight: 700; padding: .85rem 1rem; border-radius: var(--radius-sm); color: var(--ink); }
  .nav-links .nav-cta { margin: .75rem 0 0; display: block; }
  .nav-links .nav-cta .btn { width: 100%; justify-content: center; font-size: 1.05rem; }
}

/* ---------- Knoepfe ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.08);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
              transform 160ms var(--ease-out), box-shadow 220ms ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 220ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { border-color: var(--ink-soft); background: var(--surface); }
.btn-soft { background: var(--accent-soft); color: var(--ink); box-shadow: none; }
.btn-sm { padding: .6rem 1.05rem; font-size: .88rem; }
.btn-lg { padding: 1.05rem 1.85rem; font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--glow); }
  .btn:hover svg { transform: translateX(3px); }
  .btn:hover:active { transform: scale(0.97); box-shadow: none; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Kopfbilder ---------- */
.hero {
  padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(3rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero h1 { margin-bottom: .45em; }
.hero .lede { margin-bottom: 1.6rem; }
.hero > .container { position: relative; z-index: 2; }

/* Weiche Farbfelder, die langsam treiben */
.hero-glow::before, .hero-glow::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
}
.hero-glow::before {
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  right: -15vw; top: -25vw;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  animation: drift 18s ease-in-out infinite alternate;
}
.hero-glow::after {
  width: 44vw; height: 44vw; max-width: 560px; max-height: 560px;
  left: -14vw; bottom: -20vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 26%, transparent) 0%, transparent 65%);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) scale(1.12); }
}

/* Landingpage: Bildcollage des SportCourt als weicher Hintergrund */
.hero-land {
  min-height: min(92vh, 900px);
  display: flex; align-items: center;
}
.hero-land .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../../SpaSpoCo-Pattensen/docs/hintergrund_web.jpg") center 30%/cover no-repeat;
  opacity: .16;
  filter: saturate(.7) blur(2px);
  transform: scale(1.04);
}
.hero-land .hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(242,244,242,.3) 0%, rgba(242,244,242,.6) 55%, var(--bg) 100%);
}
.hero-land h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }

/* Schwebende Logokarten rechts im Kopf der Landingpage */
.float-stack {
  position: relative;
  height: clamp(340px, 42vw, 520px);
  perspective: 1200px;
}
.float-card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(.9rem, 2vw, 1.4rem);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(21,34,42,.06);
  display: grid; place-items: center;
  will-change: transform;
}
.float-card img { width: 100%; height: 100%; object-fit: contain; }
.float-card.fc-1 { width: 52%; aspect-ratio: 1; left: 2%; top: 6%; transform: rotate(-6deg); animation: float-a 7s ease-in-out infinite; }
.float-card.fc-2 { width: 44%; aspect-ratio: 1; right: 0; top: 0; transform: rotate(5deg); animation: float-b 8s ease-in-out infinite; }
.float-card.fc-3 { width: 58%; aspect-ratio: 300/255; right: 6%; bottom: 0; transform: rotate(-3deg); padding: 0; overflow: hidden; animation: float-c 9s ease-in-out infinite; }
.float-card.fc-3 img { object-fit: cover; border-radius: var(--radius); }
@keyframes float-a { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-12px); } }
@keyframes float-b { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-16px); } }
@keyframes float-c { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } }
@media (max-width: 900px) { .float-stack { height: clamp(300px, 80vw, 420px); max-width: 480px; margin: 0 auto; } }

/* Kennzahlenleiste */
.kennzahlen {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem));
}
.kennzahlen ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.kennzahlen li { padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vw, 1.8rem); border-left: 1px solid var(--line); }
.kennzahlen li:first-child { border-left: 0; }
.kennzahlen .kz-n { display: block; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.kennzahlen .kz-l { display: block; margin-top: .4rem; font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .kennzahlen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahlen li:nth-child(odd) { border-left: 0; }
  .kennzahlen li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* SportCourt: Bild aus dem alten Flyer als abgedunkelter Hintergrund */
.hero-court { min-height: min(94vh, 900px); display: flex; align-items: center; }
.hero-court .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../../SpaSpoCo-Pattensen/docs/hintergrund_web.jpg") center/cover no-repeat;
  opacity: .28;
  filter: saturate(.8);
  transform: scale(1.06);
  animation: slow-zoom 24s ease-in-out infinite alternate;
}
@keyframes slow-zoom { from { transform: scale(1.06); } to { transform: scale(1.14); } }
.hero-court .hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 30% 40%, rgba(12,18,21,.1) 0%, rgba(12,18,21,.6) 70%),
    linear-gradient(180deg, rgba(12,18,21,.35) 0%, rgba(12,18,21,.55) 60%, var(--bg) 100%);
}
.court-lines {
  position: absolute; z-index: 1;
  right: -8%; top: 8%;
  width: clamp(420px, 58vw, 900px);
  height: auto;
  opacity: .16;
  pointer-events: none;
  color: var(--accent-2);
}
.hero-court .hero-logo {
  width: clamp(200px, 26vw, 320px);
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(1rem, 2.4vw, 1.8rem);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 80px var(--glow), var(--shadow-lg);
  animation: float-b 8s ease-in-out infinite;
}
.hero-court h1 { font-size: clamp(2.4rem, 6.2vw, 5rem); }
.hero-court .lede { color: #C9D6DD; }
.hero-court .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }

/* Foerderverein: Logo gross auf Petrol mit pulsierenden Ringen */
.hero-verein .hero-logo-wrap { position: relative; display: grid; place-items: center; }
.hero-verein .hero-logo {
  position: relative; z-index: 1;
  width: clamp(230px, 30vw, 380px);
  background: #fff;
  border-radius: 50%;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  aspect-ratio: 1;
  display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(255,255,255,.05), 0 0 90px rgba(246,180,0,.18), var(--shadow-lg);
  animation: float-a 8s ease-in-out infinite;
}
.hero-verein .ring {
  position: absolute; left: 50%; top: 50%;
  width: clamp(230px, 30vw, 380px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  transform: translate(-50%, -50%);
  animation: ring 6s ease-out infinite;
  pointer-events: none;
}
.hero-verein .ring:nth-child(2) { animation-delay: 2s; border-color: var(--c-gelb); }
.hero-verein .ring:nth-child(3) { animation-delay: 4s; border-color: var(--c-gruen); }
@keyframes ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(1.75); opacity: 0; }
}
.hero-verein .hero-glow::before { background: radial-gradient(circle, rgba(246,180,0,.22) 0%, transparent 65%); }
/* Bunte Punkte aus dem Logo, verteilt hinter dem Kopf */
.dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dots i {
  position: absolute; display: block;
  width: 14px; height: 14px; border-radius: 50%;
  opacity: .55;
  animation: dot 9s ease-in-out infinite alternate;
}
.dots i:nth-child(1) { background: var(--c-gruen); left: 8%; top: 22%; animation-delay: -1s; }
.dots i:nth-child(2) { background: var(--c-blau); left: 22%; top: 78%; width: 10px; height: 10px; animation-delay: -3s; }
.dots i:nth-child(3) { background: var(--c-rot); left: 48%; top: 14%; width: 8px; height: 8px; animation-delay: -5s; }
.dots i:nth-child(4) { background: var(--c-lila); left: 62%; top: 86%; animation-delay: -2s; }
.dots i:nth-child(5) { background: var(--c-gelb); left: 90%; top: 30%; width: 18px; height: 18px; animation-delay: -7s; }
.dots i:nth-child(6) { background: var(--c-gruen); left: 76%; top: 62%; width: 7px; height: 7px; animation-delay: -4s; }
@keyframes dot { from { transform: translate3d(0,0,0); } to { transform: translate3d(14px, -22px, 0); } }

/* ---------- Kacheln der Landingpage ---------- */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.25rem;
  min-height: 320px;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease;
}
.tile:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .tile:hover .tile-arrow { transform: translateX(4px); }
  .tile:hover .tile-media img { transform: scale(1.04); }
}
.tile-3 { grid-column: span 3; }
.tile-2 { grid-column: span 2; }
.tile-4 { grid-column: span 4; }
.tile-6 { grid-column: span 6; }
@media (max-width: 900px) { .tile-2, .tile-3, .tile-4 { grid-column: span 3; } }
@media (max-width: 600px) { .tile-2, .tile-3, .tile-4, .tile-6 { grid-column: span 6; } .tile { min-height: 0; } }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.tile h2, .tile h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.tile h2 a::after, .tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile-arrow {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--ink);
  transition: transform 240ms var(--ease-out);
}
.tile-arrow svg { width: 18px; height: 18px; }
.tile-media { display: grid; place-items: center; padding: .5rem 0; position: relative; z-index: 1; }
.tile-media img { max-height: 200px; width: auto; object-fit: contain; transition: transform 500ms var(--ease-out); }
.tile-media-white { background: #fff; border-radius: var(--radius-sm); padding: 1rem; }
.tile .muted { position: relative; z-index: 1; }
.tile-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.tile-verein { background: linear-gradient(160deg, #1E6078 0%, #0E3944 100%); color: #fff; border-color: transparent; }
.tile-verein h2, .tile-verein h3 { color: #fff; }
.tile-verein .tile-arrow { background: rgba(255,255,255,.14); color: #fff; }
.tile-verein .muted { color: #C9DCE1; }
.tile-verein .tile-bg { background: radial-gradient(60% 60% at 80% 20%, rgba(246,180,0,.18) 0%, transparent 70%); }

.tile-court { background: #0C1215; color: #fff; border-color: transparent; }
.tile-court h2, .tile-court h3 { color: #fff; }
.tile-court .tile-arrow { background: rgba(102,168,210,.22); color: #BFE0F5; }
.tile-court .muted { color: #A4B3BB; }
.tile-court .tile-bg {
  background: url("../../SpaSpoCo-Pattensen/docs/hintergrund_web.jpg") center/cover no-repeat;
  opacity: .32; filter: saturate(.8);
  transition: transform 700ms var(--ease-out), opacity 400ms ease;
}
.tile-court .tile-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,21,.2), rgba(12,18,21,.85)); }
@media (hover: hover) and (pointer: fine) { .tile-court:hover .tile-bg { transform: scale(1.05); opacity: .42; } }

.tile-club { background: linear-gradient(160deg, #0B5B70 0%, #014E61 100%); color: #fff; border-color: transparent; }
.tile-club h2, .tile-club h3 { color: #fff; }
.tile-club .tile-arrow { background: rgba(255,255,255,.14); color: #fff; }
.tile-club .muted { color: #C9DCE1; }

.tile-skater .tile-bg {
  background: url("../../foerderverein/Skaterton/Skaterton2_flyer.jpg") center 20%/cover no-repeat;
  opacity: .9;
  transition: transform 700ms var(--ease-out);
}
.tile-skater .tile-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(242,244,242,.95) 0%, rgba(242,244,242,.65) 30%, rgba(242,244,242,0) 100%); }
@media (hover: hover) and (pointer: fine) { .tile-skater:hover .tile-bg { transform: scale(1.05); } }

/* ---------- Karten, Listen ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
[data-theme] .card, [data-theme] .quote, [data-theme] .bank, [data-theme] .meter, [data-theme] .post,
[data-theme] .sponsor, [data-theme] .person, [data-theme] .doc, [data-theme] .channel {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow);
}

/* Lichtkante, die dem Zeiger folgt (JS setzt --mx und --my) */
.spot { position: relative; overflow: hidden; }
.spot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .spot:hover::before { opacity: 1; } }
.spot > * { position: relative; }

/* Vorstand als Karten mit farbiger Marke aus dem Logo */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.person {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 240ms var(--ease-out), border-color 240ms ease;
}
.person::after {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--mark, var(--accent));
  opacity: .12;
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .person:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .person:hover::after { transform: scale(1.6); }
}
.person .ini {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mark, var(--accent));
  color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: .02em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mark, var(--accent)) 45%, transparent);
}
.person .role { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.person .name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.person .place { color: var(--ink-soft); margin-top: .15rem; font-size: .92rem; }
.mark-gruen { --mark: var(--c-gruen); }
.mark-blau { --mark: var(--c-blau); }
.mark-rot { --mark: var(--c-rot); }
.mark-lila { --mark: var(--c-lila); }
.mark-gelb { --mark: var(--c-gelb); }
.mark-petrol { --mark: var(--c-petrol); }
.mark-hellblau { --mark: var(--c-hellblau); }

/* Dokumente und Verweise */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.doc-list li { margin: 0; }
.doc {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
.doc:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .doc:hover { transform: translateX(4px); border-color: var(--accent); }
  .doc:hover .doc-go { transform: translateX(3px); color: var(--accent); }
}
.doc-icon {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: .8rem;
}
.doc-icon svg { width: 20px; height: 20px; }
.doc-text { min-width: 0; flex: 1; }
.doc-text .doc-title { font-weight: 700; display: block; }
.doc-text .doc-meta { color: var(--ink-soft); font-size: .86rem; display: block; }
.doc-go { flex: none; color: var(--ink-soft); transition: transform 200ms var(--ease-out), color 200ms ease; }
.doc-go svg { width: 18px; height: 18px; }

/* Kontaktzeilen, reiner Text mit Symbol */
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.contact li { display: flex; align-items: flex-start; gap: .7rem; color: var(--ink-soft); margin: 0; }
.contact svg { flex: none; width: 20px; height: 20px; margin-top: .2em; color: var(--accent); }

/* Zitat */
.quote {
  position: relative;
  padding: clamp(1.8rem, 3.4vw, 2.8rem) clamp(1.5rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  text-wrap: pretty;
  margin: 0;
}
.quote::before {
  content: "\201E";
  position: absolute;
  left: 1.2rem; top: -1.6rem;
  font-size: 6rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
}
.quote p { margin: 0 0 1rem; }
.quote footer { font-size: .92rem; color: var(--ink-soft); }

/* Hinweiskasten */
.note {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  color: var(--ink);
}
.note p { margin: 0; }
.note + .note { margin-top: .8rem; }

/* Bankverbindung mit Kopierknopf */
.bank {
  display: grid; gap: 1rem;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.bank dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.2rem; align-items: center; }
.bank dt { color: var(--ink-soft); font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; }
.bank dd { margin: 0; font-family: var(--font-mono); font-size: 1.08rem; letter-spacing: .05em; word-break: break-all; }
@media (max-width: 480px) { .bank dl { grid-template-columns: 1fr; gap: .1rem .5rem; } .bank dt { margin-top: .5rem; } }

/* Kanaele als Kacheln */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.channel {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 200ms var(--ease-out), border-color 200ms ease;
}
.channel:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .channel:hover { transform: translateY(-3px); border-color: var(--accent); }
  .channel:hover img, .channel:hover .ch-icon { transform: scale(1.08) rotate(-4deg); }
}
.channel img, .channel .ch-icon { transition: transform 240ms var(--ease-out); }
.channel img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.channel .ch-icon { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); font-weight: 800; font-size: .72rem; letter-spacing: .02em; }
.channel .ch-text { min-width: 0; line-height: 1.25; }
.channel .ch-name { font-weight: 700; display: block; }
.channel .ch-url { font-size: .8rem; color: var(--ink-soft); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sponsoren */
.sponsor-tier { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sponsor-tier h3 {
  display: flex; align-items: center; gap: 1rem;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-2);
  margin-bottom: 1.2rem;
}
.sponsor-tier h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.sponsor {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 300ms var(--ease-out), border-color 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sponsor:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .sponsor:hover .sponsor-logo img { transform: scale(1.05); }
}
.sponsor-logo { display: grid; place-items: center; height: 130px; padding: .9rem; border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.sponsor-logo img { max-height: 100%; width: auto; object-fit: contain; transition: transform 500ms var(--ease-out); }
.sponsor-logo.two { grid-template-columns: 1fr 1fr; gap: .6rem; }
.sponsor-body { display: grid; gap: .25rem; padding: 0 .3rem .3rem; }
.sponsor-body .s-name { font-weight: 700; font-size: 1.05rem; }
.sponsor-body .s-place { color: var(--ink-soft); font-size: .9rem; }
.sponsor-body .s-text { font-size: .93rem; color: var(--ink-soft); margin-top: .35rem; text-wrap: pretty; }
.sponsor-main { grid-template-columns: minmax(0, 1fr); }
.sponsor-main .sponsor { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.5rem; border-color: var(--accent); box-shadow: 0 0 60px var(--glow); }
.sponsor-main .sponsor-logo { flex: none; width: 300px; height: 170px; }
@media (max-width: 760px) { .sponsor-main .sponsor { flex-direction: column; align-items: stretch; } .sponsor-main .sponsor-logo { width: auto; } }
.logo-strip { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.logo-strip .lg { background: #fff; border-radius: var(--radius-sm); padding: .7rem 1rem; display: grid; place-items: center; height: 80px; transition: transform 240ms var(--ease-out); }
.logo-strip .lg img { max-height: 100%; width: auto; max-width: 200px; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .logo-strip .lg:hover { transform: translateY(-3px) scale(1.03); } }

/* Laufband, hoechstens eines je Seite */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
  background: var(--bg-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  white-space: nowrap; font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 3rem;
}
.marquee-track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Spendenzaehler */
.meters { display: grid; gap: 1.2rem; }
.meter { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.meter-label { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.meter-value { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--mark, var(--accent)); text-shadow: 0 0 30px color-mix(in srgb, var(--mark, var(--accent)) 40%, transparent); }
.meter-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: .9rem; }
:root:not([data-theme]) .meter-bar { background: var(--bg-2); }
.meter-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mark, var(--accent)), color-mix(in srgb, var(--mark, var(--accent)) 60%, #fff));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.6s var(--ease-out);
  box-shadow: 0 0 16px color-mix(in srgb, var(--mark, var(--accent)) 60%, transparent);
}
.meter.in .meter-fill { transform: scaleX(var(--p, 1)); }
.meter-foot { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }

/* Club100: Tafel aus Quadraten, 5 Spalten wie die alte Tabelle */
.wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #025D73, #014E61 60%, #013E4E);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 120px rgba(102,168,210,.15), var(--shadow-lg);
}
.sq {
  position: relative;
  min-height: 118px;
  padding: .7rem .6rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  color: #fff;
  font-size: .86rem; line-height: 1.25;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform 220ms var(--ease-out), background-color 220ms ease, border-color 220ms ease;
}
.sq strong { display: block; font-size: 1rem; margin: .1rem 0; }
.sq small { display: block; color: rgba(255,255,255,.7); font-size: .78rem; }
@media (hover: hover) and (pointer: fine) {
  .sq:hover { transform: scale(1.05); border-color: rgba(255,255,255,.4); z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
}
.sq.s2 { grid-column: span 2; }
.sq.s3 { grid-column: span 3; }
.sq.s4 { grid-column: span 4; }
.sq.s5 { grid-column: span 5; }
.sq.gedenken { background: #0A0F11; border-color: rgba(255,255,255,.18); }
.sq.gedenken::before { content: ""; width: 26px; height: 1px; background: var(--c-gelb); margin-bottom: .5rem; }
.sq.avacon { background: #fff; padding: .6rem; min-height: 90px; }
.sq.avacon img { max-height: 48px; width: auto; }
.sq.frei { background: transparent; border: 1px dashed rgba(255,255,255,.28); color: rgba(255,255,255,.45); font-size: .8rem; }
.sq.frei:hover { background: rgba(255,255,255,.05); }
@media (max-width: 700px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .sq { min-height: 100px; font-size: .82rem; }
  .sq.s2, .sq.s3, .sq.s4, .sq.s5, .sq.avacon { grid-column: span 2; }
}
.power span { display: inline-block; }
.power b { color: var(--c-gelb); }

/* Zeitleiste fuer das Pressearchiv */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--line)); }
.timeline li { position: relative; padding: 0 0 1.2rem 2.4rem; margin: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 5px; top: .45rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline .t-date { display: block; font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft); margin-bottom: .15rem; }
.timeline .t-src { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--accent-soft); font-size: .72rem; font-weight: 700; letter-spacing: .04em; margin-right: .4rem; vertical-align: middle; }
.timeline-year { padding-left: 2.4rem; font-weight: 800; font-size: 1.5rem; margin: 1.4rem 0 .8rem; letter-spacing: -0.02em; color: var(--accent); }
.timeline-year::before { display: none; }
.timeline-year:first-child { margin-top: 0; }

/* Beitraege auf Aktuelles */
.posts { display: grid; gap: 1.2rem; }
.post {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 240ms var(--ease-out), border-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) { .post:hover { transform: translateY(-2px); border-color: var(--line-strong); } }
.post.has-media { grid-template-columns: minmax(0, 1fr) 200px; }
@media (max-width: 700px) { .post.has-media { grid-template-columns: minmax(0, 1fr); } }
.post .post-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); font-family: var(--font-mono); }
.post h3 { margin: .3rem 0 .4rem; }
.post .post-body { color: var(--ink-soft); }
.post .post-media img { border-radius: var(--radius-sm); width: 100%; }
.post .post-media .lb, .post .post-media .tile-media-white { border-radius: var(--radius-sm); }
.post .post-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.share { display: inline-flex; gap: .4rem; margin-left: auto; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.share a:hover, .share button:hover { border-color: var(--accent); color: var(--ink); }
.share a:active, .share button:active { transform: scale(0.96); }

/* Bildergalerie mit Lightbox */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.gallery a, .lb {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
}
.gallery a img, .lb img { width: 100%; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gallery a:hover, .lb:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .gallery a:hover img, .lb:hover img { transform: scale(1.04); }
}
.figure { margin: 0; }
.figure figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .7rem; }

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 94vh; overflow: visible; z-index: 70; }
dialog.lightbox::backdrop { background: rgba(8, 12, 14, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.lightbox img { max-width: min(96vw, 1200px); max-height: 90vh; width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); margin: 0 auto; }
dialog.lightbox .lb-close {
  position: absolute; top: -12px; right: -12px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #fff; color: #16232A; font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--shadow);
  transition: transform 160ms var(--ease-out);
}
dialog.lightbox .lb-close:active { transform: scale(0.94); }
dialog.lightbox[open] { animation: lb-in 220ms var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* YouTube erst nach Klick */
.yt {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: #0A0F11; color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-cover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; text-align: center;
  background:
    url("../../SpaSpoCo-Pattensen/docs/hintergrund_web.jpg") center/cover no-repeat;
}
.yt-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,17,.55), rgba(10,15,17,.85)); }
.yt-cover > * { position: relative; }
.yt-play {
  width: 84px; height: 84px; border-radius: 50%; border: 0;
  background: #fff; color: #0A0F11;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 0 12px rgba(255,255,255,.12), var(--shadow-lg);
  transition: transform 200ms var(--ease-out), box-shadow 300ms ease;
}
.yt-play svg { width: 32px; height: 32px; margin-left: 5px; }
.yt-play:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .yt-play:hover { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(255,255,255,.14), var(--shadow-lg); } .yt-play:hover:active { transform: scale(0.94); } }
.yt-cover p { margin: 0; max-width: 46ch; color: #C9D6DD; font-size: .9rem; }
.yt-cover strong { display: block; color: #fff; font-size: 1.1rem; margin-bottom: .1rem; }

/* Fusszeile */
.site-foot {
  margin-top: var(--section);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-soft);
  font-size: .92rem;
  position: relative;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.site-foot h4 { color: var(--ink); margin-bottom: .6rem; font-size: .95rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-foot ul a { color: var(--ink-soft); transition: color 160ms ease; }
.site-foot ul a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .85rem; }
.foot-bottom a { color: var(--ink-soft); }
.foot-bottom a:hover { color: var(--ink); }
.powered { display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.powered img { height: 36px; width: auto; background: #fff; padding: .35rem .6rem; border-radius: 8px; }

/* Einblenden beim Scrollen */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal-scale { transform: scale(0.94) translateY(12px); }

/* Hilfen */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.flex { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.hint { font-size: .85rem; color: var(--ink-soft); }
.kalender-frame { min-height: 70vh; background: #fff; border-radius: var(--radius); padding: 1rem; color: #111; box-shadow: var(--shadow-lg); }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .meter-fill { transition: none; }
  .nav-links li { transition: none; }
  .hero-glow::before, .hero-glow::after, .float-card, .hero-court .hero-bg, .hero-court .hero-logo,
  .hero-verein .hero-logo, .hero-verein .ring, .dots i { animation: none; }
  .tile, .btn, .doc, .channel, .sponsor, .sq, .gallery a, .lb, .yt-play, .person, .post { transition: none; }
  dialog.lightbox[open] { animation: none; }
}

/* ---------- Druck ---------- */
@media print {
  .site-head, .site-foot, .nav-toggle, .skip-link, .yt, .share, .marquee, .brand-stripe, .dots, .ring { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .hero { padding-top: 1rem; }
}

/* Club100: Schriftgroessen wie in der alten Tafel (HTML-Groessen 1 bis 7).
   Groessere Buchstaben stehen fuer hoehere Spenden; Verhaeltnisse bleiben. */
.wall { font-size: clamp(11px, 1.25vw, 16px); line-height: 1.15; }
.sq { font-size: inherit; line-height: 1.15; }
.sq strong { font-size: inherit; margin: 0; }
.sq .f1 { font-size: .625em; color: rgba(255,255,255,.75); }
.sq .f2 { font-size: .8125em; color: rgba(255,255,255,.85); }
.sq .f3 { font-size: 1em; font-weight: 700; }
.sq .f4 { font-size: 1.125em; font-weight: 700; }
.sq .f5 { font-size: 1.5em; font-weight: 700; letter-spacing: -0.01em; }
.sq .f6 { font-size: 2em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.sq .f7 { font-size: 3em; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.sq .f5, .sq .f6, .sq .f7 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.sq.frei .f1 { color: rgba(255,255,255,.45); }
.wall-foot { margin-top: .8rem; color: var(--accent); font-weight: 800; letter-spacing: -0.03em; }
.wall-foot .f7 { font-size: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 700px) { .wall { font-size: 11px; } .sq.s2, .sq.s3, .sq.s4, .sq.s5 { min-height: 110px; } }

/* ---------- Feinschliff 29.10.2026, zweiter Durchgang ---------- */
/* Spenden-Knopf im Menue: eigene Farben, unabhaengig von den Menuepunkten */
.nav-links .nav-cta .btn, .nav-links .nav-cta .btn:hover { color: var(--accent-ink); background: var(--accent); }

/* Zitat: Anfuehrungszeichen als grosse, blasse Marke hinter dem Text */
.quote { padding-top: clamp(2.4rem, 4vw, 3.2rem); }
.quote::before { content: "\201C"; top: .2rem; left: 1rem; font-size: 7rem; opacity: .22; font-weight: 800; z-index: 0; }
.quote > * { position: relative; z-index: 1; }

/* Vorstand: lange Funktionsbezeichnungen duerfen umbrechen */
.person > div { min-width: 0; }
.person .role { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }

/* Skaterton-Kachel: Flyer als schraeg gestelltes Plakat */
.tile-skater { padding-right: 42%; }
.tile-skater .tile-bg {
  inset: auto -8% -14% auto;
  width: 48%;
  aspect-ratio: 412 / 583;
  background: url("../../foerderverein/Skaterton/Skaterton2_flyer.jpg") center/cover no-repeat;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: rotate(8deg);
  opacity: 1;
  transition: transform 500ms var(--ease-out);
}
.tile-skater .tile-bg::after { display: none; }
@media (hover: hover) and (pointer: fine) { .tile-skater:hover .tile-bg { transform: rotate(4deg) translateY(-8px); } }
@media (max-width: 600px) { .tile-skater { padding-right: clamp(1.3rem, 2.6vw, 2rem); padding-bottom: 60%; } .tile-skater .tile-bg { width: 52%; inset: auto -6% -10% auto; } }

/* Logokarten-Stapel braucht auch im Einspalten-Layout volle Breite */
.float-stack { width: 100%; }

/* Seitenkopf: Unschaerfe auf ein Pseudo-Element verlegt. backdrop-filter macht
   das Element sonst zum Bezugsrahmen fuer das fixe Handymenue, das dann nur
   72 px hoch waere und den Inhalt durchscheinen liesse. */
.site-head { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-head::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-head::before { background: var(--bg); } }
@media (max-width: 900px) { .nav-links { z-index: 1; } }

/* Club100: Zeilenspannen wie rowspan bzw. Zellhoehe der alten Tabelle */
.sq.r2 { grid-row: span 2; }
.sq.r4 { grid-row: span 4; }
.wall { grid-auto-rows: minmax(118px, auto); }
.sq { min-height: 0; }
.sq.avacon { min-height: 0; }
.sq.frei { min-height: 118px; }
.person s { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.lede u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 700px) { .wall { grid-auto-rows: minmax(100px, auto); } .sq.r4 { grid-row: span 2; } }

/* ---------- Befunde der Gegenpruefung 29.10.2026 ---------- */
/* Knoepfe duerfen auf schmalen Bildschirmen umbrechen */
@media (max-width: 600px) { .btn { white-space: normal; text-align: center; } }
/* Club100 auf dem Handy: Mindestgroesse der kleinen Stufen, freie Felder deutlicher */
.sq .f1 { font-size: max(.625em, 11px); }
.sq .f2 { font-size: max(.8125em, 12px); }
.sq.frei { border-color: rgba(255,255,255,.45); }
/* Fokusring auf dunklen Kacheln weiss */
.tile-court :focus-visible, .tile-verein :focus-visible, .tile-club :focus-visible { outline-color: #fff; }
/* Ohne JavaScript bleibt das Menue sichtbar und die Balken gefuellt */
@media (max-width: 900px) {
  html:not(.js) .nav-links { position: static; visibility: visible; opacity: 1; transform: none; padding: 0; border: 0; }
  html:not(.js) .nav-links li { opacity: 1; transform: none; }
  html:not(.js) .nav-toggle { display: none; }
}
html:not(.js) .meter-fill { transform: scaleX(var(--p, 1)); }
/* Weniger Bewegung: Laufband nur einmal, keine Bildbewegung */
@media (prefers-reduced-motion: reduce) {
  .marquee-track .dup, .marquee-track .dup ~ span { display: none; }
  .tile-court .tile-bg, .tile-skater .tile-bg, .brand img, .tile-media img, .sponsor-logo img, .gallery a img, .lb img { transition: none; }
  .brand:hover img, .tile-court:hover .tile-bg, .tile-skater:hover .tile-bg { transform: none; }
  [data-theme] body::after { display: none; }
  .hero-glow::before, .hero-glow::after { filter: none; opacity: .5; }
}
/* Leistung: Unschaerfe nur im Seitenkopf, auf kleinen Bildschirmen keine Koernung und keine Weichzeichner */
[data-theme] .card, [data-theme] .quote, [data-theme] .bank, [data-theme] .meter, [data-theme] .post,
[data-theme] .sponsor, [data-theme] .person, [data-theme] .doc, [data-theme] .channel {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 700px) {
  [data-theme] body::after { display: none; }
  .hero-glow::before, .hero-glow::after { filter: blur(30px); animation: none; }
  .hero-court .hero-bg { animation: none; }
}
/* Initialen auf Gelb und Gruen dunkel */
.mark-gelb .ini, .mark-gruen .ini { color: #14303A; }
/* Kachel: der Verweis deckt die ganze Flaeche */
.tile { isolation: isolate; }
.tile.spot > * { position: static; }
.tile.spot > .tile-bg { position: absolute; z-index: -2; }
.tile.spot::before { z-index: -1; }
.tile h2 a::after, .tile h3 a::after { z-index: 1; }
.tile .tile-arrow { position: relative; }

/* Partnerlogos (Skaterton): feste Masse statt Prozentwerten, die in Safari
   innerhalb von Grid-Zellen nicht greifen. Befund vom 29.10.2026. */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .8rem;
}
.logo-strip .lg {
  height: 96px;
  padding: .8rem 1.1rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.logo-strip .lg img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}
.sponsor-logo img { max-height: 110px; }
.sponsor-main .sponsor-logo img { max-height: 150px; }
.sq.avacon img { max-height: 48px; }

/* ---------- Avacon als Praesentator (29.10.2026) ---------- */
.presenter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: clamp(1.3rem, 2.8vw, 2.2rem) clamp(1.3rem, 3vw, 2.6rem);
  border-radius: var(--radius);
  background: #fff;
  color: #15222A;
  border: 1px solid rgba(21,34,42,.08);
  box-shadow: 0 0 0 1px rgba(126,180,60,.25), 0 0 90px rgba(126,180,60,.18), var(--shadow-lg);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .presenter:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(126,180,60,.45), 0 0 120px rgba(126,180,60,.28), var(--shadow-lg); }
}
.presenter img { width: clamp(170px, 24vw, 300px); height: auto; }
.presenter .p-text { display: grid; gap: .35rem; }
.presenter .p-kicker { font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; color: #15222A; }
.presenter .p-body { color: #55646B; font-size: .95rem; text-wrap: pretty; max-width: 60ch; }
.presenter .p-link { color: #7EB43C; font-weight: 700; font-size: .9rem; }
@media (max-width: 640px) { .presenter { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } }
.section-tight + .section { padding-top: var(--section); }

/* Hinweiszeile mit grossem Avacon-Logo */
.powered-lg img { height: 56px; padding: .4rem .8rem; }
.powered-lg { display: inline-flex; }

/* Club100-Seite: Kopf in Petrol, damit das Club100-Bild ohne Rand aufgeht */
.page-club .hero {
  background: linear-gradient(180deg, #0C1215 0%, #013D4D 45%, #014E61 100%);
}
.page-club .hero-glow::before { background: radial-gradient(circle, rgba(126,180,60,.22) 0%, transparent 65%); }
.page-club .hero-glow::after { background: radial-gradient(circle, rgba(102,168,210,.2) 0%, transparent 65%); }
.club-art { position: relative; max-width: 490px; margin: 0 auto; }
.club-art img {
  width: 100%;
  border-radius: var(--radius) var(--radius) 6px 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.5);
  animation: float-b 9s ease-in-out infinite;
}
.club-art::after {
  content: "";
  position: absolute; inset: auto 10% -26px 10%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
  z-index: -1;
}
.page-club .section-tight { background: #014E61; padding-bottom: var(--section); }
.page-club .section-tight + .section { padding-top: 0; background: #014E61; }
.page-club #tafel { background: linear-gradient(180deg, #014E61 0%, #0C1215 100%); }
@media (prefers-reduced-motion: reduce) { .club-art img { animation: none; } }

/* SportCourt-Kopf: pulsierende Rahmen um die Logokarte und treibende Punkte,
   Gegenstueck zu den Ringen des Foerdervereins (Wunsch vom 29.10.2026) */
.hero-court .hero-logo-wrap { position: relative; display: grid; place-items: center; z-index: 1; }
.hero-court .hero-logo { position: relative; z-index: 1; }
.hero-court .ring {
  position: absolute; left: 50%; top: 50%;
  width: clamp(200px, 26vw, 320px); aspect-ratio: 1;
  border-radius: 22%;
  border: 1.5px solid rgba(255,255,255,.35);
  transform: translate(-50%, -50%);
  animation: ring-court 6s ease-out infinite;
  pointer-events: none;
}
.hero-court .ring:nth-child(2) { animation-delay: 2s; border-color: var(--c-hellblau); }
.hero-court .ring:nth-child(3) { animation-delay: 4s; border-color: #9ED0F0; }
@keyframes ring-court {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(1.8) rotate(6deg); opacity: 0; }
}
.dots-court { z-index: 1; }
.dots-court i { opacity: .6; box-shadow: 0 0 14px currentColor; }
.dots-court i:nth-child(1) { background: #9ED0F0; color: #9ED0F0; }
.dots-court i:nth-child(2) { background: var(--c-hellblau); color: var(--c-hellblau); }
.dots-court i:nth-child(3) { background: #fff; color: #fff; }
.dots-court i:nth-child(4) { background: var(--c-hellblau); color: var(--c-hellblau); }
.dots-court i:nth-child(5) { background: #9ED0F0; color: #9ED0F0; }
.dots-court i:nth-child(6) { background: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-court .ring, .dots-court i { animation: none; } }

/* ---------- Schrift im SportCourt-Erscheinungsbild (29.10.2026) ----------
   Die Wortmarke setzt "Sparkassen" fett, "SportCourt" fett in Hellblau und
   "Pattensen" leicht. Die Hausschrift der Sparkasse ist lizenzpflichtig und
   liegt nicht vor; die Stapel unten greifen auf eine lokal unter
   assets/fonts/ abgelegte Schrift zu, sobald sie dort liegt (siehe
   @font-face-Vorlage), sonst auf passende Systemschriften. */
[data-theme="court"] {
  --font-sans: "SportCourt", "Sparkasse Rg", "Source Sans 3", "Source Sans Pro", "Segoe UI", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.h1-court .w-dark { font-weight: 800; color: #EEF3F6; }
.h1-court .accent { font-weight: 800; color: var(--c-hellblau); }
.h1-court .w-light { font-weight: 400; color: #9ED0F0; letter-spacing: -0.01em; }
/* Vorlage, sobald Schriftdateien unter assets/fonts/ liegen:
@font-face { font-family: "SportCourt"; src: url("../fonts/SportCourt-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SportCourt"; src: url("../fonts/SportCourt-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
*/

/* ---------- Farbspritzer (eigene Grafik, erzeugt am 29.10.2026) ----------
   Als data-URI eingebettet, damit Maske und Hintergrund auch per Doppelklick
   (file://) funktionieren. */
:root {
  --splash-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'%3E%3Cstop offset='0' stop-color='%23FFD23F'/%3E%3Cstop offset='.55' stop-color='%237EB43C'/%3E%3Cstop offset='1' stop-color='%231FB5A0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%237EB43C'%3E%3Cpath d='M344.6 200.0C342.5 204.0 346.4 207.7 346.1 211.5C345.8 215.3 343.5 218.9 342.9 222.6C342.3 226.4 341.7 230.0 342.3 234.2C343.0 238.4 344.8 242.7 346.9 247.7C348.9 252.7 358.8 261.6 354.8 264.1C350.7 266.6 329.1 261.4 322.5 262.4C315.9 263.5 317.2 267.6 315.1 270.5C313.0 273.4 311.5 276.6 310.0 279.9C308.5 283.3 306.5 286.0 306.1 290.6C305.7 295.2 307.8 302.3 307.5 307.5C307.2 312.7 304.5 315.7 304.0 321.8C303.6 327.9 306.4 338.9 304.7 344.2C303.1 349.4 299.6 354.3 293.9 353.3C288.2 352.2 276.7 341.2 270.4 338.1C264.0 335.0 260.1 334.9 255.9 334.9C251.6 334.8 248.4 336.8 244.7 337.5C241.0 338.3 236.9 337.2 233.5 339.5C230.0 341.7 227.5 348.6 223.9 351.0C220.3 353.3 216.1 351.7 212.1 353.5C208.1 355.4 204.1 361.1 200.0 362.1C195.9 363.2 191.8 359.4 187.4 360.0C183.0 360.6 178.5 363.8 173.8 365.7C169.0 367.6 163.9 370.0 158.9 371.4C153.8 372.8 147.9 375.3 143.4 374.1C139.0 372.8 135.4 368.0 132.1 363.9C128.9 359.7 126.5 353.9 124.0 349.2C121.5 344.5 120.3 338.4 117.0 335.5C113.7 332.6 107.2 334.7 104.2 331.9C101.2 329.0 100.3 323.0 98.9 318.4C97.4 313.9 97.0 308.6 95.3 304.7C93.7 300.7 90.4 298.6 89.0 294.8C87.7 291.0 87.0 286.5 87.3 281.9C87.5 277.3 90.2 271.3 90.7 267.0C91.2 262.6 91.5 259.0 90.4 255.8C89.3 252.7 87.1 250.4 83.9 248.1C80.7 245.8 74.6 244.4 71.3 241.8C68.0 239.2 66.0 235.9 64.4 232.6C62.8 229.2 63.5 225.4 61.9 221.9C60.2 218.4 56.1 215.1 54.6 211.4C53.0 207.8 52.8 203.9 52.3 200.0C51.8 196.1 52.6 192.4 51.3 188.3C50.0 184.2 44.7 179.4 44.5 175.4C44.3 171.3 49.6 168.2 50.0 164.0C50.4 159.8 47.2 154.8 46.9 150.2C46.5 145.7 48.7 142.1 47.7 136.9C46.8 131.7 44.1 126.0 40.9 119.0C37.7 112.0 25.4 98.4 28.5 94.9C31.6 91.4 51.5 98.0 59.5 97.9C67.5 97.9 75.4 99.8 76.6 94.6C77.9 89.4 64.6 70.8 66.8 66.8C68.9 62.7 81.2 67.5 89.3 70.4C97.5 73.3 110.0 83.2 115.7 84.0C121.5 84.9 122.1 80.5 123.7 75.4C125.3 70.4 124.2 60.6 125.4 53.6C126.6 46.5 127.6 36.8 130.9 33.3C134.3 29.7 140.4 31.3 145.5 32.2C150.5 33.1 156.0 35.1 161.2 38.6C166.5 42.1 172.2 50.3 176.8 53.3C181.3 56.2 184.8 55.8 188.7 56.2C192.6 56.6 196.3 55.1 200.0 55.8C203.7 56.6 207.5 58.7 211.0 60.6C214.5 62.5 217.3 67.1 221.1 67.1C224.8 67.0 230.0 59.9 233.6 60.1C237.2 60.3 239.5 66.5 242.8 68.2C246.1 70.0 249.8 70.2 253.6 70.7C257.3 71.2 262.3 69.6 265.6 71.3C268.8 73.0 270.3 78.2 273.0 80.8C275.8 83.5 279.1 85.0 282.0 87.2C284.9 89.3 287.2 92.1 290.6 93.9C294.0 95.7 297.5 97.1 302.1 97.9C306.8 98.7 313.9 97.4 318.6 98.7C323.3 100.0 325.6 103.4 330.1 105.5C334.6 107.5 341.6 108.1 345.5 110.8C349.4 113.5 350.8 118.1 353.4 121.8C356.0 125.6 356.1 130.2 360.9 133.3C365.7 136.5 375.1 137.9 382.1 140.8C389.1 143.8 402.8 146.3 402.9 151.3C403.0 156.3 390.1 165.0 382.7 171.1C375.3 177.1 365.0 182.7 358.6 187.5C352.3 192.3 346.7 196.0 344.6 200.0Z'/%3E%3Ccircle cx='269.6' cy='354.7' r='7.2'/%3E%3Ccircle cx='272.8' cy='38.5' r='3.5'/%3E%3Ccircle cx='184.1' cy='-31.0' r='1.2'/%3E%3Ccircle cx='415.7' cy='129.4' r='1.2'/%3E%3Ccircle cx='54.2' cy='278.7' r='3.4'/%3E%3Ccircle cx='371.3' cy='158.5' r='5.6'/%3E%3Ccircle cx='190.4' cy='422.2' r='1.2'/%3E%3Ccircle cx='154.0' cy='365.0' r='6.2'/%3E%3Ccircle cx='359.4' cy='273.5' r='5.1'/%3E%3Ccircle cx='323.1' cy='35.0' r='2.0'/%3E%3Ccircle cx='350.4' cy='113.4' r='2.9'/%3E%3Ccircle cx='177.0' cy='391.2' r='2.2'/%3E%3Ccircle cx='283.5' cy='366.8' r='4.2'/%3E%3Ccircle cx='326.0' cy='336.8' r='5.4'/%3E%3Ccircle cx='407.6' cy='173.8' r='2.5'/%3E%3Ccircle cx='54.5' cy='115.0' r='3.3'/%3E%3Ccircle cx='427.7' cy='225.7' r='1.2'/%3E%3Ccircle cx='354.7' cy='162.6' r='6.9'/%3E%3Ccircle cx='-13.7' cy='224.3' r='1.4'/%3E%3Ccircle cx='363.4' cy='198.8' r='6.1'/%3E%3Ccircle cx='180.8' cy='-27.6' r='1.2'/%3E%3Ccircle cx='136.4' cy='-10.6' r='1.8'/%3E%3Ccircle cx='73.9' cy='369.8' r='2.7'/%3E%3Ccircle cx='330.9' cy='61.8' r='4.6'/%3E%3Ccircle cx='332.1' cy='46.4' r='3.0'/%3E%3Ccircle cx='49.9' cy='337.2' r='2.9'/%3E%3Ccircle cx='382.0' cy='300.3' r='3.2'/%3E%3Ccircle cx='356.0' cy='52.3' r='1.5'/%3E%3Ccircle cx='180.4' cy='-2.3' r='2.5'/%3E%3Ccircle cx='286.1' cy='60.3' r='7.0'/%3E%3Ccircle cx='401.3' cy='238.1' r='2.5'/%3E%3Ccircle cx='226.5' cy='410.8' r='1.9'/%3E%3Ccircle cx='26.7' cy='48.8' r='1.2'/%3E%3Ccircle cx='380.7' cy='212.9' r='5.1'/%3E%3Ccircle cx='250.3' cy='363.3' r='7.1'/%3E%3Ccircle cx='96.6' cy='37.9' r='4.7'/%3E%3Ccircle cx='102.6' cy='386.0' r='1.6'/%3E%3Ccircle cx='-0.3' cy='293.2' r='1.7'/%3E%3Ccircle cx='336.7' cy='71.3' r='4.2'/%3E%3Ccircle cx='131.9' cy='353.8' r='5.4'/%3E%3Ccircle cx='316.2' cy='8.1' r='1.2'/%3E%3Ccircle cx='370.4' cy='144.1' r='3.3'/%3E%3Ccircle cx='29.5' cy='254.9' r='3.4'/%3E%3Ccircle cx='22.8' cy='306.6' r='2.3'/%3E%3Ccircle cx='110.9' cy='405.1' r='1.4'/%3E%3Ccircle cx='43.9' cy='248.3' r='3.5'/%3E%3Ccircle cx='311.8' cy='84.5' r='7.1'/%3E%3Ccircle cx='35.6' cy='122.3' r='5.4'/%3E%3Ccircle cx='367.0' cy='220.1' r='5.2'/%3E%3Ccircle cx='420.2' cy='234.5' r='1.2'/%3E%3Ccircle cx='302.1' cy='324.7' r='6.7'/%3E%3Ccircle cx='4.6' cy='268.6' r='2.6'/%3E%3Ccircle cx='281.6' cy='-18.2' r='1.2'/%3E%3Ccircle cx='261.1' cy='385.1' r='2.4'/%3E%3Ccircle cx='394.2' cy='213.2' r='3.9'/%3E%3Cpath d='M264.1 334.1L278.3 363.7' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M44.9 180.3L0.1 174.5' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M242.0 42.6L248.5 18.4' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M174.6 56.8L168.2 21.3' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M327.2 118.7L360.6 97.4' stroke-width='3.7' stroke-linecap='round'/%3E%3Cpath d='M247.0 43.2L257.5 8.3' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M244.5 352.4L257.7 397.5' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M169.9 55.8L159.8 7.3' stroke-width='4.0' stroke-linecap='round'/%3E%3Cpath d='M353.0 177.6L398.7 170.9' stroke-width='2.3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --splash-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'%3E%3Cstop offset='0' stop-color='%23FFC857'/%3E%3Cstop offset='.5' stop-color='%23FF8A3D'/%3E%3Cstop offset='1' stop-color='%23FF4FA3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%23FF8A3D'%3E%3Cpath d='M341.5 200.0C344.2 203.6 343.9 207.4 346.1 211.5C348.4 215.6 352.8 220.1 355.1 224.6C357.4 229.0 359.6 234.0 359.8 238.4C360.1 242.8 358.1 246.9 356.5 250.9C354.9 254.8 351.9 258.3 350.2 262.2C348.5 266.1 347.9 270.6 346.1 274.4C344.3 278.3 342.1 282.1 339.4 285.4C336.6 288.7 332.9 291.3 329.7 294.2C326.5 297.1 323.1 299.7 320.4 302.8C317.6 306.0 316.4 310.6 313.2 313.2C309.9 315.7 304.8 316.4 301.0 318.2C297.2 320.1 293.9 322.5 290.3 324.3C286.6 326.1 282.5 326.9 279.1 329.0C275.7 331.2 272.0 331.8 269.9 337.2C267.9 342.7 270.4 359.2 267.0 361.6C263.5 364.1 255.2 356.6 249.4 352.1C243.7 347.6 237.0 337.1 232.4 334.8C227.8 332.4 225.3 336.3 221.8 337.9C218.3 339.6 215.0 342.6 211.4 344.7C207.8 346.8 203.9 349.2 200.0 350.5C196.1 351.9 191.8 353.7 188.0 352.7C184.2 351.8 180.6 347.0 177.1 344.7C173.5 342.3 170.0 341.0 166.7 338.6C163.5 336.2 160.6 332.8 157.6 330.4C154.6 327.9 152.1 325.1 148.7 323.8C145.3 322.5 140.9 323.8 137.4 322.8C133.9 321.8 131.0 319.5 127.7 317.9C124.4 316.4 121.1 314.9 117.5 313.5C114.0 312.1 110.9 310.3 106.4 309.6C101.9 308.9 95.0 310.6 90.7 309.3C86.5 308.0 84.2 304.3 80.9 301.7C77.6 299.1 74.8 296.2 71.0 293.7C67.2 291.2 66.8 287.2 58.2 286.9C49.7 286.5 22.8 295.3 19.9 291.8C17.0 288.3 40.7 271.5 40.8 265.9C40.9 260.4 24.4 262.0 20.7 258.3C16.9 254.6 15.8 249.0 18.1 243.7C20.4 238.3 32.7 231.2 34.5 226.2C36.4 221.2 27.5 217.8 29.0 213.5C30.4 209.1 39.9 204.2 43.2 200.0C46.5 195.8 45.8 191.7 49.0 188.1C52.2 184.5 59.9 181.7 62.4 178.2C64.9 174.7 62.5 170.7 64.0 167.4C65.5 164.0 69.8 161.5 71.2 158.1C72.6 154.8 71.6 150.7 72.5 147.2C73.4 143.7 75.6 140.7 76.5 137.1C77.5 133.5 77.2 129.1 78.4 125.5C79.6 121.9 86.4 122.7 83.7 115.5C81.1 108.4 65.8 91.2 62.4 82.5C59.1 73.9 56.8 62.9 63.7 63.7C70.6 64.5 95.6 84.6 103.8 87.3C112.0 90.1 109.7 82.3 113.1 80.3C116.4 78.4 120.5 77.7 123.7 75.5C126.9 73.4 129.5 70.4 132.3 67.2C135.2 64.1 138.8 63.5 140.6 56.7C142.5 49.9 141.3 34.1 143.6 26.5C146.0 19.0 150.2 12.9 154.7 11.5C159.3 10.0 166.1 17.8 171.1 17.8C176.2 17.8 180.4 6.1 185.2 11.6C190.0 17.1 195.5 45.0 200.0 50.9C204.5 56.7 207.2 52.5 212.1 46.6C216.9 40.7 223.7 21.2 229.2 15.4C234.8 9.6 241.2 8.3 245.3 11.5C249.3 14.7 250.5 29.1 253.7 34.7C256.9 40.2 261.0 41.3 264.3 44.7C267.7 48.2 270.4 52.3 273.8 55.2C277.1 58.2 280.8 60.0 284.3 62.4C287.8 64.8 292.3 66.0 294.7 69.7C297.1 73.4 297.1 80.1 298.6 84.5C300.1 89.0 301.2 93.2 303.7 96.3C306.1 99.5 310.6 100.5 313.1 103.4C315.6 106.3 316.6 110.5 318.5 113.9C320.3 117.3 323.0 120.2 324.3 123.8C325.6 127.4 326.1 131.6 326.3 135.6C326.6 139.6 325.4 144.1 325.7 147.9C326.0 151.7 327.6 154.9 328.2 158.4C328.8 161.9 329.2 165.4 329.4 168.9C329.6 172.5 329.2 176.0 329.3 179.5C329.4 183.0 327.9 186.4 330.0 189.8C332.0 193.2 338.8 196.4 341.5 200.0Z'/%3E%3Ccircle cx='146.9' cy='382.2' r='4.6'/%3E%3Ccircle cx='11.8' cy='129.8' r='3.6'/%3E%3Ccircle cx='361.0' cy='330.5' r='2.0'/%3E%3Ccircle cx='-8.1' cy='119.0' r='1.2'/%3E%3Ccircle cx='356.0' cy='150.4' r='6.1'/%3E%3Ccircle cx='29.9' cy='154.6' r='5.1'/%3E%3Ccircle cx='10.4' cy='235.6' r='4.1'/%3E%3Ccircle cx='387.1' cy='204.6' r='4.9'/%3E%3Ccircle cx='342.0' cy='375.6' r='1.2'/%3E%3Ccircle cx='127.9' cy='44.8' r='5.0'/%3E%3Ccircle cx='55.2' cy='276.9' r='6.8'/%3E%3Ccircle cx='-10.1' cy='226.6' r='2.0'/%3E%3Ccircle cx='13.1' cy='131.9' r='2.5'/%3E%3Ccircle cx='331.9' cy='102.0' r='7.6'/%3E%3Ccircle cx='328.2' cy='50.8' r='3.9'/%3E%3Ccircle cx='104.6' cy='18.4' r='2.0'/%3E%3Ccircle cx='121.8' cy='367.7' r='3.4'/%3E%3Ccircle cx='378.4' cy='153.3' r='3.7'/%3E%3Ccircle cx='6.1' cy='307.6' r='1.2'/%3E%3Ccircle cx='32.3' cy='141.4' r='3.8'/%3E%3Ccircle cx='348.0' cy='292.7' r='3.9'/%3E%3Ccircle cx='317.7' cy='41.9' r='2.1'/%3E%3Ccircle cx='37.6' cy='239.0' r='5.9'/%3E%3Ccircle cx='-10.3' cy='280.3' r='1.2'/%3E%3Ccircle cx='304.4' cy='57.1' r='6.7'/%3E%3Ccircle cx='92.8' cy='80.1' r='7.6'/%3E%3Ccircle cx='170.3' cy='383.6' r='2.8'/%3E%3Ccircle cx='285.6' cy='59.4' r='6.9'/%3E%3Ccircle cx='32.8' cy='328.8' r='1.7'/%3E%3Ccircle cx='402.4' cy='308.4' r='1.2'/%3E%3Ccircle cx='313.4' cy='405.1' r='1.2'/%3E%3Ccircle cx='265.4' cy='344.9' r='6.8'/%3E%3Ccircle cx='338.1' cy='365.0' r='1.6'/%3E%3Ccircle cx='148.1' cy='4.4' r='3.3'/%3E%3Ccircle cx='288.7' cy='15.2' r='2.7'/%3E%3Ccircle cx='122.1' cy='348.9' r='3.5'/%3E%3Ccircle cx='307.8' cy='63.7' r='4.7'/%3E%3Ccircle cx='116.2' cy='388.5' r='2.5'/%3E%3Ccircle cx='321.0' cy='51.1' r='3.1'/%3E%3Ccircle cx='73.9' cy='24.4' r='2.2'/%3E%3Ccircle cx='114.1' cy='410.5' r='1.2'/%3E%3Ccircle cx='366.6' cy='180.9' r='4.9'/%3E%3Ccircle cx='232.9' cy='-20.5' r='1.2'/%3E%3Ccircle cx='30.6' cy='331.6' r='2.1'/%3E%3Ccircle cx='30.1' cy='162.2' r='4.6'/%3E%3Ccircle cx='370.2' cy='265.5' r='4.0'/%3E%3Ccircle cx='289.7' cy='16.9' r='2.4'/%3E%3Ccircle cx='204.8' cy='382.3' r='4.9'/%3E%3Ccircle cx='38.9' cy='257.7' r='6.6'/%3E%3Ccircle cx='-8.0' cy='93.5' r='1.2'/%3E%3Ccircle cx='62.9' cy='66.7' r='3.9'/%3E%3Ccircle cx='404.6' cy='84.8' r='1.2'/%3E%3Ccircle cx='53.0' cy='269.1' r='7.6'/%3E%3Ccircle cx='54.5' cy='318.5' r='2.4'/%3E%3Ccircle cx='383.9' cy='240.0' r='5.4'/%3E%3Cpath d='M190.3 41.9L187.6 -0.6' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M276.4 336.1L288.4 357.3' stroke-width='3.0' stroke-linecap='round'/%3E%3Cpath d='M45.9 186.2L19.9 183.9' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M56.3 224.6L15.2 231.7' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M84.0 90.7L54.4 62.7' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M248.9 342.1L265.8 391.1' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M167.3 350.1L159.0 388.1' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M154.1 357.6L147.6 379.9' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M52.5 131.2L27.9 119.8' stroke-width='3.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --splash-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.3' y2='1'%3E%3Cstop offset='0' stop-color='%239ED0F0'/%3E%3Cstop offset='.55' stop-color='%2366A8D2'/%3E%3Cstop offset='1' stop-color='%237A4FD8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%2366A8D2'%3E%3Cpath d='M341.0 200.0C340.3 203.7 340.6 207.4 339.6 211.0C338.6 214.6 335.0 217.6 335.2 221.4C335.3 225.2 339.9 229.8 340.5 233.7C341.0 237.6 337.0 240.3 338.3 244.9C339.6 249.6 344.6 255.3 348.4 261.5C352.2 267.7 362.9 278.3 361.0 282.0C359.2 285.8 344.0 283.2 337.2 284.1C330.4 284.9 325.4 286.3 320.0 287.2C314.7 288.1 308.2 287.4 305.0 289.7C301.9 292.0 303.3 298.2 301.2 301.2C299.0 304.1 294.0 304.2 291.9 307.6C289.8 311.1 290.2 317.6 288.5 321.7C286.7 325.9 283.4 328.1 281.3 332.7C279.3 337.3 278.9 345.5 276.2 349.5C273.5 353.5 268.9 354.6 265.0 356.9C261.1 359.2 257.5 362.9 253.0 363.2C248.6 363.5 242.7 359.0 238.1 358.9C233.6 358.8 230.0 362.3 225.8 362.6C221.5 363.0 217.0 361.8 212.7 361.0C208.4 360.1 204.2 357.9 200.0 357.6C195.8 357.3 191.5 359.8 187.5 359.0C183.4 358.3 179.5 355.4 175.8 352.9C172.1 350.3 168.9 346.2 165.4 344.0C161.9 341.7 157.7 342.1 154.7 339.3C151.7 336.6 149.5 331.3 147.3 327.3C145.1 323.2 143.8 318.0 141.4 315.0C139.0 312.1 135.0 312.3 132.7 309.8C130.4 307.2 130.5 301.5 127.6 299.7C124.7 297.9 119.5 299.5 115.4 299.1C111.3 298.6 106.4 298.6 102.7 297.3C99.1 295.9 98.0 292.1 93.7 290.8C89.4 289.5 80.8 291.3 77.2 289.2C73.5 287.2 74.4 281.7 71.6 278.7C68.8 275.7 62.5 274.5 60.2 271.2C58.0 267.9 58.6 262.9 58.1 258.8C57.6 254.6 59.4 250.0 57.3 246.4C55.2 242.7 46.7 240.9 45.5 237.1C44.2 233.3 49.9 227.9 49.8 223.8C49.8 219.6 48.6 216.2 45.0 212.2C41.4 208.2 37.9 204.8 28.2 200.0C18.4 195.2 -7.5 188.7 -13.6 183.2C-19.7 177.7 -15.2 171.1 -8.3 167.0C-1.4 162.9 17.8 161.2 27.6 158.6C37.4 156.0 45.1 154.2 50.6 151.5C56.1 148.7 57.8 145.4 60.5 142.2C63.3 139.0 66.9 136.8 67.1 132.3C67.4 127.8 66.0 123.1 62.1 115.5C58.2 107.9 42.5 90.9 43.9 86.6C45.2 82.2 63.0 89.0 70.4 89.3C77.7 89.5 83.5 89.5 88.0 88.0C92.5 86.4 92.8 80.6 97.4 79.9C102.0 79.2 110.5 83.5 115.5 83.7C120.5 83.9 123.5 82.2 127.2 81.2C131.0 80.3 134.8 80.0 137.9 78.2C141.1 76.4 145.3 78.8 146.3 70.2C147.2 61.7 141.8 34.5 143.8 27.0C145.7 19.5 153.1 24.6 158.0 25.2C162.9 25.9 168.6 31.3 173.2 30.9C177.9 30.5 181.6 22.8 186.1 22.8C190.5 22.7 195.8 25.4 200.0 30.8C204.2 36.2 207.5 51.6 211.4 55.2C215.3 58.7 219.4 52.6 223.4 52.1C227.4 51.6 231.2 52.9 235.4 52.4C239.7 51.8 244.6 49.4 249.1 48.8C253.7 48.1 258.3 48.2 262.7 48.6C267.1 49.0 271.2 50.6 275.8 51.3C280.4 51.9 285.6 51.7 290.3 52.7C294.9 53.7 300.9 53.6 303.8 57.2C306.6 60.8 305.0 70.2 307.3 74.4C309.5 78.6 315.4 78.6 317.5 82.5C319.5 86.4 319.4 92.7 319.6 97.9C319.8 103.1 317.4 109.8 318.7 113.7C320.1 117.7 326.4 118.1 327.8 121.7C329.2 125.3 326.8 131.1 327.1 135.2C327.5 139.3 328.2 142.8 329.8 146.2C331.5 149.6 331.3 153.1 336.9 155.5C342.5 158.0 356.3 158.1 363.4 160.8C370.5 163.4 382.6 167.0 379.3 171.6C376.0 176.3 350.1 184.0 343.7 188.7C337.3 193.4 341.7 196.3 341.0 200.0Z'/%3E%3Ccircle cx='27.4' cy='263.0' r='5.1'/%3E%3Ccircle cx='27.8' cy='42.2' r='1.2'/%3E%3Ccircle cx='346.9' cy='21.8' r='1.2'/%3E%3Ccircle cx='37.7' cy='213.9' r='5.6'/%3E%3Ccircle cx='28.8' cy='40.7' r='1.2'/%3E%3Ccircle cx='53.1' cy='126.4' r='6.5'/%3E%3Ccircle cx='364.3' cy='238.9' r='3.3'/%3E%3Ccircle cx='174.4' cy='-30.2' r='1.2'/%3E%3Ccircle cx='384.0' cy='312.6' r='1.2'/%3E%3Ccircle cx='146.4' cy='-3.8' r='2.8'/%3E%3Ccircle cx='289.2' cy='351.6' r='4.1'/%3E%3Ccircle cx='405.7' cy='307.2' r='1.2'/%3E%3Ccircle cx='353.3' cy='320.8' r='2.2'/%3E%3Ccircle cx='380.9' cy='157.4' r='2.3'/%3E%3Ccircle cx='188.3' cy='16.8' r='4.8'/%3E%3Ccircle cx='232.6' cy='39.9' r='6.1'/%3E%3Ccircle cx='366.7' cy='145.5' r='3.8'/%3E%3Ccircle cx='125.2' cy='56.3' r='7.6'/%3E%3Ccircle cx='274.0' cy='-19.9' r='1.2'/%3E%3Ccircle cx='30.3' cy='106.5' r='3.5'/%3E%3Ccircle cx='45.7' cy='23.5' r='1.2'/%3E%3Ccircle cx='7.2' cy='206.9' r='2.7'/%3E%3Ccircle cx='313.0' cy='387.8' r='1.5'/%3E%3Ccircle cx='133.4' cy='35.2' r='4.6'/%3E%3Ccircle cx='291.7' cy='342.5' r='3.7'/%3E%3Ccircle cx='66.5' cy='19.8' r='1.2'/%3E%3Ccircle cx='230.4' cy='39.1' r='5.9'/%3E%3Ccircle cx='327.3' cy='352.8' r='2.3'/%3E%3Ccircle cx='194.7' cy='429.8' r='1.2'/%3E%3Ccircle cx='208.5' cy='395.9' r='2.6'/%3E%3Ccircle cx='252.2' cy='18.5' r='4.9'/%3E%3Ccircle cx='26.7' cy='83.5' r='2.4'/%3E%3Ccircle cx='60.7' cy='116.4' r='7.4'/%3E%3Ccircle cx='67.7' cy='85.2' r='4.9'/%3E%3Ccircle cx='399.0' cy='136.2' r='2.3'/%3E%3Ccircle cx='40.0' cy='169.3' r='5.8'/%3E%3Ccircle cx='10.2' cy='285.5' r='2.0'/%3E%3Ccircle cx='338.6' cy='376.4' r='1.2'/%3E%3Ccircle cx='229.6' cy='389.5' r='4.9'/%3E%3Ccircle cx='146.9' cy='39.9' r='3.5'/%3E%3Ccircle cx='37.6' cy='199.8' r='4.5'/%3E%3Ccircle cx='370.8' cy='347.3' r='1.2'/%3E%3Ccircle cx='341.7' cy='46.3' r='1.3'/%3E%3Ccircle cx='165.3' cy='420.0' r='1.2'/%3E%3Ccircle cx='-20.2' cy='202.6' r='1.2'/%3E%3Ccircle cx='81.5' cy='370.4' r='2.6'/%3E%3Ccircle cx='325.7' cy='380.3' r='1.2'/%3E%3Ccircle cx='297.1' cy='354.3' r='3.2'/%3E%3Ccircle cx='22.0' cy='251.1' r='4.9'/%3E%3Ccircle cx='288.1' cy='0.3' r='1.9'/%3E%3Ccircle cx='196.7' cy='409.2' r='2.7'/%3E%3Ccircle cx='299.2' cy='37.2' r='4.9'/%3E%3Ccircle cx='56.1' cy='376.3' r='1.2'/%3E%3Ccircle cx='411.1' cy='290.6' r='1.2'/%3E%3Ccircle cx='-23.6' cy='134.8' r='1.2'/%3E%3Cpath d='M250.6 48.5L264.5 6.8' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M77.7 126.6L45.3 107.3' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M152.0 44.1L143.5 16.8' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M162.9 360.2L154.4 396.6' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M103.4 81.4L79.3 51.9' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M279.9 321.2L302.2 355.1' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M82.0 300.8L46.9 330.8' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M95.3 300.3L73.8 320.9' stroke-width='3.9' stroke-linecap='round'/%3E%3Cpath d='M182.9 57.0L176.7 5.4' stroke-width='2.3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --splash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='%23fff' stroke='%23fff'%3E%3Cpath d='M323.5 200.0C323.4 203.1 318.4 206.0 318.7 209.3C318.9 212.6 324.6 216.5 325.0 219.8C325.3 223.1 320.9 225.6 320.9 229.0C320.8 232.5 324.8 237.1 324.5 240.5C324.2 243.8 320.5 246.3 318.8 249.2C317.1 252.2 314.8 254.6 314.2 258.2C313.7 261.8 315.9 266.9 315.6 270.8C315.3 274.7 310.2 275.1 312.3 281.6C314.5 288.1 329.4 305.5 328.6 309.8C327.7 314.1 313.2 307.5 307.3 307.3C301.3 307.1 296.9 307.6 292.7 308.5C288.5 309.5 284.9 310.4 282.1 313.0C279.3 315.6 279.0 322.0 276.0 324.1C273.0 326.2 267.6 324.5 264.1 325.7C260.5 326.9 257.5 329.0 254.5 331.5C251.4 333.9 248.1 335.0 245.6 340.5C243.2 346.0 242.8 361.0 239.5 364.5C236.2 368.0 230.2 363.8 225.6 361.5C221.0 359.1 216.1 353.0 211.8 350.3C207.6 347.7 203.8 347.2 200.0 345.7C196.2 344.3 192.6 342.4 188.9 341.6C185.1 340.9 181.2 342.2 177.6 341.2C174.1 340.2 170.7 337.7 167.4 335.8C164.1 333.8 160.9 331.7 158.0 329.3C155.1 326.8 152.6 323.4 149.8 321.1C147.1 318.7 144.2 316.9 141.4 315.1C138.5 313.2 134.9 312.6 132.6 310.0C130.3 307.4 130.3 301.6 127.7 299.5C125.1 297.4 119.5 299.3 116.8 297.4C114.1 295.6 113.4 291.3 111.5 288.5C109.6 285.7 107.9 283.0 105.4 280.8C103.0 278.5 98.7 277.6 96.9 274.9C95.1 272.2 95.4 267.9 94.4 264.7C93.3 261.5 92.4 258.5 90.6 255.8C88.7 253.0 86.0 250.8 83.3 248.3C80.6 245.9 76.2 243.8 74.2 240.9C72.1 238.0 74.0 234.0 71.0 231.0C68.0 228.0 58.1 226.1 55.9 222.8C53.7 219.5 58.9 215.0 57.8 211.2C56.7 207.4 50.8 203.8 49.4 200.0C48.0 196.2 47.8 191.9 49.5 188.2C51.2 184.4 61.7 182.3 59.6 177.8C57.4 173.2 38.4 165.3 36.5 160.7C34.6 156.2 42.2 152.9 48.0 150.6C53.8 148.3 65.9 148.6 71.4 146.7C76.9 144.8 78.4 142.0 80.8 139.3C83.2 136.5 84.1 133.1 85.8 130.0C87.6 127.0 89.9 124.4 91.3 121.0C92.7 117.6 91.5 111.9 94.2 109.6C96.9 107.4 104.4 109.4 107.6 107.6C110.9 105.9 111.5 101.6 113.9 99.2C116.4 96.8 119.5 95.1 122.4 93.1C125.2 91.2 127.9 88.8 131.1 87.6C134.4 86.4 138.7 87.2 141.8 85.8C145.0 84.5 147.3 81.7 150.1 79.5C152.9 77.3 155.6 74.8 158.6 72.7C161.6 70.6 164.6 67.2 168.1 66.9C171.5 66.6 176.0 71.0 179.6 71.0C183.1 71.0 186.1 67.3 189.5 66.9C192.9 66.6 196.6 68.3 200.0 69.0C203.4 69.7 207.0 69.4 210.1 71.1C213.3 72.9 215.7 79.1 219.1 79.3C222.5 79.5 227.2 72.5 230.6 72.3C234.0 72.2 236.1 77.8 239.5 78.4C243.0 79.0 247.3 76.6 251.3 76.1C255.3 75.5 259.5 75.1 263.6 75.1C267.7 75.2 272.6 74.5 275.9 76.2C279.1 77.9 280.0 83.3 283.3 85.4C286.5 87.4 292.2 86.3 295.3 88.4C298.4 90.6 299.5 95.1 301.7 98.3C303.9 101.4 305.8 104.7 308.5 107.4C311.1 110.1 312.8 113.1 317.6 114.6C322.4 116.0 329.8 115.4 337.2 115.9C344.5 116.4 356.1 115.4 361.8 117.6C367.4 119.8 369.9 124.6 370.9 129.2C372.0 133.8 372.3 139.4 368.2 145.3C364.1 151.3 353.5 159.1 346.3 164.9C339.2 170.7 329.9 175.8 325.4 180.1C321.0 184.4 319.9 187.3 319.6 190.6C319.3 193.9 323.7 196.9 323.5 200.0Z'/%3E%3Ccircle cx='367.6' cy='185.4' r='2.1'/%3E%3Ccircle cx='213.7' cy='370.7' r='2.5'/%3E%3Ccircle cx='43.7' cy='245.0' r='1.8'/%3E%3Ccircle cx='323.7' cy='127.5' r='4.7'/%3E%3Ccircle cx='277.8' cy='73.9' r='5.1'/%3E%3Ccircle cx='364.3' cy='145.8' r='2.3'/%3E%3Ccircle cx='328.0' cy='301.4' r='1.9'/%3E%3Ccircle cx='287.3' cy='70.3' r='3.3'/%3E%3Ccircle cx='384.0' cy='198.6' r='1.2'/%3E%3Ccircle cx='41.1' cy='248.0' r='3.0'/%3E%3Ccircle cx='45.2' cy='220.7' r='3.2'/%3E%3Ccircle cx='297.2' cy='327.7' r='4.3'/%3E%3Ccircle cx='367.2' cy='156.3' r='1.8'/%3E%3Ccircle cx='123.0' cy='324.2' r='3.6'/%3E%3Ccircle cx='236.5' cy='18.9' r='1.2'/%3E%3Ccircle cx='240.0' cy='24.3' r='1.3'/%3E%3Ccircle cx='107.4' cy='46.3' r='1.2'/%3E%3Ccircle cx='155.7' cy='50.7' r='3.5'/%3E%3Ccircle cx='221.4' cy='25.3' r='1.2'/%3E%3Ccircle cx='363.7' cy='141.1' r='1.8'/%3E%3Ccircle cx='368.4' cy='212.3' r='1.7'/%3E%3Ccircle cx='121.8' cy='55.0' r='3.3'/%3E%3Ccircle cx='90.8' cy='55.3' r='1.2'/%3E%3Ccircle cx='89.6' cy='59.9' r='1.6'/%3E%3Ccircle cx='92.2' cy='348.6' r='1.2'/%3E%3Ccircle cx='127.8' cy='24.1' r='1.2'/%3E%3Ccircle cx='33.0' cy='181.2' r='1.6'/%3E%3Ccircle cx='297.0' cy='38.7' r='1.2'/%3E%3Ccircle cx='135.8' cy='34.6' r='1.6'/%3E%3Ccircle cx='285.2' cy='359.1' r='1.2'/%3E%3Cpath d='M130.5 82.2L111.7 50.2' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M106.6 91.9L92.9 76.1' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M68.2 251.4L43.9 260.9' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M111.9 105.6L89.5 81.5' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M323.5 243.7L350.6 253.3' stroke-width='2.0' stroke-linecap='round'/%3E%3Cpath d='M245.0 320.9L256.5 351.6' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M92.8 109.6L72.4 92.4' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M336.5 200.6L364.2 200.7' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M308.8 296.0L331.6 316.0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- SportCourt: mehr Farbe, Streetball- und Graffiti-Akzente (29.10.2026)
   Grundfarbe bleibt Hellblau aus dem Logo. Dazu Neon-Pink, Basketball-Orange,
   Sonnengelb und das Gruen des Foerdervereins als Akzente. */
[data-theme="court"] {
  --neon-pink: #FF4FA3;
  --neon-orange: #FF8A3D;
  --neon-yellow: #FFC857;
  --neon-green: #7EB43C;
  --font-graffiti: "Futura Condensed ExtraBold", "Futura-CondensedExtraBold", "Futura", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
}
[data-theme="court"] .section-head h2::after { background: linear-gradient(90deg, var(--neon-pink), var(--neon-orange) 50%, var(--accent)); height: 5px; width: 72px; }
.btn-neon {
  background: linear-gradient(100deg, var(--neon-pink), var(--neon-orange));
  color: #120A10;
  box-shadow: 0 0 0 1px rgba(255,79,163,.4), 0 8px 30px rgba(255,79,163,.35);
}
@media (hover: hover) and (pointer: fine) { .btn-neon:hover { box-shadow: 0 0 0 1px rgba(255,138,61,.6), 0 12px 40px rgba(255,79,163,.5); } }

/* Spritzer hinter dem Logo im Kopf */
.hero-court .hero-logo-wrap::before {
  content: "";
  position: absolute; z-index: 0;
  width: 160%; aspect-ratio: 1;
  background: var(--splash-orange) center/contain no-repeat;
  opacity: .28;
  filter: saturate(1.2);
  animation: splash-turn 40s linear infinite;
}
@keyframes splash-turn { to { transform: rotate(360deg); } }

/* Unternavigation */
.subnav { position: relative; z-index: 2; padding: 1.1rem 0 0; }
.subnav .container { display: flex; flex-wrap: wrap; gap: .5rem; }
.subnav a {
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink); font-weight: 700; font-size: .9rem;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.subnav a:active { transform: scale(0.96); }
.subnav a:hover { border-color: var(--neon-pink); background: rgba(255,79,163,.12); }

/* Kennzahlen im SportCourt-Stil */
.kz-court { margin-top: 1.5rem; }
.kz-court ul { background: rgba(255,255,255,.04); }
.kz-court li:nth-child(1) .kz-n { color: var(--accent); }
.kz-court li:nth-child(2) .kz-n { color: var(--neon-pink); }
.kz-court li:nth-child(3) .kz-n { color: var(--neon-orange); font-family: var(--font-graffiti); font-style: italic; letter-spacing: 0; }
.kz-court li:nth-child(4) .kz-n { color: var(--neon-green); }
.kz-court .kz-n { text-shadow: 0 0 24px currentColor; }

/* Konzept */
.tag-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.tag {
  display: table;
  margin-bottom: .6rem;
  padding: .2em .55em .15em;
  font-family: var(--font-graffiti);
  font-size: .62em; font-weight: 800; font-style: italic;
  letter-spacing: .02em; text-transform: uppercase;
  color: #120A10;
  background: linear-gradient(100deg, var(--neon-yellow), var(--neon-orange));
  border-radius: 4px;
  transform: rotate(-3deg) skewX(-6deg);
  box-shadow: 4px 4px 0 var(--neon-pink);
}
.partner-card .partner-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0 1rem; }
.partner-card .pl { background: #fff; border-radius: var(--radius-sm); height: 92px; padding: .6rem; display: flex; align-items: center; justify-content: center; }
.partner-card .pl img { max-height: 70px; max-width: 100%; width: auto; height: auto; }
.pillars { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pillars li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .5rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; margin: 0; }
.pillars .pi { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.pillars li:nth-child(2) .pi { background: rgba(126,180,60,.18); color: #A9D86E; }
.pillars li:nth-child(3) .pi { background: rgba(255,200,87,.18); color: var(--neon-yellow); }
.pillars li:nth-child(4) .pi { background: rgba(255,79,163,.18); color: var(--neon-pink); }
.pillars li:nth-child(5) .pi { background: rgba(255,138,61,.18); color: var(--neon-orange); }
.pillars svg { width: 16px; height: 16px; }

/* Farbspritzer-Band mit Bewegungslinien */
.splash-band { overflow: hidden; isolation: isolate; padding-top: var(--section); }
.speedlines {
  position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(-16deg, transparent 0 46px, rgba(102,168,210,.10) 46px 49px, transparent 49px 120px, rgba(255,79,163,.10) 120px 122px, transparent 122px 190px, rgba(255,200,87,.08) 190px 196px);
  animation: speed 14s linear infinite;
}
@keyframes speed { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-196px, 0, 0); } }
.graffiti {
  font-family: var(--font-graffiti);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em;
  line-height: .95;
}
.graffiti span { display: inline-block; transform: skewX(-8deg); }
.graffiti .g-pink { color: var(--neon-pink); text-shadow: 0 0 28px rgba(255,79,163,.55); }
.splashes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .splashes { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; } }
.splash { position: relative; margin: 0; aspect-ratio: 1; display: grid; place-items: center; }
.splash-bg {
  position: absolute; inset: -6%;
  background: var(--splash-green) center/contain no-repeat;
  transform: rotate(-8deg) scale(.86);
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 600ms ease;
}
.s-orange .splash-bg { background-image: var(--splash-orange); }
.s-blue .splash-bg { background-image: var(--splash-blue); }
.splash img {
  position: relative;
  width: 86%; height: 86%;
  object-fit: cover;
  -webkit-mask: var(--splash-mask) center/contain no-repeat;
  mask: var(--splash-mask) center/contain no-repeat;
  filter: saturate(1.25) contrast(1.05);
  opacity: 0;
  transform: scale(.92);
  transition: transform 900ms var(--ease-out) 150ms, opacity 600ms ease 150ms;
}
.splash.in .splash-bg { opacity: .95; transform: rotate(0deg) scale(1); }
.splash.in img { opacity: 1; transform: none; }
html:not(.js) .splash-bg { opacity: .95; transform: none; }
html:not(.js) .splash img { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .splash:hover .splash-bg { transform: rotate(6deg) scale(1.05); }
  .splash:hover img { transform: scale(1.04); }
}
.g-label {
  position: absolute; left: 50%; bottom: 2%;
  transform: translateX(-50%) rotate(-4deg) skewX(-8deg);
  padding: .15em .5em .1em;
  font-family: var(--font-graffiti);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; font-style: italic;
  text-transform: uppercase; white-space: nowrap;
  color: #fff;
  background: #0C1215;
  border: 2px solid currentColor;
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--neon-pink);
}
.s-green .g-label { color: #CFF27A; box-shadow: 4px 4px 0 #1FB5A0; }
.s-orange .g-label { color: var(--neon-orange); box-shadow: 4px 4px 0 var(--neon-pink); }
.s-blue .g-label { color: #9ED0F0; box-shadow: 4px 4px 0 #7A4FD8; }
.splash.reveal { transform: none; }

/* Rasterpunkte wie auf Streetball-Plakaten */
.halftone { isolation: isolate; }
.halftone::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: 0; top: 0; width: min(55vw, 700px); height: 70%;
  background: radial-gradient(circle, rgba(255,138,61,.55) 1.6px, transparent 2px) 0 0/16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  opacity: .5;
}

/* Anlagen-Raster: 6 Zellen, keine Luecke */
.facilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: clamp(.9rem, 2vw, 1.3rem);
}
.fac {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border-radius: var(--radius);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fac::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--fac-c, var(--accent)); box-shadow: 0 0 24px var(--fac-c, var(--accent)); }
.fac h3 { margin: 0 0 .35rem; }
.fac p { margin: 0; color: var(--ink-soft); font-size: .95rem; text-wrap: pretty; }
.fac-n { font-weight: 800; color: var(--fac-c, var(--accent)); white-space: nowrap; }
.fac-art { flex: 1; display: grid; place-items: center; min-height: 110px; }
.fac-art svg { width: 100%; height: auto; max-height: 210px; }
.fac-multi { grid-column: span 2; grid-row: span 2; --fac-c: var(--accent); }
.fac-3x3 { grid-column: span 1; grid-row: span 2; --fac-c: var(--neon-orange); background: linear-gradient(180deg, rgba(255,138,61,.12), rgba(255,79,163,.06) 60%, rgba(255,255,255,.03)); }
.fac-cal { --fac-c: var(--neon-pink); }
.fac-treff { --fac-c: var(--neon-yellow); }
.fac-pump { grid-column: span 2; --fac-c: var(--neon-green); }
.fac-all { grid-column: span 2; --fac-c: var(--neon-pink); justify-content: center; background: linear-gradient(120deg, rgba(255,79,163,.16), rgba(102,168,210,.10)); }
@media (max-width: 980px) {
  .facilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac-multi { grid-column: span 2; grid-row: span 1; }
  .fac-3x3 { grid-column: span 1; grid-row: span 2; }
  .fac-pump, .fac-all { grid-column: span 2; }
}
@media (max-width: 600px) {
  .facilities { grid-template-columns: minmax(0, 1fr); }
  .fac-multi, .fac-3x3, .fac-pump, .fac-all { grid-column: auto; grid-row: auto; }
}
.chips { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { margin: 0; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--accent-soft); color: #CFE6F5; }
.chips li:nth-child(3n+2) { background: rgba(255,79,163,.16); color: #FFC2E0; }
.chips li:nth-child(3n) { background: rgba(255,138,61,.16); color: #FFD0B0; }
.chips .chip-cold { background: rgba(255,255,255,.1); color: #fff; }

/* Linien zeichnen sich beim Einblenden */
.ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-in-out); }
.in .ln, .ln.in { stroke-dashoffset: 0; }
.ln-pink { transition-delay: .5s; }
.fac-pump .ln-pink { stroke-dasharray: 0.02 0.03; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease 1.4s; }
.fac-pump.in .ln-pink { opacity: 1; }
html:not(.js) .ln { stroke-dashoffset: 0; }

/* 3x3: Ball dribbelt, springt in den Korb, Netz schwingt (nur transform und opacity) */
.b3-scene { position: relative; flex: 1; min-height: 260px; margin: -.3rem -.3rem 0; }
.b3-tag {
  position: absolute; left: 4%; top: 2%;
  font-family: var(--font-graffiti); font-weight: 800; font-style: italic;
  font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-pink);
  text-shadow: 0 0 22px rgba(255,79,163,.55);
  transform: rotate(-8deg) skewX(-6deg);
}
.b3-hoop { position: absolute; right: 6%; top: 4%; width: 44%; }
.b3-rim { position: absolute; right: calc(6% + 7%); top: calc(4% + 44% * 0.55 + 14px); width: 30%; z-index: 3; }
.b3-net { position: absolute; right: calc(6% + 9%); top: calc(4% + 44% * 0.55 + 20px); width: 26%; z-index: 1; transform-origin: 50% 0; }
.b3-floor { position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }
.b3-x { position: absolute; inset: 0; z-index: 2; }
.b3-y { position: absolute; inset: 0; }
.b3-ball { position: absolute; left: 8%; bottom: 12px; width: 40px; height: 40px; }
.b3-ball svg { width: 100%; height: 100%; display: block; }
.b3-shadow { position: absolute; left: 8%; bottom: 6px; width: 40px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .fac-3x3.in .b3-x { animation: b3x 4.8s linear infinite; }
  .fac-3x3.in .b3-y { animation: b3y 4.8s infinite; }
  .fac-3x3.in .b3-ball svg { animation: b3spin 4.8s linear infinite; }
  .fac-3x3.in .b3-ball { animation: b3fade 4.8s linear infinite; }
  .fac-3x3.in .b3-shadow { animation: b3shadow 4.8s infinite; }
  .fac-3x3.in .b3-net { animation: b3net 4.8s infinite; }
}
@keyframes b3x {
  0%, 46% { transform: translateX(0); }
  74% { transform: translateX(var(--hx, 64%)); }
  100% { transform: translateX(var(--hx, 64%)); }
}
@keyframes b3y {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  8% { transform: translateY(-24%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  16% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  24% { transform: translateY(-24%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  32% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  40% { transform: translateY(-24%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  46% { transform: translateY(-14%); animation-timing-function: cubic-bezier(.2,.7,.4,1); }
  62% { transform: translateY(var(--apex, -88%)); animation-timing-function: cubic-bezier(.5,0,.8,.5); }
  74% { transform: translateY(var(--rim, -63%)); animation-timing-function: linear; }
  86% { transform: translateY(-30%); }
  100% { transform: translateY(-30%); }
}
@keyframes b3spin { 0% { transform: rotate(0deg); } 74% { transform: rotate(-720deg); } 100% { transform: rotate(-760deg); } }
@keyframes b3fade { 0% { opacity: 0; } 4% { opacity: 1; } 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes b3shadow {
  0%, 16%, 32% { transform: scale(1); opacity: .9; }
  8%, 24%, 40% { transform: scale(.7); opacity: .5; }
  46% { transform: scale(.8); opacity: .6; }
  60%, 100% { transform: scale(.4); opacity: 0; }
}
@keyframes b3net {
  0%, 72% { transform: scaleY(1) scaleX(1); }
  78% { transform: scaleY(1.22) scaleX(.9); }
  84% { transform: scaleY(.94) scaleX(1.04); }
  90%, 100% { transform: scaleY(1) scaleX(1); }
}

/* Lageplan */
.plan-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 900px) { .plan-wrap { grid-template-columns: minmax(0, 1fr); } .plan { order: -1; } }
.plan-legend { display: grid; gap: .45rem; }
.plan-legend button {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--ink); font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.plan-legend button:active { transform: scale(0.98); }
.plan-legend button:hover, .plan-legend button[aria-pressed="true"] { border-color: var(--line-strong); background: rgba(255,255,255,.08); }
.sw { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 2px solid; }
.sw-multi { border-color: #9ED0F0; background: rgba(102,168,210,.4); }
.sw-b3 { border-color: #FF8A3D; background: rgba(255,138,61,.4); }
.sw-cal { border-color: #FF4FA3; background: rgba(255,79,163,.4); }
.sw-treff { border-color: #FFC857; background: rgba(255,200,87,.35); }
.sw-pump { border-color: #9ED0F0; background: #7EB43C; }
.sw-park { border-color: rgba(255,255,255,.5); border-style: dashed; }
.plan-orig { margin-top: .8rem; border-radius: var(--radius-sm); }
.plan-orig img { border-radius: var(--radius-sm); }
.plan { margin: 0; padding: clamp(.8rem, 2vw, 1.2rem); border-radius: var(--radius); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.plan svg { width: 100%; height: auto; display: block; }
.plan .pl-t { fill: #EEF3F6; font: 700 17px var(--font-sans); }
.plan .pl-s { fill: #A1B0B8; font: 600 14px var(--font-sans); }
.plan .area { transition: opacity 300ms ease; }
.plan[data-hl] .area { opacity: .22; }
.plan[data-hl="multi"] .area-multi, .plan[data-hl="b3"] .area-b3, .plan[data-hl="cal"] .area-cal,
.plan[data-hl="treff"] .area-treff, .plan[data-hl="pump"] .area-pump, .plan[data-hl="park"] .area-park { opacity: 1; }
.plan figcaption { margin-top: .6rem; }

/* Zeitplan als Strecke */
.roadmap { position: relative; }
.rm-controls { display: flex; justify-content: flex-end; gap: .4rem; margin-bottom: .8rem; }
.rm-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.rm-btn:hover { border-color: var(--neon-pink); }
.rm-btn:active { transform: scale(0.94); }
.rm-btn svg { width: 20px; height: 20px; }
.rm-track {
  list-style: none; margin: 0; padding: 2.4rem 0 .5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  position: relative; z-index: 1;
}
.rm-track::-webkit-scrollbar { display: none; }
.rm-track li {
  scroll-snap-align: start;
  position: relative; margin: 0;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
}
.rm-track li::before {
  content: ""; position: absolute; left: 1.1rem; top: -2.05rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.rm-done::before { background: var(--accent) !important; }
.rm-now::before { border-color: var(--neon-pink) !important; background: var(--neon-pink) !important; box-shadow: 0 0 0 4px var(--bg), 0 0 18px var(--neon-pink) !important; }
.rm-next { border-style: dashed !important; }
.rm-next::before { border-style: dashed !important; border-color: var(--neon-orange) !important; }
.rm-date { display: block; font-family: var(--font-graffiti); font-style: italic; font-weight: 800; font-size: 1.25rem; color: var(--accent-2); margin-bottom: .3rem; letter-spacing: .01em; }
.rm-now .rm-date { color: var(--neon-pink); }
.rm-next .rm-date { color: var(--neon-orange); }
.rm-text { font-size: .93rem; color: var(--ink-soft); }
.rm-line { position: absolute; left: 0; right: 0; top: calc(44px + .8rem + 2.4rem - 1.55rem); height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.rm-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--neon-pink)); transform-origin: left center; transform: scaleX(0); transition: transform 2s var(--ease-out); }
.roadmap.in .rm-fill { transform: scaleX(var(--p, 1)); }
html:not(.js) .rm-fill { transform: scaleX(var(--p, 1)); }

@media (prefers-reduced-motion: reduce) {
  .hero-court .hero-logo-wrap::before, .speedlines { animation: none; }
  .ln { transition: none; stroke-dashoffset: 0; }
  .splash-bg, .splash img { transition: none; opacity: 1 !important; transform: none !important; }
  .rm-fill { transition: none; }
}
@media (max-width: 700px) { .speedlines { animation: none; } }

/* 3x3-Szene, feste Masse (Korb rechts oben, Ball startet links unten) */
.b3-scene { flex: none; height: 280px; min-height: 0; margin: -.3rem -.3rem 0; }
.b3-tag { top: auto; left: 0; bottom: 44px; font-size: 4.6rem; opacity: .6; z-index: 0; }
.b3-hoop { right: 10px; top: 40px; width: 110px; z-index: 1; }
.b3-net { right: 37px; top: 110px; width: 56px; z-index: 3; }
.b3-x { z-index: 2; --hx: calc(90% - 85px); --rim: calc(-100% + 139px); --apex: calc(-100% + 74px); --thru: calc(-100% + 184px); }
.b3-ball { left: 10%; bottom: 14px; }
.b3-shadow { left: 10%; bottom: 8px; }
@keyframes b3y {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  8% { transform: translateY(-22%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  16% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  24% { transform: translateY(-22%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  32% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  40% { transform: translateY(-22%); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
  46% { transform: translateY(-12%); animation-timing-function: cubic-bezier(.2,.7,.4,1); }
  62% { transform: translateY(var(--apex)); animation-timing-function: cubic-bezier(.5,0,.8,.5); }
  74% { transform: translateY(var(--rim)); animation-timing-function: linear; }
  86% { transform: translateY(var(--thru)); }
  100% { transform: translateY(var(--thru)); }
}
@media (max-width: 600px) { .b3-scene { height: 260px; } }
@media (prefers-reduced-motion: reduce) { .b3-ball { opacity: 1; } }

/* Farbspritzer-Band: Ueberschrift breiter, Fotos kraeftiger */
.splash-band .section-head { max-width: none; }
.splash img { filter: saturate(1.6) contrast(1.18) brightness(.95); }
.hero-court .hero-logo-wrap::before { opacity: .38; }

/* Lageplan nach Entwurf 2025: zusaetzliche Flaechen */
.sw-biker { border-color: #B49CFF; background: rgba(122,79,216,.45); }
.sw-green { border-color: rgba(102,168,210,.8); background: rgba(126,180,60,.5); }
.plan[data-hl="biker"] .area-biker, .plan[data-hl="green"] .area-green { opacity: 1; }
.plan[data-hl] .lines-hww { opacity: .25; }
.plan .pl-vert { writing-mode: vertical-rl; }
.plan .pl-t { font-size: 15px; }
.plan .pl-s { font-size: 12.5px; }

/* Foerdermittel-Zaehler: Balken = erreichte Summe, Markierung = Ziel */
.meter-bar-wrap { position: relative; padding-bottom: 1.6rem; }
.meter-target {
  position: absolute; left: var(--t); top: .55rem;
  width: 2px; height: 26px; background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.7);
  opacity: 0; transition: opacity 400ms ease 1.2s;
}
.meter-target span {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .78rem; font-weight: 700; color: #EEF3F6;
}
.meter.in .meter-target, html:not(.js) .meter-target { opacity: 1; }
.meter-foerder { border-color: rgba(255,79,163,.35); background: linear-gradient(120deg, rgba(255,79,163,.12), rgba(255,138,61,.06)); }
.meter-foerder .meter-foot a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .meter-target { transition: none; } }

.meter-bar-wrap { padding-bottom: 2.3rem; }

/* ---------- Flutlicht-Szene (eigene Grafik, 29.10.2026) ----------
   Beim Einblenden geht das Licht flackernd an, danach fliegt der Ball.
   Animiert werden nur opacity und SMIL-Bewegung, keine CSS-Transforms an
   SVG-Gruppen. */
.floodlight {
  position: relative;
  min-height: clamp(480px, 50vw, 640px);
  display: flex; align-items: center;
  overflow: hidden;
  background: #05080B;
  isolation: isolate;
}
html.js .floodlight.reveal { opacity: 1; transform: none; }
.fl-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.fl-content { display: flex; justify-content: flex-end; }
.fl-text { max-width: 470px; padding: 2rem 0; }
.fl-text .lede { color: #C9D6DD; }
.fl-text .graffiti { font-size: clamp(2.4rem, 5vw, 4rem); }
.fl-cone, .fl-lamp, .fl-lit { opacity: 0; }
.floodlight.in .fl-cone, .floodlight.in .fl-lamp, .floodlight.in .fl-lit { animation: fl-on 1.6s linear .3s forwards; }
html:not(.js) .fl-cone, html:not(.js) .fl-lamp, html:not(.js) .fl-lit { opacity: 1; }
@keyframes fl-on {
  0% { opacity: 0; } 8% { opacity: .8; } 12% { opacity: .1; } 22% { opacity: .9; } 26% { opacity: .3; }
  40% { opacity: 1; } 44% { opacity: .55; } 60%, 100% { opacity: 1; }
}
.fl-stars { transition: opacity 1.2s ease 1s; }
.floodlight.in .fl-stars { opacity: .55; }
.fl-stars .st1 { animation: tw 3.2s ease-in-out infinite; }
.fl-stars .st2 { animation: tw 4.6s ease-in-out infinite .8s; }
.fl-stars .st3 { animation: tw 5.4s ease-in-out infinite 1.6s; }
@keyframes tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.fl-ball { opacity: 0; }
@media (max-width: 760px) {
  .floodlight { flex-direction: column; align-items: stretch; min-height: 0; }
  .fl-scene { position: relative; height: 340px; z-index: 0; }
  .fl-content { justify-content: flex-start; }
  .fl-text { padding: 1.5rem 0 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-cone, .fl-lamp, .fl-lit { opacity: 1; animation: none !important; }
  .fl-stars circle { animation: none; }
}
.floodlight::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 40%, rgba(5,8,11,.55) 62%, rgba(5,8,11,.8) 100%); }
@media (max-width: 760px) { .floodlight::after { display: none; } }

/* Kalenderseite im SportCourt-Stil: das anny-Werkzeug bleibt auf heller Karte */
[data-theme="court"] .kalender-frame {
  background: #fff; color: #111;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(102,168,210,.25), 0 0 80px rgba(102,168,210,.15), var(--shadow-lg);
  min-height: 60vh;
}

/* Seitenkopf auf schmalen Handys: Name darf nicht unter die Symbole laufen */
.site-head .brand { flex: 1 1 auto; min-width: 0; }
.site-head .brand-text { min-width: 0; }
.site-head .nav { flex: none; }
@media (max-width: 440px) {
  .brand { gap: .55rem; }
  .brand img, .brand-court img { width: 38px; height: 38px; }
  .brand-text { font-size: .86rem; line-height: 1.15; }
  .brand-text small { font-size: .72rem; }
  .nav-mail, .nav-toggle { width: 40px; height: 40px; }
}

@media (max-width: 600px) { .kalender-frame { padding: .4rem; border-radius: var(--radius-sm); } .kalender-frame-wrap, .page-kalender .container-wide { padding-left: .6rem; padding-right: .6rem; } }

/* ---------- Startseite im SportCourt-Design (29.10.2026) ---------- */
.page-land .hero-land .hero-bg { opacity: .3; filter: saturate(.85); transform: scale(1.06); animation: slow-zoom 24s ease-in-out infinite alternate; }
.page-land .hero-land .hero-bg::after {
  background:
    radial-gradient(70% 60% at 30% 40%, rgba(12,18,21,.15) 0%, rgba(12,18,21,.65) 70%),
    linear-gradient(180deg, rgba(12,18,21,.35) 0%, rgba(12,18,21,.6) 60%, var(--bg) 100%);
}
.page-land .hero-land .lede { color: #C9D6DD; }
.page-land .hero-land .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.page-land .float-stack::before {
  content: ""; position: absolute; inset: -12%; z-index: 0;
  background: var(--splash-orange) center/contain no-repeat;
  opacity: .32;
  animation: splash-turn 50s linear infinite;
}
.page-land .float-card { z-index: 1; border-color: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 70px rgba(102,168,210,.18), 0 30px 70px rgba(0,0,0,.55); }
.page-land .tile { background: rgba(255,255,255,.045); border-color: var(--line); }
.page-land .tile-court { background: #0A1013; }
.page-land .tile-skater .tile-bg::after { display: none; }
.page-land .tile:not(.tile-court):not(.tile-verein):not(.tile-club)::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--neon-pink); box-shadow: 0 0 22px var(--neon-pink); }
.page-land .tile-skater::after { background: var(--neon-orange) !important; box-shadow: 0 0 22px var(--neon-orange) !important; }
.page-land .kennzahlen ul { background: rgba(255,255,255,.04); }
.page-land .kennzahlen li:nth-child(1) .kz-n { color: var(--accent); }
.page-land .kennzahlen li:nth-child(2) .kz-n { color: var(--neon-pink); }
.page-land .kennzahlen li:nth-child(3) .kz-n { color: var(--neon-orange); }
.page-land .kennzahlen li:nth-child(4) .kz-n { color: var(--neon-green); }
.page-land .kennzahlen .kz-n { text-shadow: 0 0 24px currentColor; }
@media (prefers-reduced-motion: reduce) { .page-land .float-stack::before, .page-land .hero-land .hero-bg { animation: none; } }
.page-land .hero-land h1.h1-land { font-size: clamp(2rem, 3.9vw, 3.3rem); line-height: 1.08; font-weight: 800; }
.page-land .h1-land .gold { color: #F6B400; }

/* Praeambel als Brief mit Fueller (30.10.2026): schwarzes, leicht
   metallisch schimmerndes Papier, weisse Tinte, Handschrift nur aus Systemschriften (Mac und iOS:
   Bradley Hand, Windows: Segoe Script, sonst Lucida Handwriting oder cursive). Apple Chancery
   ist seit 30.10.2026 heraus, sie war zu verschnoerkelt (Weisung). Die Linien
   haengen an der Zeilenhoehe des Absatzes, deshalb beides in em. */
[data-theme] .quote.quote-tinte {
  --tinte: #F4F6F7;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.07) 46%, transparent 54% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #24282B 0%, #0B0D0E 34%, #17191B 58%, #050607 82%, #1C1F21 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--tinte);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-left: clamp(2.6rem, 6vw, 4.6rem);
  font-family: "Bradley Hand", "Segoe Script", "Lucida Handwriting", cursive;
  font-size: clamp(.95rem, 1.47vw, 1.1rem);
  font-weight: 400;
  text-wrap: pretty;
}
.quote.quote-tinte::before { content: none; }
.quote.quote-tinte h2 {
  margin: 0 0 .9em; font: inherit; font-size: 1.7em; line-height: 1.25;
  color: #fff; text-shadow: 0 0 .6px rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.6);
}
.quote.quote-tinte blockquote { margin: 0; }
.quote.quote-tinte::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: clamp(1.7rem, 4.4vw, 3.4rem); width: 1px;
  background: rgba(255, 255, 255, .16);
}
.quote.quote-tinte p {
  margin: 0;
  line-height: 2em;
  background-image: linear-gradient(transparent calc(2em - 1px), rgba(255, 255, 255, .09) calc(2em - 1px));
  background-size: 100% 2em;
  background-position: 0 -.5em;
  text-shadow: 0 0 .6px rgba(255, 255, 255, .5), 0 1px 0 rgba(0, 0, 0, .6);
}

/* Projektkarte "Ein gemeinsames Projekt von" (30.10.2026): die drei Logos
   springen nacheinander auf, darunter zieht sich ein Band von Logo zu Logo,
   an dem ein Lichtpunkt entlangwandert. Danach das Video (Zwei-Klick). */
.partner-card .partner-logos { margin-bottom: .2rem; }
.partner-card .pl { box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.pl-band { position: relative; display: block; height: 18px; margin: 0 0 .9rem; }
.pl-band::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-hellblau), var(--neon-pink), var(--neon-orange));
  box-shadow: 0 0 12px rgba(255, 79, 163, .45);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--ease-out) .55s;
}
.pl-band i {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #0A0F11; border: 2px solid var(--c-hellblau);
  opacity: 0; transition: opacity 300ms ease;
}
.pl-band i:nth-child(1) { left: 16.66%; transition-delay: .55s; }
.pl-band i:nth-child(2) { left: 50%; border-color: var(--neon-pink); transition-delay: 1.05s; }
.pl-band i:nth-child(3) { left: 83.33%; border-color: var(--neon-orange); transition-delay: 1.55s; }
.pl-band::after {
  content: ""; position: absolute; top: 50%; left: 16.66%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px var(--neon-pink);
  opacity: 0;
}
.pl-band.in::before { transform: scaleX(1); }
.pl-band.in i { opacity: 1; }
.pl-band.in::after { animation: pl-lauf 3.6s ease-in-out 2s infinite; }
@keyframes pl-lauf {
  0% { left: 16.66%; opacity: 0; }
  10% { opacity: 1; }
  45% { left: 83.33%; opacity: 1; }
  55% { left: 83.33%; opacity: 0; }
  100% { left: 83.33%; opacity: 0; }
}
.yt-klein { margin-top: 1.1rem; border-radius: var(--radius-sm); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.yt-klein .yt-play { width: 64px; height: 64px; }
.yt-klein .yt-play svg { width: 26px; height: 26px; }
.yt-klein .yt-cover { gap: .7rem; padding: 1rem; }
.yt-klein .yt-cover p { font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
  .pl-band::before, .pl-band i { transition: none; }
  .pl-band.in::after { animation: none; }
}
html:not(.js) .pl-band::before { transform: scaleX(1); }
html:not(.js) .pl-band i { opacity: 1; }

/* Sponsorenvideos direkt in den Karten (30.10.2026), weiter mit Zwei-Klick.
   Shorts stehen hochkant und bleiben schmal. */
.yt-fig { margin: .9rem 0 0; }
.yt-fig figcaption { font-size: .8rem; line-height: 1.4; color: var(--ink-soft); margin-top: .45rem; }
.yt.yt-hoch { aspect-ratio: 9 / 16; }
.yt-fig-hoch { max-width: 220px; }
.yt-hoch .yt-cover p { font-size: .75rem; }
.yt-reihe { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.yt-reihe .yt-fig-hoch { max-width: none; }
@media (max-width: 760px) {
  .yt-reihe { grid-template-columns: minmax(0, 1fr); }
  .yt-reihe .yt-fig-hoch { max-width: 220px; }
}

/* Stimmen zum SportCourt (30.10.2026): links Zitate aus der Pressekonferenz,
   rechts die Shorts im Wechsel. Folien liegen uebereinander im selben
   Rasterfeld; die aktive gleitet von rechts herein, die alte nach links. */
.stimmen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.slider { display: flex; flex-direction: column; gap: 1rem; }
.sl-kopf { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-hellblau); }
.sl-track { display: grid; flex: 1; }
.slide {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(48px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), visibility 0s linear 700ms;
}
.slide.ist { opacity: 1; visibility: visible; transform: none; transition: opacity 600ms var(--ease-out) 120ms, transform 700ms var(--ease-out) 120ms, visibility 0s; }
.slide.war { transform: translateX(-48px); }
.slider.rueck .slide:not(.ist):not(.war) { transform: translateX(-48px); }
.slider.rueck .slide.war { transform: translateX(48px); }
html:not(.js) .slide:first-child { opacity: 1; visibility: visible; transform: none; }

.zitat { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.zitat p { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: #EEF3F6; text-wrap: pretty; }
.zitat footer { display: flex; flex-direction: column; gap: .15rem; padding-left: .9rem; border-left: 3px solid var(--neon-pink); }
.zitat footer strong { font-size: 1.05rem; }
.zitat footer span { font-size: .88rem; color: var(--ink-soft); }
.sl-zitate { position: relative; }
.sl-zitate::before {
  content: "\201E"; position: absolute; right: 1.4rem; top: .2rem;
  font-size: 9rem; line-height: 1; font-weight: 800; color: var(--neon-pink); opacity: .14; pointer-events: none;
}
.sl-hinweis { margin: 0; font-size: .75rem; color: var(--ink-soft); }

.sl-nav { display: flex; align-items: center; gap: .8rem; }
.sl-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.04); color: #EEF3F6; display: grid; place-items: center; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.sl-nav button svg { width: 20px; height: 20px; }
.sl-nav button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .sl-nav button:hover { background: rgba(255,255,255,.1); border-color: var(--c-hellblau); } }
.sl-dots { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.sl-dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); transition: width 300ms var(--ease-out), background-color 300ms ease; }
.sl-dots i.an { width: 22px; background: var(--neon-pink); }
.sl-shorts .sl-dots i.an { background: var(--c-hellblau); }

.short { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.short .yt { width: 100%; max-width: 280px; }
.short .yt-cover { background-size: cover; background-position: center; }
.short .yt-cover::before { background: linear-gradient(180deg, rgba(10,15,17,0) 45%, rgba(10,15,17,.6)); }
.short figcaption { text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.short figcaption strong { font-size: 1.05rem; }
.short figcaption span { font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 900px) { .stimmen { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .slide, .slide.ist { transition: none; transform: none; } }

/* Club100: Stand der Spendentafel (30.10.2026). 140 Felder = 35.000 EUR
   Ziel bei 250 EUR je Feld; vergebene Felder leuchten nacheinander auf. */
.club-stand {
  --mark: var(--c-hellblau);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.14);
}
.cs-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.cs-titel { margin: 0 0 .35rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.cs-text { margin: 0; color: var(--ink-soft); }
.cs-summe {
  margin: 0; text-align: right; line-height: 1;
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 30px rgba(102,168,210,.5);
}
.cs-summe small { display: block; margin-top: .4rem; font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); text-shadow: none; }
.club-stand .meter-bar { margin-top: 1.2rem; }
.cs-felder { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 5px; margin-top: 1.3rem; }
@media (max-width: 1000px) { .cs-felder { grid-template-columns: repeat(20, minmax(0, 1fr)); } }
.cs-felder i { aspect-ratio: 1; border-radius: 4px; border: 1px dashed rgba(255,255,255,.3); }
.cs-felder i.v {
  border: 0; background: linear-gradient(145deg, #A9D3EE, #66A8D2);
  box-shadow: 0 0 10px rgba(102,168,210,.45);
  opacity: 0; transition: opacity 420ms ease calc(var(--i, 0) * 14ms + 300ms);
}
.club-stand.in .cs-felder i.v { opacity: 1; }
.cs-fuss { margin: 1rem 0 0; color: var(--ink-soft); }
.cs-fuss strong { color: #fff; }
@media (max-width: 700px) {
  .cs-felder { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
  .cs-summe { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .cs-felder i.v { transition: none; } }

/* Startseite: fuenf Kennzahlen (30.10.2026) */
.page-land .kennzahlen ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.page-land .kennzahlen li { padding-inline: clamp(.9rem, 1.8vw, 1.4rem); }
.page-land .kennzahlen .kz-n { font-size: clamp(1.45rem, 2.3vw, 2.1rem); white-space: nowrap; }
.page-land .kennzahlen li:nth-child(5) .kz-n { color: var(--neon-yellow); }
@media (max-width: 1000px) {
  .page-land .kennzahlen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-land .kennzahlen li { border-left: 1px solid var(--line); }
  .page-land .kennzahlen li:nth-child(odd) { border-left: 0; }
  .page-land .kennzahlen li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .page-land .kennzahlen li:last-child { grid-column: 1 / -1; }
  .page-land .kennzahlen .kz-n { font-size: clamp(1.5rem, 5vw, 2.3rem); }
}

/* Startseite: Kacheln in den Farben der Zielseiten, Logos bewegt wie in
   den Kopfbereichen (30.10.2026). SportCourt dunkel mit Hellblau und
   Farbspritzer, Foerderverein Petrol mit Ringen und Punkten, Club100 im
   Tafel-Petrol, Skaterton dunkel mit Orange, Buchung Hellblau, Spenden
   Petrol. Nur transform und opacity werden animiert. */
.page-land .tile.tile-court { background: radial-gradient(70% 60% at 50% 55%, rgba(102,168,210,.2), transparent 70%), #0A1013; border-color: rgba(102,168,210,.28); }
.page-land .tile.tile-verein { background: linear-gradient(160deg, #1E6078 0%, #0E3944 100%); border-color: rgba(255,255,255,.1); }
.page-land .tile.tile-club { background: linear-gradient(160deg, #0B5B70 0%, #013E4E 100%); border-color: rgba(255,255,255,.1); }
.page-land .tile.tile-skater { background: radial-gradient(75% 70% at 85% 85%, rgba(255,138,61,.24), transparent 65%), #0F1214; }
.page-land .tile.tile-buchung { background: radial-gradient(80% 70% at 90% 0%, rgba(102,168,210,.18), transparent 60%), #0A1013; }
.page-land .tile.tile-buchung::after { background: var(--c-hellblau) !important; box-shadow: 0 0 22px var(--c-hellblau) !important; }
.page-land .tile.tile-spende { background: linear-gradient(160deg, #1E6078 0%, #0E3944 100%); border-color: rgba(255,255,255,.1); }
.page-land .tile.tile-spende::after { background: #F6B400 !important; box-shadow: 0 0 22px rgba(246,180,0,.7) !important; }
.page-land .tile-verein .muted, .page-land .tile-club .muted, .page-land .tile-spende .muted { color: #C9DCE1; }
.page-land .tile-verein .dots { z-index: 0; }

.tm-court, .tm-verein, .tm-club { isolation: isolate; }
.tm-ring {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 200px; aspect-ratio: 1; border-radius: 22%;
  border: 1.5px solid rgba(255,255,255,.35);
  transform: translate(-50%, -50%);
  animation: ring-court 6s ease-out infinite; pointer-events: none;
}
.tm-ring:nth-child(2) { animation-delay: 2s; border-color: var(--c-hellblau); }
.tm-ring:nth-child(3) { animation-delay: 4s; border-color: #9ED0F0; }
.tm-court::before {
  content: ""; position: absolute; inset: -4% 20%; z-index: -2;
  background: var(--splash-orange) center/contain no-repeat;
  opacity: .22; animation: splash-turn 40s linear infinite;
}
.tm-court .tile-media-white { animation: float-b 8s ease-in-out infinite; box-shadow: 0 20px 50px rgba(0,0,0,.5); }

.tm-verein .tm-ring { width: 210px; border-radius: 50%; animation-name: ring; }
.tm-verein .tm-ring:nth-child(1) { border-color: rgba(255,255,255,.4); }
.tm-verein .tm-ring:nth-child(2) { border-color: var(--c-gelb); }
.tm-verein .tm-ring:nth-child(3) { border-color: var(--c-gruen); }
.tm-verein .tile-media-white { animation: float-a 8s ease-in-out infinite; box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 0 70px rgba(246,180,0,.22); }

.tm-club .tm-float { display: block; animation: float-c 9s ease-in-out infinite; }
.tm-club .tm-float img { border-radius: var(--radius-sm); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.tm-club .tm-glow {
  position: absolute; inset: 10% 15%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(126,180,60,.35) 0%, transparent 65%);
  animation: tm-puls 5s ease-in-out infinite;
}
@keyframes tm-puls { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

.page-land .tile-skater .tile-bg { animation: skate-schwung 7s ease-in-out infinite; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,138,61,.25); }
@keyframes skate-schwung { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
  .tm-ring, .tm-court::before, .tm-court .tile-media-white, .tm-verein .tile-media-white,
  .tm-club .tm-float, .tm-club .tm-glow, .page-land .tile-skater .tile-bg { animation: none; }
  .tm-ring { opacity: 0; }
}

/* Club100 als dritter Zaehler auf der SportCourt-Seite (30.10.2026) */
.meter-club { border-color: rgba(126,180,60,.35); background: linear-gradient(120deg, rgba(126,180,60,.12), rgba(102,168,210,.06)); }
.cs-felder.cs-klein { gap: 3px; margin-top: 1rem; }
.cs-felder.cs-klein i { border-radius: 3px; }
.cs-felder.cs-klein i.v { background: linear-gradient(145deg, #B5DA85, #7EB43C); box-shadow: 0 0 8px rgba(126,180,60,.45); }
.meter-club.in .cs-felder i.v { opacity: 1; }

/* Startseite: untere Kacheln zu viert nebeneinander (30.10.2026) */
.page-land .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.page-land .tile-3 { grid-column: span 6; }
.page-land .tile-2 { grid-column: span 3; min-height: 300px; }
.page-land .tile-2 h2 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.page-land .tile-skater { padding-right: clamp(1.3rem, 2.6vw, 2rem); }
.page-land .tile-skater .tile-bg { width: 46%; inset: auto -10% -16% auto; }
.page-land .tile-skater .muted { max-width: 58%; }
.page-land .tile-spende .flex { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .8rem; align-items: end; }
.page-land .tile-spende .flex img { width: 100% !important; max-width: none !important; height: auto !important; }
.page-land .tile-buchung .btn-row { flex-direction: column; align-items: stretch; }
.page-land .tile-buchung .btn { white-space: normal; justify-content: center; text-align: center; }
@media (max-width: 1100px) { .page-land .tile-2 { grid-column: span 6; } }
@media (max-width: 600px) { .page-land .tile-2, .page-land .tile-3 { grid-column: span 12; } }

/* Startseite: Kacheln skalieren ihren Inhalt im festen Verhaeltnis zur
   eigenen Breite (30.10.2026). Jede Kachel ist ein Container, Schrift,
   Abstaende, Pfeil, Logos und Ringe stehen in cqw (1 cqw = 1 % der
   Kachelbreite). So schrumpft und waechst alles 1:1 mit, auch beim Zoomen,
   statt sich zu ueberlappen. */
.page-land .tile { container-type: inline-size; }
/* Padding in Prozent bezieht sich auf die Breite der Kachel selbst; cqw
   wirkt erst bei den Kindern, an der Kachel selbst nicht. */
.page-land .tile-3 { padding: 5.4%; gap: 0; min-height: 0; aspect-ratio: 10 / 7; }
.page-land .tile-3 h2 { font-size: 4.3cqw; line-height: 1.12; }
.page-land .tile-3 .muted { font-size: 2.7cqw; }
.page-land .tile-3 .tile-arrow { width: 7.2cqw; height: 7.2cqw; }
.page-land .tile-3 .tile-media img { max-height: 37cqw; }
.page-land .tile-3 .tile-media-white { padding: 2.6cqw; }
.page-land .tile-3 .tm-ring { width: 36cqw; }

.page-land .tile-2 { padding: 9%; gap: 0; min-height: 0; aspect-ratio: 10 / 12.5; }
.page-land .tile .tile-head + * { margin-top: 3cqw; }
.page-land .tile-2 h2 { font-size: 7.6cqw; line-height: 1.12; }
.page-land .tile-2 .muted { font-size: 5cqw; }
.page-land .tile-2 .tile-arrow { width: 13cqw; height: 13cqw; }
.page-land .tile-arrow svg { width: 42%; height: 42%; }
.page-land .tile-club .tm-float img { max-height: none; width: 84cqw; }
.page-land .tile-skater .tile-bg { width: 50%; }
.page-land .tile-buchung .btn { font-size: 4.6cqw; padding: .75em 1em; }
.page-land .tile-buchung .btn svg { width: 1em; height: 1em; }
.page-land .tile-spende .flex { gap: 4cqw; }
.page-land .tile-spende .flex a { display: block; min-width: 0; }
.page-land .tile-spende .flex img { display: block; }

/* Zwei Spalten (601 bis 1100 px): alle Kacheln gleich breit, also ein
   gemeinsames Mass fuer alle */
@media (min-width: 601px) and (max-width: 1100px) {
  .page-land .tile-3, .page-land .tile-2 { padding: 7%; aspect-ratio: 1 / 1; }
  .page-land .tile-3 h2, .page-land .tile-2 h2 { font-size: 6.4cqw; }
  .page-land .tile-3 .muted, .page-land .tile-2 .muted { font-size: 4cqw; }
  .page-land .tile-3 .tile-arrow, .page-land .tile-2 .tile-arrow { width: 11cqw; height: 11cqw; }
  .page-land .tile-3 .tile-media img { max-height: 50cqw; }
  .page-land .tile-3 .tm-ring { width: 52cqw; }
  .page-land .tile-club .tm-float img { width: 74cqw; }
  .page-land .tile-buchung .btn { font-size: 4cqw; }
}

/* Handy: eine Kachel pro Reihe, die grossen Kacheln bekommen die
   Verhaeltnisse der kleinen, damit die Schrift lesbar bleibt */
@media (max-width: 600px) {
  .page-land .tile-3 { padding: 7%; aspect-ratio: auto; }
  .page-land .tile-3 h2 { font-size: 6.6cqw; }
  .page-land .tile-3 .muted { font-size: 4.4cqw; }
  .page-land .tile-3 .tile-arrow { width: 11cqw; height: 11cqw; }
  .page-land .tile-3 .tile-media img { max-height: 52cqw; }
  .page-land .tile-3 .tm-ring { width: 54cqw; }
  .page-land .tile-2 { padding: 7%; aspect-ratio: auto; }
  .page-land .tile-2 h2 { font-size: 6.6cqw; }
  .page-land .tile-2 .muted { font-size: 4.4cqw; }
  .page-land .tile-2 .tile-arrow { width: 11cqw; height: 11cqw; }
  .page-land .tile-skater { aspect-ratio: 4 / 3; }
  .page-land .tile-buchung .btn { font-size: 4cqw; }
}

/* Schwarze Kopfleiste wie beim Club100 auf Foerderverein, Skaterton und
   Aktuelles (30.10.2026). Die Farbwerte gelten nur innerhalb des Kopfes,
   damit Schrift, Symbole und das Handymenue hell auf Schwarz stehen. */
/* (ersetzt durch die einheitliche Kopfleiste weiter unten) */
.kopf-schwarz .site-head::before { background: rgba(12, 18, 21, .94); }

/* Aktuelles: kleine Bildreihe innerhalb eines Beitrags (30.10.2026) */
.post-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .9rem 0; }
.post-galerie a { aspect-ratio: 4 / 3; }
.post-galerie a img { height: 100%; object-fit: cover; }

/* Avacon-Hinweis als kleine Ueberschrift oben links im Kopfbereich von
   Foerderverein, Skaterton, Aktuelles und Club100 (30.10.2026), auf dem
   Hintergrund der jeweiligen Seite. */
.powered-mini {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
  color: var(--ink-soft); text-decoration: none;
  font-size: .82rem; letter-spacing: .03em;
}
.powered-mini img { height: 26px; width: auto; background: #fff; border-radius: 6px; padding: .15rem .45rem; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .powered-mini:hover { color: var(--ink); } .powered-mini:hover img { transform: translateY(-1px); } }

/* Foerderverein: Knoepfe in den Logofarben statt Gelb (30.10.2026).
   Rahmen als Verlauf durch alle fuenf Logofarben (Gruen, Blau, Rot, Lila,
   Gelb) wie die Figuren im Logo, innen dunkles Petrol mit weisser Schrift. */
[data-theme="verein"] { --glow: rgba(132, 30, 120, .35); }
[data-theme="verein"] .btn {
  color: #fff;
  border: 2px solid transparent;
  background:
    linear-gradient(#123F4C, #123F4C) padding-box,
    linear-gradient(90deg, var(--c-gruen), var(--c-blau) 28%, var(--c-rot) 52%, var(--c-lila) 76%, var(--c-gelb)) border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="verein"] .btn:not(.btn-ghost):not(.btn-soft):hover {
    background:
      linear-gradient(#174B5A, #174B5A) padding-box,
      linear-gradient(90deg, var(--c-gruen), var(--c-blau) 28%, var(--c-rot) 52%, var(--c-lila) 76%, var(--c-gelb)) border-box;
    box-shadow: 0 10px 30px rgba(132, 30, 120, .35), 0 0 0 1px rgba(255,255,255,.06);
  }
}
[data-theme="verein"] .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: none; }
[data-theme="verein"] .btn-ghost:hover { background: var(--surface); }
[data-theme="verein"] .btn-soft { background: rgba(255, 255, 255, .09); color: var(--ink); border: 1.5px solid transparent; box-shadow: none; }

/* Club100: Stand der Spendentafel kleiner und unter der Tafel im dunklen
   Bereich (30.10.2026) */
.page-club #stand { background: #0C1215; padding-top: clamp(2.5rem, 5vw, 4rem); }
.page-club .club-stand { max-width: 760px; margin-inline: auto; padding: clamp(1.1rem, 2.4vw, 1.6rem); background: linear-gradient(160deg, rgba(102,168,210,.1), rgba(255,255,255,.02)); }
.page-club .cs-titel { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.page-club .cs-text, .page-club .cs-fuss { font-size: .88rem; }
.page-club .cs-summe { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-club .club-stand .meter-bar { margin-top: .9rem; }
.page-club .cs-felder { gap: 3px; margin-top: 1rem; }
.page-club .cs-felder i { border-radius: 3px; }
/* ... farblich wie der Club100-Zaehler auf der SportCourt-Seite (Gruen) */
.page-club .club-stand { --mark: var(--neon-green); border-color: rgba(126,180,60,.35); background: linear-gradient(120deg, rgba(126,180,60,.12), rgba(102,168,210,.06)); }
.page-club .cs-summe { color: var(--neon-green); text-shadow: 0 0 30px rgba(126,180,60,.5); }
.page-club .cs-felder i.v { background: linear-gradient(145deg, #B5DA85, #7EB43C); box-shadow: 0 0 8px rgba(126,180,60,.45); }

/* Foerderverein: Gruendungszitat als Brief in Handschrift wie die Praeambel
   auf der SportCourt-Seite (30.10.2026) */
.quote.quote-tinte footer { margin-top: 1em; font-size: .92em; color: rgba(244, 246, 247, .72); text-shadow: none; }
.split .quote.quote-tinte { align-self: center; }

/* Kopf: Logo und Name auf allen Seiten gleich gross wie beim Foerderverein
   (30.10.2026); der SportCourt-Kopf nutzt dieselbe Schrift wie die Vereins-
   seiten, sonst wirkt der Name groesser. */
.brand-court img { width: 44px; height: 44px; border-radius: 9px; }
.site-head { font-family: "Avenir Next", "Segoe UI", Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media (max-width: 900px) { .brand-court img { width: 38px; height: 38px; } }

/* ================= Einheitliche Kopfleiste (30.10.2026) =================
   Alle Seiten bekommen die Leiste der Club100-Seite: gleiche Hoehe, Schrift,
   Farben und Abstaende. Beim Seitenwechsel aendern sich nur Logo und Name
   (sanftes Einblenden) und der markierte Menuepunkt (Pille waechst auf).
   Die Farbwerte gelten nur im Kopf, damit sie auf hellen Seiten wie dem
   Impressum genauso aussehen. */
.site-head {
  --bg: #0C1215; --ink: #EEF3F6; --ink-soft: #A1B0B8;
  --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.22);
  --surface: rgba(255,255,255,.05); --accent: #66A8D2; --accent-ink: #0C1215;
  --accent-soft: rgba(102,168,210,.16);
  color: var(--ink);
}
.site-head::before, .kopf-schwarz .site-head::before { background: rgba(12, 18, 21, .92); }
.brand-stripe { display: none; }
.site-head .brand { gap: .75rem; }
.site-head .brand img { width: 44px; height: 44px; }
.site-head .brand-text { font-size: .98rem; }
.site-head .brand-text small { font-size: .78rem; }

/* markierter Menuepunkt: Pille als eigene Ebene, die beim Laden aufwaechst */
.nav-links a { position: relative; }
.nav-links a[aria-current="page"] { background: transparent; color: var(--ink); }
.nav-links a[aria-current="page"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 999px; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(102,168,210,.28);
  animation: nav-aktiv 520ms var(--ease-out) both;
}
@keyframes nav-aktiv { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.nav-links { isolation: isolate; }

/* Logo und Name blenden beim Seitenwechsel ein */
.site-head .brand img { animation: brand-logo 520ms var(--ease-out) backwards; }
.site-head .brand-text { animation: brand-text 520ms var(--ease-out) 80ms backwards; }
@keyframes brand-logo { from { opacity: 0; transform: scale(.8) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes brand-text { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .site-head .brand img { width: 38px; height: 38px; }
  .site-head .brand-text { font-size: .86rem; }
  .site-head .brand-text small { font-size: .72rem; }
  .nav-links a[aria-current="page"]::before { inset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a[aria-current="page"]::before, .site-head .brand img, .site-head .brand-text { animation: none; }
}

/* Skaterton: buntes Neon-Design wie beim SportCourt, ohne Gelb
   (30.10.2026). Akzent Neon-Pink, dazu Orange, Hellblau und Gruen. */
.page-skater { --accent: #FF4FA3; --accent-2: #FF8A3D; --accent-soft: rgba(255,79,163,.16); --glow: rgba(255,79,163,.3); }
.page-skater .hero {
  background:
    radial-gradient(45% 60% at 85% 40%, rgba(255,79,163,.2), transparent 70%),
    radial-gradient(40% 55% at 5% 95%, rgba(102,168,210,.16), transparent 70%),
    radial-gradient(35% 45% at 55% 0%, rgba(126,180,60,.12), transparent 70%);
}
.skater-neon {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,79,163,.35));
}
.page-skater .h1-court .w-dark { color: #EEF3F6; }

/* Flyer rechts: schwebt, dahinter dreht sich ein Farbspritzer, Neon-Rahmen
   laufen nach aussen, wie die Logos auf SportCourt- und Vereinsseite */
.skater-art { position: relative; display: grid; place-items: center; isolation: isolate; min-height: 420px; }
.skater-art::before {
  content: ""; position: absolute; z-index: -2; width: 135%; aspect-ratio: 1;
  background: var(--splash-orange) center/contain no-repeat;
  opacity: .32; animation: splash-turn 40s linear infinite;
}
.skater-art .ring {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(330px, 74%); aspect-ratio: 412 / 583; border-radius: 16px;
  border: 1.5px solid var(--neon-pink); transform: translate(-50%, -50%);
  animation: ring-court 6s ease-out infinite; pointer-events: none;
}
.skater-art .ring:nth-child(2) { animation-delay: 2s; border-color: var(--neon-orange); }
.skater-art .ring:nth-child(3) { animation-delay: 4s; border-color: var(--c-hellblau); }
.skater-flyer {
  display: block; width: min(330px, 74%); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 50px rgba(255,79,163,.32);
  animation: float-b 8s ease-in-out infinite;
}
.dots-skater { z-index: 0; }
.dots-skater i { opacity: .7; box-shadow: 0 0 14px currentColor; }
.dots-skater i:nth-child(1) { background: var(--neon-pink); color: var(--neon-pink); }
.dots-skater i:nth-child(2) { background: var(--c-hellblau); color: var(--c-hellblau); }
.dots-skater i:nth-child(3) { background: var(--neon-orange); color: var(--neon-orange); }
.dots-skater i:nth-child(4) { background: var(--neon-green); color: var(--neon-green); }
.dots-skater i:nth-child(5) { background: var(--neon-pink); color: var(--neon-pink); }
.dots-skater i:nth-child(6) { background: var(--c-hellblau); color: var(--c-hellblau); }

/* Inhalt: Neon-Akzente statt Gelb */
.page-skater .note { border-color: rgba(255,79,163,.45); background: rgba(255,79,163,.08); }
.page-skater .section-alt { background: radial-gradient(60% 80% at 100% 0%, rgba(255,138,61,.1), transparent 70%), var(--bg-2); }
.page-skater .card { border-color: rgba(102,168,210,.3); }
@media (max-width: 900px) { .skater-art { min-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .skater-art::before, .skater-art .ring, .skater-flyer { animation: none; } .skater-art .ring { opacity: 0; } }

/* Aktuelles: Neon-Farben wie beim SportCourt (30.10.2026). Jede Kategorie
   hat eine Farbe: SportCourt Hellblau, Foerderverein Violett, Presse Orange,
   Skaterton Pink, Club100 und Spenden Gruen, Dokumente helles Blau. */
.page-akt { --accent: #FF4FA3; --accent-soft: rgba(255,79,163,.16); --glow: rgba(255,79,163,.3); }
.page-akt .hero {
  background:
    radial-gradient(45% 60% at 82% 35%, rgba(255,79,163,.2), transparent 70%),
    radial-gradient(40% 55% at 5% 95%, rgba(102,168,210,.18), transparent 70%),
    radial-gradient(35% 45% at 50% 0%, rgba(255,138,61,.14), transparent 70%);
}
.akt-neon {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-orange) 55%, var(--c-hellblau));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,79,163,.35));
}
/* Logo-Block 1:1 wie auf der Startseite */
.page-akt .float-stack::before {
  content: ""; position: absolute; inset: -12%; z-index: 0;
  background: var(--splash-orange) center/contain no-repeat;
  opacity: .32; animation: splash-turn 50s linear infinite;
}
.page-akt .float-card { z-index: 1; border-color: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 70px rgba(102,168,210,.18), 0 30px 70px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .page-akt .float-stack::before { animation: none; } }

.kat-court { --kat: #66A8D2; }
.kat-verein { --kat: #A970FF; }
.kat-presse { --kat: #FF8A3D; }
.kat-skater { --kat: #FF4FA3; }
.kat-club, .kat-spenden { --kat: #7EB43C; }
.kat-dok { --kat: #9ED0F0; }
.page-akt .post[class*="kat-"] {
  border-color: color-mix(in srgb, var(--kat) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--kat), 0 0 34px color-mix(in srgb, var(--kat) 14%, transparent), var(--shadow);
}
.page-akt .post .pill[class*="pill-"] {
  color: var(--kat); background: color-mix(in srgb, var(--kat) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kat) 45%, transparent);
}
.page-akt .post h3 { text-wrap: balance; }
.page-akt .channel { transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .page-akt .channel:hover { border-color: rgba(255,79,163,.5); box-shadow: 0 0 26px rgba(255,79,163,.22); }
  .page-akt .post[class*="kat-"]:hover { box-shadow: inset 3px 0 0 var(--kat), 0 0 46px color-mix(in srgb, var(--kat) 24%, transparent), var(--shadow-lg); }
}


/* Logo-Block Startseite und Aktuelles: vierte Karte mit dem Logo der Stadt
   Pattensen, unten links (30.10.2026) */
.float-card.fc-4 { width: 40%; aspect-ratio: 300 / 175; left: 0; bottom: 8%; transform: rotate(4deg); animation: float-d 8.5s ease-in-out infinite; }
@keyframes float-d { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-11px); } }

/* Club100: Logo im Kopf ist die Originalgrafik Club100featAvacon, im
   quadratischen Feld wie die anderen Logos */
.site-head .brand-club img { object-fit: contain; background: #fff; padding: 2px; border-radius: 9px; }

/* Gruendungszitat Foerderverein: Petrol mit Metallic-Schimmer statt Schwarz,
   darunter die Unterschrift von Michael Wahl (30.10.2026). Die Unterschrift
   ist aus dem Original (blau auf weiss) umgefaerbt: weiss auf durchsichtig,
   Original unter nicht-Upload/inhalte/bild-originale/. */
[data-theme] .quote.quote-tinte.tinte-petrol {
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.1) 45%, transparent 55% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #2A6E83 0%, #14495A 32%, #1E5D70 56%, #0C3441 82%, #22647A 100%);
  border-color: rgba(255,255,255,.2);
}
.quote.quote-tinte footer.unterschrift { margin-top: 1.1em; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.unterschrift img { width: 120px; height: auto; margin: -.4rem 0 -.6rem -.4rem; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.unterschrift span { font-size: .72em; line-height: 1.4; opacity: .75; }
/* Club100-Karte so breit wie die Karte der Stadt Pattensen */
.float-card.fc-3 { width: 40%; right: 8%; bottom: 2%; }
/* (30.10.) Untere Karten direkt unter die oberen ruecken, 5 % Ueberlappung.
   cqw = Breite des Blocks, damit die Lage zu den quadratischen oberen
   Karten bei jeder Breite stimmt (oben links endet bei 6 % + 52 cqw,
   oben rechts bei 44 cqw). */
.float-stack { container-type: inline-size; }
/* 31.10.: untere Karten wieder unterhalb der oberen, ohne Ueberlappung nach
   oben; die beiden unteren ueberlappen sich seitlich um 5 % (2 cqw). Der
   Block ist quadratisch, damit alle vier Karten bei jeder Breite Platz haben. */
.float-stack { height: auto; aspect-ratio: 1 / 1.04; }
.float-card.fc-4 { top: calc(6cqw + 57cqw); left: 0; bottom: auto; }
.float-card.fc-3 { top: calc(6cqw + 59cqw); left: 38%; right: auto; bottom: auto; }

/* Foerderverein: Gelb als Leitfarbe ersetzt durch die bunten Logofarben
   (31.10.2026). Akzent fuer Schrift und Symbole ist ein helles Logo-Blau,
   Linien und Kanten laufen durch alle fuenf Logofarben. Gelb bleibt nur als
   eine von fuenf Farben im Verlauf, in Ringen und Punkten. */
[data-theme="verein"] {
  --accent: #5EB6EA;
  --accent-ink: #0B2A33;
  --accent-soft: rgba(94, 182, 234, .16);
  --glow: rgba(132, 30, 120, .3);
}
[data-theme="verein"] .section-head h2::after, [data-theme="verein"] .h-bar::after {
  background: linear-gradient(90deg, var(--c-gruen), var(--c-blau), var(--c-rot), var(--c-lila), var(--c-gelb));
  height: 5px; width: 72px;
}
[data-theme="verein"] .bank {
  border-top: 0;
  background:
    linear-gradient(90deg, var(--c-gruen), var(--c-blau) 25%, var(--c-rot) 50%, var(--c-lila) 75%, var(--c-gelb)) top / 100% 4px no-repeat,
    var(--surface);
}
[data-theme="verein"] .person .role { color: color-mix(in srgb, var(--mark, var(--accent)) 55%, #fff); }
[data-theme="verein"] .person .ini { color: #fff; }
[data-theme="verein"] .hero-verein .hero-logo { box-shadow: 0 0 0 10px rgba(255,255,255,.05), 0 0 90px rgba(132,30,120,.22), 0 0 140px rgba(12,108,162,.18), var(--shadow-lg); }

/* Vorstand und Beirat: jede Person eine eigene Farbe, keine Initialen in
   den Kreisen (31.10.2026) */
.mark-orange { --mark: #FF8A3D; }
.mark-hellblau { --mark: #66A8D2; }
.mark-pink { --mark: #FF4FA3; }
.mark-tuerkis { --mark: #2EC4B6; }
.person .ini { width: 46px; height: 46px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mark) 55%, #fff), var(--mark) 62%); }
.person .role { overflow-wrap: normal; hyphens: auto; }

/* Foerderverein-Kopf: Ueberschrift und Logo um 30 % kleiner (31.10.2026) */
.hero-verein h1 { font-size: clamp(1.55rem, 3.8vw, 3.08rem); }
.hero-verein .hero-logo, .hero-verein .ring { width: clamp(161px, 21vw, 266px); }
.hero-verein .hero-logo { padding: clamp(.85rem, 2.1vw, 1.55rem); }

/* Abstaende straffen (31.10.2026): Abschnittsabstand rund ein Drittel
   kleiner, Kopfbereich unten und oben knapper, Ueberschriften naeher am
   Inhalt. Gilt auf allen Seiten. */
:root { --section: clamp(2.75rem, 6vw, 5rem); }
.hero { padding: calc(var(--header-h) + clamp(1.75rem, 4.5vw, 3.5rem)) 0 clamp(1.5rem, 3.5vw, 2.75rem); }
.section-head { margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem); }
.powered-mini { margin-bottom: clamp(.7rem, 1.8vw, 1.1rem); }

/* Skaterton in Tuerkis statt Pink/Lila, damit sich die Seite von News
   unterscheidet (31.10.2026). Leitfarbe Tuerkis, dazu Neon-Gruen und
   Hellblau, Orange nur noch im Farbspritzer. */
.page-skater { --tuerkis: #2EC4B6; --accent: #2EC4B6; --accent-soft: rgba(46,196,182,.16); --glow: rgba(46,196,182,.3); }
.page-skater .hero {
  background:
    radial-gradient(45% 60% at 85% 40%, rgba(46,196,182,.22), transparent 70%),
    radial-gradient(40% 55% at 5% 95%, rgba(102,168,210,.16), transparent 70%),
    radial-gradient(35% 45% at 55% 0%, rgba(126,180,60,.14), transparent 70%);
}
.page-skater .skater-neon {
  background: linear-gradient(90deg, var(--tuerkis), #7EE0A0 55%, var(--neon-green));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(46,196,182,.4));
}
.page-skater .btn-neon {
  background: linear-gradient(100deg, var(--tuerkis), var(--neon-green));
  color: #08201D;
  box-shadow: 0 0 0 1px rgba(46,196,182,.45), 0 8px 30px rgba(46,196,182,.35);
}
.page-skater .section-head h2::after { background: linear-gradient(90deg, var(--tuerkis), var(--neon-green) 50%, var(--c-hellblau)); }
.page-skater .skater-art .ring { border-color: var(--tuerkis); }
.page-skater .skater-art .ring:nth-child(2) { border-color: var(--neon-green); }
.page-skater .skater-art .ring:nth-child(3) { border-color: var(--c-hellblau); }
.page-skater .skater-flyer { box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 50px rgba(46,196,182,.35); }
.page-skater .dots-skater i:nth-child(1), .page-skater .dots-skater i:nth-child(5) { background: var(--tuerkis); color: var(--tuerkis); }
.page-skater .note { border-color: rgba(46,196,182,.5); background: rgba(46,196,182,.08); }
.page-skater .section-alt { background: radial-gradient(60% 80% at 100% 0%, rgba(46,196,182,.1), transparent 70%), var(--bg-2); }

/* Skaterton-Rueckblick: drei Veranstaltungen als Karten, neueste zuerst
   (31.10.2026) */
.sk-event {
  position: relative; margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radius);
  background: var(--surface); border: 1px solid rgba(46,196,182,.28);
  box-shadow: inset 3px 0 0 var(--tuerkis, #2EC4B6), var(--shadow);
}
.sk-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.sk-nr {
  flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.7rem; font-weight: 800; color: #08201D;
  background: linear-gradient(135deg, #2EC4B6, #7EB43C);
  box-shadow: 0 0 26px rgba(46,196,182,.4);
}
.sk-date { margin: 0; font-size: .85rem; letter-spacing: .04em; color: #7FE3D8; font-weight: 700; }
.sk-head h3 { margin: .15rem 0 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.sk-facts { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.sk-facts li { padding-left: 1.1rem; position: relative; }
.sk-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: #2EC4B6; box-shadow: 0 0 8px #2EC4B6; }
.sk-event .split { align-items: start; }
.sk-media .figure { margin: 0; }
.sk-leer {
  display: grid; place-items: center; min-height: 220px; border-radius: var(--radius-sm);
  border: 1.5px dashed rgba(46,196,182,.4); color: var(--ink-soft); font-size: .9rem;
}
.sk-leer p { margin: 0; }
.page-skater .timeline li::before { background: #2EC4B6; box-shadow: 0 0 10px #2EC4B6; }

/* Skaterton-Rueckblick: Neon-Streckenkarten, Collagen, Instagram-Vorschau */
.sk-media { display: grid; gap: .9rem; }
.sk-karte a { border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px rgba(46,196,182,.25), 0 18px 40px rgba(0,0,0,.45); }
.sk-karte img { width: 100%; height: auto; display: block; }
.sk-foto { border-radius: var(--radius-sm); overflow: hidden; }
.sk-ig { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; color: #fff; text-decoration: none; }
.sk-ig img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.sk-ig span {
  position: absolute; left: .7rem; bottom: .7rem; padding: .35rem .75rem; border-radius: 999px;
  background: rgba(11,17,20,.8); font-size: .82rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(46,196,182,.55);
}

/* Skaterton: Foto-Slider je Veranstaltung (31.10.2026) */
.sk-fotos { gap: .6rem; }
.sk-fotos .sl-track { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: #0B1114; box-shadow: 0 0 0 1px rgba(46,196,182,.25), 0 18px 40px rgba(0,0,0,.45); }
.sk-fotos-hoch .sl-track { aspect-ratio: 3 / 4; max-width: 340px; margin-inline: auto; width: 100%; }
.sk-slide, .sk-slide a { height: 100%; }
.sk-slide a { display: block; }
.sk-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-fotos .sl-dots i.an { background: #2EC4B6; }
.mark-violett { --mark: #A970FF; }

/* Beirat: fuenf Karten nebeneinander, kompakter (31.10.2026) */
.people-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.people-5 .person { grid-template-columns: 1fr; gap: .6rem; padding: 1rem; align-items: start; align-content: start; }
.people-5 .person .ini { width: 34px; height: 34px; }
.people-5 .person .name { font-size: .98rem; }
.people-5 .person .place { font-size: .84rem; }
@media (max-width: 1000px) { .people-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .people-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vorstand: Funktionen einzeilig und gleich hoch, Wohnorte 30 % kleiner
   (31.10.2026) */
.person .role { white-space: nowrap; hyphens: none; font-size: .7rem; letter-spacing: 0; line-height: 1.3; }
.person .place { font-size: .64rem; }
.people-5 .person .place { font-size: .6rem; }
.people:not(.people-5) .person { padding: 1rem 1rem; gap: .75rem; }
.people:not(.people-5) .person .ini { width: 40px; height: 40px; }
.person .role { font-size: .68rem; }
.people:not(.people-5) .person { align-items: start; }

/* Kanaele: Logos in einheitlicher weisser Kachel, Markenfarbe als Leuchtkante
   und Schein, kurze Handles statt langer Adressen (01.11.2026) */
.ch-yt { --brand: #FF0033; }
.ch-fb { --brand: #0866FF; }
.ch-ig { --brand: #E1306C; }
.ch-tt { --brand: #25F4EE; }
.ch-web { --brand: var(--accent); }
.channel { position: relative; overflow: hidden; gap: .9rem; }
.channel::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand, var(--accent)); box-shadow: 0 0 12px var(--brand, var(--accent));
}
.ch-ig::before { background: linear-gradient(180deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); }
.channel img, .channel .ch-icon {
  width: 46px; height: 46px; padding: 6px; border-radius: 12px; background: #fff;
  object-fit: contain; box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
}
.channel .ch-icon { color: #0B1114; font-size: .66rem; }
.ch-tt .ch-icon { background: #0B1114; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(37,244,238,.6); }
.channel .ch-url { font-size: .82rem; }
@media (hover: hover) and (pointer: fine) {
  .channel:hover { border-color: color-mix(in srgb, var(--brand, var(--accent)) 60%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--brand, var(--accent)) 22%, transparent); }
}

/* Hauptsponsor: Logo oben ueber die volle Breite, darunter Text und Videos
   (01.11.2026) */
.sponsor-main .sponsor { flex-direction: column; align-items: stretch; gap: 1.4rem; }
.sponsor-main .sponsor-logo { width: auto; height: clamp(130px, 16vw, 200px); padding: clamp(1rem, 2.5vw, 1.8rem); }
.sponsor-main .sponsor-logo img { max-height: 100%; width: auto; }

/* Medienlogos statt Textkuerzeln in den Verweisen (01.11.2026) */
.doc-icon.doc-logo { background: #fff; padding: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.doc-icon.doc-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

/* News: Hashtags statt Navigationsknoepfen (01.11.2026) */
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.post-tags span {
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; padding: .25rem .65rem; border-radius: 999px;
  color: var(--kat, var(--accent)); background: color-mix(in srgb, var(--kat, var(--accent)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kat, var(--accent)) 35%, transparent);
}
.post-foot:not(:has(.btn)) { justify-content: flex-end; }

/* Pressearchiv als Kartenliste wie bei den News (01.11.2026): Medienlogo,
   Datum und Quelle, Ueberschrift des Artikels, kurze Zusammenfassung */
.presse-liste { display: grid; gap: .7rem; }
.presse-jahr { margin: 1.4rem 0 .2rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.presse-jahr:first-child { margin-top: 0; }
.presse-karte {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
.presse-karte:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .presse-karte:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 0 26px var(--glow); } }
.pk-logo { width: 52px; height: 52px; border-radius: 10px; background: #fff; padding: 5px; display: grid; place-items: center; }
.pk-logo img { width: 100%; height: 100%; object-fit: contain; }
.pk-text { display: grid; gap: .25rem; min-width: 0; }
.pk-meta { font-size: .78rem; color: var(--ink-soft); }
.pk-meta time { font-family: var(--font-mono); }
.pk-text strong { font-size: 1.02rem; line-height: 1.3; text-wrap: pretty; }
.pk-teaser { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }

/* Sieben Menuepunkte (mit Stadt Pattensen, 01.11.2026): zwischen 901 und
   1180 px enger setzen, damit Name und Menue nebeneinander passen */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-links a { padding: .5rem .55rem; font-size: .88rem; }
  .site-head .brand-text small { display: none; }
  .site-head .brand-text { white-space: nowrap; }
}

/* Startseite ohne Gelb (01.11.2026, Weisung): Der Foerderverein ist Petrol.
   Auf dem dunklen Grund ein helles, metallisch verlaufendes Petrol, damit die
   Schrift lesbar bleibt (Kontrast rund 5,5 : 1). Deutlich gruener als das
   SportCourt-Hellblau und dunkler als das Skaterton-Tuerkis. */
.page-land { --petrol-hell: #3E9FB5; }
.page-land .h1-land .gold {
  color: var(--petrol-hell);
  background: linear-gradient(100deg, #B4EAF2 0%, #7FD0DF 45%, #A3E1EC 70%, #6CC4D6 100%); /* 01.11.: deutlich heller, Weisung */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-land .kennzahlen li:nth-child(5) .kz-n { color: var(--petrol-hell); }
.page-land .tile.tile-spende::after { background: var(--petrol-hell) !important; box-shadow: 0 0 22px rgba(62,159,181,.7) !important; }
.page-land .tile-verein .tile-bg { background: radial-gradient(60% 60% at 80% 20%, rgba(62,159,181,.22) 0%, transparent 70%); }
.page-land .tm-verein .tm-ring:nth-child(2) { border-color: var(--petrol-hell); }
.page-land .tm-verein .tile-media-white { box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 0 70px rgba(62,159,181,.28); }
.page-land .dots i:nth-child(5) { background: var(--petrol-hell); }

/* Vereinslogo im Kreis (01.11.2026): freigestelltes PNG auf weissem Kreis.
   Vorher lag das JPG mit rechteckigem weissem Grund im Kreis, die Ecken
   standen ueber den Rand hinaus. Original: Logo_transparent.png */
.logo-rund, .tile-media-white.logo-rund, .page-land .tile-3 .tile-media-white.logo-rund, .post .post-media .logo-rund {
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 50%; background: #fff;
  padding: 12%; overflow: hidden;
}
.logo-rund img { width: 100%; height: 100%; object-fit: contain; }
/* Groesse des Kreises in der Foerderverein-Kachel: etwas kleiner als der
   innere Ring, je Umbruchpunkt wie die Ringe */
.page-land .tile-3 .tile-media-white.logo-rund { width: 33cqw; padding: 3.6cqw; }
@media (min-width: 601px) and (max-width: 1100px) { .page-land .tile-3 .tile-media-white.logo-rund { width: 48cqw; padding: 5cqw; } }
@media (max-width: 600px) { .page-land .tile-3 .tile-media-white.logo-rund { width: 50cqw; padding: 5.4cqw; } }
.page-land .tile-3 .logo-rund img, .post .post-media .logo-rund img { max-height: none; }
.post .post-media .logo-rund { width: min(100%, 220px); margin-inline: auto; }

/* Club100-Ehrentafel (01.11.2026, Weisung): Schriftgroessen haengen nur noch
   an der Feldgroesse, gleich grosse Felder tragen identische Groessen. Die
   Feldgroesse steht fuer den Spendenbetrag, groessere Felder bekommen
   groessere Schrift. Jede Zeile hat eine Rolle: .vn Vorname oder Zusatz,
   .nn Name, .ort Ort; der Ort ist immer duenner und kleiner als der Name.
   Die alten Klassen .f1 bis .f7 gelten nur noch fuer das POWER-Feld und die
   Fusszeile. */
.sq { --vn: 1em; --nn: 1.125em; --ort: max(.7em, 11px); }
.sq.s2 { --vn: 1.125em; --nn: 2em; --ort: max(.85em, 11px); }
.sq.s3 { --vn: 1.125em; --nn: 2em; --ort: max(.85em, 11px); }
.sq.s2.r2 { --vn: 1.5em; --nn: 2.2em; --ort: 1.1em; }
.sq.s3.r2 { --vn: 1.5em; --nn: 2.4em; --ort: 1.1em; }
.sq.s4.r2 { --vn: 2em; --nn: 2.8em; --ort: 1.3em; }
.sq.s5.r2 { --vn: 2em; --nn: 3em; --ort: 1.4em; }
.sq.s5.r4 { --vn: 2.2em; --nn: 3.4em; --ort: 1.5em; }
.sq .vn { font-size: var(--vn); font-weight: 700; }
.sq .nn { font-size: var(--nn); font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.sq .ort { font-size: var(--ort); font-weight: 400; color: rgba(255,255,255,.78); }
/* POWER-Feld: Rechtsform "e.V." kleiner und duenn (01.11.2026) */
.power .ev { font-size: 1.125em; font-weight: 400; color: rgba(255,255,255,.78); }

/* Club100-Ehrentafel: Schrift auf allen Feldern silbermetallic (01.11.2026,
   Weisung), diagonal verlaufend, unten rechts am dunkelsten. Verlauf je Zeile ueber background-clip; der Schatten liegt als
   drop-shadow darunter, ein text-shadow wuerde durch die durchsichtige
   Fuellung scheinen. */
.wall .sq span {
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F3F5 30%, #CDD3D8 62%, #9AA4AC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #D5DADE;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.wall .sq .ort, .wall .sq .ev { opacity: .85; }
/* Ehrentafel: Abstand zwischen erster und zweiter Zeile halbiert
   (01.11.2026, Weisung). Der Abstand ist der Zeilenumbruch, der im
   Flex-Feld eine eigene Leerzeile bildet (Hoehe 1,15em des Feldes). Der
   erste Umbruch entfaellt, statt seiner steht ein halber Abstand; --zeile
   ist registriert, damit 1.15em in der Schrift des Feldes gerechnet wird
   und nicht in der groesseren Schrift der Zeile. POWER-Feld ausgenommen. */
@property --zeile { syntax: '<length>'; inherits: true; initial-value: 0px; }
.wall .sq { --zeile: 1.15em; }
/* Nachtrag 01.11.: erste zu zweiter Zeile noch einmal halbiert (ein
   Viertel der Leerzeile), Abstand vor der duennen Ortszeile halbiert. */
.wall .sq:not(.power) > br:first-of-type { display: none; }
.wall .sq:not(.power) > br:first-of-type + span { margin-top: calc(var(--zeile) / 4); }
.wall .sq:not(.power) > br:has(+ .ort) { display: none; }
.wall .sq:not(.power) > br + span.ort { margin-top: calc(var(--zeile) / 2); }

/* Skaterton-Fotoslider (01.11.2026, Weisung): Fotos nie beschneiden. Das
   Foto steht vollstaendig im Rahmen (contain), die freie Flaeche fuellt eine
   unscharfe, abgedunkelte Kopie desselben Fotos (.sk-bg, gleiche Datei, kein
   zusaetzlicher Abruf). Die Kopie steht im Link hinter dem Foto, damit die
   Bildvergroesserung weiter das erste Bild und seine Beschreibung nimmt. */
.sk-slide a { position: relative; overflow: hidden; isolation: isolate; }
.sk-slide img { object-fit: contain; }
.sk-slide .sk-bg {
  position: absolute; inset: -10%; z-index: -1;
  width: 120%; height: 120%; object-fit: cover;
  filter: blur(24px) brightness(.5) saturate(1.15);
  pointer-events: none;
}
/* Das Foto fuellt genau die Rahmenflaeche; vorher war das Feld hoeher als der
   Rahmen (Hoehe aus dem Bild statt aus dem Seitenverhaeltnis) und wurde
   unten abgeschnitten. */
.sk-fotos .sl-track { position: relative; }
.sk-fotos .sk-slide { position: absolute; inset: 0; }

/* Foerderverein-Kopf (30.10.2026): Die Ringe wuchsen auf das 1,75-Fache des
   Logos und liefen unten aus dem Kopfbereich. Jetzt 1,45-fach, und der
   Logobereich haelt oben und unten so viel Platz frei, wie die Ringe
   ueberstehen (0,225 der Logobreite). Gilt auch fuer das Handy. */
.hero-verein .hero-logo-wrap { --logo-w: clamp(161px, 21vw, 266px); padding-block: calc(var(--logo-w) * .24); }
.hero-verein .ring { animation-name: ring-verein; }
@keyframes ring-verein {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

/* Foerderverein-Kopf: die drei Knoepfe rund 40 % kleiner (30.10.2026).
   Hoehe und Breite auf etwa 60 %; die Schrift nur auf gut 80 %, weil sie
   bei 60 % (rund 10 px) nicht mehr gut lesbar waere. */
.hero-verein .btn-row { gap: .55rem; }
.hero-verein .btn-row .btn { padding: .5rem 1.05rem; font-size: .85rem; border-width: 1.5px; }

/* Beirat mit sechs Personen (30.10.2026): drei in einer Zeile, jede Karte
   aber klein wie bei sechs Spalten (Weisung: Groesse nicht veraendern,
   wieder reduzieren). Feste Hoechstbreite, damit die Karten auch bei
   mittleren Fensterbreiten nicht breit gezogen werden. Handy: zwei. */
/* Breite 30.10.2026 um 30 % erhoeht: 180 auf 234 px (Weisung) */
.people-5.people-6 { grid-template-columns: repeat(3, minmax(0, 234px)); }
@media (max-width: 640px) { .people-5.people-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vorstand (30.10.2026): immer zwei Karten pro Zeile und etwas groesser.
   Auf dem Handy steht der Farbpunkt ueber dem Text, sonst passt die
   Aufgabe "Finanzen/Oeffentlichkeitsarbeit" nicht in die halbe Breite. */
.people-vorstand { grid-template-columns: repeat(2, minmax(0, 330px)); }
.people.people-vorstand .person { padding: 1.25rem 1.3rem; gap: .95rem; }
.people.people-vorstand .person .ini { width: 50px; height: 50px; }
.people-vorstand .person .role { font-size: .8rem; }
.people-vorstand .person .name { font-size: 1.3rem; }
.people-vorstand .person .place { font-size: .78rem; }
@media (max-width: 640px) {
  .people-vorstand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .people.people-vorstand .person { grid-template-columns: 1fr; padding: 1rem; gap: .6rem; }
  .people.people-vorstand .person .ini { width: 38px; height: 38px; }
  .people-vorstand .person .role { white-space: normal; overflow-wrap: anywhere; font-size: .7rem; }
  .people-vorstand .person .name { font-size: 1.05rem; }
  .people-vorstand .person .place { font-size: .7rem; }
}

/* Foerderverein-Kopf (30.10.2026): Abstand zwischen "powered by" und der
   Ueberschrift um 70 % kleiner (vorher rund 129 px, jetzt rund 39 px). Die
   linke Spalte war gegen den hohen Logobereich mittig ausgerichtet; jetzt
   steht sie oben, und das Logo rueckt etwas nach oben, damit es neben dem
   Text bleibt. Die Ringe haben oben weiter Platz. Nur nebeneinander, auf
   dem Handy steht ohnehin alles untereinander. */
@media (min-width: 901px) {
  .hero-verein .split { align-items: start; }
  .hero-verein .hero-logo-wrap { margin-top: -2.5rem; }
}

/* Foerderverein: Fotoslider "Einblicke in die Vereinsarbeit" (30.10.2026).
   Baut auf dem Skaterton-Slider auf (unscharfer Hintergrund, Foto ganz
   sichtbar). Der Satz aus dem Beitrag liegt unten auf einem dunklen Verlauf,
   damit jede Folie gleich hoch bleibt. Klick auf das Foto oeffnet die
   Vergroesserung, die Unterzeile faengt keine Klicks ab. */
.fv-fotos { max-width: 820px; margin-inline: auto; }
.fv-fotos .sl-track { aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.45); }
.fv-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2.6rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(6,18,24,.92), rgba(6,18,24,.7) 55%, transparent);
  color: #fff; font-size: .92rem; line-height: 1.45;
  pointer-events: none;
}
.fv-slide figcaption time { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--c-gelb); margin-bottom: .15rem; }
.fv-fotos .sl-dots i.an { background: var(--c-gelb); }
@media (max-width: 640px) {
  .fv-fotos .sl-track { aspect-ratio: 3 / 4; }
  .fv-slide figcaption { font-size: .84rem; padding: 2.2rem .85rem .75rem; }
}

/* Hauptsponsor-Logo (30.10.2026): Safari loeste max-height:100% im
   Rasterfeld nicht auf und zeigte das Logo auf dem Handy zu gross und
   abgeschnitten. Feste Spur und contain halten es im Kasten. */
.sponsor-main .sponsor-logo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sponsor-main .sponsor-logo img { width: 100%; height: 100%; max-height: none; object-fit: contain; }

/* Videos mit lokal gespeichertem Vorschaubild (30.10.2026). Das Bild liegt
   im Projekt, vor dem Klick geht weiter nichts an YouTube. */
.yt-bild .yt-cover { background-size: cover; background-position: center; }
.yt-bild .yt-cover::before { background: linear-gradient(180deg, rgba(10,15,17,.1) 30%, rgba(10,15,17,.7)); }

/* Sponsorenvideos um 40 % kleiner (30.10.2026). Der Datenschutzhinweis
   passt in die kleinen Fenster nicht mehr; er steht in der Erklaerung. */
.sponsor .yt-fig-hoch { max-width: 132px; }
.sponsor .yt-reihe { max-width: 60%; }
.sponsor .yt-reihe .yt-fig-hoch { max-width: none; }
@media (max-width: 760px) { .sponsor .yt-reihe .yt-fig-hoch { max-width: 132px; } }
.sponsor .yt-cover p { display: none; }
.sponsor .yt-klein .yt-play { width: 44px; height: 44px; box-shadow: 0 0 0 7px rgba(255,255,255,.14), var(--shadow-lg); }
.sponsor .yt-klein .yt-play svg { width: 18px; height: 18px; margin-left: 3px; }

/* Videoslider (30.10.2026): Videos in Hoch-, 4:3- und Breitformat im selben
   Rahmen. Das Video steht in seinem eigenen Seitenverhaeltnis (--ar, Breite
   durch Hoehe) mittig vor dem unscharfen Vorschaubild; die Groesse rechnet
   die Buehne ueber Container-Einheiten aus. Unterzeile unter dem Video,
   damit sie die Bedienelemente von YouTube nicht verdeckt. */
.vid-slider { gap: .6rem; }
.vid-slider .sl-track { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: #0B1114; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.45); }
.vid-slide { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vid-buehne { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: .9rem; overflow: hidden; isolation: isolate; container-type: size; }
.vid-bg { position: absolute; inset: -10%; z-index: -1; width: 120%; height: 120%; object-fit: cover; filter: blur(24px) brightness(.45) saturate(1.15); pointer-events: none; }
.vid-buehne .yt { margin: 0; width: min(100cqw, 100cqh * var(--ar, 1.7778)); height: auto; aspect-ratio: var(--ar, 1.7778); }
.vid-slide figcaption { padding: .7rem 1.1rem .85rem; background: rgba(6,18,24,.94); color: #fff; font-size: .9rem; line-height: 1.45; }
.vid-slide figcaption time { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--vid-akzent, var(--c-hellblau)); margin-bottom: .1rem; }
.vid-slider .sl-dots i.an { background: var(--vid-akzent, var(--c-hellblau)); }
.fv-videos { --vid-akzent: var(--c-gelb); }
.sk-videos { --vid-akzent: #2EC4B6; max-width: 820px; margin-inline: auto; width: 100%; }

/* Foerderverein: Videos rechts neben den Fotos, gleich hoch */
.fv-medien { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.fv-medien .fv-fotos { max-width: none; margin: 0; }
.fv-medien .fv-videos .sl-track { aspect-ratio: auto; min-height: 0; }
@media (max-width: 900px) {
  .fv-medien { grid-template-columns: minmax(0, 1fr); }
  .fv-medien .fv-videos .sl-track { aspect-ratio: 3 / 4; }
}
@media (max-width: 640px) {
  .sk-videos .sl-track { aspect-ratio: 3 / 4; }
  .vid-slide figcaption { font-size: .84rem; padding: .6rem .85rem .75rem; }
}