/* ============================================================
   TS Mosbach — Grundlagen
   Schriften liegen lokal in website/fonts/. Bewusst KEIN Google
   Fonts: sonst bräuchte die Seite ein Einwilligungsbanner.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter_n4.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter_n5.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter_n7.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter_i4.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter_i5.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter_i7.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  --ts-rot: #ed1e26;
  --ts-rot-dunkel: #b9161d;
  --ts-schwarz: #050506;
  --ts-anthrazit: #101114;
  --ts-weiss: #ffffff;
  --ts-grau: #c9ccd2;
  --ts-schrift: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Falle 14: nie 100vw benutzen, sonst scrollt die Seite seitwärts. */
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ts-schwarz);
  color: var(--ts-weiss);
  font-family: var(--ts-schrift);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; }
a { color: inherit; }

/* Tastaturbedienung sichtbar lassen */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ts-rot);
  outline-offset: 2px;
}

/* Sprungmarke für Screenreader und Tastatur */
.ts-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ts-rot); color: #fff; padding: 12px 20px;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.ts-skip:focus { left: 0; }

/* Fehlende Kundendaten fallen sofort auf und werden von pruefen.js gemeldet */
.ts-luecke {
  background: #ffe100; color: #111; padding: 1px 7px; border-radius: 4px;
  font-weight: 700; white-space: nowrap;
}

/* ------------------------------------------------------------
   KI-Kennzeichnung direkt am Bild
   Art. 50 Abs. 4 KI-VO (EU) 2024/1689, anwendbar seit 02.08.2026.
   Die Spielerbilder sind mit KI erzeugte beziehungsweise veränderte
   Darstellungen real benannter Personen. Ein Hinweis im Impressum
   allein reicht dafür nicht, die Marke muss am Bild stehen.
   Erzeugt wird sie an genau zwei Stellen:
     _build/seiten/spieler.js  (Profilseite, unten rechts)
     _build/gen.js, karte()    (Kader-Karussell, oben rechts)
   ------------------------------------------------------------ */
.ts-ki-bild {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  line-height: 0;
}
.ts-ki-bild > img { display: block; }

.ts-ki-marke {
  position: absolute;
  z-index: 7;
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(5, 5, 6, .86);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-family: var(--ts-schrift);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Spielerprofil: unten rechts am Bild */
.ts-ki-bild > .ts-ki-marke { right: 8px; bottom: 10px; }

/* Kader-Karte: oben rechts, unten stehen Nummer, Name und Position */
.ts-player-media > .ts-ki-marke { top: 10px; right: 10px; }