Kundenportal: realistische MacBook- und iPhone-Rahmen aus KNSONWS/homepage (device-mockups)

DeviceFrames.tsx und device-frames.css unverändert übernommen (Commit ae123f0).
DesktopFenster/HandyRahmen nutzen sie jetzt; Anordnung wie in der Vorlage
(iPhone über der rechten unteren Ecke), Screenshots füllen die Bildschirmfläche.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/geraete-rahmen.css

@@ -1,82 +1,17 @@
-/*
- * Geräte-Rahmen (Spezifikation 7.2, "Rahmen und Bildinhalt"): ein Rahmenstil für alle Bilder.
- * Er hängt nur an den Tokens und trägt so auf hellem wie dunklem Grund. Das Portal selbst ist
- * dunkel und violett; das ist Bildinhalt, nicht Seitenfarbe.
- */
-
-.wk-fenster,
-.wk-handy__rahmen {
-  /* sehr weicher Fallschatten statt Leuchtrand; im Dunkeln trägt die Linie den Umriss */
-  --rahmen-schatten: 0 1px 2px rgb(0 0 0 / 0.05), 0 32px 64px -32px rgb(0 0 0 / 0.32);
-}
-.dark .wk-fenster,
-.dark .wk-handy__rahmen {
-  --rahmen-schatten: 0 32px 64px -32px rgb(0 0 0 / 0.7);
-}
-
-/* ── Desktop-Fenster ──────────────────────────────────────────────────── */
-
-.wk-fenster {
-  border: 1px solid var(--line);
-  border-radius: 13px;
-  background: var(--bg);
-  box-shadow: var(--rahmen-schatten);
-  /* clip statt hidden: Vorfahren von sticky-Elementen dürfen nicht hidden sein (8.4) */
+/* Inhalt der Geräterahmen (MacBook/iPhone aus device-frames): füllt die Bildschirmfläche */
+.wk-geraet-inhalt {
+  position: absolute;
+  inset: 0;
   overflow: clip;
+  background: #0b0712;
 }
-
-.wk-fenster__leiste {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 38px;
-  padding-inline: 14px;
-  border-bottom: 1px solid var(--line);
-  background: var(--bg);
-  color: var(--fg-muted);
-  font-size: var(--fs-small);
-  line-height: 1;
-  letter-spacing: 0.005em;
-  white-space: nowrap;
-}
-
-.wk-fenster__bild {
-  position: relative;
-  aspect-ratio: 16 / 10;
-  /* Platzhalter, bis das Bild geladen ist: dunkel wie das Portal */
-  background: #0c0b12;
-}
-.wk-fenster__bild img {
+.wk-geraet-inhalt > img {
   display: block;
   width: 100%;
   height: 100%;
+  object-fit: cover;
+  object-position: top;
 }
-
-/* ── Handy-Rahmen ─────────────────────────────────────────────────────── */
-
-.wk-handy {
-  width: 100%;
-  /* Maßeinheit cqw = 1 % der Rahmenbreite */
-  container-type: inline-size;
-}
-
-.wk-handy__rahmen {
-  padding: 1.7cqw;
-  border: 1px solid var(--line-strong);
-  border-radius: 11.4cqw;
-  background: #0b0b0d;
-  box-shadow: var(--rahmen-schatten);
-}
-
-.wk-handy__schirm {
-  position: relative;
-  aspect-ratio: 780 / 1688;
-  border-radius: 9.7cqw;
-  background: #0c0b12;
-  overflow: clip;
-}
-.wk-handy__schirm img {
-  display: block;
-  width: 100%;
-  height: auto;
+.wk-geraet-inhalt--handy {
+  top: 35px;
 }