/* Intro zum Start · Bea (Webdesign) · 2026-10-29
   Entwurf von Jenny (Social Media), von Christoph am 29.10. freigegeben („Das ist perfekt“).
   Christoph 29.10.: „das soll alles direkt auf der Seite passieren und nicht wie ein Video“ – darum kein schwarzer Vorhang:
   Die Bühne liegt im Startbild (.hero-stage). Das Foto wird dunkler (Bühne schaffen), darauf laufen Countdown und Adresse,
   danach steigt „Kämpfer“ wie gewohnt auf (ca. 7 s, js/intro.js).
   Fotoszene (drei Bilder, „Der neue Weg beginnt / mit diesem Shooting.“): seit 29.10. abends in „Das passiert gerade“
   (Christoph: „ein bisschen nach hinten verschieben … in den Fotoeffekt übergeht“), gesteuert von js/signal.js.
   Alle Klassen beginnen mit „in-“, damit nichts mit style.css zusammenstößt.
   html.intro-an: Countdown läuft und sperrt das Scrollen. */
html.intro-an, html.intro-an body { overflow: hidden; }
html.intro-an .motion-hint { display: none; }

.in-buehne { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.in-teil1, .in-skip { display: none; }

/* Das Startbild tritt zurück, solange das Intro spielt, und kommt danach wieder */
.in-dunkel { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, rgba(10,22,52,.72), rgba(4,7,14,.9) 75%); opacity: 0; transition: opacity 1s ease; }
html.intro-an .in-dunkel { opacity: 1; transition: none; }
.hero-copy { transition: opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1); }
html.intro-an .hero-copy { opacity: 0; translate: 0 22px; transition: none; }
html.intro-an .hero-hint, html.intro-an .hero-cal { opacity: 0 !important; }
html.intro-an .t-fighter { animation: none; }

/* ---------- Countdown + Adresse, mitten auf dem Foto ---------- */
html.intro-an .in-teil1 { display: grid; position: absolute; inset: 0; place-items: center; }
.in-teil1.weg { animation: in-weg .7s ease-in forwards; }
@keyframes in-weg { to { opacity: 0; filter: blur(6px); transform: scale(1.04); } }
.in-gitter { position: absolute; inset: auto -20% -10% -20%; height: 70%; background-image: linear-gradient(rgba(156,194,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(156,194,255,.35) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .3; transform: perspective(600px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.in-zahlbox { position: relative; width: min(62vw, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.in-zahlbox[hidden], .in-domain[hidden] { display: none; }
.in-zahlbox svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.in-zahlbox circle { fill: none; stroke-width: 3; }
.in-ring-hg { stroke: rgba(156,194,255,.22); }
.in-ring { stroke: #2a72ff; stroke-linecap: round; filter: drop-shadow(0 0 8px #2a72ff); }
.in-zahl { font-size: min(38vw, 210px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #f2f5fa; text-shadow: 0 0 30px rgba(42,114,255,.55); }
.in-zahl.neu { animation: in-zahl .95s cubic-bezier(.2,.8,.2,1) both; }
@keyframes in-zahl { 0% { opacity: 0; transform: scale(1.6); filter: blur(10px); } 25% { opacity: 1; transform: scale(1); filter: blur(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.85); } }
.in-domain { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; padding: 0 16px; text-align: center; }
.in-url { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 500; font-size: clamp(17px, 4.4vw, 54px); color: #f2f5fa; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 0 18px rgba(156,194,255,.6), 0 0 42px rgba(42,114,255,.45); }
.in-url .w { color: #9cc2ff; }
.in-strich { height: 3px; width: 0; background: linear-gradient(90deg, transparent, #2a72ff, transparent); box-shadow: 0 0 14px #2a72ff; transition: width 1s cubic-bezier(.2,.8,.2,1); justify-self: center; }
.in-domain.an .in-strich { width: min(86vw, 760px); }
.in-motto { font-size: clamp(13px, 1.8vw, 17px); color: #b7c0d2; letter-spacing: .32em; text-transform: uppercase; opacity: 0; transition: opacity .6s .9s; }
.in-domain.an .in-motto { opacity: 1; }
.in-scan { position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(transparent, rgba(42,114,255,.22), transparent); }
.in-scan.an { animation: in-scan 1.1s ease-in-out; }
@keyframes in-scan { to { top: 100%; } }

/* „Überspringen“ während des Countdowns */
.in-skip.da { display: block; position: fixed; z-index: 10001; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font: 600 14px/1 Inter, system-ui, sans-serif; color: #f2f5fa; background: rgba(13,20,38,.85); border: 1px solid rgba(156,194,255,.35); border-radius: 999px; padding: 11px 16px; cursor: pointer; }
.in-skip:hover { background: rgba(42,114,255,.35); }
.in-skip:focus-visible { outline: 2px solid #9cc2ff; outline-offset: 3px; }

/* ---------- Fotoszene in „Das passiert gerade“ (js/signal.js setzt .is-fotos / .is-fotos-weg an .sig-run) ----------
   Längere Strecke, damit nach „Das passiert gerade.“ Platz für die Fotos ist (vorher 250 bzw. 210 Bildschirmhöhen-Prozent). */
.sig-run { height: calc(390 * var(--fh, 1vh)); }   /* gilt auch am Handy: intro.css kommt nach style.css */
.sig-screen .in-teil2 { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: clamp(20px, 4.5vh, 40px); padding: 0 16px;
  pointer-events: none; clip-path: inset(calc((1 - var(--open)) * 49.9%) 0); opacity: 0; transition: opacity .6s ease; }
.sig-run.is-fotos .in-teil2 { opacity: 1; }
.sig-run.is-fotos-weg .in-teil2 { opacity: 0; transition-duration: .9s; }
/* Bilder lose verstreut: verschiedene Größen, leicht gedreht, überlappend; jedes erscheint für sich */
.in-collage { position: relative; z-index: 2; width: min(90vw, 640px); height: min(calc(50 * var(--fh, 1vh)), 420px); max-width: 100%; }
.in-collage figure { position: absolute; margin: 0; aspect-ratio: 3/4; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(156,194,255,.18); opacity: 0;
  filter: brightness(.3) blur(10px); transform: var(--lage) scale(1.12); transition: opacity .7s ease, filter .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.in-collage figure:nth-child(1) { --lage: rotate(-5deg); left: 2%; top: 6%; height: 82%; }
.in-collage figure:nth-child(2) { --lage: rotate(4deg); right: 3%; top: 0; height: 62%; z-index: 2; }
.in-collage figure:nth-child(3) { --lage: rotate(-2deg); left: 46%; bottom: 0; height: 56%; z-index: 3; }
.in-collage img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.15); transition: transform 4s cubic-bezier(.15,.6,.3,1); }
.sig-run.is-fotos .in-collage figure { opacity: 1; filter: brightness(1) blur(0); transform: var(--lage) scale(1); }
.sig-run.is-fotos .in-collage figure:nth-child(2) { transition-delay: .38s; }
.sig-run.is-fotos .in-collage figure:nth-child(3) { transition-delay: .76s; }
.sig-run.is-fotos .in-collage img { transform: scale(1); }
.in-streif { position: absolute; z-index: 5; left: -60%; top: 50%; width: 60%; height: 2px; margin-top: -1px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(156,194,255,.9), #fff, rgba(156,194,255,.9), transparent); box-shadow: 0 0 18px 4px rgba(42,114,255,.55); }
.sig-run.is-fotos .in-streif { animation: in-streif 1.4s .9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes in-streif { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
.in-satz { position: relative; z-index: 5; text-align: center; margin: 0; display: grid; gap: 10px; }
.in-ober { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 500; font-size: clamp(11px, 1.5vw, 14px); color: #b7c0d2; text-transform: uppercase; letter-spacing: 1.2em; opacity: 0;
  transition: letter-spacing 1.6s cubic-bezier(.15,.6,.3,1), opacity .8s; }
.sig-run.is-fotos .in-ober { letter-spacing: .45em; opacity: 1; transition-delay: 1s; }
.in-titel { font-size: clamp(26px, 5vw, 52px); font-weight: 800; color: #f2f5fa; letter-spacing: .3em; opacity: 0; filter: blur(10px); white-space: nowrap; text-shadow: 0 0 30px rgba(42,114,255,.35);
  transition: letter-spacing 1.8s cubic-bezier(.15,.6,.3,1), opacity 1s, filter 1s; }
.sig-run.is-fotos .in-titel { letter-spacing: -.01em; opacity: 1; filter: none; transition-delay: 1.4s; }
.in-titel em { font-style: normal; color: #9cc2ff; }
/* „Bewegung reduzieren“: „Das passiert gerade“ steht still (style.css), die Fotoszene entfällt; die Meldung darunter sagt dasselbe */
html.motion-reduce .sig-screen .in-teil2 { display: none; }

/* ---------- Start 30.10.: „NEU“-Marken für das Shooting 2026 (Aktuelles, Album-Kachel, Chip) und Kopf im Album ---------- */
.sig-neu, .album-neu, .chip-neu { display: inline-block; font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #071331; background: #9cc2ff; border-radius: 4px; padding: 4px 6px; }
.sig-neu { font-size: 11px; }
.album-neu { margin-left: 6px; padding: 3px 5px; font-size: 9px; vertical-align: 1px; white-space: nowrap; }
.chip-neu { margin-left: 6px; padding: 3px 5px; font-size: 9px; vertical-align: 1px; }
.album-sub-neu { display: grid; gap: 4px; margin: 4px 0 20px; }
.album-sub-neu strong { font-size: clamp(20px, 2.4vw, 26px); color: var(--text, #f2f5fa); letter-spacing: -.01em; }
.album-sub-neu span { font-size: 13px; letter-spacing: .08em; color: #9cc2ff; }
.album-sub-neu p { margin: 6px 0 0; color: var(--text-2, #b7c0d2); }

/* „Bewegung reduzieren“ (Wahl des Besuchers, wie auf der ganzen Seite): Countdown kurz und ruhig */
html.motion-reduce .in-zahl.neu, html.motion-reduce .in-scan.an, html.motion-reduce .in-teil1.weg { animation: none; }
html.motion-reduce .in-zahl.neu { opacity: 1; }
html.motion-reduce .in-strich { transition-duration: .01s; }
/* 30.10. Christoph: „hinter die Bilder aus dem Effekt bitte weißen Schatten“ (PC und Handy) */
.in-collage figure { box-shadow: 0 0 46px 6px rgba(255,255,255,.26), 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.35); }
/* 30.10. Christoph: Willkommensvideo „irgendwann klein hinten im Bild erscheinen und dann größer werden, bis man es angucken kann“.
   Ersetzt den Auftritt „Schärfe ziehen“ (style.css, 24.10.). Beim Scrollen (--vid 0…1 aus main.js) kommt Christoph aus der Tiefe:
   erst klein, dunkler und leicht unscharf, dann wächst er auf volle Größe. PC und Handy. „Bewegung reduzieren“: sofort in voller Größe. */
.hero-cut.cutout { opacity: clamp(0, calc(var(--vid, 0) * 4), 1);
  filter: blur(calc((1 - var(--vid, 0)) * 5px)) brightness(calc(.5 + var(--vid, 0) * .5));
  transform: scale(calc(.14 + var(--vid, 0) * .86)); transform-origin: 50% 45%; }
html.motion-reduce .hero-cut.cutout { opacity: 1; filter: none; transform: none; }
/* 30.10. Christoph zum neuen Startbild: „Kannst Du mich ein bisschen weiter nach rechts schieben ?“ – nur PC, Handy bleibt.
   Das Bild ist breiter als die Bühne und ragt rechts hinaus. So rückt er nach rechts, ohne Lücke links. */
@media (min-width: 701px) { .hero-stage .hero-layer img { width: calc(100% + 10vw); max-width: none; } }
/* 30.10. Stephis Hochformat-Bilder (2:3) in der Fotoszene: Ausschnitt etwas nach oben, damit der Kopf drin bleibt */
.in-collage img { object-position: 50% 22%; }
/* 30.10. Christoph: Stephis Logo im Album, „damit man erkennt, dass sie die Fotografin ist“ (PC und Handy) */
.album-sub-neu .album-logo { width: min(240px, 62vw); height: auto; margin: 10px 0 4px; opacity: .92; }
/* 30.10. Christoph: Meldung „Shooting 2026“ mit Stephis Bild 16 (SW) und ihrem Logo. Ausschnitt oben, damit der Kopf drin bleibt (Handy: 300 px hoch, quer) */
.sig-media img.sig-stephi { object-position: 50% 0%; }
.sig-copy .sig-logo { display: block; width: min(220px, 58vw); height: auto; margin: -8px 0 26px; opacity: .92; }
/* 30.10. Christoph (Handy): Willkommensvideo beim Abspielen „groß machen“ mit leicht transparenter Bühne dahinter, „nach dem Abspielen muss das wieder verschwinden“.
   Nur Handy, PC bleibt. Solange .is-playing (main.js) dunkelt .hero-dim das Startbild samt Text ab, das Video wächst auf fast volle Höhe.
   Ende oder Stopp nimmt die Klasse weg: Bühne blendet aus, Video schrumpft auf die alte Größe zurück. */
@media (max-width: 700px) {
  .hero-dim { transition: opacity .5s ease, backdrop-filter .5s ease; }
  .hero-cut.cutout { transition: top .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), margin-left .5s cubic-bezier(.2,.8,.2,1); }
  .hero-stage:has(.hero-cut.is-playing) .hero-dim { z-index: 3; opacity: 1; background: rgba(5, 9, 22, .7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hero-stage .hero-cut.cutout.is-playing { z-index: 6; top: max(64px, 8svh); height: min(84svh, 158vw); width: min(47.25svh, 88.9vw); margin-left: max(-23.6svh, -44.45vw); }
  .hero-stage .hero-cut.cutout.is-playing .cutout-play { left: 50%; right: auto; bottom: 1%; transform: translateX(-50%); }
}
html.motion-reduce .hero-cut.cutout { transition: none; }