knso/Webklar-Kundenbereich
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3ecea05b528dca2afb9671d2dc1fe0ba7c4605fc
Webklar-Kundenbereich/public/geraete.css
T
ClaudeandClaude Opus 5.5 0a113c2983 Heatmap in Geraeterahmen (Computer/Tablet + Handy) und Keks statt "Datenschutz-Einstellungen" 
Heatmap im Portal (Funktionen -> Analyse): die echte Website laeuft jetzt in realistischen
Geraeterahmen, gross MacBook oder iPad (Umschalter oben), daneben das iPhone, jeweils in echter
Breite (1512 / 820 / 402 px), verkleinert und im Geraet scrollbar, mit den Klicks der
passenden Geraeteklasse als Overlay. MacBook und iPhone stammen aus den Rahmen der neuen
Website (device-mockups), das iPad ist im gleichen Stil nachgebaut (public/geraete.css/.js).

- heatmap-link: embed: true haengt __wk_embed=1 an; w.js reicht das als data-embed an h.js.
- h.js eingebettet (nur in einem Rahmen): keine Leiste, Links und Formulare gesperrt (kein
  Seitenwechsel, also keine Zaehlung und kein Banner), Scrollleisten aus, Klickzahl per
  postMessage nur an die Herkunft von h.js (project.webklar.com).
- iframe mit Sandbox allow-scripts allow-same-origin (keine Formulare, Pop-ups, keine
  Navigation des Portals); Laden erst, wenn die Heatmap in Sicht kommt. Laesst sich eine
  Website nicht einbetten, kommt nach 20 s ein Hinweis mit "In neuem Tab oeffnen" (alter Weg).

Banner-Skript: der Einstellungsknopf nach der Wahl ist jetzt ein angeknabberter Keks unten
rechts (Inline-SVG, 44 px). Er dreht sich langsam, haelt beim Darueberfahren/Fokus an und
zeigt dann "Datenschutz-Einstellungen" (auch sein Name fuer Screenreader, passend zum
Bannertext); bei reduzierter Bewegung dreht er sich nicht.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 15:09:17 +00:00

932 lines
34 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* Geraeterahmen fuer die Heatmap (geraete.js). MacBook und iPhone: device-frames.css aus KNSONWS/homepage
(device-mockups, unveraendert uebernommen), iPad: im gleichen Stil nachgebaut (Abschnitt ganz unten). */
/* ==========================================================================
device-frames.css – realistische, fluide Geräterahmen
MacBook Pro 14" (ab 2021, mit Notch) · iPhone 16 Pro / 17 Pro
Eine Breite skaliert alles:
.dm-macbook { width: 760px } .dm-iphone { width: 220px }
Die Rahmengeometrie steht in cqw des Wurzelelements (container-type).
Die Bildschirm-Chrome (Menüleiste, Safari, Statusleiste) ist in
Design-Punkten gezeichnet: --dm-u = 1 pt des echten Bildschirms.
Seiteninhalt gehört in .dm-canvas (feste Designgröße, wird per
device-frames.js bzw. React-Hook mit transform: scale() eingepasst):
MacBook-Webviewport 1512 x 893, iPhone-Bildschirm 402 x 874.
Maße (echte Geräte):
MacBook Unterteil = Wurzelbreite = 114 % des Deckels (L = 87,72cqw);
Alurand 0,35 % L, schwarzes Glas 1,4 % L (Seiten/oben),
Kinn 3,1 % L, Deckelecke 2,0 % L, Panelecke 0,7 % S,
Display 1512 x 982 pt, Notch 188 x 37 pt.
iPhone Gehäuse 71,5 x 149,6 mm, Display 402 x 874 pt,
Titanband 1,35 % + schwarzer Rand 2,05 % der Gehäusebreite,
konzentrische Radien, Dynamic Island 126 x 37 pt @ 11 pt.
========================================================================== */
/* Wurzeln mit Spezifität 0: Klassen der Seite (Tailwind usw.) gewinnen */
:where(.dm-macbook, .dm-iphone) {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
container-type: inline-size;
isolation: isolate;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
user-select: none;
}
:where(.dm-macbook) {
display: flex;
flex-direction: column;
align-items: center;
}
/* box-sizing nur für die eigenen dm-Elemente, nicht für den Inhalt */
:where(.dm-macbook, .dm-iphone) :where([class^="dm-"], [class*=" dm-"]),
:where(.dm-macbook, .dm-iphone) :where([class^="dm-"], [class*=" dm-"])::before,
:where(.dm-macbook, .dm-iphone) :where([class^="dm-"], [class*=" dm-"])::after {
box-sizing: border-box;
}
/* Systemschrift nur für die Chrome-Ebenen */
.dm-macbook__menubar,
.dm-macbook__toolbar,
.dm-iphone__statusbar {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-style: normal;
line-height: 1;
text-align: left;
text-transform: none;
text-rendering: geometricPrecision; /* kein Hinting-Zittern bei kleinen Größen */
}
:where(.dm-macbook__menubar, .dm-macbook__toolbar, .dm-iphone__statusbar) svg {
display: block;
flex: none;
overflow: visible;
}
/* --------------------------------------------------------------------------
Inhalts-Canvas (gemeinsam)
-------------------------------------------------------------------------- */
.dm-canvas {
position: absolute;
top: 0;
left: 0;
width: calc(var(--dm-dw) * 1px);
height: calc(var(--dm-dh) * 1px);
transform-origin: 0 0;
/* JS setzt --dm-k; ohne JS rechnet CSS Breite / Designbreite */
transform: scale(var(--dm-k, tan(atan2(100cqw, calc(var(--dm-dw) * 1px)))));
overflow: hidden;
container-type: inline-size; /* cqw im Inhalt = Design-Pixel */
-webkit-user-select: text;
user-select: text;
}
/* Gerät als Bild (role="img"): Inhalt ist Dekoration, nicht bedienbar
(zusätzlich zum inert-Attribut der Canvas) */
:where(.dm-macbook, .dm-iphone)[role="img"] .dm-canvas {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
/* ==========================================================================
MacBook Pro 14"
========================================================================== */
.dm-macbook {
/* Silber (Standard) */
--dm-al-hi: #f7f8f9;
--dm-al-1: #e0e1e4;
--dm-al-2: #cbcdd1;
--dm-al-3: #b1b4b9;
--dm-al-4: #8f9298;
--dm-al-5: #6d7076;
--dm-al-6: #4b4d52;
--dm-al-spec: rgba(255, 255, 255, .85);
--dm-al-sheen: rgba(255, 255, 255, .5);
--dm-al-edge: rgba(40, 42, 46, .5);
--dm-hinge-1: #08080a;
--dm-hinge-2: #2b2c2f;
--dm-hinge-3: #46484c;
--dm-foot: #2a2b2e;
--dm-bezel: #060607;
}
.dm-macbook[data-color="space-black"] {
--dm-al-hi: #8a8c91;
--dm-al-1: #56585c;
--dm-al-2: #424448;
--dm-al-3: #333539;
--dm-al-4: #26272a;
--dm-al-5: #1b1c1e;
--dm-al-6: #111213;
--dm-al-spec: rgba(255, 255, 255, .3);
--dm-al-sheen: rgba(255, 255, 255, .16);
--dm-al-edge: rgba(0, 0, 0, .6);
--dm-hinge-1: #050506;
--dm-hinge-2: #1e1f21;
--dm-hinge-3: #34363a;
--dm-foot: #0b0b0c;
}
/* ---- Deckel: Aluschale, nur als haarfeiner Rand sichtbar ---- */
.dm-macbook__lid {
position: relative;
z-index: 2;
width: 87.72cqw;
padding: .307cqw; /* Rand 0,35 % L */
border-radius: 1.754cqw 1.754cqw .26cqw .26cqw; /* 2,0 % L oben, unten fast eckig */
background:
/* Glanzstreifen und Kanten, die vom Licht wegdrehen */
linear-gradient(90deg,
rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 9%,
var(--dm-al-sheen) 30%, rgba(255,255,255,0) 46%,
rgba(255,255,255,0) 64%, rgba(255,255,255,.22) 78%,
rgba(0,0,0,0) 90%, rgba(0,0,0,.2) 100%),
linear-gradient(180deg,
var(--dm-al-hi) 0%, var(--dm-al-1) 3%, var(--dm-al-2) 18%, var(--dm-al-1) 34%,
var(--dm-al-3) 55%, var(--dm-al-2) 72%, var(--dm-al-3) 90%, var(--dm-al-4) 100%);
box-shadow:
inset 0 max(.5px, .06cqw) 0 var(--dm-al-spec), /* Glanzkante oben */
inset .19cqw 0 .16cqw rgba(0, 0, 0, .12), /* Seiten dunkler */
inset -.19cqw 0 .16cqw rgba(0, 0, 0, .2),
inset 0 -.26cqw .18cqw rgba(0, 0, 0, .28), /* Unterkante im Schatten */
0 0 0 max(.5px, .04cqw) var(--dm-al-edge); /* Außenkante */
}
/* Glanzlichter, die um den Rand wandern (ringförmig maskiert) */
.dm-macbook__lid::before {
content: "";
position: absolute;
inset: 0;
padding: .307cqw;
border-radius: inherit;
pointer-events: none;
background: conic-gradient(from 0deg at 50% 50%,
rgba(255,255,255,.35) 0deg, rgba(255,255,255,0) 16deg,
rgba(255,255,255,.4) 40deg, rgba(255,255,255,0) 52deg,
rgba(0,0,0,.1) 70deg, rgba(255,255,255,.18) 92deg, rgba(0,0,0,.12) 118deg,
rgba(0,0,0,.2) 160deg, rgba(0,0,0,.2) 200deg,
rgba(0,0,0,.06) 236deg, rgba(255,255,255,.28) 262deg, rgba(255,255,255,0) 286deg,
rgba(255,255,255,.55) 318deg, rgba(255,255,255,.08) 336deg,
rgba(255,255,255,.35) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* ---- schwarzes Glas mit Rändern ---- */
.dm-macbook__glass {
position: relative;
padding: 1.228cqw 1.228cqw 2.719cqw; /* 1,4 % L Seiten/oben, 3,1 % L Kinn */
border-radius: 1.447cqw 1.447cqw .1cqw .1cqw;
background: var(--dm-bezel);
box-shadow:
inset 0 0 0 max(.5px, .05cqw) rgba(0, 0, 0, .9),
inset 0 0 0 max(1px, .1cqw) rgba(255, 255, 255, .06); /* Glaskante */
}
/* sehr schwache Spiegelung über dem ganzen Glas (stört nie die Lesbarkeit) */
.dm-macbook__glass::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(122deg,
rgba(255,255,255,.055) 0%,
rgba(255,255,255,.028) 24%,
rgba(255,255,255,.008) 46%,
rgba(255,255,255,0) 60%);
}
/* ---- Display 1512 x 982 pt ---- */
.dm-macbook__screen {
--dm-u: calc(100cqw / 1512); /* 1 macOS-Punkt */
position: relative;
width: 100%;
aspect-ratio: 1512 / 982;
overflow: hidden;
border-radius: .593cqw .593cqw 0 0; /* 0,7 % S, nur oben */
container-type: inline-size;
background: /* Schreibtisch-Hintergrundbild */
radial-gradient(70% 140% at 12% 0%, #4a2f86 0%, rgba(74,47,134,0) 60%),
radial-gradient(60% 120% at 88% 0%, #1f3b6e 0%, rgba(31,59,110,0) 65%),
linear-gradient(180deg, #1b1430, #0b0a12);
}
/* Vollbild ohne Menüleiste: Streifen neben der Notch ist schwarz wie der Rand,
die Notch verschwindet darin */
.dm-macbook[data-menubar="off"] .dm-macbook__screen { background: var(--dm-bezel); }
/* macOS-Menüleiste (durchscheinend über dem Hintergrund, von der Notch geteilt) */
.dm-macbook__menubar {
position: absolute;
inset: 0 0 auto 0;
height: calc(37 * var(--dm-u));
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 calc(14 * var(--dm-u)) 0 calc(21 * var(--dm-u));
font-size: calc(13 * var(--dm-u));
font-weight: 500;
letter-spacing: .005em;
color: rgba(255, 255, 255, .94);
background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
text-shadow: 0 0 calc(2 * var(--dm-u)) rgba(0, 0, 0, .25);
white-space: nowrap;
}
/* Text darf nie in die Notch laufen (auch nicht mit Mindestschriftgröße):
was nicht passt, bricht in eine unsichtbare zweite Zeile um */
.dm-macbook__menus,
.dm-macbook__extras {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 100%;
overflow: hidden;
}
.dm-macbook__menus {
max-width: calc(633 * var(--dm-u));
column-gap: calc(19 * var(--dm-u));
}
.dm-macbook__extras {
max-width: calc(640 * var(--dm-u));
justify-content: flex-end;
column-gap: calc(17 * var(--dm-u));
}
.dm-macbook__menus > span,
.dm-macbook__menus > b,
.dm-macbook__extras > span { line-height: calc(37 * var(--dm-u)); }
.dm-macbook__menus b { font-weight: 700; margin-left: calc(4 * var(--dm-u)); }
.dm-macbook__apple { width: calc(14 * var(--dm-u)); height: calc(17 * var(--dm-u)); margin-top: calc(-2 * var(--dm-u)); }
.dm-macbook__extras svg { height: calc(13 * var(--dm-u)); width: auto; }
.dm-macbook__extras svg:nth-child(3) { height: calc(14 * var(--dm-u)); }
.dm-macbook__extras span { margin-left: calc(2 * var(--dm-u)); white-space: pre; }
/* Notch in Rahmenschwarz, mit kleinen Hohlkehlen und Kamera */
.dm-macbook__notch {
position: absolute;
top: 0;
left: 50%;
z-index: 3;
width: calc(188 * var(--dm-u));
height: calc(37 * var(--dm-u));
transform: translateX(-50%);
background: var(--dm-bezel);
border-radius: 0 0 calc(13 * var(--dm-u)) calc(13 * var(--dm-u));
}
.dm-macbook__notch::before,
.dm-macbook__notch::after {
content: "";
position: absolute;
top: 0;
width: calc(6 * var(--dm-u));
height: calc(6 * var(--dm-u));
}
.dm-macbook__notch::before {
right: 100%;
background: radial-gradient(circle at 0 100%, transparent calc(6 * var(--dm-u) - .5px), var(--dm-bezel) calc(6 * var(--dm-u)));
}
.dm-macbook__notch::after {
left: 100%;
background: radial-gradient(circle at 100% 100%, transparent calc(6 * var(--dm-u) - .5px), var(--dm-bezel) calc(6 * var(--dm-u)));
}
.dm-macbook__camera {
position: absolute;
top: 50%;
left: 50%;
width: calc(8 * var(--dm-u));
height: calc(8 * var(--dm-u));
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 36% 34%, rgba(150,140,255,.55) 0, rgba(80,70,170,.25) 22%, rgba(0,0,0,0) 46%),
radial-gradient(circle at 50% 50%, #0d0f1c 0, #07080f 55%, #15161c 70%, #050506 100%);
box-shadow: 0 0 0 calc(1.2 * var(--dm-u)) rgba(255, 255, 255, .035);
}
/* Safari-Fenster (maximiert), Dunkelmodus */
.dm-macbook__window {
position: absolute;
top: calc(37 * var(--dm-u));
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: calc(12 * var(--dm-u)) calc(12 * var(--dm-u)) calc(6 * var(--dm-u)) calc(6 * var(--dm-u));
background: #1c1c1e;
}
.dm-macbook[data-menubar="off"] .dm-macbook__window { border-radius: 0; }
.dm-macbook__window::after { /* Fensterkontur im Dunkelmodus */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 max(.5px, calc(1 * var(--dm-u))) rgba(255, 255, 255, .13);
z-index: 2;
}
.dm-macbook__toolbar {
position: relative;
flex: none;
display: flex;
align-items: center;
height: calc(52 * var(--dm-u));
padding: 0 calc(20 * var(--dm-u));
background: linear-gradient(180deg, #333336, #2c2c2f);
box-shadow: inset 0 calc(-1 * var(--dm-u)) 0 rgba(0, 0, 0, .75);
color: rgba(255, 255, 255, .62);
z-index: 1;
}
/* Ampel als eine Vektorgrafik: drei gleich große Kreise bei jeder Größe */
.dm-macbook__lights { display: flex; margin-right: calc(28 * var(--dm-u)); }
.dm-macbook__lights svg { width: calc(52 * var(--dm-u)); height: calc(12 * var(--dm-u)); }
/* Vollbild: macOS blendet die Fenstertasten aus */
.dm-macbook[data-menubar="off"] .dm-macbook__lights { visibility: hidden; }
.dm-macbook__tool { display: flex; align-items: center; }
.dm-macbook__tool--sidebar { gap: calc(5 * var(--dm-u)); margin-right: calc(30 * var(--dm-u)); }
.dm-macbook__tool--sidebar svg:first-child { width: calc(22 * var(--dm-u)); }
.dm-macbook__tool--sidebar svg:last-child { width: calc(9 * var(--dm-u)); opacity: .8; }
.dm-macbook__tool--nav { gap: calc(26 * var(--dm-u)); }
.dm-macbook__tool--nav svg { width: calc(10 * var(--dm-u)); }
.dm-macbook__tool--nav svg:last-child { opacity: .35; }
.dm-macbook__tool--right { margin-left: auto; gap: calc(28 * var(--dm-u)); }
.dm-macbook__tool--right svg:nth-child(1) { width: calc(16 * var(--dm-u)); margin-top: calc(-3 * var(--dm-u)); }
.dm-macbook__tool--right svg:nth-child(2) { width: calc(15 * var(--dm-u)); }
.dm-macbook__tool--right svg:nth-child(3) { width: calc(18 * var(--dm-u)); }
.dm-macbook__address {
position: absolute;
left: 50%;
top: 50%;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(10 * var(--dm-u));
width: calc(640 * var(--dm-u));
height: calc(32 * var(--dm-u));
padding: 0 calc(11 * var(--dm-u));
transform: translate(-50%, -50%);
border-radius: calc(9 * var(--dm-u));
background: rgba(255, 255, 255, .085);
box-shadow: inset 0 0 0 max(.4px, calc(.5 * var(--dm-u))) rgba(255, 255, 255, .04);
}
.dm-macbook__address > svg:first-child { width: calc(18 * var(--dm-u)); opacity: .75; }
.dm-macbook__address > svg:last-child { width: calc(14 * var(--dm-u)); opacity: .75; }
.dm-macbook__url {
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
gap: calc(6 * var(--dm-u));
font-size: calc(13.5 * var(--dm-u));
font-weight: 500;
color: rgba(255, 255, 255, .9);
letter-spacing: .005em;
white-space: nowrap;
}
.dm-macbook__url span { overflow: hidden; text-overflow: ellipsis; }
.dm-macbook__url svg { width: calc(9.5 * var(--dm-u)); color: rgba(255, 255, 255, .6); margin-top: calc(-1 * var(--dm-u)); }
/* Web-Viewport: 1512 x 893 pt */
.dm-macbook__viewport {
--dm-dw: 1512;
--dm-dh: 893;
position: relative;
flex: 1 1 auto;
overflow: hidden;
background: #000;
container-type: inline-size;
}
/* ---- Scharnier (dunkel, endet unter dem Alurand des Deckels) ---- */
.dm-macbook__hinge {
position: relative;
z-index: 1;
width: 87.2cqw; /* 99,4 % L */
height: .78cqw; /* 0,9 % L */
margin-top: -.05cqw;
border-radius: 0 0 .5cqw .5cqw / 0 0 .5cqw .5cqw;
background:
linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, rgba(0,0,0,.55)),
linear-gradient(180deg, var(--dm-hinge-1) 0%, var(--dm-hinge-1) 22%, var(--dm-hinge-2) 50%, var(--dm-hinge-3) 66%, var(--dm-hinge-2) 80%, var(--dm-hinge-1) 100%);
}
/* ---- Unterteil: Aluplatte, fast genau von vorn gesehen ---- */
.dm-macbook__base {
position: relative;
z-index: 2;
width: 100cqw;
height: 2.72cqw; /* 3,1 % L */
margin-top: -.15cqw;
margin-bottom: .36cqw; /* Platz für die Füße */
border-radius: 1.2cqw 1.2cqw 2.2cqw 2.2cqw / .7cqw .7cqw 1.6cqw 1.6cqw;
background:
/* von oben gerundete Enden: auch die helle Oberkante dreht dort weg */
radial-gradient(4.2cqw 1.5cqw at 0 0, rgba(0,0,0,.24), rgba(0,0,0,.08) 55%, rgba(0,0,0,0)),
radial-gradient(4.2cqw 1.5cqw at 100% 0, rgba(0,0,0,.24), rgba(0,0,0,.08) 55%, rgba(0,0,0,0)),
/* Enden, die vom Licht wegdrehen, und breite Glanzstreifen */
linear-gradient(90deg,
rgba(0,0,0,.32) 0%, rgba(0,0,0,.08) 2.5%, rgba(0,0,0,0) 6%,
rgba(255,255,255,.16) 24%, rgba(255,255,255,0) 40%,
rgba(255,255,255,0) 62%, rgba(255,255,255,.1) 76%,
rgba(0,0,0,0) 94%, rgba(0,0,0,.08) 97.5%, rgba(0,0,0,.32) 100%),
/* Oberseite als schmaler Streifen -> Kante -> Front, die in den Schatten fällt */
linear-gradient(180deg,
var(--dm-al-hi) 0%, var(--dm-al-1) 4%, var(--dm-al-2) 10%, var(--dm-al-3) 14%,
var(--dm-al-5) 16%, var(--dm-al-2) 18.5%, var(--dm-al-hi) 21.5%, var(--dm-al-1) 28%,
var(--dm-al-2) 42%, var(--dm-al-3) 58%, var(--dm-al-4) 72%, var(--dm-al-5) 84%,
var(--dm-al-6) 93%, var(--dm-al-5) 100%);
box-shadow:
inset 0 calc(-1 * max(.5px, .044cqw)) 0 rgba(0, 0, 0, .35),
0 0 0 max(.5px, .03cqw) rgba(0, 0, 0, .2);
}
/* Daumenmulde in der Vorderkante */
.dm-macbook__lip {
position: absolute;
top: 0;
left: 50%;
width: 12.28cqw; /* 14 % L */
height: 1.07cqw; /* ca. 40 % der Höhe */
transform: translateX(-50%);
border-radius: 0 0 3.5cqw 3.5cqw / 0 0 1.07cqw 1.07cqw;
background:
linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.22) 100%),
linear-gradient(180deg,
var(--dm-al-5) 0%, var(--dm-al-4) 30%, var(--dm-al-3) 60%, var(--dm-al-2) 86%, var(--dm-al-1) 100%);
box-shadow:
inset 0 .1cqw .18cqw rgba(0, 0, 0, .28),
0 max(.5px, .044cqw) 0 rgba(255, 255, 255, .5); /* beleuchtete Unterlippe */
}
/* Gummifüße */
.dm-macbook__base::before,
.dm-macbook__base::after {
content: "";
position: absolute;
top: calc(100% - .08cqw);
width: 4.2cqw;
height: .26cqw;
border-radius: 50%;
background: radial-gradient(closest-side, var(--dm-foot) 30%, rgba(0, 0, 0, 0));
opacity: .7; /* von vorn kaum sichtbar */
}
.dm-macbook__base::before { left: 8.5cqw; }
.dm-macbook__base::after { right: 8.5cqw; }
/* Kontakt- und Umgebungsschatten auf dem "Tisch" */
.dm-macbook__shadow {
position: absolute;
z-index: 0;
left: 0;
right: 0;
bottom: -2.3cqw;
height: 3.2cqw;
pointer-events: none;
}
.dm-macbook__shadow::before,
.dm-macbook__shadow::after {
content: "";
position: absolute;
border-radius: 50%;
}
.dm-macbook__shadow::before { /* Kontakt */
left: 3%;
right: 3%;
top: .6cqw;
height: .85cqw;
background: rgba(0, 0, 0, .8);
filter: blur(.27cqw);
}
.dm-macbook__shadow::after { /* Umgebung */
left: 1%;
right: 1%;
top: .45cqw;
height: 2.7cqw;
background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, 0));
filter: blur(.44cqw);
}
/* sehr klein: Haarlinien weglassen, sie würden nur rauschen */
@container (max-width: 320px) {
.dm-macbook__base::before,
.dm-macbook__base::after { display: none; }
}
/* ==========================================================================
iPhone 16 Pro
========================================================================== */
.dm-iphone {
/* Titan Natur (Standard): warmes, gebürstetes Mittelgrau */
--dm-t-hi: #e2ddd5;
--dm-t-1: #cac4ba;
--dm-t-2: #b3aca1;
--dm-t-3: #999287;
--dm-t-4: #7f786e;
--dm-t-5: #5c564e;
--dm-t-ant: rgba(112, 104, 92, .55);
--dm-t-glint: rgba(255, 255, 255, .38);
--dm-t-band-hl: rgba(255, 255, 255, .10);
--dm-status: #fff;
}
.dm-iphone[data-color="black"] {
--dm-t-hi: #6c6c70;
--dm-t-1: #46464a;
--dm-t-2: #363639;
--dm-t-3: #2a2a2d;
--dm-t-4: #1e1e21;
--dm-t-5: #111113;
--dm-t-top-light: rgba(255, 255, 255, .09);
--dm-t-ant: rgba(4, 4, 6, .6);
--dm-t-glint: rgba(255, 255, 255, .26);
--dm-t-band-hl: rgba(255, 255, 255, .06);
--dm-t-glint-opacity: .55; /* dunkles Titan spiegelt matter */
}
.dm-iphone[data-color="white"] {
--dm-t-hi: #ffffff;
--dm-t-1: #f1f1ef;
--dm-t-2: #e1e1de;
--dm-t-3: #cbcbc8;
--dm-t-4: #aeaeab;
--dm-t-5: #8a8a87;
--dm-t-ant: rgba(150, 150, 146, .55);
--dm-t-glint: rgba(255, 255, 255, .6);
}
.dm-iphone[data-color="desert"] {
--dm-t-hi: #f0e2d2;
--dm-t-1: #dcc4ab;
--dm-t-2: #c4a98f;
--dm-t-3: #ad9178;
--dm-t-4: #8f7560;
--dm-t-5: #6b5645;
--dm-t-ant: rgba(130, 104, 82, .55);
--dm-t-glint: rgba(255, 246, 236, .55);
}
/* heller App-Inhalt: dunkle Statusleiste und Home-Balken */
.dm-iphone[data-statusbar="dark"] { --dm-status: #000; }
/* ---- Titanband (von vorn sichtbar) ---- */
.dm-iphone__body {
position: relative;
z-index: 1;
padding: 1.35cqw; /* Titanband */
border-radius: 17.66cqw; /* 14,26 + 2,05 + 1,35 */
background:
/* Antennenlinien (nur auf dem Band sichtbar, Glas deckt den Rest) */
linear-gradient(180deg, transparent 10.9%, var(--dm-t-ant) 10.9%, var(--dm-t-ant) 11.15%, transparent 11.15%,
transparent 88.85%, var(--dm-t-ant) 88.85%, var(--dm-t-ant) 89.1%, transparent 89.1%),
linear-gradient(90deg, transparent 23.6%, var(--dm-t-ant) 23.6%, var(--dm-t-ant) 24.1%, transparent 24.1%,
transparent 75.9%, var(--dm-t-ant) 75.9%, var(--dm-t-ant) 76.4%, transparent 76.4%),
/* Licht von oben */
linear-gradient(180deg, var(--dm-t-top-light, rgba(255,255,255,.16)), rgba(255,255,255,0) 22%, rgba(0,0,0,0) 74%, rgba(0,0,0,.14)),
/* Umgebungsspiegelungen rundherum (0deg = oben) */
conic-gradient(from 0deg at 50% 50%,
var(--dm-t-1) 0deg, var(--dm-t-hi) 13deg, var(--dm-t-2) 26deg, var(--dm-t-3) 40deg,
var(--dm-t-hi) 58deg, var(--dm-t-2) 72deg, var(--dm-t-3) 100deg, var(--dm-t-4) 126deg,
var(--dm-t-2) 148deg, var(--dm-t-3) 166deg, var(--dm-t-4) 182deg, var(--dm-t-3) 196deg,
var(--dm-t-1) 211deg, var(--dm-t-3) 236deg, var(--dm-t-4) 258deg, var(--dm-t-2) 282deg,
var(--dm-t-hi) 302deg, var(--dm-t-2) 318deg, var(--dm-t-1) 336deg, var(--dm-t-hi) 347deg, var(--dm-t-1) 360deg);
box-shadow:
inset 0 0 0 max(.5px, .16cqw) rgba(0, 0, 0, .30), /* Außenkante rollt weg */
inset 0 0 0 .42cqw rgba(0, 0, 0, .10),
inset 0 0 0 .82cqw var(--dm-t-band-hl, rgba(255, 255, 255, .16)), /* gerundetes Band fängt Licht */
0 0 0 max(.5px, .12cqw) rgba(0, 0, 0, .28), /* Silhouette auf hellem Grund */
0 .8cqw 1.6cqw rgba(0, 0, 0, .18),
0 5cqw 12cqw -1cqw rgba(0, 0, 0, .42);
}
/* Glanzpunkte auf dem Band (ringförmig maskiert, das Glas bleibt frei) */
.dm-iphone__body::before {
content: "";
position: absolute;
inset: .16cqw;
z-index: 1;
padding: 1.1cqw;
border-radius: 17.5cqw;
pointer-events: none;
background: conic-gradient(from 0deg at 50% 50%,
rgba(255,255,255,.1) 0deg, rgba(255,255,255,0) 14deg,
var(--dm-t-glint) 26deg, rgba(255,255,255,0) 38deg,
rgba(255,255,255,0) 80deg, rgba(255,255,255,.14) 100deg, rgba(255,255,255,0) 116deg,
rgba(255,255,255,0) 146deg, rgba(255,255,255,.24) 156deg, rgba(255,255,255,0) 166deg,
rgba(0,0,0,.1) 190deg, rgba(255,255,255,0) 214deg,
rgba(255,255,255,.04) 250deg, rgba(255,255,255,.2) 284deg, rgba(255,255,255,.04) 306deg,
var(--dm-t-glint) 326deg, rgba(255,255,255,.7) 333deg, var(--dm-t-glint) 340deg,
rgba(255,255,255,.06) 350deg, rgba(255,255,255,.1) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: var(--dm-t-glint-opacity, .8);
}
/* ---- schwarzes Glas / Rand ---- */
.dm-iphone__glass {
position: relative;
z-index: 2;
padding: 2.05cqw;
border-radius: 16.31cqw;
background: #020203;
box-shadow:
0 0 0 max(.5px, .12cqw) var(--dm-t-1), /* polierte Fase */
0 0 0 max(.6px, .3cqw) rgba(0, 0, 0, .18),
inset 0 0 0 max(.5px, .14cqw) rgba(255, 255, 255, .07); /* Glaskante */
}
.dm-iphone__glass::after { /* Spiegelung */
content: "";
position: absolute;
inset: 0;
z-index: 6;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(118deg,
rgba(255,255,255,.07) 0%,
rgba(255,255,255,.03) 22%,
rgba(255,255,255,.01) 40%,
rgba(255,255,255,0) 52%);
}
/* ---- Display 402 x 874 pt ---- */
.dm-iphone__screen {
--dm-u: calc(100cqw / 402); /* 1 iOS-Punkt */
position: relative;
width: 100%;
aspect-ratio: 402 / 874;
overflow: hidden;
border-radius: 14.26cqw; /* 15,3 % der Displaybreite */
background: #000;
container-type: inline-size;
}
.dm-iphone__viewport {
--dm-dw: 402;
--dm-dh: 874;
position: absolute;
inset: 0;
overflow: hidden;
container-type: inline-size;
}
/* Statusleiste: Uhrzeit mittig im linken "Ohr", Symbole im rechten */
.dm-iphone__statusbar {
position: absolute;
inset: 0 0 auto 0;
z-index: 3;
height: calc(59 * var(--dm-u));
color: var(--dm-status);
pointer-events: none;
}
.dm-iphone__time,
.dm-iphone__indicators {
position: absolute;
top: calc(30 * var(--dm-u));
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
}
.dm-iphone__time {
left: calc(16 * var(--dm-u));
width: calc(110 * var(--dm-u));
font-size: calc(17 * var(--dm-u));
font-weight: 600;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dm-iphone__indicators {
right: calc(16 * var(--dm-u));
width: calc(110 * var(--dm-u));
gap: calc(5.5 * var(--dm-u));
}
.dm-iphone__indicators svg:nth-child(1) { width: calc(18 * var(--dm-u)); }
.dm-iphone__indicators svg:nth-child(2) { width: calc(16.5 * var(--dm-u)); }
.dm-iphone__indicators svg:nth-child(3) { width: calc(27.5 * var(--dm-u)); }
/* Dynamic Island */
.dm-iphone__island {
position: absolute;
z-index: 4;
top: calc(11 * var(--dm-u));
left: 50%;
width: calc(126 * var(--dm-u));
height: calc(37 * var(--dm-u));
transform: translateX(-50%);
border-radius: calc(18.5 * var(--dm-u));
background: #000;
}
.dm-iphone__island i { /* Frontkamera unter dem Glas */
position: absolute;
top: 50%;
right: calc(12.5 * var(--dm-u));
width: calc(12 * var(--dm-u));
height: calc(12 * var(--dm-u));
transform: translateY(-50%);
border-radius: 50%;
background:
radial-gradient(circle at 38% 34%, rgba(130,140,255,.42) 0, rgba(60,60,140,.18) 24%, rgba(0,0,0,0) 48%),
radial-gradient(circle, #0b0d18 0, #06070c 58%, #101116 74%, #000 100%);
}
/* Home-Balken 140 x 5 pt, 8 pt vom unteren Rand */
.dm-iphone__home {
position: absolute;
z-index: 3;
left: 50%;
bottom: calc(8 * var(--dm-u));
width: calc(140 * var(--dm-u));
height: calc(5 * var(--dm-u));
transform: translateX(-50%);
border-radius: calc(3 * var(--dm-u));
background: var(--dm-status);
opacity: .92;
}
/* ---- Seitentasten (stehen ca. 0,75 % der Gehäusebreite über) ---- */
.dm-iphone__buttons i {
position: absolute;
z-index: 0;
width: 2.2cqw;
border-radius: .9cqw / 1.6cqw;
}
.dm-iphone__btn--action,
.dm-iphone__btn--vol-up,
.dm-iphone__btn--vol-down {
left: -.78cqw;
background:
linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(0,0,0,.25)),
linear-gradient(90deg, var(--dm-t-4) 0%, var(--dm-t-hi) 22%, var(--dm-t-2) 48%, var(--dm-t-3) 100%);
box-shadow: inset 0 0 0 max(.4px, .1cqw) rgba(0, 0, 0, .22);
}
.dm-iphone__btn--side,
.dm-iphone__btn--camera {
right: -.78cqw;
background:
linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(0,0,0,.25)),
linear-gradient(270deg, var(--dm-t-4) 0%, var(--dm-t-hi) 22%, var(--dm-t-2) 48%, var(--dm-t-3) 100%);
box-shadow: inset 0 0 0 max(.4px, .1cqw) rgba(0, 0, 0, .22);
}
.dm-iphone__btn--action { top: 18.2%; height: 4.3%; }
.dm-iphone__btn--vol-up { top: 28.6%; height: 7.3%; }
.dm-iphone__btn--vol-down { top: 38.6%; height: 7.3%; }
.dm-iphone__btn--side { top: 30%; height: 12%; }
/* Kamerasteuerung: fast bündig, Saphirglas in Titaneinfassung */
.dm-iphone__buttons .dm-iphone__btn--camera {
top: 60%;
height: 8%;
right: -.42cqw;
border-radius: .8cqw / 1.2cqw;
background: /* Saphirglanz über farblich passendem Teil */
linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.14)),
linear-gradient(270deg, var(--dm-t-5) 0%, var(--dm-t-2) 28%, var(--dm-t-4) 58%, var(--dm-t-3) 100%);
box-shadow:
0 0 0 max(.5px, .14cqw) var(--dm-t-3),
inset 0 0 0 max(.4px, .08cqw) rgba(255, 255, 255, .12);
}
/* sehr klein: Antennenlinien weglassen */
@container (max-width: 140px) {
.dm-iphone__body { --dm-t-ant: transparent; }
}
/* ==========================================================================
iPad (Portrait, 11"), WEBklar-Ergaenzung im Stil der Rahmen oben
Gehaeuse 178,5 x 247,6 mm, Display 820 x 1180 pt (Web-Viewport: Tablet-Klasse).
Alurand 0,6 %, schwarzer Rand 5,2 % der Gehaeusebreite, Displayecke 18 pt.
========================================================================== */
:where(.dm-ipad) {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
container-type: inline-size;
isolation: isolate;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
user-select: none;
}
:where(.dm-ipad) :where([class^="dm-"], [class*=" dm-"]),
:where(.dm-ipad) :where([class^="dm-"], [class*=" dm-"])::before,
:where(.dm-ipad) :where([class^="dm-"], [class*=" dm-"])::after {
box-sizing: border-box;
}
.dm-ipad {
--dm-al-hi: #f7f8f9;
--dm-al-1: #e0e1e4;
--dm-al-2: #cbcdd1;
--dm-al-3: #b1b4b9;
--dm-al-4: #8f9298;
--dm-status: #000;
}
.dm-ipad__body {
position: relative;
z-index: 1;
padding: .6cqw; /* Alurand */
border-radius: 7.8cqw;
background:
linear-gradient(90deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 6%, rgba(255,255,255,.35) 28%, rgba(255,255,255,0) 44%,
rgba(255,255,255,0) 70%, rgba(255,255,255,.2) 86%, rgba(0,0,0,.16) 100%),
linear-gradient(180deg, var(--dm-al-hi) 0%, var(--dm-al-1) 4%, var(--dm-al-2) 30%, var(--dm-al-1) 55%, var(--dm-al-3) 85%, var(--dm-al-4) 100%);
box-shadow:
inset 0 max(.5px, .08cqw) 0 rgba(255, 255, 255, .85),
inset 0 0 0 max(.5px, .14cqw) rgba(0, 0, 0, .18),
0 0 0 max(.5px, .08cqw) rgba(0, 0, 0, .3),
0 .6cqw 1.4cqw rgba(0, 0, 0, .18),
0 4cqw 10cqw -1cqw rgba(0, 0, 0, .42);
}
.dm-ipad__glass {
position: relative;
padding: 5.2cqw; /* schwarzer Rand, rundum gleich */
border-radius: 7.2cqw;
background: #050506;
box-shadow:
0 0 0 max(.5px, .1cqw) var(--dm-al-1),
inset 0 0 0 max(.5px, .12cqw) rgba(255, 255, 255, .07);
}
.dm-ipad__glass::after { /* Spiegelung */
content: "";
position: absolute;
inset: 0;
z-index: 6;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 24%, rgba(255,255,255,0) 50%);
}
.dm-ipad__camera { /* Frontkamera mittig im oberen Rand */
position: absolute;
top: 2.6cqw;
left: 50%;
width: 1.1cqw;
height: 1.1cqw;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 38% 34%, rgba(130,140,255,.4) 0, rgba(60,60,140,.16) 26%, rgba(0,0,0,0) 50%),
radial-gradient(circle, #0b0d18 0, #06070c 60%, #15161b 80%, #000 100%);
}
.dm-ipad__screen {
--dm-u: calc(100cqw / 820); /* 1 iPadOS-Punkt */
position: relative;
width: 100%;
aspect-ratio: 820 / 1180;
overflow: hidden;
border-radius: calc(18 * var(--dm-u));
background: #fff;
container-type: inline-size;
}
.dm-ipad__viewport {
--dm-dw: 820;
--dm-dh: 1180;
position: absolute;
inset: 0;
overflow: hidden;
container-type: inline-size;
}
.dm-ipad__statusbar {
position: absolute;
inset: 0 0 auto 0;
z-index: 3;
height: calc(24 * var(--dm-u));
padding: 0 calc(20 * var(--dm-u));
display: flex;
align-items: center;
justify-content: space-between;
color: var(--dm-status);
pointer-events: none;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1;
}
.dm-ipad__time {
font-size: calc(14 * var(--dm-u));
font-weight: 600;
white-space: pre;
font-variant-numeric: tabular-nums;
}
.dm-ipad__indicators { display: flex; align-items: center; gap: calc(6 * var(--dm-u)); }
.dm-ipad__indicators svg { display: block; flex: none; overflow: visible; }
.dm-ipad__indicators svg:nth-child(1) { width: calc(16 * var(--dm-u)); }
.dm-ipad__indicators svg:nth-child(2) { width: calc(26 * var(--dm-u)); }
.dm-ipad__home { /* Home-Balken */
position: absolute;
z-index: 3;
left: 50%;
bottom: calc(8 * var(--dm-u));
width: calc(210 * var(--dm-u));
height: calc(5 * var(--dm-u));
transform: translateX(-50%);
border-radius: calc(3 * var(--dm-u));
background: var(--dm-status);
opacity: .85;
pointer-events: none;
}
.dm-ipad__buttons i {
position: absolute;
z-index: 0;
background: linear-gradient(90deg, var(--dm-al-4), var(--dm-al-hi) 30%, var(--dm-al-2) 60%, var(--dm-al-3));
box-shadow: inset 0 0 0 max(.4px, .08cqw) rgba(0, 0, 0, .22);
}
.dm-ipad__btn--top { top: -.45cqw; right: 11%; width: 8%; height: 1cqw; border-radius: .5cqw .5cqw 0 0; }
.dm-ipad__btn--vol-up,
.dm-ipad__btn--vol-down { right: -.45cqw; width: 1cqw; height: 5.5%; border-radius: 0 .5cqw .5cqw 0; }
.dm-ipad__btn--vol-up { top: 9%; }
.dm-ipad__btn--vol-down { top: 15.5%; }
Reference in new issue View Git Blame Copy Permalink