/* ===================================================================== Hollinder Digital - Geraete in den Arbeitsproben Oktober 2026 Dieselben Geraete wie in den Instagram-Beitraegen: Gehaeuse mit Metallverlauf, Lichtkanten an allen Seiten, Kameraauge im oberen Rand, Hals und Standplatte, Glanz schraeg ueber dem Glas. Das Telefon steht leicht quer im Raum. Alle Masse stammen 1:1 aus den Beitragsbildern und stehen in cqw, also in Prozent der Geraetebreite. Dadurch sieht ein Monitor, der in einer schmalen Spalte steht, genauso aus wie einer ueber die volle Breite - nur kleiner. In px waere der Rahmen bei kleinen Geraeten viel zu dick. Einbinden: NACH stil.css stil.css wird nicht angefasst. ===================================================================== */ /* ---------- Gruppe aus Monitor und Telefon ---------- */ .geraete{position:relative;isolation:isolate} /* Der Schatten auf dem Untergrund. Ohne ihn schweben die Geraete. */ .geraete::after{content:"";position:absolute;z-index:-1; left:6%;right:6%;bottom:-20px;height:50px;border-radius:50%; background:radial-gradient(ellipse at 50% 50%, rgba(14,16,24,.28) 0%,rgba(14,16,24,.11) 46%,transparent 72%); filter:blur(11px);pointer-events:none} /* ===================================================================== Monitor Masse aus dem Beitrag, bezogen auf die aeussere Breite (1030 px): Rahmen 15 px = 1.46 % · Radius 18 px = 1.75 % · Kinn 38 px = 3.69 % Hals 132 x 64 px = 12.8 % x 6.2 % · Platte 320 x 16 px = 31 % x 1.55 % ===================================================================== */ .monitor{container-type:inline-size} .monitor .geh{ background:linear-gradient(158deg, #5C5C66 0%, #2A2A31 14%, #16161A 52%, #101014 78%, #35353D 100%) !important; padding:1.46cqw 1.46cqw 0 !important; border:0 !important; border-radius:1.75cqw 1.75cqw 0 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.60), 0 28px 46px -18px rgba(12,14,22,.48) !important} /* Kameraauge im oberen Rand */ .monitor .geh::before{content:"";position:absolute;z-index:2; top:.52cqw;left:50%;transform:translateX(-50%); width:.68cqw;height:.68cqw;min-width:3px;min-height:3px;border-radius:50%; background:radial-gradient(circle at 34% 32%,#5A7483,#0F1B23); box-shadow:0 0 0 1px rgba(0,0,0,.55)} .monitor .glas{border-radius:.58cqw !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 2px 18px rgba(0,0,0,.90) !important} /* Glanz: breiter Streifen von links oben, dazu ein schmaler Gegenschein */ .monitor .glas::after{ background: linear-gradient(116deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.07) 16%, rgba(255,255,255,.015) 30%,transparent 46%), linear-gradient(28deg,rgba(255,255,255,.10) 0%,transparent 34%) !important} .monitor .kinn{ background:linear-gradient(180deg,#2C2C34 0%,#1A1A20 44%,#101014 100%) !important; border:0 !important; border-radius:0 0 1.75cqw 1.75cqw !important; height:3.69cqw !important;min-height:14px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.60), 0 16px 30px -14px rgba(12,14,22,.42) !important} /* Die Marke im Kinn faellt weg - im Beitrag ist dort nichts. */ .monitor .kinn::before{display:none !important} .monitor .hals{ width:12.8cqw !important;height:6.2cqw !important; min-width:34px;min-height:16px;border:0 !important; background:linear-gradient(90deg, #141418 0%, #3C3C45 30%, #4A4A55 48%, #2A2A32 68%, #121216 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10)} .monitor .platte{ width:31cqw !important;height:1.55cqw !important; min-width:90px;min-height:6px;border:0 !important; border-radius:2px 2px 1.2cqw 1.2cqw !important; background:linear-gradient(180deg,#4A4A55 0%,#2B2B33 48%,#121216 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 34px -12px rgba(12,14,22,.55) !important} /* ===================================================================== Telefon Masse aus dem Beitrag, bezogen auf die aeussere Breite (324 px): Rahmen 12 px = 3.7 % · Radius 52 px = 16 % · Glas 41 px = 12.65 % Insel 96 x 27 px = 29.6 % x 8.3 %, oben 15 px = 4.6 % ===================================================================== */ .telefon{container-type:inline-size} .telefon .geh{ background:linear-gradient(152deg, #6A6A76 0%, #2B2B33 13%, #141418 48%, #101014 74%, #44444F 100%) !important; padding:3.7cqw !important;border:0 !important; border-radius:16cqw !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.70), 0 26px 44px -16px rgba(12,14,22,.55) !important} .telefon .glas{border-radius:12.65cqw !important} .telefon .glas::after{ background: linear-gradient(116deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.07) 16%, rgba(255,255,255,.015) 30%,transparent 46%), linear-gradient(28deg,rgba(255,255,255,.10) 0%,transparent 34%) !important} .telefon .insel{ top:4.6cqw !important;width:29.6cqw !important;height:8.3cqw !important; border-radius:4.6cqw !important;background:#06060A !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) !important} /* Vier Tasten wie am Geraet: links Stumm und Lautstaerke, rechts die Seitentaste */ .telefon .geh::before,.telefon .geh::after{ width:.93cqw !important;min-width:2px;border-radius:2px !important; background:linear-gradient(180deg,#6A6A76,#26262D) !important; box-shadow:0 0 0 .5px rgba(0,0,0,.45)} .telefon .geh::before{right:-.6cqw !important;top:26cqw !important;height:29cqw !important} .telefon .geh::after{left:-.6cqw !important;top:18.5cqw !important;height:20cqw !important} /* ===================================================================== Das Telefon steht leicht quer - genau wie in den Beitraegen. Nur in der Geraetegruppe, nicht bei einem Telefon, das allein steht. ===================================================================== */ .geraete .telefon{ transform:perspective(2400px) rotateY(-10deg); transform-origin:70% 50%} .geraete .telefon .geh{ box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.70), 0 30px 50px -16px rgba(12,14,22,.60) !important} /* ---------- Beim Ueberfahren: Licht im Hausblau ---------- */ .monitor:hover .geh{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08), 0 0 0 1px rgba(46,152,255,.45), 0 0 48px rgba(13,99,243,.28), 0 28px 46px -18px rgba(12,14,22,.48) !important} .telefon:hover .geh{ box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 1px rgba(46,152,255,.45), 0 0 36px rgba(13,99,243,.28), 0 30px 50px -16px rgba(12,14,22,.60) !important} .geraete .telefon:hover{transform:perspective(2400px) rotateY(-7deg) translateY(-3px)} /* ---------- Arbeitsproben: Gitter fuer mehrere Projekte ---------- */ .proben{grid-template-columns:repeat(2,minmax(0,1fr))} .proben .schau{position:relative} .schau .untertitel{margin-top:1.6rem !important} .schau .zeichen{display:inline-flex;align-items:center;gap:.5rem; font-family:var(--f-titel);font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--grau); margin-bottom:.9rem} .schau .zeichen::before{content:"";width:1.3rem;height:2px;background:var(--blau)} .schau .zeichen.entwurf::before{background:var(--grau-hell)} @media (max-width:780px){ .proben{grid-template-columns:1fr} .geraete::after{bottom:-13px;height:36px} } @media (prefers-reduced-motion:reduce){ .monitor,.telefon,.monitor .geh,.telefon .geh{transition:none !important} .geraete .telefon:hover{transform:perspective(2400px) rotateY(-10deg)} } /* Falls ein Browser keine Container-Einheiten kann, bleiben wenigstens Form und Farbe stehen - die Masse fallen dann auf stil.css zurueck. */ @supports not (width:1cqw){ .monitor .geh{padding:.8rem .8rem 0 !important;border-radius:11px 11px 0 0 !important} .monitor .kinn{height:1.9rem !important;border-radius:0 0 11px 11px !important} .telefon .geh{padding:.45rem !important;border-radius:1.5rem !important} .telefon .glas{border-radius:1.15rem !important} }