/* =========================================================
   HERO.CSS — WELCOME / HERO (SCENE 00)
   ---------------------------------------------------------
   Uebernommen aus der freigegebenen Referenz
   phoneshop_fullscreen_hero_v27_clear_load_colored_hover.html
   (V17 .. V27, unveraendert).

   Diese Datei ist der visuell abgeschlossene Bereich.
   Aenderungen hier bitte nur nach ausdruecklicher Freigabe.

   Einzige Anpassungen fuer die Scroll-Experience sind unten
   im Block "SCROLL-INTEGRATION" gebuendelt und dokumentiert.
   ========================================================= */

:root {
  --app-height: 100dvh;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
}

body {
  overflow: hidden;
  width: 100vw;
  height: var(--app-height);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.hero {
  position: relative;
  width: 100vw;
  height: var(--app-height);
  min-height: 0;
  max-height: var(--app-height);
  overflow: hidden;
  background: #fff;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}

@supports not (height: 100dvh) {
  :root {
    --app-height: 100vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .hero-image {
    object-position: center center;
  }
}

/* =========================================================
   4 INTERAKTIVE HAUPTBEREICHE
   Internet · Mobilfunk · Zubehör · Reparatur
   ========================================================= */
.hero-zone{
  position:absolute;
  z-index:20;
  border:1px solid transparent;
  border-radius:26px;
  background:rgba(255,255,255,0);
  cursor:pointer;
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.hero-zone::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(79,221,245,.035));
  transition:opacity .22s ease;
  pointer-events:none;
}
.hero-zone:hover,
.hero-zone:focus-visible{
  outline:none;
  border-color:rgba(72,214,239,.70);
  background:rgba(255,255,255,.025);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    0 0 0 1px rgba(83,225,247,.10),
    0 0 28px rgba(67,212,237,.22);
  transform:translateY(-2px) scale(1.006);
}
.hero-zone:hover::before,
.hero-zone:focus-visible::before{
  opacity:1;
}
.hero-zone-label{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translate(-50%,10px);
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  white-space:nowrap;
  color:#082028;
  background:rgba(255,255,255,.91);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 9px 28px rgba(22,67,80,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.hero-zone-label::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c5df;
  box-shadow:0 0 0 5px rgba(34,197,223,.12);
}
.hero-zone:hover .hero-zone-label,
.hero-zone:focus-visible .hero-zone-label{
  opacity:1;
  transform:translate(-50%,0);
}

/* exakte Zonen auf Basis des Hero-Motivs */
.zone-internet{
  left:15.0%;
  top:19.0%;
  width:17.5%;
  height:39.5%;
}

/* VERFUEGBARKEIT PRUEFEN -- klein, leicht schraeg, direkt unter den Routern.
   Alle Masse sind Prozent des Hero. Das Motiv laeuft mit object-fit:fill, wird also
   IMMER auf die volle Flaeche gestreckt -- damit sitzt ein Prozentwert bei jeder
   Fenstergroesse auf DERSELBEN Stelle des Bildes.
   Am gerenderten Bild gemessen (Viewport 1600x900): die Routerreihe steht bei
   x 285-462 px = 17.8%-28.9% (Mitte 23.3%), ihre Standflaechen enden bei 480 px
   = 53.3%, das blaue Leuchtband der Theke liegt bei 55.0%-56.9%. Der Knopf beginnt
   unmittelbar darunter.
   Die Thekenkante steigt im Bild nach rechts um rund 10 px auf 235 px Breite an
   (atan = 2.4 Grad) -- genau um diesen Betrag ist der Knopf gedreht, damit er auf
   der Kante zu liegen scheint statt davor zu schweben. */
.hero-check{
  position:absolute;
  z-index:22;
  /* Um die ROUTERMITTE (23.3%) zentriert, nicht um die Zonenmitte. */
  left:17.4%;
  width:11.8%;
  top:57.4%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:clamp(20px,1.7vw,28px);
  padding:0 clamp(7px,.6vw,11px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  background:linear-gradient(140deg,#13cbe4,#0a90a8);
  color:#03242b;
  font:900 clamp(6.5px,.5vw,8.5px)/1 Inter,system-ui,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  /* Die Drehung gehoert in DENSELBEN transform wie das Anheben beim Ueberfahren --
     eine zweite transform-Deklaration ersetzt die erste, der Knopf spraenge sonst
     beim Ueberfahren gerade. */
  transform:rotate(-2.4deg);
  box-shadow:0 7px 16px rgba(10,110,130,.30);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.hero-check:hover,
.hero-check:focus-visible{
  transform:rotate(-2.4deg) translateY(-2px);
  box-shadow:0 11px 24px rgba(10,110,130,.40);
}
.hero-check-icon{
  display:inline-flex;
  width:11px;
  height:11px;
  flex:0 0 auto;
}
.hero-check-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
}
/* Sehr schmal wird es eng: dort traegt der Knopf nur das Symbol, damit er nicht
   ueber die Nachbarzone laeuft. Die Beschriftung bleibt als aria-label erhalten. */
@media (max-width:760px){
  .hero-check{ left:20.6%; width:5.4%; gap:0; padding:0; }
  .hero-check-label{ display:none; }
}
.zone-mobile{
  left:37.8%;
  top:18.0%;
  width:23.3%;
  height:58.5%;
}
.zone-accessories{
  left:58.7%;
  top:13.0%;
  width:18.7%;
  height:50.0%;
}
.zone-repair{
  left:76.0%;
  top:27.0%;
  width:23.0%;
  height:52.0%;
}

/* Hintergrund wenn Drawer offen */
.zone-backdrop{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(7,19,24,.12);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  opacity:0;
  pointer-events:none;
  transition:.26s ease;
}
.zone-backdrop.open{
  opacity:1;
  pointer-events:auto;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.zone-drawer{
  position:fixed;
  z-index:70;
  right:18px;
  top:18px;
  bottom:18px;
  width:min(410px,calc(100vw - 36px));
  padding:22px;
  border-radius:28px;
  background:rgba(249,253,255,.93);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 28px 90px rgba(10,49,61,.24);
  backdrop-filter:blur(26px) saturate(1.1);
  -webkit-backdrop-filter:blur(26px) saturate(1.1);
  transform:translateX(calc(100% + 40px));
  opacity:0;
  transition:.34s cubic-bezier(.16,.8,.24,1);
  overflow:auto;
  color:#0a1820;
}
.zone-drawer.open{
  transform:translateX(0);
  opacity:1;
}
.zone-close{
  position:absolute;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(10,32,41,.07);
  color:#13262d;
  cursor:pointer;
  font-size:23px;
  line-height:38px;
}
.zone-eyebrow{
  margin-top:24px;
  color:#12abc5;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.zone-title{
  margin:8px 48px 8px 0;
  font-size:32px;
  line-height:1.04;
  letter-spacing:-.035em;
}
.zone-copy{
  margin:0;
  color:#53656d;
  font-size:14px;
  line-height:1.55;
}
.zone-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:20px;
}
.zone-option{
  min-height:104px;
  padding:14px;
  border:1px solid rgba(27,111,132,.13);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  cursor:pointer;
  text-align:left;
  color:#11232b;
  transition:.18s ease;
}
.zone-option:hover,
.zone-option:focus-visible{
  outline:none;
  transform:translateY(-2px);
  border-color:rgba(31,187,211,.48);
  box-shadow:0 10px 24px rgba(25,88,104,.10);
}
.zone-option strong{
  display:block;
  font-size:13px;
}
.zone-option span{
  display:block;
  margin-top:5px;
  color:#71828a;
  font-size:11px;
  line-height:1.35;
}
.zone-status{
  margin-top:14px;
  min-height:38px;
  padding:10px 12px;
  border-radius:13px;
  background:rgba(22,199,222,.10);
  color:#0e6777;
  font-size:12px;
  font-weight:700;
  opacity:0;
  transform:translateY(4px);
  transition:.18s ease;
}
.zone-status.show{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:900px){
  .hero-zone{
    border-radius:16px;
  }
  .hero-zone-label{
    display:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-zone,.hero-zone::before,.hero-zone-label,
  .zone-backdrop,.zone-drawer,.zone-option,.zone-status{
    transition:none!important;
  }
}


/* =========================================================
   HERO-BILD UNTEN BESCHNEIDEN
   Die im Bild enthaltene Vorteilsleiste wird ausgeblendet.
   ========================================================= */
.hero{
  --benefit-h: 104px;
}

.hero-visual{
  position:absolute;
  inset:0 0 var(--benefit-h) 0;
  overflow:hidden;
  background:#fff;
}

.hero-visual .hero-image{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:117.2%;
  max-width:none;
  object-fit:fill;
  object-position:center top;
}

/* =========================================================
   NEUE VORTEILSLEISTE IN ECHTEM HTML/CSS
   ========================================================= */
.benefit-bar{
  position:absolute;
  z-index:35;
  left:0;
  right:0;
  bottom:0;
  height:var(--benefit-h);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  background:rgba(255,255,255,.98);
  border-top:1px solid rgba(8,32,42,.08);
  box-shadow:0 -10px 35px rgba(21,62,75,.055);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.benefit-item{
  position:relative;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 22px;
  color:#111;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
  transition:background .18s ease, transform .18s ease;
}

.benefit-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(25,49,60,.13);
}

.benefit-item:hover,
.benefit-item:focus-visible{
  outline:none;
  background:rgba(24,195,221,.055);
  transform:translateY(-1px);
}

.benefit-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  color:#111;
}

.benefit-icon svg{
  width:34px;
  height:34px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.benefit-text strong{
  display:block;
  font-size:14px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.01em;
}

.benefit-text span{
  display:block;
  margin-top:4px;
  color:#4f5d63;
  font-size:12px;
  line-height:1.15;
}

/* Die Hotspots beziehen sich jetzt nur auf den visuellen Store-Bereich */
.zone-internet{ top:16.5%; height:42%; }
.hero-check{ top:57.4%; }   /* unter dem Leuchtband der Theke -- siehe Messung oben */
.zone-mobile{ top:15.5%; height:61%; }
.zone-accessories{ top:11.5%; height:52%; }
.zone-repair{ top:24%; height:56%; }

@media (max-width:950px){
  .hero{ --benefit-h: 88px; }
  .benefit-item{gap:9px;padding:0 10px}
  .benefit-icon{width:30px;height:30px;flex-basis:30px}
  .benefit-icon svg{width:27px;height:27px}
  .benefit-text strong{font-size:11px}
  .benefit-text span{font-size:9px}
}

@media (max-width:650px){
  .hero{ --benefit-h: 74px; }
  .benefit-bar{grid-template-columns:repeat(5,1fr)}
  .benefit-item{padding:0 4px;gap:0}
  .benefit-text{display:none}
  .benefit-icon{width:34px;height:34px;flex-basis:34px}
  .benefit-icon svg{width:30px;height:30px}
}


/* =========================================================
   FINALE POLYGON-HOTSPOTS
   Internet · Mobilfunk · Zubehör · Reparatur
   ========================================================= */
.hero-zone{
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:calc(100% - var(--benefit-h)) !important;
  border:0 !important;
  border-radius:0 !important;
  background:rgba(22,199,222,0);
  clip-path:polygon(var(--zone-poly));
  -webkit-clip-path:polygon(var(--zone-poly));
  transform:none !important;
}

.hero-zone::before{
  inset:0;
  border-radius:0;
  background:rgba(28,202,228,.08);
  box-shadow:inset 0 0 0 2px rgba(38,205,229,.62);
}

.hero-zone:hover,
.hero-zone:focus-visible{
  background:rgba(23,199,222,.045);
  box-shadow:none;
}

.hero-zone-label{
  left:var(--label-x,50%);
  top:var(--label-y,50%);
  bottom:auto;
  transform:translate(-50%,-50%) scale(.96);
}

.hero-zone:hover .hero-zone-label,
.hero-zone:focus-visible .hero-zone-label{
  transform:translate(-50%,-50%) scale(1);
}

/* Finale, von dir eingezeichnete Polygonflächen */
.zone-internet{
  --zone-poly:
    15.862808% 25.293546%,
    31.028938% 28.714894%,
    31.136120% 65.127823%,
    15.916399% 67.449456%;
  --label-x:23.486566%;
  --label-y:46.646429%;
}

.zone-mobile{
  --zone-poly:
    34.726688% 69.526700%,
    36.120041% 59.140467%,
    36.120041% 27.737366%,
    61.039657% 20.650286%,
    61.039657% 90.421374%,
    55.144692% 98.241597%,
    45.766343% 94.575868%,
    29.849945% 85.655919%,
    29.957127% 72.948053%;
  --label-x:43.307133%;
  --label-y:68.766403%;
}

.zone-accessories{
  --zone-poly:
    58.896034% 22.483152%,
    76.205788% 16.495790%,
    76.152193% 69.282317%,
    74.062164% 72.092716%,
    73.794212% 78.202266%,
    59.110397% 72.214904%,
    58.700000% 41.056189%;
  --label-x:68.131541%;
  --label-y:53.118191%;
}

.zone-repair{
  --zone-poly:
    77.599138% 17.473319%,
    100% 9.530901%,
    100% 100%,
    95.176843% 99.707887%,
    73.901391% 88.710694%,
    74.008569% 71.481762%,
    78.135048% 68.182598%;
  --label-x:85.545856%;
  --label-y:65.012452%;
}


/* =========================================================
   FINALE ENERGIE-LINIEN
   ========================================================= */
.energy-layer{
  position:absolute;
  z-index:18;
  left:0;
  right:0;
  top:0;
  bottom:var(--benefit-h);
  width:100%;
  height:calc(100% - var(--benefit-h));
  pointer-events:none;
  overflow:visible;
}

.energy-path-soft{
  fill:none;
  stroke:rgba(23,205,229,.12);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:blur(3px);
}

.energy-path-base{
  fill:none;
  stroke:rgba(31,213,236,.28);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(31,213,236,.35));
}

.energy-path-flow{
  fill:none;
  stroke:rgba(225,253,255,.98);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:
    drop-shadow(0 0 4px rgba(73,236,252,.98))
    drop-shadow(0 0 10px rgba(31,213,236,.50));
  animation-name:energyFlow;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.energy-node{
  fill:#efffff;
  stroke:#3ee2f5;
  stroke-width:1.7;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(62,226,245,.82));
  animation:energyNodePulse 2.4s ease-in-out infinite;
}

@keyframes energyFlow{
  to{stroke-dashoffset:-190}
}

@keyframes energyNodePulse{
  50%{opacity:.38}
}

@media(prefers-reduced-motion:reduce){
  .energy-path-flow,
  .energy-node{
    animation:none!important;
  }
}

/* =========================================================
   V17 – TV SLIDESHOW / INTERNET FÜR ZUHAUSE
   Echte HTML/CSS-Overlays innerhalb des TV-Bildschirms.
   ========================================================= */
.tv-slideshow{
  position:absolute;
  z-index:16;
  left:22.30%;
  top:31.05%;
  width:8.82%;
  height:18.10%;
  overflow:hidden;
  border-radius:1.2%;
  background:#05070c;
  pointer-events:none;
  transform:perspective(900px) rotateY(-.2deg) rotateZ(-.15deg);
  transform-origin:center center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 10px rgba(0,0,0,.12);
}

.tv-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(1.025);
  transition:
    opacity 1.05s ease,
    transform 4.5s ease;
  overflow:hidden;
}

.tv-slide.is-active{
  opacity:1;
  transform:scale(1);
}

.tv-slide::before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.22),transparent 28%),
    radial-gradient(circle at 75% 75%,rgba(255,255,255,.08),transparent 30%);
  mix-blend-mode:screen;
}

.tv-slide-content{
  position:relative;
  z-index:2;
  width:86%;
  text-align:center;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-shadow:0 2px 10px rgba(0,0,0,.20);
}

.tv-slide-kicker{
  display:block;
  margin-bottom:4%;
  font-size:clamp(3px,.31vw,7px);
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.86;
}

.tv-slide-title{
  display:block;
  font-size:clamp(7px,.82vw,18px);
  line-height:.92;
  font-weight:950;
  letter-spacing:-.06em;
}

.tv-slide-sub{
  display:block;
  margin-top:5%;
  font-size:clamp(3px,.31vw,7px);
  line-height:1.25;
  font-weight:650;
  opacity:.88;
}

/* Slide 1 – Future */
.tv-slide.future{
  background:
    radial-gradient(circle at 56% 44%,rgba(161,90,255,.72),transparent 23%),
    radial-gradient(circle at 35% 62%,rgba(52,16,116,.95),transparent 38%),
    linear-gradient(135deg,#070216 0%,#271052 46%,#5d20c9 100%);
}
.tv-slide.future .orb{
  position:absolute;
  left:50%;
  top:48%;
  width:42%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 34%,#fff 0 2%,#8c55ff 8%,#33106d 42%,#10031f 67%);
  box-shadow:
    0 0 18px rgba(150,90,255,.75),
    inset -8px -8px 18px rgba(0,0,0,.35);
}
.tv-slide.future .tv-slide-content{
  transform:translateY(25%);
}

/* Slide 2 – Internet */
.tv-slide.internet{
  background:
    radial-gradient(circle at 50% 54%,rgba(25,216,239,.34),transparent 28%),
    linear-gradient(135deg,#021015,#062d36 52%,#0d8093 100%);
}
.tv-wifi{
  width:42%;
  aspect-ratio:1;
  margin:0 auto 5%;
  border-radius:50%;
  position:relative;
  background:
    radial-gradient(circle at 50% 75%,#eaffff 0 6%,transparent 7%),
    radial-gradient(circle at 50% 75%,transparent 0 18%,rgba(224,254,255,.9) 19% 22%,transparent 23% 34%,rgba(224,254,255,.72) 35% 38%,transparent 39% 50%,rgba(224,254,255,.48) 51% 54%,transparent 55%);
  filter:drop-shadow(0 0 7px rgba(54,226,246,.72));
}

/* Slide – Glasfaser.
   Der Bildschirm ist im Motiv nur rund 250x150 px gross; feine
   Zeichnung ginge dort unter. Deshalb kraeftige Lichtleiter-
   Straenge statt Detail. */
.tv-slide.fiber{
  background:
    radial-gradient(circle at 50% 58%,rgba(126,228,255,.30),transparent 32%),
    linear-gradient(135deg,#020a18,#062544 48%,#0a4f83);
}
.tv-fiber{
  position:absolute;
  inset:-30%;
  /* Straenge STRAHLEN aus einem Lichtkern -- so liest es sich als
     Glasfaserbuendel und nicht als Raster. */
  background:repeating-conic-gradient(from 0deg at 50% 56%,
              transparent 0deg 3.6deg,
              rgba(170,242,255,.55) 3.6deg 4.6deg,
              transparent 4.6deg 8.4deg);
  -webkit-mask-image:radial-gradient(circle at 50% 56%,
              #000 3%,rgba(0,0,0,.85) 20%,transparent 64%);
  mask-image:radial-gradient(circle at 50% 56%,
              #000 3%,rgba(0,0,0,.85) 20%,transparent 64%);
}
/* der Kern, in dem die Straenge zusammenlaufen */
.tv-fiber::after{
  content:"";
  position:absolute;
  left:50%;
  top:56%;
  width:14%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#f2ffff 0 26%,rgba(150,235,255,.5) 48%,transparent 72%);
  filter:blur(.5px);
}
.tv-slide.fiber .tv-slide-title{
  font-size:clamp(8px,.82vw,18px);
}
/* Die Strahlen laufen hinter der Schrift durch -- ohne diesen
   weichen Schleier ist besonders die Unterzeile nicht lesbar. */
.tv-slide.fiber .tv-slide-content{
  isolation:isolate;
}
.tv-slide.fiber .tv-slide-content::before{
  content:"";
  position:absolute;
  inset:-16% -12%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
              rgba(2,12,26,.72) 0 42%,
              rgba(2,12,26,.34) 66%,
              transparent 78%);
}

/* Slide – Schnelles Internet: Tempolinien von links nach rechts */
.tv-slide.speed{
  background:
    radial-gradient(circle at 22% 52%,rgba(52,255,214,.24),transparent 36%),
    linear-gradient(120deg,#04121a,#07333e 52%,#0e7a72);
}
.tv-speed{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(95deg,
              transparent 0 9px,
              rgba(198,255,246,.22) 9px 11px,
              transparent 11px 24px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
}
.tv-slide.speed .tv-slide-title{
  font-size:clamp(9px,.92vw,20px);
}

/* Slide 3 – Magenta */
.tv-slide.magenta{
  background:
    radial-gradient(circle at 70% 25%,rgba(255,255,255,.17),transparent 20%),
    linear-gradient(135deg,#3a001d,#d00069 52%,#ff2b8d);
}
.tv-slide.magenta .tv-slide-title{
  font-size:clamp(8px,.90vw,19px);
}

/* Slide 4 – Blue */
.tv-slide.blue{
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 22%),
    linear-gradient(135deg,#061448,#103ca5 48%,#24a8ff);
}
.tv-slide.blue .tv-slide-title{
  font-size:clamp(8px,.90vw,19px);
}

/* kleiner Fortschrittsindikator */
.tv-dots{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:6%;
  display:flex;
  gap:3px;
  transform:translateX(-50%);
}
.tv-dot{
  width:3px;
  height:3px;
  border-radius:99px;
  background:rgba(255,255,255,.38);
  transition:width .3s ease,background .3s ease;
}
.tv-dot.active{
  width:9px;
  background:#fff;
}

/* dezenter Screen-Glanz */
.tv-slideshow::after{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,rgba(255,255,255,.10),transparent 19%,transparent 72%,rgba(255,255,255,.04));
  mix-blend-mode:screen;
}

@media(max-width:900px){
  .tv-slideshow{
    left:22.15%;
    top:31.10%;
    width:9.05%;
    height:18.2%;
  }
}

@media(prefers-reduced-motion:reduce){
  .tv-slide{
    transition:opacity .25s linear;
    transform:none!important;
  }
}


/* =========================================================
   V18 – PREMIUM HERO EFFECTS
   1) Glasreflexe
   2) LED-Atemlicht
   3) Energie-Sparks/Knoten
   4) Hover-Lichtsaum ohne Zoom
   5) subtile Maus-Parallax
   6) Startsequenz
   ========================================================= */

/* ---------- 5. Subtile Maus-Parallax ---------- */
.hero{
  --p-img-x:0px;
  --p-img-y:0px;
  --p-tv-x:0px;
  --p-tv-y:0px;
  --p-fx-x:0px;
  --p-fx-y:0px;
}

.hero-visual .hero-image{
  transform:translate3d(var(--p-img-x),var(--p-img-y),0) scale(1.003);
  transform-origin:center center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter 1.15s ease,opacity 1s ease;
  will-change:transform;
}

.tv-slideshow{
  translate:var(--p-tv-x) var(--p-tv-y);
  transition:
    opacity 1.05s ease,
    translate .55s cubic-bezier(.2,.8,.2,1);
}

.energy-layer,
.ambient-led-layer,
.glass-reflections{
  translate:var(--p-fx-x) var(--p-fx-y);
  transition:
    translate .58s cubic-bezier(.2,.8,.2,1),
    opacity 1s ease;
  will-change:translate;
}

/* ---------- 1. Glasreflexionen ---------- */
.glass-reflections{
  position:absolute;
  z-index:17;
  left:0;
  right:0;
  top:0;
  bottom:var(--benefit-h);
  overflow:hidden;
  pointer-events:none;
  opacity:.64;
  mix-blend-mode:screen;
}

.glass-reflection{
  position:absolute;
  top:-22%;
  height:145%;
  width:10%;
  opacity:0;
  transform:skewX(-17deg) translateX(-260%);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.02) 15%,
      rgba(230,252,255,.19) 42%,
      rgba(255,255,255,.34) 50%,
      rgba(214,249,255,.12) 62%,
      transparent 100%
    );
  filter:blur(2px);
  animation:glassSweep 13s linear infinite;
}

.glass-reflection.r1{
  left:8%;
  width:8%;
  animation-delay:-2s;
}
.glass-reflection.r2{
  left:43%;
  width:11%;
  opacity:.55;
  animation-duration:17s;
  animation-delay:-8s;
}
.glass-reflection.r3{
  left:76%;
  width:7%;
  opacity:.42;
  animation-duration:19s;
  animation-delay:-11s;
}

@keyframes glassSweep{
  0%,8%{
    opacity:0;
    transform:skewX(-17deg) translateX(-300%);
  }
  16%{opacity:.62}
  38%{opacity:.28}
  46%,100%{
    opacity:0;
    transform:skewX(-17deg) translateX(1450%);
  }
}

/* ---------- 2. LED-Atemlicht ---------- */
.ambient-led-layer{
  position:absolute;
  z-index:17;
  left:0;
  right:0;
  top:0;
  bottom:var(--benefit-h);
  width:100%;
  height:calc(100% - var(--benefit-h));
  pointer-events:none;
  overflow:visible;
}

.ambient-led{
  fill:none;
  stroke:#38dff2;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  stroke-linecap:round;
  opacity:.18;
  filter:
    drop-shadow(0 0 3px rgba(56,223,242,.48))
    drop-shadow(0 0 8px rgba(56,223,242,.22));
  animation:ledBreathe 4.4s ease-in-out infinite;
}

.ambient-led:nth-child(2){animation-delay:-1.2s}
.ambient-led:nth-child(3){animation-delay:-2.2s}
.ambient-led:nth-child(4){animation-delay:-3s}

@keyframes ledBreathe{
  0%,100%{
    opacity:.14;
    stroke-width:1.05;
    filter:
      drop-shadow(0 0 2px rgba(56,223,242,.30))
      drop-shadow(0 0 5px rgba(56,223,242,.12));
  }
  50%{
    opacity:.55;
    stroke-width:1.55;
    filter:
      drop-shadow(0 0 4px rgba(81,236,250,.80))
      drop-shadow(0 0 12px rgba(56,223,242,.40));
  }
}

/* ---------- 3. Energie-Sparks / bewegte Lichtpunkte ---------- */
.energy-particle{
  fill:#f0ffff;
  stroke:#5deafa;
  stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(66,229,247,.92))
    drop-shadow(0 0 13px rgba(31,205,230,.45));
}

.energy-particle.secondary{
  opacity:.72;
}

.energy-layer g.fx-hover .energy-path-soft{
  stroke:rgba(38,222,243,.22);
  filter:blur(3px) drop-shadow(0 0 9px rgba(41,221,243,.25));
}
.energy-layer g.fx-hover .energy-path-base{
  stroke:rgba(78,235,250,.54);
  filter:
    drop-shadow(0 0 4px rgba(75,235,250,.70))
    drop-shadow(0 0 10px rgba(31,213,236,.38));
}
.energy-layer g.fx-hover .energy-path-flow{
  stroke:#f2ffff;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.98))
    drop-shadow(0 0 13px rgba(52,229,247,.70));
}

/* ---------- 4. Hover-Lichtsaum ohne Zoom ---------- */
.hero-zone{
  overflow:hidden;
  transition:
    background .24s ease,
    filter .24s ease;
}

.hero-zone::before{
  transition:
    opacity .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.hero-zone::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-40% -75%;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(
      110deg,
      transparent 38%,
      rgba(212,252,255,.03) 45%,
      rgba(219,253,255,.27) 50%,
      rgba(86,226,243,.08) 55%,
      transparent 62%
    );
  transform:translateX(-55%) rotate(-4deg);
}

.hero-zone:hover,
.hero-zone:focus-visible{
  background:rgba(31,210,233,.025);
  filter:drop-shadow(0 0 8px rgba(33,209,232,.18));
}

.hero-zone:hover::before,
.hero-zone:focus-visible::before{
  opacity:1;
  background:rgba(37,211,233,.028);
  box-shadow:
    inset 0 0 0 1.5px rgba(57,224,242,.62),
    inset 0 0 24px rgba(40,216,238,.055);
}

.hero-zone:hover::after,
.hero-zone:focus-visible::after{
  opacity:1;
  animation:none;
}

@keyframes zoneLightSweep{
  from{transform:translateX(-55%) rotate(-4deg)}
  to{transform:translateX(55%) rotate(-4deg)}
}

.hero-zone-label{
  z-index:2;
}

/* Die Startsequenz (fx-startup/fx-boot/fx-ready) ist ENTFERNT — keine
   Zeile im Haus setzt die Klassen; V27 hatte sie ohnehin stillgelegt.
   Weg zurueck: Git vor dem Aufraeumen (1.655.0). */

/* Die Effekte dürfen die Bedienung niemals blockieren */
.glass-reflections,
.ambient-led-layer,
.energy-layer{
  pointer-events:none!important;
}

/* Mobile: weniger Bewegung, aber gleiche Optik */
@media(max-width:900px){
  .glass-reflections{opacity:.42}
  .ambient-led{stroke-width:1}
}

@media(prefers-reduced-motion:reduce){
  .glass-reflection,
  .ambient-led,
  .energy-particle,
  .hero-zone::after{
    animation:none!important;
  }

  .hero-visual .hero-image,
  .tv-slideshow,
  .energy-layer,
  .ambient-led-layer,
  .glass-reflections{
    translate:0 0!important;
    transform:none;
  }
}


/* =========================================================
   V20 – RUHIGER HOVER / LANGSAMERE ENERGIE
   Kein Flash/Sweep beim Mouse-over.
   ========================================================= */

/* Kein bewegter Lichtstreifen mehr über Hauptbereichen */
.hero-zone::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* Hover nur noch sehr dezent und statisch */
.hero-zone:hover,
.hero-zone:focus-visible{
  background:rgba(31,210,233,.012) !important;
  filter:none !important;
}

.hero-zone:hover::before,
.hero-zone:focus-visible::before{
  opacity:.60 !important;
  background:rgba(37,211,233,.012) !important;
  box-shadow:
    inset 0 0 0 1px rgba(57,224,242,.34),
    inset 0 0 18px rgba(40,216,238,.025) !important;
  transition:opacity .35s ease, box-shadow .35s ease !important;
}

/* Auch Energiepfade beim Hover nicht mehr aufblitzen lassen */
.energy-layer g.fx-hover .energy-path-soft{
  stroke:rgba(38,222,243,.14) !important;
  filter:blur(3px) !important;
}

.energy-layer g.fx-hover .energy-path-base{
  stroke:rgba(78,235,250,.34) !important;
  filter:drop-shadow(0 0 4px rgba(75,235,250,.32)) !important;
}

.energy-layer g.fx-hover .energy-path-flow{
  stroke:rgba(239,255,255,.96) !important;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.72))
    drop-shadow(0 0 8px rgba(52,229,247,.32)) !important;
}

/* Generell langsamere Energieanimation */
.energy-path-flow{
  animation-duration:9s !important;
}


/* =========================================================
   V21 – FERNSEHERRAHMEN IN CSS
   Exakte Streaming-Position des Nutzers
   ========================================================= */
.tv-slideshow{
  left:16.5219%;
  top:33.243%;
  width:15.4651%;
  height:14.8172%;
  border-radius:1%;
  transform:perspective(900px) rotateY(-.2deg) rotateZ(.5deg) !important;

  /* echter TV-Korpus */
  box-sizing:border-box;
  border:
    clamp(4px,.34vw,7px)
    solid
    #111820 !important;

  background:#05080b !important;

  box-shadow:
    /* feine Außenkante */
    0 0 0 1px rgba(0,0,0,.95),
    /* metallische Lichtkante */
    0 0 0 2px rgba(95,112,122,.36),
    /* Tiefe rechts/unten */
    4px 7px 12px rgba(0,0,0,.26),
    /* sehr schwacher Screen-Glow */
    0 0 13px rgba(32,204,229,.11),
    /* innere Glaskante */
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 2px rgba(0,0,0,.46) !important;

  overflow:visible !important;
}

/* Screen-Inhalt wieder sauber im Rahmen beschneiden */
.tv-slideshow > .tv-slide{
  border-radius:calc(1% - 1px);
  overflow:hidden;
}

/* Die vorhandenen Slideshow-Punkte bleiben im Screen */
.tv-slideshow > .tv-dots{
  z-index:8;
}

/* obere subtile Metallreflexion */
.tv-frame-highlight{
  position:absolute;
  z-index:12;
  pointer-events:none;
  left:1.5%;
  right:1.5%;
  top:-3px;
  height:1px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.02),
      rgba(215,231,238,.58) 18%,
      rgba(255,255,255,.20) 52%,
      rgba(180,200,210,.38) 82%,
      rgba(255,255,255,.01)
    );
  opacity:.62;
}

/* Unterkante / Geräte-Steuerleiste */
.tv-frame-bottom{
  position:absolute;
  z-index:13;
  pointer-events:none;
  left:50%;
  bottom:calc(clamp(4px,.34vw,7px) * -1);
  width:26%;
  height:3px;
  transform:translateX(-50%);
  border-radius:0 0 5px 5px;
  background:
    linear-gradient(
      90deg,
      #080b0e,
      #293039 45%,
      #11161b 55%,
      #07090b
    );
  box-shadow:0 2px 3px rgba(0,0,0,.32);
}

/* sehr kleine Status-LED */
.tv-status-led{
  position:absolute;
  z-index:14;
  pointer-events:none;
  right:8%;
  bottom:-5px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#40dcee;
  opacity:.52;
  box-shadow:0 0 4px rgba(64,220,238,.42);
}

/* Bildschirmglas, deutlich subtiler als ein Flash-Effekt */
.tv-screen-glass{
  position:absolute;
  z-index:7;
  pointer-events:none;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.tv-screen-glass::before{
  content:"";
  position:absolute;
  left:-18%;
  top:-70%;
  width:68%;
  height:190%;
  transform:rotate(18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      rgba(255,255,255,.085),
      transparent
    );
  opacity:.42;
}


/* Kein zusätzliches Blinken / kein Hover-Flash */
.tv-slideshow:hover{
  filter:none !important;
}

@media(max-width:900px){
  .tv-slideshow{
    border-width:4px !important;
  }
}


/* =========================================================
   FINALE TV-PERSPEKTIVE
   ========================================================= */
.tv-slideshow{
  transform-origin:0% 50% !important;
  transform:
    perspective(400px)
    rotateX(0deg)
    rotateY(8.4deg)
    rotateZ(0.5deg) !important;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

.tv-frame-side{
  position:absolute;
  z-index:11;
  pointer-events:none;
  top:1%;
  bottom:1%;
  right:-4px;
  width:4px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#2c3339,#0a0d10 55%,#22292f);
  opacity:.78;
  box-shadow:2px 0 5px rgba(0,0,0,.25);
  transform:translateZ(-1px);
}


/* =========================================================
   V24 – SLIDES AN NEUE TV-GRÖSSE ANGEPASST
   ========================================================= */
.tv-slide-content{
  width:84%;
  max-width:none;
  padding:0 4%;
  box-sizing:border-box;
  transform-origin:center center;
}

.tv-slide-kicker{
  margin-bottom:3.2%;
  font-size:clamp(4px,.34vw,8px);
  letter-spacing:.10em;
}

.tv-slide-title{
  font-size:clamp(9px,.92vw,21px);
  line-height:.94;
  letter-spacing:-.055em;
}

.tv-slide-sub{
  margin-top:3.6%;
  font-size:clamp(4px,.34vw,8px);
  line-height:1.22;
}

/* Slide-spezifische Anpassungen für das neue Seitenverhältnis */
.tv-slide.future .tv-slide-content{
  transform:translateY(18%);
}
.tv-slide.future .orb{
  width:35%;
  top:45%;
}

.tv-slide.internet .tv-slide-content{
  width:82%;
}
.tv-wifi{
  width:29%;
  margin:0 auto 3%;
}
.tv-slide.internet .tv-slide-title{
  font-size:clamp(9px,.88vw,20px);
}

.tv-slide.magenta .tv-slide-content,
.tv-slide.blue .tv-slide-content{
  width:80%;
}

.tv-slide.magenta .tv-slide-title,
.tv-slide.blue .tv-slide-title{
  font-size:clamp(10px,.98vw,22px);
}

/* ruhiger, professioneller Übergang */
.tv-slide{
  transition:
    opacity 1.35s ease,
    transform 6.5s ease;
}

.tv-slide.is-active{
  transform:scale(1);
}

.tv-slide:not(.is-active){
  transform:scale(1.012);
}

/* Dot-Navigation kleiner und ruhiger */
.tv-dots{
  bottom:5%;
  gap:3px;
}
.tv-dot{
  width:2.5px;
  height:2.5px;
}
.tv-dot.active{
  width:8px;
}

/* TV-Inhalt sauber innerhalb des Rahmens halten */
.tv-slideshow{
  overflow:hidden !important;
}
.tv-frame-highlight,
.tv-frame-bottom,
.tv-status-led,
.tv-frame-side{
  overflow:visible;
}


/* =========================================================
   V25 – ECHTER HTML/CSS HEADER
   Der Header des Hintergrundbildes wird vollständig verdeckt.
   ========================================================= */
.site-header{
  position:absolute;
  z-index:140;
  left:0;
  right:0;
  top:0;
  height:clamp(68px,4.15vw,80px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(26px,2.5vw,48px);
  box-sizing:border-box;
  background:#fff;
  border-bottom:1px solid rgba(15,32,39,.08);
  box-shadow:0 2px 12px rgba(13,40,50,.035);
  pointer-events:auto;
}

.site-logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:100%;
  text-decoration:none;
}

.site-logo img{
  display:block;
  width:clamp(190px,13.4vw,250px);
  height:auto;
  max-height:44px;
  object-fit:contain;
  object-position:left center;
  user-select:none;
  -webkit-user-drag:none;
}


/* Die Symbolknoepfe des Kopfes (Suche/Telefon/Konto/Warenkorb) samt
   Suchleisten-Panel sind seit ec4c203 ohne Markup — CSS ENTFERNT.
   Weg zurueck: Git vor dem Aufraeumen (1.655.0). */

/* Der CSS-Header bleibt völlig ruhig – kein Flash-Effekt */
.site-header *,
.site-header *::before,
.site-header *::after{
  animation:none;
}

/* TV jetzt endgültig fest: kein Editor mehr */
.tv-slideshow{
  left:16.3053% !important;
  top:32.1461% !important;
  width:15.8428% !important;
  height:15.9128% !important;
  border-radius:1% !important;
  overflow:visible !important;
}

/* Screen selbst bleibt sauber im Gehäuse */
.tv-slide,
.tv-screen-glass{
  overflow:hidden !important;
}


@media(max-width:760px){
  .site-header{
    height:66px;
    padding:0 15px;
  }

  .site-logo img{
    width:174px;
    max-height:37px;
  }

}


/* =========================================================
   V26 – LOGO OHNE KLICK-/FOKUSRAHMEN
   ========================================================= */
.site-logo,
.site-logo:link,
.site-logo:visited,
.site-logo:hover,
.site-logo:active,
.site-logo:focus,
.site-logo:focus-visible{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
}

.site-logo img{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}


/* =========================================================
   V27 – SOFORT KLARER START / FARBEFFEKT AUF HAUPTBEREICHEN
   ========================================================= */

.hero-visual .hero-image{
  opacity:1 !important;
  filter:none !important;
}

/* Kein Start-Fade auf dem gesamten Hero */
.hero,
.hero-visual,
.hero-image{
  animation:none !important;
}

/* ---------------------------------------------------------
   Farbiger Mouse-over innerhalb der exakten Polygonflächen
   --------------------------------------------------------- */
.hero-zone{
  --zone-hover-rgb: 28, 205, 229;
  background:transparent !important;
  filter:none !important;
  transition:
    background-color .34s ease,
    box-shadow .34s ease !important;
}

/* unterschiedliche, aber zusammenpassende Farbtöne */
.zone-internet{
  --zone-hover-rgb: 0, 174, 239;
}
.zone-mobile{
  --zone-hover-rgb: 18, 203, 226;
}
.zone-accessories{
  --zone-hover-rgb: 40, 210, 193;
}
.zone-repair{
  --zone-hover-rgb: 50, 159, 235;
}

/* ruhige transparente Flächenfarbe */
.hero-zone:hover,
.hero-zone:focus-visible{
  background-color:rgba(var(--zone-hover-rgb), .105) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(var(--zone-hover-rgb), .62),
    inset 0 0 42px rgba(var(--zone-hover-rgb), .055),
    0 0 15px rgba(var(--zone-hover-rgb), .08) !important;
}

/* bestehende ::before-Fläche sichtbar einfärben */
.hero-zone:hover::before,
.hero-zone:focus-visible::before{
  opacity:1 !important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--zone-hover-rgb), .095),
      rgba(var(--zone-hover-rgb), .025)
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--zone-hover-rgb), .45),
    inset 0 0 28px rgba(var(--zone-hover-rgb), .055) !important;
  transition:
    opacity .34s ease,
    background .34s ease,
    box-shadow .34s ease !important;
}

/* ausdrücklich kein Flash / Sweep */
.hero-zone::after,
.hero-zone:hover::after,
.hero-zone:focus-visible::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* Button/Label bleibt sauber lesbar */
.hero-zone:hover .hero-zone-label,
.hero-zone:focus-visible .hero-zone-label{
  background:rgba(255,255,255,.96);
  border-color:rgba(var(--zone-hover-rgb), .28);
  box-shadow:0 6px 20px rgba(var(--zone-hover-rgb), .13);
}

/* Energiefluss beim Hover nur minimal heller, nicht flashen */
.energy-layer g.fx-hover .energy-path-base{
  stroke:rgba(90,235,249,.44) !important;
  filter:drop-shadow(0 0 5px rgba(65,222,240,.30)) !important;
}

.energy-layer g.fx-hover .energy-path-flow{
  stroke:rgba(245,255,255,.98) !important;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.65))
    drop-shadow(0 0 8px rgba(55,222,240,.25)) !important;
}


/* =========================================================
   SCROLL-INTEGRATION
   ---------------------------------------------------------
   Einzige Aenderungen an der freigegebenen Hero-Referenz.
   Jede Regel ist begruendet. Es wird nichts entfernt,
   die Hero-Optik bei Scrollposition 0 bleibt identisch.
   ========================================================= */

/* 1) Das Dokument muss scrollen koennen.
      Im Referenz-Standalone war body{overflow:hidden}, weil es
      nur eine Bildschirmseite gab. */
html{
  scroll-behavior:auto;
  background:#f8fbfc;
}

body{
  overflow-x:hidden;
  overflow-y:auto;
  width:100%;
  height:auto;
  min-height:100%;
  background:#f8fbfc;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 2) Stabile Viewport-Hoehe.
      100dvh aendert sich auf Mobile waehrend des Scrollens und
      wuerde die sticky Stages springen lassen. 100svh ist stabil
      und auf Desktop identisch zu 100vh/100dvh. */
@supports (height:100svh){
  :root{
    --app-height:100svh;
  }
}

/* 3) --benefit-h wird ausserhalb von .hero gebraucht,
      damit die Portal-Ebenen exakt dieselbe Zonen-Geometrie
      benutzen koennen. Werte identisch zur Hero-Definition. */
:root{
  --benefit-h:104px;
}
@media (max-width:950px){
  :root{ --benefit-h:88px; }
}
@media (max-width:650px){
  :root{ --benefit-h:74px; }
}

/* 4) Der Header liegt jetzt als fixe Leiste ueber der gesamten
      Journey statt absolut nur ueber dem Hero.
      Position, Hoehe, Farben, Schatten bleiben unveraendert. */
.site-header{
  position:fixed;
}

/* 5) Der Hero fuellt seine Stage. Groesse wie zuvor. */
.hero{
  height:var(--app-height);
  max-height:none;
}

/* 6) Der Hero misst sich an seiner Buehne (100%), nicht am
      Fenster (100vw). 100vw schliesst auf Windows den Scroll-
      balken mit ein — der Hero waere ~17px breiter als die
      Portal-Ebene, und beim ersten Scroll spraenge der Inhalt
      sichtbar nach links. Optisch identisch, nur exakt. */
.hero{
  width:100%;
}