/* ---------------------------------------------------------------
   Vereinsfarben aus dem Wappen – hier zentral anpassen
   --------------------------------------------------------------- */
:root {
  --blue: #0151a1;
  --blue-600: #0a4990;
  --blue-700: #073c7a;
  --blue-800: #062f62;
  --blue-900: #04244d;
  --sky: #3d8bff;
  --yellow: #fcc804;
  --red: #db032c;
  --paper: #eef3fa;
  --blue-tint: #e4edfa;
  --ink: #0a2244;
  /* Mädchen-Teams ohne eigene Farbe (19.10.2026, wie Entwurf 1): gleiches Blau wie alle Mannschaften */
  --girls: var(--blue);
  --girls-tint: var(--blue-tint);

  --radius: 22px;
  --wrap: 1240px;
  /* Luft oben und unten in jedem Bereich (19.10.2026: EIN Wert für alle Seiten, gerade Kanten ohne Wellen) */
  --luft: clamp(40px, 4.5vw, 64px);
  --gutter: clamp(16px, 4vw, 40px);
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Kratzer-Textur im Stil der Social-Media-Grafiken.
     Original-Hintergrund einsetzen: url("hintergrund.jpg") center / cover */
  --tex-bg: url("kratzer.svg") center / cover no-repeat, linear-gradient(100deg, #0b5cb5 0%, #074592 45%, #042a62 78%, #031a3f 100%);
  --tex-soft: url("kratzer.svg") center / cover no-repeat, linear-gradient(100deg, #0a57ad 0%, #0151a1 50%, #073c7a 100%);
}
.tex { background: var(--tex-soft); }
/* Alle dunkelblauen Abschnitte mit Kratzer-Textur */
section.theme-deep { background: url("kratzer.svg") center / cover no-repeat, linear-gradient(100deg, #0a4a93 0%, #073c7a 55%, #052f62 100%); }

/* Farbwelten je Abschnitt: Komponenten nutzen nur diese Variablen */
.theme-blue, .theme-deep, .theme-navy {
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .82);
  --muted: rgba(255, 255, 255, .64);
  --surface: rgba(255, 255, 255, .08);
  --surface-2: rgba(255, 255, 255, .13);
  --tint: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .28);
  --hl: #ffffff;
  --hl-ink: var(--blue-900);
  --btn: #ffffff;
  --btn-ink: var(--blue);
  --dash: rgba(255, 255, 255, .6);
  --pop: #ffffff;
  --pop-ink: var(--blue);
  --stroke: rgba(255, 255, 255, .16);
  color-scheme: dark;
}
.theme-blue { --bg-s: var(--blue); }
.theme-deep { --bg-s: var(--blue-700); }
.theme-navy { --bg-s: var(--blue-900); }
.theme-light {
  --bg-s: var(--paper);
  --text: var(--ink);
  --text-2: #1b3258; /* Feedback #29: sehr dunkles Blau (Kontrast 11,5:1), noch heller als die fetten Wörter (--ink) */
  --muted: #63748f;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --tint: rgba(1, 81, 161, .07);
  --line: rgba(1, 81, 161, .12);
  --line-strong: rgba(1, 81, 161, .28);
  --hl: var(--blue);
  --hl-ink: #ffffff;
  --btn: var(--blue);
  --btn-ink: #ffffff;
  --dash: var(--blue);
  --pop: var(--blue);
  --pop-ink: #ffffff;
  --stroke: rgba(1, 81, 161, .16);
  color-scheme: light;
}
.theme-blue, .theme-deep, .theme-navy, .theme-light { background-color: var(--bg-s); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 136px; }
body {
  margin: 0;
  background: var(--blue);
  color: #fff;
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .92;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: italic 800 13px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hl);
}
.eyebrow::before { content: ""; width: 26px; height: 4px; background: var(--dash, currentColor); transform: skewX(-20deg); }

/* Instagram-typische Schrägbalken-Markierung */
.bar {
  display: inline-block; line-height: 1; padding: .2em .34em .1em .2em; margin-left: -.06em;
  background: #ffffff; color: var(--blue);
  transform: skewX(-8deg);
}
.bar > span { display: inline-block; transform: skewX(8deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 12px;
  font: 700 15px/1 var(--font-body); letter-spacing: .01em;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--btn); color: var(--btn-ink); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--tint); border-color: var(--text); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mainbar { position: relative; transition: background .3s, box-shadow .3s; }
/* Kopfleiste beim Scrollen: dunkleres Marineblau mit Milchglas, damit sie sich vom Blau der Seite absetzt,
   dazu eine feine helle Unterkante. Oben auf der Seite bleibt sie transparent über dem Kopfbereich.
   Die Bereichs-Kapsel (.td-shell) dockt nahtlos an und nutzt deshalb dieselbe Farbe. */
:root { --bar-bg: color-mix(in srgb, #062a52 90%, transparent); --bar-line: rgba(255, 255, 255, .12); }
.nav.scrolled .mainbar, .nav.mega-open .mainbar {
  background: var(--bar-bg);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: inset 0 -1px 0 var(--bar-line), 0 12px 32px -18px rgba(0, 0, 0, .65);
}
.mainbar > .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 52px; height: 53px; flex: none; transition: transform .3s; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.brand:hover img { transform: rotate(-5deg) scale(1.05); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font: italic 900 20px/1 var(--font-display); text-transform: uppercase; }
.brand-text span { font-size: 11px; opacity: .75; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }

.mainbar > .wrap { position: relative; }
.nav .brand {
  position: absolute; z-index: 3; left: calc(var(--gutter) - 14px); top: 6px; transform: none; /* etwas weiter links, damit „Mannschaften“ nicht am Wappen klebt (Feedback 07.10.2026) */
  transition: top .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.nav .brand img { width: 112px; height: 114px; transition: width .55s cubic-bezier(.2,.8,.2,1), height .55s cubic-bezier(.2,.8,.2,1), transform .3s; filter: drop-shadow(0 10px 24px rgba(2, 20, 50, .45)); }
.nav .brand-text { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.nav.scrolled .brand, .nav.mega-open .brand { top: 50%; transform: translateY(-50%); }
.nav.scrolled .brand img, .nav.mega-open .brand img { width: 54px; height: 55px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
/* gescrollt nur das kleine Wappen – so passen Menü und Buttons in die Inhaltsbreite */
/* oben: Menü rechts neben den Buttons – beim Scrollen rückt es neben das kleine Logo (Animation in nav.js) */
.primary { flex: 1; justify-content: flex-end; margin: 0 12px 0 170px; }
.nav.scrolled .primary { justify-content: flex-start; margin-left: 90px; }

.primary { display: flex; align-items: stretch; height: 100%; list-style: none; margin: 0; padding: 0; }
.primary > li { display: flex; align-items: center; flex: none; }
.primary > li > a {
  position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px;
  font: italic 800 15.5px/1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; /* größer, seit „Shop“ aus der Hauptleiste entfallen ist (er steht unter „Verein“) */
}
.primary > li > a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 24px; height: 4px;
  background: #fff; transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.primary > li:hover > a::after, .primary > li:focus-within > a::after { transform: scaleX(1) skewX(-20deg); }
/* Hauptmenüpunkt der aktuellen Seite: der Balken bleibt stehen, in Gelb (build/layout.py setzt .is-current) */
.primary > li.is-current > a::after { transform: scaleX(1) skewX(-20deg); background: var(--yellow, #fcc804); }
/* Im Hamburger-Modus steht der Bereich neben dem Logo – so sieht man auch dort, wo man ist */
.nav-bereich { display: none; margin-left: 130px; margin-right: auto; overflow: hidden; color: #fff; font: italic 900 18px/1 var(--font-display);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; transition: margin-left .55s cubic-bezier(.2,.8,.2,1); }
.nav.scrolled .nav-bereich, .nav.mega-open .nav-bereich { margin-left: 70px; }
.ov-links > li.is-current > a, .ov-links > li.is-current summary { color: var(--yellow, #fcc804); }
.primary .caret { width: 10px; height: 10px; flex: none; transition: transform .25s; }
.primary > li:hover .caret { transform: rotate(180deg); }

.mega {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 20px;
  border-radius: 22px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 70px -24px rgba(4, 24, 56, .55), 0 0 0 1px rgba(1, 81, 161, .06);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.primary > li:hover .mega, .primary > li:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega h5 { margin: 4px 0 10px 4px; font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }

.mega-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; transition: background .2s; }
.mega-link:hover { background: var(--paper); }
.ml-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); transition: background .2s, color .2s; }
.ml-icon svg { width: 19px; height: 19px; }
.mega-link:hover .ml-icon { background: var(--blue); color: #fff; }
.ml-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-text b { font-size: 14.5px; color: var(--ink); }
.ml-text small { font-size: 12.5px; color: var(--muted); }
/* Schlanke Dropdowns direkt unter dem Menüpunkt (Verein, Mannschaften) */
.primary > li.has-drop { position: relative; }
.mega.mega-drop { display: block; left: -8px; right: auto; width: max-content; max-width: min(620px, 90vw); padding: 8px; border-radius: 18px; }
.mega-drop .mega-grid { grid-template-columns: repeat(2, 260px); gap: 2px; }
.mega-drop .mega-grid:has(> :only-child) { grid-template-columns: 260px; }
.mega-drop .mega-link { padding: 10px; }

.mega-link.girls .ml-icon { background: var(--girls-tint); color: var(--girls); }
.mega-link.girls:hover .ml-icon { background: var(--girls); color: #fff; }
.mega-link.girls .ml-text b { color: var(--girls); }
/* Mannschaften: je Altersklasse eine graue Zeile, vorne „A Jugend“, Teams als Kacheln */
/* Mannschaften-Menü: je Altersklasse eine Zeile, feine Trennlinien statt grauer Kästen */
.td { display: grid; min-width: 340px; }
.td-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid #e6ecf4; }
.td-row:first-child { border-top: 0; }
.td-label { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.td-label b { font: italic 900 22px/1 var(--font-display); color: var(--blue); }
.td .td-label small { font: 600 11px/1 var(--font-body); color: #7b8aa3; }
.td-teams { display: flex; flex-wrap: wrap; gap: 6px; }
.td-pill { display: grid; place-items: center; height: 34px; min-width: 48px; padding: 0 14px; border-radius: 10px; background: #eef3fa; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--blue); transition: background .2s, color .2s; }
.td-pill:hover, .td-pill:focus-visible { background: var(--blue); color: #fff; }
.td-pill.girls { background: var(--girls-tint); color: var(--girls); }
.td-pill.girls:hover, .td-pill.girls:focus-visible { background: var(--girls); color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.nav-actions .btn { height: 44px; padding: 0 16px; font-size: 13px; background: rgba(255,255,255,.14); color: #fff; border: 2px solid rgba(255,255,255,.35); box-shadow: none; }
.nav-actions .btn:hover { background: #fff; color: var(--blue); border-color: #fff; }

.menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.35); background: transparent; cursor: pointer; color: #fff;
  font: italic 800 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  transition: background .2s, border-color .2s;
}
.menu-btn:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.burger { display: grid; gap: 4px; width: 18px; }
.burger i { display: block; height: 2px; background: #fff; transition: width .3s; }
.burger i:nth-child(2) { width: 12px; justify-self: end; }
.menu-btn:hover .burger i:nth-child(2) { width: 18px; }

/* Vollbild-Menü */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  clip-path: circle(0 at calc(100% - 70px) 60px); visibility: hidden;
  transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s .7s;
}
.overlay { background: var(--tex-bg); }
.overlay .ov-crest { position: absolute; right: -8%; bottom: -12%; width: min(70vw, 760px); opacity: .07; filter: grayscale(1) brightness(2.4); transform: rotate(-10deg); pointer-events: none; }
.overlay.open { clip-path: circle(150% at calc(100% - 70px) 60px); visibility: visible; transition-delay: 0s; }
.ov-head, .ov-body { position: relative; }
.ov-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 100px; }
.ov-close { width: 52px; height: 52px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); background: transparent; cursor: pointer; display: grid; place-items: center; transition: transform .3s, background .2s; }
.ov-close:hover { transform: rotate(90deg); background: rgba(255,255,255,.12); }
.ov-close svg { width: 20px; height: 20px; }
.ov-body { flex: 1; overflow-y: auto; }
.ov-body .wrap { padding-top: 3vh; padding-bottom: 48px; }
.ov-links { list-style: none; margin: 0; padding: 0; counter-reset: ov; }
.ov-links li { overflow: hidden; padding-top: .08em; }
.ov-links > li > a, .ov-links summary {
  display: flex; align-items: baseline; gap: 16px; padding: .1em 0; cursor: pointer; list-style: none;
  font: italic 900 clamp(28px, 6vw, 48px)/1.1 var(--font-display); text-transform: uppercase;
  transform: translateY(110%); transition: transform .7s cubic-bezier(.2,.8,.2,1), color .2s;
}
.ov-links summary::-webkit-details-marker { display: none; }
.ov-links > li > a::before, .ov-links summary::before { counter-increment: ov; content: "0" counter(ov); font: italic 800 14px/1 var(--font-display); color: rgba(255,255,255,.55); }
.ov-links > li > a:hover, .ov-links summary:hover { color: rgba(255,255,255,.75); }
.ov-caret { width: .42em; height: .42em; align-self: center; flex: none; transition: transform .3s; }
.ov-group[open] .ov-caret { transform: rotate(180deg); }
.overlay.open .ov-links > li > a, .overlay.open .ov-links summary { transform: none; }
.overlay.open .ov-links li:nth-child(2) > * { transition-delay: .05s; }
.overlay.open .ov-links li:nth-child(3) > * { transition-delay: .1s; }
.overlay.open .ov-links li:nth-child(4) > * { transition-delay: .15s; }
/* Untermenüs */
.ov-sub { margin: 8px 0 16px 34px; animation: fadeUp .3s cubic-bezier(.2,.8,.2,1); }
.ov-sublinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; max-width: 560px; }
.ov-sublinks a { padding: 8px 0; font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(255,255,255,.15); }
.ov-sublinks a:hover { color: rgba(255,255,255,.75); }
.ov-teams a.girls { color: inherit; }
/* Die Hauptseite eines Menüpunkts (Verein, Mitgliedschaft) steht als erster Eintrag im Untermenü – sonst käme man am Handy nie dorthin, weil der Menüpunkt selbst nur auf- und zuklappt */
.ov-sublinks .ov-top { grid-column: 1 / -1; color: var(--yellow); }
@media (max-width: 640px) { .ov-sub { margin-left: 0; } }
/* Untermenüs (Verein, Mitgliedschaft): ein Eintrag je Zeile, eingerückt mit Linie links – statt zweier Spalten mit abgeschnittenen Namen.
   Die Mannschaftslinks (.ov-teams) bleiben im Raster. */
.ov-sublinks:not(.ov-teams) { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 4px 0 18px 12px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .28); }
.ov-sublinks:not(.ov-teams) a { padding: 11px 0; font-size: 16px; white-space: normal; }
.ov-sublinks:not(.ov-teams) a:last-child { border-bottom: 0; }
.ov-sublinks:not(.ov-teams) .ov-top { padding-top: 6px; }

body.locked { overflow: hidden; overscroll-behavior: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 132px 0 var(--luft); overflow: hidden; isolation: isolate; /* unten wie jeder Bereich (--luft) */
  background: var(--tex-bg);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.slash { position: absolute; top: -10%; bottom: -10%; width: 34%; right: 18%; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); transform: skewX(-18deg); }
/* Wappen im Kopf (19.10.2026): nur noch auf den Seiten Verein, Mitgliedschaft, Sponsoren und Unterstützen
   (.page-hero), rechts und leicht sichtbar; die übrigen Wasserzeichen sind entfallen */
.hero-crest {
  position: absolute; right: 2%; top: 50%; width: min(32vw, 440px);
  transform: translateY(-50%) rotate(-8deg);
  filter: grayscale(1) brightness(2.3); opacity: .05;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 70px); margin: 16px 0 20px; }
.hero h1 .line { display: block; overflow: hidden; padding: .1em .15em .04em 0; margin: -.1em 0 -.04em; }
.hero h1 .line > span { display: inline-block; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 .line:nth-child(2) > span { animation-delay: .1s; }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
.hero-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); max-width: 36ch; margin: 0 0 36px; }
.hero-lead b { color: #fff; font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.hero-cta .btn { height: 52px; }
.hero-cta .btn-primary:hover { transform: none; }
/* Startseite: linke Spalte so hoch wie das News-Fenster (ohne Pfeil-Leiste darunter) */
.hero-grid:has(.hero-copy) { align-items: stretch; }
/* Startseite: Inhalt direkt unter dem Logo beginnen statt im Bildschirm zu zentrieren */
.hero:has(.hero-copy) { min-height: 0; align-items: flex-start; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
/* News-Fenster inkl. Pfeile genau so hoch wie die linke Spalte */
.hero-grid:has(.hero-copy) .news { align-self: stretch; display: flex; flex-direction: column; }
.hero-grid:has(.hero-copy) .news-track { flex: 1; min-height: 0; }
.hero-grid:has(.hero-copy) .slide { aspect-ratio: auto; height: 100%; padding: 20px 24px; gap: 10px; }

.hero-copy h1 { margin-bottom: 0; }
/* Text links genauso hoch wie die News-Box: oben bündig mit der Box, Buttons unten auf Höhe der Pfeile */
.hero-copy { align-self: stretch; }
.hero-copy .hero-lead { margin: auto 0; padding: 24px 0; font-size: clamp(17px, 1.55vw, 23px); line-height: 1.5; max-width: 30em; }
.hero-copy .hero-lead b { display: block; margin-bottom: 6px; font-size: 1.08em; }
.hero-copy .eyebrow { margin-top: 0; }

/* News-Slider im Instagram-Format (4:5) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.news { position: relative; width: 100%; max-width: 480px; justify-self: end; animation: fadeUp 1s .25s cubic-bezier(.2,.8,.2,1) both; }
.news-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(2, 20, 50, .75);
}
.news-track::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 28px;
}
.slide > * { position: relative; z-index: 1; }
.s-blau { background: var(--tex-bg); color: #fff; border: 1px solid rgba(255,255,255,.14); }

/* News-Slider aus den Tools: Ergebnis-Folie, Ankündigung, Foto */

/* dezent: helle Plakette, Ergebnis in sanfter Farbe; Unentschieden grau */

.news[hidden] { display: none; }
.s-tag { align-self: flex-start; background: var(--pop, #fff); color: var(--pop-ink, var(--blue)); font: italic 800 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; transform: skewX(-8deg); }

/* Folie „Nächste Spiele“: Inhalt oben, Link unten; zweite Zeile beginnt unter der Uhrzeit */

.s-ha { font: 600 10.5px/1 var(--font-body); padding: 3px 6px; border-radius: 4px; margin-right: 4px; background: #fff; color: var(--blue); }
.s-ha.is-away { background: rgba(255,255,255,.18); color: #fff; }

.slide p { margin: 0 0 10px; font-size: 15px; opacity: .88; }

.news-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.news-btn { width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, opacity .2s; }
.news-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.news-btn:disabled { opacity: .35; cursor: default; }
.news-btn svg { width: 18px; height: 18px; }
.news-dots { display: flex; gap: 8px; }
.news-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: rgba(255,255,255,.35); cursor: pointer; transition: width .3s, background .3s; }
.news-dots button[aria-current] { width: 28px; background: #fff; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: var(--luft) 0; }
/* Kopf: Kicker oben, darunter Überschrift links und Text rechts – Text mittig zur Überschrift */
.section-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 48px; row-gap: 14px; align-items: center; margin-bottom: 28px; }
.section-head > div:first-child { display: contents; }
.section-head > div > .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
.section-head > div > h2 { grid-column: 1; grid-row: 2; }
.section-head > :not(:first-child) { grid-column: 2; grid-row: 2; justify-self: end; }
.section-head h2 { font-size: clamp(34px, 5.6vw, 84px); margin: 0; }
.section-head p { width: auto; max-width: 640px; color: var(--text-2); margin: 0; font-size: 16.5px; line-height: 1.6; text-wrap: balance; }
.section-head p b { color: var(--text); }
/* Zweizeilige Überschrift: Text etwa so hoch wie die Überschrift */
.section-head:has(h2 br) h2 { font-size: clamp(34px, 5.2vw, 72px); }
.section-head:has(h2 br) p { width: auto; max-width: 440px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; text-wrap: pretty; }

/* ---------- Über uns ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-title { font-size: clamp(38px, 5vw, 72px); margin: 16px 0 0; color: var(--blue); }

.about-text p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.7; color: var(--text-2); }
.about-text b { color: var(--text); }
.values { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.values li { display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font: italic 900 clamp(14px, 1.25vw, 17px)/1 var(--font-display); text-transform: uppercase; color: var(--blue); }
.values span { font: italic 800 11px/1 var(--font-display); color: var(--muted); }
.slogan { margin: 36px 0 0; font-size: clamp(20px, 2.2vw, 32px); white-space: nowrap; color: var(--text); }
.slogan .bar { background: var(--blue); color: #fff; margin-top: .12em; }

/* ---------- Letzte Ergebnisse (statisch) ---------- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.result {
  position: relative; overflow: hidden; border-radius: 16px; padding: 12px 16px 12px;
  background: #fff; color: var(--ink); display: flex; flex-direction: column; gap: 8px;
  transition: transform .25s;
}
.result:hover { transform: translateY(-3px); }
.result::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--o, var(--blue)); }
.rh-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rh-team em { font-style: normal; font-size: 12px; color: #63748f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-head b { flex: none; }
.result-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #63748f; }
.result-head b { background: var(--team, var(--blue)); color: #fff; font: italic 800 11px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; transform: skewX(-8deg); }
.result-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.result-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-row b { font: italic 900 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
.result .jsg { font-weight: 700; color: var(--ink); }
.result .opp { color: #52637f; }
.result-rows { display: grid; gap: 2px; }
/* Sieg/Niederlage/Unentschieden: beide Torzahlen in der Ergebnisfarbe (wie der Balken links) */
.result .result-row b { color: var(--o, var(--ink)); }
.result-head > span:last-child { font-weight: 700; color: var(--ink); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px/1 var(--font-body); color: var(--hl); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Spieltag ---------- */
.toolbar { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.toolbar .chips { width: 100%; }
.seg { display: inline-flex; padding: 5px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 9px 18px; border-radius: 10px; font: 600 14.5px/1 var(--font-body); color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.seg button[aria-selected="true"] { background: var(--blue); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; max-width: 100%; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; white-space: nowrap; border: 1.5px solid transparent; background: var(--blue-tint); padding: 6px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; transition: all .2s; }
.chip:hover { border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

.chip[aria-pressed="true"]::after { content: " ✓"; }

.matches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.match {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 20px; align-items: center;
  padding: 12px 20px 12px 12px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(1, 81, 161, .05);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.match:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(1, 81, 161, .45); }
.match { --team: var(--blue); --team-tint: var(--blue-tint); }
/* Spiele beim Filtern ruhig einblenden: Datum und Spiele eines Tages gemeinsam, nur Deckkraft, keine Bewegung
   (vorher flog jede Spielkarte 30 px von unten herein, die Datumskacheln standen still – das wirkte wie Hüpfen) */
@keyframes einblenden { from { opacity: 0; } }
.matches > * { animation: einblenden .3s ease both; }
@media (prefers-reduced-motion: reduce) { .matches > * { animation: none; } }
.match.is-girls .m-team-label strong { color: var(--girls); }
.date { text-align: center; padding: 6px 0; border-radius: 12px; background: var(--team-tint, var(--blue-tint)); color: var(--team, var(--blue)); }
.date.is-rel small:first-child { opacity: 1; font-size: 9.5px; letter-spacing: .06em; font-weight: 800; }
.date small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.date b { display: block; font: italic 900 22px/1.05 var(--font-display); }
.m-body { min-width: 0; }
.m-team-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; min-width: 0; }
.m-team-label strong { font: italic 900 17px/1.1 var(--font-display); text-transform: uppercase; color: var(--team, var(--blue)); white-space: nowrap; }
.m-team-label span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag { font: 600 11.5px/1 var(--font-body); padding: 4px 8px; flex: none; }
.tag.h { background: var(--team, var(--pop)); color: var(--pop-ink); }
.tag.a { background: var(--tint); color: var(--text-2); }
.m-teams { display: grid; gap: 0; font-size: 15px; line-height: 1.45; }
.m-teams div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jsg { font-weight: 700; color: var(--text); }
.opp { color: var(--text-2); }
.m-venue { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-venue svg { width: 13px; height: 13px; flex: none; }
.m-venue .tag { margin-right: 4px; }
.m-venue a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-venue a:hover { color: var(--team, var(--blue)); text-decoration: underline; }
.m-side { text-align: right; }
.kick { font: italic 900 24px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--team, var(--blue)); }
.kick small { display: block; font: 600 11px/1.6 var(--font-body); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.o-w { --o: #15a152; }
.o-d { --o: #d69b00; }
.o-l { --o: #db032c; }
.score {
  display: inline-grid; grid-template-columns: auto auto auto; gap: 5px; align-items: center;
  min-width: 84px; justify-content: center; padding: 8px 12px; border-radius: 12px;
  border: 2px solid var(--o, var(--line-strong)); color: var(--o, var(--blue));
  background: color-mix(in srgb, var(--o, transparent) 8%, transparent);
  font: italic 900 26px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.score i { font-style: normal; opacity: .6; font-size: 18px; }
.empty { grid-column: 1 / -1; padding: 48px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: 18px; }
.more-row { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- Zahlen ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); padding: 22px 24px;
  min-height: 150px; display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .3s ease, background .3s;
}
.tile:hover { transform: translateY(-3px); background: var(--surface-2); }
.tile .num { font: italic 900 clamp(60px, 7.5vw, 104px)/.9 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .lbl { font-size: 15px; color: var(--text-2); max-width: 26ch; }
.tile .lbl b { color: var(--text); font-weight: 700; display: block; font-size: 19px; }
.tile.t-hero { grid-column: span 5; grid-row: span 2; background: #fff; color: var(--blue); border: 0; --dash: var(--blue); }
.tile.t-hero { justify-content: flex-start; gap: 14px; }
.tile.t-hero > div { flex: 1; display: flex; flex-direction: column; }
.tile.t-hero .num { margin-top: auto; }
.tile.t-hero .sub-stat { margin-top: auto; }
.tile.t-hero .num { font-size: clamp(96px, 11vw, 160px); }
.tile.t-hero .lbl, .tile.t-hero .lbl b { color: var(--ink); }
.tile.t-hero .lbl { color: #1b3258; }
.tile.t-hero .eyebrow { color: var(--blue); }
.tile.t-a { grid-column: span 7; }
.tile .num + .lbl { margin-top: 14px; }
.clubs-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; align-items: center; }
.clubs-stat .club-list { align-self: center; }
.club-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-items: start; }
.club-list li { white-space: nowrap; padding: 3px 8px; border-radius: 7px; background: rgba(255,255,255,.12); font-size: 11.5px; font-weight: 600; color: #fff; }
.tile.t-duo { flex-direction: row; justify-content: flex-start; gap: clamp(24px, 6vw, 96px); }
.tile.t-duo > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; }
.tile.t-duo > div + div { padding-left: clamp(24px, 6vw, 96px); border-left: 1px solid var(--line); }
/* Beschriftung unter der Zahl nur vor Saisonstart („ab Saisonstart“); sonst nennt schon die Überschrift der Kachel, was gezählt wird */
.tile .lbl:has(> b:empty) { display: none; }

.sub-stat { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(1,81,161,.15); }
.sub-stat b { font: italic 900 96px/.9 var(--font-display); color: var(--girls); }
.sub-stat span { font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--ink); }

/* ---------- Teams ---------- */
.teams { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.team-card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  transition: box-shadow .3s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.team-card:hover { box-shadow: 0 24px 40px -26px rgba(1, 81, 161, .55); }
.tc-head { display: flex; align-items: center; gap: 12px; margin-top: -6px; }
.tc-head > div { display: flex; flex-direction: column; gap: 2px; }
.team-card .big {
  position: static; flex: none; padding-right: .06em;
  font: italic 900 72px/.9 var(--font-display);
  color: transparent; -webkit-text-stroke: 2px var(--stroke); pointer-events: none;
}
.team-card > * { position: relative; }
.team-card h3 { font: italic 900 24px/1.1 var(--font-display); text-transform: uppercase; margin: 0 0 4px; }
.team-card .age { font-size: 14px; color: var(--muted); }
.team-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.team-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 10px; background: var(--paper); border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.team-list a:not([href]) { cursor: default; }
.team-list a:not([href]) svg { visibility: hidden; }
.team-list a span { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.team-list strong { font: italic 900 16px/1.1 var(--font-display); text-transform: uppercase; color: var(--blue); }
.team-list small { font-size: 12.5px; color: var(--muted); }
.team-list svg { width: 16px; height: 16px; flex: none; color: var(--blue); transition: transform .2s; }
.team-list a[href]:hover { border-color: var(--line-strong); background: #fff; }
.team-list a[href]:hover svg { transform: translateX(3px); }
.team-card.join { background: var(--blue); border-color: var(--blue); color: #fff; justify-content: flex-end; min-height: 200px; }
.team-card.join .age { color: rgba(255,255,255,.85); }
.team-card.join .big { -webkit-text-stroke-color: rgba(255, 255, 255, .3); }
.team-card.join:hover { transform: translateY(-4px); }

.teams { align-items: stretch; }
/* 7 Jahrgänge nebeneinander: kompaktere Karten */
.teams .team-card { padding: 14px 12px; }
.teams .tc-head { gap: 8px; }
.teams .team-card .big { font-size: 52px; }
.teams .team-card h3 { font-size: 18px; }
.teams .team-card .age { font-size: 12px; }
.teams .team-list { margin-top: 12px; gap: 5px; }
.teams .team-list a { padding: 7px 9px; gap: 6px; }
.teams .team-list strong { font-size: clamp(11px, .95vw, 13.5px); white-space: nowrap; letter-spacing: -.01em; }
.teams .team-list a { overflow: hidden; }
.teams .team-list a svg { display: none; }
.teams .team-list a span { min-width: 0; }
.teams .team-list small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teams .team-list svg { width: 13px; height: 13px; }

/* ---------- Sportplätze ---------- */
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.venue { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .3s, background .3s; }
.venue:hover { transform: translateY(-4px); background: var(--surface-2); }
.venue-art { position: relative; aspect-ratio: 5 / 2; background: linear-gradient(160deg, #0b5cb5, #06408a); overflow: hidden; }
.venue-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 36px, transparent 36px 72px); }
.venue-art svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.venue-art .v-no { position: absolute; left: 16px; top: 16px; font: italic 900 15px/1 var(--font-display); padding: 7px 10px; background: #fff; color: var(--blue); transform: skewX(-8deg); }
.venue-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.venue-body h3 { margin: 0; font: italic 900 26px/1.1 var(--font-display); text-transform: uppercase; }
.venue-body p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.venue-body a { margin-top: auto; padding-top: 14px; }

/* Stammvereine: Wappen frei auf dem Rasen, mit Lichtkegel dahinter (kein weißer Kreis) */
.club .venue-art { background: radial-gradient(60% 90% at 50% 55%, rgba(120,180,255,.35), transparent 70%), linear-gradient(160deg, #0b5cb5, #06408a); }
.club .venue-art svg { display: none; }
/* feste Ränder oben/unten statt Prozent-Höhe: das Wappen sitzt in jedem Browser mittig */
.club-logo { position: absolute; inset: 13% 0; display: flex; align-items: center; justify-content: center; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.club:hover .club-logo { transform: scale(1.06) rotate(-2deg); }
.club-logo img { display: none; height: 100%; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,10,40,.55)); }
.club-logo b { font: italic 900 clamp(20px, 2.4vw, 30px)/1 var(--font-display); color: #fff; }
.club-logo.has-logo img { display: block; }
.club-logo.has-logo b { display: none; }
/* Handy: kompakt quer – Wappen links, Text rechts */
@media (max-width: 640px) {
  .club { flex-direction: row; align-items: stretch; }
  .club .venue-art { aspect-ratio: auto; flex: 0 0 104px; }
  .club .venue-art::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 26px, transparent 26px 52px); }
  .club-logo { inset: 0 12px; }
  .club-logo img { height: auto; width: 100%; max-width: none; }
  .club .venue-body { padding: 16px 18px; gap: 4px; }
  .club .venue-body h3 { font-size: 18px; white-space: nowrap; }
  .club .venue-body p { font-size: 13.5px; }
  .club .venue-body .club-links { padding-top: 8px; gap: 6px 18px; }
}
.club .venue-body .eyebrow { margin-bottom: 4px; }
.club .venue-body .club-links { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.club .venue-body .club-links a { margin: 0; padding: 0; }

/* ---------- CTA ---------- */
.cta {
  position: relative; overflow: hidden; border-radius: 28px;
  padding: clamp(40px, 7vw, 88px);
  background: #fff; color: var(--ink);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end;
}
.cta > * { position: relative; }
.cta h2 { font-size: clamp(46px, 6.6vw, 100px); margin: 18px 0 0; }
.cta .eyebrow { color: var(--blue); }
.cta h2 { color: var(--blue); }
.cta p { font-size: 18px; margin: 0 0 24px; max-width: 36ch; }
.cta .btn-primary { background: var(--blue); color: #fff; }
.cta .steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.cta .steps li { display: flex; gap: 14px; align-items: center; font-weight: 600; }
.cta .steps b { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--blue); color: #fff; font: italic 900 15px/1 var(--font-display); transform: skewX(-8deg); }

.cta.cta-compact { padding: clamp(28px, 4vw, 48px); align-items: center; }
.cta.cta-compact h2 { font-size: clamp(34px, 4.2vw, 60px); }

/* ---------- Footer ---------- */
footer { padding: 56px 0 28px; }

.foot-brand .about { color: var(--muted); font-size: 14px; max-width: 32ch; margin: 16px 0 0; line-height: 1.55; }
/* Fußzeile: Marke und Anschrift links, Rechtliches rechts in EINER Zeile (Desktop, Feedback 12.10.2026); darunter nur das Copyright. Mobil untereinander. */
.foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-legal { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--muted); }
.foot-legal a:hover { color: #fff; }
@media (min-width: 761px) {
  footer { padding: 40px 0 24px; }
  .foot-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
  .foot-brand { display: flex; align-items: center; gap: 24px 64px; flex-wrap: wrap; }
  .foot-bottom { margin-top: 26px; padding-top: 16px; }
}
.to-top { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-strong); }
.to-top svg { width: 13px; height: 13px; transform: rotate(-90deg); }

/* ---------- Teamseite ---------- */
.title-block { display: grid; width: fit-content; max-width: 100%; }
.title-block h1 { margin-right: 0; }
.title-block h1 .line:last-child > span, .title-block h1 .bar { display: block; }
.title-block h1 .bar { transform: skewX(-8deg); }
.title-block h1 .bar { white-space: nowrap; }
/* Juniorinnen: längerer Name – Schrift im Balken kleiner und rosa, Balken und Foto behalten ihre Größe wie bei „Junioren“ */
.title-block.is-girls h1 .bar > span { font-size: .86em; vertical-align: .07em; color: var(--girls); }
.fact-pills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.fact-pills li { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); font-weight: 600; font-size: clamp(12.5px, 1.05vw, 15px); white-space: nowrap; }
.fact-pills svg { width: 14px; height: 14px; opacity: .8; }
/* Trikotsponsoren in der linken Spalte unter der Karte „Nächstes Spiel“ (19.10.2026): Beschriftung klein darüber, die Namen
   nebeneinander, passt der zweite nicht mehr daneben, steht er darunter. contain: die Namen machen die Spalte nicht breiter. */
.team-copy .team-sponsors { display: grid; gap: 4px; width: 100%; margin-top: 18px; contain: inline-size; }
.team-sponsors[hidden] { display: none; }
/* Foto oben bündig mit der linken Spalte, immer 16 : 9 */
.team-grid > .team-photo-rahmen { align-self: start; }
.team-sponsors-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.team-sponsor-list { display: flex; flex-wrap: wrap; gap: 0 26px; min-width: 0; }
.team-sponsor { position: relative; min-width: 0; display: inline-flex; align-items: baseline; gap: 5px; }
.team-sponsor-pfeil { flex: none; width: 11px; height: 11px; opacity: .7; }
.team-sponsor { color: #fff; text-decoration: none; }
.team-sponsor-name { font-weight: 600; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } /* leiser als der Gegner in der Karte */
a.team-sponsor[href]:hover .team-sponsor-name { text-decoration: underline; text-underline-offset: 3px; }
/* mehrere Sponsoren nebeneinander durch „·“ getrennt; bricht ein Name um, entfällt der Punkt (team.js setzt .ist-zeilenanfang) */
.team-sponsor + .team-sponsor:not(.ist-zeilenanfang)::before { content: "·"; position: absolute; left: -13px; color: rgba(255, 255, 255, .55); font-weight: 700; }

/* Karte „Nächstes Spiel“ in der linken Spalte des Kopfs (team.js renderNaechstes, Variante A „Spieltags-Ticket“):
   weiße Karte wie in den hellen Bereichen, links ein blauer Datumsblock – hebt sich klar von den Glas-Pillen ab */
/* Karte direkt unter den Pillen; die linke Spalte (Saison, Name, Pillen, Karte, Sponsoren) beginnt oben auf Höhe des Fotos –
   so steht der Name auf jeder Mannschaftsseite an derselben Stelle */
.team-hero .team-copy { justify-content: flex-start; }
.team-copy > :has(+ .naechstes-spiel) { margin-bottom: 24px; }
.naechstes-spiel { width: 100%; max-width: 30rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
  border-radius: 16px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 18px 36px -22px rgba(2, 20, 50, .7); transition: transform .2s, box-shadow .2s; }
.naechstes-spiel:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -20px rgba(2, 20, 50, .75); }
/* Datumsblock hellblau mit gestrichelter „Abrisskante“ wie bei einer Eintrittskarte – ein blauer Block verschwand im blauen Kopf */
/* Wochentag oben, Uhrzeit unten (margin-top: auto) – bündig mit „Nächstes Spiel“ bzw. der Pille Heim/Auswärts rechts */
.nsp-datum { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; padding: 14px 8px; background: var(--blue-tint); color: var(--blue);
  border-right: 2px dashed rgba(1, 81, 161, .25); text-transform: uppercase; }
.nsp-wt { font: 800 12px/1 var(--font-body); letter-spacing: .14em; color: var(--blue); }
.nsp-tag { font: italic 900 42px/.9 var(--font-display); letter-spacing: -.02em; }
.nsp-mon { margin-bottom: 8px; font: 700 12px/1 var(--font-body); letter-spacing: .12em; color: #63748f; }
/* Anstoß unter dem Datum (19.10.2026) – rechts bleibt mehr Platz für den Gegner */
.nsp-uhr { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(1, 81, 161, .18); font: italic 900 17px/1 var(--font-display); color: var(--blue); font-variant-numeric: tabular-nums; }
/* oben bündig mit dem Wochentag, unten bündig mit der Uhrzeit (gleiche Innenabstände wie der Datumsblock) */
.nsp-body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 4px; padding: 14px 20px; min-width: 0; }
.nsp-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 10px; font: 800 11.5px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #63748f; white-space: nowrap; }
.nsp-count { display: inline-flex; align-items: center; gap: 2px; letter-spacing: .04em; text-transform: none; font-weight: 700; font-size: 12.5px; color: var(--blue); }
.nsp-count svg { width: 16px; height: 16px; transition: transform .2s; }
.naechstes-spiel:hover .nsp-count svg { transform: translateX(2px); }
.nsp-gegner { margin-top: 4px; font: 700 19px/1.25 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.nsp-gegner small { display: block; margin-bottom: 1px; font: 500 13px/1.3 var(--font-body); color: #63748f; }
.nsp-zeit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 14.5px/1.3 var(--font-body); color: #1b3258; }
@media (prefers-reduced-motion: reduce) { .naechstes-spiel, .nsp-count svg { transition: none; } }
/* schmale Karte (am Desktop so breit wie der Name, zwischen 921 und ~1200 px nur 250–310 px): alles etwas kleiner,
   statt abzuschneiden – wie die Pillen darüber, die mit der Breite mitwachsen */
.naechstes-spiel { container-type: inline-size; }
@container (max-width: 340px) {
  .nsp-datum { width: 68px; padding: 14px 6px; }
  .nsp-tag { font-size: 32px; }
  .nsp-uhr { font-size: 15px; padding-top: 6px; }
  .nsp-body { padding: 14px; }
  .nsp-label { font-size: 10.5px; letter-spacing: .08em; }
  .nsp-count { font-size: 11.5px; }
  .nsp-gegner { font-size: 16px; }
  .nsp-zeit { font-size: 13px; }
}
@media (min-width: 921px) {
  /* linke Spalte nur so breit wie ihr Inhalt (höchstens die Hälfte): beim Verkleinern wird so zuerst kein Leerraum
     zwischen Text und Foto mitgezogen, das Foto bekommt den Rest */
  .team-hero .team-grid { grid-template-columns: fit-content(50%) minmax(0, 1fr); }
  /* Spalte so breit wie der Namensbalken; die Karte füllt genau diese Breite und trägt selbst nichts dazu bei */
  .team-hero .team-copy { width: max-content; max-width: none; justify-self: start; }
  .team-hero .naechstes-spiel { max-width: none; contain: inline-size; }
}
@media (max-width: 640px) {
  .naechstes-spiel { max-width: none; }
  .nsp-datum { width: 84px; }
  .nsp-tag { font-size: 36px; }
  .nsp-body { padding: 14px 16px; }
  .nsp-gegner { font-size: 18px; }
}
/* Eckdaten-Pillen: ebenfalls Titelbreite, gleichmäßig verteilt (bei langen Werten Umbruch in eine zweite Reihe) */
.team-copy .title-block > .fact-pills { contain: inline-size; display: flex; flex-wrap: wrap; gap: 8px; width: auto; }
.team-copy .title-block > .fact-pills li { flex: 1 1 auto; justify-content: center; min-width: 0; }

.team-hero { min-height: auto; padding-top: 150px; padding-bottom: var(--luft); flex-direction: column; align-items: stretch; }
.facts { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.facts { flex-wrap: wrap; }
.facts div { flex: none; padding: 11px 16px; min-width: 0; }
.facts div + div { border-left: 1px solid rgba(255,255,255,.18); }
.facts dt { font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; font: italic 900 clamp(13px, 1.1vw, 16px)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.team-photo { margin: 0; }
.photo-ph {
  position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: var(--tex-bg); border: 2px dashed rgba(255,255,255,.3);
  box-shadow: 0 40px 80px -30px rgba(2, 20, 50, .75);
}
/* ohne Foto: Wappen mittig, darunter „Mannschaftsfoto folgt“ */
.team-photo .photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.photo-ph img { height: 50%; width: auto; max-width: 60%; object-fit: contain; opacity: .25; filter: grayscale(1) brightness(2); }
.photo-ph .s-tag { position: static; align-self: center; white-space: nowrap; }
.team-photo { position: relative; margin: 0; }
/* Teamseite: Foto breiter und so hoch wie der Textblock links */
.team-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: stretch; }
.team-hero .team-copy h1 { font-size: clamp(28px, 3.3vw, 48px); margin: 16px 0 20px; }
.team-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
/* Mannschaftsfoto: festes Format 16 : 9 auf jeder Breite (vorher 3 : 2, Nutzerwunsch flacher) – unabhängig von Foto, Textblock und Fenster
   (seit 30.09.2026; vorher war es am Desktop so hoch wie der Text daneben). Das Foto füllt den Rahmen,
   was nicht hineinpasst, wird abgeschnitten; Ausschnitt und Zoom kommen aus dem Foto-Editor (--pos/--zoom). */
.team-grid .team-photo { position: relative; height: auto; aspect-ratio: 16 / 9; }
.team-grid .team-photo > img, .team-grid .photo-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.team-photo { overflow: hidden; border-radius: 22px; }
.team-photo > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); border-radius: 0; box-shadow: 0 40px 80px -30px rgba(2, 20, 50, .75); }
.team-photo:not(.no-photo) .photo-ph { display: none; }
/* Freigestellt: „Flutlicht“ – helleres Blau, Licht von oben (Variante C, 30.09.2026); die dunklen Trikots stehen davor ab */
:root { --flutlicht: radial-gradient(45% 100% at 50% -8%, rgba(255,255,255,.6), rgba(255,255,255,.3) 30%, rgba(255,255,255,.08) 65%, transparent 100%),
              linear-gradient(180deg, #3f8ddc 0%, #1a5fae 50%, #0b3f7e 100%); }
.team-photo.is-cutout { position: relative; background: var(--flutlicht); }
/* Ohne Foto („Mannschaftsfoto folgt“) derselbe helle Grund wie freigestellt – beide Rahmen sehen gleich aus */
.team-photo.no-photo .photo-ph { background: var(--flutlicht); }
/* Freigestellt: füllt den Rahmen wie jedes Foto (festes Format), Standard-Ausschnitt unten bündig */
.team-photo.is-cutout > img { object-fit: cover; object-position: var(--pos, 50% 100%); box-shadow: none;
  transform: translate(var(--vx, 0%), var(--vy, 0%)) scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 100%); filter: brightness(var(--hell, 1)) drop-shadow(0 18px 24px rgba(2, 20, 50, .45)); }
/* --vx/--vy = photo.offset aus den Tools: die freigestellte Mannschaft frei verschoben, auch über den Rand hinaus (dort abgeschnitten) */
.team-photo.is-cutout { border: 1px solid rgba(255,255,255,.18); box-shadow: 0 40px 80px -30px rgba(2, 20, 50, .75); }
.team-photo.is-cutout::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 100%, rgba(255,255,255,.14), transparent 70%); }
.team-photo.no-photo > img { display: none; }

.theme-deep .chip, .theme-blue .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.theme-deep .chip:hover, .theme-blue .chip:hover { border-color: #fff; color: #fff; }
.theme-deep .chip[aria-pressed="true"], .theme-blue .chip[aria-pressed="true"] { background: #fff; color: var(--blue); border-color: #fff; }

.staff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.staff-card { display: flex; align-items: flex-start; gap: 18px; overflow: hidden; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }

.staff-card .role { font: italic 800 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.staff-card h3 { margin: 6px 0 4px; font: italic 900 22px/1.1 var(--font-display); text-transform: uppercase; }
.staff-card p { margin: 0; font-size: 14px; color: var(--text-2); }

.staff-card .contact { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.staff-card .contact:hover { color: #fff; }
.staff-card .contact svg { width: 15px; height: 15px; flex: none; }
.staff-card > div:last-child { min-width: 0; }

/* Kalender-Abo */
.calendar {
  display: grid; grid-template-columns: auto 1fr; gap: 24px 32px; align-items: center;
  padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 40px -30px rgba(1, 81, 161, .5);
}
.cal-icon { width: 84px; height: 84px; border-radius: 22px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.cal-icon svg { width: 40px; height: 40px; }
.cal-copy h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 10px 0 8px; color: var(--blue); }
.cal-copy p { margin: 0; color: var(--text-2); }
.cal-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.cal-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer;
  font: 600 14.5px/1 var(--font-body); transition: border-color .2s, background .2s, color .2s;
}
.cal-btn:hover { border-color: var(--blue); color: var(--blue); }
.cal-btn svg { width: 18px; height: 18px; flex: none; }
.cal-btn:not(#calApple) svg { color: #52637f; }
.cal-btn:hover svg { color: var(--blue); }
.cal-btn#calApple { background: var(--blue); border-color: var(--blue); color: #fff; }

.cal-status { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--blue); font-weight: 600; overflow-wrap: anywhere; }
.qr-dialog { border: 0; border-radius: 24px; padding: 32px; max-width: min(92vw, 360px); text-align: center; color: var(--ink); }
.qr-dialog::backdrop { background: rgba(4, 36, 77, .7); backdrop-filter: blur(4px); }
.qr-dialog h3 { font-size: 26px; margin: 0 0 18px; color: var(--blue); }
.qr-dialog p { font-size: 14px; color: #52637f; margin: 16px 0 0; overflow-wrap: anywhere; }
.qr-box { display: grid; place-items: center; min-height: 220px; }
.qr-dialog .ov-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-color: var(--line-strong); color: var(--ink); }
.qr-dialog { position: fixed; }
.staff-card.training { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 20px; background: #fff; color: var(--ink); border: 0; }
.staff-card.training .role { color: var(--blue); font-size: 18px; letter-spacing: .06em; }
.staff-card.training .times b { font-size: 16px; }

.staff-card.coach { display: grid; grid-template-columns: 44% minmax(0, 1fr); column-gap: 18px; align-content: center; align-items: start; padding: 12px; }
.coach-photo { width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--tex-bg); }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.staff-card.coach:hover .coach-photo img { transform: scale(calc(var(--zoom, 1) * 1.04)); }

.coach-body { padding: 0 4px 0 0; align-self: flex-start; min-width: 0; }
.staff-card.coach .role { display: block; line-height: 1; margin-top: 2px; }
.staff-card.coach h3 { line-height: 1.05; margin: 14px 0 10px; }
/* Zeilenhöhe = Fotohöhe, damit Rolle und Name in allen Trainerkarten auf gleicher Höhe stehen */
.staff .coach-body { height: 0; overflow: visible; }
.staff-card .contact { font-size: 13px; overflow-wrap: anywhere; }
.staff { align-items: stretch; }
.training-place { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; color: var(--ink); }
.training-place svg { width: 15px; height: 15px; flex: none; color: var(--blue); }
.training-place span { display: flex; flex-direction: column; font-size: 12.5px; color: #52637f; }
.training-place strong { font: italic 800 13px/1.2 var(--font-display); text-transform: uppercase; color: var(--blue); }
.training-place:hover strong { text-decoration: underline; }
.staff-card.training p { color: #1b3258; }
.times { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.times li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(1,81,161,.15); }
.times b { font: italic 900 18px/1.2 var(--font-display); text-transform: uppercase; }
/* Mehrere Trainingsorte: der Ort steht klein unter der Uhrzeit (Ausweichort als „Mechtersheim / Dudenhofen“) */
.times li span { text-align: right; }
.times li span small { display: block; margin-top: 2px; font-size: 12px; opacity: .7; }

.venue-wide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); padding: 0; }
.venue-wide .venue-art { aspect-ratio: auto; min-height: 260px; }
.venue-wide .venue-body { justify-content: center; padding: clamp(24px, 4vw, 48px); gap: 12px; }
.venue-wide h3 { font-size: clamp(28px, 3.2vw, 46px); margin: 0; white-space: nowrap; }

/* ---------- Jungs zartblau, Mädchen zartrosa (überall gleich) ---------- */
.result { --team: var(--blue); }
.result.is-girls .result-head b { background: var(--girls); }

.chip.is-girls { background: var(--girls-tint); color: var(--girls); }
.chip.is-girls:hover { border-color: color-mix(in srgb, var(--girls) 45%, transparent); }
.chip.is-girls[aria-pressed="true"] { background: var(--girls); border-color: var(--girls); color: #fff; }
.team-card { --team: var(--blue); --team-tint: var(--blue-tint); }
.team-card.is-girls { --team: var(--girls); --team-tint: var(--girls-tint); }
.team-card h3 { color: var(--team); padding-right: 0; white-space: nowrap; margin: 0; }
.team-card .big { -webkit-text-stroke-color: color-mix(in srgb, var(--team) 55%, transparent); }
.team-card .team-list a { background: var(--team-tint); }
.team-card .team-list strong, .team-card .team-list svg { color: var(--team); }
.team-card .team-list a[href]:hover { border-color: color-mix(in srgb, var(--team) 40%, transparent); background: #fff; }
.team-card .team-list a.is-girls { background: var(--girls-tint); }
.team-card .team-list a.is-girls strong, .team-card .team-list a.is-girls svg { color: var(--girls); }
.team-card .team-list a.is-girls[href]:hover { border-color: color-mix(in srgb, var(--girls) 40%, transparent); background: #fff; }
.team-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 22px; font-weight: 600; color: var(--muted); }
.team-summary b { font: italic 900 26px/1 var(--font-display); margin-right: 4px; }
.team-summary .ts-all b { color: var(--ink); }
.team-card.join { --team: #fff; }
.team-card.join h3 { color: #fff; }

.mega .is-girls h5, .mega .is-girls ul a { color: var(--girls); }

/* ---------- Seitennavigation (Scrollspy, nur große Bildschirme) ---------- */

main > section.theme-light { overflow: hidden; isolation: isolate; }

/* ---------- Social ---------- */
.social { display: flex; gap: 10px; }
.social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.3); color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.social a:hover { background: #fff; color: var(--blue); border-color: #fff; transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }

.ov-social { margin-top: 24px; }

/* ---------- Unterseiten ---------- */
.page-hero h1 { font-size: clamp(46px, 7vw, 100px); margin: 22px 0 26px; }
.page-hero .bar { margin-top: .08em; }
/* Köpfe der Unterseiten alle gleich (19.10.2026): Bereich als Kicker, Überschrift in zwei Zeilen, darunter ein Satz –
   am Desktop genau eine Zeile, auf dem Handy höchstens zwei (mit Platz für zwei, damit alle Köpfe gleich hoch sind).
   Texte deshalb höchstens ~80 Zeichen. */
.page-lead { max-width: none; color: var(--text-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }
.page-lead p { margin: 0; text-wrap: balance; }
@media (min-width: 921px) { .page-lead p { white-space: nowrap; } }
@media (max-width: 920px) { .page-lead p { min-height: 3.2em; text-wrap: pretty; } }
/* langes Wort im Balken („Ansprechpartner“): auf dem Handy kleiner, damit es nicht getrennt wird und der Kopf gleich hoch bleibt */
@media (max-width: 640px) { .page-hero h1.ist-lang .bar > span { font-size: .8em; } }
.page-lead b { color: #fff; }

/* Sponsoren */
.sponsor { min-width: 0; display: flex; flex-direction: column; gap: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 16px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.sponsor:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 34px -24px rgba(1, 81, 161, .55); }
.sponsor-logo { display: grid; place-items: center; aspect-ratio: 2 / 1; border-radius: 12px; background: #fff; overflow: hidden; }
/* Logo ganz sichtbar in seiner Fläche; Ausschnitt/Zoom aus dem Foto-Editor der Tools als --pos/--zoom (wie bei den Fotos) */
.sponsor-logo img { display: none; width: 86%; height: 78%; object-fit: contain; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); }
.sponsor-logo b { overflow-wrap: anywhere; hyphens: auto; display: block; font: italic 900 18px/1.1 var(--font-display); text-transform: uppercase; color: var(--blue); text-align: center; padding: 0 10px; }
.sponsor-logo:not(.has-logo) { background: var(--paper); }
.sponsor-logo.has-logo img { display: block; }
.sponsor-logo.has-logo b { display: none; }
.sponsor-name { font-size: 13px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
/* Sponsoren-Seite: Name + Website unter dem Logo; ohne Logo steht der Name nur einmal */
.sponsor-name b { display: block; font-size: 14px; color: var(--ink); }
.sponsor-name small { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sponsor-name small svg { width: 11px; height: 11px; }
.sponsor-logo:not(.has-logo) + .sponsor-name b { display: none; }
.sponsor-grid .sponsor:hover { border-color: var(--blue); }
.sponsor-grid .sponsor:hover .sponsor-name small { color: var(--blue); }
.sponsor-grid .sponsor-logo { transition: transform .3s; }
.sponsor-grid .sponsor:hover .sponsor-logo { transform: scale(1.03); }
.sp-gap { margin-top: clamp(48px, 6vw, 80px); }
/* Premiumpartner: breite blaue Karte mit Logo links */
.premium-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; background: var(--tex-bg); color: #fff; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.premium-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(2, 20, 50, .8); }
.premium-card .sponsor-logo { aspect-ratio: 16 / 9; background: #fff; border-radius: 16px; }
.premium-card .sponsor-logo b { font-size: clamp(24px, 2.6vw, 36px); }
.pc-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pc-tag { background: #fff; color: var(--blue); font: 600 12.5px/1 var(--font-body); padding: 7px 10px; }
.pc-body strong { font-size: clamp(32px, 3.6vw, 52px); line-height: 1; }
.pc-text { font-size: 16px; color: rgba(255,255,255,.85); max-width: 40ch; }
.pc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 14.5px/1 var(--font-body); }
.pc-link svg { width: 14px; height: 14px; transition: transform .2s; }
.premium-card:hover .pc-link svg { transform: translate(2px, -2px); }
.sp-ways { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-ways li { padding: 6px 12px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-weight: 700; font-size: 13px; }
@media (max-width: 760px) { .premium-card { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sponsor-grid .sponsor { padding: 10px; }
  .sponsor-grid .sponsor-logo b { font-size: clamp(12px, 3.6vw, 16px); overflow-wrap: normal; word-break: normal; hyphens: auto; padding: 0 6px; }
  .sponsor-name small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .sponsor-name small svg { display: none; }
}
.sponsor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* 2. Stufe (erste Kategorie im Raster): mittlere Größe zwischen Premium-Karte und 4er-Raster */
.sponsor-grid.ist-mittel { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sponsor-grid.ist-mittel .sponsor { padding: 20px; }
.sponsor-grid.ist-mittel .sponsor-logo b { font-size: 22px; }
/* Alle Karten eines Rasters gleich hoch – bricht ein Name um, wachsen die übrigen mit; der Name steht mittig im Rest */
.sponsor-grid { grid-auto-rows: 1fr; }
.sponsor-grid .sponsor-name { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }

/* Shop */
.shop-main { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(1, 81, 161, .5); }
.shop-icon { width: 84px; height: 84px; border-radius: 22px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.shop-icon svg { width: 40px; height: 40px; }
.shop-main h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 10px 0 8px; color: var(--blue); }
.shop-main p { margin: 0; color: var(--text-2); }
.discounts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.discount { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3.4vw, 40px); border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.discount > .eyebrow { margin-bottom: 8px; }
.discount .pct { font-size: clamp(64px, 9vw, 120px); color: var(--blue); margin: 12px 0 10px; }
.discount .link-arrow { margin-top: auto; }
.discount p { margin: 0 0 16px; color: var(--text-2); }
.discount.strong { background: var(--blue); color: #fff; border-color: var(--blue); --dash: rgba(255,255,255,.6); }
.discount.strong .eyebrow, .discount.strong .pct, .discount.strong .link-arrow { color: #fff; }
.discount.strong p { color: rgba(255,255,255,.85); }
.discount.strong b { color: #fff; }
.discount-note { margin: 12px 4px 0; color: var(--muted); font-size: 13px; text-align: center; }

/* Unterstützen */
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.support-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.support-card.donate { grid-column: span 3; display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 40px; align-items: start; }
.support-card.donate h3, .support-card.donate > p { grid-column: 1; }
.support-card.donate { grid-template-rows: auto 1fr; row-gap: 12px; }
.support-card.donate > p { align-self: start; }
.support-card.donate .pay { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.support-card h3 { font-size: clamp(26px, 2.6vw, 34px); margin: 0; color: var(--blue); }
.support-card p { margin: 0; color: var(--text-2); }
.support-card .small, .note .small { font-size: 13.5px; color: var(--muted); }
.support-card .small a { color: var(--blue); font-weight: 600; overflow-wrap: anywhere; }
.support-card .link-arrow { margin-top: auto; }
.pay { display: grid; gap: 14px; }
/* Bankverbindung ruhig (19.10.2026): hellblaue Fläche mit dünnem Rand, IBAN in Textschrift mit festen Ziffernbreiten */
.iban { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--blue-tint); border: 1px solid rgba(1, 81, 161, .18); }
.iban-label { grid-column: 1 / -1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.iban b { grid-column: 1; font: 600 clamp(17px, 1.5vw, 20px)/1.3 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .03em; white-space: nowrap; }
.iban small { grid-column: 1; font-size: 13.5px; color: var(--text-2); }
/* je ein „Kopieren“ rechts neben IBAN und Empfänger */
.iban .iban-copy { grid-column: 2; justify-self: end; height: 30px; padding: 0 10px; font-size: 12.5px; }
.iban-copy { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; font: 600 13px/1 var(--font-body); color: var(--blue); }
.iban-copy svg { width: 15px; height: 15px; }
.use-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.use-grid h2 { font-size: clamp(38px, 4.8vw, 68px); margin: 16px 0 18px; }
.use-intro { color: var(--text-2); font-size: 17px; margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-weight: 600; }
.checklist svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: #fff; color: var(--blue); }
.note-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.note { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3.4vw, 40px); border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.note h3 { font-size: clamp(26px, 2.8vw, 38px); margin: 0; color: var(--blue); }
.note p { margin: 0; color: var(--text-2); }
.contact-note { background: var(--blue); border-color: var(--blue); color: #fff; --dash: rgba(255,255,255,.6); }
.contact-note .eyebrow, .contact-note h3, .contact-note .link-arrow { color: #fff; }
.contact-note p { color: rgba(255,255,255,.85); }
.contact-note .link-arrow { text-transform: none; font: 600 15px/1.3 var(--font-body); overflow-wrap: anywhere; }
.link-arrow svg { flex: none; }

/* ---------- Probetraining-Popup ---------- */
/* Impressum (gleicher Rahmen wie das Probetraining-Popup) */
.pt-dialog.info-dialog { width: min(640px, calc(100vw - 32px)); }
.imp-body { padding: 22px 24px 24px; display: grid; gap: 18px; font-size: 15px; color: #1b3258; }
.imp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.imp-grid address { font-style: normal; line-height: 1.6; padding: 16px 18px; border-radius: 16px; background: var(--blue-tint); }
.imp-grid address strong { display: block; margin-bottom: 4px; font: italic 900 16px/1.2 var(--font-display); text-transform: uppercase; color: var(--blue); }
.imp-links { display: grid; gap: 4px; margin-top: 10px; }
.imp-links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); }
.imp-links a:hover { text-decoration: underline; }
.imp-links svg { width: 15px; height: 15px; flex: none; }
.imp-facts { margin: 0; display: grid; gap: 8px; align-content: start; }
.imp-facts div { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(1,81,161,.14); }
.imp-facts dt, .imp-abbr h3 { font: 700 10.5px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.imp-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.imp-abbr h3 { margin-bottom: 8px; }
.imp-abbr dl { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.imp-abbr dl div { display: flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; }
.imp-abbr dt { font-weight: 800; color: var(--blue); }
.imp-abbr dd { margin: 0; }
.kt-list { display: grid; gap: 6px; align-content: start; }
.kt-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(1,81,161,.14); transition: background .2s; }
.kt-list a:hover { background: var(--paper); }
.kt-list svg { width: 16px; height: 16px; flex: none; padding: 7px; box-sizing: content-box; border-radius: 9px; background: var(--blue-tint); color: var(--blue); }
.kt-list span { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.kt-list b { font-size: 14px; color: var(--ink); }
.kt-social { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-social a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 13.5px; transition: background .2s; }
.kt-social a:hover { background: var(--blue-900); }
.kt-social svg { width: 15px; height: 15px; }
.imp-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pt-dialog {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px;
  background: #fff; color: var(--ink); overflow: auto; box-shadow: 0 40px 100px -30px rgba(2, 20, 50, .8);
}
.pt-dialog::backdrop { background: rgba(4, 24, 56, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pt-form { display: flex; flex-direction: column; }
.pt-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0 14px; align-items: center; padding: 18px 22px 16px; color: #fff; background: var(--tex-bg); }
.pt-head > img { width: 40px; height: 41px; }
.pt-kicker { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.pt-head h2 { margin: 2px 0 0; font-size: clamp(20px, 3vw, 24px); }
.pt-close { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .3s; }
.pt-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.pt-close svg { width: 16px; height: 16px; }
.pt-steps { grid-column: 1 / -1; list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pt-steps li { display: flex; align-items: center; gap: 7px; padding-top: 8px; border-top: 3px solid rgba(255,255,255,.22); font-size: 12.5px; font-weight: 600; opacity: .65; transition: all .3s; }
.pt-steps li span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); font: 800 10.5px/1 var(--font-body); }
.pt-steps li.active, .pt-steps li.done { opacity: 1; border-top-color: #fff; }
.pt-steps li.active span, .pt-steps li.done span { background: #fff; color: var(--blue); }
.pt-body { padding: 20px 22px 6px; }
.pt-step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.pt-step.active { display: block; animation: fadeUp .35s cubic-bezier(.2,.8,.2,1); }
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: 1 / -1; }
/* Felder mit schwebendem Label */
.pt-float { position: relative; display: block; }
.pt-float input, .pt-float textarea {
  width: 100%; height: 54px; padding: 22px 14px 6px; border-radius: 12px; border: 1.5px solid rgba(1,81,161,.14); background: #f7f9fd;
  font: 500 15px/1.3 var(--font-body); color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s;
}
.pt-float textarea { height: auto; min-height: 76px; resize: vertical; padding-top: 24px; }
.pt-float > span { position: absolute; left: 15px; top: 17px; font-size: 14.5px; color: var(--muted); pointer-events: none; transition: all .18s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 28px); }
.pt-float input:focus + span, .pt-float input:not(:placeholder-shown) + span,
.pt-float textarea:focus + span, .pt-float textarea:not(:placeholder-shown) + span, .pt-float.is-fixed > span { top: 7px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--blue); }
.pt-float input:focus, .pt-float textarea:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(1, 81, 161, .1); }
.pt-float input:user-invalid, .pt-float textarea:user-invalid { border-color: var(--red); }
.pt-float input[type=date] { padding-right: 10px; display: block; box-sizing: border-box; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; } /* iOS Safari: ein leeres Datumsfeld ist sonst breiter und höher als die anderen und ragt aus dem Popup */
.pt-float input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; margin: 0; }
/* Adress-Vorschläge (assets/adresse.js): Liste unter dem Feld, Stil wie die Formularfelder */
.adr-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; padding: 4px; background: #fff;
  border: 1px solid var(--blue); border-radius: 12px; box-shadow: 0 10px 28px rgba(8, 30, 60, .16); }
.adr-liste[hidden] { display: none; }
.adr-liste button { padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink, #0b2240); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.adr-liste button:hover, .adr-liste button.ist-aktiv { background: rgba(1, 81, 161, .08); color: var(--blue); }
.pt-dialog i { color: var(--red); font-style: normal; }
.pt-group { display: grid; gap: 8px; }
.pt-hint-line { margin: -6px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.pt-label { font-size: 13px; font-weight: 700; }
/* Segment-Schalter */
.pt-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 12px; background: #eef3fa; }
.pt-seg label, .pt-scale label { position: relative; cursor: pointer; }
.pt-seg input, .pt-scale input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pt-seg span { display: grid; place-items: center; height: 40px; border-radius: 9px; font-weight: 600; font-size: 14px; color: #1b3258; transition: all .2s; }
.pt-seg input:checked + span { background: #fff; color: var(--blue); box-shadow: 0 4px 12px -6px rgba(1, 81, 161, .45); }
.pt-seg input:focus-visible + span, .pt-scale input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Erfahrungs-Skala */
.pt-scale { display: grid; grid-template-columns: repeat(11, 1fr); padding: 4px; gap: 2px; border-radius: 12px; background: #eef3fa; }
.pt-scale span { display: grid; place-items: center; height: 36px; border-radius: 8px; font: 700 14px/1 var(--font-body); color: #1b3258; transition: all .2s; }
.pt-scale label:hover span { background: #fff; }
.pt-scale input:checked + span { background: var(--blue); color: #fff; box-shadow: 0 4px 12px -6px rgba(1, 81, 161, .6); }
.pt-scale-legend { display: flex; justify-content: space-between; margin-top: -2px; }
.pt-scale-legend small { font-size: 11.5px; color: var(--muted); }
/* Abmeldung: Auswahlkarten mit Erklärung (assets/abmeldung.js) */
.ab-choices { display: grid; gap: 8px; }
.ab-verein[hidden] { display: none; }
.ab-verein .ab-note { margin: 2px 0 0; }
.ab-choice { position: relative; cursor: pointer; }
.ab-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ab-choice > span { display: grid; gap: 3px; padding: 12px 14px 12px 44px; border: 1.5px solid #dfe7f2; border-radius: 12px; background: #fff; transition: border-color .2s, background .2s; }
.ab-choice > span::before { content: ""; position: absolute; left: 15px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #b7c5da; background: #fff; transition: all .2s; }
.ab-choice b { font-size: 14px; color: var(--ink); }
.ab-choice small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ab-choice input:checked + span { border-color: var(--blue); background: #f4f8fd; }
.ab-choice input:checked + span::before { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
.ab-choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
/* drei lange Vereinsnamen: auf schmalen Bildschirmen untereinander */
.ab-seg { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (max-width: 520px) { .ab-seg { grid-auto-flow: row; } }
.pt-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #f7f9fd; font-size: 12.5px; color: #52637f; }
.pt-note svg { width: 15px; height: 15px; flex: none; color: var(--blue); }
.pt-note.is-error { background: #fdecef; color: var(--red); font-weight: 600; }
.pt-note.is-error svg { color: var(--red); }
.pt-float.is-error input { border-color: var(--red); background: #fff; }
.pt-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #52637f; line-height: 1.45; cursor: pointer; }
.pt-consent input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--blue); }
.pt-consent a { color: var(--blue); font-weight: 600; text-decoration: underline; }
/* Zustimmung fehlt: rot umrandet und mit Klartext – die Sprechblase des Browsers allein übersieht man leicht */
.pt-consent.is-error { padding: 10px 12px; margin: -4px -6px; border-radius: 10px; background: #fdecef; color: var(--red); }
.pt-consent.is-error input { outline: 2px solid var(--red); outline-offset: 2px; }
.pt-consent.is-error > span::after { content: "Bitte zustimmen, damit wir die Angaben verarbeiten dürfen."; display: block; margin-top: 4px; font-weight: 700; }
.pt-group.is-error .pt-label { color: var(--red); }
.pt-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px 18px; }
.pt-foot .btn { height: 44px; padding: 0 20px; font-size: 13.5px; }
.pt-foot .btn-ghost { color: var(--ink); border-color: rgba(1,81,161,.2); }
.pt-foot .btn-primary { background: var(--blue); color: #fff; box-shadow: none; }
.pt-hint { margin-right: auto; font-size: 12px; color: var(--muted); }
.pt-finish { margin-left: auto; }
.pt-done { text-align: center; padding: 24px 8px 8px; }
.pt-done-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; }
.pt-done-icon svg { width: 30px; height: 30px; }
.pt-done h3 { font-size: 26px; margin: 0 0 8px; color: var(--blue); }
.pt-done p { margin: 0 auto; max-width: 40ch; color: #1b3258; font-size: 15px; }
@media (max-width: 640px) {
  .imp-grid { grid-template-columns: 1fr; }
  .info-dialog.pt-dialog { width: 100vw; max-width: 100vw; height: fit-content; max-height: 100dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  /* Handy: Formulare als Popup in der Mitte mit Rand ringsum, nur so hoch wie der Inhalt (kein Vollbild, kein Blatt) */
  .pt-dialog { width: calc(100vw - 24px); max-width: 520px; height: fit-content; max-height: calc(100dvh - 24px); border-radius: 22px; margin: auto; } /* fit-content statt auto: ein absolut positionierter Dialog mit height:auto streckt sich sonst bis an beide Ränder */
  .pt-dialog[open] { display: flex; flex-direction: column; }
  .pt-form { flex: 1; }
  .pt-body { flex: 0 1 auto; }
  .pt-grid { grid-template-columns: 1fr; }
  .pt-scale { grid-template-columns: repeat(6, 1fr); }
  .pt-hint { display: none; }
  .pt-foot .btn { flex: 1; justify-content: center; }
}

/* ---------- Ansprechpartner & Mitgliedschaft ---------- */
/* Bereichsleiste (nav.js, Variante B, 07.10.2026): vollbreite Glasleiste unter der Kopfleiste mit Nummern, gleitendem gelben Schrägbalken (wie beim Hauptmenü)
   und Fortschrittslinie unten. Erscheint, sobald man scrollt; auf dem Handy flach, mit Randverlauf als Hinweis auf weitere Einträge. */
.tab-dock { position: fixed; z-index: 45; top: 84px; left: 0; right: 0; height: 52px; overflow: hidden; pointer-events: none; visibility: hidden; }
@media (min-width: 641px) { .tab-dock { z-index: 51; top: 66px; padding-top: 0; } }
.nav.mega-open { z-index: 55; }
.td-shell {
  position: relative; height: 100%; display: flex; justify-content: center; background: var(--bar-bg);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .65); transform: translateY(-100%); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.td-shell::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 20%, rgba(255,255,255,.2) 80%, transparent); }
.nav.has-dock .mainbar { box-shadow: none; }
.tab-dock.on { visibility: visible; }
.tab-dock.on .td-shell { transform: none; pointer-events: auto; }
.td-track { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; }
.td-track::-webkit-scrollbar { display: none; }
.td-track a { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 20px; min-height: 52px; font: 600 14px/1 var(--font-body); color: rgba(255,255,255,.72); white-space: nowrap; transition: color .25s; }
.td-track a + a::before { content: ""; position: absolute; left: 0; top: 17px; bottom: 17px; width: 1px; background: rgba(255,255,255,.12); }
/* Nummer vor dem Namen; der Alt-Text „“ sorgt dafür, dass Screenreader sie nicht vorlesen */
.td-track a::after { content: attr(data-n) / ""; order: -1; font: 700 10.5px/1 var(--font-body); letter-spacing: .08em; color: rgba(255,255,255,.4); transition: color .25s; }
.td-track a:hover, .td-track a.is-active { color: #fff; }
.td-track a:hover::after, .td-track a.is-active::after { color: var(--yellow); }
/* gleitender Schrägbalken – gleiche Form wie .primary > li.is-current > a::after */
.td-ind { position: absolute; left: 0; top: 0; bottom: 2px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.1)); transition: transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1); }
.td-ind::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; background: var(--yellow); transform: skewX(-20deg); box-shadow: 0 0 18px rgba(252, 200, 4, .55); }
@media (prefers-reduced-motion: reduce) { .td-ind, .td-shell { transition: none; } }
.group-photo { margin: 0 0 20px; border-radius: 22px; overflow: hidden; position: relative; }
.group-photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: var(--pos, 50% 35%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 35%); display: block; }
.group-photo figcaption { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 10px; background: rgba(4,36,77,.7); color: #fff; font-size: 13px; backdrop-filter: blur(6px); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.people.two { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.person-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.theme-light .person-card { background: #fff; }
.pc-photo { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--tex-bg); }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 25%); }
/* ohne Foto in assets/verein/: blasses Wappen als Platzhalter */
.pc-photo.no-photo { position: relative; }
.pc-photo.no-photo::before { content: ""; position: absolute; inset: 22% 18%; background: url("wappen.webp") center / contain no-repeat; filter: grayscale(1) brightness(2.2); opacity: .22; }
.pc-body { min-width: 0; padding-top: 2px; }
.role-pill-light { display: inline-block; max-width: 100%; white-space: nowrap; padding: 4px 11px; border-radius: 999px; font: 600 11.5px/1.3 var(--font-body); background: var(--tint); color: var(--text-2); border: 1px solid var(--line); }
.person-card h3 { font: italic 900 22px/1.05 var(--font-display); text-transform: uppercase; margin: 6px 0 8px; color: var(--text); }
/* Vorname oben, Nachname darunter – immer zwei Zeilen, auch wenn beides in eine passen würde (Feedback #6) */
.person-card h3 > span { display: block; }
.theme-light .person-card h3 { color: var(--blue); }
.pc-contact { display: grid; gap: 4px; }
.pc-contact .contact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.pc-contact .contact:hover { color: var(--text); text-decoration: underline; }
.pc-contact svg { width: 14px; height: 14px; flex: none; }
.tasks { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; color: var(--text-2); display: grid; gap: 2px; }
.reg-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.steps-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3.4vw, 36px); border-radius: 22px; background: var(--blue); color: #fff; --dash: rgba(255,255,255,.6); }
.steps-card .eyebrow { color: #fff; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow li { display: flex; gap: 12px; align-items: center; }
.flow b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--blue); font: italic 900 14px/1 var(--font-display); }
.steps-card .btn-primary { align-self: flex-start; background: #fff; color: var(--blue); }
.reg-foot { margin: 18px 0 0; color: var(--text-2); font-size: 14.5px; }
.reg-foot a, .section-head p a, .note p a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.abm-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); max-width: 120ch; }
@media (max-width: 420px) { .role-pill-light { white-space: normal; } }
@media (max-width: 640px) {
  .tab-dock { top: 72px; height: 48px; }
  .td-track a { min-height: 48px; padding: 0 15px; font-size: 13.5px; }
  .td-track a + a::before { display: none; }
}
@media (max-width: 920px) { .reg-grid { grid-template-columns: 1fr; } .people.two { grid-template-columns: 1fr; } }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; } /* sanft, kaum Bewegung (19.10.2026) */
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1260px) { .primary > li > a { padding: 0 9px; } .nav-actions .btn { padding: 0 13px; } }
@media (max-width: 1180px) {
  .primary { display: none; }
  .nav-bereich { display: block; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 1080px) {
  .teams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .matches { grid-template-columns: 1fr; }
    .results { grid-template-columns: repeat(2, 1fr); }

  .tile.t-hero { grid-column: span 12; grid-row: auto; min-height: 260px; }
  .tile.t-a { grid-column: span 12; }
}
@media (max-width: 920px) {
  .hero-grid, .team-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > * { min-width: 0; }
  .news { max-width: 100%; justify-self: stretch; }
  .hero-copy { padding-bottom: 0; }
  .hero-grid:has(.hero-copy) .slide { aspect-ratio: auto; height: auto; min-height: 420px; }
  .hero-copy h1 { margin-bottom: 28px; }
  .hero-copy .hero-lead { margin-top: 0; padding-top: 0; }
  .hero { padding: 124px 0 var(--luft); }
  .team-hero { padding-top: 146px; }
  .team-hero .team-copy h1 { font-size: clamp(30px, 9vw, 44px); }
  .hero-crest { width: 56vw; right: -12%; top: 60%; opacity: .045; }
  .venues { grid-template-columns: 1fr; }
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .sponsor-grid.ist-mittel { grid-template-columns: 1fr 1fr; }
  .support-grid { grid-template-columns: 1fr 1fr; }
  .support-card.donate { grid-column: span 2; grid-template-columns: 1fr; }
  .support-card.donate .pay { grid-column: 1; grid-row: auto; }
  .use-grid, .note-grid { grid-template-columns: 1fr; }
  .shop-main { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head h2 { overflow-wrap: anywhere; }
  .section-head > :not(:first-child) { grid-column: 1; grid-row: 3; justify-self: start; }
  .section-head p { width: auto; }
  .slogan { white-space: normal; font-size: clamp(20px, 5vw, 32px); }
  .slogan .bar { white-space: normal; }
  .about-grid > div:first-child { position: static; }

  .cta { grid-template-columns: 1fr; }
  .staff { grid-template-columns: 1fr; }
  .staff .coach-body { height: auto; }
  .venue-wide { grid-template-columns: 1fr; }
  .team-grid .team-photo { max-width: 620px; } /* Format 3 : 2 wie am Desktop (oben), nur schmaler */
}
@media (max-width: 640px) {
  .btn { white-space: normal; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; text-align: left; }
  .cta h2, .cta.cta-compact h2 { font-size: clamp(26px, 8vw, 60px); }
  .page-hero h1 { font-size: clamp(26px, 7.6vw, 100px); }
  .nav-actions .btn { display: none; }
  .team-hero { padding-top: 112px; }
  .mainbar > .wrap { height: 72px; }
  .nav .brand img { width: 88px; height: 89px; }
  .nav.scrolled .brand img { width: 44px; height: 45px; }
  .nav-bereich { margin-left: 104px; font-size: 16px; }
  .nav.scrolled .nav-bereich, .nav.mega-open .nav-bereich { margin-left: 58px; }
  .brand-text strong { font-size: 17px; }
  .results { grid-template-columns: 1fr; }
  .clubs-stat { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .tile.t-duo { gap: 16px; padding-right: 12px; }
  .tile.t-duo > div { flex: 1 1 0; min-width: 0; }
  .tile.t-duo .eyebrow { font-size: 10px; letter-spacing: .1em; gap: 7px; }
  .tile.t-duo .eyebrow::before { width: 16px; }
  .tile.t-duo > div + div { padding-left: 16px; }
  .clubs-stat .club-list { gap: 3px; }
  .clubs-stat .club-list li { font-size: 9px; padding: 2px 5px; border-radius: 6px; }
    .chips { flex-wrap: nowrap; }

  .sponsor-grid { grid-template-columns: 1fr 1fr; }

  .support-grid, .discounts { grid-template-columns: 1fr; }
  .support-card.donate { grid-column: auto; }
  .iban { padding: 14px; }
  .iban b { font-size: clamp(15px, 4.4vw, 17px); white-space: normal; } /* neben „Kopieren“ notfalls zweizeilig */
  .iban { gap: 6px 10px; }
  .support-card { padding: 20px 18px; }
  .teams { grid-template-columns: 1fr 1fr; gap: 8px; }
  .team-card { padding: 18px; }
  .team-card .big { font-size: 60px; }
  .team-card h3 { font-size: 20px; }
  .match { grid-template-columns: 60px 1fr; gap: 14px; padding: 14px; }
  .date b { font-size: 24px; }
  .m-side { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 12px; }
  .kick small { display: inline; margin-left: 6px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .seg { align-self: flex-start; }
  .fact-pills { display: flex; flex-wrap: wrap; }
  .fact-pills li { font-size: 13px; }
  .calendar { grid-template-columns: 1fr; }
  .cal-icon { width: 64px; height: 64px; border-radius: 18px; }
  .cal-btn { flex: 1 1 calc(50% - 10px); justify-content: center; }
  .facts div { padding: 9px 11px; }
  .facts dt { font-size: 9.5px; letter-spacing: .06em; }
  .facts dd { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- News-Folien im Story-Stil ---------- */
.hero-grid:has(.hero-copy) .slide.ns { padding: 16px 22px 18px; gap: 10px; justify-content: flex-start; }
.ns-bars { display: flex; gap: 5px; }
.ns-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); }
.ns-bars i.on { background: #fff; }
.ns-head { display: flex; align-items: center; gap: 12px; }
.ns-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: #fff; color: var(--blue); }
.ns-ic svg { width: 20px; height: 20px; }
.ns-head h3 { margin: 0; font-size: 26px; line-height: 1; }
.ns-post .ns-head h3 { font-size: 24px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: .06em; }
.ns-head small { display: block; margin-top: 4px; font-size: 12.5px; opacity: .75; }
.ns-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ns-row { display: grid; grid-template-columns: 138px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ns-row:last-child { border-bottom: 0; }
.ns-row:not(.is-result) { grid-template-columns: 84px 138px 1fr; column-gap: 12px; }
.ns-kick { grid-row: 1 / 3; display: grid; gap: 5px; justify-items: start; }
.ns-kick b { font: italic 500 15px/1 var(--font-display); color: #fff; } /* leiser als der Mannschaftsname daneben, damit der der Anker der Zeile bleibt */
.ns-kick .s-ha { margin: 0; }
.ns-us { font: italic 900 13.5px/1.1 var(--font-display); text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ns-liga { justify-self: start; font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.75); white-space: nowrap; }
.ns-opp { grid-column: 1 / 3; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-row:not(.is-result) .ns-opp { grid-column: 2 / 4; }
.ns-score { grid-column: 3; grid-row: 1 / 3; min-width: 58px; text-align: center; padding: 6px 8px 5px; border-radius: 10px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: italic 900 20px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ns-score i { font-style: normal; opacity: .6; }
.ns-row.o-w .ns-score { color: #8ee6b1; } .ns-row.o-l .ns-score { color: #ff8578; } .ns-row.o-d .ns-score { color: rgba(255,255,255,.75); }
.ns-day { display: flex; align-items: center; gap: 10px; padding: 6px 0 1px; font: italic 900 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ns-day::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.ns-btn { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 13px; border-radius: 14px; background: #fff; color: var(--blue); font: italic 800 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; transition: background .2s; }
.ns-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.ns-btn:hover { background: var(--blue-tint); }
.ns-btn:hover svg { transform: translateX(3px); }
/* Beiträge: Bild füllt den Platz, Text darunter */
.ns-team { font-size: 13px; }
.ns-vis { flex: 1 1 0; min-height: 70px; border-radius: 18px; }
.ns-logo { display: grid; place-items: center; background: #fff; padding: 18px; }
.ns-logo img { max-width: 80%; max-height: 100%; object-fit: contain; }
.ns-logo b { font: italic 900 22px/1.1 var(--font-display); text-transform: uppercase; color: var(--blue); text-align: center; }
.ns-photo { overflow: hidden; }
.ns-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ns-text { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Punkte unter der Box entfallen – die Balken in der Folie zeigen die Position */
.news-dots { visibility: hidden; }

.ns > * { flex-shrink: 0; }
.ns > .ns-vis { flex-shrink: 1; }

/* Balken: gelesene Folien voll, aktuelle füllt sich im Autoplay-Takt */
.ns-bars i { position: relative; overflow: hidden; }
.ns-bars i.now { background: rgba(255,255,255,.25); }
.news:not(.is-auto) .ns-bars i.now { background: #fff; }
.ns-bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.ns-bars i.run::after { animation: nsFill var(--news-seconds, 10s) linear forwards; }
.news.is-paused .ns-bars i.run::after { animation-play-state: paused; }
.news.ist-ausser-sicht .ns-bars i.run::after { animation-play-state: paused; } /* start.js: erst laufen, wenn der Slider zu sehen ist */
@keyframes nsFill { to { transform: scaleX(1); } }
/* Link unten dezent, links; Pfeile sitzen rechts daneben in der Kachel */
.ns-btn { margin-top: auto; align-self: flex-start; justify-content: flex-start; padding: 12px 0 2px; border-radius: 0; background: none; color: #fff; font-size: 13px; }
.ns-btn:hover { background: none; text-decoration: underline; }
.hero-grid:has(.hero-copy) .news-nav { position: absolute; right: 22px; bottom: 18px; z-index: 2; margin: 0; gap: 8px; justify-content: flex-end; }
.hero-grid:has(.hero-copy) .news-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }
.hero-grid:has(.hero-copy) .news-btn:hover:not(:disabled) { background: #fff; color: var(--blue); }
.hero-grid:has(.hero-copy) .news-dots { display: none; }
.hero-grid:has(.hero-copy) .ns-btn { min-height: 38px; align-items: center; padding-top: 10px; }
/* Ergebnis: Doppelpunkt in derselben Farbe */
.ns-score i { opacity: 1; color: inherit; }
/* Beiträge: Text größer */
.slide.ns .ns-text { font-size: 19px; line-height: 1.4; opacity: 1; }
.slide.ns:has(.ns-logo) .ns-text { -webkit-line-clamp: 5; }

/* ---------- Folienaufbau Z2: weißes Kopfband · Inhalt · Text · Fußleiste ---------- */
.hero-grid:has(.hero-copy) .slide.ns { padding: 0; gap: 0; }
.ns-zhead { padding: 12px 20px 14px; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--blue); }
.ns-zhead .ns-bars { margin-bottom: 12px; }
.ns-zhead .ns-bars i { background: rgba(1,81,161,.16); }
.ns-zhead .ns-bars i.on, .news:not(.is-auto) .ns-zhead .ns-bars i.now, .ns-zhead .ns-bars i::after { background: var(--blue); }
.ns-zhead .ns-bars i.now { background: rgba(1,81,161,.16); }
.ns-zhead .ns-ic { background: var(--blue); color: #fff; }
.ns-zhead .ns-head h3 { font-size: 23px; line-height: 1.05; padding-top: .06em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-zhead .ns-head small { color: #63748f; opacity: 1; font-weight: 600; }
.ns-zbody { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 10px 20px 0; }
.ns-zbody > .ns-vis { flex: 1 1 0; min-height: 0; height: auto; }
.slide.ns > .ns-text { margin: 12px 20px; padding: 0; }
.ns-zbody { overflow: hidden; }
.ns-zfoot { display: flex; align-items: center; min-height: 60px; padding: 0 20px; background: rgba(0,15,45,.3); border-top: 1px solid rgba(255,255,255,.12); }
.ns-zfoot .ns-btn { margin: 0; padding: 0; min-height: 0; align-self: center; }
.hero-grid:has(.hero-copy) .news-nav { bottom: 11px; right: 20px; }
.ns-logo { height: auto; }
.slide.ns:has(.ns-logo) .ns-text { -webkit-line-clamp: 3; }

.ns-row:not(.is-result) .ns-liga { justify-self: end; }

/* Ergebnis: Zahlen untereinander in der Ergebnisfarbe, farbiger Strich links wie bei den Ergebnis-Karten */

@media (max-width: 640px) {
  .slide.ns .ns-text { font-size: 17px; -webkit-line-clamp: 3; }
}

.ns-zhead .ns-head small b { color: var(--blue); font-weight: 800; }
.ns-day b { color: var(--yellow); font-weight: 900; } /* Heute/Morgen/Gestern gelb */

/* Vorschau der Verwaltung (index.html?newsvorschau): nur der News-Slider bleibt sichtbar.
   Die Startseite links bleibt unsichtbar im Layout, damit die Folie exakt so hoch ist wie live. */
html.news-vorschau body > :not(main):not(svg),
html.news-vorschau main > :not(.hero),
html.news-vorschau .hero-bg { display: none !important; }
html.news-vorschau .hero-copy { visibility: hidden; }
html.news-vorschau, html.news-vorschau body { overflow: hidden; }
html.news-vorschau .news { animation: none; }
/* News-Box hoch genug für 6 Spiele */
/* News-Fenster etwas flacher als hoch-kant: breiter und niedriger */
.hero-grid:has(.hero-copy) .news-track { min-height: 470px; }
@media (max-width: 920px) { .hero-grid:has(.hero-copy) .slide { min-height: 460px; } }

/* ---------- Spieltag: Ansicht + Filter in einer Leiste ---------- */
#spieltag .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
#spieltag .toolbar .chips.filters { width: auto; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; overflow: visible; padding: 0; }
.fgrp { display: flex; align-items: center; gap: 10px; }
.fgrp > span { font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chip.fl { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--blue); font: italic 900 16px/1 var(--font-display); transition: background .2s, color .2s, transform .2s; }
.chip.fl::after { content: none !important; }
.chip.fl:hover { background: var(--blue-tint); }
.chip.fl[aria-pressed="true"] { background: var(--blue); color: #fff; transform: scale(1.05); box-shadow: 0 6px 14px -8px rgba(1,81,161,.8); }
@media (max-width: 640px) {
  #spieltag .toolbar { gap: 12px; }
  #spieltag .toolbar .chips.filters { flex-basis: 100%; gap: 10px 14px; }
  .fgrp { flex-wrap: wrap; gap: 6px 8px; }
  .chip.fl { width: 32px; height: 32px; font-size: 14px; }
}

/* Unterauswahl der Mannschaften: hellere Lasche, die unter der weißen Leiste der Altersklassen herausfährt.
   So breit wie nötig, mittig unter dem gewählten Buchstaben, nie breiter als die Leiste. */
.fgrp { align-items: flex-start; }
.fgrp > span { line-height: 46px; }
.fcol { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.fcap { position: relative; z-index: 2; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.fsub { --tint: #d5e3f7; --ink: var(--blue); position: absolute; z-index: 3; left: 0; top: calc(100% - 1px); width: max-content;
  /* oben bündig an der Leiste abgeschnitten: die Lasche kommt sichtbar „aus“ der Leiste */
  clip-path: inset(0 -40px -60px -40px); }
.fsub[hidden] { display: none; }
.fsub-track { position: relative; display: flex; gap: 2px; padding: 5px 5px 6px; border-radius: 0 0 18px 18px; background: var(--tint);
  box-shadow: 0 12px 20px -16px rgba(1,40,90,.5); transform: translateY(-101%); }
/* weiche Hohlkehlen links und rechts: Leiste und Lasche wirken wie aus einem Stück */
.fsub-track::before, .fsub-track::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; pointer-events: none; }
.fsub-track::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent 9.5px, var(--tint) 10px); }
.fsub-track::after { left: 100%; background: radial-gradient(circle at 100% 100%, transparent 9.5px, var(--tint) 10px); }
.fsub.is-open .fsub-track { animation: fsubDrop .8s cubic-bezier(.22,.9,.3,1) forwards; }
.fsub.is-closing .fsub-track { animation: fsubUp .32s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes fsubDrop { 0% { transform: translateY(-101%); } 55% { transform: translateY(9%); } 78% { transform: translateY(-3%); } 100% { transform: none; } }
@keyframes fsubUp { from { transform: none; } to { transform: translateY(-101%); } }
.fsub-track button { position: relative; z-index: 1; flex: none; border: 0; background: none; cursor: pointer; padding: 7px 14px; border-radius: 999px; font: 700 13.5px/1 var(--font-body); color: var(--ink); transition: color .35s; }
.fsub-track button.is-active { color: #fff; }
.fsub.is-tight .fsub-track button { flex: 1 1 auto; min-width: 0; padding: 7px 5px; font-size: 13px; }
.fsub-ind { position: absolute; left: 0; top: 5px; height: calc(100% - 11px); border-radius: 999px; background: var(--ink); box-shadow: 0 5px 12px -7px var(--ink);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), width .45s cubic-bezier(.34,1.56,.64,1); }
/* die gewählte Pille ploppt erst auf, wenn die Lasche unten ist */
.fsub.is-fresh .fsub-ind { animation: fsubInd .45s .5s cubic-bezier(.34,1.56,.64,1) both; }
.fsub.is-fresh .fsub-track button.is-active { animation: fsubTxt .3s .55s both; }
@keyframes fsubInd { from { scale: .3; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes fsubTxt { from { color: var(--ink); } to { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .fsub .fsub-track, .fsub .fsub-ind, .fsub .fsub-track button { animation-duration: .01s !important; animation-delay: 0s !important; } }
/* Platz für die Lasche ist fest reserviert – beim Auswählen verschiebt sich nichts */
@media (min-width: 641px) {
  #spieltag .toolbar { align-items: flex-start; margin-bottom: 14px; }
  #spieltag .fgrp { padding-bottom: 42px; }
  /* Ohne Lasche steht alles mittig im reservierten Platz; fährt eine Lasche heraus, gleitet die Zeile nach oben */
  #spieltag .toolbar:has(.fgrp) > * { transform: translateY(21px); transition: transform .6s cubic-bezier(.22,.9,.3,1); }
  #spieltag .toolbar:has(.fsub.is-open) > * { transform: none; }
  /* passt nicht alles in eine Zeile: Umschalter oben, Buchstaben darunter */
  #spieltag .toolbar.is-stacked { flex-direction: column; gap: 16px; }
  #spieltag .toolbar.is-stacked > * { transform: none; }
  #spieltag .toolbar.is-stacked .chips.filters { flex: none; width: 100%; }
}
/* Handy: die Lasche liegt im Fluss, der Inhalt darunter gleitet mit */
@media (max-width: 640px) {
  .fsub { position: relative; top: -1px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,.9,.3,1); }
  .fsub.is-open { grid-template-rows: 1fr; }
  .fsub > .fsub-track { min-height: 0; }
  .fsub-track button { padding: 7px 11px; font-size: 13px; }
}
/* Über uns und Spiele & Ergebnisse liegen hintereinander: Über uns weiß, damit sie sich abheben */
#verein.theme-light { --bg-s: #fff; }

.slide.ns .ns-zfoot { margin-top: auto; }

/* Mannschaftsseite: unsere Mannschaft als Schild in der Zeile */
/* Vorschau des Foto-Editors der Verwaltung (team.html?fotovorschau): nur Kopfbereich bzw. Trainerkarte,
   ohne Animationen, damit Ausschnitt und Zoom sofort und exakt so erscheinen wie live. */
html.foto-vorschau body > :not(main):not(svg),
html.foto-vorschau main > :not(#team),
html.foto-vorschau.fv-trainer main > :not(#training),
html.foto-vorschau #training .section-head { display: none !important; }
html.foto-vorschau.fv-trainer main > #training { display: block !important; }
html.foto-vorschau.fv-trainer main > #team { display: none !important; }
html.foto-vorschau, html.foto-vorschau body { overflow: hidden; }
html.foto-vorschau *, html.foto-vorschau *::before, html.foto-vorschau *::after { animation: none !important; transition: none !important; }
html.foto-vorschau .reveal { opacity: 1; transform: none; }
/* Gegnernamen beginnen bündig mit dem Text im Schild („D1 …“); Heim neutral wie Auswärts, damit nur das Team-Schild blau ist */
/* News-Box: Juniorinnen auf Blau weiß wie Junioren – Rosa wirkte dort blass und verloren */
.ns-us.is-girls { color: #fff; }
/* Handy: Anstoßzeit links unter dem Datum, rechts bleibt die volle Breite für die Paarung */
@media (max-width: 640px) {
  .match { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 8px; }
  .match > .date { grid-column: 1; grid-row: 1; }
  .match > .m-body { grid-column: 2; grid-row: 1 / 3; }
  .match > .m-side { grid-column: 1; grid-row: 2; align-self: start; display: block; text-align: center; }
  .match .kick { font-size: 19px; }
  .match .kick small { display: block; margin: 0; font-size: 10px; }
}

/* Nächste Spiele als Liste unter Tagesbändern: eine flache Zeile pro Spiel, von oben nach unten chronologisch –
   Anstoß | Mannschaft + Liga | Paarung | Heim/Auswärts + Ort. Ergebnisse bleiben Karten mit Verbindungsstrich. */
@media (min-width: 641px) {
  .matches:has(> .dg) { grid-template-columns: 1fr; gap: 16px; }
  .dg .match { grid-template-columns: 84px minmax(140px, 220px) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 22px; padding: 12px 22px; }
  .dg .match .m-body { display: contents; }
  .dg .match .m-side { order: -1; align-self: stretch; display: flex; align-items: center; text-align: left; border-right: 2px solid var(--blue-tint); }
  .dg .match .kick { font-size: 26px; }
  .dg .match .kick small { display: none; }
  .dg .match .m-team-label { flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; }
  .dg .match .m-venue { flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; }
  .dg .match .m-venue a { max-width: 100%; }
}
@media (max-width: 640px) {
    /* Handy: Anstoß links (das Datum steht im Band), rechts Mannschaft, Paarung und Ort */
  .dg .match { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto; padding: 14px 16px 14px 12px; }
  .dg .match > .m-body { grid-column: 2; grid-row: 1; }
  .dg .match > .m-side { grid-column: 1; grid-row: 1; align-self: center; border-right: 2px solid var(--blue-tint); padding-right: 8px; }
}

/* News-Liste: keine doppelte Linie, wenn nach einer Zeile ein neuer Tag beginnt */
.ns-row:has(+ .ns-day) { border-bottom: 0; }
/* Nächste Spiele: Datums-Kachel links je Spieltag, verbunden durch einen Zeitstrahl; die Kachel bleibt beim Scrollen stehen */
.dg { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 16px; }
.dg::before { content: ""; position: absolute; left: 45px; top: 30px; bottom: -16px; width: 2px; background: rgba(1,81,161,.16); }
.dg:last-child::before { display: none; }
.dg-date { position: sticky; top: 150px; align-self: start; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: 11px 0 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -18px rgba(1,40,90,.6); }
.dg-date small { font: 700 11px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dg-date b { font: italic 900 32px/1 var(--font-display); color: var(--blue); }
.dg-date.is-rel { background: var(--blue); border-color: var(--blue); box-shadow: 0 10px 22px -12px rgba(1,81,161,.8); }
.dg-date.is-rel small, .dg-date.is-rel b { color: #fff; }
.dg-rows { display: grid; gap: 8px; }
@media (min-width: 641px) {
  .dg .match { grid-template-columns: 76px minmax(130px, 210px) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 20px; }
}
@media (max-width: 640px) {
  .dg { grid-template-columns: 54px minmax(0, 1fr); gap: 0 8px; }
  .dg::before { left: 26px; top: 24px; }
  .dg-date { top: 132px; padding: 8px 0 9px; border-radius: 14px; }
  .dg-date small { font-size: 9.5px; letter-spacing: .1em; }
  .dg-date b { font-size: 24px; }
  .dg .match { grid-template-columns: 50px minmax(0, 1fr); padding: 12px 12px 12px 8px; column-gap: 10px; }
  .dg .kick { font-size: 17px; }
}
/* News-Beitrag: Text mittig zwischen Grafik und Fußleiste */
.slide.ns-post > .ns-text { margin-top: auto; margin-bottom: auto; }
.slide.ns-post:has(> .ns-text) .ns-zfoot { margin-top: 0; }
/* News-Box hebt sich ab: leicht in den Raum gedreht, dünner heller Rand, Schatten. Beim Darüberfahren richtet sie
   sich auf. Seit 19.10.2026 ruhig: einfarbig Dunkelblau ohne Kratzer, ohne hellblauen Schein und ohne Kartenstapel dahinter. */
.news-track { box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 40px 80px -30px rgba(0,10,35,.9); }
.news .slide.s-blau { background: var(--blue-800); border-color: rgba(255,255,255,.1); }
@media (min-width: 921px) {
  .hero-grid:has(.hero-copy) { perspective: 1600px; }
  .news { rotate: y -7deg; transform-style: preserve-3d; transition: rotate .7s cubic-bezier(.2,.8,.2,1); }
  .news:hover, .news:focus-within { rotate: y 0deg; }
}
@media (prefers-reduced-motion: reduce) { .news { rotate: none; } }
html.news-vorschau .news { rotate: none; }
html.news-vorschau .news::before, html.news-vorschau .news::after { display: none; }
/* Spiel-Zeile: Anstoß in einem grauen Feld am linken Rand, Paarung weiter rechts */
.dg .match .m-side { background: #eef2f8; border-right: 0 !important; justify-content: center; margin: -12px 0; padding: 0 !important; border-radius: 15px 0 0 15px; }
@media (min-width: 641px) {
  .dg .match { grid-template-columns: 92px minmax(170px, 250px) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 26px; padding: 12px 22px 12px 0; }
}
@media (max-width: 640px) {
  .dg .match { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 12px 12px 0; column-gap: 12px; }
  .dg .match .m-side { border-radius: 13px 0 0 13px; }
  .dg .match .kick { text-align: center; }
}
@media (max-width: 640px) {
  .dg .match > .m-side { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; }
}
@media (min-width: 641px) {
  /* Mannschaftsseite: nur die Liga in Spalte 2 – schmaler */
}
/* Abschnittsköpfe überall gleich: Text rechts beginnt immer an derselben Stelle, steht mittig zur Überschrift */
@media (min-width: 761px) {
  .section-head { grid-template-columns: minmax(0, 1fr) min(440px, 40%); }
  .section-head > :not(:first-child) { justify-self: stretch; align-self: center; }
  .section-head p, .section-head:has(h2 br) p { max-width: none; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.6; text-wrap: pretty; }
}
/* Übergänge zwischen den Bereichen: überall gerade Kanten (19.10.2026, vorher Wellen) */

/* Spielzeile: Anstoß als Bubble in der Zeile (hebt sich vom Weiß ab), mehr Luft rechts */
.dg .match .m-side { background: none; margin: 0; border-radius: 0; }
.dg .match .kick { display: inline-grid; place-items: center; padding: 8px 12px; border-radius: 14px; background: var(--blue-tint); }
@media (min-width: 641px) {
  .dg .match { grid-template-columns: 104px minmax(170px, 250px) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 24px; padding: 12px 30px 12px 14px; }
  .dg .match .kick { font-size: 22px; }
}
@media (max-width: 640px) {
  .dg .match { grid-template-columns: 62px minmax(0, 1fr); padding: 12px 16px 12px 10px; }
  .dg .match .kick { padding: 7px 6px; border-radius: 12px; font-size: 16px; }
}
/* Mannschaftsseite: Eckdaten-Pillen umbrechen statt überlappen */
.fact-pills { display: flex; flex-wrap: wrap; }

/* Überschriften etwas ruhiger – groß, aber nicht erschlagend */
.section-head h2 { font-size: clamp(32px, 4.4vw, 62px); }
.section-head:has(h2 br) h2 { font-size: clamp(32px, 4.4vw, 62px); }
.about-title { font-size: clamp(34px, 4.4vw, 62px); }

/* Über uns: Links unter dem Text */
.about-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.about-links .link-arrow { color: var(--blue); }

/* Filterleiste ohne eigenen Kasten (19.10.2026): Umschalter und Buchstabengruppen stehen direkt über der Spieleliste,
   jede als weiße Fläche mit dünnem Rand – derselbe Kartenstil wie die Spiele darunter */
#spieltag .toolbar { position: relative; margin-bottom: 22px; }
#spieltag .toolbar .seg, #spieltag .fcap { background: #fff; border: 1px solid rgba(1, 81, 161, .13); }
/* Unterseiten-Köpfe etwas kompakter – alle im selben Muster „Wort / weißer Balken“ */
.page-hero h1 { font-size: clamp(40px, 5.6vw, 84px); margin: 18px 0 22px; }
@media (max-width: 640px) {
  #spieltag .seg button { white-space: nowrap; padding: 9px 14px; font-size: 13px; }
}
/* Über uns: Karte „Miteinander“ mit Häkchen-Liste */
.about-card { margin-top: 26px; max-width: 480px; padding: 22px 24px 20px; border-radius: 22px; background: #eef3fa; position: relative; overflow: hidden; }
.about-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 5px; border-radius: 0 5px 5px 0; background: var(--blue); }
.about-card h3 { margin: 10px 0 14px; font: italic 900 clamp(19px, 1.6vw, 23px)/1.15 var(--font-display); text-transform: uppercase; color: var(--text); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.checks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue); color: #fff; margin-top: 0; }
.checks a { color: var(--blue); font-weight: 600; text-decoration: underline; }
/* Texte rechts beginnen auf Höhe der Überschrift (nicht der Kennzeile darüber) */
@media (min-width: 761px) {
  .section-head > :not(:first-child) { align-self: start; padding-top: .35em; }
  .about-text { padding-top: calc(11px + 16px + .6em); }
}
@media (min-width: 761px) { .about-text { padding-top: calc(11px + 16px + .9em); } }
/* Über uns: „Auf einen Blick“ – vier Kernaussagen mit Symbol */
.glance { margin: 14px 0 0; display: grid; gap: 14px; }
.glance > div { display: grid; gap: 3px; }
.glance dt { display: flex; align-items: center; gap: 9px; font: italic 900 15px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--blue); }
.glance dt svg { width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 8px; background: var(--blue); color: #fff; }
.glance dd { margin: 0 0 0 35px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.glance dd b { color: var(--text); }
/* Konsistenz: „Heim“ überall blau (auch auf der Mannschaftsseite) */

/* An- & Abmeldung: Miteinander-Karte über die volle Breite, Häkchen in zwei Spalten */
.together { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 28px 48px; align-items: center; margin-top: 16px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: 0 22px 44px -34px rgba(1,40,90,.6); position: relative; overflow: hidden; }
.together::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 5px; border-radius: 0 5px 5px 0; background: var(--blue); }
.together h3 { margin: 10px 0 12px; font-size: clamp(24px, 2.4vw, 34px); color: var(--text); }
.together-head p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.together .checks { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
@media (max-width: 900px) { .together { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .together .checks { grid-template-columns: 1fr; } }

/* ---------- Einheitliche Info-Bubbles ----------
   Rund = Info (Mannschaft, Gegner, Heim, Auswärts, Liga). Schräg bleiben nur die großen Marken-Balken (Überschriften).
   Farben: wir blau (Juniorinnen rosa) · Gegner hellgrau · Heim hellblau · Auswärts weiß mit Rand · Liga neutral mit Rand */
.result-head b, .tag, .pc-tag,
.rh-team em, .m-team-label span {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%; transform: none; border-radius: 999px;
  font: 600 11.5px/1 var(--font-body); padding: 5px 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-head b { background: var(--team, var(--blue)); color: #fff; margin: 1px 0; }
.result.is-girls .result-head b { background: var(--blue); }
/* Heim / Auswärts */
.tag { padding: 4px 10px; font-size: 11.5px; }
.tag.h { background: var(--blue-tint); color: var(--blue); }
.tag.a { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px rgba(1,81,161,.3); }
/* Liga: neutral mit Rand */
.rh-team em, .m-team-label span { padding: 4px 10px; font-size: 10.5px; background: transparent; color: #5b6b86; box-shadow: inset 0 0 0 1px rgba(1,81,161,.2); }
.m-team-label { align-items: center; }
/* Premium-Schild der Sponsoren ebenfalls rund */
.pc-tag { padding: 6px 12px; }
/* dunkler Hintergrund (News, Ticket): gleiche Formen, helle Farben */
.s-ha { border-radius: 999px; padding: 3px 8px; }
.ns-liga { font: 600 10.5px/1 var(--font-body); padding: 3px 8px; }
/* Trainingszeiten-Karte: Luft unter dem Titel, Orte je Termin mit Pin, unten alle Plätze mit ihren Tagen */
.staff-card.training .role { margin-bottom: 10px; }
.times li span small { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100%; }
.times li span small svg { width: 12px; height: 12px; color: var(--blue); }
.training-places { display: grid; gap: 10px; margin-top: auto; padding-top: 10px; }
.training-places .training-place { margin: 0; padding: 0; }
.training-place strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.training-place strong em { font: 600 11px/1 var(--font-body); padding: 3px 8px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); }
/* Vereinsnamen nie in Großbuchstaben – es heißt „TuS Mechtersheim“ */
.training-place strong, .venue-body h3 { text-transform: none; }
.times li { align-items: baseline; }
/* Heimplatz-Schild ebenfalls als runde Info-Bubble */
.venue-art .v-no { transform: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
/* Handy-Feinschliff aus der Gesamtprüfung */
.staff-card .contact, .pc-contact .contact { overflow-wrap: normal; word-break: normal; }
@media (max-width: 640px) {
  .page-hero h1 { font-size: clamp(30px, 9vw, 44px); }
  .venue-wide h3 { white-space: normal; font-size: clamp(24px, 7.4vw, 34px); }
  #ergebnisse .chip[aria-pressed="true"]::after { content: none; }
  #ergebnisse .chips { flex-wrap: nowrap; overflow-x: auto; }
  .staff-card .contact, .pc-contact .contact { font-size: 12.5px; }
}
@media (max-width: 400px) { .page-hero h1 { font-size: clamp(28px, 8.6vw, 40px); } }

/* ---------- Datenschutz-Popup ---------- */
.pt-dialog.ds-dialog { width: min(820px, calc(100vw - 32px)); display: none; flex-direction: column; overflow: hidden; }
.pt-dialog.ds-dialog[open] { display: flex; }
.ds-toc { display: flex; gap: 6px; padding: 12px 22px; overflow-x: auto; scrollbar-width: none; background: #f5f8fc; border-bottom: 1px solid var(--line); flex: none; }
.ds-toc::-webkit-scrollbar { display: none; }
.ds-toc a { flex: none; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(1,81,161,.18); font: 700 12.5px/1 var(--font-body); color: var(--blue); white-space: nowrap; transition: background .2s, color .2s; }
.ds-toc a:hover, .ds-toc a.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.ds-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 26px 28px; font-size: 15px; line-height: 1.65; color: #1b3258; scroll-behavior: smooth; }
.ds-sec { padding: 20px 0 6px; border-bottom: 1px solid var(--line); scroll-margin-top: 8px; }
.ds-sec:last-child { border-bottom: 0; }
.ds-sec h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font: italic 900 clamp(19px, 2.2vw, 23px)/1.15 var(--font-display); text-transform: uppercase; color: var(--ink); }
.ds-sec h3 span { flex: none; font: italic 900 14px/1 var(--font-display); color: #fff; background: var(--blue); padding: 5px 8px; border-radius: 999px; }
.ds-sec h4 { margin: 16px 0 6px; font: italic 800 15px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--blue); }
.ds-sec p { margin: 0 0 12px; }
.ds-sec ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.ds-sec li { position: relative; padding-left: 22px; }
.ds-sec li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); opacity: .55; }
.ds-sec a { color: var(--blue); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
.ds-sec b { color: var(--ink); }
@media (max-width: 640px) {
  .pt-dialog.info-dialog.ds-dialog { height: 92dvh; max-height: 92dvh; }
  .ds-toc { padding: 10px 16px; }
  .ds-body { padding: 4px 18px 24px; font-size: 14.5px; }
}
@media (max-width: 640px) { .pt-dialog.info-dialog.ds-dialog { width: 100vw; max-width: 100vw; } }
.ds-sec h3 { align-items: center; }

/* Trainer-Kacheln hell, mit Silhouette ohne Foto; Kontakt mit Beschriftung über die ganze Breite */
.staff-card.coach { background: #fff; color: var(--ink); border: 0; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 12px; padding: 14px; align-content: start; box-shadow: 0 22px 44px -30px rgba(0,10,40,.6); }
.staff-card.coach .coach-body { height: auto; }

.staff-card.coach h3 { color: var(--blue); font-size: clamp(19px, 1.7vw, 23px); overflow-wrap: anywhere; hyphens: auto; }
.staff-card.coach h3.is-long { font-size: clamp(16px, 1.35vw, 19px); }
.coach-photo { background: linear-gradient(160deg, #e7eef9, #d3e0f3); }
.coach-silhouette { width: 100%; height: 100%; padding: 18% 14% 0; fill: #a9bfdf; }
.coach-initialen { display: none; }
.coach-contact { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.coach-contact a { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.coach-contact small { font: 700 10px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.coach-contact span { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--blue); overflow-wrap: anywhere; }
.coach-contact svg { width: 14px; height: 14px; flex: none; }
.coach-contact a:hover span { text-decoration: underline; }
/* Trainingszeiten: Kopf mit Status des Ausweichplatzes */
.tr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.tr-head .role { margin: 0 !important; }
/* Ergebnis-Karten: Mannschaftsnamen etwas größer als die Liga */
.result-head b { font-size: 12.5px; padding: 6px 12px; }
.result .rh-team em { font-size: 10px; padding: 3px 9px; }
/* Schmale Karten: das Datum bleibt einzeilig, die Liga-Marke gibt nach (mit „…“) – vorher brach das Datum um
   und die Marke wurde mitten im Wort abgeschnitten */
.result-head { gap: 10px; }
.result-head > span:last-child { flex: none; white-space: nowrap; }
.result .rh-team em { display: block; flex: 0 1 auto; min-width: 0; } /* block: „…“ geht nicht in einem Flex-Kasten */
.result .rh-team { flex: 1 1 auto; overflow: hidden; }
/* Kopfzeile: Anmeldung als Aufklappmenü, Shop als Menüpunkt, rechts nur Instagram und Facebook */
.nav-social { gap: 6px; }
.nav-social a { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); }
.nav-social a:hover { background: #fff; color: var(--blue); transform: none; }
.nav-social svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .nav-social { display: none; } }
.mega-grid.mg-one { grid-template-columns: 1fr; min-width: 260px; }
.coach-contact small { color: #7b8aa3; }
.staff-card.coach .coach-photo { align-self: start; }
@media (max-width: 640px) {
  .staff-card.coach { grid-template-columns: 96px minmax(0, 1fr); }
  .staff-card.coach h3 { margin-top: 10px; }
}
/* Trainer-Kachel: Kontakt ohne Symbole rechts neben dem Foto, unter dem Namen */
.staff-card.coach { grid-template-rows: auto; }
/* Neben einer höheren Trainingskarte gestreckt: Foto und Text mittig, damit oben und unten gleich viel Luft ist */
.staff-card.coach { align-content: center; }
.coach-body .coach-contact { grid-column: auto; margin-top: 12px; padding-top: 10px; }
.coach-contact span { font-size: 13.5px; }
/* Info-Popups (Impressum, Kontakt): Inhalt darf nie auf 0 schrumpfen (Safari), Höhe = Inhalt, bei Bedarf scrollen */
.pt-dialog.info-dialog[open]:not(.ds-dialog) { display: block; height: fit-content; overflow-y: auto; }
.pt-dialog.info-dialog > * { flex-shrink: 0; }
.pt-dialog.ds-dialog .ds-body { flex: 1 1 auto; min-height: 0; }
.to-top { white-space: nowrap; }
.imp-board h3 { margin: 0 0 8px; font: 700 10.5px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.imp-board ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.imp-board li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(1,81,161,.14); }
.imp-board b { color: var(--ink); }
.imp-board span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .imp-board ul { grid-template-columns: 1fr; } }
/* Trainer-Kachel: Name ganz oben, Rolle klein darunter (ohne Bubble) */
.staff-card.coach h3 { margin: 2px 0 4px; }

.staff-card.coach .coach-contact { margin-top: 10px; }
/* Oben (ab 1400 px) etwas größere Menüpunkte, beim Scrollen schrumpfen sie zusammen mit dem Logo */
.primary > li > a { transition: font-size .55s cubic-bezier(.2,.8,.2,1), padding .55s cubic-bezier(.2,.8,.2,1); }
.nav-social a { transition: width .55s cubic-bezier(.2,.8,.2,1), height .55s cubic-bezier(.2,.8,.2,1), background .2s, color .2s; }
@media (min-width: 1400px) {
  /* nur am Scrollen, NICHT an .mega-open: sonst schrumpft der Menüpunkt beim Überfahren unter dem
     Mauszeiger weg, das Menü schließt, wächst wieder und öffnet erneut – es flackert */
  /* 15/11 statt 15,5/14: so bleibt bei der festen Inhaltsbreite (1240 px) 43 px Luft zum großen Wappen
     (Feedback #9 – vorher lag „Mannschaften“ 11 px unter dem Logo) */
  .nav:not(.scrolled) .primary > li > a { font-size: 15px; padding: 0 11px; }
  .nav:not(.scrolled) .nav-social a { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .primary > li > a, .nav-social a { transition: none; } }

/* Heimplatz der Mannschaftsseite: Logo des Stammvereins auf dem Mittelkreis des Spielfelds */
.venue-art .venue-crest { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: clamp(86px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 14px 30px -10px rgba(2,20,50,.6); }
.venue-art .venue-crest img { width: 76%; height: 76%; object-fit: contain; }

/* Live-Daten nicht erreichbar (jsgFehler() in api.js): freundliche Karte mit „Erneut versuchen“.
   Wichtige Angaben (Impressum, Kontakt, Seitenfuß) brauchen sie nicht – dort bleibt der feste Stand stehen. */
.load-error { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 18px;
  background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(1, 81, 161, .45); color: var(--ink); text-align: left; }
.le-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--blue-tint); color: var(--blue); }
.le-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.le-text { flex: 1; min-width: 0; }
.le-text strong { display: block; font-size: 15.5px; color: var(--ink); }
.le-text p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.le-retry { flex: none; }
.theme-blue .load-error, .theme-deep .load-error, .theme-navy .load-error { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.theme-blue .le-text strong, .theme-deep .le-text strong, .theme-navy .le-text strong { color: #fff; }
.theme-blue .le-text p, .theme-deep .le-text p, .theme-navy .le-text p { color: rgba(255,255,255,.75); }
.theme-blue .le-icon, .theme-deep .le-icon, .theme-navy .le-icon { background: rgba(255,255,255,.14); color: #fff; }
#zahlen.vor-saison #statMatches, #zahlen.vor-saison #statGoals { opacity: .45; }
#zahlenFehler { margin-top: 18px; }
/* Fehlerseite einer Mannschaft: blauer Bereich unter dem festen Menü, mindestens so hoch, dass der Seitenfuß nicht hochrutscht */
.fehler-seite { min-height: 62vh; padding-top: clamp(150px, 16vw, 210px); }
@media (max-width: 600px) {
  .load-error { flex-wrap: wrap; padding: 18px; }
  .le-retry { width: 100%; }
}
/* Saison in Zahlen vor dem Saisonstart: Spiele/Tore als Platzhalter */
/* News-Slider, Spiele-Folien: Spiele unter ihrem Tag leicht eingerückt, mit einer Linie links,
   die vom Datum durch alle Spiele des Tages läuft – so sieht man sofort, was zusammengehört */
.ns-day ~ .ns-row { margin-left: 5px; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.22); }
.ns-day ~ .ns-row:has(+ .ns-day), .ns-day ~ .ns-row:last-child { border-bottom-left-radius: 0; }
.ns-day { padding-top: 10px; }
.ns-day::before { content: ""; width: 7px; height: 7px; flex: none; margin-left: 2px; border-radius: 50%; background: rgba(255,255,255,.55); }
/* Nur ein Tag (keine Tageszeilen): dieselbe Linie links, jede Zeile bekommt ihren eigenen Punkt –
   trennt die einzelnen Spiele/Ergebnisse deutlicher als die dünne Trennlinie allein */
.ns-list:not(:has(.ns-day)) .ns-row { position: relative; margin-left: 5px; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.22); }
/* Mit der Einrückung wird es in schmalen Folien eng: dann kürzt die Liga-Pille, nie das Ergebnis */
/* Ergebnisse: Mannschaft und Gegner links untereinander, die Liga senkrecht mittig vor dem Ergebnis (19.10.2026) */
.ns-row.is-result { grid-template-columns: minmax(0, 1fr) auto auto; }
.ns-row.is-result .ns-us { grid-column: 1; grid-row: 1; }
.ns-row.is-result .ns-opp { grid-row: 2; }
.ns-row.is-result .ns-liga { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
/* Seit 21.10.2026: die Liga steht auf Höhe unserer Mannschaft, der Gegner darunter über die volle Breite bis zum Ergebnis;
   das Ergebnis ist so hoch wie beide Zeilen zusammen */
.ns-row.is-result .ns-us { min-width: 0; }
.ns-row.is-result .ns-opp { grid-column: 1 / 3; }
.ns-row.is-result .ns-score { align-self: stretch; display: grid; grid-auto-flow: column; place-content: center; }
.ns-row:not(.is-result) { grid-template-columns: 84px 138px minmax(0, 1fr); }
.ns-liga { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ns-list:not(:has(.ns-day)) .ns-row::before { content: ""; position: absolute; left: -4.5px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* Mannschaftsfoto hebt sich ab: gerade von vorne, heller Rand mit Glanzkante. Beim Darüberfahren hebt sich das Foto an
   und wird etwas größer (die zwei angedeuteten Karten dahinter sind seit 19.10.2026 entfallen). */
.team-photo-rahmen { position: relative; display: flex; isolation: isolate; }
.team-photo-rahmen > .team-photo { flex: 1; min-width: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }
.team-photo-rahmen .team-photo, .team-photo-rahmen .team-photo.is-cutout {
  border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 2px 0 rgba(255,255,255,.35) inset, 0 40px 80px -30px rgba(0,10,35,.9), 0 0 60px -10px rgba(120,180,255,.45); }
.team-photo-rahmen .photo-ph { box-shadow: none; }
@media (hover: hover) {
  .team-photo-rahmen:hover > .team-photo { transform: translateY(-8px) scale(1.03);
    box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 2px 0 rgba(255,255,255,.45) inset, 0 60px 100px -30px rgba(0,10,35,.95), 0 0 80px -10px rgba(120,180,255,.6); }
}
@media (prefers-reduced-motion: reduce) { .team-photo-rahmen > .team-photo { transition: none; } }
/* ohne Foto (Platzhalter „Mannschaftsfoto folgt“) kein Rand-Schein und kein Anheben */
.team-photo-rahmen > .team-photo.no-photo { box-shadow: none; transform: none !important; }
/* Foto-Editor der Verwaltung (team.html?fotovorschau): ohne Anheben, sonst stimmt der Ausschnitt nicht */
html.foto-vorschau .team-photo-rahmen > .team-photo { transform: none !important; }

/* Handy: Eckdaten-Pillen enger, damit drei Stück unter den Titel passen (lange Werte brechen weiter um) */
@media (max-width: 760px) {
  .team-copy .title-block > .fact-pills { gap: 6px; }
  .team-copy .title-block > .fact-pills li { padding: 8px 8px; }
}

/* Vorschau des Foto-Editors der Tools auf der Ansprechpartner-Seite (ansprechpartner.html?fotovorschau):
   nur die bearbeitete Personenkarte bzw. das Gruppenfoto des Vorstands, ohne Kopf, Fuß und Animationen */
html.fv-verein body > :not(main):not(svg),
html.fv-verein main > :not(#vorstand),
html.fv-verein #vorstand .section-head,
html.fv-verein.fv-person #vorstand .group-photo,
html.fv-verein.fv-gruppe #vorstand [data-club-contacts] { display: none !important; }
html.fv-verein #vorstand { display: block !important; }
html.fv-verein, html.fv-verein body { overflow: hidden; }
html.fv-verein *, html.fv-verein *::before, html.fv-verein *::after { animation: none !important; transition: none !important; }
html.fv-verein .reveal { opacity: 1; transform: none; }

/* News „Nächste Spiele/Ergebnisse“: bis zu 6 Spiele sollen hineinpassen (Nutzerwunsch 30.09.2026) –
   kompaktere Zeilen und Tageszeilen, etwas weniger Kopf; die Karte selbst nur wenig höher */
.ns-row { padding: 3px 0; row-gap: 1px; }
.ns-kick { gap: 3px; }
.ns-kick b { font-size: 14px; }
.ns-kick .s-ha { font-size: 9px; padding: 2px 6px; }
.ns-day { padding-top: 6px; padding-bottom: 0; }
.ns-zhead { padding-top: 10px; padding-bottom: 11px; }
.ns-zhead .ns-bars { margin-bottom: 10px; }
.hero-grid:has(.hero-copy) .news-track { min-height: 500px; }
/* Mannschaftsspalte nur so breit wie nötig (vorher fest 138 px) – sonst wird die Liga-Marke gekürzt.
   Die Zeitspalte bleibt FEST (so breit wie „Auswärts“), sonst verrutschen Mannschaft und Gegner je Zeile;
   die Liga steht immer rechtsbündig, damit sie eine Flucht bildet. */
/* Ergebnisse: Mannschaft/Gegner nehmen den Rest, die Liga (über beide Zeilen) ist IMMER ganz zu sehen – vorher drückte ein
   langer Gegner sie auf „1“ zusammen; ein sehr langer Gegner wird stattdessen mit „…“ gekürzt (voller Name im title) */
.ns-row.is-result { grid-template-columns: minmax(0, 1fr) auto auto; }
.ns-row:not(.is-result) { grid-template-columns: 72px auto minmax(0, 1fr); }
.ns-row .ns-liga { justify-self: end; }
/* Freier Platz unter den Zeilen wird gleichmäßig verteilt (--ns-luft, gesetzt von fitLists() in start.js) */
.ns-list > .ns-row { padding-block: calc(4px + var(--ns-luft, 0px) / 2); row-gap: 2px; }
.ns-list > .ns-day { padding-top: calc(5px + var(--ns-luft, 0px) / 2); }
/* Zeilen enger (22.10.2026): so viele Einträge wie möglich statt Luft – Liga-Pille und Gegnerzeile niedriger */
.ns-row .ns-liga { padding-block: 2px; }
.ns-row .ns-opp { line-height: 1.2; }
.ns-kick { gap: 2px; }
@media (max-width: 1100px) { .ns-row:not(.is-result) { grid-template-columns: 68px auto minmax(0, 1fr); } }
/* Schmale News-Karte (Handy und Desktop 921–1100 px, dort ist sie nur ~330 px breit): kompakte Schrift */
@media (max-width: 1100px) {
  .ns-us { font-size: 12.5px; }
  .ns-liga { font-size: 8.5px; padding: 3px 6px; letter-spacing: .04em; }
  .ns-kick .s-ha { font-size: 8.5px; padding: 3px 6px; letter-spacing: .04em; }
  .ns-zbody { padding-left: 14px; padding-right: 14px; }
  .ns-day ~ .ns-row, .ns-list:not(:has(.ns-day)) .ns-row { margin-left: 3px; padding-left: 10px; }
  .ns-row:not(.is-result) { column-gap: 10px; }
}

.m-ha-mobil { display: none; }
/* ===== Handy-Durchsicht 30.09.2026: Überläufe, zu viel Leerraum, ungleiche Elemente ===== */
@media (max-width: 640px) {
  /* Spielkarte: keine eigene Spalte für den Anstoß – sonst blieben neben Datum und Uhrzeit nur ~180 px und
     Liga-Marke, Gegner und Ort liefen rechts aus der Karte. Oben Anstoß links, Liga rechts; darunter
     Mannschaft, Paarung und Ort über die volle Kartenbreite. */
  .dg .match { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none;
    grid-template-areas: "kick liga ha" "team team team" "paar paar paar" "ort ort ort"; padding: 10px 14px 12px; column-gap: 8px; row-gap: 6px; }
  .dg .match > .m-body, .dg .match .m-team-label { display: contents; }
  .dg .match > .m-side { grid-area: kick; align-self: center; margin: 0; padding: 0 !important; }
  .dg .match .kick { display: flex; align-items: baseline; gap: 5px; padding: 5px 10px; font-size: 17px; text-align: left; }
  .dg .match .kick small { display: inline; margin: 0; font-size: 9.5px; }
  .dg .match .m-team-label strong { grid-area: team; }
  .dg .match .m-team-label span { grid-area: liga; justify-self: end; align-self: center; max-width: 100%; }
  .dg .match .m-teams { grid-area: paar; }
  .dg .match .m-venue { grid-area: ort; margin: 2px 0 0; align-items: flex-start; white-space: normal; }
  .dg .match .m-venue .tag { margin-top: 1px; }
  .dg .match .m-venue a { flex: 1 1 0; min-width: 0; align-items: flex-start; white-space: normal; line-height: 1.35; }
  .dg .match .m-venue a svg { margin-top: 2px; }
  /* Heim/Auswärts oben rechts neben der Liga (21.10.2026), der Ort steht in genau einer Zeile (nur Ortsname, Adresse im Link/title) */
  .match:has(.m-ha-mobil) { padding: 9px 14px 10px; row-gap: 4px; }
  .dg .match .m-ha-mobil { display: inline-block; grid-area: ha; align-self: center; }
  /* oben stehen jetzt Zeit, Liga und Heim/Auswärts – „UHR“ entfällt, sonst wurde die Liga bei 360 px gekürzt */
  .dg .match:has(.m-ha-mobil) .kick small { display: none; }
  .match:has(.m-ha-mobil) .m-venue { margin-top: 0; align-items: center; white-space: nowrap; }
  .match:has(.m-ha-mobil) .m-venue .tag { display: none; }
  .match:has(.m-ha-mobil) .m-venue a { align-items: center; white-space: nowrap; }
  .match:has(.m-ha-mobil) .m-venue a svg { margin-top: 0; }
  .match:has(.m-ha-mobil) .m-venue-text { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset; }

  /* News-Zeilen: Mannschaft nur so breit wie nötig, dann passt die Liga-Marke daneben */
  .ns-row.is-result { grid-template-columns: minmax(0, 1fr) auto auto; } /* Liga immer ganz (wie am Desktop), Gegner notfalls mit „…“ */
  .ns-row:not(.is-result) { column-gap: 10px; }
  /* Platz für Mannschaft + Liga: Liste etwas näher an den Rand, Zeitstrahl schmaler */
  .ns-zbody { padding-left: 14px; padding-right: 14px; }
  .ns-day ~ .ns-row, .ns-list:not(:has(.ns-day)) .ns-row { margin-left: 3px; padding-left: 10px; }
  .ns-day::before { margin-left: 0; }
  .ns-us { font-size: 12.5px; }
  .ns-liga { font-size: 8.5px; padding: 3px 6px; letter-spacing: .04em; }
  .ns-kick .s-ha { font-size: 8.5px; padding: 3px 6px; letter-spacing: .04em; }

  /* Knöpfe: gleiche Breite und einzeilig */
  /* Feedback #21: die zwei Hero-Knöpfe kleiner und nebeneinander statt zwei volle Balken */
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; height: 44px; padding: 0 10px; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
  .btn { padding: 0 18px; font-size: 14px; letter-spacing: .03em; }
  :is(.cta, .pay, .shop-main, .steps-card) .btn { width: 100%; justify-content: center; }
  /* Spielfilter: bei Junioren und Juniorinnen steht die Beschriftung gleich (über den Buchstaben) */
  .fgrp { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fgrp > span { line-height: 1.2; }

  /* Jahrgänge: eine Karte je Zeile, Mannschaften darin zweispaltig – zwei gleich hohe Karten nebeneinander
     ließen neben der A-Jugend eine halbe leere Karte stehen */
  .teams { grid-template-columns: minmax(0, 1fr); }
  .teams .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Kalender-Abo: „Kalender“ entfällt, damit alle Knöpfe einzeilig sind */
  .cal-zusatz { display: none; }
  .cal-btn { white-space: nowrap; padding: 0 10px; gap: 7px; font-size: 13.5px; }
  #calQr { flex-basis: 100%; }

  /* Gruppenfoto: Bildunterschrift unter das Foto, nicht über die Gesichter */
  .group-photo figcaption { position: static; margin: 0; border-radius: 0; background: rgba(4,36,77,.85); padding: 8px 14px; }

  /* Fußzeile: Links umbrechen statt rechts hinauszulaufen; Platz für den Feedback-Knopf */
  .foot-legal { flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; }
  body:has(.feedback-start) .foot-bottom { padding-bottom: 64px; }

  /* Sponsor ohne Logo: Name in normaler Größe, Wörter nicht zerhacken */
  .sponsor-grid.ist-mittel .sponsor-logo b { font-size: clamp(13px, 3.8vw, 16px); }
  .sponsor-grid .sponsor-logo b { overflow-wrap: anywhere; hyphens: manual; }
}


/* Ansprechpartner (Feedback #3, 30.09.2026): ein zweizeiliger Name („Jens-Lüder Herms“) machte eine Karte höher
   als die anderen. Name näher an die Rolle, Kontakte enger – der Text passt dann neben das Foto; und alle Karten
   eines Rasters sind gleich hoch, falls doch einmal eine länger wird. */
.people { grid-auto-rows: 1fr; }
.person-card h3 { margin: 4px 0 6px; }
.pc-contact { gap: 2px; }
/* Feedback #23: Kontakt direkt unter dem Namen, die Aufgaben darunter über die ganze Kartenbreite */
.person-card > .tasks { grid-column: 1 / -1; margin: 2px 0 0; }

/* ===== Mannschaftsseite auf dem Handy (Nutzerwunsch 30.09.2026) ===== */
@media (max-width: 640px) {
  /* Kopf: Titel und Eckdaten über die volle Breite */
  .team-copy .title-block { width: 100%; }
  .team-copy .title-block > .fact-pills { contain: none; }
  /* Trainer: Foto etwas größer, Kontakt ohne Beschriftung (Symbol genügt) – der Text bleibt so höchstens so hoch
     wie das Foto und Abstand oben/unten ist gleich */
  .staff-card.coach { grid-template-columns: 112px minmax(0, 1fr); align-items: start; align-content: center; column-gap: 16px; padding: 12px; }
  /* Name immer oben am Foto – auch ohne Kontaktdaten (vorher mittig, dann schwebte er in der Karte) */
  .staff-card.coach .coach-body { align-self: start; }
  .staff-card.coach h3 { margin: 4px 0 2px; }
  .coach-body .coach-contact { gap: 5px; margin-top: 8px; padding-top: 8px; }
  .coach-contact a { gap: 0; }
  .coach-contact small { display: none; }
  .coach-contact span { font-size: 13px; line-height: 1.3; align-items: flex-start; }
  .coach-contact svg { margin-top: 2px; }
}
/* Spielort in Spielkarten höchstens zwei Zeilen, dann „…“ (voller Text im title) */
.m-venue-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Kontakt-Symbole der Trainer nur auf dem Handy (dort ersetzen sie die Beschriftung „Telefon“/„E-Mail“) */
.coach-contact span > svg { display: none; }
.coach-contact span > span { display: inline; min-width: 0; font: inherit; color: inherit; }
@media (max-width: 640px) { .coach-contact span > svg { display: block; } .coach-contact span > span { display: block; min-width: 0; } }

/* Filterleisten der Mannschaftsseite: nicht vorhandene Wettbewerbe bzw. die ganze Leiste ausblenden (team.js chipsAnpassen) */
.chips[hidden], .chip[hidden] { display: none !important; }

/* Link „Shop“ oben rechts (build/layout.py) – ruhig wie die Social-Knöpfe daneben */
.nav-shop { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; font: italic 800 12.5px/1 var(--font-display); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.nav-shop:hover { background: #fff; color: var(--blue); }
.nav-shop svg { width: 15px; height: 15px; flex: none; }
/* Handy: nicht im Kopf (Nutzerwunsch), dort steht „Shop“ klein neben Instagram/Facebook im Menü */
@media (max-width: 640px) { .nav-shop { display: none; } }
/* wie die anderen Menüpunkte (Nummer davor), das Schloss klein dahinter wie der Pfeil bei den Gruppen */
/* „Shop“ klein neben Instagram/Facebook im Menü */
.ov-social .ov-shop { width: auto; display: inline-flex; gap: 8px; padding: 0 14px; font: 600 14px/1 var(--font-body); }
.ov-social .ov-shop svg { width: 15px; height: 15px; }
.ov-social .ov-shop { text-decoration: none; }

/* Vorschau des Foto-Editors der Tools (sponsoren.html?fotovorschau): nur der eine Sponsor, ohne Bewegung */
html.fv-sponsor body > :not(main):not(svg),
html.fv-sponsor main > :not(#partner),
html.fv-sponsor #partner .section-head { display: none !important; }
html.fv-sponsor #partner { display: block !important; margin: 0 !important; }
html.fv-sponsor, html.fv-sponsor body { overflow: hidden; }
html.fv-sponsor *, html.fv-sponsor *::before, html.fv-sponsor *::after { animation: none !important; transition: none !important; }
html.fv-sponsor .reveal { opacity: 1; transform: none; }
html.fv-sponsor .premium-card:hover, html.fv-sponsor .sponsor:hover, html.fv-sponsor .sponsor-grid .sponsor:hover .sponsor-logo { transform: none; box-shadow: none; }

/* Unsere Mannschaft in Spielplan und Ergebnissen führt auf ihre Seite (Feedback #15) */
.team-link { color: inherit; text-decoration: none; }
.team-link:hover, .team-link:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Goldpartner = zweite Sponsor-Kategorie (sponsoren.js gold()): breite weiße Karte mit blauem Rahmen, zwei je Reihe
   (es sind nur 1–2). Links oben die Kategorie, darunter das Logo; rechts daneben Name und Dankestext aus den Tools.
   Die ganze Karte ist der Link. Auf dem Handy untereinander. */
.gold-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* ruhig (19.10.2026): dünner Rand wie die anderen Karten, keine Kategorie-Marke, beim Darüberfahren nur der Rand */
.gold-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "logo body";
  column-gap: 20px; row-gap: 10px; align-items: center; min-width: 0; padding: 16px 20px 16px 16px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(1, 81, 161, .13); color: var(--text); text-decoration: none; transition: border-color .2s; }
a.gold-card:hover { border-color: rgba(1, 81, 161, .35); }
/* nichts für rechts (kein Logo, kein Dankestext): nur die Logofläche mit dem Namen über die ganze Breite */
.gold-card:not(:has(.gc-body > *)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo"; }
.gold-card:not(:has(.gc-body > *)) .gc-body { display: none; }
.gold-card:not(:has(.gc-body > *)) .sponsor-logo { aspect-ratio: auto; min-height: 96px; }
.gold-card .sponsor-logo { grid-area: logo; aspect-ratio: 2 / 1; border-radius: 12px; background: #f4f7fb; }
.gold-card .sponsor-logo.has-logo { position: relative; background: #fff; }
.gold-card .sponsor-logo.has-logo::after { box-shadow: inset 0 0 0 1px rgba(1, 81, 161, .1); }
.gold-card .sponsor-logo b { font-size: 18px; }
.gold-card .gc-body { grid-area: body; align-self: start; display: grid; gap: 3px; min-width: 0; }
.gold-card strong { font: italic 900 20px/1.05 var(--font-display); text-transform: uppercase; color: var(--blue); overflow-wrap: break-word; hyphens: manual; }
.gold-card .gc-text { font-size: 14.5px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1080px) { .gold-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .gold-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "body"; padding: 14px; }
  .gold-card strong { font-size: 18px; }
}
html.fv-sponsor .gold-card:hover { transform: none; box-shadow: none; }


/* Helle Bereiche auf breiten Bildschirmen (Feedback #14): die Kratzer der blauen Bereiche ganz zart, nur links und
   rechts vom Inhalt – unter dem Text bleibt es ruhig. Unter ~1520 px Breite ist davon nichts zu sehen. */
main > section.theme-light::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1;
  background: url("kratzer.svg") center / cover no-repeat;
  -webkit-mask: linear-gradient(90deg, #000 0, #000 calc(50% - 760px), transparent calc(50% - 560px), transparent calc(50% + 560px), #000 calc(50% + 760px));
  mask: linear-gradient(90deg, #000 0, #000 calc(50% - 760px), transparent calc(50% - 560px), transparent calc(50% + 560px), #000 calc(50% + 760px)); }

/* Sponsor-Namen mit Zeilenumbruch aus den Tools („Metzgerei“ ⏎ „Victor Nettey“): in den Karten und Kacheln umbrechen,
   überall sonst (Mannschaftsseite, Bildbeschreibung) bleibt der Umbruch ein Leerzeichen */
.premium-card .pc-body strong, .gold-card strong, .sponsor-name b, .sponsor-logo b { white-space: pre-line; }

/* Sponsor-Kachel (sponsoren.js kachel()): oben Kategorie und Mannschaften als Pillen, darunter Name (blau) und Logo.
   Das Logo sitzt unten, damit die Logos einer Reihe auf einer Linie stehen. Ohne Logo zeigt die Logofläche den Namen,
   oben entfällt er dann (sonst doppelt). */
.sponsor-grid .sponsor { gap: 6px; }
.sp-kopf { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px; min-height: 24px; }
.sp-team { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(1, 81, 161, .3); color: var(--blue); font: italic 800 10.5px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
a.sp-team:hover, a.sp-team:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; }
.sp-haupt { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.sponsor-grid .sponsor-name { flex: 0 0 2.3rem; min-height: 2.3rem; display: flex; align-items: center; justify-content: center; margin-top: auto; text-align: center; }
.sponsor-grid .sponsor-name b { display: -webkit-box; min-width: 0; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font: italic 900 14px/1.1 var(--font-display); text-transform: uppercase; color: var(--blue); overflow-wrap: anywhere; } /* Lange Namen passen auf höchstens zwei Zeilen. */
.sponsor-grid .sponsor .sponsor-logo { position: relative; margin-top: 0; background: #fff; }
/* Der graue Rahmen liegt als Überzug OBEN auf dem Logo (ein innerer Schatten läge darunter): ist das Logo größer, wird es am Rahmen abgeschnitten */
.sponsor-grid .sponsor .sponsor-logo::after, .gold-card .sponsor-logo.has-logo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sponsor-grid .sponsor .sponsor-logo::after { box-shadow: inset 0 0 0 2px #dce6f3; }
.sponsor:has(.sponsor-logo:not(.has-logo)) .sponsor-name { display: none; }
.sponsor-grid .sponsor:hover .sponsor-logo { transform: none; }
.sponsor-grid a.sp-haupt:hover .sponsor-logo { transform: scale(1.03); }
@media (max-width: 640px) { .sponsor-grid .sponsor-name b { font-size: 12px; } .sp-team { font-size: 9.5px; } .sp-kopf { gap: 5px; } .sp-team { padding-inline: 7px; } }

/* Mannschaftsfoto: Belichtung aus den Tools (Foto-Editor, photo.brightness → --hell, team.js) */
.team-photo > img { filter: brightness(var(--hell, 1)); }

/* Mannschaftsfoto vor einer Wand (photo.background aus den Tools, team.js): die Wand liegt als eigene Ebene hinter der
   freigestellten Mannschaft, mit eigenem Ausschnitt/Zoom (gleiche Rechnung wie das Foto). Kein Flutlicht und kein
   Schimmer – stattdessen ein leichter Schatten am Boden, damit die Mannschaft vor der Wand steht und nicht davor schwebt. */
.team-photo > img.team-wand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hg-pos, 50% 0%); transform: scale(var(--hg-zoom, 1)); transform-origin: var(--hg-pos, 50% 0%); filter: none; box-shadow: none; }
.team-photo > img.team-wand[hidden] { display: none; }
.team-photo.is-cutout.hat-wand { background: #1b2733; }
.team-photo.is-cutout.hat-wand > img#teamPhoto { z-index: 1;
  filter: brightness(var(--hell, 1)) drop-shadow(0 10px 14px rgba(0, 0, 0, .35)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.team-photo.is-cutout.hat-wand::after { z-index: 2; background: linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .22) 100%); }

/* ---- Anmeldung zum Verein (assets/anmeldung.js, seit 02.10.2026): Popup wie Probetraining/Abmeldung ---- */
.pt-steps.an-steps { grid-template-columns: repeat(4, 1fr); }
.an-geschlecht { gap: 4px; align-content: end; }
.an-geschlecht .pt-label { font-weight: 500; }
.an-geschlecht .pt-seg { padding: 2px; }
.an-geschlecht .pt-seg span { height: 24px; font-size: 12px; }
.pt-float select {
  width: 100%; height: 54px; padding: 22px 38px 6px 14px; border-radius: 12px; border: 1.5px solid rgba(1,81,161,.14); background: #f7f9fd;
  font: 500 15px/1.3 var(--font-body); color: var(--ink); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #0151a1 50%), linear-gradient(135deg, #0151a1 50%, transparent 50%);
  background-position: calc(100% - 20px) 26px, calc(100% - 15px) 26px; background-size: 5px 5px; background-repeat: no-repeat;
}
.pt-float select:focus { outline: none; border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 4px rgba(1,81,161,.1); }
.pt-float.is-error select { border-color: var(--red); background-color: #fdecef; }
.pt-seg.an-seg-4 { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.an-wenn { display: grid; gap: 8px; }
.an-wenn[hidden] { display: none; }
.an-wenn.pt-grid { gap: 12px; }
.an-ueber { margin: 0 2px 12px; }
.an-check { font-size: 14px; color: var(--ink); align-items: center; }
@media (max-width: 520px) { .pt-steps.an-steps li { font-size: 11px; } }

/* Nach dem Absenden bleibt nur der Knopf kurz gesperrt; das Formular selbst bleibt sichtbar. */
.pt-submit.ist-wartend:disabled { cursor: wait; opacity: .55; filter: grayscale(1); }

/* Handy (Feedback #30): Symbol und „Immer aktuell“/„Online bestellen“ stehen in einer Zeile statt das Symbol allein darüber */
@media (max-width: 640px) {
  .calendar, .shop-main { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
  .calendar { grid-template-areas: "icon eyebrow" "title title" "text text" "act act"; }
  .cal-copy, .shop-main > div:nth-child(2) { display: contents; }
  .cal-icon, .shop-icon { width: 52px; height: 52px; border-radius: 15px; }
  .cal-icon svg, .shop-icon svg { width: 28px; height: 28px; }
  .cal-icon { grid-area: icon; }
  .cal-copy .eyebrow { grid-area: eyebrow; }
  .cal-copy h2 { grid-area: title; margin: 6px 0 0; }
  .cal-copy p { grid-area: text; }
  .cal-actions { grid-area: act; }
  .shop-main > div:nth-child(2) > h2, .shop-main > div:nth-child(2) > p, .shop-main > .btn { grid-column: 1 / -1; }
  .shop-main > div:nth-child(2) > h2 { margin: 6px 0 0; }
}

/* Bereichsleiste auf dem Handy (Feedback #31, 13.10.2026): die Seite lebt von Rundungen – die Leiste war ein hartes,
   dunkles Rechteck. Jetzt: Kopfleiste + Bereichsleiste in einem helleren, durchscheinenden Blau (näher am Kopfbereich),
   unten abgerundet wie eine Lasche, der aktive Bereich als runde Pille statt Schrägbalken. Volle Breite bleibt,
   weil die Leiste beim Wegfahren der Kopfleiste ganz nach oben rückt. */
@media (max-width: 640px) {
  :root { --bar-bg: color-mix(in srgb, var(--blue-600) 86%, transparent); }
  .tab-dock { height: 70px; } /* Platz für Rundung und Schatten, die Leiste selbst bleibt 48 px */
  .td-shell { height: 48px; border-radius: 0 0 20px 20px; box-shadow: 0 14px 26px -16px rgba(2, 20, 50, .7); }
  .td-shell::before { display: none; }
  .td-track { padding-left: 6px; }
  .td-track a { min-height: 48px; }
  .td-ind { top: 8px; bottom: 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .td-ind::after { display: none; }
}

/* Weiße Schrägbalken der Überschriften (.bar: „Römerberg“, Seitentitel, Mannschaftsname) leicht abgerundet, damit sie zu Knöpfen,
   Pillen und Karten passen (Feedback #31, 13.10.2026). Radius in em – wächst mit der Schriftgröße, bleibt bei jeder Größe gleich „leicht“. */
.bar { border-radius: .12em; }
/* Die Zeilen im Kopfbereich schneiden für die Einflug-Animation ab (overflow: hidden) – die nach links ragende untere Ecke des schrägen
   Balkens wurde dadurch gerade abgeschnitten und wirkte eckig. Links Luft in der Zeile, per negativem Rand ausgeglichen (Position bleibt). */
.hero h1 .line { padding-left: .25em; margin-left: -.25em; }

/* Unterstützen › Geldspenden (Feedback 16.10.2026): die Überweisung ist für den Verein am günstigsten – sie steht
   zuerst und ist hervorgehoben (blauer Rahmen), PayPal folgt darunter als zweiter Weg */
/* PayPal nur als Textlink unter der Bankverbindung */
.pay-paypal { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14.5px; color: var(--text-2); text-decoration: none; }
.pay-paypal b { color: var(--blue); font-weight: 700; }
.pay-paypal svg { width: 14px; height: 14px; color: var(--blue); }
.pay-paypal:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ===================================================================================================================
   Feedback-Runde 19.10.2026: Startseite „ruhig“ (Entwurf 1), Jahrgänge wie Entwurf 3 „Spieltagsheft“
   Der Kopf (Logo, Kratzer-Textur, News-Slider) bleibt wie er ist. Darunter: keine Deko, einfarbige Bereiche im Wechsel
   Weiß / Hellblau ohne Wellen, blau nur „Saison in Zahlen“, ein Kartenstil (weiß, dünner Rand, 16 px, kein Schatten).
   Welche hellen Bereiche getönt sind, steht in index.html (.ist-getoent).
   =================================================================================================================== */
html.ist-start { --karte-rand: rgba(1, 81, 161, .13); --karte-rand-hover: rgba(1, 81, 161, .35); }

/* Deko weg (Kratzer in hellen Bereichen, blaue Striche an Karten, Streifen der Platz-Grafik) */
.ist-start main > section:not(.hero)::before, .ist-start main > section:not(.hero)::after,
.ist-start .about-card::before, .ist-start .venue-art::before { display: none; }
.ist-start .slogan { font-size: clamp(18px, 1.8vw, 24px); color: var(--blue); }
.ist-start .slogan .bar { background: none; color: inherit; padding: 0; transform: none; }
.ist-start .slogan .bar > span { transform: none; }

/* Hintergründe */
.ist-start #zahlen { background: var(--blue); }
.ist-start main > section.theme-light { --bg-s: #fff; }
.ist-start main > section.theme-light.ist-getoent { --bg-s: var(--paper); }

/* Ein Kartenstil */
.ist-start :is(.about-card, .values li, .team-card, .venue, .load-error) { background: #fff; border: 1px solid var(--karte-rand); border-radius: 16px; box-shadow: none; }
.ist-start .values li { border-radius: 10px; }
.ist-start :is(.match, .team-card, .venue, .result, .tile):hover { transform: none; box-shadow: none; }
.ist-start .venue:hover { border-color: var(--karte-rand-hover); }
.ist-start .about-card { max-width: none; padding: 20px 22px; }
.ist-start .glance dt svg { background: var(--blue-tint); color: var(--blue); }

.ist-start .venue-art { background: var(--blue-tint); }

/* „Saison in Zahlen“: alle Kacheln gleich – leichte Fläche, dünner heller Rand; alle Zahlen weiß (auch die Mädchen-Teams) */
.ist-start .tile { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #fff; --dash: rgba(255, 255, 255, .6); }
.ist-start .tile.t-hero :is(.eyebrow, .lbl, .lbl b) { color: #fff; }
.ist-start .tile.t-hero .num { font-size: clamp(72px, 8vw, 120px); }
.ist-start .tile .sub-stat { border-top-color: rgba(255, 255, 255, .18); }
.ist-start .tile .sub-stat b { font-size: 64px; color: #fff; }
.ist-start .tile .sub-stat span { color: rgba(255, 255, 255, .85); font-size: 17px; }
.ist-start .tile:hover { background: rgba(255, 255, 255, .07); }

/* „Noch nicht dabei?“: ein Kasten wie die anderen, blau nur der Knopf */

/* Überschriften der Bereiche kleiner – groß bleibt nur der Kopf */
.ist-start .section-head h2, .ist-start .section-head:has(h2 br) h2, .ist-start .about-title { font-size: clamp(28px, 3.2vw, 46px); }

/* Alle Jahrgänge (Entwurf 3): eine Zeile je Altersklasse – Buchstabe groß links, Mannschaften als Textlinks, Haarlinien */
.ist-start .teams { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ist-start .teams .team-card { --team: var(--ink); display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); align-items: center; gap: 12px 24px;
  padding: 16px 0; background: none; border: 0; border-top: 1px solid var(--karte-rand); border-radius: 0; }
.ist-start .teams .team-card:last-child { border-bottom: 1px solid var(--karte-rand); }
.ist-start .teams .tc-head { margin: 0; }
.ist-start .teams .team-card h3 { color: var(--ink); }
.ist-start .teams .team-card .big { font-size: 56px; color: var(--blue); opacity: 1; -webkit-text-stroke: 0; }
.ist-start .teams .team-list { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.ist-start .teams .team-list a { padding: 6px 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.ist-start .teams .team-list a[href]:hover { background: none; }
.ist-start .teams .team-list a[href]:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.ist-start .teams .team-list strong { font-size: 16px; color: var(--blue); }
.ist-start .teams .team-list small { display: block; overflow: visible; }
/* Marke „Mädchen“ hinter der Liga (statt einer eigenen Farbe) – die Zeile bleibt so hoch wie bei den Jungen-Teams */
.tl-maedchen { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(1, 81, 161, .3);
  color: var(--blue); font: 600 10.5px/1.45 var(--font-body); font-style: normal; letter-spacing: .02em; vertical-align: 1px; }
@media (max-width: 640px) {
  .ist-start .teams .team-card { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .ist-start .teams .team-card .big { font-size: 40px; }
  .ist-start .teams .team-list { gap: 2px 20px; }
}

/* Überschrift über die ganze Breite ohne Text daneben (z. B. „Trainer & Training“):
   eine Zeile, solange der Platz reicht – dafür etwas kleiner als die zweizeiligen Überschriften */
.section-head:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
/* Ansprechpartner: Rolle, für die noch niemand eingetragen ist (assets/verein.js platzhalterKarte) */
.person-card.ist-platzhalter { border-style: dashed; }
.person-card.ist-platzhalter h3 { opacity: .55; }

/* Unterstützen: Abschluss mit Satz und Knopf in einer Zeile (Handy untereinander) */
.aufruf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.aufruf .slogan { margin: 0; color: #fff; white-space: normal; }

/* Spiele und Ergebnisse auf ALLEN Seiten im selben Stil (19.10.2026): weiße Karte, dünner Rand, 16 px, kein Schatten,
   beim Darüberfahren nur der Rand. Datumskachel ebenso, „Heute“/„Morgen“ blau mit weißer Schrift. */
:is(.match, .dg-date, .result) { background: #fff; border: 1px solid rgba(1, 81, 161, .13); border-radius: 16px; box-shadow: none; }
.dg-date { border-radius: 10px; }
.dg-date.is-rel { background: var(--blue); border-color: var(--blue); }
:is(.match, .result):hover { transform: none; box-shadow: none; border-color: rgba(1, 81, 161, .35); }
/* helle Bereiche im Wechsel Weiß / Hellblau auch auf den Unterseiten, wo zwei helle Bereiche aufeinander folgen (.ist-weiss) */
main > section.theme-light.ist-weiss { --bg-s: #fff; }

/* Ruhige Bewegung (19.10.2026): Karten, Kacheln und Knöpfe heben sich beim Darüberfahren nicht mehr an – es ändert sich
   nur Rand bzw. Farbe; kleine Pfeile in Links und Knöpfen dürfen weiter ein Stück mitgehen */
:is(.btn-primary, .result, .match, .tile, .team-card.join, .venue, .naechstes-spiel, .sponsor, .premium-card, .social a):hover { transform: none; }
:is(.result, .match, .tile, .venue, .naechstes-spiel, .sponsor, .premium-card):hover { box-shadow: none; }
:is(.sponsor, .venue):hover { border-color: rgba(1, 81, 161, .35); }
.club:hover .club-logo, .sponsor-grid a.sp-haupt:hover .sponsor-logo { transform: none; }
@media (hover: hover) { .team-photo-rahmen:hover > .team-photo { transform: none; } }
/* Wettbewerbsfilter der Mannschaftsseite (Ergebnisse, Spielplan) am Desktop rechtsbündig neben der Überschrift */
@media (min-width: 641px) { .section-head > .chips { justify-content: flex-end; } }
/* Spielzeile: Paarung in einer Zeile – „gegen“ leise, der Gegner kräftig (unsere Mannschaft steht links daneben) */
.m-gegen { color: var(--muted); }
/* Spielkarte: lange Gegner höchstens zweizeilig statt mit „…“ gekürzt (die Zeile darüber steht auf nowrap) */
.m-teams .m-gegen { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-width: 0; overflow: hidden; white-space: normal; }
.m-gegen b { font-weight: 700; color: var(--ink); }
/* zweite Überschrift innerhalb eines Bereichs (Ansprechpartner: Jugendkoordination unter der Sportlichen Leitung) */
.section-head.ist-zweiter-kopf { margin-top: var(--luft); }

/* ===================================================================================================
   Handy-Umbau (20.10.2026, Entwurf „Eine Seite mit Kapitel-Leiste“): nur ≤ 640 px, der Desktop bleibt unverändert.
   Startseite: Kopf kompakt (der News-Slider steht im ersten Bildschirm), Bereiche umsortiert (Spiele zuerst),
   Bereichsleiste wie auf der Mannschaftsseite (<body data-dock="mobil">, nav.js), „Über uns“ und die
   Altersklassen zugeklappt (start.js: .mehr-lesen, .tc-auf).
   =================================================================================================== */
.mehr-lesen, .tc-auf, .tc-anzahl, .r-kurz, .heim-kopf, .staff-kopf { display: none; }
/* Filter-Knopf fürs Handy (start.js), am Desktop unsichtbar – Regeln im Block „Handy v2“ am Dateiende */
.filter-knopf { display: none; }
@media (min-width: 641px) { .tab-dock.nur-mobil { display: none; } }
@media (max-width: 640px) {
  .nur-gross { display: none; }

  /* Reihenfolge der Startseite: Spiele, Zahlen, Mannschaften, Über uns, Stammvereine */
  main:has(> #spieltag) { display: flex; flex-direction: column; }
  main > #start { order: 0; }
  main > #spieltag { order: 1; }
  main > #zahlen { order: 2; }
  main > #teams { order: 3; }
  main > #verein { order: 4; }
  main > #plaetze { order: 5; }

  /* Kopf: nur der fette Satz, keine Knöpfe – die Bereichsleiste übernimmt die Sprünge */
  #start .hero-copy .hero-lead { font-size: 0; max-width: none; padding: 12px 0 20px; }
  #start .hero-copy .hero-lead b { font-size: 17px; margin: 0; }
  #start .hero-cta { display: none; }
  /* weniger Luft: Kopf direkt unter dem Logo, kleine Abstände zum News-Slider */
  .hero:has(.hero-copy) { padding-top: 100px; padding-bottom: 28px; }
  #start .hero-grid { gap: 4px; }
  #start .hero h1 { margin-top: 8px; }

  /* Erklärsätze neben Überschriften, die auf dem Handy nur Platz kosten */
  :is(#spieltag, #zahlen) .section-head > p { display: none; }

  /* Über uns: zugeklappt nur Werte und der erste Absatz */
  #verein:not(.ist-offen) :is(.about-card, .about-links),
  #verein:not(.ist-offen) .about-text > p:not(:first-child),
  #verein:not(.ist-offen) .slogan { display: none; }
  [data-zuklappen] .mehr-lesen[hidden] { display: none; }
  [data-zuklappen] .mehr-lesen { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0;
    border: 0; background: none; color: var(--blue); font: 700 15px/1 var(--font-body); cursor: pointer; }
  [data-zuklappen] .mehr-lesen svg { width: 16px; height: 16px; transform: rotate(0deg); transition: transform .25s; }
  [data-zuklappen].ist-offen .mehr-lesen svg { transform: rotate(90deg); }

  /* Saison in Zahlen: kleinere Zahlen, die große Kachel nur so hoch wie ihr Inhalt */
  .ist-start #zahlen .tile.t-hero { min-height: 0; gap: 8px; }
  .ist-start #zahlen .tile.t-hero .num { font-size: 72px; }
  .ist-start #zahlen .tile.t-hero .num + .lbl { margin-top: 8px; }
  .ist-start #zahlen .tile.t-hero .lbl b { font-size: 16px; }
  .ist-start #zahlen .sub-stat { margin-top: 12px; padding-top: 12px; }
  .ist-start #zahlen .sub-stat b { font-size: 52px; }
  .ist-start #zahlen .sub-stat span { font-size: 15px; }
  .ist-start #zahlen .tile.t-duo .num { font-size: 52px; }

  /* Mitgliedschaft: zuerst „So läuft's ab“ mit dem Knopf, darunter „Gut zu wissen“ – zugeklappt nur der erste Absatz */
  .reg-grid > .steps-card { order: -1; }
  .note[data-zuklappen]:not(.ist-offen) > p:not(:first-of-type) { display: none; }

  /* Ansprechpartner: kompakte Liste – Foto, Name und Aufgabe, rechts Anrufen und Mail als runde Knöpfe
     (Nummer und Adresse stehen weiter im Link, nur nicht sichtbar) */
  .people, .people.two { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 8px; }
  .people .person-card { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "foto name kontakt" "foto rolle kontakt";
    column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 10px 10px 12px; border-radius: 16px; }
  .people .person-card .pc-photo { grid-area: foto; width: 56px; height: 56px; aspect-ratio: auto; border-radius: 14px; }
  /* eigener Handy-Ausschnitt aus dem Foto-Editor der Verwaltung (Ansprechpartner › Foto) */
  .people .person-card .pc-photo img.hat-mobil { object-position: var(--pos-m); transform: scale(var(--zoom-m, 1)); transform-origin: var(--pos-m); }
  .people .person-card .pc-body { display: contents; }
  .people .person-card h3 { grid-area: name; align-self: end; margin: 0; font-size: 16px; line-height: 1.05; overflow-wrap: anywhere; }
  .people .person-card .role-pill-light { grid-area: rolle; justify-self: start; align-self: start; padding: 0; border: 0; background: none;
    font-size: 13px; color: var(--muted); white-space: normal; }
  .people .person-card .pc-contact { grid-area: kontakt; display: flex; gap: 8px; }
  .people .person-card .pc-contact .contact { width: 44px; height: 44px; justify-content: center; gap: 0; border-radius: 50%;
    background: var(--blue-tint); color: var(--blue); font-size: 0; }
  .people .person-card .pc-contact .contact:hover { text-decoration: none; }
  .people .person-card .pc-contact svg { width: 19px; height: 19px; }
  .people .person-card > .tasks { grid-row: 3; grid-column: 1 / -1; margin-top: 8px; }

  /* lange Wörter in Überschriften („Jugendkoordination“) nicht mitten im Wort umbrechen */
  .section-head.ist-zweiter-kopf h2 { font-size: 28px; }

}

/* ---------- Foto-Kopf (20.10.2026) ----------
   Ein Titelbild liegt NUR im Hintergrund von .hero-bg – Höhe, Texte und Aufbau des Kopfs bleiben unverändert.
   Das Foto steht nur als KI-/Stimmungsbild da (nie mit Aussagen wie „unsere C1“). Seiten mit Foto zeigen kein Wappen
   und keinen Schrägstreifen. Unter 1280 px: Foto als Fläche mit Verlauf (Text immer auf ≥ 90 % Blau);
   ab 1280 px: schräges Fenster rechts im Winkel des .slash, links bleibt das JSG-Blau. Bilder: build/bilder.py. */
.page-hero.hat-foto .slash, .page-hero.hat-foto .hero-crest { display: none; }
.hero-foto { position: absolute; inset: 0; overflow: hidden; }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-pos, 50% 30%); }
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,36,77,.55) 0%, rgba(4,36,77,.08) 24%, rgba(4,36,77,.62) 44%, rgba(4,36,77,.9) 62%, var(--blue-900, #04244d) 100%);
}
@media (min-width: 641px) {
  .hero-foto::after {
    background: linear-gradient(90deg, rgba(4,36,77,.96) 0%, rgba(4,36,77,.9) 55%, rgba(4,36,77,.6) 100%),
                linear-gradient(180deg, rgba(4,36,77,.5) 0%, rgba(4,36,77,0) 30%);
  }
}
@media (min-width: 1280px) {
  /* beginnt unter der festen Kopfleiste (72 px), damit die schräge Kante nie das Menü berührt */
  .hero-foto { inset: 72px -12% 0 64%; overflow: hidden; transform: skewX(-18deg); transform-origin: bottom left; border-left: 6px solid var(--yellow); }
  .hero-foto img { inset: 0 auto 0 -24%; width: 130%; transform: skewX(18deg); transform-origin: bottom left; }
  .hero-foto::after { background: linear-gradient(180deg, rgba(4,36,77,.55) 0%, rgba(4,36,77,0) 32%), linear-gradient(90deg, rgba(4,36,77,.35), rgba(4,36,77,0) 30%); }
}
@media (max-width: 640px) { .page-hero.hat-foto .eyebrow { color: var(--yellow); } }

/* Topspiel und Top-Ergebnis als Foto-Folie (20.10.2026): das Stimmungsbild (start.js, FOTOS) steht frei, nur unten geht es in
   Dunkelblau über; darauf wenig Text – Pille, Mannschaft, Gegner mit Tag und rechts groß in Gelb das Ergebnis bzw. die
   Anstoßzeit. Das Kopfband zeigt wie bei den anderen Folien Symbol, Art und Wettbewerb; Überschrift und Text des Beitrags erscheinen nicht. */
.slide > .ns-bg { position: absolute; z-index: 0; inset: 80px 0 0; } /* beginnt unter dem Kopfband (85 px, 5 px Überlappung) */
.slide > .ns-bg { overflow: hidden; }
.slide > .ns-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 20%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 20%); }
.slide > .ns-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,47,98,.25) 0%, rgba(6,47,98,.05) 25%, rgba(6,47,98,.5) 52%, rgba(6,47,98,.93) 78%, var(--blue-800) 100%); }
.ns-foto .ns-zbody { justify-content: flex-end; padding-bottom: 8px; }
.fo { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.fo-team { font: italic 900 clamp(26px, 9.3vw, 35px)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; margin-top: 14px; }
/* Eigene Mannschaft sticht heraus: etwas größer und ein gelber Balken darunter – der Gegner steht ruhiger daneben */
.fo-team .n1, .fo-team .n2, .sb-team .n1, .sb-team .n2 { display: block; }
.fo-team .n1::after, .sb-team .n1::after { content: ""; display: block; width: 1.3em; height: 4px; margin: 2px 0 6px; border-radius: 2px; background: var(--yellow); } /* gelber Balken unter dem Kürzel */
.fo-text { min-width: 0; width: fit-content; max-width: 100%; display: grid; gap: 13px; } /* optisch gleich wie der Abstand der Mannschaft zu „gegen“ darüber (die Schriften haben unterschiedlich viel Luft im Kasten) */
.fo-text small { font-size: 15px; line-height: 1; font-weight: 500; opacity: .92; }
.fo-text .fo-vs { display: flex; align-items: center; gap: 10px; font: italic 800 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.fo-text .fo-gegner { font-size: 22px; line-height: 1.2; font-weight: 700; opacity: .9; margin-top: -2px; }
.ns-zhead .ns-head small:has(.fo-liga) { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ns-zhead .fo-pill { flex: none; padding: 3px 9px; border-radius: 999px; background: none; font-weight: 700; letter-spacing: .04em; font-family: var(--font-body); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); font-size: 11px; line-height: 1.2; }
.fo-liga { padding: 3px 9px; border-radius: 999px; background: var(--blue); color: #fff; font: 700 11px/1.2 var(--font-body); letter-spacing: .04em; }
.fo-wann-sub { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fo-info .fo-liga { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.fo-info .fo-pill { flex: none; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.2 var(--font-body); letter-spacing: .04em; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.fo-info .fo-wann-sub { font-size: 13px; color: rgba(255,255,255,.85); }
.fo-wann { display: grid; gap: 4px; justify-items: start; margin-bottom: 4px; }
.fo-datum { font: italic 900 30px/.9 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
.fo-wann .fo-zahl { font-size: 23px; margin-bottom: 0; }
.fo-zahl { font: italic 900 60px/.85 var(--font-display); color: var(--yellow); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.fo-zahl.o-w { color: #6fe3a1; } .fo-zahl.o-d { color: #fff; } .fo-zahl.o-l { color: #ff8578; }
@media (min-width: 641px) { .fo-team { font-size: 38px; } .fo-zahl { font-size: 76px; } .fo-datum { font-size: 30px; } .fo-text .fo-gegner { font-size: 24px; } .fo-wann .fo-zahl { font-size: 23px; } }
/* Beitrag ohne Bild: Mannschaftsmarke unter dem Kopfband mit demselben Rand wie der Text (stand vorher am Folienrand) */
.slide.ns-post > .ns-team { margin: 12px 20px 0; }

/* ---- Spielplan als „Fahrplan“ (Desktop ab 921 px, JSG.fahrplan() in spiele.js; Start- und Mannschaftsseite) ----
   EINE Karte, je Spieltag ein Band (40 px), die Spiele (52 px) eingerückt mit Linie zum Band. Alle Zeilen teilen EIN
   Spaltenraster (subgrid) – jede Spalte so breit wie ihr längster Eintrag, die nächste beginnt überall an derselben Stelle. */
.matches.ist-fahrplan { display: block; }
/* Mannschaftsseite (ohne Mannschaftsspalte – der Name steht oben): alle Spalten nur so breit wie ihr Inhalt, der freie
   Platz wird GLEICHMÄSSIG zwischen die Spalten verteilt (justify-content: space-between) – weder eine Lücke in der Mitte
   noch rechts, der Ort endet am rechten Rand */
.fahrplan { --fp-linie: rgba(1, 81, 161, .12); display: grid; grid-template-columns: auto auto fit-content(26rem) auto fit-content(28rem); justify-content: space-between; column-gap: 24px;
  background: #fff; border: 1px solid var(--fp-linie); border-radius: 16px; overflow: hidden; }
.fahrplan.mit-team { grid-template-columns: auto auto auto minmax(0, 1fr) auto fit-content(13rem); justify-content: normal; column-gap: 18px; }
.fp-band { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 22px;
  background: var(--blue-tint); border-top: 1px solid rgba(1, 81, 161, .2); border-bottom: 1px solid rgba(1, 81, 161, .2); }
.fp-band:first-child { border-top: 0; }
.fp-band b { font: italic 900 17px/1 var(--font-display); color: var(--blue); white-space: nowrap; }
/* Wochentag bzw. „Heute“/„Morgen“: dieselbe Box, „Heute“/„Morgen“ nur gelb – nichts verschiebt sich */
.fp-marke { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #63748f; white-space: nowrap; }
.fp-marke.ist-rel { background: var(--yellow); color: var(--ink); }
.fp-anzahl { margin-left: auto; color: #63748f; font: 600 12px/1 var(--font-body); white-space: nowrap; }
/* der nächste Spieltag voll blau – wie die Karte „Nächstes Spiel“ */
.fp-band.ist-naechst { background: var(--blue); border-color: var(--blue); }
.fp-band.ist-naechst b { color: #fff; }
.fp-band.ist-naechst .fp-marke:not(.ist-rel), .fp-band.ist-naechst .fp-anzahl { color: rgba(255, 255, 255, .78); }
.fp-zeile { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; height: 52px; padding: 0 22px 0 48px; position: relative; }
.fp-zeile::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: rgba(1, 81, 161, .18); }
.fp-zeile::after { content: ""; position: absolute; left: 48px; right: 22px; top: 0; border-top: 1px dashed var(--fp-linie); }
.fp-band + .fp-zeile::after { display: none; }
.fp-zeile:hover { background: #f7faff; }
.fp-zeile.ist-naechst { background: linear-gradient(90deg, #eef4fb, #fff 55%); }
.fp-zeile.ist-naechst::before { background: var(--blue); }
.fp-zeit { font: 600 14px/1 var(--font-body); font-variant-numeric: tabular-nums; color: #1b3258; white-space: nowrap; }
.fp-team { font: italic 900 15px/1.1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.fp-team, .fp-team a { color: var(--blue); text-decoration: none; }
.fp-team a:hover { text-decoration: underline; }
.fp-gegner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.25 var(--font-body); color: var(--ink); }
.fp-gegner em { font-style: normal; font-weight: 500; color: #63748f; margin-right: 6px; }
/* Startseite (Spalte Mannschaft): lange Gegner höchstens zweizeilig statt gekürzt – die Zeile bleibt 52 px hoch */
.fahrplan.mit-team .fp-gegner { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.22; }
.fp-liga { display: inline-block; padding: 3px 9px; border: 1px solid var(--fp-linie); border-radius: 999px; color: #63748f; font: 600 12px/1.2 var(--font-body); white-space: nowrap; }
.fp-ort { display: flex; align-items: center; gap: 6px; min-width: 0; color: #63748f; font: 500 14px/1.2 var(--font-body); text-decoration: none; }
.fp-ort svg { flex: none; width: 15px; height: 15px; }
.fp-ort span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-ort small { font-size: inherit; color: #8494aa; }
/* schmale Desktop-Fenster: Straße weglassen (steckt im Kartenlink/title), sonst wurden Gegner und Ort gekürzt */
@media (max-width: 1100px) { .fp-ort small { display: none; } }
.fp-ort:hover { color: var(--blue); }
/* „Mehr anzeigen“: die Liste blendet NICHT komplett neu ein (das flackerte und der Knopf sprang), sondern nur die neuen
   Bänder und Spiele klappen nacheinander auf – Höhe von 0 auf ihre feste Höhe, dazu leicht einblenden */
.matches.ist-mehr > * { animation: none; }
@keyframes fp-rein { from { height: 0; opacity: 0; } }
.fahrplan .fp-neu { overflow: hidden; animation: fp-rein .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .fahrplan .fp-neu { animation: none; } }
/* „Mehr anzeigen“ in der Kartenansicht (Handy/Tablet, Ergebnisse und Spiele): die schon gezeigten Karten bleiben ruhig stehen, nur die
   neuen blenden nacheinander ein und rutschen 14 px nach oben (backwards: danach wirkt wieder das normale Hover) */
.results.ist-mehr > * { animation: none; }
@keyframes karte-rein { from { opacity: 0; transform: translateY(14px); } }
.ist-mehr .karte-neu { animation: karte-rein .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.ist-mehr .karte-neu .karte-neu { animation: none; }
@media (prefers-reduced-motion: reduce) { .ist-mehr .karte-neu { animation: none; } }
/* Handy unter 400 px: in der oberen Zeile der Spielkarte (Zeit · Liga · Heim/Auswärts) etwas knapper, sonst wurde z. B.
   „1.Kreisklasse“ neben „Auswärts“ bei 360 px gekürzt (gemessen: 10 px zu wenig) */
@media (max-width: 400px) {
  .dg .match:has(.m-ha-mobil) { padding-left: 12px; padding-right: 12px; column-gap: 6px; }
  .dg .match .m-team-label span, .dg .match .m-ha-mobil { padding-left: 8px; padding-right: 8px; }
}
/* Tablet (641–920 px, darüber steht der Fahrplan): Spielkarte wie am Handy – oben Zeit · Liga · Heim/Auswärts, darunter
   Mannschaft, Gegner, Ort über die volle Breite. Vorher vier enge Spalten: Gegner, „Auswärts“ und Ort wurden abgeschnitten. */
@media (min-width: 641px) and (max-width: 920px) {
  .dg .match { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none;
    grid-template-areas: "kick liga ha" "team team team" "paar paar paar" "ort ort ort"; padding: 10px 16px 12px; column-gap: 10px; row-gap: 4px; }
  .dg .match > .m-body, .dg .match .m-team-label { display: contents; }
  .dg .match > .m-side { grid-area: kick; grid-column: auto; grid-row: auto; align-self: center; display: block; margin: 0; padding: 0 !important; border-right: 0 !important; background: none; }
  .dg .match .kick { display: flex; align-items: baseline; gap: 5px; padding: 5px 10px; font-size: 17px; text-align: left; }
  .dg .match .kick small { display: none; }
  .dg .match .m-team-label strong { grid-area: team; }
  .dg .match .m-team-label span { grid-area: liga; justify-self: end; align-self: center; max-width: 100%; }
  .dg .match .m-ha-mobil { display: inline-block; grid-area: ha; align-self: center; }
  .dg .match .m-teams { grid-area: paar; }
  .dg .match .m-venue { grid-area: ort; margin: 0; flex-direction: row; align-items: center; white-space: nowrap; }
  .dg .match .m-venue .tag { display: none; }
  .dg .match .m-venue a { max-width: 100%; }
}

/* ===================================================================================================
   Handy v2 (21.10.2026, Entwurf „Handy v2“): eigene Handy-Bausteine statt verkleinerter Web-Version, nur ≤ 640 px.
   News als Stories (start.js renderStories, Block am Dateiende), Filter als Fenster von unten (#filterBlatt), Spiele als kompakte
   Zeilen unter einer Tageszeile (Startseite UND Mannschaftsseite), Altersklassen als aufklappbare Liste,
   Kopf der Mannschaftsseite neu sortiert (Name, Eckdaten als Text, Foto, nächstes Spiel).
   Absichtlich am Dateiende und mit „main“ davor: hier gewinnt die Handy-Fassung gegen ältere Handy-Regeln.
   =================================================================================================== */
.filter-blatt { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 86vh; margin: 0; border: 0;
  border-radius: 24px 24px 0 0; padding: 8px 16px max(22px, env(safe-area-inset-bottom)); background: #fff; color: #0a2244;
  overflow-y: auto; box-shadow: 0 -16px 40px rgba(2, 20, 50, .3); }
.filter-blatt::backdrop { background: rgba(4, 20, 45, .5); }
.fb-kopf { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; }
.fb-kopf b { font: italic 900 22px/1 var(--font-display); text-transform: uppercase; }
.fb-zu { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #eef3fa; color: #0a2244; display: grid; place-items: center; cursor: pointer; }
.fb-zu svg { width: 20px; height: 20px; }
.fb-alle { width: 100%; height: 46px; margin-bottom: 6px; border-radius: 12px; border: 1.5px solid #0151a1; background: #fff; color: #0151a1;
  font: 700 15px/1 var(--font-body); cursor: pointer; }
.fb-alle[aria-pressed="true"] { background: #0151a1; color: #fff; }
.fb-zeile { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(1, 81, 161, .1); }
.fb-alter { font: italic 900 22px/1 var(--font-display); color: #0151a1; }
.fb-teams { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-teams button { height: 40px; min-width: 48px; padding: 0 13px; border-radius: 12px; border: 0; background: #e4edfa; color: #0151a1;
  font: italic 900 14px/1 var(--font-display); text-transform: uppercase; cursor: pointer; }
.fb-teams button[aria-pressed="true"] { background: #0151a1; color: #fff; }
@media (min-width: 641px) { .filter-blatt { display: none; } }

@media (max-width: 640px) {
  /* ---- Startseite: Kopf – der Satz steht direkt unter der Überschrift ---- */
  main #start .hero-copy { align-self: start; }
  main #start .hero-copy .hero-lead { margin: 0; padding: 10px 0 0; }
  main #start .hero-grid { gap: 20px; }

  /* ---- News: am Handy kein Slider, sondern die Stories-Leiste darunter (Block „Stories“ am Dateiende) ---- */
  html:not(.news-vorschau) main #start .news { display: none; }

  /* ---- Spieltag: Umschalter über die volle Breite, darunter der Knopf „Alle Mannschaften“ ---- */
  main #spieltag .toolbar { display: grid; gap: 8px; }
  main #spieltag .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  main #spieltag .toolbar #chips { display: none; }
  main #spieltag .filter-knopf { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border-radius: 14px;
    border: 1px solid rgba(1, 81, 161, .18); background: #fff; color: #0a2244; font: 700 15px/1 var(--font-body); cursor: pointer; }
  main #spieltag .filter-knopf svg { width: 20px; height: 20px; flex: none; color: #0151a1; }
  main #spieltag .filter-knopf span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main #spieltag .filter-knopf i { width: 8px; height: 8px; border: solid #0151a1; border-width: 0 2.4px 2.4px 0; transform: translateY(-2px) rotate(45deg); }
  main #spieltag .filter-knopf.ist-gewaehlt { border-color: #0151a1; background: #e4edfa; }

  /* ---- Spiele (Startseite und Mannschaftsseite): Tageszeile, darunter EINE Karte mit kompakten Zeilen ---- */
  main .dg { display: block; }
  main .dg::before { display: none; }
  main .dg-date { position: static; display: flex; align-items: baseline; gap: 6px; padding: 16px 2px 8px; border: 0; border-radius: 0;
    background: none; box-shadow: none; }
  main .dg-date small, main .dg-date b, main .dg-date.is-rel small, main .dg-date.is-rel b { font: 800 12px/1 var(--font-body); letter-spacing: .08em;
    text-transform: uppercase; color: #0151a1; }
  main .dg-date.is-rel { background: none; }
  main .dg-rows { display: block; background: #fff; border: 1px solid rgba(1, 81, 161, .12); border-radius: 16px; overflow: hidden; }
  main .dg .match { display: grid; grid-template-columns: 50px auto minmax(0, 1fr) auto; grid-template-rows: none;
    grid-template-areas: "kick team team ha" "kick paar paar paar" "kick liga ort ort"; column-gap: 10px; row-gap: 2px;
    padding: 12px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  main .dg .match + .match { border-top: 1px solid rgba(1, 81, 161, .1); }
  main .dg .match > .m-body, main .dg .match .m-team-label { display: contents; }
  main .dg .match > .m-side { grid-area: kick; align-self: start; margin: 0; padding: 0 !important; border: 0 !important; background: none; text-align: left; }
  main .dg .match .kick { display: block; padding: 0; background: none; font-size: 17px; line-height: 1.25; color: #0151a1; white-space: nowrap; }
  main .dg .match .kick small { display: none; }
  main .dg .match .m-team-label strong { grid-area: team; min-width: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main .dg .match .m-ha-mobil { grid-area: ha; justify-self: end; align-self: center; display: inline-block; }
  main .dg .match .m-team-label span { grid-area: liga; justify-self: start; align-self: center; padding: 0; border: 0; background: none;
    font-size: 12.5px; color: #586a86; white-space: nowrap; }
  main .dg .match .m-team-label span { text-decoration: none; box-shadow: none; border-radius: 0; }
  main .dg .match .m-team-label span::after { content: "\00a0·"; margin-right: 2px; }
  main .dg .match .m-teams { grid-area: paar; font-size: 15px; }
  main .dg .match .m-teams div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main .dg .match .m-venue { grid-area: ort; min-width: 0; margin: 0; font-size: 12.5px; color: #586a86; white-space: nowrap; overflow: hidden; }
  main .dg .match .m-venue .tag, main .dg .match .m-venue svg { display: none; }
  main .dg .match .m-venue a { display: block; overflow: hidden; text-overflow: ellipsis; color: inherit; }
  /* Mannschaftsseite: die eigene Mannschaft steht schon im Kopf – oben steht der Gegner */
  main #spiele .dg .match { grid-template-areas: "kick paar paar ha" "kick liga ort ort"; }
  main #spiele .dg .match .m-team-label strong { display: none; }
  main #spiele .dg .match .m-teams { font-weight: 600; }

  /* ---- Ergebnisse: EINE Karte mit kompakten Zeilen (r-kurz aus spiele.js), Ergebnis aus JSG-Sicht in der Ergebnisfarbe ---- */
  main .results { display: block; background: #fff; border: 1px solid rgba(1, 81, 161, .12); border-radius: 16px; overflow: hidden; }
  main .results > .result { padding: 12px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  main .results > .result::before { display: none; }
  main .results > .result + .result { border-top: 1px solid rgba(1, 81, 161, .1); }
  main .results > .result > :is(.result-head, .result-rows) { display: none; }
  main .results .r-kurz { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "team zahl" "geg zahl" "meta zahl"; column-gap: 12px; align-items: center; }
  main .results .r-team { grid-area: team; font: italic 900 14.5px/1.25 var(--font-display); text-transform: uppercase; color: #0a2244; }
  main .results .r-gegner { grid-area: geg; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main .results .r-meta { grid-area: meta; font-size: 12.5px; color: #586a86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main .results .r-zahl { grid-area: zahl; font: italic 900 22px/1 var(--font-display); color: #0a2244; }
  main .results .o-w .r-zahl { color: #0f7a3d; }
  main .results .o-l .r-zahl { color: #b5022a; }
  /* Mannschaftsseite: die eigene Mannschaft steht schon im Kopf – oben steht der Gegner */
  main #ergebnisse .results .r-kurz { grid-template-areas: "geg zahl" "meta zahl"; }
  main #ergebnisse .results .r-team { display: none; }

  /* ---- Alle Jahrgänge: eine Karte, je Altersklasse eine Zeile („C-Jugend U15/U14 · 3 ⌄“), aufgeklappt die Mannschaften ---- */
  main .ist-start .teams, .ist-start main .teams { gap: 0; background: #fff; border: 1px solid rgba(1, 81, 161, .12); border-radius: 18px; overflow: hidden; }
  .ist-start main .teams .team-card { position: relative; display: block; padding: 0 14px; border: 0; border-radius: 0; background: none; }
  .ist-start main .teams .team-card + .team-card { border-top: 1px solid rgba(1, 81, 161, .1); }
  .ist-start main .teams .team-card:last-child { border-bottom: 0; }
  .ist-start main .teams .tc-head { display: flex; align-items: center; gap: 14px; min-height: 58px; margin: 0; }
  .ist-start main .teams .team-card .big { width: 22px; font-size: 24px; }
  .ist-start main .teams .tc-head > div { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
  .ist-start main .teams .team-card h3 { margin: 0; font: 700 16px/1.2 var(--font-body); text-transform: none; color: #0a2244; white-space: nowrap; }
  .ist-start main .teams .tc-alter { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: nowrap; }
  .ist-start main .teams .team-card .age { font-size: 16px; color: #586a86; white-space: nowrap; }
  .ist-start main .teams .tc-anzahl { display: block; margin-left: auto; margin-right: 30px; font: 600 14px/1 var(--font-body); color: #586a86; }
  .ist-start main .teams .team-card > .tc-auf { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
  .ist-start main .teams .team-card > .tc-auf::after { content: ""; position: absolute; right: 18px; top: 29px; width: 8px; height: 8px;
    border: solid #7b8aa3; border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(-45deg); transition: transform .25s; } /* Pfeil zeigt den Stand: zu = ›, offen = ⌄ */
  #teamGrid { overflow-anchor: none; } /* die Seite ordnet beim Aufklappen nicht selbst nach – start.js hält den Kopf an seiner Stelle */
  .ist-start main .teams .team-card.ist-offen { background: #e4edfa; }
  .ist-start main .teams .team-card.ist-offen > .tc-auf { bottom: auto; height: 58px; }
  .ist-start main .teams .team-card.ist-offen > .tc-auf::after { border-color: #0151a1; transform: translateY(-70%) rotate(45deg); }
  .ist-start main .teams .team-card:not(.ist-offen) .team-list { display: none; }
  .ist-start main .teams .team-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px 36px; }
  .ist-start main .teams .team-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px;
    border-radius: 12px; background: #fff; border: 1px solid rgba(1, 81, 161, .15); }
  .ist-start main .teams .team-list a span { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; }
  .ist-start main .teams .team-list strong { flex: none; font: 700 15px/1.2 var(--font-body); text-transform: none; color: #0151a1; white-space: nowrap; }
  .ist-start main .teams .team-list small { display: block; font-size: 13px; color: #586a86; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ist-start main .teams .team-list .tl-maedchen { display: none; }
  .ist-start main .teams .team-list a svg { display: block; width: 13px; height: 13px; color: #586a86; }

  /* ---- Mannschaftsseite: Name, Eckdaten als Text, Foto, nächstes Spiel, Trikotsponsoren ---- */
  main .team-grid { gap: 24px; } /* Gruppen mit Luft: Name + Eckdaten · nächstes Spiel · Sponsor (Feedback 23.10.2026) */
  main .team-grid .team-copy { display: contents; }
  main .team-grid .team-copy > .eyebrow { display: none; } /* die Saison steht schon im Spielplan */
  main .team-grid .team-copy > .title-block { order: 2; }
  main .team-grid > .team-photo-rahmen { order: 3; }
  main .team-grid .team-copy > .naechstes-spiel { order: 4; margin: 0; }
  main .team-grid .team-copy > .team-sponsors { order: 5; margin: 0; }
  /* Trikotsponsor als kleine Zeile: „TRIKOTSPONSOR  Name“ nebeneinander statt zwei Blöcke untereinander */
  main .team-grid .team-copy > .team-sponsors { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  main .team-grid .team-sponsors-label { font-size: 10px; }
  main .team-grid .team-sponsor-name { font-size: 13px; }
  main .team-hero .title-block { margin: 0; }
  main .team-hero .title-block h1 { margin: 2px 0 0; }
  main .team-copy .title-block > .fact-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  main .team-copy .title-block > .fact-pills li { flex: none; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
    background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 600; color: #fff; }
  main .team-copy .title-block > .fact-pills svg { display: none; }

  /* Feedback-Knopf (Testphase) auf dem Handy kleiner */
  body .feedback-start { padding: 8px 13px; font-size: 12.5px; }
}

/* ---- Handy v2, Teil 2 (21.10.2026): Mannschaftsseite wie im Entwurf, „Noch nicht dabei?“ kompakt ---- */
@media (max-width: 640px) {
  /* Nächstes Spiel: eine kompakte Zeile – links Wochentag/Datum und Anstoß, rechts Gegner und Heim/Auswärts */
  main .team-hero .naechstes-spiel { grid-template-columns: 64px minmax(0, 1fr); border-radius: 16px; }
  /* der Schatten des Mannschaftsfotos legte sich über die Karte „Nächstes Spiel“: Karte nach vorn, Schatten kürzer (Feedback Carl 23.10.2026) */
  main .team-hero .naechstes-spiel { position: relative; z-index: 2; }
  .team-photo-rahmen .team-photo, .team-photo-rahmen .team-photo.is-cutout { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 14px 26px -18px rgba(0,10,35,.7); }
  main .team-hero .nsp-datum { width: 64px; padding: 8px 4px; gap: 1px; justify-content: center; }
  main .team-hero .nsp-wt { font-size: 10.5px; letter-spacing: .1em; }
  main .team-hero .nsp-tag { font-size: 22px; }
  main .team-hero .nsp-mon { margin: 0; font-size: 10px; }
  main .team-hero .nsp-uhr { margin-top: 2px; padding-top: 3px; font-size: 14px; }
  main .team-hero .nsp-body { padding: 10px 12px; gap: 2px; align-content: center; }
  main .team-hero .nsp-label { font-size: 10.5px; letter-spacing: .08em; }
  main .team-hero .nsp-gegner { margin: 0; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main .team-hero .nsp-gegner small { display: none; }
  main .team-hero .nsp-zeit { font-size: 12.5px; }
  /* Trikotsponsoren in einer Zeile: „TRIKOTSPONSOREN · Name · Name“ */
  main .team-sponsors .team-sponsor-list { display: block; }
  main .team-sponsors .team-sponsor { display: inline; font-size: 13.5px; }
  main .team-sponsors .team-sponsor + .team-sponsor::before { content: "\00a0·\00a0"; position: static; opacity: .6; }
  main .team-sponsors .team-sponsor-pfeil { display: none; }

  /* Trainer & Training: zuerst die Trainingszeiten als Zeilen, dann die Trainer mit Foto und runden Knöpfen */
  main #staff { display: flex; flex-direction: column; gap: 8px; }
  main #staff .staff-card { padding: 0; border: 1px solid rgba(1, 81, 161, .12); border-radius: 16px; background: #fff; box-shadow: none; }
  main #staff .staff-card.training { gap: 0; padding: 2px 14px 10px; }
  main #staff .staff-kopf { display: flex; margin: 10px 0 0; }
  main #staff .staff-kopf:first-child { margin-top: 0; }
  main #staff .training .tr-head { display: none; }
  main #staff .training .times { margin: 0; }
  main #staff .training .times li { border-bottom: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(1, 81, 161, .08); }
  main #staff .training .times li:first-child { border-top: 0; }
  main #staff .training .times b { font: italic 900 16px/1.2 var(--font-display); text-transform: uppercase; color: #0151a1; }
  main #staff .training .times span { font-size: 15px; font-weight: 700; }
  main #staff .training-places { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 4px; }
  main #staff .training-place { margin: 0; padding: 0; }
  main #staff .staff-card.coach { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 12px; }
  main #staff .coach-photo { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 14px; }
  /* ohne Foto: Initialen statt Silhouette */
  main #staff .coach-photo .coach-silhouette { display: none; }
  main #staff .coach-initialen { display: grid; place-items: center; width: 100%; height: 100%; font: italic 900 20px/1 var(--font-display); letter-spacing: .02em; color: #0151a1; }
  main #staff .coach-body { display: contents; }
  main #staff .staff-card.coach h3 { margin: 0; font: 700 15px/1.25 var(--font-body); text-transform: none; color: #0a2244; }
  main #staff .staff-card.coach .role { display: none; }
  main #staff .coach-contact { display: flex; gap: 8px; align-self: center; margin: 0; padding: 0; border: 0; }
  /* kleines Foto: etwas näher ans Gesicht, damit das Wappen am Bildrand der Vorlage nicht als roter Fleck in der Ecke klebt */
  main #staff .coach-photo img { transform: scale(calc(var(--zoom, 1) * 1.3)); transform-origin: 50% 20%; }
  /* eigener Handy-Ausschnitt aus dem Foto-Editor der Verwaltung (Tools › Mannschaften › Trainer › Foto): gleiche Rechnung wie dort */
  main #staff .coach-photo img.hat-mobil { object-position: var(--pos-m); transform: scale(var(--zoom-m, 1)); transform-origin: var(--pos-m); }
  main #staff .coach-contact a { display: flex; align-items: center; justify-content: center; gap: 0; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; background: #e4edfa; color: #0151a1; font-size: 0; }
  main #staff .coach-contact a small { display: none; }
  main #staff .coach-contact a span { display: contents; font-size: 0; }
  main #staff .coach-contact svg { display: block; width: 19px; height: 19px; }

  /* Kalender-Abo: kleine Karte, vier Knöpfe im Raster (QR-Code braucht man am Handy nicht) */
  main #kalender .calendar { display: block; padding: 16px; border-radius: 16px; }
  main #kalender .cal-icon { display: none; }
  main #kalender .cal-copy h2 { margin: 4px 0 6px; font-size: 22px; }
  main #kalender .cal-copy p { font-size: 13.5px; }
  main #kalender .cal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  main #kalender .cal-btn { justify-content: center; height: 44px; padding: 0 10px; font-size: 14px; }
  main #kalender #calQr { display: none; }

  /* Heimplatz: eine Zeile mit Name, Anschrift und „Route“ – ohne Platz-Grafik */
  main #heimplatz { padding-block: 28px; }
  main #heimplatz .venue-wide { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; border-radius: 16px; }
  /* links nur das Logo des Stammvereins (ohne Spielfeld-Grafik und „Heim“-Marke) */
  main #heimplatz .venue-art { position: relative; align-self: stretch; aspect-ratio: auto; min-height: 96px; background: none; }
  main #heimplatz .venue-art::before, main #heimplatz .venue-art > svg, main #heimplatz .venue-art .v-no { display: none; }
  main #heimplatz .venue-art .venue-crest { left: 16px; top: 50%; width: 56px; transform: translateY(-50%); box-shadow: none; }
  main #heimplatz .venue-body { padding: 14px 16px 14px 8px; gap: 2px; }
  main #heimplatz .venue-body .eyebrow { display: none; }
  main #heimplatz .heim-kopf { display: flex; margin-bottom: 12px; }
  main #heimplatz .venue-body h3 { font-size: 18px; }
  main #heimplatz .venue-body p { font-size: 13.5px; }
  main #heimplatz .venue-body a { margin-top: 6px; padding-top: 0; }
  /* „Werde Teil der …“: kompakter Abschluss ganz unten (statt einer festen Leiste) */
  main .cta.cta-compact { display: grid; gap: 10px; padding: 18px 16px; border-radius: 16px; }
  main .cta.cta-compact h2 { margin: 2px 0 0; font-size: clamp(17px, 5.6vw, 22px); white-space: nowrap; }
  main .cta.cta-compact h2 br { display: none; }
  main .cta.cta-compact p { margin: 0; font-size: 14px; line-height: 1.45; }
  main .cta.cta-compact .btn { width: 100%; justify-content: center; min-height: 48px; margin-top: 8px; }

}

/* ---- Handy v2, Teil 3 (21.10.2026): Sponsoren als Zweier-Raster statt großer Einzelkarten ---- */
@media (max-width: 640px) {
  /* Goldpartner (Feedback #61): volle Breite, Logo links, Name und Dankestext rechts daneben */
  main .gold-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  main .gold-grid .gold-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "logo body";
    column-gap: 12px; align-items: center; min-height: 0; padding: 10px; border-radius: 14px; }
  main .gold-grid .gold-card .sponsor-logo { aspect-ratio: 2 / 1; height: auto; min-height: 0; border-radius: 10px; }
  main .gold-grid .gold-card .sponsor-logo b { font-size: 13px; }
  main .gold-grid .gc-body { gap: 2px; }
  main .gold-grid .gold-card strong { font-size: 14px; }
  main .gold-grid .gold-card .gc-text { font-size: 12.5px; line-height: 1.4; -webkit-line-clamp: 5; }
  main .gold-grid .gold-card:not(:has(.gc-body > *)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo"; }
  main .sponsor-grid { gap: 8px; }
}

/* ---- Handy v2, Teil 4 (21.10.2026): Fuß kompakt – Marke klein, Anschrift in zwei Spalten, Links in einer Zeile ---- */
@media (max-width: 640px) {
  footer#kontakt { padding: 16px 0; }
  footer#kontakt .foot-brand .brand img { width: 36px; height: 37px; }
  footer#kontakt .foot-brand .brand-text strong { font-size: 16px; }
  footer#kontakt .foot-legal { margin-top: 12px; gap: 0 18px; font-size: 14px; }
  footer#kontakt .foot-legal a { display: inline-flex; align-items: center; min-height: 40px; }
  footer#kontakt .foot-legal .to-top { padding: 0; border: 0; }
  footer#kontakt .foot-bottom { margin-top: 4px; padding-top: 8px; font-size: 12px; } /* Copyright als schlanke Zeile direkt unter den Links */
  body:has(.feedback-start) footer#kontakt .foot-bottom { padding-bottom: 0; }
}

/* ---- Handy: Kopf nur mit Wappen, Seitenname und Menü (21.10.2026) – keine Unternavigation ---- */
@media (max-width: 640px) {
  html { scroll-padding-top: 70px; }
  .tab-dock { display: none !important; }
  .mainbar > .wrap { height: 58px; gap: 12px; justify-content: flex-start; }
  .nav .brand, .nav.scrolled .brand, .nav.mega-open .brand { position: static; transform: none; flex: none; }
  .nav .brand img, .nav.scrolled .brand img, .nav.mega-open .brand img { width: 38px; height: 39px; }
  .nav .nav-bereich, .nav.scrolled .nav-bereich, .nav.mega-open .nav-bereich { flex: 1; min-width: 0; margin: 0; }
  .nav .menu-btn { margin-left: auto; }
  main > section.hero.hero { padding-top: 78px; }
  /* Das Vollbild-Menü hat dieselbe Kopfleiste wie die Seite: gleiche Höhe, Wappen und Knopf (44 px) an genau derselben Stelle,
     damit beim Öffnen und Schließen nichts springt (Feedback 23.10.2026) */
  .ov-head .wrap { height: 58px; gap: 12px; justify-content: flex-start; }
  .ov-head .brand img { width: 38px; height: 39px; }
  .ov-head .brand-text strong { font-size: 16px; }
  .ov-head .brand-text span { font-size: 10px; margin-top: 3px; }
  .ov-close { width: 44px; height: 44px; margin-left: auto; flex: none; }
}

/* ---- Handy: Abstände (21.10.2026) – Liste direkt unter Überschrift und Filter ---- */
@media (max-width: 640px) {
  main section .section-head { margin-bottom: 16px; }
  main section .section-head > .chips { margin-top: 2px; }
  main #ergebnisse .results, main #spiele .matches, main #spieltag .matches { margin-top: 0; }
  main #spieltag .toolbar { margin-bottom: 4px; }
}

/* ---- Handy: Tageszeile „Samstag, 24. Okt“, Heute/Morgen als blaue Marke; Zeilen enger (21.10.2026) ---- */
@media (max-width: 640px) {
  main .dg-date { padding: 12px 2px 6px; gap: 5px; align-items: center; }
  main .dg-date:not(.is-rel)::before { content: attr(data-tag) ","; font: 800 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #0151a1; }
  main .dg-date:not(.is-rel) small:first-child { display: none; }
  main .dg-date b::after { content: "."; }
  main .dg-date.is-rel small:first-child { padding: 4px 8px; border-radius: 6px; background: #0151a1; color: #fff; }
  main .dg-date.is-rel small:first-child::after { content: " ·"; display: none; }
  main .dg + .dg { margin-top: 0; }
  main .matches:has(> .dg) { gap: 0; }
  main .dg .match .m-venue { margin-left: -4px; }
}

/* ---- Handy: weniger Luft (21.10.2026) – Abstand der Bereiche 28 statt 40 px, „Mehr anzeigen“ als schmaler Knopf ---- */
@media (max-width: 640px) {
  :root { --luft: 28px; }
  main .more-row { margin-top: 10px; }
  main .more-row .btn { width: 100%; min-height: 0; height: 42px; padding: 0 16px; justify-content: center; border-width: 1px; border-radius: 12px; font-size: 14px; }
}

/* ---- Handy: Fuß – Anschrift links, Kontakt/Impressum/Datenschutz rechtsbündig daneben als Links, nie höher als die Anschrift;
   „Nach oben“ entfällt ---- */
@media (max-width: 640px) {
  footer#kontakt .foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marke links"; column-gap: 16px; align-items: center; }
  footer#kontakt .foot-brand { display: contents; }
  footer#kontakt .foot-brand .brand { grid-area: marke; }
  footer#kontakt .foot-legal { grid-area: links; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; align-self: center; gap: 0 14px; margin: 0; white-space: nowrap; font-size: 13px; line-height: 1.5; }
  footer#kontakt .foot-legal a { min-height: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
  footer#kontakt .foot-legal .to-top { display: none; }
}

/* ---- Handy: „Mannschaft wechseln ▾“ auf der Mannschaftsseite (team.js wechslerEinrichten, Fenster wie der Filter) ---- */
.team-wechsel { display: none; }
.fb-teams a { display: inline-grid; place-items: center; height: 40px; min-width: 48px; padding: 0 13px; border-radius: 12px; background: #e4edfa; color: #0151a1;
  font: italic 900 14px/1 var(--font-display); text-transform: uppercase; text-decoration: none; }
.fb-teams a[aria-current] { background: #0151a1; color: #fff; }
@media (max-width: 640px) {
  /* rechts im weißen Namensbalken; der Balken ist schräg, der Knopf wird zurückgedreht */
  main .title-block h1 .bar { position: relative; padding-right: 52px; }
  main .title-block h1 .bar > .team-wechsel { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) skewX(8deg); display: grid; place-items: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #e4edfa; color: #0151a1; cursor: pointer; }
  main .team-wechsel i { width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); }
  .team-wechsel-blatt .fb-kopf b { font-size: 20px; white-space: nowrap; }
}
/* Desktop (seit 21.10.2026): derselbe Knopf rechts im weißen Namensbalken, Größe mit der Schrift (em);
   das Fenster öffnet in der Mitte statt von unten */
@media (min-width: 641px) {
  main .title-block h1 .bar { position: relative; padding-right: .95em; }
  main .title-block h1 .bar > .team-wechsel { position: absolute; right: .16em; top: 50%; transform: translateY(-50%) skewX(8deg); display: grid; place-items: center;
    width: .58em; height: .58em; min-width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: #e4edfa; color: #0151a1; cursor: pointer;
    transition: background .15s, color .15s; }
  main .title-block h1 .bar > .team-wechsel:hover { background: #0151a1; color: #fff; }
  main .team-wechsel i { width: .14em; height: .14em; min-width: 9px; min-height: 9px; border: solid currentColor; border-width: 0 3px 3px 0; transform: translateY(-20%) rotate(45deg); }
  .filter-blatt.team-wechsel-blatt[open] { display: block; inset: 0; margin: auto; width: min(560px, calc(100vw - 48px)); height: fit-content; max-height: 80vh;
    border-radius: 24px; padding: 14px 24px 24px; box-shadow: 0 24px 60px rgba(2, 20, 50, .35); }
}

/* ---- Mannschaftsseite: Heimplatz und „Werde Teil …“ flacher (21.10.2026) ----
   „Unser Heimplatz“ steht links über der Karte wie die Überschriften der anderen Bereiche (auch am Desktop),
   die Adresse ist selbst der Link auf Google Maps (Stecknadel wie in den Spielzeilen, kein „Route planen“ mehr) */
main #heimplatz .heim-kopf { display: flex; margin-bottom: 16px; }
.heim-adresse { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0; padding: 0; color: inherit; opacity: .85;
  font: 500 15px/1.3 var(--font-body); text-decoration: none; }
.heim-adresse svg { flex: none; width: 16px; height: 16px; }
.heim-adresse:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 641px) {
  .venue-wide .venue-art { min-height: 180px; }
  .venue-wide .venue-body { padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3.4vw, 44px); gap: 8px; }
  .venue-wide .venue-body a.heim-adresse { margin-top: 0; padding-top: 0; }
  .cta.cta-compact { padding: clamp(22px, 2.8vw, 34px) clamp(28px, 4vw, 48px); }
  .cta.cta-compact h2 { font-size: clamp(30px, 3.4vw, 48px); margin-top: 12px; }
  .cta.cta-compact p { margin-bottom: 18px; }
}

/* Heimplatz und „Werde Teil …“ in EINEM Bereich (21.10.2026): ab 1000 px links/rechts, gleich hoch; darunter untereinander.
   Beide tragen eine Überschrift darüber („Unser Heimplatz“ / „Mitmachen“, `.heim-kopf`) */
.heim-paar { display: grid; gap: 28px; }
.heim-ort, .heim-mitmachen { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 640px) { .heim-paar { gap: 16px; } }
@media (min-width: 1000px) {
  .heim-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  #heimplatz.ohne-ort .heim-paar { grid-template-columns: 1fr; }
  .heim-paar .venue-wide, .heim-paar .cta { flex: 1; }
  /* halbe Breite: Spielfeld oben, Name und Adresse darunter */
  .heim-paar .venue-wide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .heim-paar .venue-wide .venue-art { min-height: 150px; }
  .heim-paar .venue-wide .venue-body { justify-content: center; }
  .heim-paar .venue-wide h3 { font-size: clamp(28px, 2.6vw, 38px); }
  /* „Werde Teil …“ einspaltig: Überschrift, Text, Knopf */
  .heim-paar .cta.cta-compact { grid-template-columns: 1fr; gap: 14px; align-content: center; align-items: start; }
  .heim-paar .cta.cta-compact h2 { font-size: clamp(30px, 3vw, 44px); margin-top: 0; }
  .heim-paar .cta.cta-compact p { max-width: none; }
}

/* ---- Handy: News als Stories (Entwurf „Idee 4“, 21.10.2026; start.js renderStories/storyZeigen) ----
   Unter dem Kopf eine Reihe runder Kreise: Topspiel/Top-Ergebnis zeigen einen Ausschnitt ihres Fotos, „Spieltag“/
   „Ergebnisse“ die Anzahl – genau die Folien des Desktop-Sliders. Ein Tipp öffnet die Story über den ganzen
   Bildschirm (#storyBlatt). Gelber Ring = neu, blauer = automatische Spieltag-Folie, grauer = schon angesehen. */
.stories-leiste, .story-blatt:not([open]) { display: none; }
@media (max-width: 640px) {
  main > #stories { order: 0; }
  .stories-leiste:not([hidden]) { display: block; padding: 14px 0 12px; background: #fff; border-bottom: 1px solid rgba(1, 81, 161, .1); }
  .stories-leiste > .eyebrow { margin: 0 var(--gutter) 10px; color: var(--blue); }
  .stories { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--gutter) 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .stories::-webkit-scrollbar { display: none; }
  .st { flex: 0 0 68px; display: block; padding: 0; border: 0; background: none; color: var(--ink); text-align: center; text-decoration: none; cursor: pointer; }
  .st-ring { display: block; width: 68px; height: 68px; padding: 3px; border-radius: 50%; background: conic-gradient(var(--yellow), #ffe57a, var(--yellow)); }
  .st-ring.ist-blau { background: conic-gradient(var(--blue), #3d86d1, var(--blue)); }
  .st-ring.ist-gesehen { background: #c7d3e3; }
  .st-in { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: var(--blue-800); color: #fff; }
  .st-in img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 20%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 20%); }
  .st-in svg { width: 24px; height: 24px; fill: none; stroke: currentColor; }
  .st-in.st-hell { background: #e4edfa; color: var(--blue); }
  .st-in.st-logo { background: #fff; }
  .st-in.st-logo img { object-fit: contain; padding: 8px; transform: none; }
  .st-in.st-wert { align-content: center; row-gap: 1px; font: italic 900 9.5px/1.05 var(--font-display); text-transform: uppercase; text-align: center; }
  .st-in.st-wert b { display: block; font-size: 22px; line-height: 1; }
  .st-name { display: block; margin-top: 6px; font: 600 11.5px/1.2 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Story über den ganzen Bildschirm */
  .story-blatt { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--blue-800); color: #fff; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .story-blatt::backdrop { background: #04142d; }
  .sb-balken { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; }
  .sb-balken i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
  .sb-balken i span { display: block; width: 100%; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
  .sb-balken i.ist-voll span { transform: none; }
  .sb-balken i.ist-jetzt span { animation: sb-lauf var(--sb-dauer, 8s) linear forwards; }
  .story-blatt.ist-pause .sb-balken i.ist-jetzt span { animation-play-state: paused; }
  @keyframes sb-lauf { to { transform: scaleX(1); } }
  .sb-kopf { position: absolute; z-index: 4; top: calc(max(12px, env(safe-area-inset-top)) + 14px); left: 14px; right: 8px; display: flex; align-items: center; gap: 8px; }
  .sb-kopf img { width: 30px; height: 31px; }
  .sb-kopf b { flex: 1; font: 700 14px/1 var(--font-body); }
  .sb-zu { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .sb-zu svg { width: 24px; height: 24px; }
  .sb-zone { position: absolute; z-index: 2; top: 0; bottom: 0; }
  .sb-zone.ist-zurueck { left: 0; width: 30%; }
  .sb-zone.ist-weiter { right: 0; width: 70%; }
  .sb-folie { position: absolute; inset: 0; }
  .sb-folie::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(4, 30, 66, .6) 0%, rgba(4, 30, 66, 0) 22%, rgba(4, 30, 66, 0) 42%, rgba(4, 30, 66, .95) 100%); }
  .sb-folie.ist-liste::before, .sb-folie.ist-text::before { background: var(--blue-800); } /* einfarbig wie der Slider am Desktop */
  .sb-folie.ist-logo { background: #fff; }
  .sb-folie.ist-logo::before { top: auto; height: 62%; background: linear-gradient(180deg, rgba(6, 47, 98, 0), var(--blue-800) 30%); }
  .sb-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 30%); }
  .sb-logo { position: absolute; top: 16%; left: 12%; right: 12%; height: 26%; display: grid; place-items: center; }
  .sb-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  /* Inhalt unten; nur Knöpfe/Links fangen Tipps ab, sonst gilt die Tippzone dahinter (weiter/zurück) */
  .sb-inhalt { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; pointer-events: none; }
  .sb-inhalt a { pointer-events: auto; }
  /* gelbe Marke immer oben links unter dem Kopf, in jeder Story an derselben Stelle */
  .sb-lab.sb-oben { position: absolute; z-index: 3; top: calc(max(12px, env(safe-area-inset-top)) + 70px); left: 18px; pointer-events: none; }
  /* Überschrift aus den Tools (z. B. „Sensation im Pokal der E-Jugend“): größer als die übrigen Marken und bis zu zwei Zeilen */
  .sb-lab.sb-oben { max-width: calc(100% - 36px); width: fit-content; padding: 7px 11px 6px; font-size: 17px; line-height: 1.12; letter-spacing: .04em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; }
  .sb-folie.ist-liste .sb-inhalt, .sb-folie.ist-text .sb-inhalt { top: calc(max(12px, env(safe-area-inset-top)) + 100px); }
  .sb-folie.ist-text .sb-inhalt { justify-content: center; }
  .sb-folie.ist-text .sb-inhalt > svg { width: 44px; height: 44px; margin-bottom: 16px; fill: none; stroke: var(--yellow); }
  .sb-lab { align-self: flex-start; padding: 5px 8px 4px; border-radius: 6px; background: var(--yellow); color: var(--blue-900, #062a52);
    font: italic 900 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
  /* Abstände in Gruppen: Marke · Datum/Zeit · Mannschaft + Gegner · Liga/Ort · Link */
  .sb-datum { margin-top: 0; font: italic 900 20px/1 var(--font-display); text-transform: uppercase; color: var(--yellow); }
  .sb-gross { margin: 0 0 14px; font: italic 900 46px/.95 var(--font-display); text-transform: uppercase; }
  .sb-datum + .sb-gross { margin-top: 6px; }
  .sb-gross.o-w { color: #4ade80; } .sb-gross.o-l { color: #ff8a8a; } .sb-gross.o-d { color: var(--yellow); }
  .sb-team, .sb-titel { font: italic 900 24px/1.05 var(--font-display); text-transform: uppercase; }
  .sb-titel { font-size: 28px; }
  .sb-geg { margin-top: 4px; font: 600 18px/1.3 var(--font-body); color: #dbe7f7; }
  /* „— VS. —“ klein zwischen Mannschaft und Gegner (wie auf der Desktop-Folie), der Gegner in eigener Zeile über die volle Breite */
  .sb-vs { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: italic 800 12px/1 var(--font-display); letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .7); }
  .sb-vs::before, .sb-vs::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .6; }
  .sb-wo { margin-top: 10px; font: 600 14px/1.3 var(--font-body); color: #b9cbe4; }
  .sb-text { margin: 10px 0 0; font: 500 16px/1.45 var(--font-body); color: #e6eefa; }
  /* Link der Story klein und ruhig: halbdurchsichtige Pille links unten, wie bei Instagram */
  .story-blatt .sb-inhalt .ns-btn { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; width: auto; height: 40px; min-height: 0;
    margin-top: 20px; padding: 0 16px; border: 0; border-radius: 10px; background: #fff;
    color: var(--blue-900, #062a52); font: 700 14px/1 var(--font-body); font-style: normal; letter-spacing: 0; text-transform: none; text-decoration: none; } /* weißer, flächiger Knopf: klar etwas anderes als die Pillen darüber */
  .story-blatt .sb-inhalt .ns-btn svg { width: 14px; height: 14px; }
  .story-blatt .sb-inhalt span.ns-btn { display: none; }
  .sb-spiele { flex: 1; min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
  /* Tag mit Punkt und Linie, die Spiele darunter eingerückt mit Linie links (wie der Slider am Desktop) */
  .sb-tag { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding-bottom: 6px; font: 800 13px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
  .sb-tag::before { content: ""; width: 7px; height: 7px; flex: none; margin-left: 2px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
  .sb-tag::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
  .sb-tag ~ .sb-spiel { margin-left: 5px; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .22); }
  .sb-tag + .sb-spiel { border-top-color: transparent; }
  .sb-tag.ist-rel b { color: var(--yellow); }
  /* Zeile wie am Desktop: links Anstoß mit Heim/Auswärts darunter (Ergebnisse: rechts das Ergebnis), Mannschaft + Liga (rechtsbündig),
     darunter der Gegner über die volle Breite */
  .sb-spiel { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .sb-spiel.ist-ergebnis { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; } /* ohne Liga: Mannschaft und Gegner links, Ergebnis rechts */ /* Gegner näher an der Mannschaft */
  .sb-kick { grid-row: 1 / 3; display: grid; gap: 8px; justify-items: start; }
  .sb-zeit { font: italic 900 15px/1 var(--font-display); }
  .sb-ha { padding: 3px 7px; border-radius: 999px; background: #fff; color: var(--blue); font: 600 10px/1 var(--font-body); font-style: normal; }
  .sb-ha.ist-aus { background: rgba(255, 255, 255, .18); color: #fff; }
  .sb-us { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.25 var(--font-body); }
  .sb-liga { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font: 600 10px/1 var(--font-body); font-style: normal; }
  .sb-opp { grid-column: 2 / 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--font-body); color: #b9cbe4; }
  .sb-spiel.ist-ergebnis .sb-us { grid-column: 1; grid-row: 1; }
  .sb-spiel.ist-ergebnis .sb-zahl { grid-column: 2; }
  .sb-spiel.ist-ergebnis .sb-opp { grid-column: 1; grid-row: 2; }
  .sb-zahl { grid-column: 3; grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; min-width: 54px; padding: 0 10px; border-radius: 10px;
    background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font: italic 900 19px/1 var(--font-display); font-variant-numeric: tabular-nums; }
  .sb-zahl.o-w { color: #4ade80; } .sb-zahl.o-l { color: #ff8a8a; } .sb-zahl.o-d { color: var(--yellow); }

  /* Foto-Folien (Topspiel/Top-Ergebnis): Text höher und größer, der Knopf bleibt unten (Feedback 22.10.2026) */
  .sb-folie.ist-foto::before { background: linear-gradient(180deg, rgba(4, 30, 66, .6) 0%, rgba(4, 30, 66, 0) 22%, rgba(4, 30, 66, 0) 34%, rgba(4, 30, 66, .55) 58%, rgba(4, 30, 66, .95) 100%); }
  /* Text senkrecht mittig zwischen der gelben Marke oben und dem Knopf unten: der freie Platz teilt sich über zwei „auto“-Abstände
     (über dem Text und über dem Knopf) gleichmäßig auf */
  .sb-folie.ist-foto .sb-inhalt { top: calc(max(12px, env(safe-area-inset-top)) + 100px); }
  .sb-folie.ist-foto .sb-inhalt > :first-child { margin-top: auto; }
  .sb-folie.ist-foto .sb-inhalt .ns-btn { margin-top: auto; }
  .sb-folie.ist-foto .sb-inhalt > :nth-last-child(2) { margin-bottom: 10px; }
  .sb-folie.ist-foto .sb-gross { font-size: 58px; margin-bottom: 16px; }
  .sb-folie.ist-foto .sb-datum { font-size: 24px; }
  /* Topspiel: Datum groß in Weiß, Uhrzeit darunter kleiner in Gelb – gleiches Verhältnis wie auf dem Desktop (Feedback 23.10.2026) */
  .sb-folie.ist-foto .sb-datum { font-size: 28px; color: #fff; }
  .sb-folie.ist-foto .sb-datum + .sb-gross { font-size: 23px; color: var(--yellow); margin-top: 4px; margin-bottom: 48px; } /* mehr Luft zur Mannschaft: Datum und Uhrzeit sitzen höher */
  .sb-folie.ist-foto .sb-team { font-size: 34px; }
  .sb-folie.ist-foto .sb-vs { margin-top: 10px; font-size: 13px; }
  .sb-folie.ist-foto .sb-vs::before, .sb-folie.ist-foto .sb-vs::after { display: none; } .sb-folie.ist-foto .sb-vs { opacity: .85; margin-left: 10px; }
  /* gelber Balken unter der eigenen Mannschaft, so breit wie „C1“ – wie im Slider am Desktop */
  .sb-folie.ist-foto .sb-vs + .sb-geg { margin-top: 9px; }
  .sb-folie.ist-foto .sb-geg { font-size: 22px; }
  .sb-folie.ist-foto .sb-geg { text-wrap: balance; } /* langer Gegner bricht in zwei gleich lange Zeilen um */
  .sb-folie.ist-foto .sb-wo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
  /* Pillenzeile fest über dem Knopf (absolut, bleibt bei jeder Bildschirmhöhe an derselben Stelle); darüber reserviert der Gegner den Platz */
  .sb-folie.ist-foto .sb-inhalt > .sb-wo { position: absolute; left: 0; right: 0; bottom: 72px; margin: 0; }
  .sb-folie.ist-foto .sb-inhalt > .sb-geg { margin-bottom: 82px; }
  .sb-folie.ist-foto .sb-wo > span { flex: 0 1 auto; min-width: 0; } /* Liga, Heim/Auswärts und Ort/Spieltag in einer Zeile, bei Platznot bricht der Ort um */
  .sb-folie.ist-foto .sb-wo .sb-liga, .sb-folie.ist-foto .sb-wo .sb-ha { padding: 5px 11px; font-size: 13px; }
  .sb-folie.ist-foto .sb-wo .sb-liga, .sb-folie.ist-foto .sb-wo .sb-ha, .sb-folie.ist-foto .sb-wo .sb-ha.ist-aus { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-weight: 600; }
  .sb-folie.ist-foto .sb-wo > span { font-size: 13px; color: rgba(255, 255, 255, .8); } /* Ort in Pillengröße und leiser als der Gegner */
}

/* Heimplatz-Karte ab 641 px: kein harter Übergang Spielfeld → Text (21.10.2026) – die ganze Karte trägt den Blauverlauf,
   die Streifen laufen nach unten aus (Handy: eigene Fassung ohne Spielfeld) */
@media (min-width: 641px) {
  .heim-paar .venue-wide { background: linear-gradient(170deg, #0b5cb5, #06408a 75%); }
  .heim-paar .venue-wide .venue-art { background: none; }
  .heim-paar .venue-wide .venue-art::before { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent); }
}

/* Heimplatz: Logo des Stammvereins ohne weißen Kreis (21.10.2026) – die drei Wappen sind weiß gefüllte Schilde
   und stehen auf dem Blau für sich; ein leichter Schatten hebt sie vom Spielfeld ab */
.venue-art .venue-crest { background: none; box-shadow: none; border-radius: 0; }
.venue-art .venue-crest img { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(2, 20, 50, .5)); }
@media (min-width: 641px) { .venue-art .venue-crest { width: clamp(40px, 3.6vw, 54px); aspect-ratio: auto; } } /* etwa halb so hoch wie das Spielfeld (vorher 86–128 px) */

/* ---- Handy: Foto im Kopf der Startseite (Entwurf „Foto-Kopf“, 21.10.2026) ----
   Mannschaftsfoto (titelbild17) blau getönt hinter „Wir sind Römerberg“, langsamer Zoom; der Text steht unten links.
   Das Foto ist breiter als der Kopf und links angeschnitten, so steht die Mannschaft rechts. Am Desktop unsichtbar. */
.kopf-foto { display: none; }
@media (max-width: 640px) {
  /* Lage aus dem Bild gerechnet (titelbild17, 800 × 1000): Haaransatz bei 23,5 %, Kinn bei 33,5 % der Bildhöhe, Mannschaft
     von 37 bis 96 % der Breite. --kf-b = Bildbreite (mind. 125 % des Bildschirms, auf hohen Handys größer), --kf-oben = wo die
     Köpfe beginnen (unter Wappen und Menü). Die Schrift beginnt 14 px unter dem Kinn – so stehen die Köpfe auf jedem Handy frei. */
  main > #start.hero:has(.hero-copy) { --kf-b: max(125vw, 58svh); --kf-h: calc(var(--kf-b) * 1.25); --kf-oben: 74px;
    isolation: isolate; overflow: hidden; padding-top: calc(var(--kf-oben) + var(--kf-h) * .1 + 14px); padding-bottom: 22px; }
  #start .hero-bg .slash { display: none; }
  #start .kopf-foto { display: block; position: absolute; inset: 0; overflow: hidden; background: var(--blue-800); }
  /* gerechnete Lage statt object-fit (Werte oben): Köpfe ab --kf-oben, Mannschaft rechtsbündig */
  #start .kopf-foto img { position: absolute; top: calc(var(--kf-oben) - var(--kf-h) * .235); left: calc(100vw - var(--kf-b) * .97);
    width: var(--kf-b); height: auto; max-width: none;
    transform-origin: 66% 28%; animation: kopf-zoom 22s ease-in-out infinite alternate; }
  /* oben langsam dunkler (hinter Wappen und Menü), Mitte frei, unten dunkel für die Schrift */
  #start .kopf-foto::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(4, 30, 66, .9) 0, rgba(4, 30, 66, .55) 40px, rgba(4, 30, 66, .2) 62px, rgba(4, 30, 66, .06) var(--kf-oben),
      rgba(4, 30, 66, .06) calc(var(--kf-oben) + var(--kf-h) * .1), rgba(4, 30, 66, .7) calc(var(--kf-oben) + var(--kf-h) * .1 + 60px), rgba(4, 30, 66, .96) 100%); }
  #start .kopf-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(1, 81, 161, .35); mix-blend-mode: multiply; }
  #start .hero-copy .eyebrow { color: #fff; }
  /* Schriften eng untereinander: Kicker, „Wir sind / Römerberg“ und der Satz als ein Block unten im Foto */
  main > #start h1 { margin: 6px 0 0; font-size: clamp(38px, 11vw, 44px); }
  main > #start .hero-copy .hero-lead { padding: 8px 0 0; }
  #start .hero-copy .hero-lead b { font-size: 15px; color: #e3ecf8; }
}
@keyframes kopf-zoom { to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { #start .kopf-foto img { animation: none; } }

/* ---- Startseite: „Wir sind / Römerberg“ ruhiger (22.10.2026, Handy und Desktop) – passend zum langsamen Zoom im Foto.
   Jede Zeile 1,2 s, „Römerberg“ 0,3 s später, der weiße Balken zieht sich dabei von links auf wie ein Pinselstrich.
   Nach etwa 1,5 s steht alles; bei „Bewegung reduzieren“ sofort ohne Verzögerung. ---- */
#start h1 .line > span { animation-duration: 1.2s; }
#start h1 .line:nth-child(2) > span { animation-delay: .3s; }
#start h1 .bar { animation: balken-auf .9s cubic-bezier(.3, .7, .2, 1) .45s both; }
@keyframes balken-auf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@media (prefers-reduced-motion: reduce) { #start h1 .line > span, #start h1 .bar { animation-delay: 0s !important; } }

/* ---- Handy: große Überschriften (22.10.2026) – EINE Größe (26 px), feste Zeilenumbrüche entfallen: was passt, steht in einer
   Zeile („Spiele & Ergebnisse“, „Mehr als ein Spiel“, „Alle Jahrgänge“ …), längere brechen normal in zwei Zeilen um.
   Nach jedem <br> in einer Überschrift steht ein Leerzeichen, damit die Wörter ohne Umbruch nicht zusammenkleben.
   Am Desktop bleiben die großen zweizeiligen Überschriften. Der Mitmach-Block der Mannschaftsseite (.cta) hat eigene Größe. ---- */
@media (max-width: 640px) {
  main section h2.display:not(.cta h2), .ist-start main .section-head h2, .ist-start main .about-title, main .section-head.ist-zweiter-kopf h2 { font-size: 26px; }
  main section h2.display:not(.cta h2) br { display: none; }
}

/* ---- Handy: „Saison in Zahlen“ kompakter (22.10.2026) – „Mannschaften im Spielbetrieb“ rechts neben der 22, die Doppelkacheln
   nur so hoch wie ihr Inhalt (vorher 150 px Mindesthöhe, darunter viel Leerraum) ---- */
@media (max-width: 640px) {
  .ist-start #zahlen .tile.t-hero > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num lbl" "sub sub"; align-items: center; column-gap: 16px; }
  .ist-start #zahlen .tile.t-hero .num { grid-area: num; }
  .ist-start #zahlen .tile.t-hero .num + .lbl { grid-area: lbl; margin: 0; }
  .ist-start #zahlen .tile.t-hero .lbl b { display: block; line-height: 1.3; }
  .ist-start #zahlen .tile.t-hero .sub-stat { grid-area: sub; }
  .ist-start #zahlen .tile.t-duo { min-height: 0; padding-top: 18px; padding-bottom: 18px; }
  .ist-start #zahlen .tile.t-duo > div { gap: 10px; }
}

/* ---- Handy: Anzahl der Spiele rechts in der Tageszeile („7 Spiele“, 22.10.2026) – die Liste zeigt je Schritt nur 5,
   die Zahl verrät, dass an dem Tag mehr kommen. Am Desktop/Tablet unsichtbar (dort Fahrplan bzw. Datumskachel). ---- */
.dg-anzahl { display: none; }
@media (max-width: 640px) {
  main .dg-date .dg-anzahl { display: inline; margin-left: auto; font: 600 12px/1 var(--font-body); font-style: normal; letter-spacing: 0; text-transform: none; color: #63748f; }
}

/* ---- Mannschaftsseite, Durchsicht 22.10.2026 ---- */
/* Ort direkt am Trainingstermin (team.js trainingCard, .times.mit-ort) – Handy und Desktop */
.times.mit-ort li { flex-wrap: wrap; row-gap: 6px; }
.times.mit-ort .tr-ort { flex: 0 0 100%; display: flex; margin: 0; padding: 0; }
.times.mit-ort .tr-ort span { flex: 1; min-width: 0; text-align: left; }
/* Pille „Abo“ in den Eckdaten: springt zum Kalender-Abo; blau umrandet, damit man sie als Knopf erkennt */
@media (max-width: 640px) {
  /* Reihenfolge: Spielplan vor den Ergebnissen; die Hintergründe wechseln weiter Weiß/Hellblau */
  main:has(> #spiele) { display: flex; flex-direction: column; }
  main > #team { order: 0; } main > #training { order: 1; } main > #spiele { order: 2; } main > #ergebnisse { order: 3; }
  main > #kalender { order: 4; } main > #heimplatz { order: 5; }
  main > #spiele.theme-light { --bg-s: var(--blue-tint); }
  main > #ergebnisse.theme-light { --bg-s: #fff; }
  /* ohne Mannschaftsfoto kein leerer Platzhalter – das nächste Spiel rückt unter Name und Eckdaten */
  .team-grid:has(.team-photo.no-photo) .team-photo-rahmen { display: none; }
  /* ein Kicker je Bereich: über „Trainer & Training“ stehen schon „Trainer“ und „Training“ */
  #training .section-head .eyebrow { display: none; }
  /* Trikotsponsoren je in eigener Zeile – vorher brach ein langer Name mitten im Wort um */
  main .team-sponsors .team-sponsor-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  main .team-sponsors .team-sponsor + .team-sponsor::before { content: none; }
  /* Ort am Trainingstermin: die Zeile ist am Handy ein Raster (Tag | Zeit), der Ort geht darunter über beide Spalten */
  main #staff .training .times.mit-ort .tr-ort { grid-column: 1 / -1; margin-top: 4px; }
  main #staff .training .times.mit-ort .tr-ort span { font-size: 13px; font-weight: 400; }
  /* Abo-Pille: hinter den Eckdaten, gleiche Höhe, gelb umrandet (auf dem blauen Kopf als Knopf erkennbar) */
  /* Kalender-Abo kompakt: ohne großes Symbol, eine Zeile Text, vier kleine Knöpfe in einer Reihe */
  main #kalender .calendar { grid-template-areas: "eyebrow" "title" "text" "act"; gap: 6px; padding: 18px 16px; }
  main #kalender .cal-icon { display: none; }
  main #kalender .calendar h2 { font-size: 22px; }
  main #kalender .calendar p { margin: 0; font-size: 14px; }
  main #kalender .cal-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  main #kalender .cal-btn { flex-direction: column; justify-content: center; gap: 4px; height: 58px; min-height: 0; padding: 0 4px; font-size: 12px; }
  main #kalender .cal-btn#calQr { display: none; }
}

/* ---- Mannschaftsseite: Eckdaten-Pillen und „Abo“ immer in EINER Zeile, alle Texte komplett (22.10.2026, alle Breiten) ----
   Die Zeile ist so breit wie der Mannschaftsname darüber. Passen die vier Pillen bei 14 px nicht hinein, verkleinert team.js
   (pillenPassen) die Schrift ALLER vier gemeinsam stufenlos (--pill-fs, Abstände in em wachsen/schrumpfen mit) – nie „…“.
   Der Text steht in jeder Pille vertikal mittig; „Abo“ hat kleinere Abstände zum Rand. */
.team-copy .title-block > .fact-pills { --pill-fs: 14px; }
main .team-copy .title-block > .fact-pills { flex-wrap: nowrap; gap: .45em; font-size: var(--pill-fs); }
main .team-copy .title-block > .fact-pills li { flex: 1 1 auto; min-width: 0; /* Pillen füllen die Zeile, bündig mit der Karte darunter */ display: inline-flex; align-items: center; justify-content: center;
  padding: .5em var(--pill-px, .9em); font-size: 1em; line-height: 1; white-space: nowrap; overflow: visible; text-overflow: clip; }

/* ---- „Saison in Zahlen“ ab 641 px (22.10.2026): „Mannschaften im Spielbetrieb“ steht rechts neben der Zahl (wie am Handy), die Kachel
   „Mannschaften“ ist ab 1081 px schmaler (4 statt 5 von 12 Spalten), die Doppelkacheln rechts breiter und ihre großen Zahlen etwas kleiner ---- */
@media (min-width: 641px) {
  .ist-start #zahlen .tile.t-hero > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num lbl" "sub sub";
    align-items: center; align-content: space-between; column-gap: 20px; }
  .ist-start #zahlen .tile.t-hero .num { grid-area: num; margin: 0; font-size: clamp(72px, 7vw, 104px); }
  .ist-start #zahlen .tile.t-hero .num + .lbl { grid-area: lbl; margin: 0; }
  .ist-start #zahlen .tile.t-hero .lbl b { line-height: 1.25; }
  .ist-start #zahlen .tile.t-hero .sub-stat { grid-area: sub; }
  .ist-start #zahlen .tile.t-duo .num { font-size: clamp(56px, 6vw, 88px); }
}
@media (min-width: 1081px) {
  .ist-start #zahlen .tile.t-hero { grid-column: span 4; }
  .ist-start #zahlen .tile.t-a { grid-column: span 8; }
}

.fo-text .fo-vs { margin-left: 10px; } /* „vs.“ leicht eingerückt unter der Mannschaft */

/* Kalender-Abo als Knopf rechts neben „Spielplan“ (Web und Handy, 23.10.2026): erkennbar als Aktion, keine Pille mehr */
.titel-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.abo-knopf { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 700 14px/1 var(--font-body); text-decoration: none; transition: background .2s; }
.abo-knopf:hover { background: var(--blue-800, #062f62); }
.abo-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; flex: none; }
.abo-knopf[hidden] { display: none; }

/* Überschrift mit Knopf daneben bleibt in der linken Spalte des Kopfes (die Regeln oben greifen nur für direkte Kinder) */
.section-head > div > .titel-zeile { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; flex-wrap: nowrap; }
/* Web und Handy: „Abonnieren“ steht am rechten Rand, bündig mit den Karten darunter; der Filter rutscht dafür in die Zeile darunter */
.section-head:has(.titel-zeile) > :not(:first-child) { grid-column: 1 / -1; grid-row: 3; justify-self: start; }

/* ---- Popups sanft öffnen und schließen (23.10.2026): wie das Menü, nur ruhiger – Karte gleitet ein/aus, der Hintergrund blendet weich ---- */
.pt-dialog[open] { animation: ptSanftEin .5s cubic-bezier(.16, 1, .3, 1); }
.pt-dialog[open]::backdrop { animation: ptHintergrundEin .5s ease; }
.pt-dialog.schliesst { animation: ptSanftAus .26s cubic-bezier(.4, 0, 1, 1) forwards; }
.pt-dialog.schliesst::backdrop { animation: ptHintergrundAus .26s ease forwards; }
@keyframes ptSanftEin { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ptSanftAus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes ptHintergrundEin { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptHintergrundAus { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 640px) {
  /* Handy: die Info-Blätter (Kontakt, Impressum) gleiten von unten herein und wieder hinaus, Formulare öffnen wie am Desktop */
  .info-dialog.pt-dialog[open] { animation-name: ptBlattEin; }
  .info-dialog.pt-dialog.schliesst { animation-name: ptBlattAus; }
  @keyframes ptBlattEin { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes ptBlattAus { from { transform: none; } to { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .pt-dialog[open], .pt-dialog.schliesst, .pt-dialog[open]::backdrop, .pt-dialog.schliesst::backdrop { animation: none; }
}

@media (max-width: 640px) {
  /* Footer einzeilig: nur das Wappen links, die drei Links nebeneinander rechts (Name steht in der Kopfleiste und im Impressum) */
  footer#kontakt .foot-brand .brand-text { display: none; }
}

@media (max-width: 640px) {
  /* Footer: Wappen links über zwei Zeilen, rechts daneben die Links und darunter das Copyright (Feedback 23.10.2026) */
  footer#kontakt > .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marke links" "marke copy"; column-gap: 16px; align-items: center; }
  footer#kontakt .foot-grid { display: contents; }
  footer#kontakt .foot-brand .brand { grid-area: marke; }
  footer#kontakt .foot-legal { grid-area: links; justify-self: end; }
  footer#kontakt .foot-bottom { grid-area: copy; justify-self: end; margin: 0; padding: 2px 0 0; border: 0; font-size: 11.5px; white-space: nowrap; }
}

/* Formular-Popups: Kopf und Knöpfe bleiben stehen, nur der Mittelteil scrollt, wenn es zu lang wird (Feedback 23.10.2026) */
.pt-dialog:has(> .pt-form)[open] { display: flex; flex-direction: column; overflow: hidden; }
.pt-dialog > .pt-form { flex: 1 1 auto; min-height: 0; }
.pt-dialog .pt-form > .pt-head, .pt-dialog .pt-form > .pt-foot { flex: none; }
.pt-dialog .pt-form > .pt-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* Handy-Popups richten sich nach der aktuell sichtbaren Fläche (inkl. Safari-Leisten und Tastatur).
   Oben beginnen statt per auto-Margins an der Layout-Viewport-Mitte zu hängen: so bleibt der Dialogkopf sichtbar. */
@media (max-width: 640px) {
  .pt-dialog[open] { position: fixed; top: calc(var(--jsg-vv-top, 0px) + 8px); bottom: auto; max-height: calc(var(--jsg-vv-height, 100dvh) - 16px); margin-block: 0; }
  .pt-dialog:has(> .pt-form)[open] { height: fit-content; overflow: hidden; }
  .pt-dialog.info-dialog[open]:not(.ds-dialog) { top: var(--jsg-vv-top, 0px); max-height: calc(var(--jsg-vv-height, 100dvh) - 8px); }
  .pt-dialog.info-dialog.ds-dialog[open] { top: calc(var(--jsg-vv-top, 0px) + 8px); bottom: auto; height: auto; max-height: calc(var(--jsg-vv-height, 100dvh) - 16px); }
}

/* Datumsfelder: leer = Beschriftung groß im Feld wie bei den anderen Feldern, „tt.mm.jjjj“ bleibt unsichtbar (nav.js setzt .datum-leer) */
.pt-float.datum-leer > span, .pt-float.datum-leer input[type=date]:not(:focus) + span { top: 17px; font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.pt-float.datum-leer input[type=date] { color: transparent; }
.pt-float.datum-leer input[type=date]::-webkit-datetime-edit, .pt-float.datum-leer input[type=date]::-webkit-datetime-edit-fields-wrapper { color: transparent; }

/* Menü „Mannschaften“ (Handy): eine Zeile je Altersklasse – Buchstabe mit Alter links, die Mannschaften als Knöpfe rechts */
.ov-sublinks.ov-teams { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; }
.ov-teams .ov-row { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 6px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.ov-teams .ov-label { display: flex; flex-direction: column; line-height: 1.05; }
.ov-teams .ov-label b { font: italic 900 26px/1 var(--font-display); }
.ov-teams .ov-label small { margin-top: 3px; font-size: 11px; opacity: .7; white-space: nowrap; }
.ov-teams .ov-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-teams .ov-pill { padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(255, 255, 255, .1); font: 700 14px/1 var(--font-body); white-space: nowrap; overflow: visible; border-bottom-width: 1px; }
.ov-teams .ov-pill:hover { background: rgba(255, 255, 255, .22); }
/* Mannschaftszeilen im Menü wie die Untermenüs von Verein und Mitgliedschaft: eingerückt, mit senkrechtem Strich links */
.ov-sub.ov-teams { margin: 4px 0 18px 12px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .28); }
.ov-teams .ov-row:last-of-type { border-bottom: 0; }

/* News-Slider „Letzte Ergebnisse“: ohne Liga – links Mannschaft und Gegner untereinander, rechts das Ergebnis (Feedback 23.10.2026) */
.ns-list .ns-row.is-result { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
.ns-list .ns-row.is-result .ns-us, .ns-list .ns-row.is-result .ns-opp { grid-column: 1; }
.ns-list .ns-row.is-result .ns-score { grid-column: 2; grid-row: 1 / 3; }

@media (max-width: 640px) {
  /* Spielkarten am Handy: Zeilen mit overflow:hidden brauchen genug Zeilenhöhe, sonst werden Unterlängen („g“ in „Kreisliga“) unten abgeschnitten */
  main .dg .match .m-team-label span { line-height: 1.35; padding-block: 1px; }
  main .dg .match .m-teams div, main .dg .match .m-venue, main .dg .match .m-venue a { line-height: 1.35; }
  /* Kopfleiste ohne Weichzeichner: der Weichzeichner über scrollendem Inhalt lässt den Bildschirm am iPhone flackern */
  .nav.scrolled .mainbar, .nav.mega-open .mainbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #062a52; }
}

@media (min-width: 641px) {
  /* Footer am Desktop wie am Handy: Marke links über zwei Zeilen, rechts die Links (unterstrichen) und darunter das Copyright */
  footer#kontakt > .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marke links" "marke copy"; column-gap: 32px; row-gap: 6px; align-items: center; }
  footer#kontakt .foot-grid { display: contents; }
  footer#kontakt .foot-brand { display: contents; }
  footer#kontakt .foot-brand .brand { grid-area: marke; }
  footer#kontakt .foot-legal { grid-area: links; justify-self: end; }
  footer#kontakt .foot-legal a:not(.to-top) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
  footer#kontakt .foot-legal a:not(.to-top):hover { text-decoration-color: #fff; }
  footer#kontakt .foot-bottom { grid-area: copy; justify-self: end; margin: 0; padding: 0; border: 0; }
}

/* „Werde Partner“ auf der Sponsorenseite (Feedback #59): rechte Spalte breiter, der Text steht auf zwei Zeilen und die Kachel wird flacher */
@media (min-width: 761px) {
  #partner-werden .cta.cta-compact { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); }
  #partner-werden .cta.cta-compact p { max-width: none; }
}