/* signUP — Komposition „Vom Scan zur Seite", Autoplay in der eigenen
   Sektion #brand-scan der Startseite. Bis 2026-09-17 lief sie im Hero.
   ===================================================================
   Die Bühne ist auf 1600 × 900 gezeichnet und wird als Ganzes skaliert
   (transform: scale). Dadurch stimmt jede Koordinate aus der Vorlage,
   egal wie breit das Fenster ist.

   Der Untertitel steht bewusst AUSSERHALB der skalierten Bühne — sonst
   schrumpft seine Schrift auf dem Handy mit der Bühne mit und wird unlesbar.

   Ohne JavaScript bleibt nichts stehen: .scn-on schaltet die Bühne frei. */

.scn {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Breiter als der Textcontainer (1160): die Komposition ist das Herzstück
     ihrer Sektion und darf über den Text hinauslaufen. Der Wert bindet erst ab rund
     1260 px Fensterbreite, darunter ändert sich nichts. Wo die Bühne
     höhenbegrenzt ist (flaches Fenster), ändert er ohnehin nichts. */
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px 6px;
}

.scn-view { display: none; }
.scn-on .scn-view { display: block; }
.scn-on .scn-view {
  position: relative;
  /* Der Deckel ist die Hoehe, die die Buehne bei dieser BREITE ausnutzen
     kann: im breiten Zuschnitt ist sie 1386 x 704 gezeichnet, also hoechstens
     0,508 * Breite hoch (abzueglich der 48 px Innenabstand). Ohne diese
     Fesselung wird der Kasten auf einem schmalen, hohen Fenster hoeher als
     die Komposition je wird: bei 1059 x 1197 standen 156 px Leerraum INNEN
     im Kasten. Gleiche Regel wie im schmalen Zuschnitt, nur anderer Faktor.
     768 px ist dieselbe Rechnung am anderen Ende: .scn endet bei 1560 px,
     die Buehne also bei 1512, und 1512 * 704 / 1386 = 768. Der Term mit
     51vw sieht das nicht, weil vw weiterwaechst, wenn .scn es nicht mehr
     tut. Mit dem alten festen Deckel von 880 px standen bei 2560 x 1440
     wieder 38 px Leerraum im Kasten. */
  height: clamp(300px, 52vh, min(768px, calc(51vw - 24px)));
}

/* Kein eigener Grund und kein Rahmen: die Komposition schwebt auf dem
   dunklen Verlauf der Sektion, statt wie ein eingebetteter Videoplayer zu
   wirken. Die weichen Lichtflächen dürfen deshalb über den Kasten
   hinauslaufen, die Sektion schneidet sie ab. */
.scn-bg { position: absolute; inset: 0; pointer-events: none; }

.scn-stage {
  position: absolute;
  left: 0; top: 0;
  width: 1600px; height: 900px;
  transform-origin: 0 0;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ---------- Untertitel ---------- */
/* Der Untertitel steht UNTER der Bühne, nicht darüber: überlagert verdeckt
   er beim Zerlegen genau die unterste Platte, und die Bühne müsste dafür
   kleiner werden. */
.scn-cap {
  display: none;
  margin: .7rem auto 0;
  max-width: 46ch;
  padding: 0 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: rgba(255,255,255,.74);
}
/* Blockbox mit fester Mindesthöhe, NICHT inline-flex: der Untertitel
   wechselt in der Schleife zwischen leer, ein- und zweizeilig, und eine
   inline-Box ändert dabei auch ihre Grundlinie — alles darunter wanderte
   dadurch alle paar Sekunden um 8 px. Als Blockbox mit width:fit-content
   ist die Höhe genau die reservierte. */
.scn-on .scn-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
}
.scn-cap:empty { opacity: 0 !important; visibility: hidden; }

/* ---------- Bühnenteile ---------- */
.scn-amb { position: absolute; border-radius: 50%; }
.scn-amb1 { left: -14%; top: -34%; width: 62%; height: 110%;
  background: radial-gradient(circle, rgba(47,160,74,.20), rgba(47,160,74,0) 68%); filter: blur(6px); }
.scn-amb2 { right: -18%; bottom: -38%; width: 60%; height: 110%; }

.scn-3d { position: absolute; left: 210px; top: 150px; width: 860px; height: 604px; perspective: 1700px; }
.scn-cam { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.scn-shell {
  position: absolute; inset: 0; border-radius: 16px; transform-style: preserve-3d;
  transform: translateZ(-70px); background: #0b1512;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.9);
}
.scn-bar {
  height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 16px 16px 0 0;
}
.scn-dots { display: flex; gap: 6px; }
.scn-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3f5049; }
.scn-omni {
  flex: 1; height: 24px; border-radius: 9999px; background: rgba(255,255,255,.07);
  display: flex; align-items: center; padding: 0 12px; gap: 8px;
}
.scn-live { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; }
.scn-urltext { font: 500 12px/1 'Inter', sans-serif; color: rgba(255,255,255,.62); letter-spacing: .01em; }
.scn-shellpage { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; border-radius: 0 0 16px 16px; opacity: .96; }

.scn-axis {
  position: absolute; left: 0; top: 0; width: 1000px; height: 0;
  transform: translate3d(430px, 324px, -540px) rotateY(-90deg);
  border-top: 1px dashed #4caf50;
}

.scn-plate { position: absolute; left: 0; width: 860px; transform-style: preserve-3d; will-change: transform; }
.scn-sub {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.85);
}
.scn-hi {
  position: absolute; inset: -1px; border-radius: 10px; pointer-events: none;
  border: 1px solid #4caf50; box-shadow: 0 0 24px -4px #4caf50;
}
.scn-tick { position: absolute; width: 9px; height: 9px; }
.scn-lab { position: absolute; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.scn-lab i { width: 26px; height: 1px; background: rgba(255,255,255,.35); }
.scn-lab span { font: 900 11px/1 'Inter', sans-serif; letter-spacing: .18em; color: rgba(255,255,255,.62); }
.scn-src, .scn-evt { position: absolute; inset: 0; }

.scn-beam {
  position: absolute; left: 0; width: 860px; height: 2px; transform: translateZ(60px);
  background: linear-gradient(90deg, transparent, #4caf50, #8de9a1, #4caf50, transparent);
  box-shadow: 0 0 30px 4px #4caf50;
}
.scn-beamglow {
  position: absolute; left: 0; width: 860px; height: 90px; transform: translateZ(40px);
  background: linear-gradient(180deg, rgba(47,160,74,0), rgba(47,160,74,.20));
}

/* ---------- Designsystem-Panel ---------- */
.scn-panel {
  position: absolute; left: 1158px; top: 126px; width: 340px; height: 452px;
  border-radius: 20px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px);
}
.scn-panelhead {
  padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.scn-panelhead span { font: 900 10px/1 'Inter', sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.scn-panelrow { position: absolute; left: 22px; font: 900 10px/1 'Inter', sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.5); }
.scn-rail { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 10px; }
.scn-rail b { display: block; border-radius: 50%; transition: width .18s ease, height .18s ease, opacity .18s ease, box-shadow .18s ease; }
.scn-railname { margin-left: 4px; font: 700 11px/1 'Inter', sans-serif; letter-spacing: .04em; }

.scn-chip { position: absolute; transform-origin: 0 0; }
.scn-sw { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 10px 24px -10px rgba(0,0,0,.9); }
.scn-tag {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.9);
}
.scn-tag i {
  width: 26px; height: 26px; border-radius: 8px; background: rgba(47,160,74,.18);
  border: 1px solid rgba(76,175,80,.4); display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 'Inter', sans-serif; font-style: normal; color: #a5e2ad;
}
.scn-tag span { font: 600 12px/1 'Inter', sans-serif; color: rgba(255,255,255,.72); }

.scn-flash { position: absolute; left: 210px; top: 150px; width: 860px; height: 604px; border-radius: 16px; pointer-events: none; mix-blend-mode: screen; }

/* Die Endkarte muss über die Bühne hinausbluten: seitlich der 1600 px
   liegt der Letterbox-Rand, sonst steht dort eine harte Kante. */
/* Kurze Fenster (Laptop mit Browserleiste): die Bühne wird flacher, sonst
   schneidet die Falz sie unten ab. Greift über die HÖHE, nicht die Breite —
   betroffen ist ein 1440x720-Laptop genauso wie ein niedriges Fenster. */
@media (max-height: 860px) {
  .scn-on .scn-view { height: clamp(230px, 44vh, 380px); }
}

/* Große Monitore: ohne diese Regel hört die Komposition bei 1160 x 600 auf
   zu wachsen, egal wie groß der Bildschirm ist. Auf 2560x1440 stand sie
   dadurch als kleine Insel in einer leeren Fläche. Beide Deckel steigen,
   und zwar nur dort, wo Breite UND Höhe das hergeben. */
@media (min-height: 950px) {
  .scn-on .scn-view { height: clamp(300px, 56vh, min(768px, calc(51vw - 24px))); }
}

/* ---------- Mobil: Panel und Beschriftungen fallen weg ---------- */
@media (max-width: 860px) {
  .scn { padding: 0 16px 4px; }
  .scn-on .scn-view { height: clamp(230px, 34vh, 330px); }
  .scn-on .scn-cap { font-size: .88rem; margin-top: .55rem; min-height: 52px; }
}

/* Hohe schmale Schirme (Telefon hochkant ab 700 px, Tablets): dort war die
   Buehne hoehen-ausgehungert. Ein 820x1180-Tablet fuhr sie auf Faktor 0,47
   statt der moeglichen 0,85, weil der feste Deckel bei 330 px lag, und der
   frei bleibende Platz landete als Leere ueber der Ueberschrift.

   Die neue Obergrenze ist die Hoehe, die die Buehne bei dieser BREITE
   ueberhaupt ausnutzen kann: im schmalen Zuschnitt ist die Komposition
   930 x 704 gezeichnet, also hoechstens 0,757 * Breite hoch. Mehr Hoehe
   macht sie nicht groesser, sie liesse nur Platz leer.

   min-height: 700px ist kein Schoenheitswert, sondern die Grenze, unterhalb
   derer der Hero ohnehin nicht mehr ganz auf den Schirm passt. Auf einem
   360x640-Telefon steht der Untertitel schon lange unter der Falz; eine
   hoehere Buehne wuerde ihn nur weiter hinunterschieben. Dort bleibt es
   deshalb exakt beim alten Wert. */
@media (max-width: 860px) and (min-height: 700px) {
  .scn-on .scn-view { height: clamp(230px, 42vh, calc(75vw - 24px)); }
}

/* ---------- Reduzierte Bewegung: ein Standbild statt der Schleife ---------- */
.scn-still .scn-cap { display: none; }

/* ---------- Eigene Sektion ----------
   Kopf und Bühne teilen sich die Sektion: weniger Abstand unter dem Kopf
   als sonst, damit Bühne und Untertitel beim Ankommen im Bild stehen. */
.section-scene .section-head { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.section-scene { padding-bottom: clamp(48px, 7vw, 96px); }