/* withira.com — Pop-out-Hero (helle Variante, aus freigegebenem Prototyp).
   Nur auf index.html geladen, komplett namespaced (.ph-*), damit nichts
   an styles.css / theme-bright.css / katalog kollidiert. */
.ph-hero{
  /* helle Vertrauens-Palette, lokal gescoped */
  --ph-ink:#15243c; --ph-slate:#5a6b83; --ph-white:#fff;
  --ph-blue:#1c7ed6; --ph-blue-hi:#4aa6ea; --ph-teal:#0e9aa7;
  --ph-gold:#b7862c; --ph-gold-hi:#e2b256;
  --ph-line:#e0e9f5; --ph-porcelain:#f4f8fd;
  --ph-sh:rgba(21,55,100,.16); --ph-sh-soft:rgba(21,55,100,.10);
  position:relative;
  padding:calc(96px + env(safe-area-inset-top)) 0 30px;
}
.ph-hero__wrap{max-width:1160px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:center;min-height:min(74vh,640px);}

/* ---- Text ---- */
.ph-hero__txt{min-width:0;}   /* verhindert, dass das nowrap-Laufband das Grid sprengt */
.ph-eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ph-gold);
  font-weight:700;margin:0 0 16px;}

/* ---- Laufband-Hero (ersetzt Eyebrow/Titel/Lead, läuft in der linken Spalte) ---- */
.ph-marquee{position:relative;overflow:hidden;margin:0 0 24px;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.ph-marquee__track{display:inline-flex;align-items:center;white-space:nowrap;
  will-change:transform;animation:ph-marq 32s linear infinite;}
.ph-marquee:hover .ph-marquee__track{animation-play-state:paused;}
.mq-item{display:inline-flex;align-items:center;gap:28px;padding-right:28px;}
.mq-eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ph-gold);font-weight:700;}
.mq-title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3.15rem);
  line-height:1.05;letter-spacing:-.01em;color:var(--ph-ink);}
.mq-title .ph-grad{background:linear-gradient(100deg,var(--ph-blue),var(--ph-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.mq-lead{font-size:17px;color:var(--ph-slate);}
.mq-sep{color:var(--ph-gold-hi);font-size:17px;opacity:.55;flex:none;}
@keyframes ph-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ph-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none;}
  .ph-marquee__track{animation:none;display:block;white-space:normal;}
  .ph-marquee__track > .mq-item:nth-child(2){display:none;}
  .mq-item{display:block;white-space:normal;}
  .mq-sep{display:none;}
  .mq-eyebrow{display:block;margin-bottom:14px;}
  .mq-title{display:block;font-size:clamp(2.4rem,5.2vw,3.7rem);margin-bottom:16px;}
  .mq-lead{display:block;}
}
.ph-hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5.6vw,4.15rem);
  line-height:1.03;letter-spacing:-.01em;margin:0 0 18px;color:var(--ph-ink);text-wrap:balance;}
.ph-hero__title .ph-grad{background:linear-gradient(100deg,var(--ph-blue),var(--ph-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.ph-hero__lead{font-size:18px;color:var(--ph-slate);max-width:46ch;margin:0 0 20px;line-height:1.55;}
.ph-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px;}
.ph-chip{font-size:13px;color:var(--ph-slate);border:1px solid var(--ph-line);border-radius:999px;
  padding:8px 14px;display:inline-flex;gap:8px;align-items:center;background:var(--ph-white);
  box-shadow:0 6px 16px -12px var(--ph-sh);}
.ph-chip b{color:var(--ph-ink);font-weight:600;}
.ph-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
/* Opt-in dezent unter die CTAs */
.ph-hero .optin{margin-top:4px;}

/* ---- Bühne / Pop-out ---- */
.ph-stage{perspective:1300px;perspective-origin:60% 40%;position:relative;
  display:flex;justify-content:center;align-items:center;min-height:520px;}
.ph-rig{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-16deg));
  transition:transform .18s cubic-bezier(.2,.7,.2,1);will-change:transform;}
.ph-rig::after{content:"";position:absolute;left:50%;bottom:-34px;width:210px;height:40px;
  transform:translateX(-50%) translateZ(-40px);background:radial-gradient(closest-side,var(--ph-sh),transparent 72%);
  filter:blur(3px);z-index:-1;}
.ph-hint{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-slate);opacity:.75;}

/* Phone — iPhone 17 (Titan-Rahmen, Dynamic Island, Seitentasten) */
.ph-phone{position:relative;width:286px;height:602px;border-radius:54px;
  /* Titan: helle Metallkanten, dunkle Mitte */
  background:linear-gradient(145deg,#6a7280 0%,#333b47 16%,#1c212b 50%,#333b47 84%,#69717f 100%);
  padding:10px;transform-style:preserve-3d;
  box-shadow:
    0 48px 90px -34px var(--ph-sh),
    0 8px 22px -10px rgba(21,55,100,.28),
    0 0 0 1px rgba(0,0,0,.32),
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    inset 0 2px 3px rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.42);}
/* innerer Glanzrand ums Display */
.ph-phone::before{content:"";position:absolute;inset:7px;border-radius:46px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55);pointer-events:none;z-index:3;}
.ph-screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;
  background:radial-gradient(140% 90% at 80% -10%,rgba(28,126,214,.12),transparent 55%),var(--ph-white);
  border:1px solid rgba(21,55,100,.08);}
/* Dynamic Island */
.ph-island{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:84px;height:26px;
  background:#05070a;border-radius:999px;z-index:6;
  box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);}
.ph-island__cam{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:8px;height:8px;
  border-radius:50%;background:radial-gradient(circle at 34% 28%,#37506b,#05070a 70%);
  box-shadow:0 0 3px rgba(90,150,210,.55),inset 0 0 1px rgba(120,180,230,.6);}
/* Seitentasten (Titan) */
.ph-btn{position:absolute;z-index:2;border-radius:2px;
  background:linear-gradient(90deg,#12161d,#3b434f 55%,#20262f);
  box-shadow:0 1px 1px rgba(0,0,0,.4);}
.ph-btn--action{left:-3px;top:118px;width:3.5px;height:30px;border-radius:3px 0 0 3px;}
.ph-btn--volup{left:-3px;top:166px;width:3.5px;height:52px;border-radius:3px 0 0 3px;}
.ph-btn--voldn{left:-3px;top:230px;width:3.5px;height:52px;border-radius:3px 0 0 3px;}
.ph-btn--power{right:-3px;top:176px;width:3.5px;height:82px;border-radius:0 3px 3px 0;}
/* Echte 3D-Tiefe: gestapelte Titan-Kanten hinter der Vorderseite (per JS erzeugt) */
.ph-edge{position:absolute;inset:0;border-radius:54px;backface-visibility:hidden;pointer-events:none;
  background:linear-gradient(145deg,#5f6774 0%,#2b313c 48%,#4c5462 100%);}
.ph-screen{transform:translateZ(0.5px);}
.ph-app{padding:40px 16px 16px;height:100%;display:flex;flex-direction:column;}
.ph-app-h{font-family:var(--serif);font-size:19px;margin:0 0 3px;color:var(--ph-ink);}
.ph-app-sub{font-size:11.5px;color:var(--ph-slate);margin:0 0 16px;}
.ph-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.ph-mini{background:var(--ph-porcelain);border:1px solid var(--ph-line);border-radius:16px;padding:12px 11px;
  display:flex;flex-direction:column;gap:8px;min-height:104px;}
.ph-mini .ic{font-size:26px;}
.ph-mini .nm{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ph-ink);}
.ph-mini .pr{font-size:11px;color:var(--ph-gold);font-weight:700;margin-top:auto;}
.ph-mini.ghost{opacity:.34;}

/* Pop-out-Kachel */
.ph-pop{position:absolute;top:78px;right:-46px;width:160px;
  transform:translateZ(96px) rotate(-1deg);transform-style:preserve-3d;
  animation:ph-bob 5.2s ease-in-out infinite;will-change:transform;}
.ph-pop-card{background:var(--ph-white);border:1px solid var(--ph-line);border-radius:20px;padding:15px 14px;
  filter:drop-shadow(0 34px 44px var(--ph-sh)) drop-shadow(0 10px 16px var(--ph-sh-soft));}
.ph-pop-card .ic{font-size:46px;line-height:1;filter:drop-shadow(0 10px 12px rgba(21,55,100,.22));}
.ph-pop-card .nm{font-size:15px;font-weight:700;margin-top:10px;color:var(--ph-ink);}
.ph-pop-card .pr{font-size:12.5px;color:var(--ph-gold);font-weight:700;margin-top:3px;}
.ph-pop-card .go{margin-top:12px;font-size:11.5px;font-weight:700;color:#fff;text-align:center;
  background:linear-gradient(135deg,var(--ph-gold-hi),var(--ph-gold));border-radius:9px;padding:8px;}

/* schwebender Ira-Chip */
.ph-spark{position:absolute;bottom:64px;left:-40px;transform:translateZ(150px);
  background:var(--ph-white);border:1px solid rgba(14,154,167,.36);border-radius:14px;
  padding:10px 13px;display:flex;gap:9px;align-items:center;font-size:12px;color:var(--ph-ink);
  filter:drop-shadow(0 26px 32px var(--ph-sh));animation:ph-bob 6.4s ease-in-out infinite .4s;}
.ph-spark .av{width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,var(--ph-blue-hi),var(--ph-teal));box-shadow:0 0 12px rgba(14,154,167,.5);}
.ph-spark b{color:var(--ph-teal);font-weight:700;}

@keyframes ph-bob{0%,100%{translate:0 0}50%{translate:0 -13px}}

/* Produkt-Karten-Tilt (auf bestehendes .prod-Grid der Startseite) */
.prod{transform:perspective(900px) rotateX(var(--crx,0deg)) rotateY(var(--cry,0deg));
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;}

/* Responsive */
@media(max-width:860px){
  .ph-hero{padding-top:calc(88px + env(safe-area-inset-top));}
  .ph-hero__wrap{grid-template-columns:1fr;gap:6px;}
  .ph-stage{min-height:500px;order:2;margin-top:6px;}
  .ph-pop{right:-8px;}.ph-spark{left:-4px;}
}
@media(max-width:420px){
  .ph-phone{width:250px;height:506px;}
  .ph-pop{width:146px;right:0;}
}
@media(prefers-reduced-motion:reduce){
  .ph-pop,.ph-spark{animation:none;}
  .ph-rig,.prod{transition:none;}
}
/* Touch-Geräte: „Beweg die Maus"-Hinweis ausblenden (kein Maus-Tilt) */
@media (hover:none){.ph-hint{display:none;}}