/* DERKAUFMANN geraete.css – Quelle: Entwuerfe-Relaunch-2026-10-30/_assets/runde2/geraete/geraete.css */
.geraet{
--g-gehaeuse:#E6E9EE; --g-rand:rgba(10,22,40,.14); --g-blende:#F4F5F7; --g-schirmrand:rgba(10,22,40,.10);
--g-basis-1:#E8EBEF; --g-basis-2:#B9C0CA; --g-kamera:#C9CFD8; --g-insel:#0B0F17;
--g-schatten:0 1px 2px rgba(10,22,40,.05),0 12px 28px -8px rgba(10,22,40,.16),0 36px 70px -24px rgba(10,22,40,.22);
container-type:inline-size; position:relative; display:block; margin:0; min-width:0;
}
.geraete--dunkel .geraet, .geraet.geraet--dunkel{
--g-gehaeuse:#1C2330; --g-rand:rgba(255,255,255,.10); --g-blende:#05070B; --g-schirmrand:rgba(255,255,255,.06);
--g-basis-1:#2E3746; --g-basis-2:#141A24; --g-kamera:#2A3342; --g-insel:#000;
--g-schatten:0 0 0 1px rgba(0,102,255,.10),0 18px 50px -12px rgba(0,102,255,.28),0 40px 80px -30px rgba(0,0,0,.6);
}
.geraet__schirm{position:relative; overflow:hidden; background:#0B0F17; box-shadow:0 0 0 1px var(--g-schirmrand)}
.geraet__schirm picture, .geraet__schirm img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0}
.geraet-laptop .geraet__deckel{
margin-inline:4.76cqi; padding:2.62cqi 2.38cqi 3.33cqi; background:var(--g-blende);
border-radius:1.4cqi 1.4cqi 0 0; position:relative;
box-shadow:inset 0 0 0 .14cqi var(--g-rand), 0 0 0 .3cqi var(--g-gehaeuse), var(--g-schatten);
}
.geraet-laptop .geraet__deckel::before{
content:""; position:absolute; top:1.05cqi; left:50%; width:.6cqi; height:.6cqi; margin-left:-.3cqi; border-radius:50%; background:var(--g-kamera);
}
.geraet-laptop .geraet__schirm{aspect-ratio:16/10; border-radius:.3cqi}
.geraet-laptop .geraet__basis{
position:relative; height:3.1cqi; background:linear-gradient(var(--g-basis-1),var(--g-basis-2));
border-radius:0 0 2.6cqi 2.6cqi / 0 0 1.6cqi 1.6cqi; box-shadow:0 18px 30px -18px rgba(10,22,40,.45);
}
.geraet-laptop .geraet__basis::before{
content:""; position:absolute; top:0; left:44%; width:12%; height:42%; border-radius:0 0 .9cqi .9cqi; background:rgba(0,0,0,.12);
}
.geraet-tablet{
display:flow-root; border-radius:4.39% / 6.11%; background:var(--g-blende);
box-shadow:inset 0 0 0 1px var(--g-rand), 0 0 0 2px var(--g-gehaeuse), var(--g-schatten);
}
.geraet-tablet .geraet__schirm{margin:3.76cqi; aspect-ratio:1180/820; border-radius:1.4cqi}
.geraet-tablet::before{content:""; position:absolute; top:1.5cqi; left:50%; width:.9cqi; height:.9cqi; margin-left:-.45cqi; border-radius:50%; background:var(--g-kamera)}
.geraet-handy{
display:flow-root; border-radius:15.6% / 7.53%; background:var(--g-blende);
box-shadow:inset 0 0 0 1px var(--g-rand), 0 0 0 3px var(--g-gehaeuse), var(--g-schatten);
}
.geraet-handy .geraet__schirm{margin:3.8cqi; aspect-ratio:390/844; border-radius:11.4cqi}
.geraet-handy::after{
content:""; position:absolute; top:6.6cqi; left:50%; width:23.7cqi; height:7.1cqi; transform:translateX(-50%); border-radius:999px; background:var(--g-insel);
}
.geraet__hinweis{
display:block; width:max-content; max-width:100%; margin:12px auto 0; padding:4px 10px; border-radius:999px;
font:600 12px/1.4 "Plus Jakarta Sans",system-ui,sans-serif; letter-spacing:.02em;
color:#7A4B00; background:#FFF3D6; box-shadow:inset 0 0 0 1px rgba(122,75,0,.18);
}
.geraete--dunkel .geraet__hinweis{color:#FFD58A; background:rgba(255,196,77,.12); box-shadow:inset 0 0 0 1px rgba(255,213,138,.25)}
.geraete-stapel{container-type:inline-size; position:relative; aspect-ratio:16/10.6; margin:0}
.geraete-stapel > .geraet-laptop{position:absolute; left:0; top:0; width:78%}
.geraete-stapel > .geraet-tablet, .geraete-stapel > .geraet-tablet-wrap{position:absolute; right:8%; bottom:2%; width:40%}
.geraete-stapel > .geraet-handy, .geraete-stapel > .geraet-handy-wrap{position:absolute; right:0; bottom:0; width:15.5%}
.geraete-stapel > * > .geraet{width:100%}
@container (max-width:560px){
.geraete-stapel > .geraet-tablet, .geraete-stapel > .geraet-tablet-wrap{display:none}
.geraete-stapel > .geraet-handy, .geraete-stapel > .geraet-handy-wrap{width:27%}
.geraete-stapel > .geraet-laptop{width:88%}
}
@media (min-width:768px){
.geraete-stapel--raum{perspective:2200px; transform-style:preserve-3d}
.geraete-stapel--raum > .geraet-laptop{transform:rotateY(14deg) rotateX(3deg); transform-origin:0 50%}
.geraete-stapel--raum > .geraet-tablet, .geraete-stapel--raum > .geraet-tablet-wrap{transform:translateZ(60px) rotateY(-10deg) rotateX(2deg)}
.geraete-stapel--raum > .geraet-handy, .geraete-stapel--raum > .geraet-handy-wrap{transform:translateZ(120px) rotateY(-16deg) rotateX(2deg)}
}