/* ============================================================================ live.css - die Live-Seite (web/live.php). Dunkle Flaeche wie die Buehne der Startseite, darauf der Player im Format 16:9 mit weichem Schatten. Vor dem Laden liegt ein Vorhang mit dem Luftbild des Sportplatzes darueber (kein fremder Inhalt, bevor jemand klickt). Im Vollbild fuellt die Flaeche den ganzen Schirm. ========================================================================= */ .live { position: relative; overflow: hidden; } /* Das Luftbild ganz leise im Hintergrund - dieselbe Datei wie die Buehne. */ .live::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,5,.86), rgba(5,5,5,.96) 70%, rgb(5,5,5)), url("../img/buehne-sportplatz.jpg") center 70% / cover no-repeat; } @supports (background-image: image-set(url("x.webp") type("image/webp"))) { .live::before { background: linear-gradient(180deg, rgba(5,5,5,.86), rgba(5,5,5,.96) 70%, rgb(5,5,5)), image-set(url("../img/buehne-sportplatz.webp") type("image/webp"), url("../img/buehne-sportplatz.jpg") type("image/jpeg")) center 70% / cover no-repeat; } } .live .p-wrap { position: relative; } .live-kopf { align-items: center; } .live .p-display { color: #fff; } /* Auf der dunklen Flaeche: die Knoepfe wie auf der Buehne. Die Regel .p-sec:not(.p-sec--alt)... .btn--secondary in bbc08.css (graue Sektionen) wuerde sie sonst hell machen - daher die volle Kette. */ .p-sec.live.p-onband .live-leiste .btn--secondary { background: rgba(255,255,255,.06); color: var(--p-band-fg); border-color: rgba(255,255,255,.22); } .p-sec.live.p-onband .live-leiste .btn--secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); } /* "Einwilligung widerrufen" (Auftrag 153, 01.10.2026): leise wie ein Verweis, auf der dunklen Leiste in der zweiten Bandfarbe. Eigene [hidden]-Regel, weil .btn display: inline-flex traegt. */ .p-sec.live.p-onband .live-leiste .btn--ghost { color: var(--p-band-fg-2); } .p-sec.live.p-onband .live-leiste .btn--ghost:hover { background: rgba(255,255,255,.08); color: var(--p-band-fg); } .live-leiste [data-live-widerruf][hidden] { display: none; } /* Rundung wie Knoepfe und Kaestchen, --r-lg (01.10.2026) - keine Pille. */ .live-marke { display: inline-flex; align-items: center; gap: var(--s3); height: 32px; padding: 0 var(--s5); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--p-band-fg-2); } .live-marke--an { border-color: #e0301e; background: #e0301e; color: #fff; } .live-marke--an span { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: live-puls 1.6s ease-in-out infinite; } @keyframes live-puls { 50% { opacity: .25; } } .live-rahmen { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); } .live-flaeche { position: relative; aspect-ratio: 16 / 9; background: #000; } .live-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Vorhang vor dem Laden: das Luftbild, darauf Titel und Startknopf. */ .live-vorhang, .live-aus { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s4); padding: var(--s6); text-align: center; color: var(--p-band-fg); background: radial-gradient(ellipse at center, rgba(5,5,5,.35), rgba(5,5,5,.85) 75%), url("../img/buehne-sportplatz.jpg") center 70% / cover no-repeat; } .live-vorhang__titel, .live-aus__titel { margin: 0; font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; text-transform: uppercase; line-height: 1; font-size: clamp(1.4rem, 3.6vw, 2.8rem); color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.6); } .live-vorhang__zeit { margin: 0; color: var(--p-band-fg-2); } .live-start { gap: var(--s4); } .live-start__dreieck { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; } .live-vorhang__hinweis { max-width: 46ch; margin: 0; font-size: var(--t-xs); color: var(--p-band-fg-2); } .live-vorhang__hinweis a { color: inherit; text-decoration: underline; } .live-vorhang__merken { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--t-xs); color: var(--p-band-fg-2); cursor: pointer; } .live-aus__spiel { display: grid; gap: var(--s3); margin: var(--s4) 0 0; justify-items: center; color: var(--p-band-fg); text-shadow: 0 1px 8px rgba(0,0,0,.7); } .live-aus__spiel .label { color: var(--p-band-fg-2); } .live-aus__spiel b { font-size: 1.05rem; } .live-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); padding: var(--s4) var(--s6); background: #0d0d0d; border-top: 1px solid rgba(255,255,255,.08); } .live-leiste__titel { font-size: var(--t-sm); font-weight: 600; color: var(--p-band-fg); } .live-leiste__knoepfe { display: inline-flex; flex-wrap: wrap; gap: var(--s4); } /* Vollbild: die Flaeche fuellt den Schirm, der Film bleibt 16:9 und mittig. */ .live-flaeche:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; } .live-flaeche:-webkit-full-screen { width: 100%; height: 100%; } .live-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .live-plan li { display: grid; gap: var(--s2); padding: var(--s6); } .live-plan__zeit { font-size: var(--t-sm); color: var(--fg-3); } .live-plan__titel { font-weight: 700; color: var(--fg-1); } @media (max-width: 640px) { /* Auf dem Telefon ist 16:9 flach - der Vorhang braucht Hoehe fuer Titel, Knopf und Hinweis. Der Player selbst bleibt 16:9. */ .live-flaeche:has(.live-vorhang), .live-flaeche:has(.live-aus) { aspect-ratio: 4 / 5; } .live-leiste { padding: var(--s4); } } @media (prefers-reduced-motion: reduce) { .live-marke--an span { animation: none; } }