/* SPIEL 26 Scouting (10/2026): Kasten auf der Startseite, Logo + Haken im
   Einreichen-Fenster, Profil-Zeichen Scout26. services/spiel26_*.py,
   docs/SPIEL26-SCOUTING.md. BSN-Blau #20228A; Orange bleibt der Redaktion. */

/* ── Logo: helle/dunkle Variante (Darkmodus html[data-theme="dunkel"]) ── */
.s26-logo { display: block; height: 28px; width: auto; }
.s26-logo--hell { display: none; }
html[data-theme="dunkel"] .s26-logo--dunkel { display: none; }
html[data-theme="dunkel"] .s26-logo--hell { display: block; }

/* ── Kasten auf der Startseite ───────────────────────────────────────── */
/* Genau so breit wie das Beitragsraster (pn-feed.css main.main-grid:
   max-width --pn-feed-max = 1240px inkl. Innenabstand --pn-gutter) - auf dem
   Desktop also so breit wie die 3 Karten nebeneinander, nie breiter.
   Hinweis: KEIN spaeteres max-width setzen, das wuerde die Kappung aufheben. */
.s26-box, .s26-seite {
  width: calc(100% - 2 * var(--pn-gutter, 0.75rem));
  max-width: calc(var(--pn-feed-max, var(--pn-max, 1240px)) - 2 * var(--pn-gutter, 0.75rem));
  margin: 1.25rem auto 0;
  box-sizing: border-box;
}
.s26-box {
  padding: 0.75rem;
  border: 2px solid #20228A;
  border-radius: 16px;
  background: var(--pn-sf-0, #fff);
  overflow: hidden;
}
.s26-box__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; min-width: 0; }
.s26-box__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: 700; color: var(--pn-tx-10, #111); line-height: 1.25; }
.s26-box__more {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
  border-radius: 999px; background: #20228A; color: #fff; font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.s26-box__more:focus-visible { outline: 3px solid #FF6D02; outline-offset: 2px; }
.s26-box__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 0.6rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0; padding: 0 0 0.25rem; list-style: none; -webkit-overflow-scrolling: touch;
}
.s26-box__item { scroll-snap-align: start; min-width: 0; }
@media (min-width: 600px) { .s26-box__list { grid-auto-columns: 45%; } }
@media (min-width: 1024px) {
  .s26-box__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .s26-box__item:nth-child(n+5) { display: none; }
}
.s26-card {
  display: flex; flex-direction: column; height: 100%; border: 1px solid var(--pn-ln-2, #e5e7eb);
  border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; background: var(--pn-sf-0, #fff);
}
.s26-card:focus-visible { outline: 3px solid #20228A; outline-offset: 2px; }
.s26-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pn-sf-2, #f3f4f6); }
.s26-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s26-card__body { padding: 0.5rem 0.6rem 0.6rem; min-width: 0; }
.s26-card__title { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.s26-card__text {
  margin: 0; font-size: 0.8rem; color: var(--pn-tx-7, #374151); line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.s26-card__meta { margin-top: 0.35rem; font-size: 0.72rem; color: var(--pn-tx-5, #6b7280); overflow-wrap: anywhere; }

.s26-box__leer { margin: 0; font-size: 0.9rem; color: var(--pn-tx-6, #4b5563); }

/* ── Countdown (Kasten flach, Seite gross) ───────────────────────────── */
.s26-box--countdown { padding: 0.6rem 0.75rem; }
.s26-box--countdown .s26-box__head { margin-bottom: 0.35rem; }
.s26-cd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem; min-width: 0; }
.s26-cd__start { margin: 0; font-weight: 700; font-size: 0.9rem; color: #20228A; overflow-wrap: anywhere; }
html[data-theme="dunkel"] .s26-cd__start { color: #A9B4FF; }
.s26-cd__uhr { display: flex; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.s26-cd__uhr[hidden] { display: none; }
.s26-cd__uhr li {
  display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; padding: 0.2rem 0.3rem;
  border-radius: 8px; background: #20228A; color: #fff; line-height: 1.1;
}
.s26-cd__zahl { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.s26-cd__einheit { font-size: 0.62rem; opacity: 0.85; }
.s26-cd__sub { flex: 1 1 100%; margin: 0; font-size: 0.8rem; color: var(--pn-tx-6, #4b5563); line-height: 1.35; }
@media (min-width: 1024px) { .s26-cd__sub { flex: 1 1 auto; } }
.s26-cd--gross { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.s26-cd--gross .s26-cd__start { font-size: 1.05rem; }
.s26-cd--gross .s26-cd__uhr { gap: 0.5rem; }
.s26-cd--gross .s26-cd__uhr li { min-width: 4.2rem; padding: 0.5rem 0.4rem; border-radius: 12px; }
.s26-cd--gross .s26-cd__zahl { font-size: 1.9rem; }
.s26-cd--gross .s26-cd__einheit { font-size: 0.75rem; }
.s26-cd--gross .s26-cd__sub { font-size: 0.95rem; }
@media (max-width: 359px) { .s26-cd--gross .s26-cd__uhr li { min-width: 3.4rem; } .s26-cd--gross .s26-cd__zahl { font-size: 1.5rem; } }

/* ── Countdown-Seite /?tab=spiel26 ───────────────────────────────────── */
.s26-seite {
  padding: 1.1rem; border: 2px solid #20228A; border-radius: 16px;
  background: var(--pn-sf-0, #fff);
}
.s26-seite__kopf { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.s26-seite__kopf .s26-logo { height: 40px; }
.s26-seite__title { margin: 0; font-size: 1.3rem; line-height: 1.2; color: var(--pn-tx-10, #111); }
.s26-seite__h { margin: 1.2rem 0 0.4rem; font-size: 1rem; color: var(--pn-tx-10, #111); }
.s26-seite__liste { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.92rem; line-height: 1.45; color: var(--pn-tx-7, #374151); }
html[data-theme="dunkel"] .s26-seite { border-color: #5A63D6; }

/* ── Einreichen-Fenster: Logo + Haken ────────────────────────────────── */
.s26-opt {
  display: flex; gap: 0.75rem; align-items: center; padding: 0.65rem 0.75rem; margin: 0 0 1rem;
  border: 2px solid #20228A; border-radius: 12px; background: var(--pn-sf-0, #fff);
}
.s26-opt .s26-logo { height: 34px; flex: 0 0 auto; }
.s26-opt__main { flex: 1 1 auto; min-width: 0; }
.s26-opt__check { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.s26-opt__check input { width: 22px; height: 22px; accent-color: #20228A; flex: 0 0 auto; margin: 0; }
.s26-opt .pn-fieldhint { margin-top: 0.1rem; }
.pn-done__s26 { font-weight: 600; color: #20228A; }
html[data-theme="dunkel"] .pn-done__s26 { color: #A9B4FF; }

/* ── Profil-Zeichen Scout26 ──────────────────────────────────────────── */
.tier-badge.scout26-badge { background: #20228A; text-decoration: none; }
html[data-theme="dunkel"] .s26-box, html[data-theme="dunkel"] .s26-opt { border-color: #5A63D6; }