/* Startseite: zwei Handys drehen sich im Kreis (Display ↔ Rückseite) – ersetzt das Standbild im Hero */
.hero-art.has-phones{ perspective:1500px; perspective-origin:50% 40%; }
.ps-stage{ position:absolute; inset:0; }
.ps-glow{ position:absolute; left:64%; top:52%; width:520px; height:520px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(19,181,238,.28) 0%, rgba(72,225,189,.12) 35%, transparent 68%); filter:blur(8px); animation:psPulse 6s ease-in-out infinite; }
.ps-floor{ position:absolute; left:64%; bottom:46px; width:360px; height:44px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(72,225,189,.35), transparent 70%); filter:blur(6px); animation:psPulse 6s ease-in-out infinite; }
.ps-float{ position:absolute; left:64%; top:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }
.ps-ring{ position:absolute; transform-style:preserve-3d; will-change:transform; }
.ps-phone{ position:absolute; width:210px; height:432px; left:-105px; top:-216px; transform-style:preserve-3d; }
.ps-p1{ transform:rotateY(0deg) translateZ(95px) rotateZ(-6deg); }
.ps-p2{ transform:rotateY(180deg) translateZ(95px) rotateZ(6deg); }
.ps-face{ position:absolute; inset:0; border-radius:34px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; }
.ps-front{ background:#0b0f14; border:3px solid #7fa3b4; box-shadow:inset 0 0 0 7px #05080b, 0 0 30px rgba(0,140,255,.25); transform:translateZ(5px); }
.ps-screen{ position:absolute; inset:9px; border-radius:26px; overflow:hidden;
  background:
    radial-gradient(120% 70% at 85% 30%, rgba(72,225,189,.85) 0%, rgba(72,225,189,0) 45%),
    radial-gradient(110% 80% at 10% 85%, rgba(0,140,255,.95) 0%, rgba(0,140,255,0) 55%),
    radial-gradient(90% 60% at 70% 95%, rgba(103,80,255,.8) 0%, rgba(103,80,255,0) 60%),
    linear-gradient(160deg, #0a1b33 0%, #04070c 100%); }
.ps-screen svg{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; opacity:.9; }
.ps-wave{ animation:psWave 7s ease-in-out infinite alternate; transform-origin:50% 50%; }
.ps-time{ position:absolute; top:58px; width:100%; text-align:center; font-size:44px; font-weight:300; letter-spacing:1px; color:#eaf6ff; text-shadow:0 2px 12px rgba(0,0,0,.4); font-family:Arial, Helvetica, sans-serif; }
.ps-date{ position:absolute; top:40px; width:100%; text-align:center; font-size:12px; color:#cfe6f5; font-family:Arial, Helvetica, sans-serif; }
.ps-punch{ position:absolute; top:16px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#000; box-shadow:0 0 0 2px #111; z-index:2; }
.ps-shine{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); animation:psShine 7s ease-in-out infinite; }
.ps-back{ transform:rotateY(180deg) translateZ(5px); border:3px solid #7fa3b4; background:linear-gradient(155deg, #3e5566 0%, #22313d 45%, #141e26 100%); box-shadow:0 0 30px rgba(0,140,255,.2); }
.ps-gloss{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.14), transparent 40%, rgba(255,255,255,.05) 70%, transparent); }
.ps-cam{ position:absolute; top:22px; left:22px; width:78px; height:104px; border-radius:24px; background:linear-gradient(150deg,#4d6576,#2a3a47); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.35); }
.ps-lens{ position:absolute; left:15px; width:48px; height:48px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #3a7bd5 0%, #0c1726 35%, #000 70%); box-shadow:0 0 0 4px #1b2731, 0 0 0 6px #6d8797; }
.ps-l1{ top:4px; } .ps-l2{ top:54px; }
.ps-flash{ position:absolute; top:40px; left:108px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle,#fff7d6,#c9b56a); }
.ps-logo{ position:absolute; bottom:40px; width:100%; text-align:center; font-size:15px; font-weight:800; letter-spacing:-.5px; color:rgba(255,255,255,.55); font-family:Arial, Helvetica, sans-serif; }
.ps-logo span{ color:#4fb8ff; }
.ps-edge{ position:absolute; inset:0; border-radius:34px; background:linear-gradient(90deg,#5d7b8c,#a8c4d2 50%,#5d7b8c); }
.ps-e1{ transform:translateZ(3px); } .ps-e2{ transform:translateZ(1px); } .ps-e3{ transform:translateZ(-1px); } .ps-e4{ transform:translateZ(-3px); }
@keyframes psPulse{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
@keyframes psShine{ 0%,60%{ transform:translateX(-120%); } 85%,100%{ transform:translateX(120%); } }
@keyframes psWave{ from{ transform:translateY(0) scale(1); } to{ transform:translateY(-14px) scale(1.06); } }
@media (max-width:1150px){ .ps-glow, .ps-floor, .ps-float{ left:62%; } }
@media (min-width:701px) and (max-width:900px){ .ps-glow, .ps-floor, .ps-float{ left:55%; } .ps-phone{ width:170px; height:350px; left:-85px; top:-175px; } .ps-p1{ transform:rotateY(0deg) translateZ(75px) rotateZ(-6deg); } .ps-p2{ transform:rotateY(180deg) translateZ(75px) rotateZ(6deg); } }
@media (max-width:700px){
  .hero-art.has-phones{ aspect-ratio:auto; height:420px; }
  .ps-glow, .ps-floor, .ps-float{ left:50%; }
  .ps-glow{ width:380px; height:380px; } .ps-floor{ bottom:16px; width:260px; }
  .ps-phone{ width:160px; height:330px; left:-80px; top:-165px; }
  .ps-p1{ transform:rotateY(0deg) translateZ(70px) rotateZ(-6deg); } .ps-p2{ transform:rotateY(180deg) translateZ(70px) rotateZ(6deg); }
  .ps-time{ font-size:34px; top:48px; } .ps-date{ top:32px; font-size:10px; }
  .ps-cam{ width:60px; height:82px; left:16px; top:16px; } .ps-lens{ width:36px; height:36px; left:12px; } .ps-l2{ top:42px; } .ps-flash{ left:86px; top:32px; }
  .ps-logo{ bottom:28px; font-size:13px; }
}