/* Geräte-Ansicht der Wallets (Handy-Mockup, Laptop, ohne Rahmen) – genutzt im Kopf der Testseite und im Wallet-Finder
   der Übersicht (Krypto_Wallet_Page::device()). */

/* Software-Wallets: Bild immer vollständig – der Bildbereich übernimmt das Seitenverhältnis des Bildes
   (Inline-Style aspect-ratio), nichts wird beschnitten oder gezoomt. */
.wl-device {
    position: relative;
    display: inline-block;
    background: #111827;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

.wl-device-screen {
    display: block;
    overflow: hidden;
    background: #fff;
}

.wl-device .wl-device-screen img { /* stärker als allgemeine Bildregeln der Seiten (z. B. .wl-hero-image img) */
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: contain;
}

/* Fertige App-Store-Grafik: ohne Zusatzrahmen, nur abgerundet */
.wl-device--none {
    border-radius: 18px;
    background: transparent;
}

.wl-device--none .wl-device-screen {
    width: auto;
    height: 280px;
    border-radius: 18px;
}

/* Handy-Mockup: Hauptbild in der Mitte, bis zu zwei Galeriebilder leicht gedreht dahinter.
   Bildschirm = Seitenverhältnis des Bildes; „modern“ (19,5:9) schmaler Rahmen, „classic“ (16:9) mit Home-Knopf.
   Lautsprecher immer im Rahmen, nie über dem Bild. */
.wl-phones {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
}

.wl-device--phone {
    flex: none;
    padding: 18px 7px 12px; /* Lautsprecher im oberen Rahmen, nicht über dem Bild */
    border-radius: 30px;
    background: #0f172a;
    box-shadow: 0 0 0 1px #334155 inset, 0 22px 44px rgba(15, 23, 42, 0.25);
}

.wl-device--phone .wl-device-screen {
    width: auto;
    height: 240px;
    border-radius: 10px;
}

.wl-device--phone.wl-device--classic {
    padding: 28px 7px 34px;
    border-radius: 28px;
}

.wl-device--phone.wl-device--classic .wl-device-screen {
    height: 200px;
    border-radius: 3px;
}

.wl-device--phone::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 24%;
    height: 4px;
    border-radius: 999px;
    background: #334155;
    transform: translateX(-50%);
}

.wl-device--phone.wl-device--classic::before {
    top: 12px;
    width: 26%;
}

.wl-device--phone.wl-device--classic::after {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #334155;
    border-radius: 50%;
    transform: translateX(-50%);
}

.wl-phone-main {
    z-index: 2;
}

.wl-phone-side {
    z-index: 1;
    box-shadow: 0 0 0 1px #334155 inset, 0 12px 24px rgba(15, 23, 42, 0.18);
}

/* Seitliche Handys nur so weit eingerückt, dass sich höchstens die Rahmen berühren – kein Bildschirm wird verdeckt */
.wl-phone-left {
    margin-right: -20px;
    transform: scale(0.76) rotate(-6deg);
}

.wl-phone-right {
    margin-left: -20px;
    transform: scale(0.76) rotate(6deg);
}

.wl-device--desktop {
    width: 100%;
    max-width: 340px;
    padding: 10px 10px 12px;
    border-radius: 14px 14px 4px 4px;
}

.wl-device--desktop .wl-device-screen {
    border-radius: 4px;
}

.wl-device-base {
    position: absolute;
    left: -7%;
    right: -7%;
    bottom: -12px;
    height: 12px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(#d1d5db, #9ca3af);
}

@media (max-width: 600px) {
    .wl-device--phone .wl-device-screen {
        height: 220px;
    }

    .wl-device--phone.wl-device--classic .wl-device-screen {
        height: 180px;
    }

    .wl-phone-left {
        margin-right: -18px;
    }

    .wl-phone-right {
        margin-left: -18px;
    }
}