/* ============================================================
   Seite: spielplan-web.html
   Ergänzt css/match-row.css um Zustände, die nur hier vorkommen
   (Ergebnis/Live), sowie Hero, Stats, Filter, Tabelle, iCal-Kacheln.
   ============================================================ */

.match-row.played { background: var(--paper); }
.match-row.played .vs .name { color: #6B6863; }
.match-row.played .cta { background: white; color: var(--ink); border: 1.5px solid var(--ink); }
.match-row.live { border-color: var(--red); box-shadow: 0 4px 14px rgba(226,0,26,0.18); }

/* Filter-Leiste ruhiger: nur der aktive Filter ist eine ausgefüllte
   Fläche, die übrigen sind reiner Text ohne eigene Box/Rand. */
.filter-bar { display: flex; gap: 4px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-bar .pill.paper {
  background: transparent; border: none; color: #6B7B82;
  transition: color .12s, background .12s;
}
.filter-bar .pill.paper:hover { color: var(--ink); background: rgba(11,46,63,0.05); }

/* Month header */
.month-head {
  display: flex; align-items: baseline; gap: 18px;
  margin: 32px 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(11,46,63,0.18);
}
.month-head:first-child { margin-top: 0; }
.month-head .m {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 32px; text-transform: uppercase; color: var(--ink);
}
.month-head .y {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #6B7B82;
}
.month-head .count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red); font-weight: 700;
  margin-left: auto;
}

/* Tabellenstand */
.table-stand {
  background: white; border: 1px solid rgba(11,46,63,0.08);
  overflow-x: auto;
}
.table-stand table { width: 100%; border-collapse: collapse; }
.table-stand thead { background: var(--ink); color: white; }
.table-stand th {
  padding: 14px 16px; text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
}
.table-stand th.num { text-align: center; width: 60px; }
.table-stand th.r { text-align: right; }
.table-stand td {
  padding: 14px 16px; border-bottom: 1px solid rgba(11,46,63,0.06);
  font-family: var(--body); font-size: 14px;
}
.table-stand td.num {
  text-align: center; font-family: var(--display); font-weight: 900;
  font-style: normal; font-size: 20px;
}
.table-stand td.r { text-align: right; font-family: var(--mono); font-weight: 600; }
.table-stand tr.svw { background: rgba(226,0,26,0.06); border-left: 4px solid var(--red); }
.table-stand tr.svw td:first-child { border-left: 0; }
.table-stand tr.svw td.num { color: var(--red); }
.table-stand td .team { display: flex; align-items: center; gap: 12px; }
.table-stand td .team img {
  width: 30px; height: 30px; object-fit: contain;
  background: var(--paper); border-radius: 50%; padding: 2px;
  border: 1px solid rgba(11,46,63,0.06);
}
.table-stand td .team .n {
  font-family: var(--display); font-weight: 800; font-size: 16px;
  text-transform: uppercase;
}
@media (max-width: 760px) { .table-stand .hide-sm { display: none; } }
.table-stand td.r.svw-hall { color: var(--red); font-weight: 700; }
.table-stand td.r:not(.svw-hall) { color: #5b5853; font-weight: 500; }
.table-stand td.r.pts:not(.svw-hall) { color: var(--ink); font-weight: 800; font-size: 15px; }

.no-more-matches {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #6B7B82;
}

/* — Hero — Struktur in components/page-hero.css. Zwei Abweichungen: —

   Die CTA-Reihe traegt hier fuenf gleichwertige Kacheln. Zusammen brauchen
   sie rund 1050px; die 780px aus der Komponente reichen nur fuer vier, die
   Akkreditierung waere allein in eine zweite Zeile gerutscht. Der
   Content-Block darf deshalb breiter werden — aber nie breiter als das
   Fenster minus der beiden 56px-Raender, sonst schneidet das overflow:hidden
   der Sektion die letzte Kachel ab.

   Ueberschrift und Absatz bleiben davon unberuehrt: h1 setzt seine Zeilen
   per <br/>, der Absatz traegt sein eigenes max-width von 560px.

   Unterhalb von ~1165px Fensterbreite (1052px Reihe + 2x56px Rand) bricht die
   Reihe trotzdem um. Bei den 640px Hero-Hoehe aus der Komponente endete die
   zweite Zeile dann exakt auf der Hero-Unterkante und verschwand unter der
   72px hohen Wellen-Grafik (.svw-hero-wave, z-index 4). Genau dieses Fenster
   bekommt 80px mehr Hoehe — darueber bleibt der Hero so hoch wie entworfen,
   darunter (<=760px) ist er ohnehin fliessend. */
.page-hero-content { max-width: min(1120px, calc(100vw - 112px)); }
/* Eigenes Hallenbild: Totale mit Feld und Banden; Ausschnitt so, dass das
   Spielfeld unter dem Text sichtbar bleibt. data/hero.json kann es ueberschreiben. */
.page-hero-bg[data-hero="spielplan"] {
  background-image: url('../../assets/hero-spielplan-arena.jpg');
  background-position: center 58%;
}
@media (max-width: 1200px) and (min-width: 761px) {
  .page-hero { height: 720px; }
}

/* — Nächstes Spiel: kein eigener Abstand nötig, .web-section trägt schon — */
.next-match-section { padding-top: 60px; }

/* — Liga-Tabelle Sektion — */
.table-section { background: var(--paper); }
.table-note {
  margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #5b5853; text-align: center;
}
.table-note .accent { color: var(--red); font-weight: 700; }

/* — iCal / Bus / Service Kacheln — */
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.service-tile {
  padding: 32px; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px; position: relative; overflow: hidden;
}
.service-tile > * { position: relative; }
.service-tile .ghost {
  position: absolute; font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 200px; line-height: 0.78; opacity: 0.18; pointer-events: none;
}
.service-tile.ink { background: var(--ink); color: white; }
.service-tile.ink .ghost { right: -30px; bottom: -50px; color: var(--red); }
.service-tile.ink p { color: rgba(255,255,255,0.85); }
.service-tile.red { background: var(--red); color: white; }
.service-tile.red .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px, transparent 1.6px);
  background-size: 16px 16px; opacity: 0.35;
}
.service-tile.red .ghost { right: -20px; bottom: -50px; color: white; }
.service-tile.red p { color: rgba(255,255,255,0.92); }
.service-tile .display { font-size: 36px; margin-top: 0; line-height: 0.95; }
.service-tile .display .accent { color: var(--red); }
.service-tile .display .ink-accent { color: var(--ink); }
.service-tile p { font-size: 13px; line-height: 1.55; margin-top: 14px; }
.service-tile .cta {
  text-decoration: none; font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 15px; padding: 14px 22px; text-transform: uppercase; text-align: center;
}
/* Buttons heben sich von ihrer Kachel ab: vorher trugen sie genau die
   Kachelfarbe (dunkel auf dunkel, rot auf rot) und wirkten wie loser Text. */
.service-tile > .cta, .service-tile .cta-row { align-self: flex-start; margin-top: 20px; }
.service-tile .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.service-tile .cta { display: inline-block; transition: background .15s, color .15s, box-shadow .15s; }
.service-tile.ink .cta { background: var(--red); color: white; }
.service-tile.ink .cta:hover { background: var(--red-deep); }
.service-tile.red .cta { background: white; color: var(--ink); }
.service-tile.red .cta:hover { background: var(--paper); }
.service-tile.red .cta.outline { background: transparent; color: white; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); }
.service-tile.red .cta.outline:hover { background: rgba(255,255,255,0.12); }

/* === Wettbewerbe (Liga + Pokal) === */
.comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comp-card { display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center; background: white; border: 1px solid rgba(11,46,63,0.10); padding: 26px 28px; text-decoration: none; color: var(--sea, #0B2E3F); transition: border-color .15s, transform .15s; }
.comp-card:hover { border-color: var(--red); transform: translateY(-2px); }
.comp-card img { width: 100%; height: 120px; object-fit: contain; }
.comp-card .c-t { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; }
.comp-card p { font-size: 14px; line-height: 1.55; color: rgba(11,46,63,0.78); margin: 8px 0 10px; }
.comp-card .c-l { font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--red); }
@media (max-width: 760px) {
  .comp-grid { grid-template-columns: 1fr; }
  .comp-card { grid-template-columns: 96px 1fr; gap: 18px; padding: 20px; }
  .comp-card img { height: 88px; }
}

/* Fanblock-Kachel mit Foto aus dem Fanblock (Konfetti, Trommeln) unter rotem Verlauf */
.service-tile.red.with-photo {
  background:
    linear-gradient(100deg, rgba(226,0,26,0.95) 0%, rgba(226,0,26,0.86) 48%, rgba(180,0,21,0.55) 100%),
    url('../../assets/fans-fanblock-konfetti.jpg') 30% 60% / cover;
}