/* ════ szene.css — der Rest der Seite im Material der Bühne (Entscheidung Ferdinand 17.10.2026: „nur veredeln wie SABESUS“) ════
   Wird auf jeder Seite nach styles.css geladen. Aufbau und Texte bleiben, neu sind:
   - Seitenkopf der Unterseiten mit einer Szene aus der Bühne (data-szene="sN-poster|ende" an .page-head), rechts angelegt
     und nach links ins Nachtblau auslaufend wie die Abdunklung der Bühne; am Handy liegt sie abgedunkelt hinter dem Text
   - Abschluss-Block (.cta) der Unterseiten vor „Rand des Alls“ (data-szene="s4-ende")
   - Glutkante statt grauer Trennlinie zwischen den Abschnitten (heller Kern in der Mitte, zu den Rändern auslaufend)
   - ruhigere Leuchtkugeln: stehen still und leuchten schwächer (die animierten 80-px-Weichzeichner kosteten dauerhaft Rechenzeit)
   Die Szenenbilder liegen in assets/szenen/ (1600 und 900 px, aus den 1080p-Mastern der Clips). */

:root {
  --glut-hell: #ff7a4f;
  --glut-kante: linear-gradient(90deg, rgba(254, 61, 17, 0) 0%, rgba(254, 61, 17, .28) 20%, rgba(255, 122, 79, .62) 50%, rgba(254, 61, 17, .28) 80%, rgba(254, 61, 17, 0) 100%);
}

/* ── Glutkante zwischen den Abschnitten ───────────────────────────────── */
.page-head, .section-pad, .section-pad-tight, .cta, .kpi, .about, .services {
  border-bottom: 1px solid transparent;
  border-image: var(--glut-kante) 1;
}

/* ── Leuchtkugeln ruhiger ─────────────────────────────────────────────── */
.glow-orb { animation: none !important; opacity: .3; will-change: auto; }
.glow-orb.accent-soft { opacity: .36; }
.glow-orb.warm { opacity: .22; }

/* ── Seitenkopf mit Szene ─────────────────────────────────────────────── */
.page-head[data-szene] .glow-field { display: none; }
.page-head[data-szene]::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  width: min(74%, 1500px);
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(1, 1, 11, .78) 26%, rgba(1, 1, 11, .3) 58%, rgba(1, 1, 11, .12) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(1, 1, 11, .55) 22%, rgba(1, 1, 11, 0) 50%),
    linear-gradient(180deg, rgba(1, 1, 11, .5) 0%, rgba(1, 1, 11, 0) 22%),
    var(--szene) 50% 50% / cover no-repeat;
}
.page-head[data-szene] h1 { text-shadow: 0 2px 30px rgba(1, 1, 11, .55); }

/* ── Abschluss-Block mit Szene ────────────────────────────────────────── */
.cta[data-szene] .glow-field, .cta[data-szene] .cta-rocket { display: none; }
/* Untertitel und Knöpfe liegen auf der hellen Atmosphäre: Mitte kräftig abdunkeln, Text mit Schatten */
.cta[data-szene] .cta-sub { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 14px rgba(1, 1, 11, .95), 0 0 2px rgba(1, 1, 11, .9); }
.cta[data-szene] h2 { text-shadow: 0 2px 30px rgba(1, 1, 11, .6); }
.cta[data-szene] {
  background:
    radial-gradient(ellipse 58% 62% at 50% 50%, rgba(1, 1, 11, .8) 0%, rgba(1, 1, 11, .5) 55%, rgba(1, 1, 11, .1) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(1, 1, 11, 0) 22%, rgba(1, 1, 11, 0) 78%, var(--bg) 100%),
    var(--szene) 50% 50% / cover no-repeat,
    var(--bg);
}
.cta[data-szene]::before { opacity: .25; }

/* ── Szenen: Bildadressen (1600 px, am Handy 900 px) ─────────────────── */
[data-szene="s0-poster"] { --szene: url(assets/szenen/s0-poster-1600.webp?v=403e648a); }
[data-szene="s0-ende"]   { --szene: url(assets/szenen/s0-ende-1600.webp?v=4424decc); }
[data-szene="s1-poster"] { --szene: url(assets/szenen/s1-poster-1600.webp?v=d0a4dd2d); }
[data-szene="s1-ende"]   { --szene: url(assets/szenen/s1-ende-1600.webp?v=36e86730); }
[data-szene="s2-poster"] { --szene: url(assets/szenen/s2-poster-1600.webp?v=c7a4487d); }
[data-szene="s2-ende"]   { --szene: url(assets/szenen/s2-ende-1600.webp?v=22fde56e); }
[data-szene="s3-poster"] { --szene: url(assets/szenen/s3-poster-1600.webp?v=3b7e80b6); }
[data-szene="s3-ende"]   { --szene: url(assets/szenen/s3-ende-1600.webp?v=1b7b1f9c); }
[data-szene="s4-poster"] { --szene: url(assets/szenen/s4-poster-1600.webp?v=7d0838c1); }
[data-szene="s4-ende"]   { --szene: url(assets/szenen/s4-ende-1600.webp?v=b850d376); }
[data-szene="s5-poster"] { --szene: url(assets/szenen/s5-poster-1600.webp?v=017ab5af); }
[data-szene="s5-ende"]   { --szene: url(assets/szenen/s5-ende-1600.webp?v=6b663166); }

@media (max-width: 900px) {
  [data-szene="s0-poster"] { --szene: url(assets/szenen/s0-poster-900.webp?v=5ef2207e); }
  [data-szene="s0-ende"]   { --szene: url(assets/szenen/s0-ende-900.webp?v=da7475da); }
  [data-szene="s1-poster"] { --szene: url(assets/szenen/s1-poster-900.webp?v=48e1cd02); }
  [data-szene="s1-ende"]   { --szene: url(assets/szenen/s1-ende-900.webp?v=0c57993c); }
  [data-szene="s2-poster"] { --szene: url(assets/szenen/s2-poster-900.webp?v=326ce7b6); }
  [data-szene="s2-ende"]   { --szene: url(assets/szenen/s2-ende-900.webp?v=e4e7a6ef); }
  [data-szene="s3-poster"] { --szene: url(assets/szenen/s3-poster-900.webp?v=1edc2773); }
  [data-szene="s3-ende"]   { --szene: url(assets/szenen/s3-ende-900.webp?v=cda5fa97); }
  [data-szene="s4-poster"] { --szene: url(assets/szenen/s4-poster-900.webp?v=608a61a5); }
  [data-szene="s4-ende"]   { --szene: url(assets/szenen/s4-ende-900.webp?v=9e436964); }
  [data-szene="s5-poster"] { --szene: url(assets/szenen/s5-poster-900.webp?v=22a2af88); }
  [data-szene="s5-ende"]   { --szene: url(assets/szenen/s5-ende-900.webp?v=08883a92); }
}

/* Handy und schmale Fenster: Szene über die ganze Breite, gleichmäßig abgedunkelt hinter dem Text */
@media (max-width: 720px) {
  .page-head[data-szene]::before {
    width: 100%;
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(1, 1, 11, .8) 38%, rgba(1, 1, 11, .74) 100%),
      var(--szene) 50% 30% / cover no-repeat;
  }
  .cta[data-szene] {
    background:
      linear-gradient(0deg, rgba(1, 1, 11, .55), rgba(1, 1, 11, .55)),
      radial-gradient(ellipse 90% 60% at 50% 50%, rgba(1, 1, 11, .75) 0%, rgba(1, 1, 11, .3) 100%),
      linear-gradient(180deg, var(--bg) 0%, rgba(1, 1, 11, 0) 18%, rgba(1, 1, 11, 0) 82%, var(--bg) 100%),
      var(--szene) 50% 50% / cover no-repeat,
      var(--bg);
  }
}