:root{
  --rot:#1a7cc1; --rot-dunkel:#1567a3; --warn:#b3261e; --tinte:#1d1b1a; --grau:#5a6370; --linie:#dfe4ea;
  --papier:#f5f7fa; --karte:#ffffff; --gruen:#2e7d4f; --gelb:#b7791f;
  --radius:20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);line-height:1.55;font-size:17px}
a{color:var(--rot)}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Kopf */
header.top{color:var(--tinte);position:sticky;top:0;z-index:20;padding:12px 16px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--linie);border-radius:22px;max-width:1120px;box-shadow:0 8px 24px rgba(15,25,40,.10);position:relative}
.logo{display:flex;align-items:center;gap:10px;color:var(--tinte);text-decoration:none;font-weight:700;letter-spacing:.2px}
.logo .ball{width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset -5px -5px 0 rgba(0,0,0,.08),0 0 0 1px var(--linie);position:relative}
.logo .ball::after{content:"";position:absolute;inset:7px;border-radius:50%;border:3px solid var(--rot)}
.logo .vlogo{width:48px;height:48px;margin:4px 0;flex:none}
.logo small{display:block;font-weight:400;opacity:.7;font-size:12px}
nav.menu{display:flex;gap:4px;flex-wrap:wrap}
nav.menu a{color:var(--tinte);text-decoration:none;padding:8px 14px;border-radius:999px;font-size:15px;opacity:.88}
nav.menu a:hover{background:#e8f2fa;color:var(--rot);opacity:1}
.burger{display:none;background:none;border:0;color:var(--tinte);font-size:26px;cursor:pointer}
@media (max-width:820px){
  .burger{display:block}
  nav.menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--linie);flex-direction:column;padding:10px 14px 14px;border-radius:22px;box-shadow:0 8px 24px rgba(15,25,40,.18)}
  nav.menu.offen{display:flex}
}

/* Hero */
.hero{background:#14202e;color:#fff;overflow:hidden;position:relative;width:calc(100% - 32px);max-width:1120px;margin:16px auto 0;border-radius:32px;box-shadow:0 14px 36px rgba(15,25,40,.18)}
.hero .wrap{padding-left:44px;padding-right:44px}
@media (max-width:820px){.hero .wrap{padding-left:24px;padding-right:24px}}
.hero .wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:500px;padding-top:56px;padding-bottom:56px}
.hero-text{max-width:560px}
.wand{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:4px;z-index:0}
.kachel{background-size:cover;background-position:center;transition:opacity .7s ease;filter:saturate(.9)}
.kachel.weg{opacity:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,22,36,.90) 0%,rgba(12,22,36,.72) 42%,rgba(12,22,36,.18) 78%,rgba(12,22,36,.05) 100%)}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.08;margin:0 0 14px;letter-spacing:-.5px}
.hero p{font-size:19px;opacity:.92;margin:0 0 24px;max-width:34em}
.jubi{display:inline-block;background:#fff;color:var(--rot);font-weight:800;border-radius:999px;padding:5px 14px;font-size:14px;margin-bottom:16px;letter-spacing:.3px}
.hero figure{margin:0;transform:rotate(1.5deg);background:#fff;padding:10px 10px 8px;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero figure img{border-radius:14px}
.hero figcaption{color:var(--grau);font-size:13px;padding-top:6px}
.btn{display:inline-block;background:#fff;color:var(--rot);font-weight:700;text-decoration:none;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-size:16px}
.btn.zweit{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);margin-left:8px}
.btn.rot{background:var(--rot);color:#fff}
.btn.klein{padding:7px 12px;font-size:14px}
@media (max-width:820px){.wand{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.hero::after{background:linear-gradient(180deg,rgba(12,22,36,.55) 0%,rgba(12,22,36,.88) 100%)}.hero .wrap{min-height:520px;align-items:flex-end}}

/* Logo greift aus der Bildwand heraus */
.hero-rahmen{position:relative;width:calc(100% - 32px);max-width:1120px;margin:16px auto 0}
.hero-rahmen .hero{width:100%;margin:0}
/* Großes Logo: sitzt in der Kopfzeile und ragt in die Bildwand */
header.top .wrap{justify-content:flex-end}
.logo-gross{position:absolute;left:-14px;top:-6px;width:140px;height:140px;border-radius:50%;background:#fff;padding:5px;box-shadow:0 0 0 6px rgba(255,255,255,.6),0 16px 36px rgba(15,25,40,.30);transition:width .3s ease,height .3s ease,top .3s ease,left .3s ease,padding .3s ease,transform .25s ease;z-index:3}
.logo-gross img{width:100%;height:100%}
.logo-gross:hover{transform:rotate(-4deg)}
header.top.gescrollt .logo-gross{width:76px;height:76px;top:-7px;left:10px;padding:3px}
.hero-rahmen .hero .wrap{padding-left:180px}
@media (max-width:1180px){.logo-gross{left:4px}}
@media (max-width:820px){
  header.top .wrap{justify-content:flex-end}
  .logo-gross{width:96px;height:96px;left:6px;top:-4px;padding:3px}
  header.top.gescrollt .logo-gross{width:62px;height:62px;top:-2px}
  .hero-rahmen .hero .wrap{padding-left:24px;padding-top:90px}
}

section{padding:60px 0}
section.hell{background:var(--karte)}
h2{font-size:24px;margin:0 0 6px;letter-spacing:-.2px}
.unter{color:var(--grau);margin:0 0 28px}

/* Nächste Spiele */
.naechste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.spielkarte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:20px 18px 18px;position:relative;overflow:hidden}
.spielkarte::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--rot)}
.spielkarte.ausw::before{background:#9aa4b0}
.spielkarte .datum{font-weight:700}
.spielkarte .team{font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.5px}
.spielkarte .paarung{margin:8px 0 6px;font-size:16px}
.spielkarte .ort{font-size:13px;color:var(--grau)}
.leer{color:var(--grau);font-style:italic}

/* Spielplan */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.chip{border:1px solid var(--linie);background:var(--karte);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px;color:var(--tinte)}
.chip.aktiv{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.filter label{font-size:14px;color:var(--grau);margin-left:auto;display:flex;gap:6px;align-items:center}
table.plan{width:100%;border-collapse:collapse;background:var(--karte);border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie);font-size:15px}
table.plan th{text-align:left;background:#eef2f6;font-weight:600;padding:10px 12px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--grau)}
table.plan td{padding:10px 12px;border-top:1px solid var(--linie);vertical-align:top}
table.plan tr.vorbei td{color:var(--grau)}
table.plan .wir{font-weight:700}
.erg{font-weight:700;white-space:nowrap;padding:2px 10px;border-radius:999px}
.erg.s{background:#e3f2e9;color:var(--gruen)}
.erg.n{background:#f8e3e1;color:var(--warn)}
.erg.u{background:#fbf0dc;color:var(--gelb)}
.monat td{background:#f5f7fa;font-weight:700;color:var(--rot);font-size:13px;text-transform:uppercase;letter-spacing:.6px}
@media (max-width:700px){
  table.plan thead{display:none}
  table.plan, table.plan tbody, table.plan tr, table.plan td{display:block;width:100%}
  table.plan tr{border-top:1px solid var(--linie);padding:8px 0}
  table.plan td{border:0;padding:2px 12px}
  table.plan td[data-l]::before{content:attr(data-l) ": ";color:var(--grau);font-size:13px}
}

/* Mannschaften */
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.teamkarte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);padding:18px;overflow:hidden}
.teamfoto{margin:-18px -18px 14px;aspect-ratio:3/2;background:#e6eef6;position:relative;overflow:hidden}
.teamfoto img{width:100%;height:100%;object-fit:cover;display:block}
.teamfoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;font-size:12.5px;line-height:1.35;color:#fff;background:linear-gradient(0deg,rgba(10,20,35,.75),rgba(10,20,35,0))}
.platzhalter{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#7d93aa;font-size:14px;
  background:repeating-linear-gradient(135deg,#e9f1f8 0 14px,#e2ebf4 14px 28px)}
.platzhalter svg{width:64px;height:64px;opacity:.85}
.teamkarte h3{margin:0 0 2px;font-size:19px}
.teamkarte .liga{color:var(--grau);font-size:15px;margin-bottom:10px}
.teamkarte .meta{font-size:14px}
.tag{display:inline-block;font-size:12px;background:var(--tinte);color:#fff;border-radius:999px;padding:2px 10px;margin-bottom:8px}
.tag.jug{background:var(--rot)}

/* Training / Info */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:820px){.zwei{grid-template-columns:1fr}}
.box{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:22px}
.box h3{margin-top:0}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:9px 0;border-bottom:1px solid var(--linie)}
ul.clean li:last-child{border:0}

/* Chronik */
.chronik{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.chronik figure{margin:0;background:#fff;padding:8px 8px 10px;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.08);cursor:zoom-in}
.chronik figure img{border-radius:14px;width:100%;height:230px;object-fit:cover;object-position:50% 20%}
.chronik figcaption{font-size:13px;color:var(--grau);padding-top:7px;line-height:1.35}
.chronik .g4{grid-column:span 4}.chronik .g6{grid-column:span 6}.chronik .g8{grid-column:span 8}
.chronik .g4.hoch img{height:330px}
@media (max-width:820px){.chronik figure{grid-column:span 12 !important}.chronik figure img{border-radius:14px;height:auto !important}}
.zeitleiste{border-left:3px solid var(--rot);padding-left:18px;margin:0 0 30px}
.zeitleiste p{margin:0 0 10px}
.zeitleiste b{color:var(--rot)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;cursor:zoom-out}
.lightbox.offen{display:flex}
.lightbox img{max-height:88vh;max-width:95vw}
.lightbox p{color:#fff;text-align:center}

footer{background:var(--tinte);color:#cfc8c2;padding:36px 0;font-size:14px}
footer a{color:#fff}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}

.banner{background:#fff4d6;border-bottom:1px solid #ecd9a0;color:#6b5114;font-size:14px;padding:8px 0;text-align:center}
.hinweis{background:#fff4d6;border:1px solid #ecd9a0;border-radius:var(--radius);padding:12px 16px;margin-bottom:20px}
section,[id]{scroll-margin-top:96px}
.hero .btn{margin-top:8px}

/* Menüleiste nur so breit wie das Menü – endet vor dem Logo */
header.top .wrap{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-end}
@media (min-width:821px){
  nav.menu{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--linie);border-radius:22px;box-shadow:0 8px 24px rgba(15,25,40,.10);padding:11px 12px;flex-wrap:nowrap}
}
@media (max-width:820px){
  .burger{background:rgba(255,255,255,.94);border:1px solid var(--linie);border-radius:18px;width:56px;height:56px;box-shadow:0 8px 24px rgba(15,25,40,.10)}
}

/* Bildwand schmaler, Fotos besser sichtbar */
.hero-rahmen{max-width:1000px}
header.top .wrap{max-width:1000px}
.kachel{filter:none}
.hero::after{background:linear-gradient(90deg,rgba(12,22,36,.82) 0%,rgba(12,22,36,.58) 40%,rgba(12,22,36,.10) 70%,rgba(12,22,36,0) 100%)}
.hero h1,.hero p{text-shadow:0 2px 10px rgba(0,0,0,.55)}
@media (max-width:820px){.hero::after{background:linear-gradient(180deg,rgba(12,22,36,.10) 0%,rgba(12,22,36,.62) 32%,rgba(12,22,36,.80) 100%)}}
@media (max-width:820px){ nav.menu{top:108px;z-index:4} }

/* Termine */
.termine{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.termin{display:flex;gap:16px;background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);padding:18px}
.termin .kal{flex:none;width:64px;height:68px;border-radius:14px;background:#14202e;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.termin .kal b{font-size:26px}
.termin .kal span{font-size:12px;text-transform:uppercase;letter-spacing:.8px;margin-top:5px;opacity:.85}
.termin.offen .kal{background:#fff;color:var(--grau);border:2px dashed #b9c4d0}
.termin h3{margin:2px 0 2px;font-size:18px}
.termin .twann{font-size:14px;color:var(--grau);font-weight:600}
.termin p{margin:8px 0 0;font-size:15px}
.tart{display:inline-block;font-size:11.5px;background:#e8f2fa;color:var(--rot);border-radius:999px;padding:2px 10px;font-weight:600}

/* Instagram in der Fußzeile */
footer .wrap{align-items:center}
footer a.insta{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 16px 8px 10px;border-radius:999px;transition:background .2s}
footer a.insta:hover{background:rgba(255,255,255,.16)}
footer a.insta .ikon{font-size:21px;flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}

/* Eigene Spielplan-Seite */
.mehr{margin:22px 0 0}
body.unterseite .seitenkopf{padding-top:84px}
body.unterseite .seitenkopf h1{font-size:clamp(30px,4.4vw,44px);margin:0 0 6px;letter-spacing:-.4px}
.zurueck{margin:0 0 6px;font-size:15px}
.zurueck a{text-decoration:none}
nav.menu a.aktiv{background:#e8f2fa;color:var(--rot);opacity:1}
.zeitwahl{display:inline-flex;background:#e9eef4;border-radius:999px;padding:4px;gap:2px;margin:0 0 10px;flex-wrap:wrap}
.zeitwahl button{border:0;background:none;padding:8px 16px;border-radius:999px;font-size:14px;cursor:pointer;color:var(--tinte)}
.zeitwahl button.aktiv{background:#fff;box-shadow:0 1px 4px rgba(15,25,40,.15);font-weight:600}
.anzahl{color:var(--grau);font-size:14px;margin:0 0 10px}
@media (max-width:820px){ body.unterseite .seitenkopf{padding-top:46px} }


/* Besucherzähler */
.zaehler{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:13px;color:#cfc8c2}
.zaehler b{color:#fff}
.zpunkt{width:8px;height:8px;border-radius:50%;background:#4cc38a;box-shadow:0 0 0 3px rgba(76,195,138,.25)}

/* Instagram-Symbol klein und schwarz-weiß */
footer a.insta{padding:6px 14px 6px 10px;gap:8px;font-size:14px}
footer a.insta .ikon{width:auto;height:auto;background:none;border-radius:0;font-size:17px;color:#fff}

/* Anmeldung für Mitglieder */
nav.menu a.login-btn{display:inline-flex;align-items:center;gap:7px;background:var(--tinte);color:#fff;opacity:1;font-weight:600;margin-left:6px}
nav.menu a.login-btn:hover{background:var(--rot);color:#fff}
@media (max-width:820px){ nav.menu a.login-btn{margin:8px 0 0;justify-content:center} }
@media (min-width:821px){ nav.menu{padding:9px 10px} nav.menu a{padding:7px 11px;font-size:14.5px} }
@media (min-width:821px) and (max-width:1120px){ nav.menu a.login-btn .lang{display:none} }
nav.menu a.login-btn .lang{margin-left:-3px}
@media (min-width:821px) and (max-width:1000px){ .logo-gross{width:108px;height:108px} nav.menu a{padding:7px 9px;font-size:14px} }

/* Mannschaftsfarben */
.tpunkt{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tf,#9aa4b0);margin-right:7px;vertical-align:1px;flex:none}
.spielkarte::before{background:var(--tf,var(--rot))}
.spielkarte.ausw::before{background:var(--tf,#9aa4b0)}
.spielkarte .team{color:var(--tf,var(--grau));font-weight:700}
.chip .tpunkt{width:9px;height:9px;margin-right:6px}
.chip.aktiv[style*="--tf"]{background:var(--tf);border-color:var(--tf)}
.chip.aktiv .tpunkt{background:#fff}
table.plan tr[style*="--tf"] td:first-child{box-shadow:inset 4px 0 0 var(--tf)}
.teamkarte[style*="--tf"]{border-top:5px solid var(--tf)}
.teamkarte[style*="--tf"] .teamfoto{margin-top:-18px}

/* Mannschaftskarten kompakt: Text links, Foto rechts */
.teams{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.teamkarte{display:grid;grid-template-columns:1fr 128px;grid-auto-rows:min-content;column-gap:14px;padding:14px 14px 14px 16px;align-content:start}
.teamkarte > :not(.teamfoto){grid-column:1}
.teamkarte > .teamfoto{grid-column:2;grid-row:1 / span 5;margin:0 !important;aspect-ratio:4/3;border-radius:12px;align-self:start}
.teamkarte .tag{justify-self:start;margin-bottom:4px}
.teamkarte h3{font-size:17px}
.teamkarte .liga{font-size:14px;margin-bottom:6px}
.teamkarte .meta{font-size:13px;line-height:1.5}
.teamfoto figcaption{display:none}
.teamkarte .platzhalter{gap:4px;font-size:11px;text-align:center;padding:4px}
.teamkarte .platzhalter svg{width:30px;height:30px}
@media (max-width:420px){ .teamkarte{grid-template-columns:1fr 100px} }
.teamkarte{grid-template-columns:minmax(0,1fr) 128px}
.teamkarte > .teamfoto{grid-row:1 / span 3}
.teamkarte > .meta{grid-column:1 / -1;margin-top:8px;padding-top:8px;border-top:1px solid var(--linie)}
.teamkarte .liga{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:420px){ .teamkarte{grid-template-columns:minmax(0,1fr) 100px} }

/* Angepinnte Termine unter der Bildwand: schmales Band, so breit wie der Bilderrahmen */
section.angepinnt{padding:14px 0 0}
.pinrahmen{width:calc(100% - 32px);max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.pin-note{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:12px 18px 12px 12px;border-radius:18px;text-decoration:none;color:var(--tinte);
  background:color-mix(in srgb,var(--c) 9%,#fff);border:1px solid color-mix(in srgb,var(--c) 30%,#fff);border-left:5px solid var(--c);box-shadow:0 8px 22px rgba(15,25,40,.10);transition:transform .2s,box-shadow .2s}
.pin-note:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,25,40,.16)}
.pin-note:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.pin-note__pin{flex:none;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;transform:rotate(-20deg);box-shadow:0 3px 8px color-mix(in srgb,var(--c) 45%,transparent)}
.pin-note__pin svg{width:18px;height:18px}
.pin-note__label{flex:none;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--c)}
.pin-note strong{font-size:17px}
.pin-note__text{flex:1 1 240px;min-width:0;font-size:14.5px;color:var(--grau)}
.termin.gepinnt{background:var(--karte);border:2px solid #ffd23f;box-shadow:0 6px 18px rgba(15,25,40,.08)}
.pinmarke{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:#1d1b1a;background:#ffd23f;border-radius:999px;padding:2px 9px;margin-right:6px;text-transform:uppercase;letter-spacing:.5px}

/* Überschrift in der Bildwand: eine Zeile, etwas kleiner */
.hero h1{font-size:clamp(24px,3.6vw,40px);white-space:nowrap}
.hero-text{max-width:none}
.hero p{max-width:560px}
@media (max-width:520px){.hero h1{white-space:normal}}

/* Dialekt-Begrüßung über der Überschrift */
.hero p.gruss-datum{font-size:14px;margin:0 0 4px;opacity:.85;letter-spacing:.2px}
.hero p.gruss{font-size:clamp(20px,2.6vw,28px);font-weight:800;margin:0 0 10px;opacity:1;color:#ffd23f}

/* Sponsoren */
.sp-gruppe{margin-top:30px}
.sp-gruppe h2{font-size:22px;margin:0 0 14px}
.sp-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sp-haupt .sp-raster{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.sp-karte{display:flex;gap:16px;align-items:center;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:16px;color:var(--tinte);text-decoration:none;transition:box-shadow .2s,transform .2s;min-width:0}
a.sp-karte:hover{box-shadow:0 8px 22px rgba(15,25,40,.10);transform:translateY(-1px)}
.sp-haupt .sp-karte{border-top:5px solid #ffd23f;padding:20px}
.sp-logo{flex:none;width:96px;height:72px;border-radius:12px;background:#f5f7fa;display:grid;place-items:center;overflow:hidden}
.sp-haupt .sp-logo{width:140px;height:96px}
.sp-logo img{max-width:88%;max-height:84%;object-fit:contain}
.sp-kuerzel{font-size:26px;font-weight:800;color:#7d93aa;letter-spacing:1px}
.sp-info{min-width:0}
.sp-info h3{margin:0 0 2px;font-size:17px}
.sp-info p{margin:0 0 4px;font-size:14px;color:var(--grau)}
.sp-link{font-size:13px;color:var(--rot);font-weight:600;overflow-wrap:anywhere}
.sp-werden{margin-top:44px;display:flex;gap:20px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#14202e;color:#fff;border-radius:24px;padding:26px 28px}
.sp-werden h2{margin:0 0 6px;font-size:24px}
.sp-werden p{margin:0 0 6px;max-width:62ch;opacity:.92}
.sp-werden .sp-kontakt{font-size:14px;opacity:.8}
.sp-werden > div{flex:1 1 320px;min-width:0}

/* Sponsoren: Dankeschön + Logowand */
.sp-danke{max-width:760px}
.sp-danke h1{margin-bottom:10px}
.sp-danke p{font-size:18px;color:var(--grau);margin:0 0 30px}
.sp-danke p b{color:var(--tinte)}
.sp-wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.sp-kachel{position:relative;aspect-ratio:3/2;max-width:100%;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);display:grid;place-items:center;padding:18px;text-decoration:none;color:var(--tinte);transition:box-shadow .2s,transform .2s}
.sp-kachel.haupt{grid-column:span 2;aspect-ratio:auto;min-height:150px;border-top:4px solid #ffd23f}
@media (max-width:480px){.sp-kachel.haupt{grid-column:auto}}
a.sp-kachel:hover{box-shadow:0 8px 22px rgba(15,25,40,.10);transform:translateY(-2px)}
.sp-kachel img{max-width:100%;max-height:100%;object-fit:contain}
.sp-name{font-weight:800;font-size:19px;text-align:center;color:#4a5a6e}
.sp-wand .leer{grid-column:1/-1}
.sp-bsp{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:#eef2f6;color:var(--grau);border-radius:999px;padding:2px 8px}
.sp-kachel,.sp-kachel.haupt{aspect-ratio:auto;height:170px;min-height:0}
.sp-kachel img{width:100%;height:100%}
.sp-kachel{display:flex;align-items:center;justify-content:center;overflow:hidden}
.sp-kachel img{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0}

/* Inhaltsbreite = Breite der Bildwand (max. 1000 px, 16 px Rand) */
.wrap{max-width:1032px;padding-left:16px;padding-right:16px}

/* Pin-Balken etwas flacher */
.pin-note{padding:7px 16px 7px 9px;gap:2px 10px;border-radius:14px}
.pin-note__pin{width:26px;height:26px}
.pin-note__pin svg{width:14px;height:14px}
.pin-note__label{font-size:11px}
.pin-note strong{font-size:15.5px}
.pin-note__text{font-size:13.5px}
.pin-note{padding:9px 18px 9px 10px}
.pin-note__pin{width:30px;height:30px}
.pin-note__pin svg{width:16px;height:16px}
.pin-note strong{font-size:16px}
.pin-note__text{font-size:14px}
/* Weniger Abstand zwischen Bildwand/Pin-Balken und „Nächste Spiele“ */
section#spiele{padding-top:30px}

/* Training & Spiellokale: zwei gleich große Karten */
.infokarten{align-items:stretch;gap:20px}
.infokarte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ik-kopf{display:flex;gap:14px;align-items:center}
.ik-kopf h2{margin:0}
.ik-kopf .unter{margin:2px 0 0;font-size:15px}
.ik-icon{flex:none;width:44px;height:44px;border-radius:12px;background:#e8f2fa;color:var(--rot);display:grid;place-items:center}
.ik-icon svg{width:22px;height:22px}
.infokarte ul.clean li{padding:10px 0}
.infokarte ul.clean li:first-child{padding-top:0}
.ik-hinweis{margin:auto 0 0;font-size:14px;color:var(--grau);background:var(--karte);border-radius:12px;padding:10px 14px}

/* Fußzeile in Dunkelgrau statt Schwarz */
footer{background:#3d4651;color:#d5dbe2}
footer .zaehler{color:#d5dbe2}
footer a.insta{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
body{min-height:100vh;display:flex;flex-direction:column}
body > *{flex-shrink:0}
footer{margin-top:auto}

/* Sprüche-Banner mit Ballwechsel */
section.sprueche{padding:0 0 10px}
.spr-rahmen{width:calc(100% - 32px);max-width:1000px;margin:0 auto;background:#14202e;border-radius:28px;padding:34px 40px 0;color:#fff;overflow:hidden;box-shadow:0 14px 36px rgba(15,25,40,.18);position:relative}
.spr-text{margin:0 auto;min-height:3.1em;max-width:760px;text-align:center;font-size:clamp(20px,2.6vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.2px;display:flex;align-items:center;justify-content:center;perspective:600px}
.spr-text::before,.spr-text::after{color:#ffd23f;font-size:1.3em;line-height:0;position:relative;top:.12em}
.spr-text::before{content:"„";margin-right:.15em}
.spr-text::after{content:"“";margin-left:.1em}
.spr-text.raus{animation:sprRaus .38s ease-in forwards}
.spr-text.rein{animation:sprRein .7s cubic-bezier(.2,.9,.25,1.25)}
@keyframes sprRaus{to{opacity:0;transform:translateY(-16px) scale(.96)}}
@keyframes sprRein{from{opacity:0;transform:translateY(22px) rotateX(75deg)}to{opacity:1;transform:none}}
/* Mini-Tisch */
.spr-tisch{position:relative;height:74px;margin:14px -40px 0;border-bottom:10px solid #1f6f9f}
.spr-tisch::before{content:"";position:absolute;left:44px;right:44px;bottom:0;height:3px;background:rgba(255,255,255,.75);border-radius:2px}
.spr-netz{position:absolute;left:50%;bottom:0;width:3px;height:18px;margin-left:-1.5px;background:rgba(255,255,255,.85);border-radius:2px}
.spr-schlaeger{position:absolute;bottom:6px;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.spr-schlaeger::after{content:"";position:absolute;left:50%;top:26px;width:8px;height:20px;margin-left:-4px;background:#8a5a2b;border-radius:3px}
.spr-schlaeger.links{left:12px;background:#d1495b;transform:rotate(-25deg)}
.spr-schlaeger.rechts{right:12px;background:#222;transform:rotate(25deg)}
.spr-bahn{position:absolute;left:44px;right:58px;bottom:3px;height:0;animation:sprQuer 1.4s linear infinite alternate}
.spr-ball{position:absolute;left:0;bottom:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,210,63,.55);animation:sprHoch 1.4s linear infinite}
@keyframes sprQuer{from{transform:translateX(0)}to{transform:translateX(100%)}}
/* Bogen: vom Schläger über das Netz und zurück */
@keyframes sprHoch{0%{transform:translateY(-20px);animation-timing-function:ease-out}38%{transform:translateY(-58px);animation-timing-function:ease-in}75%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(-20px)}}
@media (max-width:640px){.spr-rahmen{padding:26px 20px 0;border-radius:22px}.spr-tisch{margin:10px -20px 0}}
@media (prefers-reduced-motion:reduce){.spr-bahn,.spr-ball{animation:none}.spr-text.rein,.spr-text.raus{animation:none}}
.spr-text{display:grid;place-items:center}
.spr-text::before,.spr-text::after{content:none}
.spr-text span::before{content:"„";color:#ffd23f;margin-right:.08em}
.spr-text span::after{content:"“";color:#ffd23f;margin-left:.04em}

/* Sprüche-Banner: weiß, schwarze Schrift, flacher */
.spr-rahmen{background:#fff;color:#1d1b1a;border:1px solid var(--linie);box-shadow:0 8px 22px rgba(15,25,40,.08);padding:16px 40px 0;border-radius:22px}
.spr-text{min-height:2.7em;font-size:clamp(18px,2.1vw,23px)}
.spr-text span::before,.spr-text span::after{color:var(--rot)}
.spr-tisch{height:52px;margin-top:6px;border-bottom-width:8px}
.spr-tisch::before{background:#1f6f9f;opacity:.55}
.spr-netz{height:14px;background:#5a6370}
.spr-schlaeger{width:24px;height:24px;bottom:4px;box-shadow:none}
.spr-schlaeger::after{top:20px;height:16px;width:7px;margin-left:-3.5px}
.spr-ball{width:12px;height:12px;background:#ff8a1f;box-shadow:0 2px 6px rgba(255,138,31,.45)}
@keyframes sprHoch{0%{transform:translateY(-14px);animation-timing-function:ease-out}38%{transform:translateY(-40px);animation-timing-function:ease-in}75%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(-14px)}}
@media (max-width:640px){.spr-rahmen{padding:14px 20px 0}}
@media (max-width:640px){.spr-tisch{margin-top:16px}}
/* Sprüche-Banner nur noch mit Text */
.spr-rahmen{padding:18px 40px}
.spr-text{min-height:2.6em}
@media (max-width:640px){.spr-rahmen{padding:14px 20px}}
/* Sprüche zweigeteilt: Sprechblase links, Tischtennis-Männchen rechts */
.spr-rahmen{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px;padding:16px 28px 16px 24px}
.spr-text{position:relative;justify-items:start;text-align:left;margin:0;max-width:none;background:#f3f6f9;border-radius:20px;padding:14px 22px;min-height:2.6em}
.spr-text::after{content:"";position:absolute;right:-12px;top:50%;margin-top:-10px;border:10px solid transparent;border-left:14px solid #f3f6f9;border-right:0}
.spr-maennchen{width:118px;height:136px;flex:none}
.spr-maennchen svg{width:100%;height:100%;overflow:visible}
.mn-arm{transform-origin:80px 66px;animation:mnSchlag 1.6s ease-in-out infinite}
.mn-ball{animation:mnBall 1.6s ease-in-out infinite}
@keyframes mnSchlag{0%,100%{transform:rotate(0)}45%{transform:rotate(-14deg)}55%{transform:rotate(6deg)}}
@keyframes mnBall{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (max-width:640px){.spr-rahmen{gap:6px 14px;padding:12px 14px}.spr-text{padding:12px 16px}.spr-maennchen{width:74px;height:86px}}
@media (prefers-reduced-motion:reduce){.mn-arm,.mn-ball{animation:none}}
.mn-arm{transform-origin:58px 58px}
.spr-maennchen{width:108px;height:146px}
.mn-arm{transform-origin:71px 86px}
@media (max-width:640px){.spr-maennchen{width:70px;height:94px}}
/* Wechselnde Männchen */
.spr-maennchen.raus{animation:sprRaus .38s ease-in forwards}
.spr-maennchen.rein{animation:mnRein .6s cubic-bezier(.2,.9,.25,1.3)}
@keyframes mnRein{from{opacity:0;transform:translateY(24px) scale(.85)}to{opacity:1;transform:none}}
.mn-schlag{transform-origin:71px 86px;animation:mnSchlag 1.6s ease-in-out infinite}
.mn-hoch{animation:mnBall 1.8s ease-in-out infinite}
.mn-wipp{transform-origin:80px 104px;animation:mnWipp 2s ease-in-out infinite}
.mn-jubel{transform-origin:58px 86px;animation:mnJubel .9s ease-in-out infinite}
.mn-zuck{animation:mnZuck 1.6s ease-in-out infinite}
@keyframes mnWipp{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes mnJubel{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mnZuck{0%,60%,100%{transform:translateY(0)}75%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.mn-schlag,.mn-hoch,.mn-wipp,.mn-jubel,.mn-zuck,.spr-maennchen.rein,.spr-maennchen.raus{animation:none}}
/* Sprüche ohne weißen Rahmen, flacher */
.spr-rahmen{background:none;border:0;box-shadow:none;padding:4px 8px 4px 0;gap:4px 18px}
.spr-text{background:#fff;border:1px solid var(--linie);padding:12px 22px;min-height:0;font-size:clamp(17px,1.9vw,21px)}
.spr-text::after{border-left-color:#fff;filter:drop-shadow(1px 0 0 var(--linie))}
.spr-maennchen{width:76px;height:102px}
@media (max-width:640px){.spr-rahmen{padding:4px 0}.spr-maennchen{width:60px;height:81px}.spr-text{padding:10px 14px}}
.spr-maennchen{width:104px;height:140px}
@media (max-width:640px){.spr-maennchen{width:78px;height:105px}}
.seitenkopf .infokarte{background:var(--karte)}
.seitenkopf .ik-hinweis{background:var(--papier)}
.infokarten.einzeln{display:block;max-width:560px}
.ik-nr{margin:0;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--rot)}
.ik-adr{margin:0;font-size:16px}
.infokarte .btn{align-self:flex-start;margin-top:auto}

/* Nächste Spiele: kompaktere Karten, Datum + Uhrzeit in einer Zeile */
.spielkarte{padding:14px 14px 12px}
.spielkarte .team{font-size:11.5px}
.spielkarte .datum{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.spielkarte .paarung{font-size:15px;margin:6px 0 4px;line-height:1.4}
.spielkarte .ort{font-size:12.5px}
section.angepinnt{padding-top:22px}
/* Sprüche: Sprechblase transparent, normale Schrift */
.spr-text{background:transparent;border:0;font-weight:400;padding:4px 0}
.spr-text::after{display:none}
/* Männchen kleiner und direkt neben dem Spruch, beides mittig */
.spr-rahmen{grid-template-columns:minmax(0,max-content) auto;justify-content:center;gap:4px 12px}
.spr-text{max-width:720px}
.spr-maennchen{width:80px;height:108px}
@media (max-width:640px){.spr-rahmen{grid-template-columns:minmax(0,1fr) auto}.spr-maennchen{width:62px;height:84px}}
.spr-text{font-size:clamp(15px,1.5vw,17px)}
.spr-maennchen{width:62px;height:84px}
@media (max-width:640px){.spr-maennchen{width:50px;height:68px}}

/* Gesamte Seite breiter: 1200 px statt 1000 px */
.hero-rahmen,.pinrahmen,.spr-rahmen{max-width:1200px}
header.top .wrap{max-width:1200px}
.wrap{max-width:1232px}
.hero-rahmen .hero{max-width:none}

/* Nächste Spiele: Balken immer Vereinsblau, nur der Punkt in der Mannschaftsfarbe */
.spielkarte::before,.spielkarte.ausw::before{background:var(--rot)}
.spielkarte .team{color:var(--grau);display:flex;align-items:center}
.spielkarte .tpunkt{width:14px;height:14px;margin-right:8px;vertical-align:0}
/* Spruch etwas höher als die Mitte des Männchens */
.spr-text{position:relative;top:-10px}
.spr-text{top:-18px}
.spr-text{top:-30px}
.spr-maennchen{position:relative;top:-30px}
.spr-rahmen{overflow:visible}
.teamkarte[style*="--tf"]{border-top-color:#d3d8de}
.spielkarte::before,.spielkarte.ausw::before{background:#d3d8de}
/* Sprechblase für Ricco */
.spr-text.blase span{position:relative;display:inline-block;background:#fff;border:2.5px solid #151515;border-radius:20px;padding:8px 16px;font-weight:600}
.spr-text.blase span::before{content:none}
.spr-text.blase span::after{content:"";position:absolute;right:-13px;top:50%;margin:-8px 0 0;width:14px;height:14px;background:#fff;border-right:2.5px solid #151515;border-bottom:2.5px solid #151515;transform:rotate(-45deg) skew(10deg,10deg);border-radius:0 0 3px 0}
.mn-wink{transform-origin:71px 86px;animation:mnWink 1s ease-in-out infinite}
@keyframes mnWink{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.mn-wink{animation:none}}
.spielkarte::before,.spielkarte.ausw::before{background:#b3bbc5}
/* Platzhalter mit Kritzel-Männchen */
.platzhalter svg.mn-team{width:78%;height:auto;max-height:70%;opacity:1}
.teamkarte .platzhalter svg.mn-team{width:88%;height:auto;max-height:72%}
.platzhalter svg.mn-team{width:62%}.teamkarte .platzhalter svg.mn-team{width:70%}
.spielkarte::before,.spielkarte.ausw::before{background:#8a949f}
.mn-schlag.mn-links{transform-origin:46px 86px;animation-direction:reverse}
.spr-text.blase span{font-weight:400;font-size:inherit}
/* Spielplan auf dem Handy kompakt: Datum · Zeit · Mannschaft / Heim – Gast · Ort */
@media (max-width:700px){
  table.plan tr:not(.monat){display:block;padding:9px 12px 10px 14px;border-left:4px solid var(--tf,transparent);line-height:1.45}
  table.plan tr:not(.monat) td{display:inline;width:auto;padding:0;box-shadow:none!important}
  table.plan tr:not(.monat) td[data-l]::before{content:none}
  table.plan td[data-l="Datum"],table.plan td[data-l="Zeit"]{font-weight:700}
  table.plan td[data-l="Zeit"]::before{content:" · "!important;font-weight:700;color:inherit;font-size:inherit}
  table.plan td[data-l="Mannschaft"]{font-size:13px;color:var(--grau);margin-left:8px;white-space:nowrap}
  table.plan td[data-l="Heim"]::before{content:"\A"!important;white-space:pre}
  table.plan td[data-l="Gast"]::before{content:" – "!important;font-weight:400;color:var(--grau);font-size:inherit}
  table.plan td[data-l="Ort"]{font-size:13px;color:var(--grau)}
  table.plan td[data-l="Ort"]::before{content:" · "!important;font-size:inherit;color:inherit}
}
@media (max-width:700px){table.plan td[data-l="Ort"]{white-space:nowrap}}