/* Eigenständiges Element. Breite über --iphone-width einstellen. */
.iphone-mockup {
 --iphone-width:340px;
 width:min(var(--iphone-width),100%); container-type:inline-size;
 position:relative; isolation:isolate; box-sizing:border-box;
 border-radius:15.2% / 7.25%;
 background:linear-gradient(125deg,#9a9b98 0%,#454642 18%,#72736f 48%,#323430 76%,#82837f 100%);
 box-shadow:0 24px 48px -18px #14161145;
 transform:translateZ(0);
}
.iphone-mockup::before {
 content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
 background:linear-gradient(100deg,#656762,#93958f 55%,#444641);
 transform:translate(1px,2px);
}
.iphone-mockup::after {
 content:''; position:absolute; inset:1px; border-radius:inherit;
 box-shadow:inset 0 0 0 1px #ffffff30; pointer-events:none;
}
.iphone-mockup__screen {
 position:relative; display:block; overflow:hidden;
 margin:2.45cqw; aspect-ratio:1206 / 2622;
 border-radius:13.4% / 6.16%;
 background:#fafaf8; box-shadow:0 0 0 1.55cqw #080908;
}
.iphone-mockup { display:flow-root; }
.iphone-mockup__image { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.iphone-mockup__frame {
 display:block; border:0; background:#fafaf8;
 /* 393px echte Handy-Breite + 15px Zuschlag: der Zuschlag inkl. der eigenen
    Scrollbar der eingebetteten Seite fällt hinter das overflow:hidden vom
    Screen, weil die Skalierung in iphone-mockup.js gegen data-device-width
    (393) rechnet statt gegen die tatsächliche Elementbreite. */
 width:408px; height:852px; transform-origin:top left;
}
.iphone-mockup__island {
 position:absolute; top:1.65%; left:50%; transform:translateX(-50%); z-index:5;
 width:29%; height:4.25%; border-radius:999px; background:#050505;
}
.iphone-mockup__island::after {
 content:''; position:absolute; right:9%; top:50%; transform:translateY(-50%);
 width:10%; aspect-ratio:1; border-radius:50%;
 background:radial-gradient(circle at 40% 38%,#18222c,#080b10 45%,#101218 62%,#050505 72%);
}
.iphone-mockup__button {
 position:absolute; left:-.65%; width:.7%; z-index:-1; border-radius:2px;
 background:linear-gradient(90deg,#424440,#90928b,#353732);
}
.iphone-mockup__button--action { top:15%; height:3%; }
.iphone-mockup__button--up { top:22%; height:6%; }
.iphone-mockup__button--down { top:30%; height:6%; }
.iphone-mockup__button--power { left:auto; right:-.65%; top:25%; height:9%; }
.iphone-mockup__button--camera { left:auto; right:-.4%; top:64%; height:5%; width:.5%; }
.iphone-mockup--angled { transform:perspective(1600px) rotateX(14deg) rotateY(-14deg) rotateZ(18deg); box-shadow:22px 34px 40px -17px #14161150; }
.iphone-mockup--angled::before { transform:translate(3px,4px); }

/* Räumliches Gehäuse mit durchgehender Seitenwand. */
.iphone-mockup {
 transform-style:preserve-3d; isolation:auto; overflow:visible;
 background:linear-gradient(115deg,#dfded7,#8f9088 28%,#d1d0c7 62%,#8c8d86);
 box-shadow:none;
}
.iphone-mockup::before { display:none; }
.iphone-mockup::after {
 inset:0; border-radius:inherit;
 box-shadow:inset 0 0 0 1px #dadbd3;
 transform:translateZ(.3px);
}
.iphone-mockup__screen {
 margin:1.85cqw; border-radius:13.8% / 6.35%;
 box-shadow:0 0 0 1.15cqw #080908;
 transform:translateZ(.6px);
}
.iphone-mockup__rim {
 position:absolute; inset:0; border-radius:inherit; pointer-events:none;
 transform:translateZ(calc(var(--layer) * -1px));
 background:linear-gradient(180deg,#b0b0a5 0%,#e0dfd6 3%,#96978e 7%,#d7d6cb 12%,#c4c3b8 65%,#aaa99e 86%,#dddcd1 94%,#7e8077 98%,#b7b8ad 100%);
}
.iphone-mockup__rim--back { box-shadow:18px 32px 44px #17181030; }
.iphone-mockup__button { display:none; }
.iphone-mockup__side {
 position:absolute; right:0; top:12%; height:74%; width:12px;
 transform-origin:right center; transform:rotateY(90deg);
 background:linear-gradient(90deg,#98998e,#d6d5ca 40%,#c6c6ba 75%,#aaa99d);
 border-top:1px solid #88897d; border-bottom:1px solid #88897d;
}
.iphone-mockup__side-key {
 position:absolute; left:3px; width:6px;
 border:1px solid #7e7f72; border-radius:4px;
 background:linear-gradient(90deg,#a6a699,#d3d2c5);
 box-shadow:0 1px 1px #ffffff80;
}
.iphone-mockup__side-key--power { top:15%; height:14%; }
.iphone-mockup__side-key--camera { top:67%; height:13%; background:#b0b0a2; }
.iphone-mockup__bottom {
 position:absolute; bottom:0; left:16%; width:68%; height:12px;
 transform-origin:center bottom; transform:rotateX(-90deg);
 display:flex; align-items:center; justify-content:center; gap:8px;
 background:linear-gradient(#909185,#d8d7cc 45%,#b8b9ac);
}
.iphone-mockup__port { width:25px; height:5px; background:#242620; border-radius:3px; box-shadow:0 0 0 1px #888b7b; }
.iphone-mockup__speaker { width:26px; height:3px; background:radial-gradient(circle,#393c30 1.1px,transparent 1.3px) 0 0 / 6px 3px; }
.iphone-mockup--angled { transform:perspective(1600px) rotateX(20deg) rotateY(-32deg) rotateZ(16deg); box-shadow:none; }

/* Seitenflächen laufen hinter die Vorderseite, nicht darüber. */
.iphone-mockup__side { transform:rotateY(-90deg); width:12px; backface-visibility:visible; border:0; }
.iphone-mockup__bottom { transform:rotateX(90deg); backface-visibility:visible; }
.iphone-mockup__screen { margin:2.3cqw; border-radius:13.4% / 6.16%; box-shadow:0 0 0 1.4cqw #090a09; }
.iphone-mockup { border-radius:15.1% / 7.2%; }
.iphone-mockup__side { background:linear-gradient(90deg,#a2a398,#d4d4ca 45%,#b6b7ac); }
.iphone-mockup__side-key { left:3px; width:5px; border-color:#7d8072; box-shadow:none; }
.iphone-mockup__rim { background:linear-gradient(180deg,#a0a298,#d2d3c9 4%,#b4b6aa 12%,#c3c5b9 75%,#929589 93%,#c6c9bb); }
.iphone-mockup__rim--back { box-shadow:18px 28px 38px #17181025; }
.iphone-mockup-host { display:grid; place-items:center; width:100%; padding:55px 45px; perspective:1600px; }
/* Sanftes Dauer-Schweben statt Mausneigung (geaendert 16.09.2026): laeuft von
   selbst und reagiert auf keinen Zeiger.

   Die Animation bewegt bewusst NICHT transform direkt, sondern nur die Zahl
   --mockup-osc (0 -> 1 -> 0), aus der transform per calc() berechnet wird.
   Grund: wuerde die Animation transform selbst halten, springt das Geraet in
   dem Moment, in dem man die Animation abschaltet, von seiner aktuellen
   Neigung auf den Grundwert - und erst DANN laeuft eine Transition. Je
   groesser die Bewegung, desto haerter der Sprung. So bleibt transform frei:
   ein transform:none von aussen laeuft weich aus der Momentanlage heraus.
   Ruhelage und Schweben liegen bewusst auf ZWEI Ebenen: .iphone-mockup-tilt
   haelt die Neigung, .iphone-mockup schwingt als Delta darum. Wer die Neigung
   von aussen zuruecknimmt (transform:none auf dem Wrapper), bekommt dadurch
   einen weichen Uebergang, weil die laufende Animation gar nicht angefasst
   wird. Saessen beide auf einem Element, ginge es nicht: ein animation:none
   laesst das Geraet erst auf die Ruhelage springen, und ein uebersteuerndes
   transform:none !important schaltet hart um, weil eine Transition bei
   laufender Animation keinen brauchbaren Startwert hat. Beides probiert.
   (Ein dritter Versuch ueber @property und eine animierte Zahl scheiterte
   ebenfalls - hier nicht unterstuetzt, die Zahl blieb auf 0 stehen.) */
.iphone-mockup-host .iphone-mockup-tilt {
 /* width:100% ist Pflicht: als Flex-Item schrumpft der Wrapper sonst auf seinen
    Inhalt, und der Inhalt rechnet seine Breite per 100% aus genau diesem
    Wrapper - beide landen bei 0 und das Geraet verschwindet. */
 width:100%; display:flex; justify-content:center; transform-style:preserve-3d;
 transform:rotateX(12deg) rotateY(-23deg) rotateZ(9deg);
 transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.iphone-mockup-host .iphone-mockup {
 animation:iphone-mockup-float 9s ease-in-out infinite; will-change:transform;
}
@keyframes iphone-mockup-float {
 0%,100% { transform:rotateX(0deg)  rotateY(0deg) rotateZ(0deg)  translate3d(0,0,0);   }
 50%     { transform:rotateX(-5deg) rotateY(8deg) rotateZ(-4deg) translate3d(0,-20px,0); }
}
@media(prefers-reduced-motion:reduce) {
 .iphone-mockup-host .iphone-mockup { animation:none; will-change:auto; }
}

/* Statuswerte über dem Screenshot, passend zur vorhandenen iOS-Statusleiste. */
.iphone-mockup__time {
 position:absolute; left:11.8%; top:2.7%; width:15.3%; height:2.25%;
 display:flex; align-items:center; justify-content:center;
 background:#fafaf8; color:#050505;
 font-family:Arial,Helvetica,sans-serif; font-size:4.25cqw; font-weight:600;
 line-height:1; letter-spacing:-.12cqw;
}
.iphone-mockup__battery {
 position:absolute; left:83.8%; top:2.7%; width:8%; height:2.15%;
 display:flex; align-items:center; justify-content:flex-start;
 background:#fafaf8;
}
.iphone-mockup__battery-level {
 position:relative; width:81%; height:75%; border-radius:.9cqw;
 display:flex; align-items:center; justify-content:center;
 background:#050505; color:#fff;
 font-family:Arial,Helvetica,sans-serif; font-size:2.8cqw; font-weight:700; line-height:1;
}
.iphone-mockup__battery-level::after {
 content:''; position:absolute; right:-.55cqw; top:30%; width:.35cqw; height:40%;
 border-radius:0 .3cqw .3cqw 0; background:#aaa;
}