/* ============================================================
   hero-split.css — Hero als Links/Rechts-Aufteilung
   Lokale Variante (index-split.html). Laedt NACH landing-blue.css
   und demo-scene.css und ueberschreibt nur den Hero + die Leiste.

   Aufbau:
     links   .hs-copy    Text, CTAs, Vertrauensleiste (mittig, wie Vorlage)
     rechts  .hs-visual  Bildflaeche + Demo-Szene + Text-Slider

   Die Demo-Szene (.mac-desktop) ist auf 1120 px Entwurfsbreite gebaut.
   In der halben Spalte wird sie deshalb als Ganzes skaliert
   (--hs-scale, gesetzt von index-split.html), statt ihre inneren
   clamp()-Werte zu verbiegen. Klicks bleiben dabei korrekt, weil
   transform die Trefferflaechen mitrechnet.
   ============================================================ */

/* ============================================================
   Intro-Choreografie (Vorlage: Video vom 17.08.)
   Reihenfolge: Orb, Badge, Ueberschrift Zeichen fuer Zeichen,
   Unterzeile, Buttons, Verfuegbarkeit, Logo-Laufband.
   Die Verzoegerung steht als --d (Millisekunden) am Element,
   damit die Abfolge im Markup ablesbar ist.
   ============================================================ */
/* Der Startzustand haengt an `.hs-js` (gesetzt von einem Zeilenskript im Kopf),
   NICHT an der Klasse allein: ohne JavaScript darf hier nichts unsichtbar
   bleiben. Genauso wenn requestAnimationFrame nicht laeuft, weil die Seite in
   einem Hintergrund-Tab geoeffnet wurde - dafuer gibt es unten zusaetzlich
   einen Zeitgeber. */
.hs-js .hs-anim {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.hero-split.hs-in .hs-anim {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
/* Ueberschrift: Wort bleibt zusammen (inline-block), Zeichen einzeln animiert */
.hs-word { display: inline-block; white-space: nowrap; }
.hs-char { display: inline-block; }
.hs-js .hs-char { opacity: 0; }
.hero-split.hs-in .hs-char {
  animation: hsChar 0.5s var(--ease-out) both;
  animation-delay: calc((var(--d, 0) + var(--i, 0) * 26) * 1ms);
}
@keyframes hsChar {
  from { opacity: 0; filter: blur(7px); transform: translateY(0.16em); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-js .hs-anim, .hs-js .hs-char { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------- Leiste: Links als Pillen-Gruppe (wie Vorlage) ---------- */
.hero-split-page .nav { padding-block: 14px; }
.hero-split-page .nav-links {
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 16, 32, 0.42);
  border: 1px solid var(--hair-2);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.hero-split-page .nav-links a { padding: 8px 14px; font-size: 14px; }
.hero-split-page .nav.scrolled { background: rgba(6, 9, 18, 0.78); }

/* ---------- Grundraster ---------- */
.hero.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-0);
}

/* ============================================================
   LINKS — Text
   ============================================================ */
.hs-copy {
  position: relative;
  z-index: 3;
  min-width: 0;   /* sonst spreizt das Laufband die Rasterspalte auf */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(96px, 12vh, 132px) clamp(24px, 4vw, 64px) clamp(44px, 8vh, 76px);
  background:
    radial-gradient(90% 60% at 50% 8%, rgba(30, 46, 79, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%);
}
/* feine Trennkante zur Bildflaeche */
.hs-copy::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hair-2) 30%, var(--hair-2) 70%, transparent);
  pointer-events: none;
}
.hs-copy-inner {
  width: 100%;
  max-width: 520px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orb ueber der Ueberschrift (WebGL, orb.js — dasselbe Shader wie in der App) */
.hs-orb {
  width: clamp(96px, 9vw, 132px);
  aspect-ratio: 1;
  margin-bottom: clamp(18px, 2.6vh, 30px);
  display: block;
  border-radius: 50%;
}
.hs-orb canvas { width: 100%; height: 100%; display: block; }
/* Rueckfall ohne WebGL: derselbe Verlauf wie .brand-orb */
.hs-orb:empty {
  background: radial-gradient(circle at 34% 28%, var(--sky) 0%, var(--ember) 30%, var(--crimson) 62%, var(--crimson-deep) 100%);
  box-shadow: inset 0 0 18px rgba(255, 250, 247, 0.35), 0 0 60px var(--crimson-glow);
}

.hero-split .hero-eyebrow { margin-bottom: 20px; }
.hero-split .display {
  margin: 0;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-shadow: none;
  text-wrap: balance;
}
.hero-split .lede {
  margin: 20px auto 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--text-2);
  text-shadow: none;
}
.hero-split .hero-cta { margin-top: 30px; }
.hero-split .hero-avail { margin-top: 22px; }

/* Vertrauensleiste unten links (Platz der Kundenlogos in der Vorlage) */
/* Abstand bewusst knapp: die Leiste muss oberhalb der Reveal-Schwelle
   (Viewport-Hoehe minus 8 %) liegen, sonst bleibt sie beim Laden unsichtbar,
   bis der Besucher einen Pixel scrollt. */
.hs-foot {
  width: 100%;
  min-width: 0;
  max-width: 520px;
  margin-top: clamp(24px, 3.4vh, 40px);
}
.hs-foot-label {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
}
/* Laufband: zwei identische Reihen nebeneinander, verschoben wird um genau
   eine Reihenbreite (50 %) - dadurch ist der Sprung am Ende unsichtbar.
   Die Maske laesst die Logos an beiden Raendern weich auslaufen. */
.hs-logos {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hs-logos-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 36px);
  padding-right: clamp(20px, 2.8vw, 36px);
  flex: none;
  /* Dauer kommt aus der gemessenen Reihenbreite (Skript), damit die
     Geschwindigkeit auf jedem Bildschirm gleich ist. Der Rueckfallwert gilt
     nur, falls das Skript nicht laeuft. */
  animation: hsMarquee var(--hs-band-dauer, 26s) linear infinite;
}
.hs-logos:hover .hs-logos-row { animation-play-state: paused; }
@keyframes hsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.hs-logos img {
  width: 28px; height: 28px;
  flex: none;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 0.25s var(--ease);
}
.hs-logos img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hs-logos-row { animation: none; }
  .hs-logos { justify-content: center; }
}

/* ============================================================
   RECHTS — Bildflaeche mit Demo-Szene und Slider
   ============================================================ */
/* RANDLOS (17.08.). Vorher stand die Bildfläche 12 px vom Fensterrand ab und
   war abgerundet - oben und rechts blieb dadurch ein dunkelblauer Streifen des
   Seitenhintergrunds stehen, gemeldet als „blau abgeschnitten". Das Bild geht
   jetzt bis an die Kante. Die Trennlinie zur Textspalte zeichnet ohnehin schon
   `.hs-copy::after`, ein eigener Rahmen hier ist nicht mehr nötig. */
.hs-visual {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  isolation: isolate;
}
.hs-visual-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.04);
  filter: brightness(0.62) saturate(0.85) hue-rotate(192deg);
}
.hs-visual-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 55% at 50% 44%, rgba(6, 9, 18, 0.15) 0%, rgba(6, 9, 18, 0.62) 100%),
    linear-gradient(180deg, rgba(6, 9, 18, 0.42) 0%, transparent 26%, transparent 52%, rgba(6, 9, 18, 0.86) 100%);
}

/* Buehne: die Szene wird als Ganzes skaliert und mittig gesetzt */
.hs-stage {
  position: absolute;
  inset: clamp(56px, 8vh, 92px) 0 clamp(112px, 16vh, 168px);
  z-index: 2;
}
/* Absolut mittig statt per Grid-Zentrierung: ein Rasterfeld schiebt ein Kind,
   das breiter ist als sein Feld, in Chrome an den Anfang zurueck (Schutz vor
   abgeschnittenem Inhalt) - die Szene sass dadurch rechts aus dem Bild. */
.hs-stage-fit {
  position: absolute;
  top: 50%; left: 50%;
  width: 1120px;
  transform: translate(-50%, -50%) scale(var(--hs-scale, 0.55));
  transform-origin: center center;
}
/* Basiswerte aus landing-blue.css neutralisieren (dort: Rand nach unten, Gutter) */
.hs-stage .hero-scene {
  margin: 0;
  padding-inline: 0;
  max-width: none;
  width: 1120px;
}

/* ── Demo-Szene: ohne Mac-Rahmen, Copilot-Fenster 10 % größer (17.08.) ──────
   Alles hier hängt an `.hero-split`, damit die alte Startseite unter /v1
   unverändert bleibt - beide teilen sich `demo-scene.css`.

   Weg fallen Schreibtisch-Hintergrund und Menüleiste: im Hero steht die Szene
   ohnehin schon auf einem Bild, ein zweites Bild dahinter ist nur Unruhe.
   Übrig bleibt, worum es geht - das Gesprächsfenster, die Copilot-Fenster,
   die Leiste und das Dock. */
.hero-split .mac-desktop {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* Ohne Rahmen gibt es nichts mehr zu beschneiden. Die 10 % größeren
     Overlays ragen weiter nach links, geclippt wird erst an der Bildfläche. */
  overflow: visible;
}
.hero-split .mac-menubar { display: none; }

/* 10 % GRÖSSER, ABER NICHT PER `transform` (18.08.).
   Erst stand hier `scale(1.1)`. Gemeldet: „der Transkriptiertext ist ein wenig
   unscharf" - und genau das macht eine skalierte Ebene: der Browser rastert
   den Text in seiner Ausgangsgrösse und zieht das Bild danach auf, die Kanten
   verwaschen. Sichtbar wurde es hier zusätzlich, weil die Aufbau-Animation mit
   `filter: blur()` ohnehin eine eigene Ebene erzwingt.
   Also echte Werte: Breite, Schriftgrad und Innenabstand um ein Zehntel höher.
   Nur auf dem Desktop - auf dem Handy sind die Fenster ohnehin schon breit. */
@media (min-width: 1000px) {
  .hero-split .sw-transcript { width: clamp(264px, 25.3%, 341px); }
  .hero-split .sw-transcript p { font-size: 16.5px; }
  .hero-split .sw-transcript .dp-title,
  .hero-split .demo-panel .dp-title { font-size: 14.3px; }
  .hero-split .demo-panel { width: 70.4%; max-width: 396px; }
  .hero-split .demo-einw .ew-list li { font-size: 13.75px; }
  .hero-split .demo-einw .ew-card { padding: 10px 12px; }
}
.hero-split .mac-deskarea .sw-bar.demo-bar { transform: scale(1.1); transform-origin: center top; }
/* Der Hinweis wächst über Schrift und Innenabstand, NICHT über `transform`:
   `badgePop` animiert beim Erscheinen genau diese Eigenschaft und würde eine
   feste Skalierung für die Dauer der Animation überschreiben. */
.hero-split .sw-badge { font-size: 11.6px; padding: 8px 14px; }

/* ── Aufbau der Szene (18.08.) ──────────────────────────────────────────────
   Nachgebaut aus der Bildschirmaufnahme des Wettbewerbers, Bild fuer Bild bei
   6 Bildern je Sekunde ausgewertet. Der Unterschied zur bisherigen Fassung ist
   nicht die Dauer, sondern die ART:

   - Dort SKALIERT alles leicht auf und wird scharf (aus ~0,94 und weich),
     bei uns schob es sich von unten herein (`demoRise`, translateY).
   - Dort kommt zuerst die HUELLE des Fensters, dann sein INHALT, dann die
     Bedienleiste, dann das Widget, zuletzt das Dock. Vorher waren Rahmen und
     Video bei uns ein Schritt.

   Reihenfolge und Zeiten hier: Fenster 0,15 s -> Video 0,5 s -> Leiste 0,95 s
   -> Transkript 1,25 s -> Dock 1,6 s. Alles endet nach rund 2,2 s. */
@keyframes hsAufbau {
  from { opacity: 0; transform: scale(0.94); filter: blur(7px); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hsAufblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-split .zoom-window {
  animation: hsAufbau 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}
.hero-split .scene-video {
  animation: hsAufblenden 0.6s ease 0.5s both;
}
/* Die Leiste NUR einblenden, kein `transform`: auf dem Handy traegt sie den
   Massstab 0,752, und eine zweite Skalierung wuerde ihn ueberschreiben. */
.hero-split .mac-deskarea .sw-bar {
  animation: hsAufblenden 0.5s ease 0.95s both;
}
.hero-split .sw-transcript {
  animation: hsAufbau 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s both;
}
.hero-split .mac-deskarea .sw-dock {
  animation: hsAufbau 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-split .zoom-window,
  .hero-split .scene-video,
  .hero-split .mac-deskarea .sw-bar,
  .hero-split .sw-transcript,
  .hero-split .mac-deskarea .sw-dock { animation: none; }
}

/* Das Einwaende-Fenster auf dem Desktop rund 10 px tiefer (18.08., auf Ansage).
   Die Basisregel setzt `bottom: 1%` bei rund 400 px Buehne, also etwa 4 px -
   deshalb hier ueber calc statt ueber einen neuen Prozentwert, sonst waere der
   Versatz bei jeder Buehnenhoehe ein anderer. */
/* GLEICHE ABSTÄNDE IN DER KASKADE (18.08., auf Ansage „der Abstand zwischen
   Transkribieren und Antwort soll derselbe sein wie zwischen Einwand-Hinweis
   und Transkribieren").

   Das ging vorher nicht zuverlässig, weil die Antwortkarte von UNTEN verankert
   war: ihre Höhe hängt am Text, also wanderte ihre Oberkante je nach Antwort
   nach oben - mal 13 px Abstand, mal klebte sie am Transkript. Ein fester
   Versatz kann das nicht heilen, er verschiebt nur, wo es klemmt.

   Jetzt steht die Kaskade fest: das Transkript bekommt eine feste Mindesthöhe
   (seine Unterkante liegt damit immer auf 44 %), und die Karte hängt an einer
   festen Oberkante darunter statt am Boden. Gemessen: Hinweis -> Transkript
   1,8 % der Bühne, Transkript -> Karte 2,0 %. */
@media (min-width: 1000px) {
  /* KEINE feste Höhe mehr (18.08.). Der Versuch, die Unterkante über
     `height: 45%` festzunageln, hat die Kaskade beruhigt und dafür ein Loch
     unter kurzen Sätzen hinterlassen („viel leerer Platz unter Text"). Das
     Fenster ist wieder so hoch wie sein Inhalt; dass die Karte trotzdem im
     gleichen Abstand folgt, rechnet jetzt das Skript aus (`karteNachziehen`
     in demo-scene.js) - das kann CSS nicht, weil kein Element die Höhe eines
     anderen kennt. */
  .hero-split .zoom-window .sw-transcript { top: 5%; }
  /* Der Hinweis steht frei über dem Transkript. Die Fenster dürfen über die
     Oberkante des Gesprächsfensters hinausragen - der Mac-Rahmen schneidet
     hier nichts mehr ab, und in der Vorlage stehen die Overlays genauso frei.
     -7 % statt -4 %: „ein bisschen freien Platz dazwischen". */
  .hero-split .zoom-window .sw-badge { top: -7%; }
  /* Startwert. Die endgültige Oberkante setzt `karteNachziehen` im Skript,
     sobald die Karte steht - sie richtet sich nach der echten Unterkante des
     Transkripts und übernimmt genau den Abstand, den der Hinweis oben hat. */
  .hero-split .demo-einw { top: 52%; bottom: auto; }
}

/* Text-Slider unten (Vorlage: Ueberschrift + Zeile, hier zusaetzlich Punkte) */
.hs-slider {
  position: absolute;
  left: 0; right: 0; bottom: clamp(26px, 4.4vh, 46px);
  z-index: 4;
  padding-inline: clamp(20px, 4vw, 48px);
  text-align: center;
}
.hs-slide {
  position: absolute;
  left: 0; right: 0; top: 0;
  padding-inline: clamp(20px, 4vw, 48px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.hs-slide.is-on { position: relative; opacity: 1; transform: none; }
.hs-slide h2 {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(6, 9, 18, 0.7);
}
.hs-slide p {
  margin: 8px 0 0;
  font-size: clamp(13px, 1.05vw, 15px);
  color: rgba(238, 242, 251, 0.78);
  text-shadow: 0 1px 20px rgba(6, 9, 18, 0.8);
}
.hs-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(14px, 2.2vh, 22px);
}
.hs-dot {
  width: 22px; height: 4px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(238, 242, 251, 0.26);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}
.hs-dot.is-on { width: 34px; background: var(--ember); box-shadow: 0 0 14px var(--ember-glow); }

@media (prefers-reduced-motion: reduce) {
  .hs-slide { transition: none; }
}

/* ============================================================
   Schmale Fenster: wieder untereinander (Text oben, Szene unten)
   ============================================================ */
@media (max-width: 1024px) {
  /* minmax(0, 1fr), nicht 1fr: `auto` als Minimum nimmt die Mindestbreite des
     Inhalts, und das Logo-Laufband ist breiter als ein Telefon. Gemessen auf
     375 px: die Textspalte wurde 565 px breit und lief seitlich hinaus. */
  .hero.hero-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .hs-copy {
    padding: 104px clamp(20px, 6vw, 40px) 34px;
  }
  .hs-copy::after { display: none; }
  .hs-foot { margin-top: 34px; }
  .hs-visual {
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3vw, 22px);
    padding-block: clamp(16px, 4vw, 26px) clamp(20px, 5vw, 30px);
  }
  /* Untereinander wird NICHT mehr skaliert: die Szene laeuft hier fluid mit der
     Breite (so wie auf der bestehenden Seite), sonst landet der Massstab am
     unteren Anschlag - auf 375 px gemessen 0.28, das ist unlesbar. */
  .hs-stage {
    position: relative;
    inset: auto;
    padding-inline: clamp(8px, 2.5vw, 18px);
  }
  .hs-stage-fit {
    position: static;
    width: 100%;
    transform: none;
  }
  .hs-stage .hero-scene { width: 100%; }
  .hs-slider {
    position: relative;
    left: auto; right: auto; bottom: auto;
    margin-top: auto;
  }
}
/* ── Demo-Szene auf dem Handy (18.08.) ──────────────────────────────────────
   Die 10 % von gestern galten fuer den Desktop und haben hier die
   Mobilgroessen aus `demo-scene.css` ueberstimmt: gemessen bei 375 px Fenster
   war die Notch-Bar 454 px breit (also links und rechts abgeschnitten) und das
   Antworten-Fenster 356 px, es ragte 6 px raus. Auf dem Handy gelten deshalb
   wieder die Mobilwerte, und darauf die gewuenschten Aenderungen. */
@media (max-width: 760px) {
  /* WIDGET 15 % GROESSER (18.08., auf Ansage). Fuer die Leiste ueber den
     Massstab (sie besteht aus Symbolen, da schadet Skalieren nicht):
     0,76 aus demo-scene.css, davon 0,752 nach zwei Korrekturen, mal 1,15
     macht 0,865.
     Fuer die FENSTER dagegen ueber echte Werte - Breite, Schriftgrad,
     Innenabstand. Eine skalierte Ebene rastert den Text in Ausgangsgroesse
     und zieht ihn danach auf; genau das war am 18.08. der gemeldete
     „unscharfe Transkriptiertext" auf dem Desktop. */
  .hero-split .mac-deskarea .sw-bar.demo-bar { transform: scale(0.865); }
  .hero-split .zoom-window .sw-transcript { width: 74%; }
  .hero-split .sw-transcript .dp-title { font-size: 12.6px; }
  .hero-split .sw-transcript .dp-body p { font-size: 14.4px; }
  /* Das Antworten-Fenster steht schon auf 94 % der Buehne - breiter geht
     nicht, ohne dass es hinausragt. Es waechst deshalb ueber Schrift und
     Innenabstand, also in die Hoehe. */
  .hero-split .demo-einw .dp-title { font-size: 12.6px; }
  .hero-split .demo-einw .ew-list li { font-size: 14.4px; line-height: 1.45; }
  .hero-split .demo-einw .ew-card { padding: 10px 13px; }
  .hero-split .demo-einw .ew-cat { font-size: 10.4px; }
  /* Die Vergroesserung gilt nur ab 1000 px, hier ist also nichts
     zurueckzunehmen - die Fenster stehen in ihren Mobilgroessen. */
  /* Antworten-Fenster: erst hoeher gesetzt, auf Zuruf wieder ein Stueck
     runter - es erscheint erst MIT der Antwort und darf dann tiefer stehen.
     Startwert; die endgueltige Oberkante rechnet `karteNachziehen` im Skript,
     seit 18.08. auch auf dem Handy (siehe dort). */
  .hero-split .demo-einw { bottom: 9%; }
  /* Der Einwand-Hinweis stand mit `top: 1%` zwei Pixel UNTER der Oberkante des
     Transkripts, also ueberlappend - gemessen -2 px. Er sitzt jetzt darueber,
     und weil `karteNachziehen` genau diesen Abstand als Mass nimmt, bekommt
     das Antworten-Fenster darunter automatisch denselben. */
  .hero-split .zoom-window .sw-badge { top: -6%; }

  /* DOCK AUS (18.08., auf Ansage: „die Mac Bar unten mit den Logos
     deaktivieren"). Auf dem schmalen Bild bringt die Symbolreihe wenig - die
     Aussage steht in der Zeile darunter („Live-Transkription" und die
     weiteren). Der Slider rueckt dadurch nach oben in den frei gewordenen
     Platz. Auf dem Desktop bleibt das Dock unberuehrt, diese Regel gilt nur
     hier im Handy-Block. */
  .hero-split .mac-deskarea .sw-dock { display: none; }
  /* Das Gespraechsfenster war 2:3 hoch und damit auf dem Handy laenger als
     noetig - der Rest der Szene rutschte dadurch weit nach unten. */
  .hero-split .zoom-window .scene-stage { aspect-ratio: 1 / 1; }
}

@media (max-width: 760px) {
  .hero-split-page .nav-links {
    background: none;
    border: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hs-orb { width: 84px; }
  .hs-logos img { width: 22px; height: 22px; }
}

/* ── Namensblase an den Logos (18.08.) ──────────────────────────────────────
   Gleiche Auskunft und gleiche Optik wie im Dock der Demo-Szene
   (`.dock-app::after` in demo-scene.css): „Funktioniert mit …".
   Sie haengt am Fussblock, nicht im Laufband - das ist `overflow: hidden`,
   dort waere sie abgeschnitten. Position setzt das Skript. */
.hs-foot { position: relative; }
.hs-logo-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(28, 28, 30, 0.94);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease);
  z-index: 5;
}
.hs-logo-tip.an { opacity: 1; }