/* ===== HERO ===== */
.hero{ position:relative; min-height: 78vh; display:flex; align-items:center; overflow:clip; }
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero video{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.02) brightness(.95); opacity:.85; }
.hero::before{ /* vignette for readability */ content:""; position:absolute; inset:0; pointer-events:none; }
[data-theme="light"] .hero::before{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15) 40%, transparent 60%); }
.hero .container{ display:grid; gap:1.25rem; grid-template-columns: 1.2fr .8fr; align-items:center; }
.hero-copy{ padding:2rem 0; }
.hero-badge{ display:flex; gap:.6rem; align-items:center; }
.hero-badge .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); box-shadow: var(--glow); }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.device-card{ aspect-ratio: 9/19.5; border-radius:28px; border:1px solid rgba(255,255,255,.18); position:relative; overflow:hidden; box-shadow: var(--shadow), var(--glow); background: linear-gradient(180deg, #0b1922, #071018); }
[data-theme="light"] .device-card{ background: linear-gradient(180deg, #e6f7ff, #dff9fb); border-color: rgba(2,8,23,.08); }
.device-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:44%; height:22px; background:#0007; border-radius:0 0 16px 16px; border:1px solid #123; border-top:none; }
[data-theme="light"] .device-notch{ background:#0003; border-color:#99c; }
.device-screen{ position:absolute; inset:8px; border-radius:24px; overflow:hidden; }
.screen-video{ width:100%; height:100%; object-fit:cover; opacity:.98; }
.floating{ position:absolute; right:-40px; bottom:-30px; width:240px; rotate:-8deg; opacity:.95; filter: drop-shadow(0 20px 40px rgba(0,0,0,.25)); }
@media (max-width: 980px){ .hero .container{ grid-template-columns:1fr; } .floating{ display:none; } }

/* ===== STRIP / PARTNER ===== */
.strip{ display:flex; gap:2.5rem; overflow:auto; padding:.75rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip img{ height:26px; opacity:.75; }
.sec-partner{ background: var(--bg-soft); }

/* ===== FEATURES ===== */
.features{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.card{ padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius); background: var(--card); box-shadow: var(--shadow); }
.card h3{ margin:.2rem 0 .4rem; font-size:1.15rem; }
.card p{ margin:0; color:var(--muted); }
.icon{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background: rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.35); box-shadow: var(--glow); }
@media (max-width:900px){ .features{ grid-template-columns:1fr; } }
.sec-features{ background: var(--bg); }

/* ===== SHOWCASE / PARALLAX ===== */
.showcase{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.mock{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow); transform: translateZ(0); }
.mock img{ width:100%; display:block; }
.parallax{ transform: translateY(var(--y, 0px)); will-change: transform; }
@media (max-width:980px){ .showcase{ grid-template-columns:1fr; } }
.sec-parallax{ background: var(--bg-soft); }

/* ===== HORIZONTAL GALLERY ===== */
.h-scroll{ overflow:auto; display:flex; gap:1rem; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.h-card{ flex:0 0 clamp(260px, 40vw, 420px); scroll-snap-align:start; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.sec-showreel{ background: var(--bg); }

/* ===== MARQUEE ===== */
.marquee{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: linear-gradient(180deg, rgba(2,8,23,.02), rgba(2,8,23,0)); }
.marquee-track{ display:flex; gap:3rem; padding:1rem 0; animation: scroll 30s linear infinite; }
.marquee-item{ white-space:nowrap; color:var(--accent); letter-spacing:.5px; }
@keyframes scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ===== PRICING ===== */
.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.price{ padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius); background: var(--card); position:relative; box-shadow: var(--shadow); }
.price.popular{ outline:2px solid rgba(14,165,233,.35); box-shadow: var(--glow); }
.price h4{ margin:.2rem 0; font-size:1.2rem; }
.price-amount{ font-size:2rem; font-weight:800; }
.check{ color:#10b981; margin-right:.5rem; }
.mutelist{ color:var(--muted); }
@media (max-width:980px){ .pricing{ grid-template-columns:1fr; } }
.sec-pricing{ background: var(--bg-soft); }

/* ===== FAQ ===== */
details{ border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; background: var(--card); box-shadow: var(--shadow); }
details + details{ margin-top:.7rem; }
summary{ cursor:pointer; font-weight:600; }
summary::-webkit-details-marker{ display:none; }
.sec-faq{ background: var(--bg); }

/* ===== CTA ===== */
.sec-cta{ background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }

/* ===== REVEAL ===== */
.reveal{ opacity:0; transform: translateY(16px); transition:.6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
}

/* ===== WELCOME SPLASH ===== */
.fullheight{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.centered{ text-align:center; align-items:center; justify-content:center; }
.scroll-div-1{ background: var(--bg-soft); overflow:hidden; }

/* Animations */
.animate-welcome-zoom, .animate-welcome-slide{ opacity:0; }
.animate-welcome-zoom.animate-in{ animation: zoomIn 1s ease-out forwards; }
.animate-welcome-slide.animate-in{ animation: slideUp 1.2s ease-out forwards; animation-delay: .15s; }
@keyframes zoomIn{ from{ transform: scale(.96); opacity:0;} to{ transform: scale(1); opacity:1;} }
@keyframes slideUp{ from{ transform: translateY(14px); opacity:0;} to{ transform: translateY(0); opacity:1;} }


/* SHOW Reeal Pro- ------------- */
/* ==== Showreel Pro (scoped) ==== */
#showreel .showreel-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.75rem;
}
#showreel .showreel-ctrl{ display:flex; gap:.5rem; }

#showreel .reel-wrap{ position:relative; }
#showreel .reel{ gap:1rem; scroll-snap-type:x mandatory; padding-bottom:.75rem; }
#showreel .reel-item{
  position:relative; flex:0 0 clamp(220px, 34vw, 380px); border-radius: var(--radius);
  overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, outline-color .2s ease;
  scroll-snap-align:start; cursor: zoom-in;
}
#showreel .reel-item img{ display:block; width:100%; height:auto; }
#showreel .reel-item:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.15); }
#showreel .badge{
  position:absolute; left:10px; bottom:10px; padding:.25rem .55rem; border-radius:10px;
  background: rgba(0,0,0,.55); color:#fff; font-size:.85rem; letter-spacing:.2px;
}
[data-theme="light"] #showreel .badge{ background: rgba(2,8,23,.65); }

/* Edge fade overlays */
#showreel .fade{ position:absolute; top:0; bottom:18px; width:64px; pointer-events:none; z-index:2; }
/*#showreel .fade-left{ left:0; background: linear-gradient(90deg, var(--bg) 0%, transparent); }
#showreel .fade-right{ right:0; background: linear-gradient(270deg, var(--bg) 0%, transparent); }
*/
/* Progress */
#showreel .reel-progress{ height:3px; background: var(--line); border-radius:999px; overflow:hidden; margin-top:.25rem; }
#showreel .reel-progress span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* Lightbox */
#showreel .lightbox{ border:0; padding:0; background: transparent; }
#showreel .lightbox::backdrop{ background: rgba(0,0,0,.55); }
#showreel .lightbox img{
  display:block; max-width:min(92vw, 1400px); max-height:80vh; border-radius:16px;
  margin: 6vh auto 0; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
#showreel .lightbox .close{
  position:fixed; top:16px; right:16px; z-index:5;
  border:1px solid var(--line); border-radius:999px; background: var(--card);
  padding:.4rem .6rem; cursor:pointer;
}
#showreel .lightbox .caption{ text-align:center; margin:.5rem 0 4vh; }

/* Drag-to-scroll cursor hint */
#showreel .reel{ cursor: grab; }
#showreel .reel:active{ cursor: grabbing; }

/* Mobile: kleinere Karten, weniger Rand */
@media (max-width: 600px){
  #showreel .reel-item{ flex-basis: clamp(200px, 72vw, 320px); }
  #showreel .fade{ width:40px; }
}

/* ---------- Handy ----------*/
/* ==== Phone mock (bezels + notch) ==== */
.phone-mock{
  position:relative;
  /* typische Smartphone-Aspect-Ratio */
  aspect-ratio: 9 / 19.5;
  width: min(480px, 90vw);      /* Größe anpassen */
  margin-inline:auto;
  border-radius: 34px;
  background: linear-gradient(180deg, black, black);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
[data-theme="light"] .phone-mock{
  background: linear-gradient(180deg, black, black);
  border-color: rgba(2,8,23,.12);
}

.phone-screen{
  position:absolute; inset: 10px;
  border-radius: 28px; overflow:hidden;
  background: #000;        /* falls das Bild nicht ganz füllt */
}
.phone-screen > img{
  width:100%; height:100%;
  object-fit: contain;     /* zeigt vollen Screenshot ohne Beschnitt */
  object-position: center;
  display:block;
}
/* Willst du randlos füllen (evtl. minimaler Beschnitt): 
.phone-screen > img{ object-fit: cover; } */

/* Notch */
.phone-notch{
  position:absolute; top: 1px; left:50%; transform: translateX(-50%);
  width: 42%; height: 20px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.06);
  border-top: none;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
[data-theme="light"] .phone-notch{
  background: rgba(0,0,0,.55);
  border-color: rgba(2,8,23,.08);
}

/* Seitenbuttons (rechts) */
.phone-buttons::before,
.phone-buttons::after{
  content:"";
  position:absolute; right: -3px; width: 3px; border-radius: 2px;
  background: rgba(0,0,0,.5);
}
.phone-buttons::before{ top: 80px; height: 42px; }
.phone-buttons::after{  top: 130px; height: 80px; }
[data-theme="light"] .phone-buttons::before,
[data-theme="light"] .phone-buttons::after{ background: rgba(2,8,23,.2); }

/* Soft reflection */
.phone-mock::after{
  content:""; position:absolute; inset:0; border-radius:34px; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%);
  mix-blend-mode: screen;
}

.phone-mock--vh75{
  aspect-ratio: 9 / 19.5;
  /* Breite so berechnen, als hätte das Gerät 75vh Höhe */
  width: min(calc(75vh * 9 / 19.5), 95vw, 620px);
  height: auto;              /* Höhe aus Breite ableiten -> kein Verzerren */
}

/* Drop shadow under device */
.phone-shadow{
  position:absolute; left:10%; right:10%; bottom:-10px; height: 28px;
  filter: blur(12px); border-radius: 50%;
  background: rgba(0,0,0,.35);
}

/* Größenvarianten */
.phone-mock--xl{ width: min(620px, 95vw); }
@media (max-width: 980px){
  .phone-mock--xl{ width: min(520px, 94vw); }
}
/* Moderne Viewport-Einheit (adressleisten-sicher) – wenn unterstützt, override */
@supports (height: 1dvh){
  .phone-mock--vh75{
    width: min(calc(75dvh * 9 / 19.5), 95vw, 620px);
  }
}

/* Optional: Container-Inhalt schön zentrieren */
.parallax.reveal.mock{
  display: grid;
  place-items: center;
}

/* ==== Entrance + Sheen + Notch Pulse ==== */
.phone-anim{
  /* transform per Variablen, damit JS/Animationen zusammenspielen */
  --ty: 24px; --rx: 6deg; --ry: 0deg; --scale: .96;
  opacity: 0;
  transform: translate3d(0,var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}

/* Sheen line across the screen */
/*.phone-screen { position: relative; }*/
.phone-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(120deg, transparent 45%,
      rgba(255,255,255,.28) 50%, transparent 55%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
  opacity:.0;
}


/* Notch glow pulse (fein) */
.phone-notch{ box-shadow: none; }

/* Wenn im View: spiele die Effekte */
.phone-anim.in{
  animation: phoneEnter .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.phone-anim.in .phone-sheen{
  animation: phoneSheen 1.1s .35s ease-out forwards;
}
.phone-anim.in .phone-notch{
  animation: notchPulse .8s .15s ease-out;
}

/* Idle: ganz leichte „Atmung“ über Shadow */
.phone-anim.in .phone-shadow{
  animation: shadowBreathe 3.6s 1s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes phoneEnter{
  to { opacity:1; --ty:0; --rx:0deg; --scale:1; }
}
@keyframes phoneSheen{
  0%   { transform: translateX(-120%); opacity:0; }
  10%  { opacity:.35; }
  70%  { opacity:.15; }
  100% { transform: translateX(120%); opacity:0; }
}
@keyframes notchPulse{
  0% { box-shadow: 0 0 0 rgba(0,229,255,0); }
  40%{ box-shadow: 0 0 18px rgba(0,229,255,.45); }
  100%{ box-shadow: 0 0 0 rgba(0,229,255,0); }
}

@keyframes shadowBreathe{
  from { transform: scaleX(.95); opacity:.6; }
  to   { transform: scaleX(1.05); opacity:.85; }
}

/* Optional: subtiler Tilt per Maus */
/*.phone-anim.tilt-ready{ transition: transform .12s ease-out; }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .phone-anim, .phone-anim * { animation: none !important; transition: none !important; }
  .phone-anim { opacity:1; --ty:0; --rx:0deg; --scale:1; }
}