/* ============================================================
   Variante 5 (05.11.2026): eigene, markenlose Geräte im Produkt-Abschnitt
   Graphit statt Silber, saubere Lichtkanten, echter Glasglanz,
   schlanker Standfuß, Frontkamera in der Insel am Handy.
   Überschreibt die Geräte aus style.css – nur aktiv mit body.v5.
   Alle Maße wie dort in cqw (relativ zur Showcase-Breite).
   ============================================================ */

/* --- Monitor --- */
.v5 .monitor__frame{
  padding: .22cqw; border-radius: 1.25cqw;
  background: linear-gradient(180deg, #3d3e3a 0%, #1d1e1c 38%, #262724 70%, #33342f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),     /* umlaufende Lichtkante */
    inset 0 1px 0 rgba(255,255,255,.32),       /* Glanzkante oben */
    0 .3cqw .6cqw rgba(0,0,0,.35),
    0 4cqw 7cqw -2cqw rgba(0,0,0,.7);
}
.v5 .monitor__bezel{
  padding: .6cqw; border-radius: 1.03cqw; background: #030303;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.v5 .monitor__screen{ border-radius: .4cqw; }

/* Glas: diagonaler Lichtreflex, weicher Glanz von oben, leichte Randabdunklung */
.v5 .monitor__screen::after,
.v5 .phone__screen::after{
  background:
    linear-gradient(115deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 36%, transparent 36.3%),
    radial-gradient(130% 70% at 50% -12%, rgba(255,255,255,.07), transparent 60%);
  box-shadow: inset 0 0 3cqw rgba(0,0,0,.28);
}

/* Standfuß: schlanke, nach unten breiter werdende Säule + flache Bodenplatte */
.v5 .monitor__neck{
  width: 9cqw; height: 8.5cqw; margin-top: -.05cqw;
  background: linear-gradient(90deg, #121311 0%, #3e3f3b 28%, #5b5c57 50%, #3a3b37 72%, #111210 100%);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.v5 .monitor__neck::before{ height: 2cqw; background: linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.v5 .monitor__foot{
  width: 24cqw; height: 1.7cqw; clip-path: none;
  border-radius: .9cqw .9cqw .5cqw .5cqw;
  background: linear-gradient(180deg, #5d5e59 0%, #33342f 35%, #1b1c1a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.5);
}
.v5 .monitor__shadow{
  width: 34cqw; height: 2cqw; margin-top: -.9cqw;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
}

/* --- Smartphone --- */
.v5 .phone__frame{
  padding: .28cqw;
  background: linear-gradient(145deg, #4b4c47 0%, #1f201d 32%, #393a36 58%, #141513 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.32),
    -2cqw 3cqw 6cqw rgba(0,0,0,.55),
    0 .3cqw .6cqw rgba(0,0,0,.35);
}
.v5 .phone__frame::before,
.v5 .phone__frame::after{ background: linear-gradient(90deg, #1b1c1a, #4b4c47); }
.v5 .phone__bezel{ padding: .38cqw; background: #030303; }

/* Insel mit Frontkamera */
.v5 .phone__island{
  top: 1cqw; width: 6.6cqw; height: 1.9cqw; border-radius: 1cqw; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.v5 .phone__island::after{
  content: ""; position: absolute; top: 50%; right: .55cqw; transform: translateY(-50%);
  width: .82cqw; height: .82cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a5a78 0%, #121a2a 42%, #000 72%);
  box-shadow: 0 0 0 .1cqw #141414;
}