/* staige.tv: Knopf am Spiel, Player-Ebene, Hinweis. Auf allen Seiten geladen, weil Spiele auch auf der Startseite stehen. */
.staige-knopf {
	display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 8px 0 0; padding: 7px 11px !important;
	border: 1px solid currentColor !important; border-radius: 0 !important; background: transparent !important; color: inherit !important;
	font: 800 12px/1 "Big Shoulders Display", sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase; cursor: pointer;
	position: relative; z-index: 2; transition: background .3s, color .3s, border-color .3s;
}
.staige-knopf:hover, .staige-knopf:focus-visible { background: #FFF730 !important; border-color: #FFF730 !important; color: #101010 !important; }
.staige-knopf__punkt { width: 8px; height: 8px; background: currentColor; flex: none; }
.staige-knopf--live { background: #e8322b !important; border-color: #e8322b !important; color: #fff !important; }
.staige-knopf--live .staige-knopf__punkt { background: #fff; animation: staige-puls 1.6s ease-out infinite; }
.staige-knopf--geplant { opacity: .75; }
.staige-knopf--wiederholung .staige-knopf__punkt { width: 0; height: 0; background: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
@keyframes staige-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }

/* Spielzeilen: Knopf unter dem Gegner */
.sb-zeile__paar .staige-knopf, .spielzeile__paar .staige-knopf { align-self: flex-start; justify-self: start; width: max-content !important; max-width: 100%; }
.spielzeile__paar { display: flex; flex-direction: column; }
.sb-naechstes .staige-knopf { margin-top: 18px; padding: 11px 16px !important; font-size: 14px !important; }

/* Player-Ebene */
.staige-ebene { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 20px; background: rgba(8, 8, 8, .86); backdrop-filter: blur(6px); }
.staige-ebene[hidden] { display: none; }
html.staige-offen { overflow: hidden; }
.staige-ebene__box { display: grid; width: min(1100px, 100%); max-height: calc(100svh - 40px); background: #101010; border-top: 6px solid #FFF730; animation: staige-rein .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes staige-rein { from { opacity: 0; transform: translateY(24px); } }
.staige-ebene__kopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
.staige-ebene__titel { margin: 0; font: 900 clamp(20px, 2vw, 28px)/1.05 "Big Shoulders Display", sans-serif; text-transform: uppercase; color: #fff; }
.staige-ebene button.staige-ebene__zu { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0 !important; border-radius: 0 !important; background: #FFF730 !important; cursor: pointer; }
.staige-ebene__zu span { grid-area: 1 / 1; width: 20px; height: 2.5px; background: #101010; transform: rotate(45deg); }
.staige-ebene__zu span + span { transform: rotate(-45deg); }
.staige-ebene__player { position: relative; height: min(70svh, 720px); background: #000; }
.staige-ebene__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.staige-ebene__fuss { margin: 0; padding: 12px 20px 16px; font: 400 13px/1.5 "Noto Sans", sans-serif; color: #9b9b96; }
.staige-ebene__fuss a { color: #FFF730; font-weight: 700; }

/* Fester Hinweis auf Spielbetrieb und Heimspiele */
.staige-hinweis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 44px); background: #101010; color: #fff; border-left: 8px solid #e8322b; }
.staige-hinweis__marke { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; background: #e8322b; font: 800 15px/1 "Big Shoulders Display", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.staige-hinweis__marke span { width: 10px; height: 10px; background: #fff; animation: staige-puls 1.6s ease-out infinite; }
.staige-hinweis__titel { margin: 0 0 6px; font: 900 clamp(24px, 2.4vw, 36px)/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.staige-hinweis__text p:last-child { margin: 0; font: 400 15px/1.55 "Noto Sans", sans-serif; color: #c9c9c4; }
.staige-hinweis__link { padding: 16px 22px; background: #FFF730; color: #101010; font: 800 14px/1 "Big Shoulders Display", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .3s; }
.staige-hinweis__link:hover { background: #fff; }
@media (max-width: 760px) {
	.staige-hinweis { grid-template-columns: minmax(0, 1fr); }
	.staige-hinweis__marke, .staige-hinweis__link { justify-self: start; }
	.staige-ebene { padding: 0; }
	.staige-ebene__box { max-height: 100svh; height: 100svh; grid-template-rows: auto 1fr auto; }
	.staige-ebene__player { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .staige-knopf__punkt, .staige-hinweis__marke span, .staige-ebene__box { animation: none; } }