/* =========================================================
   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(--accent); }
@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); }