/* =========================================================
   White-Label-Portal einer Sportart
   Farben kommen pro Sportart als CSS-Variablen (siehe app/portal.php)
   ========================================================= */
.portal .btn { color: var(--on-accent); }
.portal .btn-ghost { color: var(--paper); }
.portal .site-header { background: color-mix(in srgb, var(--ink) 92%, transparent); }

/* Marke oben links */
.pt-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; min-width: 0; }
.pt-brand img { height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.pt-mark { width: 40px; height: 40px; flex: none; }
.pt-mark img, .pt-hero-mark img, .pt-mark svg, .pt-hero-mark svg { width: 100%; height: 100%; max-width: none; }
.pt-name { font: 800 1.45rem/1 var(--display); font-style: italic; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }

/* Bühne */
.pt-hero { position: relative; overflow: hidden; background: var(--grad); isolation: isolate; }
.pt-hero.has-img { background: var(--ink); }
.pt-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pt-hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 94%, transparent) 0%, color-mix(in srgb, var(--ink) 72%, transparent) 55%, color-mix(in srgb, var(--ink) 40%, transparent) 100%); }
.pt-hero:not(.has-img)::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12;
  background: repeating-radial-gradient(circle at 50% 140%, transparent 0 34px, #fff 34px 35.5px); }
.pt-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 84px) 0; }
.pt-hero-text { color: #fff; }
.pt-hero.has-img .pt-hero-text { color: var(--paper); }
.pt-hero-mark { display: block; width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px); margin-bottom: 18px; }
/* Auf dem Farbverlauf der Bühne: Icon in Weiß */
.pt-hero:not(.has-img) .pt-hero-mark { --icon-a: #fff; --icon-b: #fff; }
.pt-hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .92; max-width: 14ch; }
.pt-tagline { margin: 16px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 40ch; opacity: .92; }

.pt-feature { display: block; text-decoration: none; border-radius: 12px; overflow: hidden; background: var(--ink-2); color: var(--paper);
  box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.pt-feature-img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink-3); }
.pt-feature-img > img, .pt-feature-img > .noimg { width: 100%; height: 100%; object-fit: cover; }
.pt-feature-img .noimg img { width: 26%; height: auto; }
.pt-feature-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border-radius: 50%; background: var(--grad); color: var(--on-accent); display: grid; place-items: center; transition: transform .15s; }
.pt-feature-play svg { width: 32px; height: 32px; margin-left: 5px; }
.pt-feature:hover .pt-feature-play { transform: scale(1.06); }
.pt-feature-body { display: grid; gap: 6px; justify-items: start; padding: 18px 22px 22px; }
.pt-feature-body strong { font: 800 1.7rem/1.05 var(--display); font-style: italic; text-transform: uppercase; }
.pt-feature-body .sub { color: var(--mist); }
.pt-feature-body .when { margin-top: 6px; font: 700 1.05rem/1 var(--display); color: var(--paper); opacity: .8; }   /* hell statt Portal-Farbe: auf dunkler Karte immer lesbar */
@media (max-width: 900px) { .pt-hero-inner { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pt-feature-play { transition: none; } }

/* In einem Portal ist die Sportart überall gleich – Label ausblenden */
.portal .tile .sport, .portal .fixture .what .sport { display: none; }

/* Jahre für die Aufzeichnungen */
.pt-years { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-years a { padding: 8px 14px; border-radius: 20px; text-decoration: none; font: 600 1rem/1 var(--display); color: var(--mist); box-shadow: inset 0 0 0 1px var(--rule); }
.pt-years a:hover { color: var(--paper); }
.pt-years a[aria-current] { background: var(--grad); color: var(--on-accent); box-shadow: none; }

/* Über uns */
.pt-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 56px); padding-top: 32px; border-top: 1px solid var(--rule); }
.pt-about .prose { padding: 0; color: var(--mist); }
@media (max-width: 760px) { .pt-about-grid { grid-template-columns: 1fr; } }

/* Partner */
.pt-sponsors h2 { margin-bottom: 20px; }
.pt-sponsors ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.pt-sponsors li a, .pt-sponsors li > img { display: flex; }
.pt-sponsors li { display: grid; place-items: center; height: 100px; padding: 18px; border-radius: 10px; background: #fff; }
.pt-sponsors img { max-width: 100%; max-height: 64px; object-fit: contain; }

/* Footer: das Portal im Vordergrund, Streamster nur klein */
.pt-footer { margin-top: clamp(56px, 8vw, 100px); padding: 40px 0 28px; background: var(--ink-2); border-top: 1px solid var(--rule); }
.pt-foot-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pt-foot-name { font: 800 1.6rem/1 var(--display); font-style: italic; text-transform: uppercase; }
.pt-foot-main p { color: var(--mist); margin: 8px 0 0; max-width: 46ch; }
.pt-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pt-links a { color: var(--mist); }
.pt-links a:hover { color: var(--paper); }
.pt-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--mist); }
.pt-legal ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.pt-legal a { color: var(--mist); }
.pt-powered { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; opacity: .75; }
.pt-powered:hover { opacity: 1; }
.pt-powered img { height: 18px; width: auto; }
html[style*="color-scheme:light"] .pt-powered img { filter: none; }

/* Im Portal ist die Sportart klar – kein Sportart-Icon im Spielplan */
.portal .fixture { grid-template-columns: 86px 1fr auto; }
.portal .fixture .icon { display: none; }
@media (max-width: 640px) { .portal .fixture { grid-template-columns: 64px 1fr; } }
/* Live-Badge lesbar auch bei hellen Akzentfarben */
.portal .status-live { color: var(--on-accent); }
.portal .status-live::before { background: currentColor; }
.portal .sp-adlabel, .portal .status-moment { color: var(--on-accent); }

/* Ebenen: Brotkrumen, Kacheln, Favorit */
.pt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font: 600 1rem/1.2 var(--display); }
.pt-crumbs a { color: inherit; opacity: .78; text-decoration: none; }
.pt-crumbs a:hover { opacity: 1; text-decoration: underline; }
.pt-crumbs span { opacity: .45; }
.pt-hero-actions { margin-top: 22px; }
.pt-fav { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: 21px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font: 700 1rem/1 var(--display); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pt-hero.has-img .pt-fav { background: var(--ink-3); color: var(--paper); }
.pt-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pt-fav[aria-pressed="true"] svg { fill: currentColor; }
.pt-tiles-sec { padding-top: clamp(28px, 4vw, 44px); }
.pt-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; }
.pt-tile { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 18px; border-radius: 10px; text-decoration: none; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .15s, background-color .15s; }
.pt-tile:hover { background: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pt-tile-logo { width: 52px; height: 52px; flex: none; display: grid; place-items: center; }
.pt-tile-logo img, .pt-tile-logo svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-tile-name { font: 700 1.2rem/1.1 var(--display); }
.pt-vs { color: var(--mist); font-size: .95rem; }
@media (max-width: 700px) { .pt-tiles { grid-auto-columns: 78%; } }
/* Unterseiten als Band direkt unter dem Kopfbereich */
.pt-band { background: color-mix(in srgb, var(--ink) 70%, #000); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.pt-band .pt-tiles { grid-auto-columns: minmax(220px, max-content); }
.pt-band .pt-tile { min-height: 72px; padding: 12px 22px 12px 14px; background: var(--ink-2); }
.pt-band .pt-tile-logo { width: 46px; height: 46px; }
.pt-band .pt-tile-name { font-size: 1.1rem; font-weight: 600; }

/* DAZN-Prinzip: Unterseiten liegen auf dem Hintergrundbild und scrollen mit */
.pt-hero.has-tiles { padding-bottom: 0; }
.pt-hero.has-tiles .pt-hero-inner { padding-bottom: 36px; }
.pt-hero .pt-band { position: relative; z-index: 2; padding: 0 0 28px; background: none; border: 0; }
.pt-hero .pt-band .pt-tiles { grid-auto-columns: minmax(210px, max-content); gap: 12px; }
.pt-hero .pt-band .pt-tile { min-height: 70px; padding: 12px 22px 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.pt-hero .pt-band .pt-tile:hover { background: color-mix(in srgb, var(--ink-2) 85%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.pt-hero .pt-band .pt-tile-logo { width: 44px; height: 44px; }
.pt-hero .pt-band .pt-tile-name { font-size: 1.05rem; font-weight: 600; }
.pt-hero-logo { max-height: 96px; max-width: 260px; width: auto; margin-bottom: 18px; object-fit: contain; }
.pt-feature-body strong { font-weight: 600 !important; font-size: 1.15rem; }
.pt-cal { padding: 0; }
.pt-cal .cal-tools { margin-bottom: 26px; }
@supports not (backdrop-filter: blur(1px)) { .pt-hero .pt-band .pt-tile { background: var(--ink-2); } }

/* Kachel-Logo bleibt immer in seinem Feld (3.6.2) – hohe Logos werden eingepasst statt abgeschnitten */
.pt-tile-logo { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pt-tile-logo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }

/* =========================================================
   Seiten-Kalender (ab 3.8)
   – Filter-Kacheln über dem Kalender: jede Unterseite (alle Ebenen) filtert, gewählte stehen vorne
   – Events fließen bündig hintereinander; passt ein Tag nicht mehr in die Zeile, beginnt er eine neue (Menüpunkt „Kalender“ unverändert)
   ========================================================= */
.pt-cal .cal-tiles { display: flex; gap: 10px; margin-bottom: 18px; overflow-x: auto; scroll-snap-type: none; }
.pt-cal .cal-tiles > * { flex: none; scroll-snap-align: none; }
.cal-tile-all { height: 56px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--ink-2); color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule); font: 600 1rem/1 var(--text); cursor: pointer; }
.cal-tile { position: relative; }
.cal-tile[hidden] { display: none; }
.cal-tile-btn { display: flex; align-items: center; gap: 12px; height: 56px; max-width: 280px; padding: 0 20px 0 10px; border: 0; border-radius: 10px;
  background: var(--ink-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); font: 600 .98rem/1.1 var(--text); text-align: left; cursor: pointer;
  transition: box-shadow .15s, background-color .15s; }
.cal-tile-btn:hover, .cal-tile-all:hover { background: var(--ink-3); }
.cal-tile-btn[aria-pressed="true"], .cal-tile-all[aria-pressed="true"] { background: var(--ink-3); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-tile-btn:focus-visible, .cal-tile-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-tile-logo { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.cal-tile-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cal-tile-logo svg { width: 100%; height: 100%; }
.cal-tile-logo .sport-icon { width: 100%; height: 100%; }
.cal-tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* öffentliche Seite: Symbol oben rechts öffnet sie in einem neuen Tab */
.cal-tile-open { position: absolute; top: -7px; right: -7px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.35); text-decoration: none; transition: transform .15s; }
.cal-tile-open svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal-tile-open:hover { transform: scale(1.12); }
.cal-tile-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-cal .cal-tiles.h-rail { padding: 10px 10px 6px; margin-left: -10px; margin-right: -10px; }
@media (max-width: 640px) {
  .cal-tile-btn, .cal-tile-all { height: 48px; }
  .cal-tile-logo { width: 30px; height: 30px; }
  .cal-tile-btn { max-width: 220px; padding-right: 16px; font-size: .92rem; }
}

/* Bündiger Fluss (Desktop/Tablet): Tage und Wischleisten lösen sich auf, Datum und Karten stehen direkt hintereinander */
@media (min-width: 701px) {
  .pt-cal .cal-block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 34px 18px; padding-bottom: 34px; }
  .pt-cal .cal-tag, .pt-cal .cal-rail-wrap, .pt-cal .cal-rail { display: contents; }
  .pt-cal .cal-mark { position: static; flex: none; width: 50px; }
  .pt-cal .cal-rail .cal-card { flex: none; width: clamp(240px, 21vw, 300px); }
  .pt-cal .cal-rail-wrap .rail-arrow { display: none !important; }
  .pt-cal .cal-br { flex: 0 0 100%; width: 100%; height: 0; margin-top: -34px; }
  .pt-cal .cal-gap { flex: none; width: 50px; height: 0; }   /* Platz unter dem Datum, wenn ein langer Tag weiterläuft */
}

/* Infos einer Seite (ab 3.8) – zwischen „Jetzt live“ und Kalender */
.pt-info .prose { max-width: 75ch; padding: 0; color: var(--mist); }
.pt-info .prose strong { color: var(--paper); }
.pt-info .prose a:not(.btn) { color: var(--accent); }

/* Übergang Bühne → Seite (ab 3.8): die Bühne läuft unten weich in den Seitenhintergrund aus statt hart abzubrechen
   (sanfte Kurve über fast die halbe Höhe, damit helle Farben nicht als grauer Streifen enden) */
.pt-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 48%; min-height: 160px; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 0%, transparent) 0%,
    color-mix(in srgb, var(--ink) 6%, transparent) 20%,
    color-mix(in srgb, var(--ink) 18%, transparent) 38%,
    color-mix(in srgb, var(--ink) 38%, transparent) 55%,
    color-mix(in srgb, var(--ink) 64%, transparent) 72%,
    color-mix(in srgb, var(--ink) 88%, transparent) 88%,
    var(--ink) 100%); }
.pt-hero .pt-hero-inner { padding-bottom: clamp(64px, 9vw, 120px); }
.pt-hero + .wrap > .section:first-child { padding-top: clamp(8px, 2vw, 24px); }

/* Sportarten-Portale: Menüleiste 1:1 wie auf der Startseite – Streamster-Farben statt der Farben der Sportart */
.portal .site-header.is-streamster {
  --ink: #11151C; --ink-2: #191E27; --ink-3: #232935; --rule: #2D3441; --paper: #F3F6FA; --mist: #9EA6B4;
  --pink: #FF0057; --orange: #FF6E28; --accent: #FF6E28; --live: #FF0057; --on-accent: #FFFFFF;
  --grad: linear-gradient(135deg, #FF0057, #FF6E28);
  background: var(--ink); color: var(--paper); color-scheme: dark;   /* deckend: über hellen Portalfarben sähe die Leiste sonst heller aus */
}