/* ============================================================================
   SH_HEROVIDEO_V1 — iPhone-Mockup mit Klick-zum-Abspielen im Hero.
   Das Hero-Video (9:16) läuft in einem realistischen Telefon-Rahmen rechts neben
   „Ihr eigener Server. Ihre Daten. Ihr Wissen." Der kleine animierte Server
   rutscht als dezenter Akzent unter/hinter das Telefon.
   Verhalten (JS in sh-herovideo.js): Klick = Play/Pause, Auto-Pause beim
   Rausscrollen und beim Tab-Wechsel. Alles touch- & reduced-motion-sicher.
   ========================================================================== */

/* Telefon per Opacity ein- UND ausblenden — komplett JS-gesteuert (Eingangs-Fade
   + Scroll-Fade, wenn es oben rausläuft). Nur Opacity → GPU-billig, kein Ruckeln. */
/* Grid oben ausrichten, damit Telefon + Timeline immer im Bild sind (der große
   Server macht die linke Spalte hoch → zentriert würde das Telefon nach unten fallen). */
.hero-grid{align-items:start}
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  opacity:0;will-change:opacity}
@media(max-width:900px){.hero-grid{align-items:stretch}}
.hero-phone{position:relative;z-index:2;margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}

/* ---- Gerät (Rahmen) -------------------------------------------------------- */
.hero-phone__frame{
  position:relative;
  aspect-ratio:9/19.5;
  height:min(62vh,516px);      /* höhenbasiert → passt immer in den sichtbaren Bereich */
  width:auto;
  border-radius:42px;
  padding:10px;
  background:linear-gradient(150deg,#2b333c 0%,#161c22 44%,#0a0d11 100%);
  box-shadow:
    0 44px 84px -30px rgba(0,0,0,.78),
    0 10px 26px -12px rgba(0,0,0,.6),
    inset 0 0 0 1.5px rgba(255,255,255,.09),
    inset 0 1.5px 1px rgba(255,255,255,.16);
}
/* Seitentasten (Lautstärke + Power) als reine Deko */
.hero-phone__frame::before{content:"";position:absolute;left:-2.5px;top:128px;width:3px;height:56px;border-radius:3px;
  background:linear-gradient(#39434d,#20272e)}
.hero-phone__frame::after{content:"";position:absolute;right:-2.5px;top:152px;width:3px;height:50px;border-radius:3px;
  background:linear-gradient(#39434d,#20272e)}

/* ---- Bildschirm ------------------------------------------------------------ */
.hero-phone__screen{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;
  background:#05070a;isolation:isolate}
.hero-phone__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;background:#05070a}

/* Dynamic-Island */
.hero-phone__island{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:32%;height:8.4%;max-height:26px;background:#000;border-radius:16px;z-index:4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.hero-phone__island::after{content:"";position:absolute;right:15%;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2c4d63,#0a1116)}

/* ---- Abspiel-Overlay (Cover) ---------------------------------------------- */
.hero-phone__cover{position:absolute;inset:0;z-index:3;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:
    radial-gradient(120% 78% at 50% 20%,rgba(74,110,150,.4),transparent 62%),
    linear-gradient(180deg,rgba(8,12,16,.32),rgba(6,9,12,.74));
  color:#fff;font-family:var(--body);-webkit-tap-highlight-color:transparent;
  transition:opacity .5s var(--ease),visibility .5s}
.hero-phone.is-playing .hero-phone__cover{opacity:0;visibility:hidden;pointer-events:none}

.hvp-btn{position:relative;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.55);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .25s var(--ease),background .25s,border-color .25s}
.hvp-btn svg{width:26px;height:26px;margin-left:4px;fill:#fff}
.hvp-btn::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(169,219,245,.5);animation:hvpPulse 2.6s ease-out infinite}
.hero-phone__cover:hover .hvp-btn{background:rgba(169,219,245,.22);border-color:#fff;transform:scale(1.06)}
@keyframes hvpPulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.55);opacity:0}}

.hvp-cap{text-align:center;line-height:1.28}
.hvp-cap b{display:block;font-family:var(--disp);font-weight:600;font-size:16px}
.hvp-cap i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.74);margin-top:6px}

/* Center-Play/Pause — erscheint NACH dem Start; großes Cover verschwindet dann.
   Pausiert: Play-Icon dauerhaft sichtbar. Läuft: nur beim Hover (Pause-Icon). */
.hero-phone__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(6,9,12,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;place-items:center;cursor:pointer;padding:0;
  transition:opacity .3s var(--ease),transform .25s var(--ease),background .25s,border-color .25s}
.hero-phone__center svg{width:24px;height:24px;fill:#fff}
.hero-phone__center .ic-play{margin-left:3px}
.hero-phone__center .ic-pause{display:none}
.hero-phone__center:hover{background:rgba(169,219,245,.22);border-color:#fff;transform:translate(-50%,-50%) scale(1.06)}
.hero-phone.has-started .hero-phone__cover{display:none}
.hero-phone.has-started .hero-phone__center{display:grid}
.hero-phone.has-started.is-playing .hero-phone__center{opacity:0;pointer-events:none}
.hero-phone.has-started.is-playing:hover .hero-phone__center{opacity:1;pointer-events:auto}
.hero-phone.has-started.is-playing .hero-phone__center .ic-play{display:none}
.hero-phone.has-started.is-playing .hero-phone__center .ic-pause{display:block}

/* Timeline unten im Screen — Fortschritt, gepuffert, ziehbarer Knopf, Zeiten */
.hero-phone__bar{position:absolute;left:15px;right:15px;bottom:17px;z-index:6;
  opacity:0;pointer-events:none;transition:opacity .3s}
.hero-phone.has-started .hero-phone__bar{opacity:1;pointer-events:auto}
.hpb-track{position:relative;height:4px;border-radius:3px;background:rgba(255,255,255,.24);cursor:pointer;touch-action:none}
.hpb-track::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}  /* größere Trefferzone */
.hpb-buf,.hpb-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;pointer-events:none}
.hpb-buf{background:rgba(255,255,255,.3)}
.hpb-fill{background:linear-gradient(90deg,var(--blue),var(--ion))}
.hpb-knob{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,.55);pointer-events:none;transition:transform .15s}
.hpb-track:hover .hpb-knob{transform:translate(-50%,-50%) scale(1.18)}
.hpb-time{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.04em;color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* ---- Notiz unter dem Telefon ---------------------------------------------- */
/* Dot + Text als GENAU ZWEI Flex-Kinder (Text in .hpn-t gebündelt), sonst spreizt
   flex+gap jedes Wort einzeln auseinander → „Der  SH  Server…" (Flex-Spread-Bug). */
.hero-phone__note{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--mono);
  font-size:12px;letter-spacing:.05em;color:var(--soft)}
.hero-phone__note .hpn-t{display:inline-block}
.hero-phone__note .dot{width:7px;height:7px;border-radius:50%;background:var(--ion);
  box-shadow:0 0 10px var(--ion);animation:hvDot 2s ease-in-out infinite}
@keyframes hvDot{0%,100%{opacity:.4}50%{opacity:1}}

/* ---- Animierter Server — sitzt in der linken Spalte unter den Buttons -------- */
.hero-orbit--mini{position:relative;width:380px;max-width:380px;margin:34px 0 0;
  opacity:.95;pointer-events:none;aspect-ratio:1.41}
.hero-orbit--mini svg{transform:scale(1);transform-origin:50% 50%}
.hero-orbit--mini .nas-amb{filter:blur(26px);opacity:.5}

/* ---- Reduced-Motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hvp-btn::before,.hero-phone__note .dot{animation:none}
  .hero-visual{opacity:1;animation:none}
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:900px){
  .hero-visual{margin-top:10px}
  .hero-orbit--mini{width:300px;max-width:300px;margin:26px 0 0}
}
@media (max-width:620px){
  .hero-phone__frame{height:auto;width:clamp(210px,66vw,250px)}
  .hero-orbit--mini{width:clamp(230px,70vw,300px);max-width:none;margin:22px 0 0}
  .hero-phone__note{white-space:normal;text-align:center;max-width:280px}
}