/* ============================================================================
   TEAMS-ÜBERSICHT (Design V2) — baut auf design-v2.css, team-v2.css (.th-hero) und kader-v2.css (.kd-hero, .kf-Chips) auf
   Aufbau: kompakter Hero "TEAMS" + Sprung-Chips · rote Bühne für die 1. Herren (Mannschaftsfoto) · Erwachsene (große rote Kacheln)
   · Jugend (weiße Kacheln) · Mitglieder-Banner
   ============================================================================ */
.tm-bar{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;padding-top:44px;padding-bottom:6px;}
.tm-lead{font-size:18px;line-height:1.5;color:rgba(255,255,255,.9);max-width:46ch;margin-top:22px;}
.tm-main{padding-bottom:110px;}
.tm-sec{padding-top:72px;scroll-margin-top:96px;}
.tm-sec:first-child{padding-top:54px;}
.tm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;margin-bottom:30px;border-bottom:3px solid var(--ink);padding-bottom:12px;}
.tm-head h2{font-family:var(--font-impact);font-weight:400;font-size:clamp(34px,3.6vw,48px);text-transform:uppercase;letter-spacing:.012em;line-height:1;display:flex;align-items:baseline;gap:16px;}
.tm-head h2 .n{font-family:var(--font-label);font-size:20px;letter-spacing:.14em;color:var(--brand-red);}

/* ---------- Rote Bühne: 1. Herren ---------- */
.tm-stage{position:relative;isolation:isolate;overflow:hidden;background:var(--hero-red);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:stretch;}
.tm-stage .nb{padding:40px 24px 40px 52px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;z-index:2;}
.tm-stage .cat{font-family:var(--font-label);font-size:clamp(16px,1.5vw,20px);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.88);display:flex;flex-wrap:wrap;gap:.2em .8em;align-items:center;}
.tm-stage .cat i{width:2px;height:1em;background:currentColor;opacity:.55;}
.tm-stage h3{font-family:var(--font-impact);font-weight:400;font-size:clamp(60px,7.4vw,104px);line-height:.88;text-transform:uppercase;letter-spacing:.004em;}
.tm-stage h3 a{color:#fff;}
.tm-stage .meta{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88);}
.tm-stage .meta b{font-weight:700;color:#fff;}
.tm-stage .rw{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:10px;}
.tm-stage .nf{position:relative;aspect-ratio:16/9;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,36px 100%,0 calc(100% - 36px));}   /* Foto im Originalformat 16:9 (Titel und Logos im Bild bleiben sichtbar), Diagonalschnitt unten links */
.tm-stage .nf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.tm-stage:hover .nf img{transform:scale(1.03);}
/* Button auf der Bühne: wie im Mitglieder-Banner (Elfenbein, dunkelrote Rückebene) */
[data-design="v2"] .tm-stage .btn-primary{color:var(--hero-red);}
[data-design="v2"] .tm-stage .btn-primary::after{background:var(--ivory);clip-path:var(--shape);}
[data-design="v2"] .tm-stage .btn-primary::before{background:var(--hero-red-deep);}

/* ---------- Kacheln (Diagonalschnitt + Versatz) ---------- */
.tc{--tc-c:26px;--tc-o:8px;--tshape:polygon(0 0,calc(100% - var(--tc-c)) 0,100% var(--tc-c),100% 100%,var(--tc-c) 100%,0 calc(100% - var(--tc-c)));
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);transition:transform .16s ease;}
.tc::after,.tc::before{content:"";position:absolute;inset:0;clip-path:var(--tshape);}
.tc::after{z-index:-2;background:var(--surface);transition:background .2s ease;}
.tc::before{z-index:-3;background:var(--btn-back);transform:translate(var(--tc-o),var(--tc-o));transition:transform .16s ease;}
.tc:hover{transform:translate(-2px,-2px);}
.tc:hover::before{transform:translate(calc(var(--tc-o) + 2px),calc(var(--tc-o) + 2px));}
.tc .mh-noise{clip-path:var(--tshape);}
.tc .lab{font-family:var(--font-label);font-size:16px;letter-spacing:.16em;text-transform:uppercase;line-height:1.1;}
.tc .nm{font-family:var(--font-impact);font-weight:400;text-transform:uppercase;letter-spacing:.006em;line-height:.9;}
.tc .go{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:17px;letter-spacing:.12em;text-transform:uppercase;}
.tc .go svg{width:1.1em;height:1.1em;transition:transform .2s ease;}
.tc:hover .go svg{transform:translateX(4px);}

/* Erwachsene / Amateure: große rote Kacheln (dieselbe Klasse für beide Abschnitte) */
.tm-adults{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
/* Eine einzelne Kachel (z.B. Amateure, bisher nur 1 Team) füllt die Zeile, statt halb leer zu bleiben. */
.tm-adults .tc.big:only-child{grid-column:1 / -1;}
.tc.big{min-height:290px;padding:26px 28px 28px;color:#fff;}
.tc.big::after{background:radial-gradient(85% 135% at 76% 26%,#a91330 0%,#8c0a2c 44%,#650620 100%);}
.tc.big .lab{color:rgba(255,255,255,.85);}
.tc.big .nm{font-size:clamp(58px,6.6vw,92px);}
.tc.big .sub{display:block;font-family:var(--font-label);font-size:clamp(20px,2vw,28px);letter-spacing:.14em;text-transform:uppercase;margin-top:8px;opacity:.9;}
.tc.big .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;}
.tc.big .liga{font-size:14px;color:rgba(255,255,255,.85);}

/* Jugend: weiße Kacheln */
.tm-note{font-size:15px;color:var(--ink-soft);max-width:70ch;margin:-6px 0 30px;}
.tm-youth{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 28px;}
.tc.sm{--tc-c:20px;--tc-o:6px;min-height:170px;padding:22px 24px 22px;}
.tc.sm .nm{font-size:clamp(30px,8.4vw,56px);margin-top:10px;}
.tc.sm .lab{color:var(--ink-muted);}
.tc.sm .go{color:var(--brand-red);}
.tc.sm:hover::after{background:var(--brand-red);}
.tc.sm:hover .lab,.tc.sm:hover .go,.tc.sm:hover .nm{color:#fff;}

/* Mitglieder-Banner (Basis wie Startseite) */
/* margin:-28px oben UND unten (nicht nur oben) — sonst bleibt an der unteren linken Ecke ein
   heller Spalt zwischen Banner und Footer, weil der Diagonalschnitt dort 28px wegschneidet und
   ohne Überlappung der Footer nicht darunter durchschimmert. So macht es startseite-matchday.html
   (dortige eigene .cta-banner-Regel) — hier angeglichen, siehe DESIGN.md. */
.cta-banner{position:relative;overflow:hidden;color:#fff;clip-path:polygon(0 28px,100% 0,100% 100%,0 calc(100% - 28px));padding:96px 0;margin:-28px 0;}
.cta-inner{max-width:var(--max);margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}

@media (max-width:1000px){
  .tm-stage{grid-template-columns:1fr;}
  .tm-stage .nb{padding:36px 28px 30px;}
  .tm-stage .nf{order:2;clip-path:none;}
  .tm-youth{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  .tm-adults{grid-template-columns:1fr;gap:26px;}
  .tc.big{min-height:230px;--tc-c:20px;--tc-o:6px;}
  .tm-youth{gap:24px 18px;}
  .tc.sm{min-height:150px;padding:18px 18px 18px;}
  .tm-sec{padding-top:56px;}
  .cta-banner{padding:76px 0;}
}
@media (max-width:340px){.tm-youth{grid-template-columns:1fr;}}