/* Gemeinsame Thumbnail-Styles für Website, Portale, TV-Ansicht und Admin-Vorschau.
   Erwartet die Variablen --ink, --ink-2, --live (setzt die jeweilige Seite). */
.court { display: block; width: 100%; height: 100%; }
/* =========================================================
   Thumbnail-System (app/thumbs.php)
   Ebenen: Hintergrund → unscharfer Übergang → Verlauf → Logos
   Passt sich über Container-Abfragen an Quer- und Hochformat an.
   ========================================================= */
.th { position: absolute; inset: 0; overflow: hidden; container: th / size; background: var(--ink-2); isolation: isolate; }
.th img { max-width: none; }
.th-bg, .th-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fxl, 50%) var(--fyl, 50%); }
.th-blur { filter: blur(16px) saturate(1.1); transform: scale(1.12); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 52%, #000 88%); mask-image: linear-gradient(to bottom, transparent 52%, #000 88%); }
.th-shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 38%, color-mix(in srgb, var(--ink) 55%, transparent) 70%, var(--ink) 100%),
              radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.28) 100%); }
.th--noimg .th-shade { background: linear-gradient(to bottom, transparent 55%, var(--ink) 100%); }
.th-court { position: absolute; inset: 0; }
.th-court .court { width: 100%; height: 100%; }
.th--img.th--single .th-shade, .th--img.th--duo .th-shade, .th--img.th--vs .th-shade {
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 40%, color-mix(in srgb, var(--ink) 60%, transparent) 72%, var(--ink) 100%); }
/* VS ohne Bild: diagonal geteilte Fläche in den Vereinsfarben */
.th-split { position: absolute; inset: 0; background: linear-gradient(103deg, var(--c-home) 0 50%, var(--c-away) 50% 100%); }
.th-split::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.08), transparent 60%); }

/* Logos – Anordnung nach Vorlage: Vereine groß links und rechts, Wettbewerb klein unten mittig, ohne Hintergrund.
   --ls / --cs = Größenfaktoren aus dem Backend (Vereinslogos / Wettbewerbslogo) */
.th-logos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.th-logo { position: absolute; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); }
.th-home { --s: var(--hs, 1); } .th-away { --s: var(--as, 1); } .th-comp { --s: var(--s, 1); }

/* Hintergrund wird leicht unscharf, sobald Logos darauf liegen – die Logos tragen das Bild */
.th--img.th--single .th-bg, .th--img.th--duo .th-bg, .th--img.th--vs .th-bg { filter: blur(var(--blur, 5px)) saturate(1.08) brightness(.82); transform: scale(1.08); }

/* Ein Logo: mittig */
.th--single .th-logo { left: 50%; top: 45%; width: calc(44% * var(--s, 1)); height: calc(54% * var(--s, 1)); }

/* Wettbewerb + ein Team: Team mittig, Wettbewerb klein darunter */
.th--duo .th-home, .th--duo .th-away { left: 50%; top: 42%; width: calc(40% * var(--s, 1)); height: calc(50% * var(--s, 1)); }
.th--duo .th-comp { left: 50%; top: 82%; width: calc(20% * var(--s, 1)); height: calc(15% * var(--s, 1)); }

/* Zwei Teams: groß links und rechts, vollständig sichtbar */
.th--vs .th-home, .th--vs .th-away { top: 45%; width: calc(34% * var(--s, 1)); height: calc(60% * var(--s, 1)); }
.th--vs .th-home { left: 25%; }
.th--vs .th-away { left: 75%; }
.th--vs .th-comp { left: 50%; top: 83%; width: calc(15% * var(--s, 1)); height: calc(16% * var(--s, 1)); z-index: 2; }

/* Hochformat (Bühne, Handy): Plakat-Anordnung */
@container th (aspect-ratio < 1) {
  .th-bg, .th-blur { object-position: var(--fxp, 50%) var(--fyp, 50%); }
  .th--single .th-logo { top: 55%; width: calc(72% * var(--s, 1)); height: calc(38% * var(--s, 1)); }
  .th--duo .th-home, .th--duo .th-away { top: 50%; width: calc(66% * var(--s, 1)); height: calc(38% * var(--s, 1)); }
  .th--duo .th-comp { top: 78%; width: calc(36% * var(--s, 1)); height: calc(12% * var(--s, 1)); }
  .th--vs .th-home, .th--vs .th-away { top: 53%; width: calc(46% * var(--s, 1)); height: calc(34% * var(--s, 1)); }
  .th--vs .th-home { left: 26%; }
  .th--vs .th-away { left: 74%; }
  .th--vs .th-comp { top: 77%; width: calc(32% * var(--s, 1)); height: calc(12% * var(--s, 1)); }
  .th-split { background: linear-gradient(90deg, var(--c-home) 0 50%, var(--c-away) 50% 100%); }
}

/* YouTube-Modus: YouTube-Bild, Logos rechts gestapelt in gleicher Größe */
.th--yt .th-logos { left: auto; right: 3.5cqw; top: 5cqh; bottom: auto; display: flex; flex-direction: column; gap: 0; border-radius: 1.6cqh; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.4); }
.th-ytbox { display: grid; place-items: center; width: 54px; height: 54px; width: 17cqh; height: 17cqh; background: var(--c); }
.th-ytbox img { width: 72%; height: 72%; object-fit: contain; }
@container th (aspect-ratio < 1) { .th-ytbox { width: 16cqw; height: 16cqw; } .th--yt .th-logos { top: 3.5cqw; } }

/* Kennzeichnung oben links (kein Fließtext) */
.th-badge { position: absolute; z-index: 3; left: 3cqw; top: 3cqw; left: max(8px, 3cqw); top: max(8px, 3cqw);
  padding: 5px 8px 4px; border-radius: 4px; background: rgba(243,246,250,.92); color: #11151C; font: 700 .85rem/1 var(--display); letter-spacing: .03em; }
.th-live { background: var(--live); color: var(--on-accent, #fff); display: inline-flex; align-items: center; gap: 6px; }
.th-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .th-live::before { animation: none; } }

/* Copyright des Fotos: klein und dezent unten rechts */
.th-copy { position: absolute; z-index: 3; right: 6px; bottom: 4px; max-width: 70%; font: 400 9px/1.2 system-ui, sans-serif; color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
@container th (min-width: 520px) { .th-copy { font-size: 11px; right: 10px; bottom: 6px; } }