/* ============================================================
   Petersen KI — Cinematic Hero (GSAP/ScrollTrigger)
   Self-contained, alles unter .cine-* gescoped. Markengerecht
   adaptiert: solider Schriftzug (kein Gradient-Text), Petersen-Blau.
   ============================================================ */

.cine{
  position:relative;width:100%;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-0,#04060a);color:#f4f8ff;
  perspective:1500px;isolation:isolate
}
.cine *{box-sizing:border-box}

/* Pre-paint: animierte Teile versteckt – aber nur wenn JS+Motion aktiv (kein Content-Verlust) */
html.cine-ready .cine .cine-hide{visibility:hidden}

/* Umgebung: feines Grid + Korn */
.cine-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;background-size:60px 60px;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%)
}
.cine-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 38%,rgba(59,158,255,.18),transparent 70%)
}

/* Hero-Texte (Hintergrundebene) */
.cine-text{position:absolute;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:0 24px;transform-style:preserve-3d;will-change:transform}
.cine-eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(59,158,255,.32);background:rgba(59,158,255,.07);color:#bfe6ff;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;padding:8px 14px 8px 12px;border-radius:999px;margin-bottom:22px}
.cine-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent,#3b9eff);box-shadow:0 0 12px var(--accent,#3b9eff)}
.cine-logo{width:96px;height:96px;border-radius:24px;margin-bottom:22px;box-shadow:0 0 50px rgba(59,158,255,.35),0 20px 50px rgba(0,0,0,.6)}
.cine-h1{font-size:clamp(2.6rem,8vw,5.5rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:0;color:#f4f8ff;text-shadow:0 10px 40px rgba(0,0,0,.5)}
.cine-h1 .accent{color:#6db5ff}
.cine-h1.line2{font-weight:800;overflow:hidden}

/* CTA-Ebene (Endzustand) */
.cine-cta{position:absolute;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:0 24px;will-change:transform;pointer-events:auto}
.cine-cta h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;color:#f4f8ff}
.cine-cta p{color:#9fb0c6;font-size:clamp(1rem,1.6vw,1.25rem);max-width:38rem;margin:0 auto 34px;line-height:1.6}
.cine-cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* Die große physische Tiefen-Card */
.cine-card-wrap{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none;perspective:1500px}
.cine-card{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:auto;
  width:92vw;height:90vh;border-radius:32px;
  background:linear-gradient(145deg,#162C6D 0%,#0A101D 100%);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.9),0 20px 40px -20px rgba(0,0,0,.8),inset 0 1px 2px rgba(255,255,255,.2),inset 0 -2px 4px rgba(0,0,0,.8)
}
@media(min-width:768px){.cine-card{width:86vw;height:86vh;border-radius:40px}}
.cine-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:50;mix-blend-mode:screen;background:radial-gradient(700px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06) 0%,transparent 40%)}

/* Card-Innenlayout */
.cine-stage{position:relative;width:100%;height:100%;max-width:80rem;margin:0 auto;padding:24px 18px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;z-index:10}
@media(min-width:1024px){.cine-stage{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:28px;padding:0 48px}}

.cine-brand{order:1;display:flex;justify-content:center;width:100%}
@media(min-width:1024px){.cine-brand{order:3;justify-content:flex-end}}
.cine-brand b{
  font-size:clamp(2.4rem,6vw,5.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;
  color:#fff;text-shadow:0 12px 30px rgba(0,0,0,.6);max-width:100%;overflow-wrap:break-word
}
.cine-brand b span{color:#6db5ff}

.cine-center{order:2;position:relative;width:100%;display:flex;align-items:center;justify-content:center;z-index:5}

/* zentrales Bild (Roboter/Piloten) */
.cine-visual{position:relative;width:min(86%,420px);border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 60px rgba(59,158,255,.18)}
.cine-visual img{display:block;width:100%;height:auto}

/* schwebendes App-Mockup (Glas-Panel) */
.cine-app{
  position:absolute;right:-6px;bottom:-18px;width:172px;border-radius:22px;padding:14px;z-index:6;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.01));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 25px 50px -12px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.2)
}
@media(min-width:1024px){.cine-app{right:-44px;bottom:-30px;width:200px}}
.cine-app-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cine-app-head span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9fb0c6;font-weight:700}
.cine-app-head b{width:26px;height:26px;border-radius:50%;background:rgba(59,158,255,.18);border:1px solid rgba(59,158,255,.4);display:grid;place-items:center;font-size:11px;color:#cfe8ff}
.cine-ring-wrap{position:relative;width:104px;height:104px;margin:0 auto 12px;display:grid;place-items:center;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
.cine-ring{transform:rotate(-90deg);transform-origin:center}
.cine-ring .track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:10}
.cine-ring .bar{fill:none;stroke:var(--accent,#3b9eff);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283}
.cine-ring-num{position:absolute;text-align:center}
.cine-ring-num b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.cine-ring-num span{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:#9bd0ff;font-weight:700}
.cine-app-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:14px;margin-top:8px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.05)}
.cine-app-row .ic{width:30px;height:30px;border-radius:9px;background:rgba(59,158,255,.15);border:1px solid rgba(59,158,255,.3);display:grid;place-items:center;color:#7cc1ff;flex:0 0 auto}
.cine-app-row .ln{flex:1;display:grid;gap:6px}
.cine-app-row .ln i{height:7px;border-radius:99px;background:rgba(255,255,255,.22);display:block}
.cine-app-row .ln i:last-child{width:60%;background:rgba(255,255,255,.1)}

/* Card-Texte links */
.cine-copy{order:3;display:flex;flex-direction:column;text-align:center;width:100%;z-index:20}
@media(min-width:1024px){.cine-copy{order:1;text-align:left}}
.cine-copy h3{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:#fff}
.cine-copy p{display:none;color:rgba(207,226,255,.72);font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.6;margin:0;max-width:24rem}
@media(min-width:768px){.cine-copy p{display:block;margin-left:auto;margin-right:auto}}
@media(min-width:1024px){.cine-copy p{margin-left:0}}

/* Schwebende Glas-Badges */
.cine-badge{
  position:absolute;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;z-index:30;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.01));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 25px 50px -12px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.2)
}
.cine-badge .bic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:rgba(59,158,255,.16);border:1px solid rgba(59,158,255,.34);color:#9bd0ff}
.cine-badge b{display:block;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.01em}
.cine-badge span{display:block;color:#9fb0c6;font-size:11px}
.cine-badge.b1{top:8%;left:-14px}
.cine-badge.b2{bottom:12%;right:-14px}
@media(min-width:1024px){.cine-badge.b1{top:10%;left:-72px}.cine-badge.b2{bottom:16%;right:-72px}}

/* Scroll-Hinweis */
.cine-scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:11;display:flex;flex-direction:column;align-items:center;gap:8px;color:#7d8da4;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.cine-scroll-hint .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.25);border-radius:14px;position:relative}
.cine-scroll-hint .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:6px;border-radius:99px;background:#7cc1ff;animation:cineWheel 1.6s ease-in-out infinite}
@keyframes cineWheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* Static-Fallback: kein Kino (reduce-motion / kein JS / GSAP fehlt) ->
   nur die Card als normaler Abschnitt, kein Overlap, alles sichtbar. */
html:not(.cine-ready) .cine{height:auto;min-height:0;padding:48px 0;display:block}
html:not(.cine-ready) .cine-text,
html:not(.cine-ready) .cine-cta,
html:not(.cine-ready) .cine-scroll-hint{display:none}
html:not(.cine-ready) .cine-card-wrap{position:relative;inset:auto;height:auto}
html:not(.cine-ready) .cine-card{position:relative;width:min(92vw,1180px);height:auto;min-height:auto}
html:not(.cine-ready) .cine-stage{height:auto;padding-top:40px;padding-bottom:40px}
html:not(.cine-ready) .cine-center{min-height:320px}

@media (prefers-reduced-motion: reduce){
  .cine-scroll-hint .mouse::after{animation:none}
}