/* Kino-Intro „Denn 12er sterben niemals aus“. Gesamtdauer ca. 6,4 s, gesteuert über --t (Zeitachse). */
.scb-intro {
	--gelb: #FFF730; --schwarz: #101010;
	position: fixed; inset: 0; z-index: 100000; background: #050505; overflow: hidden;
	display: grid; place-items: center; color: #fff; pointer-events: auto;
	transition: opacity .8s ease, filter .8s ease;
}
.scb-intro:not(.scb-intro--start) *, .scb-intro:not(.scb-intro--start) { animation-play-state: paused !important; }
.scb-intro--aus { opacity: 0; filter: brightness(1.8) blur(6px); pointer-events: none; }

/* Bühne: Kamerafahrt über Vereinsbilder oder Video */
.scb-intro__buehne { position: absolute; inset: -4%; }
.scb-intro__bild, .scb-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; opacity: 0; filter: grayscale(1) contrast(1.25) brightness(.55); }
.scb-intro__bild { animation: scb-i-bild 2.6s cubic-bezier(.3,0,.2,1) both; animation-delay: calc(.2s + var(--b) * 1.7s); }
.scb-intro__bild:last-child { animation-name: scb-i-bild-letztes; animation-duration: 3.6s; }
.scb-intro__video { animation: scb-i-video 6.4s linear both; }
@keyframes scb-i-bild { 0% { opacity: 0; transform: scale(1.28) translate3d(2%, 1%, 0); } 25% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08) translate3d(-1%, 0, 0); } }
@keyframes scb-i-bild-letztes { 0% { opacity: 0; transform: scale(1.3); } 20% { opacity: 1; } 70% { opacity: 1; filter: grayscale(1) contrast(1.25) brightness(.55); } 100% { opacity: 1; transform: scale(1.05); filter: grayscale(0) contrast(1.1) brightness(.75); } }
@keyframes scb-i-video { 0% { opacity: 0; } 10% { opacity: 1; } 75% { filter: grayscale(1) contrast(1.25) brightness(.55); } 100% { opacity: 1; filter: grayscale(0) brightness(.75); } }

/* Flutlicht-Strahl, zweimal über das Bild */
.scb-intro__flutlicht { position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 42%, rgba(255,247,48,.0) 44%, rgba(255,250,200,.22) 50%, rgba(255,247,48,0) 56%, transparent 58%); mix-blend-mode: screen; animation: scb-i-licht 1.6s ease-in-out both; animation-delay: 1.3s; opacity: 0; }
@keyframes scb-i-licht { 0% { opacity: 0; transform: translateX(-35%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(35%); } }

/* Filmkorn und Vignette */
.scb-intro__korn { position: absolute; inset: -100%; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: scb-i-korn .5s steps(4) infinite; }
@keyframes scb-i-korn { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } 100% { transform: translate(3%, 1%); } }
.scb-intro__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.85) 100%); }

/* Letterbox: öffnet sich zu Beginn, verschwindet am Ende */
.scb-intro__balken { position: absolute; left: 0; right: 0; height: 50vh; background: #000; z-index: 3; animation: scb-i-balken 6.4s cubic-bezier(.7,0,.2,1) both; }
.scb-intro__balken--oben { top: 0; transform-origin: top; }
.scb-intro__balken--unten { bottom: 0; transform-origin: bottom; }
@keyframes scb-i-balken { 0% { transform: scaleY(1); } 14% { transform: scaleY(.22); } 86% { transform: scaleY(.22); } 100% { transform: scaleY(0); } }

/* Text Wort für Wort */
.scb-intro__text { position: relative; z-index: 4; margin: 0; padding: 0 5vw; max-width: 1400px; text-align: center; font-family: "Noto Sans", sans-serif; font-weight: 400; font-size: clamp(40px, 9vw, 150px); line-height: 1.02; text-transform: uppercase; animation: scb-i-text-weg .7s cubic-bezier(.7,0,.2,1) both; animation-delay: 4.25s; }
.scb-intro__wort { display: inline-block; opacity: 0; animation: scb-i-wort .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.85s + var(--w) * .55s); }
.scb-intro__wort--zwoelf { color: transparent; -webkit-text-stroke: 2px var(--gelb); animation: scb-i-zwoelf 1.1s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(.85s + var(--w) * .55s); }
/* Nur transform/opacity/blur: verändert die Wortbreite nicht, die Zeilen bleiben stehen */
@keyframes scb-i-wort { 0% { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.18); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
@keyframes scb-i-zwoelf { 0% { opacity: 0; transform: scale(2.6); } 35% { opacity: 1; transform: scale(.94); color: transparent; } 55% { transform: scale(1.02); } 70% { color: var(--gelb); text-shadow: 0 0 40px rgba(255,247,48,.55); } 100% { opacity: 1; transform: none; color: var(--gelb); text-shadow: 0 0 24px rgba(255,247,48,.25); } }
/* „niemals“ (vorletztes Wort) in Gelb */
.scb-intro__wort:nth-last-of-type(2) { color: var(--gelb); }
@keyframes scb-i-text-weg { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6vh) scale(.94); filter: blur(10px); } }

/* Kurzer Ruck, wenn „12er“ einschlägt */
.scb-intro--start .scb-intro__buehne { animation: scb-i-ruck .35s ease-out both; animation-delay: 1.3s; }
@keyframes scb-i-ruck { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 4px) scale(1.01); } 45% { transform: translate(5px, -3px); } 70% { transform: translate(-2px, 2px); } }

/* Wappen und Abspann */
.scb-intro__wappen { position: absolute; z-index: 4; width: clamp(96px, 12vw, 150px); height: auto; opacity: 0; animation: scb-i-wappen 1.2s cubic-bezier(.2,.8,.2,1) both; animation-delay: 4.5s; filter: drop-shadow(0 0 30px rgba(255,247,48,.35)); }
@keyframes scb-i-wappen { 0% { opacity: 0; transform: scale(.55) translateY(-10px); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
.scb-intro__zeile { position: absolute; z-index: 4; top: calc(50% + clamp(70px, 8vw, 100px)); margin: 0; font-family: "Noto Sans", sans-serif; font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .4em; text-transform: uppercase; opacity: 0; animation: scb-i-zeile .9s ease both; animation-delay: 4.9s; }
@keyframes scb-i-zeile { 0% { opacity: 0; letter-spacing: .9em; } 100% { opacity: .8; letter-spacing: .4em; } }

/* Flutlicht-Blitz als Übergang zur Seite */
.scb-intro__blitz { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 45%, #fffbe0, var(--gelb) 45%, rgba(255,247,48,0) 75%); opacity: 0; mix-blend-mode: screen; animation: scb-i-blitz .9s ease-in-out both; animation-delay: 5.6s; }
@keyframes scb-i-blitz { 0% { opacity: 0; } 35% { opacity: .9; } 100% { opacity: 0; } }

/* Überspringen */
.scb-intro__skip { position: fixed; z-index: 100001; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); padding: 12px 20px; border-radius: 30px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; font: 600 13px/1 "Noto Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: scb-i-zeile .6s ease both; animation-delay: .8s; }
.scb-intro__skip:hover, .scb-intro__skip:focus-visible { background: #FFF730; color: #101010; border-color: #FFF730; }
.scb-ohne-intro .scb-intro__skip, .scb-intro-fertig .scb-intro__skip { display: none; }

/* Die Startseite übernimmt: Hero-Inhalte laufen nach dem Intro ein */
.scb-intro-laeuft .hero .headline-hero, .scb-intro-laeuft .hero .eyebrow, .scb-intro-laeuft .hero .lead, .scb-intro-laeuft .hero .scb-spiel { opacity: 0; }
.scb-intro-fertig .hero .eyebrow, .scb-intro-fertig .hero .headline-hero, .scb-intro-fertig .hero .lead, .scb-intro-fertig .hero .scb-spiel { animation: scb-i-hero .9s cubic-bezier(.2,.7,.2,1) both; }
.scb-intro-fertig .hero .headline-hero { animation-delay: .08s; }
.scb-intro-fertig .hero .lead { animation-delay: .18s; }
.scb-intro-fertig .hero .scb-spiel { animation-delay: .3s; }
@keyframes scb-i-hero { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 767px) {
	.scb-intro__balken { animation-name: scb-i-balken-mobil; }
	@keyframes scb-i-balken-mobil { 0% { transform: scaleY(1); } 14% { transform: scaleY(.3); } 86% { transform: scaleY(.3); } 100% { transform: scaleY(0); } }
	.scb-intro__wort--zwoelf { -webkit-text-stroke-width: 1.5px; }
}

/* Intro-Text in Big Shoulders Display */
.scb-intro__text { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; letter-spacing: .005em; line-height: 1; }