/* =====================================================================
   Basketball Löwen — site.css
   Layout & components built on top of colors_and_type.css tokens.
   Load order: colors_and_type.css, then site.css.
   ===================================================================== */

/* =====================================================================
   UTILITY-KLASSEN — ersetzen die häufigsten wiederkehrenden Inline-Styles
   (Icon-Größen, Abstände, Flex-Layouts). Werte für Margin/Gap kommen aus der
   --space-Skala in colors_and_type.css (4px-Raster), die vorher definiert,
   aber nirgends benutzt wurde. Bei der Umstellung wurden ein paar krumme
   Inline-Werte (3px/6px/10px/14px) aufs nächste 4px-Raster gerundet — das
   sind maximal 2px Unterschied, site-weit beim Seitencheck mit im Blick behalten.
   ===================================================================== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
/* Für lange Überschriften, die auf Desktop bewusst einzeilig bleiben sollen
   (kein Umbruch mitten im Wort/Satz) — auf Mobil aber normal umbrechen dürfen,
   sonst läuft die Zeile über den Viewport-Rand hinaus. Ersetzt inline
   style="white-space:nowrap" (das die mobile Sicherheitsregel für Hero-H1s
   überstimmen würde, da Inline-Styles immer höchste Priorität haben). */
.nowrap-lg { white-space: nowrap; }
@media (max-width: 599px) {
  .nowrap-lg { white-space: normal; }
}
.block { display: block; }
.hidden { display: none; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
/* Icon-Größen (Lucide-Icons, <i data-lucide>) — exakte, im Repo vorkommende
   Werte, bewusst NICHT aufs Spacing-Raster gerundet (das würde die
   Symbolgröße sichtbar verändern). */
.icon-12 { width: 12px; height: 12px; }
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-22 { width: 22px; height: 22px; }
.icon-26 { width: 26px; height: 26px; }
.icon-28 { width: 28px; height: 28px; }
.icon-30 { width: 30px; height: 30px; }
.icon-32 { width: 32px; height: 32px; }
.icon-36 { width: 36px; height: 36px; }

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--weight-light);
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }
/* Partial-Wrapper dürfen keine eigene Box bilden — sonst bricht position:sticky im
   Header, weil sein Containing Block exakt so hoch wie der Header selbst wäre. */
#site-header-placeholder, #site-footer-placeholder { display: contents; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.no-underline:hover { text-decoration: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 40, 170, 0.15);
  border-color: var(--focus-ring);
}

/* ---------- Layout ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}
.container-narrow { max-width: 900px; }
.container-mid { max-width: 1000px; }
/* position:relative + z-index + deckender Hintergrund: nötig, damit jede Section den
   sticky-gepinnten Hero (.hero-photo, z-index:0) beim Scrollen wirklich überdeckt,
   statt ihn durchscheinen zu lassen. */
.section { padding: 72px 0; position: relative; z-index: 1; background: var(--bg-page); }
.section-sm { padding: 40px 0; position: relative; z-index: 1; background: var(--bg-page); }
.bg-subtle { background: var(--bg-subtle); }
.bg-navy { background: var(--color-brand-navy); color: rgba(255,255,255,.85); }
.bg-gradient-blue { background: var(--gradient-blue); color: #fff; }
.bg-gradient-violet { background: var(--gradient-violet); color: #fff; }
/* Schwarz/Orange-Glow als dunkler Sektionshintergrund abseits von Hero/Footer
   (z.B. "Mehr als Basketball", Vereinsgeschichte) — reduziert die Farbanzahl
   auf der Seite (ersetzt Blau/Violett-Verläufe) und nutzt denselben Verlauf
   wie der Footer, damit dunkle Flächen site-weit konsistent wirken. */
.section-glow-dark {
  background: radial-gradient(140% 620px at 50% 0%, var(--color-footer-glow-bright) 0%, var(--color-brand-orange) 25%, var(--color-footer-glow-deep) 65%, var(--color-footer-glow-end) 100%);
  color: rgba(255,255,255,.78);
}
.section-glow-dark h2 { color: #fff; }
.section-glow-dark .card-label { color: rgba(255,255,255,.85); }
/* Flaches Dunkelnavy/Schwarz ohne Orange-Glow — für dunkle Sektionen, die
   NICHT direkt an den Footer grenzen (der Glow-Effekt markiert dort bewusst
   den Footer-Beginn; mitten auf der Seite wäre er unmotiviert). */
.section-dark { background: var(--color-brand-navy); color: rgba(255,255,255,.78); }
.section-dark h2 { color: #fff; }
/* .t-body/.t-body-lg setzen selbst eine dunkle color (--text-secondary) direkt
   auf dem <p> — das schlägt die geerbte helle color von .section-dark/
   .section-glow-dark, weil ein direkter Treffer Vererbung immer gewinnt,
   unabhängig von der Reihenfolge im Stylesheet. Deshalb hier explizit erneut. */
.section-dark .t-body, .section-dark .t-body-lg,
.section-glow-dark .t-body, .section-glow-dark .t-body-lg { color: rgba(255,255,255,.85); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-brand-navy); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* A11y: visually hide but keep available to screen readers (e.g. labels for
   inputs that already show their purpose via a visible placeholder). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   HEADER — utility bar + main nav
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* -- Utility bar -- */
.utility-bar {
  border-bottom: 1px solid var(--border);
  max-height: 41px; opacity: 1; overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-header.scrolled .utility-bar {
  max-height: 0; opacity: 0; border-bottom-color: transparent;
}
.utility-bar .container {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 24px; height: 40px;
}
.utility-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
}
.utility-link:hover { color: var(--color-brand-orange); text-decoration: none; }
.utility-link .icon-label { display: inline; }
/* Spenden-Herz bewusst in Neongrün statt Marken-Orange — Anspielung auf Thüringen
   als "das grüne Herz Deutschlands". */
.utility-link.emphasis { color: var(--color-heart-green); }
.utility-link.emphasis:hover { color: var(--color-heart-green); opacity: .8; }
/* Für Links, die vorübergehend deaktiviert sind (z.B. Fanshop, Probetraining,
   AGB vor Launch) — Seite bleibt per direkter URL erreichbar, nur der Link ist
   stillgelegt. */
.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.utility-link.is-disabled:hover { color: var(--text-secondary); }

/* -- Main nav -- */
.main-nav-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
}
.brand-lockup { display: flex; align-items: center; gap: 12px; position: relative; }
.brand-logo { height: 44px; width: auto; transition: height var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out); position: relative; z-index: 5; }
.brand-lockup .brand-name {
  font-family: var(--font-base); font-weight: var(--weight-extrabold);
  font-size: 17px; letter-spacing: -.01em; color: var(--text-primary);
  white-space: nowrap; transition: opacity var(--dur-fast) var(--ease-out);
}

/* Logo spannt im Ruhezustand über Utility- und Hauptnav-Leiste, schrumpft beim Scrollen zurück */
@media (min-width: 1024px) {
  .site-header:not(.scrolled) .brand-logo {
    position: absolute; height: 106px; top: -58px; left: 0;
  }
  .site-header:not(.scrolled) .brand-lockup { padding-left: 122px; }
}

.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.nav-item { position: relative; flex-shrink: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 14px; white-space: nowrap;
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"] {
  color: var(--color-brand-orange-text); text-decoration: none;
}
.nav-link .chev { transition: transform var(--dur-fast) var(--ease-out); }
.nav-item.open .nav-link .chev { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav-item.open .dropdown-panel,
.nav-item:hover .dropdown-panel:hover,
.nav-item:focus-within .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-item:hover .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-panel a {
  display: block; padding: 10px 14px; border-radius: var(--radius-md);
  font-size: var(--text-body-sm); font-weight: var(--weight-regular);
  color: var(--text-primary);
}
.dropdown-panel a:hover { background: var(--bg-subtle); color: var(--color-brand-orange); text-decoration: none; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* -- Buttons for header controls (hamburger / mehr) -- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong); background: #fff;
  color: var(--text-primary); cursor: pointer;
}
.icon-btn:hover { border-color: var(--text-primary); }
.more-btn {
  display: none; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong); background: #fff;
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--text-primary); cursor: pointer;
}
.more-btn:hover { border-color: var(--text-primary); }
.hamburger-btn { display: none; }

/* =====================================================================
   NAV DRAWER (mobile + tablet "Mehr")
   ===================================================================== */
.nav-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,18,45,.4);
  z-index: 60; opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out);
}
.nav-drawer-backdrop.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
  background: #fff; z-index: 61; box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out);
  overflow-y: auto; padding: 20px;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nav-drawer-head img { height: 36px; }

.drawer-nav-item { border-bottom: 1px solid var(--border); }
.drawer-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; font-size: var(--text-body); font-weight: var(--weight-semibold);
  color: var(--text-primary); background: none; border: none; width: 100%;
  text-align: left; cursor: pointer;
}
.drawer-sub-panel {
  display: none; padding: 0 0 12px 12px;
}
.drawer-nav-item.open .drawer-sub-panel { display: block; }
.drawer-nav-item.open .drawer-nav-link .chev { transform: rotate(180deg); }
.drawer-sub-panel a {
  display: block; padding: 8px 4px; font-size: var(--text-body-sm);
  color: var(--text-secondary);
}
.drawer-sub-panel a:hover { color: var(--color-brand-orange); text-decoration: none; }

.drawer-utility-section {
  margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--bg-muted);
}
.drawer-utility-section a, .drawer-utility-section button {
  display: block; width: 100%; padding: 10px 4px; font-size: var(--text-body);
  font-weight: var(--weight-medium); color: var(--text-primary);
  background: none; border: none; text-align: left; font-family: inherit; cursor: pointer;
}
.drawer-utility-section a:hover, .drawer-utility-section button:hover { color: var(--color-brand-orange); text-decoration: none; }

.nav-actions .mobile-cta {
  display: none;
  border-color: var(--color-brand-orange-text); color: var(--color-brand-orange-text);
}

/* -- Seitensuche (Panel klappt unter dem Header auf) -- */
#search-toggle-btn[aria-expanded="true"] { border-color: var(--color-brand-orange); color: var(--color-brand-orange); }
.site-search-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
  background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card);
  padding: 16px 0 20px;
}
.site-search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0 8px 0 14px; background: var(--bg-muted);
}
.site-search-input-wrap i { color: var(--text-secondary); flex-shrink: 0; }
.site-search-input-wrap input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--font-base); font-size: var(--text-body); padding: 12px 0;
  color: var(--text-primary);
}
.site-search-results { margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.site-search-result {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.site-search-result:hover, .site-search-result.active { background: var(--bg-muted); text-decoration: none; }
.site-search-result .cat { font-size: var(--text-caption); color: var(--color-brand-orange); font-weight: var(--weight-semibold); flex-shrink: 0; }
.site-search-hint, .site-search-empty { padding: 10px 12px; font-size: var(--text-body-sm); color: var(--text-secondary); }

/* -- Suchergebnisseite (/suche.html) -- */
.search-result-row { display: block; padding: 18px 0; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.search-result-row:hover { text-decoration: none; }
.search-result-row:hover h3 { color: var(--color-brand-orange); }
.search-result-row .card-label { margin-bottom: 4px; }
.search-result-row h3 { font-size: 17px; margin: 0 0 4px; transition: color var(--dur-fast) var(--ease-out); }
.search-result-row p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.nav-actions .mobile-cta:hover { background: var(--color-orange-100); border-color: var(--color-brand-orange); }
body.hide-mobile-cta .nav-actions .mobile-cta { display: none; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-base); font-weight: var(--weight-semibold);
  font-size: 14px; padding: 13px 24px; border-radius: var(--radius-md);
  border: 1.5px solid transparent; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-sm { font-size: 13px; padding: 8px 16px; }
.btn-lg { font-size: 16px; padding: 18px 32px; }
/* Dunkler statt weißer Text: echtes, leuchtendes Marken-Orange als Füllung
   hat mit Weiß zu wenig Kontrast für AA (~3,1:1) — Navy schafft satte 6:1+. */
.btn-primary { background: var(--action-primary); color: var(--color-brand-navy); }
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-ghost { border-color: var(--border-strong); color: var(--text-primary); background: #fff; }
.btn-ghost:hover { border-color: var(--text-primary); }
.btn-ghost-dark { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-outline-orange { border-color: var(--color-brand-orange-text); color: var(--color-brand-orange-text); background: transparent; }
.btn-outline-orange:hover { background: var(--color-orange-50); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); }
.btn-link { background: none; border: none; color: var(--link); padding: 8px 0; }
.btn-link:hover { text-decoration: underline; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   TYPOGRAPHY HELPERS / SIGNATURE
   ===================================================================== */
.eyebrow {
  display: block; font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: 12px; color: var(--color-brand-orange);
  margin-bottom: 8px;
}
.eyebrow.on-dark { color: #fff; }

.kw { position: relative; display: inline-block; color: var(--color-brand-orange); }
/* Handgemalter Pinselstrich-Swoosh (384x41 Rasterbild) statt Vektorform —
   per CSS-Maske statt <img> eingebunden, damit die Form exakt im Marken-
   Orange (--color-brand-orange) erscheint statt im etwas abweichenden
   Orangeton aus der PNG-Datei selbst. Streckt wie zuvor beim Vektor-Swoosh
   auf die volle Breite des gehighlighteten Worts. */
.kw .swoosh {
  position: absolute; left: -1%; bottom: -0.4em; width: 106%; height: .4em;
  background-color: var(--color-brand-orange);
  -webkit-mask-image: url('/assets/icons/loewen-swoosh.webp');
  mask-image: url('/assets/icons/loewen-swoosh.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
}
.section-head .head-text { max-width: 640px; }
.section-head p { margin-top: 8px; }

/* =====================================================================
   CARDS — tiles (team / news / info)
   ===================================================================== */
/* minmax(0, 1fr) statt 1fr — 1fr allein hat eine implizite Mindestgröße von
   "auto" (Inhaltsbreite), wodurch ein breites Kind (z.B. eine Bildergalerie
   mit vielen Fotos) die Spalte und damit die ganze Seite aufreißen kann,
   statt sauber per overflow-x zu scrollen. minmax(0, 1fr) erlaubt der Spalte,
   unter die Inhaltsbreite zu schrumpfen — ohne Effekt, wenn der Inhalt
   ohnehin passt. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* Bleibt in einer 4er-Reihe ein einzelnes letztes Element allein übrig (z.B. Hauptpartner-Grid), wird es zentriert statt linksbündig — gleiche Breite wie die anderen Kacheln, nur die Position wird zentriert. */
#hauptpartner-grid > *:last-child:nth-child(4n+1) { grid-column: 1 / -1; justify-self: center; width: calc(25% - 15px); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: all var(--dur-fast) var(--ease-out);
}
.card.hoverable:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.card-media {
  height: 140px; display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.card-media.tint-blue { background: var(--gradient-blue); }
.card-media.tint-violet { background: var(--gradient-violet); }
.card-media.tint-orange { background: linear-gradient(135deg, #FDF1E6, #F6BE86); color: var(--color-orange-700); }
.card-media.tint-neutral { background: linear-gradient(135deg, #ECEEF2, #C2C8D5); color: var(--color-neutral-700); }
.card-body { padding: 20px; }
/* Werte-Kacheln (Über uns): kompletter Kachelinhalt zentriert, zum
   Ausprobieren nur auf diesen Kacheln, nicht site-weit für .card-body. */
#werte .card-body { text-align: center; }
.card-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-brand-orange); font-weight: var(--weight-semibold);
  display: block; margin-bottom: 6px;
}
.card-body h3 {
  font-family: var(--font-base); font-weight: var(--weight-extrabold);
  letter-spacing: -.01em; font-size: 20px; margin: 0 0 8px;
}
.card-body p { font-size: 14px; color: var(--text-secondary); font-weight: var(--weight-light); line-height: 1.5; margin-bottom: 12px; }
.card-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; font-weight: var(--weight-semibold); color: var(--color-brand-orange-text); }
.card-link:hover { text-decoration: underline; }
/* Foto-Variante von .card-media für echte Pressefotos (statt Icon+Farbverlauf),
   z.B. auf der News-Übersichtsseite. */
.card-media-photo { height: 180px; padding: 0; }
.card-media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Icon-Liste für Vorteile-/Feature-Aufzählungen — kleine runde Icon-Badge statt
   Standard-Bullet, macht die Liste auf den ersten Blick als Liste erkennbar. */
.benefit-list { list-style: none; }
.benefit-list li { display: flex; align-items: center; gap: 14px; }
.benefit-list .benefit-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.benefit-list .benefit-icon.tint-orange { background: linear-gradient(135deg, #FDF1E6, #F6BE86); color: var(--color-orange-700); }
.benefit-list .benefit-icon.tint-blue { background: var(--gradient-blue); }
.benefit-list .benefit-icon.tint-violet { background: var(--gradient-violet); }
.benefit-list .benefit-icon.tint-neutral { background: linear-gradient(135deg, #ECEEF2, #C2C8D5); color: var(--color-neutral-700); }

/* Abschnitts-Trenner mit Label — trennt z.B. Vereinsnews optisch von Social-Content. */
.section-divider {
  display: flex; align-items: center; gap: 16px; margin: 8px 0 32px;
  color: var(--text-muted); font-size: 12px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .1em;
}
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* News-Übersichtsseite: 2/3 Vereinsnews (endlos scrollend) + 1/3 grau
   unterlegte Instagram-Seitenleiste, scrollt mit der Seite mit. */
.aktuelles-layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start;
  grid-template-areas: "news sidebar" "newsletter sidebar";
}
.aktuelles-news { grid-area: news; }
.aktuelles-newsletter { grid-area: newsletter; }
.aktuelles-sidebar {
  display: flex; flex-direction: column; gap: 20px;
  /* Bündig mit der ersten Reihe der Vereinsnews-Karten statt mit dem
     "Vereinsnews"-Label darüber. */
  margin-top: 36px;
}
.insta-sidebar-block h3 {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.insta-sidebar-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
  border-top: 1px solid var(--border); text-decoration: none;
}
.insta-sidebar-block .insta-sidebar-item:first-of-type { border-top: none; }
.insta-sidebar-item img { width: 48px; height: 48px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.insta-sidebar-item span {
  font-size: 13px; line-height: 1.4; color: var(--text-primary);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.insta-sidebar-item:hover span { color: var(--color-brand-orange); }
@media (max-width: 1023px) {
  .aktuelles-layout { grid-template-columns: 1fr; grid-template-areas: "news" "sidebar" "newsletter"; }
  .aktuelles-sidebar { position: static; margin-top: 0; }
}

/* LÖWENPARK-Seite: 2/3 Hauptspalte + 1/3 fest stehende Buchungs-Sidebar,
   gleiches Prinzip wie die Aktuelles-Seite — als einzelne Boxen statt
   einer gemeinsamen grauen Fläche. */
.loewenpark-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.loewenpark-layout > div { min-width: 0; }
.loewenpark-sidebar {
  display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px;
}
.loewenpark-sidebar .info-tile { gap: 6px; }
@media (max-width: 1023px) {
  .loewenpark-layout { grid-template-columns: minmax(0, 1fr); }
  .loewenpark-sidebar { position: static; }
}

/* LÖWENPARK-Countdown: Live-Countdown bis zum Ende der Thüringer Herbstferien. */
.loewenpark-countdown { margin: 20px 0 28px; }
.countdown-grid { display: flex; gap: 12px; }
.countdown-unit {
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: 10px 18px; text-align: center; min-width: 64px;
}
.countdown-unit strong {
  display: block; font-size: 26px; font-variant-numeric: tabular-nums;
  color: var(--color-brand-orange-text); font-weight: var(--weight-extrabold);
}
.countdown-unit span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.loewenpark-countdown-hero { margin: 8px 0 0; }
.loewenpark-countdown-hero .countdown-unit { padding: 14px 20px; min-width: 76px; }
.loewenpark-countdown-hero .countdown-unit strong { font-size: 36px; }
@media (max-width: 599px) {
  .loewenpark-countdown-hero .countdown-grid { gap: 8px; }
  .loewenpark-countdown-hero .countdown-unit { padding: 10px 8px; min-width: 0; flex: 1; }
  .loewenpark-countdown-hero .countdown-unit strong { font-size: 26px; }
}

/* Impact-Stats — Reichweiten-Zahlen der Sozialprojekte (SPORT VERNETZT,
   BasKIDball, Schulprogramm/Schultour), einzeln auf den jeweiligen Seiten und
   gesammelt bei "Soziale Sportidee" (verein/ueber-uns.html). Große Zahl +
   Label, analog zur Countdown-Kachel; alle Werte sind Hochrechnungen, daher
   immer mit .impact-stat-note kennzeichnen statt als exakten Fakt zu zeigen. */
.impact-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.impact-stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; text-align: center; display: block; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
a.impact-stat:hover { border-color: var(--color-brand-orange); box-shadow: var(--shadow-sm); }
.impact-stat strong {
  display: block; font-size: 36px; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--color-brand-orange-text); font-weight: var(--weight-extrabold);
}
.impact-stat-icon {
  width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand-navy);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
}
.impact-stat span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.impact-stat .impact-stat-note { margin-top: 2px; font-size: 11px; color: var(--text-muted); }

/* LÖWENPARK-History: vertikale Zeitleiste von unten (1971) nach oben
   (Eröffnung) — das HTML bleibt chronologisch, column-reverse dreht die
   Anzeige. Mittellinie mit Pfeilspitze oben als Symbol für "aufwärts";
   die Etappen wechseln sich links (history-content-top) und rechts
   (history-content-bottom) der Linie ab. Mobil rückt die Linie an den
   linken Rand und alle Etappen stehen rechts davon. */
.history-timeline { position: relative; display: flex; flex-direction: column; gap: 26px; margin-top: 40px; padding: 26px 0 8px; }
.history-timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
  transform: translateX(-50%); background: rgba(255,255,255,.35);
}
.history-timeline::after {
  content: ''; position: absolute; top: -14px; left: 50%; margin-left: -8px;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 14px solid rgba(255,255,255,.9);
}
.history-item { position: relative; min-height: 14px; flex-shrink: 0; }
.history-item::before {
  content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-brand-orange);
  border: 3px solid #fff; z-index: 2;
}
.history-content { max-width: 380px; }
.history-content-top { margin-left: auto; margin-right: calc(50% + 30px); text-align: right; }
.history-content-bottom { margin-right: auto; margin-left: calc(50% + 30px); text-align: left; }
.history-item h3 { font-family: var(--font-base); font-weight: var(--weight-extrabold); font-size: 15px; color: #fff; margin: 4px 0 6px; }
.history-item p { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.78); margin: 0; }
@media (max-width: 719px) {
  .history-timeline::before { left: 6px; transform: none; }
  .history-timeline::after { left: 6px; margin-left: -6.5px; }
  .history-item::before { left: 6px; transform: none; margin-left: -6px; }
  .history-content,
  .history-content-top,
  .history-content-bottom { width: auto; margin: 0 0 0 32px; text-align: left; }
}

/* Helle Variante von .history-timeline (LÖWENPARK-Geschichte auf bg-subtle,
   wie das Geschichte-Grau bei Über uns) — die Basisfarben oben sind für den
   dunklen Verlauf gebaut, hier nur die Text-/Linienfarben überschrieben. */
.history-timeline-light .history-item h3 { color: var(--text-primary); }
.history-timeline-light .history-item p { color: var(--text-secondary); }
.history-timeline-light::before { background: var(--border-strong); }
.history-timeline-light::after { border-bottom-color: var(--color-brand-orange); }

/* LÖWENPARK-Historie: nur ~3 Punkte gleichzeitig sichtbar, Rest scrollbar
   (neueste zuerst bleibt erhalten). Der Scroll-Wrapper liegt bewusst AUSSEN um
   .history-timeline (statt overflow direkt auf .history-timeline zu setzen):
   sonst wird die Linie (top:0;bottom:0) auf die sichtbare 360px-Box statt auf
   die volle Inhaltshöhe begrenzt (Linie hört mittendrin auf), der eigene
   padding-right verschiebt die Punkte (die die Content-Box als Breite nutzen)
   gegenüber der Linie (die die volle Padding-Box nutzt), und der Pfeil oben
   (top:-14px) wird vom eigenen overflow weggeschnitten. */
.history-timeline-outer { position: relative; }
.history-timeline-scroll { max-height: 360px; overflow-y: auto; padding-top: 18px; padding-right: 14px; }
.history-timeline-scroll-fade {
  position: absolute; left: 0; right: 14px; bottom: 0; height: 48px;
  background: linear-gradient(to bottom, rgba(246,247,249,0), var(--bg-subtle));
  pointer-events: none; transition: opacity .2s;
}
/* Scroll-Pfeil: v.a. für iPad/Touch gedacht, wo der Scrollbalken im
   verschachtelten .history-timeline-scroll kaum sichtbar/greifbar ist und
   Nutzer:innen sonst nicht merken, dass unten noch mehr Historie folgt.
   Klick scrollt ein Stück runter; sobald das Ende erreicht ist, blendet
   history-timeline.js Pfeil und Fade gemeinsam aus. */
.history-timeline-scroll-arrow {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none; z-index: 1;
  background: var(--color-brand-orange); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: opacity .2s;
  animation: history-scroll-arrow-bounce 1.6s ease-in-out infinite;
}
.history-timeline-scroll-arrow:hover { background: var(--color-brand-orange-dark, var(--color-brand-orange)); }
@keyframes history-scroll-arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .history-timeline-scroll-arrow { animation: none; }
}

/* Über-uns-Geschichte: horizontale Variante auf hellem bg-subtle-Grund
   (eigene Klassen statt .history-timeline, da diese für dunklen Hintergrund
   mit weißer Schrift gebaut ist und auch auf der Löwenpark-Seite läuft). */
.history-row { display: flex; gap: 22px; }
.history-h-item { flex: 1 1 0; position: relative; padding-top: 22px; }
.history-h-item::before {
  content: ''; position: absolute; top: 0; left: 0; width: 32px; height: 3px;
  background: var(--color-brand-orange); border-radius: var(--radius-full);
}
.history-h-item .card-label { color: var(--color-brand-orange); }
/* min-height reserviert Platz für 2 Zeilen, damit der Absatztext bei jeder
   Kachel auf gleicher Höhe beginnt, egal ob der Titel 1 oder 2 Zeilen braucht
   — sonst wirkt die Reihe unruhig. text-wrap:balance verteilt zweizeilige
   Titel gleichmäßiger statt mit einem kurzen Rest-Wort in Zeile 2. */
.history-h-item h3 { font-family: var(--font-base); font-weight: var(--weight-extrabold); font-size: 15px; margin: 6px 0 6px; min-height: 2.6em; text-wrap: balance; }
.history-h-item p { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
@media (max-width: 899px) {
  .history-row { flex-wrap: wrap; }
  .history-h-item { flex: 1 1 45%; }
}
@media (max-width: 599px) {
  .history-h-item { flex: 1 1 100%; }
}

/* Partner-Flipcards (Löwen-Unterstützer-Seite): Mouseover dreht die Karte um die
   Y-Achse (rechts nach links) und zeigt auf der Rückseite den Web-Claim der
   jeweiligen Firma. */
.partner-flip-card { height: 150px; perspective: 1200px; }
.partner-flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform var(--dur-flip) var(--ease-out); transform-style: preserve-3d;
}
.partner-flip-card:hover .partner-flip-inner { transform: rotateY(180deg); }
.partner-flip-front, .partner-flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 20px;
  display: flex; flex-direction: column; justify-content: center;
}
.partner-flip-front { background: #fff; }
.partner-flip-back {
  background: var(--color-brand-navy); color: #fff; transform: rotateY(180deg);
  align-items: center; text-align: center; gap: 6px;
}
.partner-flip-back p {
  font-size: 14px; font-style: italic; line-height: 1.4; color: #fff; margin: 0;
}
.partner-flip-back span { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }

/* News-Bento (Homepage) — 5 Kacheln, gemischt aus internen News + Instagram-Feeds:
   Zeile 1 = 1 breite Kachel (2 Spalten) + 1 schmale; Zeile 2 = 3 gleich breite Kacheln.
   Headline liegt als Overlay über dem Hero-Bild (Verlauf dunkel→transparent). */
.news-bento {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 320px 220px; gap: 20px;
}
.news-tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg);
  color: #fff; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out);
}
.news-tile:hover { transform: translateY(-3px); }
.news-tile-featured { grid-column: span 2; grid-row: 1; }
.news-tile-side { grid-column: span 1; grid-row: 1; }
.news-tile-small { grid-column: span 1; grid-row: 2; }
.news-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Instagram-Postfotos sind meist hochkant mit dem Gesicht im oberen Drittel —
   oben ausgerichtet zuschneiden, statt zentriert (schneidet sonst Köpfe ab). */
.news-tile-insta img {
  object-position: top;
}

/* Instagram-Post-Detailseite (news/insta-post.html): Hochkant-Vorschaubild
   neben dem Text, unabhängig vom Hero-Hintergrundbild. */
.insta-detail-grid { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.insta-detail-media {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle);
  aspect-ratio: 9 / 16;
}
.insta-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 719px) {
  .insta-detail-grid { grid-template-columns: 1fr; }
  .insta-detail-media { max-width: 260px; margin: 0 auto; }
}
.news-tile-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px; background: linear-gradient(0deg, rgba(0,18,45,.92) 0%, rgba(0,18,45,.55) 45%, rgba(0,18,45,0) 80%);
}
.news-tile-headline {
  font-family: var(--font-base); font-weight: var(--weight-extrabold); letter-spacing: -.01em;
  line-height: 1.15; margin: 0 0 10px; color: #fff;
}
.news-tile-featured .news-tile-headline { font-size: 26px; }
.news-tile-side .news-tile-headline, .news-tile-small .news-tile-headline { font-size: 17px; }
.news-tile-teaser {
  font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82); margin: 0 0 10px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.news-tile-featured .news-tile-teaser { font-size: 14px; max-width: 46ch; }
.news-tile-link {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 13px; font-weight: var(--weight-semibold); color: #fff;
}
.news-tile-link:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .news-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: 260px repeat(2, 200px); }
  .news-tile-featured { grid-column: span 2; grid-row: 1; }
  .news-tile-side, .news-tile-small { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 599px) {
  .news-bento { grid-template-columns: 1fr; grid-template-rows: repeat(5, 220px); }
  .news-tile-featured, .news-tile-side, .news-tile-small { grid-column: span 1; grid-row: auto; }
}

/* News-Slider (Homepage) — 10 News insgesamt.
   Desktop: 2 Seiten à 5 Kacheln (news-bento), per Pfeil/Punkt oder Swipe (Trackpad) umschaltbar.
   Mobile: alle 10 Kacheln einzeln in einer Reihe, klassisches Wisch-Karussell. */
.news-slider-wrap { position: relative; }
.news-slider-track {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.news-slider-track::-webkit-scrollbar { display: none; }
.news-slider-desktop .news-slider-track > .news-bento { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; }
.news-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary);
  box-shadow: 0 6px 16px rgba(0,18,45,.14); transition: opacity var(--dur-fast) var(--ease-out);
}
.news-slider-arrow:hover { background: var(--bg-subtle); }
.news-slider-arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.news-slider-arrow.prev { left: -22px; }
.news-slider-arrow.next { right: -22px; }
.news-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.news-slider-dots button {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); border: none; padding: 0; cursor: pointer;
}
.news-slider-dots button.active { background: var(--color-brand-orange); }
.news-slider-mobile { display: none; }
/* Fortschrittsbalken statt Einzel-Punkte — bei 15 Kacheln wären 15 Punkte zu
   viel, der schmale Balken deutet nur an, wie weit man ist und dass es weitergeht. */
.news-mobile-progress { height: 3px; border-radius: var(--radius-full); background: var(--border); margin: 14px 4px 0; overflow: hidden; }
.news-mobile-progress-thumb { height: 100%; width: 20%; border-radius: var(--radius-full); background: var(--color-brand-orange); transform: translateX(0); }
@media (max-width: 1023px) {
  .news-slider-desktop { display: none; }
  .news-slider-mobile { display: block; }
  .news-slider-mobile .news-slider-track { gap: 14px; }
  .news-slider-mobile .news-tile { flex: 0 0 88%; min-width: 88%; height: 320px; scroll-snap-align: start; }
  .news-slider-mobile .news-tile-headline { font-size: 19px; }
  .news-slider-mobile .news-tile-teaser { font-size: 14px; }
}

/* Camp-Bildergalerie — horizontal scrollbarer Foto-Streifen, wiederverwendet
   auf trainieren/camps.html (alle Camps, max. 50) und in Rückblick-Newsartikeln
   (gefiltert auf ein Camp). Nutzt .news-slider-track fürs Scroll-Snap-Verhalten. */
/* min-width:0 ist hier nötig, weil die LÖWENPARK-Seite die Galerie in ein
   Grid-Item (.grid-2) legt — Grid-/Flex-Items schrumpfen sonst nicht unter
   ihre Inhaltsbreite, wodurch der 23-Foto-Streifen die ganze Seite aufreißt
   statt sauber per overflow-x zu scrollen. Ohne Effekt in normalen Block-
   Kontexten (dort schrumpft der Container ohnehin schon auf die Spalte). */
.camp-gallery-wrap { position: relative; min-width: 0; }
.camp-gallery-wrap .news-slider-track { gap: 12px; }
.camp-gallery-photo { flex: 0 0 240px; min-width: 240px; height: 160px; border-radius: var(--radius-md); overflow: hidden; scroll-snap-align: start; }
.camp-gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp-gallery-photo[data-lightbox-src] { cursor: zoom-in; }
/* Gemeinsames Lightbox-Overlay für alle Bildergalerien (js/camp-galerie.js) —
   ein Klick auf ein Foto zeigt es groß, unabhängig davon, auf welcher Seite. */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,18,45,.92);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out);
}
.gallery-lightbox.open { opacity: 1; pointer-events: auto; }
.gallery-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,.5); display: block; }
.gallery-lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.gallery-lightbox-close:hover { background: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox { transition: none; }
}
/* Immer letzte Kachel im Streifen, wenn (noch) nicht alle Fotos vorliegen —
   gestrichelter Platzhalter statt echtem Foto, bleibt aber Teil des Sliders. */
.camp-gallery-photo-soon {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg-subtle); border: 1px dashed var(--border); color: var(--text-muted);
  font-size: 13px; line-height: 1.4; padding: 12px;
}
/* Kommende-Camps-Slider — gleiches Streifen-Prinzip, aber für ganze Karten
   statt Fotos (aktuelle + geplante Camps nebeneinander, scrollbar). */
.camp-slider-card { flex: 0 0 380px; min-width: 320px; scroll-snap-align: start; }
/* Pfeile brauchen Platz neben dem Streifen (wie beim News-Slider ab 1024px) —
   darunter reicht natives Wisch-Scrollen, sonst ragen sie über den Viewport-Rand. */
@media (max-width: 1023px) {
  .camp-gallery-wrap .news-slider-arrow { display: none; }
}
@media (max-width: 599px) {
  .camp-gallery-photo { flex-basis: 78%; min-width: 78%; }
  .camp-slider-card { flex-basis: 86%; min-width: 86%; }
}
/* Swipe-Hinweis für Kachel-Slider (Termine u.ä.) auf Mobil/Tablet — ohne
   Pfeile (s.o.) erschließt sich das Wischen nicht von selbst. Rein visuell,
   nicht klickbar; verschwindet ab 1024px wieder, wo die echten Pfeile greifen. */
.swipe-hint { display: none; }
@media (max-width: 1023px) {
  .swipe-hint {
    display: flex; position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92);
    box-shadow: 0 4px 12px rgba(0,18,45,.18); align-items: center; justify-content: center;
    color: var(--text-primary); pointer-events: none; z-index: 4;
  }
}

/* Ansprechperson-Karte — Foto/Platzhalter + Name/Rolle/E-Mail, nach Vorbild der
   Sponsor-werden-Seite der alten Website. Wiederverwendet auf Camps-,
   Netzwerk-Treffen- und Community-Events-Seiten. */
.contact-person-card { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.contact-person-photo {
  width: 88px; height: 88px; border-radius: 50%; flex: 0 0 88px; overflow: hidden;
  background: var(--color-neutral-100); color: var(--color-neutral-400);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.contact-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-person-photo span { font-size: 10px; text-align: center; line-height: 1.2; }
.contact-person-card-centered { justify-content: center; }

/* Rückblick-Sektion Camps-Seite: Artikel + 4er-Foto-Grid in einer gemeinsamen
   Card, Fotos exakt so hoch wie der Artikeltext (align-items:stretch) statt
   mit eigener Mindesthöhe. Klick auf ein Foto öffnet die Lightbox. */
/* align-items:start (nicht stretch) ist hier wichtig: sonst zieht das
   Foto-Grid (intrinsisch hoch durch die Bild-Seitenverhältnisse) die
   Artikel-Spalte mit hoch, bevor das Sync-Script unten die echte
   Text-Höhe auslesen kann. */
.recap-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.recap-photo-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.recap-photo-placeholder {
  background: var(--color-neutral-100); color: var(--color-neutral-400);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden;
  cursor: pointer; min-height: 60px;
}
.recap-photo-placeholder span { font-size: 11px; text-align: center; }
.recap-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .recap-split { grid-template-columns: 1fr; }
  .recap-photo-grid { min-height: 220px; }
}
@media (max-width: 700px) {
  .contact-person-card-centered { flex-direction: column; text-align: center; }
}

/* Sponsoren-Wand (partner/sponsoring.html) — Filter-Chips + eine Kachel-Wand,
   Kachelgröße markiert die Ebene (Top-Partner/Wirkungspartner größer als
   Sponsoren), ohne dass die Ebenen-Namen innerhalb der Wand wiederholt werden
   (die stehen nur in den Filter-Chips — dort heißt die Ebene "Förderpartner",
   auf der Kachel selbst steht bei Bedarf "Wirkungspartner" als Tag, siehe
   .partner-tag). Die Kachel ist ein echter Link zur Partner-Website (neuer
   Tab) — Klick muss dafür reserviert bleiben, daher dreht sich die Kachel nur
   per Hover/Tastaturfokus (Claim + Kurzbeschreibung), analog zu den
   Löwen-Unterstützer-Flip-Cards. Bleiben bei einem Filter nur 2 Kacheln
   übrig, bekommen sie automatisch die "groß"-Größe (.is-enlarged, per JS
   gesetzt). */
.partner-wall { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; gap: 16px; }
.partner-tile {
  perspective: 1200px; cursor: pointer; display: block; text-decoration: none; color: inherit;
}
.partner-tile[hidden] { display: none; }
.partner-tile-top, .partner-tile-wirkungspartner, .partner-tile.is-enlarged { grid-column: span 2; }
.partner-tile-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform var(--dur-flip) var(--ease-out); transform-style: preserve-3d;
}
/* Hover-Flip nur bei echten Zeigegeräten (Maus) — auf Touch/iPad hat :hover
   keinen zuverlässigen "nur ansehen"-Zustand, ein Tap löst Flip UND sofortige
   Navigation gleichzeitig aus. Per Tastatur bleibt der Flip über :focus-visible
   erhalten, da Tab+Enter ein bewusster Zwei-Schritt-Vorgang ist. */
@media (hover: hover) and (pointer: fine) {
  .partner-tile:hover .partner-tile-inner { transform: rotateY(180deg); }
}
.partner-tile:focus-visible .partner-tile-inner { transform: rotateY(180deg); }
.partner-tile.is-flipped .partner-tile-inner { transform: rotateY(180deg); }
.partner-tile-front, .partner-tile-back {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
}
.partner-tile-front {
  background: #fff; border: 1px solid var(--border);
  font-family: var(--font-base); color: var(--text-primary);
}
.partner-tile-front img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-tile-top .partner-tile-front, .partner-tile.is-enlarged .partner-tile-front { padding: 22px; font-size: 20px; font-weight: var(--weight-extrabold); border: 2px solid var(--color-brand-orange); }
/* .partner-tile.partner-tile-wirkungspartner (statt nur .partner-tile-wirkungspartner)
   für gleiche Selektor-Spezifität wie .partner-tile.is-enlarged oben — sonst
   gewinnt bei gefilterten Ansichten (Förderpartner als letzte Einzelkachel,
   dadurch zusätzlich .is-enlarged) die orangene Randfarbe statt der blauen. */
.partner-tile.partner-tile-wirkungspartner .partner-tile-front { padding: 22px; font-size: 20px; font-weight: var(--weight-extrabold); border: 2px solid var(--color-brand-blue); }
.partner-tile-sponsoren .partner-tile-front { padding: 8px; font-size: 18px; font-weight: var(--weight-semibold); border: 2px solid var(--color-brand-orange); }
.partner-tile-weitere .partner-tile-front { padding: 10px; font-size: 13px; font-weight: var(--weight-medium); }
.partner-wall-weitere { grid-template-columns: repeat(7, 1fr); grid-auto-rows: 64px; gap: 10px; }
/* Bleibt in einer 7er-Reihe ein einzelnes letztes Element allein übrig, wird es zentriert statt linksbündig — gleiche Breite wie die anderen Kacheln. */
.partner-wall-weitere > *:last-child:nth-child(7n+1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 60px) / 7); }
.partner-tile-back {
  background: var(--color-brand-navy); color: #fff; transform: rotateY(180deg);
  flex-direction: column; gap: 6px;
}
.partner-tile-back p { font-size: 13px; font-style: italic; line-height: 1.4; color: #fff; margin: 0; }
.partner-tile-back .partner-tag { font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--color-orange-200); }
.partner-tile-back .partner-desc { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.35; }
@media (max-width: 700px) {
  .partner-wall { grid-template-columns: repeat(2, 1fr); }
  .partner-tile-top, .partner-tile-wirkungspartner, .partner-tile.is-enlarged { grid-column: span 2; }
}

/* Business-Club-Wand: 10 anonyme Platzhalter-Kacheln (noch keine echten
   Mitglieder), 5 Spalten auf Desktop, dunkelblau umrandet (Löwen-Logo-Blau)
   statt der orangen/grünen Partner-Ränder. Kein Link, reiner Flip-Hinweis. */
.partner-wall-businessclub { grid-template-columns: repeat(5, 1fr); }
.partner-tile-placeholder { cursor: default; }
.partner-tile-placeholder .partner-tile-front { border: 2px solid var(--color-brand-navy); }
.partner-tile-placeholder .partner-tile-back .partner-desc { font-size: 13px; }
@media (max-width: 900px) {
  .partner-wall-businessclub { grid-template-columns: repeat(3, 1fr); }
}

/* Investoren-Wand: große Hochformat-Fotos statt kleiner Logo-Kacheln, Flip
   zeigt den Namen auf strahlendem Blauton (wie im Footer-Verlauf) statt der
   neutralen Navy-Rückseite bei den Partner-Kacheln. */
.investor-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.investor-tile { perspective: 1200px; }
.investor-tile-inner {
  position: relative; width: 100%; padding-top: 125%;
  transition: transform var(--dur-flip) var(--ease-out); transform-style: preserve-3d;
}
@media (hover: hover) and (pointer: fine) {
  .investor-tile:hover .investor-tile-inner { transform: rotateY(180deg); }
}
.investor-tile:focus-visible .investor-tile-inner { transform: rotateY(180deg); }
/* Investoren-Kacheln haben (anders als Partner-Kacheln) keinen Link, daher
   kann Tap auf Touch-Geräten gefahrlos zum Flip-Trigger werden — kein
   Navigations-Konflikt. Klasse wird per JS auf Touch-Tap umgeschaltet. */
.investor-tile.is-flipped .investor-tile-inner { transform: rotateY(180deg); }
.investor-tile-front, .investor-tile-back {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.investor-tile-front {
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-muted);
  flex-direction: column; gap: 8px; font-size: 13px;
}
.investor-tile-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.investor-tile-back {
  background: radial-gradient(130% 130% at 30% 15%, var(--color-blue-300) 0%, var(--color-blue-500) 55%, var(--color-blue-700) 100%);
  color: #fff; transform: rotateY(180deg);
  flex-direction: column; gap: 4px; padding: 12px;
}
.investor-tile-back .investor-name {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.2;
}
.investor-tile-back .investor-role { font-size: 12px; color: rgba(255,255,255,.8); }
@media (max-width: 700px) {
  .investor-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .partner-wall-businessclub { grid-template-columns: repeat(2, 1fr); }
}

/* Hauptpartner-Kacheln auf der Startseite — gleiche Flip-Kachel wie die
   Sponsoren-Wand (identischer Inhalt/Verhalten), aber einheitlich in die
   bestehende .grid-4-Reihe eingepasst statt nach Ebene unterschiedlich groß. */
#hauptpartner-grid .partner-tile { height: 100px; grid-column: auto; }
#hauptpartner-grid .partner-tile-front { padding: 16px; font-size: 15px; font-weight: var(--weight-semibold); }
@media (max-width: 700px) {
  #hauptpartner-grid .partner-tile { grid-column: auto; }
}

/* Info tiles (homepage: next game / probetraining / tickets) */
.info-tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
#ansprechperson .info-tile { align-items: center; text-align: center; }
.info-tile .tile-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--color-orange-50); color: var(--color-brand-orange);
  display: flex; align-items: center; justify-content: center;
}
.info-tile-row-head { display: flex; align-items: flex-start; gap: 12px; }
.info-tile-row-head .tile-icon { flex-shrink: 0; }
.info-tile-row-head h3 { margin: 0; }
.info-tile-row-divided .info-tile-row-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  background: var(--gradient-blue); color: #fff;
  border-radius: 0 0 28px 28px; position: relative; overflow: hidden;
}
.hero-inner {
  display: grid; grid-template-columns: 1.3fr .8fr; gap: 48px; align-items: center;
  padding: 64px 0 72px;
}
.hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display); line-height: .98;
  font-size: clamp(38px, 6vw, 74px); margin: 14px 0 20px; color: #fff;
}
.hero p.lead { font-size: 18px; color: rgba(255,255,255,.85); max-width: 46ch; font-weight: var(--weight-light); margin-bottom: 26px; }

.next-game-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg); padding: 24px;
}
.next-game-card .meta { font-size: 13px; color: rgba(255,255,255,.7); text-align: center; margin: 14px 0; }
.next-game-card .matchup { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; font-weight: var(--weight-semibold); }

/* Helles Foto-Hero (Startseite) — Platzhalterfoto, warmer Orange-Verlauf drübergelegt.
   position:sticky pinnt das Hero-Medium (Bild oder künftig Video) an Ort und Stelle,
   während der weiße Inhalt der nächsten Section darüber hinwegscrollt — das Medium
   verschwindet erst, wenn es vollständig überlagert ist (siehe .section/.section-sm
   weiter unten, die dafür einen deckenden Hintergrund + höheren Stack-Kontext bekommen).
   WICHTIG: kein overflow:hidden auf diesem Element — Safari/WebKit (v.a. iOS) hebt
   position:sticky komplett auf, wenn dasselbe Element auch overflow:hidden trägt. Die
   abgerundeten Ecken kommen daher rein über border-radius (clippt den CSS-Background
   auch ohne overflow:hidden); .hero-media (künftige Video-Heros) clippt sich selbst.
   .hero-sticky-wrap wird von nav.js zur Laufzeit um .hero-photo gelegt (2×Hero-Höhe) —
   begrenzt den Containing Block des Sticky-Elements, damit es sich löst statt für den
   Rest der Seite angeheftet zu bleiben (sonst blitzt es bei kurzen Sections durch). */
.hero-sticky-wrap { position: relative; }
/* Standard-Verlauf für alle Hero-Fotos: ein einziges dunkles Navy/Schwarz
   (--color-brand-navy, "fast schwarz" wie im Logo) statt des früheren
   cremefarbenen Verlaufs mit orangem Zwischenton — Teil der Schwarz/Orange-
   Optik. Jede Seiten-Variante setzt nur noch --hero-photo-url + die eigene
   background-position (Bildausschnitt) und referenziert diesen einen
   Standard-Verlauf, keine abweichenden Prozentwerte mehr pro Seite. */
.hero-photo {
  --hero-overlay: linear-gradient(90deg, rgba(0,18,45,.92) 0%, rgba(0,18,45,.55) 38%, rgba(0,18,45,0) 62%);
  --hero-overlay-mobile: linear-gradient(180deg, rgba(0,18,45,.92) 0%, rgba(0,18,45,.75) 45%, rgba(0,18,45,.25) 75%, rgba(0,18,45,0) 100%);
  position: sticky; top: 74px; z-index: 0;
  border-radius: 0 0 28px 28px;
  background-image: var(--hero-overlay), var(--hero-photo-url, url('/assets/img/hero-basketball.webp'));
  background-size: cover; background-position: center;
  min-height: 480px; display: flex; align-items: center;
}
/* Bei sehr breiten Viewports zoomt background-size:cover stärker rein
   (Höhe bleibt fix, Breite wächst) — dadurch verschwinden Himmel/Kopfbereich
   aus dem sichtbaren Ausschnitt. Größere Mindesthöhe hält auf breiten
   Bildschirmen wieder genug vom Foto sichtbar (site-weit, alle Hero-Fotos). */
@media (min-width: 1440px) {
  .hero-photo { min-height: 620px; }
}
@media (min-width: 2000px) {
  .hero-photo { min-height: 760px; }
}
/* Modifier für bewusst niedrigere Heros auf zweitrangigen Seiten (halbe
   Standardhöhe) — Klasse zusätzlich zur jeweiligen Hintergrund-Variante auf
   das .hero-photo-Element setzen. */
.hero-photo.hero-half { min-height: 240px; }
@media (max-width: 599px) {
  .hero-photo.hero-half { min-height: 170px; }
}
@media (min-width: 1440px) {
  .hero-photo.hero-half { min-height: 310px; }
}
@media (min-width: 2000px) {
  .hero-photo.hero-half { min-height: 380px; }
}
/* Vorbereitet für künftige Video-Heros: .hero-media als erstes Kind von .hero-photo
   einfügen (z.B. <div class="hero-media"><video autoplay muted loop playsinline ...>
   ...</video></div>) — ersetzt dann optisch das CSS-background-image, der Verlauf
   liegt weiterhin über dem Medium, unter dem Text. Bild-Heros (aktuell alle Seiten)
   brauchen dieses Element nicht und funktionieren unverändert weiter. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: var(--hero-overlay);
}
/* Homepage-Hero: automatischer Bild-Slider statt eines einzelnen Fotos.
   Slides liegen als gestapelte, sich überblendende Layer hinter dem
   Overlay-Gradient; js/home-hero-slider.js schaltet .active reihum um.
   Fällt JS aus, bleibt .hero-photo.hero-lg's eigenes Hintergrundbild
   (siehe --hero-photo-url) als Fallback sichtbar. */
.hero-slider .hero-slide {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 20%;
  opacity: 0; transition: opacity var(--dur-slow, .5s) ease;
}
.hero-slider .hero-slide.active { opacity: 1; }
.hero-slider::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--hero-overlay);
}
@media (max-width: 599px) {
  .hero-slider::after { background: var(--hero-overlay-mobile); }
}
.hero-photo .container { position: relative; z-index: 2; width: 100%; padding-top: 24px; padding-bottom: 24px; }
/* Eyebrow in Markenorange statt Navy: hebt sich klar vom jetzt dunklen
   Verlauf ab und zieht die Schwarz/Orange-Optik bis in den Hero-Bereich. */
.hero-photo .eyebrow { color: var(--color-brand-orange); }
.hero-photo .photo-note {
  position: absolute; right: clamp(20px,5vw,40px); bottom: 10px; z-index: 2;
  font-size: 11px; color: rgba(0,18,45,.4);
}
.hero-eyebrow-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-badge-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.hero-league-badge {
  display: inline-flex; flex-shrink: 0; border: none; cursor: pointer; font: inherit;
  background: rgba(255,255,255,.92); padding: 6px 14px; border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.hero-league-badge:hover { background: #fff; }
.hero-league-badge img { width: 80px; height: auto; display: block; }
.hero-league-badge-dark { background: rgba(0,18,45,.85); }
.hero-league-badge-dark:hover { background: rgba(0,18,45,1); }
.hero-badge-plain {
  display: inline-flex; flex-shrink: 0; border: none; background: none; padding: 0; cursor: pointer;
}
.hero-badge-plain img {
  width: 108px; height: auto; display: block; border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out);
}
.hero-badge-plain:hover img, .hero-badge-plain:focus-visible img { transform: scale(1.05); }
.hero-photo h1 {
  font-family: var(--font-display); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display); line-height: 1.02; white-space: nowrap;
  font-size: clamp(24px, 3.6vw, 42px); margin: 8px 0 0.5em; color: #fff;
}
/* margin-bottom in em statt px, damit der Abstand zum Swoosh (ebenfalls in
   em) bei jeder Hero-Variante gleich proportioniert bleibt, auch bei
   deutlich größerer Schrift wie bei .hero-lg. */
/* Seit dem Umstieg auf den dunklen Standard-Verlauf ist Weiß auf jedem
   Hero-Foto die einzige Variante (Eyebrow: Orange) — das frühere Umschalten
   auf dunklen Text + Halo (.hero-text-dark, für Seiten mit hellem Foto) ist
   damit entfallen. */
.hero-photo p.lead {
  font-size: 16px; color: #fff; max-width: 46ch; font-weight: var(--weight-light); margin-bottom: 6px;
}
/* Schmale Breadcrumb-Leiste oberhalb des Hero-Fotos statt Link im Hero
   selbst — bleibt lesbar unabhängig vom Hero-Hintergrund und drängt sich
   nicht in die Eyebrow/Headline-Hierarchie. */
.breadcrumb-bar { background: var(--bg-subtle); border-bottom: 1px solid var(--border); padding: 10px 0; }
.breadcrumb-bar a {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--text-muted); text-decoration: none;
}
.breadcrumb-bar a:hover { color: var(--color-brand-orange); }
/* Rücklink am Artikelende statt oben im Breadcrumb — Leser sollen erst den
   Inhalt lesen, bevor die Navigation zurück zur Übersicht angeboten wird. */
.article-back-link {
  display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: var(--weight-semibold);
  color: var(--text-muted); text-decoration: none;
}
.article-back-link:hover { color: var(--color-brand-orange); }
/* Vorheriger/Nächster-Artikel-Pfeile (js/article-nav.js) — zwei statische Kreis-
   Buttons unten neben dem "Newsletter abonnieren"-Button (nicht mehr oben/schwebend
   über dem Hero), symmetrisch links/rechts davon. Zirkulär: am neuesten Artikel
   springt der rechte Pfeil zum ältesten und umgekehrt, damit auf jeder Artikelseite
   immer beide Pfeile sichtbar sind. */
.article-nav-arrow {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.article-nav-arrow:hover { background: var(--bg-subtle); }
.article-nav-arrow i { color: var(--color-brand-orange); }
/* News-Artikel-Überschriften sind variabel lang (echte Meldungen statt kurzer
   Taglines) — hier immer normal umbrechen, auch auf Desktop-Breiten. */
.hero-photo.hero-article h1 { white-space: normal; }
/* Artikel-Hero grösser als der Standard-Seiten-Hero, damit die Pressefotos
   mehr Raum bekommen und besser zur Geltung kommen. */
.hero-photo.hero-article { min-height: 360px; }
.hero-photo.hero-article .container { padding-top: 44px; padding-bottom: 44px; }
@media (max-width: 599px) {
  .hero-photo.hero-article { min-height: 260px; }
  .hero-photo.hero-article .container { padding-top: 28px; padding-bottom: 28px; }
}

/* Editorial-Minimal-Layout für News-Artikel-Detailseiten: Kopfzeile frei auf
   Weiß statt Bild-Overlay, Foto als eigener Block darunter, schmale Textspalte
   mit Zitat-Element für Highlights. Ersetzt .hero-photo auf Artikelseiten. */
.article-head { padding: 48px 0 32px; text-align: center; }
.article-head .eyebrow { display: block; margin-bottom: 10px; }
.article-head h1 {
  font-family: var(--font-display); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display); line-height: 1.15; text-wrap: balance;
  font-size: clamp(26px, 4vw, 40px); max-width: 22ch; margin: 0 auto 14px; color: var(--text-primary);
}
.article-meta { font-size: 13px; color: var(--text-muted); }
.article-photo { width: 100%; height: 380px; overflow: hidden; }
.article-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-body { max-width: 640px; margin: 0 auto; padding-top: 32px; }
.article-body p.t-body { font-size: 16px; line-height: 1.75; }
.pull-quote {
  font-weight: var(--weight-semibold); font-size: 19px; line-height: 1.5; color: var(--text-primary);
  border-left: 3px solid var(--color-brand-orange); padding-left: 20px; margin: 28px 0;
}
/* Feste Bausteine für interne News-Artikel: Zusammenfassung oben (statt fett
   gedruckter Pseudo-Zwischenüberschriften im Fließtext, die schlecht lesbar
   sind) und ein Zitat-Element (.pull-quote) für Highlights aus dem Text. */
.article-summary {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin: 4px 0 28px;
}
.article-summary-label {
  display: block; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-brand-orange-text); margin-bottom: 10px;
}
.article-summary ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.article-summary li { font-size: 15px; line-height: 1.55; color: var(--text-primary); }
@media (max-width: 599px) {
  .article-head { padding: 32px 0 24px; }
  .article-photo { height: 220px; }
}
.hero-location {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; color: #fff; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.hero-location:hover { color: var(--color-brand-orange); text-decoration: underline; }
@media (max-width: 599px) {
  .hero-photo h1 { white-space: normal; }
  .hero-photo {
    min-height: 340px;
    /* Auf schmalen Screens bricht die Überschrift auf volle Breite um statt
       in eine linke Spalte — der links-rechts-Verlauf allein reicht dann
       nicht mehr über die ganze Textzeile, daher zusätzlich ein Verlauf von
       oben (--hero-overlay-mobile), site-weit einheitlich für jede Variante. */
    background-image: var(--hero-overlay-mobile), var(--hero-overlay), var(--hero-photo-url, url('/assets/img/hero-basketball.webp'));
    background-size: cover, cover, cover;
  }
  .hero-media::after { background: var(--hero-overlay-mobile), var(--hero-overlay); }
}

/* Hero-Variante für die Ticketseiten — Foto der vollen Halle */
.hero-photo.hero-tickets { --hero-photo-url: url('/assets/img/hero-tickets-halle.webp'); background-position: center 35%; }

/* Hero-Variante für den Fanshop — freies Stockfoto (Platzhalter, wird später gegen echtes Foto getauscht) */
.hero-photo.hero-fanshop { --hero-photo-url: url('/assets/img/hero-fanshop.webp'); background-position: center 25%; }

/* Hero-Variante für die LÖWENPARK-Seite — echtes Baustellenfoto (Luftaufnahme
   Dach), bereits für die Meilenstein-News verwendet. */
.hero-photo.hero-loewenpark { --hero-photo-url: url('/assets/img/news/loewenpark-dach.webp'); background-position: center 60%; }

/* Hero-Variante für die Löwen-Unterstützer-Seite — Erfurter Dom/Severikirche
   (Stockfoto, niedrige Auflösung als Platzhalter bis zum echten Lizenzkauf). */
.hero-photo.hero-loewen-unterstuetzer { --hero-photo-url: url('/assets/img/hero-loewen-unterstuetzer.webp'); background-position: center 55%; }

/* Hero-Variante für die Über-uns-Seite — Kinder und Profis gemeinsam am Korb
   auf dem Petersberg, Domspitzen im Hintergrund. */
.hero-photo.hero-ueberuns { --hero-photo-url: url('/assets/img/hero-ueberuns.webp'); background-position: center 30%; }

/* Hero-Variante für die Investoren-Seite — Maskottchen mit Vereinsflagge vor
   voller, jubelnder Halle ("INVESTORS" auf der Anzeigetafel). */
.hero-photo.hero-investoren { --hero-photo-url: url('/assets/img/hero-investoren.webp'); background-position: center 40%; }

/* Hero-Variante für die Löwenrudel/Fanclub-Seite — Gruppenfoto mit "Ich bin
   ein Löwe"-T-Shirts vor dem Petersberg, Motiv über die ganze Breite verteilt.
   Höhe kommt jetzt vom vereinheitlichten .hero-photo-Basiswert. */
.hero-photo.hero-loewenrudel { --hero-photo-url: url('/assets/img/hero-loewenrudel.webp'); background-position: center 10%; }
/* Auf schmalen Screens bricht die Überschrift auf volle Breite um (statt der
   linken Spalte bei breiten Screens) — Bildausschnitt daher etwas tiefer,
   der Verlauf selbst kommt bereits einheitlich vom .hero-photo-Basiswert. */
@media (max-width: 599px) {
  .hero-photo.hero-loewenrudel { background-position: center 68%; }
}

/* Hero-Variante für die Ehrenamt-Seite — Team- und Helfer:innen-Gruppenfoto
   auf dem Spielfeld, Logo mittig unten im Bild. Höhe kommt vom
   vereinheitlichten .hero-photo-Basiswert. */
.hero-photo.hero-ehrenamt { --hero-photo-url: url('/assets/img/hero-ehrenamt.webp'); background-position: center 45%; }
/* Überschrift ist länger als die üblichen kurzen Taglines — normal umbrechen
   und auf den geschützten (helleren) linken Bildbereich begrenzen. */
.hero-photo.hero-ehrenamt h1 { white-space: normal; max-width: 23ch; }

/* Hero-Variante für die Community-Events-Seite — gestaltete Festival-Szene
   mit Löwen-Maskottchen und "Community Stage". */
.hero-photo.hero-community-events { --hero-photo-url: url('/assets/img/hero-community-events.webp'); background-position: center 55%; }

/* Hero-Variante für die Netzwerk-Treffen-Seite — Bühnenmoment beim
   Alley-Oop 2025, Basketball-Löwen/CATL-Wandlogo links, Publikum unten. */
.hero-photo.hero-netzwerktreffen { --hero-photo-url: url('/assets/img/hero-netzwerktreffen.webp'); background-position: center 22%; }

/* Hero-Variante für die Media-Kit-Seite — gestaltete Grafik "Medienportal"
   mit Download-Icons für Pressematerial/Vereinsprofile/Fotos. */
.hero-photo.hero-mediakit { --hero-photo-url: url('/assets/img/hero-mediakit.webp'); background-position: center; }
.hero-photo.hero-mediakit h1 { white-space: normal; max-width: 28ch; }

/* Hero-Variante für die Mitgliedschafts-Seiten (Übersicht + Fan-Formular) —
   feiernde Fans mit Maskottchen im Bus auf dem Weg zum Auswärtsspiel. */
.hero-photo.hero-mitglied-werden { --hero-photo-url: url('/assets/img/hero-mitglied-werden.webp'); background-position: center 40%; }

/* Hero-Variante für die Newsletter-Seite. */
.hero-photo.hero-newsletter { --hero-photo-url: url('/assets/img/hero-newsletter.webp'); background-position: center 40%; }

.hero-photo.hero-organisation { --hero-photo-url: url('/assets/img/hero-organisation.webp'); background-position: center 30%; }

.hero-photo.hero-jobs { --hero-photo-url: url('/assets/img/hero-jobs.webp'); background-position: center; }
.hero-photo.hero-impressum { --hero-photo-url: url('/assets/img/hero-impressum.webp'); background-position: center 10%; }
.hero-photo.hero-datenschutz { --hero-photo-url: url('/assets/img/hero-datenschutz.webp'); background-position: center 10%; }
.hero-photo.hero-agb { --hero-photo-url: url('/assets/img/hero-agb.webp'); background-position: center 10%; }

.hero-photo.hero-kinderschutz { --hero-photo-url: url('/assets/img/hero-kinderschutz.webp'); background-position: center 20%; }
.hero-photo.hero-waidloewen { --hero-photo-url: url('/assets/img/hero-waidloewen.webp'); background-position: center 40%; }

.hero-photo.hero-baskidball { --hero-photo-url: url('/assets/img/hero-baskidball.webp'); background-position: 70% 60%; }

/* Hero SPORT VERNETZT — Fototermin-Gruppe steht rechts im Panoramabild,
   deshalb Bildausschnitt weit nach rechts verschoben (Gruppe bleibt auch auf
   schmalen Viewports im sichtbaren Ausschnitt statt im linken Leerraum). */
.hero-photo.hero-sportvernetzt { --hero-photo-url: url('/assets/img/hero-sportvernetzt.webp'); background-position: 82% 40%; }

.hero-photo.hero-schulprogramm { --hero-photo-url: url('/assets/img/hero-schulprogramm.webp'); background-position: 75% 45%; }

.hero-photo.hero-camps { --hero-photo-url: url('/assets/img/hero-camps.webp'); background-position: center 60%; }

.hero-photo.hero-spielplan { --hero-photo-url: url('/assets/img/hero-spielplan.webp'); background-position: 70% 40%; }

/* Hero-Variante für die Freundeskreis-Seite — Kinder mit Maskottchen beim BasKIDball,
   Motiv sitzt rechts im Bild, deshalb Bildausschnitt nach rechts verschoben. */
.hero-photo.hero-freundeskreis { --hero-photo-url: url('/assets/img/hero-freundeskreis.webp'); background-position: 80% 42%; }
/* Lead-Text auf dieser Seite ist kurz genug, um im Desktop-Format in eine Zeile
   zu passen (siehe Kommentar oben) — auf Mobil aber wieder normal umbrechen
   lassen, sonst läuft die feste Zeile über den Viewport-Rand hinaus und über
   das Foto (Lesbarkeitsproblem, gemeldet 23.07.2026). */
.hero-photo.hero-freundeskreis p.lead { max-width: 640px; white-space: nowrap; }
@media (max-width: 899px) {
  .hero-photo.hero-freundeskreis p.lead { white-space: normal; max-width: 46ch; }
}
@media (max-width: 599px) {
  /* Schmalerer Umbruch (3 statt 2 Zeilen) hält den Text im deckenden linken
     Bereich des Verlaufs, statt auf das Foto rechts überzulaufen (Kontrast-
     Problem, gemeldet 23.07.2026). Bildausschnitt zusätzlich etwas nach
     rechts verschoben, aus dem gleichen Grund. */
  .hero-photo.hero-freundeskreis p.lead { max-width: 27ch; }
  .hero-photo.hero-freundeskreis { background-position: 85% 42%; }
}

/* Hero-Variante für die Sponsoren-Seite — Maskottchen klatscht mit Fans in der Kurve,
   Motiv sitzt rechts im Bild, links freie Wand für den Text. */
.hero-photo.hero-sponsoring { --hero-photo-url: url('/assets/img/hero-sponsoring.webp'); background-position: 68% 38%; }
@media (max-width: 599px) {
  /* Gleiches Prinzip wie beim Freundeskreis-Hero: Bildausschnitt auf Mobil
     etwas verschoben, damit die Textbox nicht übers Maskottchen-Foto läuft. */
  .hero-photo.hero-sponsoring { background-position: 82% 34%; }
  /* Überschrift ist lang ("Unsere Sponsoren & Förderpartner.") — ohne
     Breitenbegrenzung würde jede umgebrochene Zeile die volle Containerbreite
     nutzen und dabei übers Foto rechts laufen. */
  .hero-photo.hero-sponsoring h1,
  .hero-photo.hero-sponsoring p.lead { max-width: 21ch; }
}

/* Hero-Variante für die Profi-Team-Seite — echtes Mannschaftsfoto */
.hero-photo.hero-profis { --hero-photo-url: url('/assets/img/team-prob-hero-blur.webp'); background-position: center 20%; }
.hero-photo.hero-damen { --hero-photo-url: url('/assets/img/team-damen-hero-blur.webp'); background-position: center 20%; }
.hero-photo.hero-u19 { --hero-photo-url: url('/assets/img/team-nbbl-hero-blur.webp'); background-position: center 20%; }

/* Hero-Varianten für einzelne News-Artikel mit echtem Pressefoto */
.hero-photo.hero-news-saisonstart-2025 { --hero-photo-url: url('/assets/img/news/saisonstart-2025.webp'); background-position: center 30%; }
.hero-photo.hero-news-mitchell-abgang { --hero-photo-url: url('/assets/img/news/mitchell-abgang.webp'); background-position: center 25%; }
.hero-photo.hero-news-loewenpark-dach { --hero-photo-url: url('/assets/img/news/loewenpark-dach.webp'); background-position: center 55%; }
.hero-photo.hero-news-swe-sommercamp { --hero-photo-url: url('/assets/img/news/swe-sommercamp.webp'); background-position: center 40%; }
.hero-photo.hero-news-damen-regionalliga { --hero-photo-url: url('/assets/img/news/damen-regionalliga.webp'); background-position: center 25%; }
.hero-photo.hero-news-achtelfinale { --hero-photo-url: url('/assets/img/news/achtelfinale.webp'); background-position: center 35%; }
.hero-photo.hero-news-playoff-heimspiel { --hero-photo-url: url('/assets/img/news/playoff-heimspiel.webp'); background-position: center 35%; }

/* Hero-Variante für die Startseite — Platz für eine Seiten-Box (Top-News/Heimspiel).
   Höhe kommt vom vereinheitlichten .hero-photo-Basiswert, hier nur noch Layout/Typo. */
.hero-photo.hero-lg { --hero-photo-url: url('/assets/img/hero-startseite-alt.webp'); background-position: center 20%; }
.hero-photo.hero-lg .container { padding-top: 56px; padding-bottom: 56px; }
.hero-lg-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: 40px; align-items: center; }
.hero-photo.hero-lg h1 { white-space: normal; font-size: clamp(32px, 5vw, 60px); }
.hero-photo.hero-lg p.lead { font-size: 18px; margin-bottom: 22px; }
.hero-side-card {
  background: rgba(255,255,255,.85); border: 1px solid rgba(0,18,45,.08);
  border-radius: var(--radius-lg); padding: 24px; backdrop-filter: blur(3px);
  overflow: hidden;
}
.hero-side-card { position: relative; padding-right: 40px; }
.hero-side-card h3 { margin: 8px 0 10px; }
.hero-side-card .btn { margin-top: 14px; }
/* Testhilfe: Umschalter zwischen den beiden Hero-Widget-Varianten (siehe
   js/home-hero-widget-toggle.js) — vor der finalen Entscheidung wieder entfernen. */
.hero-widget-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,18,45,.08); border: 1px solid rgba(0,18,45,.14);
  color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero-widget-toggle:hover { background: var(--color-brand-orange); color: #fff; border-color: var(--color-brand-orange); }
.news-slides { display: grid; overflow: hidden; }
.news-slide {
  grid-area: 1 / 1; opacity: 0; transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.news-slide.is-active { opacity: 1; transform: translateY(0); }
.news-slide.is-leaving { opacity: 0; transform: translateY(-100%); }
.news-slide.no-anim { transition: none; }
.news-dots {
  position: absolute; top: 24px; right: 16px; bottom: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
/* Sichtbarer Punkt bleibt bei 9px, die klickbare Fläche des Buttons ist mit
   24x24px deutlich großzügiger — sonst muss man exakt den winzigen Punkt
   treffen (Feedback: "muss man gezielt draufklicken"). */
.news-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.news-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--color-brand-orange); background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.news-dot:hover::before { background: var(--color-orange-100); }
.news-dot.is-active::before { background: var(--color-brand-orange); }
/* Nächstes-Heimspiel-Widget: einfacher Klick-Umschalter (kein Auto-Wechsel), nutzt
   dieselben Punkte (.news-dot) wie der Top-News-Slider. */
.next-game-slide { display: none; }
.next-game-slide.is-active { display: block; }
@media (max-width: 1023px) {
  .hero-lg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  /* Höhe kommt vom vereinheitlichten .hero-photo-Basiswert (340px); Innenabstände
     hier weiterhin gestaucht, damit Hero + Widget möglichst ohne Scrollen passen. */
  .hero-photo.hero-lg .container { padding-top: 28px; padding-bottom: 28px; }
  .hero-lg-grid { gap: 20px; }
  .hero-photo.hero-lg p.lead { margin-bottom: 14px; }
  .hero-side-card { padding: 18px; }
}

/* Simple page hero (subpages) — lighter than homepage hero */
.page-hero { padding: 56px 0 40px; }
.page-hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display); font-size: clamp(32px, 5vw, 48px);
  margin: 10px 0 14px; color: var(--text-primary);
}
.page-hero p.lead { font-size: 17px; color: var(--text-secondary); max-width: 60ch; font-weight: var(--weight-light); }

/* =====================================================================
   WERTE BAND
   ===================================================================== */
.werte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; text-align: center; }
.werte-item-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; text-decoration: none; }
.werte-item-head:hover h3 { text-decoration: underline; }
.werte-item .ic {
  width: 40px; height: 40px; border-radius: var(--radius-lg); flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center;
}
.werte-item .ic i { width: 20px; height: 20px; }
.werte-item h3 { font-family: var(--font-base); font-weight: var(--weight-extrabold); font-size: 18px; letter-spacing: -.01em; margin: 0; color: #fff; }
.werte-item p { font-size: 14px; color: rgba(255,255,255,.78); font-weight: var(--weight-light); }

/* =====================================================================
   CTA PANEL
   ===================================================================== */
.cta-panel {
  background: var(--color-orange-50); border: 1px solid var(--color-orange-100);
  border-radius: var(--radius-xl); padding: 56px; text-align: center;
}
.cta-panel h2 { margin-bottom: 14px; }
.cta-panel p { max-width: 52ch; margin: 0 auto 24px; color: var(--text-secondary); }

/* =====================================================================
   FREUNDESKREIS-GALERIE (js liest data/freundeskreis.json) — Kachel je
   Freund: Initialen-Avatar (bis echte Fotos vorliegen) + additive
   Stern-Badges direkt am Kreisrand (Slot 1 = ca. 2 Uhr, Slot 2 = 12 Uhr,
   Slot 3 = ca. 10 Uhr). Grün = Freundeskreis (alle, immer Slot 1), Orange
   = Sponsor, Gold = Gesellschafter — jemand kann mehrere/alle drei
   gleichzeitig haben. Nur Vorname wird gezeigt. */
.freundeskreis-gallery {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
}
.freundeskreis-card { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 120px; }
.freundeskreis-avatar { position: relative; width: 88px; height: 88px; }
.freundeskreis-avatar-circle {
  width: 88px; height: 88px; border-radius: 50%; background: var(--bg-subtle); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: 22px; color: var(--text-muted);
  overflow: hidden;
}
.freundeskreis-avatar-circle.has-photo { padding: 0; }
.freundeskreis-avatar-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.freundeskreis-star {
  position: absolute; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.freundeskreis-star-slot-1 { top: -4px; left: 58px; z-index: 3; }
.freundeskreis-star-slot-2 { top: -14px; left: 36px; z-index: 2; }
.freundeskreis-star-slot-3 { top: -11px; left: 14px; z-index: 1; }
.freundeskreis-star img { width: 18px; height: 18px; display: block; }
.freundeskreis-star::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--text-primary); color: #fff; font-size: 11px; font-weight: var(--weight-semibold);
  padding: 4px 9px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out); pointer-events: none; z-index: 5;
}
.freundeskreis-star:hover::after, .freundeskreis-star:focus-visible::after { opacity: 1; visibility: visible; }
.freundeskreis-card-name { font-size: 14px; font-weight: var(--weight-semibold); margin: 0; }
.freundeskreis-legend {
  display: flex; gap: 20px; justify-content: center; margin-top: 20px; font-size: 13px; color: var(--text-muted);
}
.freundeskreis-legend span { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 110px; }
.freundeskreis-legend img { width: 18px; height: 18px; display: block; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-panel { background: var(--bg-subtle); padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-xl); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: var(--weight-semibold); margin-bottom: 6px; color: var(--text-primary); }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong); font-family: var(--font-base);
  font-size: 14px; line-height: 20px; color: var(--text-primary); background: #fff;
  transition: all var(--dur-fast) var(--ease-out);
}
.field select:required:invalid { color: var(--text-muted); }
.field select option { color: var(--text-primary); }
/* Mobile Browser rendern type="date" mit einer eigenen Intrinsic-Höhe statt
   der Padding/Line-Height-Berechnung der Geschwister-Felder — je nach OS/
   Browser-Version mal größer, mal (wie zuletzt auf iOS gemeldet) nur noch
   halb so hoch. Feste height statt nur min-height macht das unabhängig von
   dieser Berechnung. Placeholder wird von type="date" nicht angezeigt,
   deshalb hier (als einzige Ausnahme im Formular) ein sichtbares <label>
   statt sr-only. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  height: 45px;
  text-align: left;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.family-card { position: relative; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 16px 40px 4px 16px; margin-bottom: 12px; background: #fff; }
.family-card .remove-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.family-card .remove-btn:hover { color: var(--color-error); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(0,40,170,.15);
}
.field textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-status { padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; margin-top: 16px; display: none; }
.form-status.visible { display: block; }
.form-status.success { background: var(--color-success-bg); color: #0E5A36; }
.form-status.error { background: var(--color-error-bg); color: #7A1A1A; }
.result-box {
  border: 1.5px solid var(--color-brand-orange); background: var(--color-orange-50);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 8px; display: none;
}
.result-box.visible { display: block; }
.result-box .label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-orange-700); font-weight: var(--weight-semibold); margin-bottom: 6px; }
.result-box .value { font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-primary); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold);
  font-size: 12px; padding: 5px 12px; border-radius: var(--radius-full);
}
.badge-orange { background: var(--color-orange-50); color: var(--color-orange-700); border: 1px solid var(--color-orange-100); }
.badge-info { background: var(--color-info-bg); color: #001B70; }
.badge-success { background: var(--color-success-bg); color: #0E5A36; }

/* =====================================================================
   FIXTURE / SCHEDULE ROWS
   ===================================================================== */
.fixture-row {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border);
  margin-bottom: 12px;
}
.fixture-date { font-size: 15px; font-weight: var(--weight-bold); }
.fixture-time { font-size: 13px; color: var(--text-muted); }
.fixture-mid .matchup { font-size: 16px; font-weight: var(--weight-bold); margin: 4px 0; }
.fixture-mid .venue { font-size: 13px; color: var(--text-secondary); }
.fixture-result { font-size: 22px; font-weight: var(--weight-black); }

/* Spielplan: nach Kalendertag gruppierte Karten (mehrere Teams pro Tag möglich) */
.fixture-day {
  padding: 20px 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border);
  margin-bottom: 14px;
}
.fixture-day-date { font-size: 15px; font-weight: var(--weight-extrabold); margin-bottom: 14px; }
.fixture-day-group.has-divider { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.fixture-day-game { display: grid; grid-template-columns: 180px 1fr auto; gap: 16px; align-items: center; }
.fixture-day-game.has-divider { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.fixture-day-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fixture-time { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.fixture-time .cal-link { display: inline-flex; flex-shrink: 0; }
.fixture-venue-line { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; row-gap: 2px; }
.fixture-venue-line i { flex-shrink: 0; }
.fixture-venue-line a { color: inherit; }
.fixture-venue-line a:hover { color: var(--color-brand-orange); }
.venue-heim { color: var(--color-brand-orange-text); font-weight: var(--weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 11px; }
.team-badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: var(--weight-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); padding: 3px 9px; border-radius: var(--radius-full);
  margin-bottom: 6px; text-decoration: none;
}
.team-badge:hover { filter: brightness(0.94); }
.team-badge-profis { background: var(--color-success-bg); color: var(--color-success); }
.team-badge-damen { background: var(--color-orange-50); color: var(--color-orange-700); }
.team-badge-nbbl { background: var(--color-blue-100); color: var(--color-blue-700); }
.fixture-day-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fixture-result-row { display: flex; align-items: center; gap: 8px; }
@media (max-width: 599px) {
  .fixture-day-game { grid-template-columns: 1fr; text-align: left; }
  .fixture-day-actions { align-items: flex-start; margin-top: 4px; }
}

/* =====================================================================
   PRETIX-TICKETSHOP-WIDGET — Wrapper gegen bekannten Body-Collapse-Bug
   (siehe Ticketing-Briefing: <pretix-widget> nutzt kein Shadow-DOM und
   kann ohne diesen Wrapper globale Breiten-Styles der Seite stören).
   ===================================================================== */
.pretix-embed-wrapper {
  width: 100%; max-width: 100%; overflow-x: auto;
  min-height: 120px;
}
.pretix-embed-wrapper pretix-widget { display: block; width: 100%; }

/* =====================================================================
   TICKETING — Event-Übersicht (Liste + Preis-Sidebar)
   ===================================================================== */
.ticket-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.ticket-list { display: flex; flex-direction: column; }
.ticket-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--radius-lg); background: #fff;
  border: 1.5px solid var(--border); transition: all var(--dur-fast) var(--ease-out);
  margin-bottom: 16px;
}
.ticket-row.featured { border-color: var(--color-brand-orange); box-shadow: 0 0 0 3px var(--color-orange-100); }
.ticket-row-title { font-size: 16px; font-weight: var(--weight-regular); color: var(--text-primary); margin-bottom: 6px; }
.ticket-row-title strong { font-weight: var(--weight-bold); }
.ticket-row-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.ticket-row-meta span, .ticket-row-meta a { display: inline-flex; align-items: center; gap: 5px; }
.ticket-row-meta a { color: inherit; }
.ticket-row-meta a:hover { color: var(--color-brand-orange); text-decoration: underline; }
.ticket-row-vvk { margin-top: 10px; }
.cal-link { display: inline-flex; align-items: center; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.cal-link:hover { color: var(--color-brand-orange); }
.ticket-sidebar {
  position: sticky; top: 96px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
}
.ticket-sidebar .price-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bg-muted); font-size: 14px; }
.ticket-sidebar .price-row:last-of-type { border-bottom: none; }
@media (max-width: 1023px) {
  .ticket-layout { grid-template-columns: 1fr; }
  .ticket-sidebar { position: static; }
}

/* =====================================================================
   RABATT-ECKE — fixe Eck-Banderole unten rechts (bleibt beim Scrollen sichtbar)
   + Modal (Vereinsmitglieds-Rabatt)
   ===================================================================== */
.discount-corner-fixed {
  position: fixed; bottom: 0; right: 0; z-index: 45;
  width: 150px; height: 150px; overflow: hidden; pointer-events: none;
}
.discount-corner-fixed .ribbon-inner {
  position: absolute; bottom: 40px; right: -42px; width: 200px;
  padding: 9px 0; text-align: center;
  background: var(--color-brand-orange-text); color: #fff; border: none;
  transform: rotate(-45deg); font-family: var(--font-base);
  font-weight: var(--weight-bold); font-size: 13px; letter-spacing: .02em;
  cursor: pointer; box-shadow: var(--shadow-ribbon-up); pointer-events: auto;
  transition: background var(--dur-fast) var(--ease-out);
}
.discount-corner-fixed .ribbon-inner:hover { background: var(--action-primary-hover); }
@media (max-width: 599px) {
  .discount-corner-fixed { width: 110px; height: 110px; }
  .discount-corner-fixed .ribbon-inner { bottom: 28px; right: -34px; width: 150px; font-size: 12px; padding: 7px 0; }
}

/* =====================================================================
   FEEDBACK-WIDGET — schwebender Button unten rechts, nur für die
   Launch-Phase gedacht. Kompletter Block (HTML in footer.html, JS in
   nav.js) kann später rückstandslos entfernt werden.
   ===================================================================== */
.feedback-widget { position: fixed; right: 20px; bottom: 20px; z-index: 200; }
.feedback-widget-btn {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--color-brand-orange-text); color: #fff; border: none;
  border-radius: var(--radius-full); padding: 12px 18px;
  font-family: var(--font-base); font-size: 14px; font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.feedback-widget-btn:hover { background: var(--action-primary-hover); transform: translateY(-1px); }
.feedback-widget.open .feedback-widget-btn { display: none; }
.feedback-widget-panel {
  display: none; position: absolute; bottom: 0; right: 0;
  width: min(420px, calc(100vw - 40px)); background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px;
}
.feedback-widget.open .feedback-widget-panel { display: block; }
.feedback-widget-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.feedback-widget-panel-head h3 { font-size: 18px; font-weight: var(--weight-bold); color: var(--text-primary); margin: 0; }
.feedback-widget-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; display: flex; }
.feedback-widget-hint { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.feedback-widget-hint a { color: inherit; }
.feedback-widget-label { display: block; font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: 6px; }
.feedback-widget select, .feedback-widget textarea, .feedback-widget input[type="text"] {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 12px; font-family: var(--font-base); font-size: 14px; color: var(--text-primary);
  margin-bottom: 14px;
}
.feedback-widget select { background: #fff; cursor: pointer; }
.feedback-widget textarea { min-height: 130px; resize: vertical; }
.feedback-widget-submit {
  width: 100%; background: var(--color-brand-orange-text); color: #fff; border: none;
  border-radius: var(--radius-md); padding: 12px; font-family: var(--font-base);
  font-size: 15px; font-weight: var(--weight-semibold); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.feedback-widget-submit:hover { background: var(--action-primary-hover); }
.feedback-widget-submit:disabled { opacity: .6; cursor: default; }
.feedback-widget-success { text-align: center; padding: 16px 0; font-size: 15px; color: var(--text-primary); }
@media (max-width: 599px) {
  .feedback-widget { right: 12px; bottom: 12px; }
  .feedback-widget-btn { padding: 10px 14px; font-size: 13px; }
  .feedback-widget-panel { padding: 22px; }
}

/* Variante: Banderole oben an einer einzelnen Box (z.B. Einzelpreise-Karte) */
.discount-corner-wrap { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.discount-ribbon {
  position: absolute; top: 22px; right: -46px; z-index: 5;
  background: var(--color-brand-orange-text); color: #fff;
  padding: 7px 52px; transform: rotate(45deg);
  font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .02em;
  cursor: pointer; border: none; box-shadow: var(--shadow-ribbon);
  transition: background var(--dur-fast) var(--ease-out);
}
.discount-ribbon:hover { background: var(--action-primary-hover); }

/* Sitzplan links / Kaufbox rechts auf der Ticket-Detailseite */
.ticket-detail-grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 1023px) {
  .ticket-detail-grid { grid-template-columns: 1fr; }
  /* Auf schmalen Formfaktoren zuerst der Warenkorb, der Blockplan folgt darunter. */
  .ticket-detail-grid .ticket-cart-col { order: 1; }
  .ticket-detail-grid .ticket-blockplan-col { order: 2; }
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,18,45,.5); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: #fff; border-radius: var(--radius-xl); padding: 32px;
  max-width: 420px; width: 100%; position: relative; box-shadow: var(--shadow-lg);
  text-align: center;
}
.modal-box .modal-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  cursor: pointer; color: var(--text-muted);
}
.modal-box .modal-icon {
  width: 56px; height: 56px; border-radius: var(--radius-full); margin: 0 auto 16px;
  background: var(--color-orange-50); color: var(--color-brand-orange);
  display: flex; align-items: center; justify-content: center;
}
/* Große Modal-Variante — z.B. Blockplan-Popup, so groß wie es der Bildschirm zulässt */
.modal-box-blockplan {
  max-width: min(95vw, 1100px); width: 100%; height: min(90vh, 900px);
  display: flex; flex-direction: column; text-align: left; padding: 24px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* Schwarz/Orange-Optik: oben ein wirklich leuchtendes Orange, das erst nach
   und nach in Schwarz übergeht. Wichtig: die Farbstops sind volldeckend
   (kein rgba(...) Richtung Schwarz) — ein halbtransparentes Orange über
   Schwarz verrechnet sich automatisch zu einem trüben Braun statt zu
   leuchten, deshalb vorher der "schmutzige" Eindruck. Eine Standardversion
   für den gesamten Footer. */
/* Rein LINEARER Verlauf (180deg) — über die volle Breite exakt einheitlich.
   Ein radialer Verlauf (auch als zusätzlicher, dezenter "Leuchten"-Layer
   obendrüber) ist entlang der Kante nur an einer x-Position exakt auf dem
   Referenzwert der Ellipse — überall sonst liegt der Verlauf durch die
   Ellipsen-Geometrie schon weiter fortgeschritten. Das erzeugte am Übergang
   zu .footer-leagues-top (dessen Kante flach endet) je nach Radius mal an
   den Rändern, mal (bei einem zusätzlichen weißen Radial-Leuchten in der
   Mitte zentriert) genau in der Bildmitte eine sichtbare Naht. Ein einzelner
   180°-Verlauf hat dieses Problem strukturell nicht — keine x-Abhängigkeit. */
.site-footer {
  background: linear-gradient(180deg, var(--color-footer-glow-bright) 0%, var(--color-brand-orange) 20%, var(--color-footer-glow-deep) 60%, var(--color-footer-glow-end) 100%);
  color: rgba(255,255,255,.7);
}
/* Nur auf der Startseite, direkt vor dem eigentlichen <footer> — statt eines
   flachen Farbtons ein eigener kurzer Verlauf, dessen untere Kante GENAU im
   Ton endet, mit dem .site-footer oben beginnt (--color-footer-glow-bright).
   So lesen sich beide Blöcke als ein durchgehendes Leuchten statt als zwei
   getrennte Flächen mit sichtbarer Kante. */
/* Startet bei Weiß (statt direkt beim hellen Orange) — sonst entsteht genau
   an der Kante zur weißen Seite darüber ein harter Schnitt statt eines
   Einblendens. Ab dort wie gehabt weiter zum Footer-Verlauf. */
.footer-leagues-top {
  background: linear-gradient(180deg, #fff 0%, var(--color-footer-glow-start) 45%, var(--color-footer-glow-bright) 100%);
  color: rgba(0,18,45,.75);
  padding: 20px 0;
}
.footer-leagues-top .container {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.footer-leagues-top .container.footer-leagues-split {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: center; gap: 32px;
}
.footer-leagues-left { grid-column: 1 / 3; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-leagues-right { grid-column: 3 / 5; display: flex; justify-content: center; }
.footer-leagues-right img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-sm); }
.footer-leagues-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(0,18,45,.6);
}
.footer-leagues-logos-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.league-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 6px 16px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  transition: background var(--dur-fast) var(--ease-out);
}
a.league-chip:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.league-chip-light { background: #fff; border-color: var(--border); }
a.league-chip-light:hover { background: var(--bg-subtle); }
.footer-leagues-logos-row img { height: 26px; width: auto; display: block; }
.footer-social { display: flex; gap: 16px; margin-top: 21px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-social a svg { width: 22px; height: 22px; }
/* Kein Orange auf Hover: der Footer geht oben in helles Orange über (s.
   .site-footer-Verlauf) — Orange-Text/Icons wären dort unsichtbar. Skalierung
   statt Farbwechsel funktioniert unabhängig vom Hintergrundton. */
.footer-social a:hover { transform: scale(1.15); }
.footer-address { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px;
  padding: 64px 0 40px;
}
.footer-col img { height: 48px; margin-bottom: 16px; }
.footer-brand-mark { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.footer-brand-mark img { height: 64px; margin-bottom: 0; }
.footer-brand-wordmark {
  display: flex; flex-direction: column; align-items: flex-start; height: 60px; justify-content: space-between;
  font-family: var(--font-display); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display); color: #fff; text-transform: uppercase;
}
.footer-brand-wordmark .line-1 { font-size: 26.25px; line-height: 1; display: block; }
.footer-brand-wordmark .line-2 { font-size: 33.3px; line-height: 1; display: block; }
.footer-col p { font-size: 14px; max-width: 34ch; line-height: 1.6; font-weight: var(--weight-light); }
.footer-col h4 {
  color: #fff; font-weight: var(--weight-semibold); font-size: 14px;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px;
}
.footer-col a { display: block; font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,.7); }
/* Weiß + Unterstrich statt Orange auf Hover: der Footer geht oben in helles
   Orange über, Orange-Text wäre dort unsichtbar. Volles Weiß + Unterstrich
   funktioniert unabhängig davon, ob der Link gerade auf Orange oder Schwarz sitzt. */
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-donate-btn { display: inline-flex; align-items: center; color: #fff; }
.footer-donate-btn:hover { color: #fff; }
.footer-donate-btn-icon { display: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 32px 0;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; align-items: start;
}
.footer-bottom-col { display: flex; flex-direction: column; gap: 10px; }
.footer-bottom-legal { grid-column: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; }
.footer-bottom-legal a, .footer-bottom-legal span { display: block; }
.footer-bottom-badge { grid-column: 2; }
.footer-bottom-account { grid-column: 3; }
.footer-bottom-donate-btn { grid-column: 4; align-items: flex-start; }
.footer-donate-lines {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  font-size: 13px; color: rgba(255,255,255,.55); font-weight: var(--weight-light); line-height: 1.5;
}
.footer-badge-btn { background: none; border: none; padding: 0; cursor: pointer; display: block; line-height: 0; }
.footer-badge-btn img { height: 72px; width: auto; border-radius: var(--radius-sm); display: block; transition: transform var(--dur-med) var(--ease-out); }
.footer-badge-btn:hover img, .footer-badge-btn:focus-visible img { transform: scale(1.06); }

/* =====================================================================
   RESPONSIVE — 3 Standard-Breakpoints (Laptop >=1024 / Tablet 600-1023 /
   Mobile <=599), site-weit als max-width:599px / max-width:1023px /
   min-width:600px / min-width:1024px verwendet. CSS Custom Properties
   funktionieren nicht innerhalb @media-Bedingungen (Browser-Limitierung),
   deshalb hier als Kommentar statt als --token dokumentiert.
   Einzelne Komponenten (Freundeskreis-Sterne, Sponsoring-Hero, Insta-Detail,
   Buy-Grid, Fanshop-Produktraster, Tablet-Nav-Schwelle) haben bewusst eigene,
   engere Breakpoints (700/719/860/899/900px) für ihren jeweiligen Inhalt —
   das sind keine Tippfehler, sondern Reflow-Punkte für die jeweilige
   Komponente, unabhängig von den 3 Standard-Stufen.
   ===================================================================== */

/* --- Tablet + Mobile shared (max-width: 1023px) --- */
@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 48px; }
  .grid-3, .werte-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-leagues-top .container.footer-leagues-split { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .footer-leagues-left, .footer-leagues-right { grid-column: auto; justify-content: center; }
  .footer-bottom { grid-template-columns: 1fr 1fr; }
  .footer-bottom-legal { grid-column: 1; }
  .footer-bottom-badge { grid-column: 1; }
  .footer-bottom-account { grid-column: 2; }
  .footer-bottom-donate-btn { grid-column: 2; margin-top: 16px; }
  .form-row { grid-template-columns: 1fr; }

  /* main nav collapses; drawer trigger appears */
  .main-nav { display: none; }
}

/* --- Tablet only (600–1023px) --- */
@media (min-width: 600px) and (max-width: 1023px) {
  .utility-link .label-text { display: none; }
  .utility-bar .container { justify-content: flex-end; gap: 16px; }
  .utility-link { font-size: 0; gap: 0; }
  .main-nav-bar .container { position: relative; }
  .more-btn { display: inline-flex; }
  .drawer-utility-section { display: none; }

  /* Footer wird hier zweispaltig — der Spenden-Button bekommt eine eigene schmale
     dritte Spalte, statt unter das Spendenkonto zu rutschen, und schrumpft dafür
     auf ein quadratisches Herz-Icon ohne Text. */
  .footer-bottom { grid-template-columns: 1.3fr 1fr auto; }
  .footer-bottom-badge { grid-column: 1; }
  .footer-bottom-account { grid-column: 2; }
  .footer-bottom-donate-btn { grid-column: 3; margin-top: 0; align-self: center; }
  .footer-donate-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--radius-full); }
  .footer-donate-btn-text { display: none; }
  .footer-donate-btn-icon { display: inline-block; }
}

/* Genug Platz für Logo + 3 Nav-Punkte + „Mehr" einzeilig (schmalere Tablets sonst:
   „Mehr" zeigt dann alle 7 Punkte statt nur der 4 zusätzlichen). */
@media (min-width: 860px) and (max-width: 1023px) {
  .main-nav.tablet-visible {
    display: flex; position: static; margin-left: auto; margin-right: 12px;
  }
  .main-nav.tablet-visible .drawer-only-4 { display: none; }
  .drawer-nav-item.core-item { display: none; }
}

/* --- Mobile only (<=599px) --- */
@media (max-width: 599px) {
  .utility-bar { display: none; }
  .main-nav.tablet-visible { display: none; }
  .more-btn { display: none; }
  .hamburger-btn { display: inline-flex; }
  .nav-actions .mobile-cta { display: inline-flex; }
  .section { padding: 48px 0; }
  .cta-panel { padding: 32px 20px; }
  .fixture-row { grid-template-columns: 1fr; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; padding: 48px 0 32px; }
  .footer-bottom { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .footer-bottom-col { align-items: center; }
  .footer-bottom-legal { grid-column: 1; }
  .footer-bottom-badge { grid-column: 1; display: flex; justify-content: center; }
  .footer-bottom-account { grid-column: 1; }
  .footer-bottom-donate-btn { grid-column: 1; margin-top: 6px; }
  .footer-donate-lines { text-align: center; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Über-uns: Soziale Sportidee + Werte sollen mobil einspaltig stehen (die
     globale 2-Spalten-Regel oben ist für andere .grid-4 wie das Partner-Logo-
     Raster auf der Startseite gedacht) — deshalb hier gezielt überschrieben. */
  #soziale-sportidee .grid-4, #werte .grid-4 { grid-template-columns: 1fr; }
  /* Die Desktop-Regel für die 4er-Reihe (width: 25%) greift rechnerisch auch
     hier, sobald die Positions-/Teileranzahl zufällig passt — bei 2 Spalten
     muss die Lücke aber die Hälfte statt ein Viertel der Breite bekommen,
     sonst schrumpft die letzte Kachel (z.B. SWE-Logo) sichtbar kleiner als
     die anderen. */
  #hauptpartner-grid > *:last-child:nth-child(4n+1) { width: calc(50% - 10px); }
  /* Kachel-Reihen als horizontales Swipe-Karussell statt gestapelt, damit
     immer sichtbar bleibt, dass es mehr Kacheln gibt (BasKIDball-Feedback,
     bisher nur dort verwendet). */
  .grid-4.tile-scroll-mobile, .grid-3.tile-scroll-mobile {
    display: flex; grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 6px;
  }
  .tile-scroll-mobile > * { flex: 0 0 80%; scroll-snap-align: start; }
}

/* =====================================================================
   Panini-Kader (Team-Seiten) — Spieler-/Trainerkacheln im Sticker-Stil.
   Fehlt ein Bild/Spieler, bleibt die Kachel als "leerer Sticker" (is-empty)
   mit gestricheltem Rahmen und Fragezeichen stehen.
   ===================================================================== */
.panini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.panini-grid-coaches { grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); justify-content: center; }
@media (max-width: 599px) {
  .panini-grid-coaches { grid-template-columns: repeat(2, 1fr) !important; justify-content: initial; }
}
.panini-card {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4;
  border-radius: var(--radius-md); overflow: hidden;
  background: #fff;
}
.panini-card-photo {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-violet); overflow: hidden;
}
.panini-card-number {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-base); font-weight: var(--weight-extrabold); font-size: 60px;
  color: rgba(255,255,255,.16); line-height: 1;
}
.panini-card-photo > i { position: relative; z-index: 1; width: 30px; height: 30px; color: rgba(255,255,255,.55); }
.panini-card-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2; background: var(--color-brand-orange-text); color: #fff;
  font-weight: var(--weight-extrabold); font-size: 12px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.panini-card-info { padding: 8px 6px; text-align: center; border-top: 2px solid var(--color-brand-navy); }
#responsible-grid .panini-card { border: 2px solid var(--color-brand-orange); }
#responsible-grid .panini-card-info { border-top-color: var(--color-brand-orange); }
.panini-card-name { font-weight: var(--weight-extrabold); font-size: 13px; line-height: 1.2; color: var(--color-brand-navy); }
.panini-card-meta { font-size: 11px; line-height: 1.3; color: var(--text-muted); margin-top: 2px; min-height: 2.6em; }
.panini-card.is-empty .panini-card-name { color: var(--text-muted); font-weight: var(--weight-semibold); }
.panini-wrap { position: relative; cursor: pointer; }
.panini-wrap:focus-visible .panini-card { outline: 2px solid var(--color-brand-orange); outline-offset: 2px; }
.panini-photo-frame {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 10px; text-align: center; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.panini-photo-frame > i { color: rgba(255,255,255,.55); }
.panini-photo-frame-0 img,
.panini-photo-frame-1 img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.panini-photo-frame-0,
.panini-photo-frame-1:has(img) { padding: 0; }
.panini-photo-frame-0 { opacity: 1; }
.panini-photo-frame-1 span { font-size: 10px; color: rgba(255,255,255,.65); }
.panini-photo-frame-2 { align-items: stretch; justify-content: center; padding: 12px; overflow-y: auto; }
.panini-steckbrief {
  list-style: none; margin: 0; padding: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 7px;
  font-size: clamp(10px, 3vw, 12.5px); line-height: 1.25; color: #fff; text-align: left;
}
.panini-steckbrief .steckbrief-label {
  display: block; font-size: clamp(8.5px, 2.4vw, 10px); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-brand-orange); margin-bottom: 1px;
}
.panini-steckbrief li:first-child { font-weight: var(--weight-bold); font-size: 1.08em; }
.panini-wrap[data-step="1"] .panini-photo-frame-0,
.panini-wrap[data-step="2"] .panini-photo-frame-0 { opacity: 0; }
.panini-wrap[data-step="1"] .panini-photo-frame-1 { opacity: 1; }
.panini-wrap[data-step="2"] .panini-photo-frame-2 { opacity: 1; }
@media (max-width: 1023px) {
  .panini-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 599px) {
  .panini-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.teamfoto-placeholder {
  position: relative; display: block; width: 100%; max-width: 440px; border: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-lg); overflow: hidden; background: none;
}
.teamfoto-placeholder img { width: 100%; display: block; filter: blur(5px); transform: scale(1.08); }
.teamfoto-placeholder-note {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: rgba(0,18,45,.35); color: #fff; font-size: 12px; font-weight: var(--weight-semibold);
}

/* =====================================================================
   ACCORDION (Klappbox) — z.B. Vision/Ziele, Soziale Sportidee auf Über-uns
   ===================================================================== */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.accordion summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; font-weight: var(--weight-extrabold); font-size: 16px; color: var(--text-primary);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::marker { content: ''; }
.accordion-icon { transition: transform var(--dur-fast) var(--ease-out); flex-shrink: 0; color: var(--color-brand-orange); }
.accordion[open] .accordion-icon { transform: rotate(180deg); }
.accordion-body { padding: 0 22px 22px; }

/* =====================================================================
   FILTER CHIPS — z.B. Verantwortliche nach Organisation filtern
   ===================================================================== */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px; }
.filter-chip {
  display: inline-flex; align-items: center; padding: 8px 18px; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-secondary);
  font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange); }
.filter-chip.is-active { background: var(--color-brand-orange-text); border-color: var(--color-brand-orange-text); color: #fff; }

/* Spielplan: kompakte Team-Schnelllinks über der Tages-Liste */
.spielplan-cal-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Spielberichte: horizontaler 5-Kachel-Slider auf der Spielplan-Seite */
.spielberichte-slider-wrap { position: relative; }
.spielberichte-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.spielberichte-track::-webkit-scrollbar { display: none; }
.spielberichte-track > .card { flex: 0 0 260px; scroll-snap-align: start; }
@media (max-width: 599px) {
  .spielberichte-track > .card { flex: 0 0 78%; }
}

/* =====================================================================
   FLIP-CARD — Verantwortliche: Klick zeigt Steckbrief auf der Rückseite
   ===================================================================== */
.flip-card { perspective: 1200px; cursor: pointer; }
.flip-card-inner {
  position: relative; width: 100%; min-height: 110px; transition: transform var(--dur-slow) var(--ease-out);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center;
}
.flip-card-front .card-body, .flip-card-back .card-body { width: 100%; }
.flip-card-back { transform: rotateY(180deg); background: var(--color-brand-navy); border-radius: var(--radius-lg); }
.flip-card-back .card-body p { color: rgba(255,255,255,.85); margin: 2px 0 0; }
.flip-card-back .card-label { color: rgba(255,255,255,.6); }
.flip-card[hidden] { display: none; }