/* ============================================================ HANSE PROTEC — hanse-protec.de Monochrome minimal · geometric caps · square edges ============================================================ */ :root { --paper: #ffffff; --cloud: #f5f6f7; --ink: #171c24; --dim: rgba(23, 28, 36, 0.55); --faint: rgba(23, 28, 36, 0.38); --night: #0d1015; --night-2: #14181f; --inv: #f3f4f5; --inv-dim: rgba(243, 244, 245, 0.55); --line: rgba(23, 28, 36, 0.12); --line-inv: rgba(255, 255, 255, 0.14); --radius: 2px; --nav-h: 88px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow-soft: 0 30px 80px -35px rgba(10, 14, 20, 0.35); --shadow-card: 0 14px 44px -22px rgba(10, 14, 20, 0.22); --font-caps: "Montserrat", "Helvetica Neue", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* CSS smooth scroll only as fallback — Lenis sets .lenis on and takes over */ html:not(.lenis) { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 300; background: var(--paper); color: var(--ink); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: rgba(23, 28, 36, 0.12); } .wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .wrap.narrow { width: min(860px, calc(100% - 48px)); } /* ---------- typography ---------- */ .display, .h1, .h2, .h3 { font-family: var(--font-caps); font-weight: 300; text-transform: uppercase; line-height: 1.28; } .display { font-size: clamp(26px, 4.2vw, 52px); letter-spacing: 0.16em; font-weight: 200; } .h1 { font-size: clamp(24px, 3.6vw, 44px); letter-spacing: 0.16em; font-weight: 200; } .h2 { font-size: clamp(19px, 2.5vw, 30px); letter-spacing: 0.18em; } .h3 { font-size: clamp(15px, 1.6vw, 18px); letter-spacing: 0.2em; } .kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-caps); font-size: 10px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--faint); margin-bottom: 24px; } .kicker::before { content: ""; width: 32px; height: 1px; background: var(--faint); } .on-dark .kicker { color: var(--inv-dim); } .on-dark .kicker::before { background: var(--inv-dim); } .lead { font-size: clamp(15px, 1.3vw, 17px); font-weight: 300; color: var(--dim); max-width: 58ch; line-height: 1.85; } .on-dark .lead, .lead.inv { color: var(--inv-dim); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal-scale { opacity: 0; transform: scale(0.96) translateY(14px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); } .reveal-scale.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } * { animation-duration: 0.001s !important; } } /* ---------- brand ---------- */ .brand { display: flex; align-items: center; gap: 14px; color: var(--ink); z-index: 130; --peak-bg: #fff; } .brand .mark { display: block; flex: none; } .brand-img { height: 70px; width: auto; display: block; mix-blend-mode: multiply; filter: brightness(1.07) contrast(1.04); } @media (max-width: 720px) { .brand-img { height: 58px; } } footer .brand-img { filter: invert(1) grayscale(1) brightness(1.6) contrast(1.1); mix-blend-mode: screen; } .brand-name { font-family: var(--font-caps); font-size: 16px; font-weight: 400; letter-spacing: 0.5em; line-height: 1; text-indent: 0.08em; } .brand-name small { display: block; font-size: 7.5px; font-weight: 500; letter-spacing: 0.74em; color: var(--dim); margin-top: 6px; } footer .brand { color: var(--inv); --peak-bg: var(--night); } footer .brand-name small { color: var(--inv-dim); } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; background: #fff; transition: box-shadow 0.4s ease; } .nav.scrolled { box-shadow: 0 1px 0 var(--line); } .nav-inner { width: min(1180px, calc(100% - 48px)); margin-inline: auto; display: flex; align-items: center; gap: 34px; } .nav-links { display: flex; gap: 6px; margin-left: auto; align-items: center; } .nav-links a { font-family: var(--font-caps); color: var(--dim); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; padding: 10px 14px; transition: color 0.25s ease; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-links .btn { margin-left: 14px; } .burger { display: none; z-index: 130; width: 44px; height: 44px; margin-left: auto; position: relative; } .burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform 0.45s var(--ease), opacity 0.3s; } .burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 26px; } .menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 120; background: rgba(255, 255, 255, 0.93); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); display: flex; flex-direction: column; justify-content: center; padding: 44px; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .menu-open .mobile-menu { opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink); font-size: clamp(17px, 4.6vw, 24px); font-weight: 300; padding: 18px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .menu-open .mobile-menu a { opacity: 1; transform: none; } .menu-open .mobile-menu a:nth-child(1) { transition-delay: 0.06s; } .menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.12s; } .menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.18s; } .menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.24s; } .menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.3s; } @media (max-width: 900px) { .nav-links { display: none; } .burger { display: block; } } /* ---------- buttons (square) ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 17px 32px; border-radius: 0; font-family: var(--font-caps); font-size: 10.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s, color 0.3s; will-change: transform; -webkit-tap-highlight-color: transparent; } .btn .arr { transition: transform 0.35s var(--ease); font-size: 13px; letter-spacing: 0; } .btn:hover .arr { transform: translateX(6px); } .btn:active { transform: scale(0.97); } .btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { background: #000; box-shadow: 0 18px 38px -18px rgba(10, 14, 20, 0.5); } .btn-white { background: #fff; color: var(--ink); } .btn-white:hover { box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.4); } .btn-line { color: inherit; box-shadow: inset 0 0 0 1px var(--line); background: transparent; } .btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); } .on-dark .btn-line { box-shadow: inset 0 0 0 1px var(--line-inv); color: var(--inv); } .on-dark .btn-line:hover { box-shadow: inset 0 0 0 1px var(--inv); } .btn-nav { padding: 13px 24px; font-size: 9.5px; } .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transform: scale(0); animation: ripple 0.7s var(--ease) forwards; pointer-events: none; } .btn-line .ripple, .btn-white .ripple { background: rgba(23, 28, 36, 0.12); } @keyframes ripple { to { transform: scale(3.4); opacity: 0; } } /* ---------- sections ---------- */ .section { padding: clamp(96px, 13vw, 170px) 0; position: relative; } .section.cloud { background: var(--cloud); } .section.dark { background: var(--night); color: var(--inv); } .section-head { max-width: 700px; margin-bottom: clamp(48px, 6vw, 84px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .lead { margin-inline: auto; } .section-head .h2 { margin-bottom: 22px; } .dark .section-head .h2 { color: var(--inv); } /* ============================================================ INTRO HERO (static, type only) ============================================================ */ .intro { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-h) + 40px) 24px 80px; position: relative; background: var(--paper); } .intro-mark { margin-bottom: 40px; opacity: 0.9; } .intro .display { max-width: 20ch; } .intro .lead { margin: 28px auto 0; max-width: 46ch; } .intro-ctas { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; justify-content: center; } .intro-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--faint); } .intro-hint i { width: 1px; height: 38px; background: linear-gradient(var(--ink), transparent); animation: drip 2s ease-in-out infinite; } @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ============================================================ EXPLODE (pinned) — panel lifts away in one piece ============================================================ */ .xhero { position: relative; height: 520vh; background: linear-gradient(180deg, var(--paper) 0%, var(--cloud) 100%); } .xhero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .xhero-kicker { position: absolute; top: calc(var(--nav-h) + 3vh); left: 50%; transform: translateX(-50%); font-family: var(--font-caps); font-size: 10px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--faint); white-space: nowrap; z-index: 20; transition: opacity 0.4s; } .xstage { position: relative; width: min(780px, 90vw, 74vh); aspect-ratio: 2409 / 1893; perspective: 1900px; touch-action: pan-y; cursor: grab; z-index: 10; } .xstage:active { cursor: grabbing; } .xstage-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .xl { position: absolute; will-change: transform, opacity; transform-style: preserve-3d; } .xl-front { inset: 0; z-index: 6; } .xl-front img { width: 100%; filter: drop-shadow(0 40px 60px rgba(10, 14, 20, 0.3)); } .xl-guts { top: 50%; left: 50%; width: 96.5%; height: 95%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 5.5% / 7%; box-shadow: 0 40px 90px -25px rgba(10, 14, 20, 0.45), 0 0 0 1px rgba(10, 14, 20, 0.08); opacity: 0; z-index: 3; } .xl-guts img { width: 100%; height: 100%; object-fit: cover; } .xl-back { top: 50%; left: 50%; width: 96.5%; height: 95%; transform: translate(-50%, -50%); border-radius: 5.5% / 7%; background: linear-gradient(168deg, #f0f1f3, #dde1e4); box-shadow: 0 30px 70px -25px rgba(10, 14, 20, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.7); opacity: 0; z-index: 1; } .xcall { position: absolute; z-index: 30; max-width: 230px; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); pointer-events: none; } .xcall.show { opacity: 1; transform: none; } .xcall .tag { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 8px; } .xcall h4 { font-family: var(--font-caps); font-weight: 400; font-size: 13.5px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 6px; } .xcall p { font-size: 12.5px; font-weight: 300; color: var(--dim); line-height: 1.6; } .xcall::before { content: ""; position: absolute; width: 46px; height: 1px; background: var(--ink); opacity: 0.35; top: 8px; } .xcall.left { text-align: right; } .xcall.left::before { right: -56px; } .xcall.right::before { left: -56px; } .xprogress { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 140px; height: 1px; background: var(--line); z-index: 20; } .xprogress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); } @media (max-width: 1180px) { .xcall { max-width: 190px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 12px 15px; } .xcall::before { display: none; } } @media (max-width: 900px) { .xhero { height: 430vh; } .xcall { max-width: 165px; } .xcall p { display: none; } .xcall.left { left: 2% !important; } .xcall.right { right: 2% !important; } } /* ---------- trustline ---------- */ .trustline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); padding: 28px 0; } .trustline .wrap { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--faint); } @media (max-width: 720px) { .trustline .wrap { justify-content: center; } } /* ============================================================ MOSAIC (image-first) ============================================================ */ .mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .mcard { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--cloud); } .mcard.w4 { grid-column: span 4; aspect-ratio: 16 / 8.5; } .mcard.w2 { grid-column: span 2; aspect-ratio: 4 / 4.25; } .mcard.w3 { grid-column: span 3; aspect-ratio: 16 / 9.5; } .mcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); } .mcard:hover img { transform: scale(1.05); } .mcard .cap { position: absolute; left: 22px; bottom: 18px; font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); z-index: 2; } .mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(10, 14, 20, 0.45)); pointer-events: none; } @media (max-width: 800px) { .mosaic { grid-template-columns: 1fr 1fr; } .mcard.w4, .mcard.w2, .mcard.w3 { grid-column: span 2; aspect-ratio: 16 / 10; } } /* ============================================================ ARM MORPH (pinned) — dark ============================================================ */ .arm { position: relative; height: 340vh; background: radial-gradient(1000px 600px at 50% 30%, var(--night-2), var(--night) 70%); color: var(--inv); } .arm-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; padding-top: var(--nav-h); } .arm-head { text-align: center; padding-inline: 24px; z-index: 5; } .arm-head .h2 { color: var(--inv); } .arm-stage { position: relative; width: min(560px, 84vw, 62vh); aspect-ratio: 2409 / 1893; } .arm-stage img { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.55)); will-change: opacity; } .arm-stage .armed { opacity: 0; } .arm-ring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.4); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); opacity: 0; pointer-events: none; } .arm-status { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-dim); border: 1px solid var(--line-inv); padding: 14px 28px; transition: color 0.4s, border-color 0.4s; } .arm-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #4a525d; transition: background 0.4s, box-shadow 0.4s; } .arm-status.on { color: var(--inv); border-color: rgba(255, 255, 255, 0.4); } .arm-status.on .dot { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); } /* ============================================================ WIDE CLIP REVEAL (pinned) ============================================================ */ .wide { position: relative; height: 280vh; background: var(--cloud); } .wide-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .wide-fig { position: relative; width: 62vw; height: 66vh; border-radius: var(--radius); overflow: hidden; will-change: width, height; box-shadow: var(--shadow-soft); } .wide-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; } .wide-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(10, 14, 20, 0.55)); pointer-events: none; } .wide-caption { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); text-align: center; z-index: 5; color: #fff; opacity: 0; padding-inline: 24px; width: 100%; } .wide-caption .h2 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); } .wide-caption p { color: rgba(255, 255, 255, 0.85); font-weight: 300; margin-top: 12px; font-size: 14.5px; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55); } @media (max-width: 900px) { .wide-fig { width: 80vw; height: 56vh; } } /* ============================================================ RADAR (pinned) — dark ============================================================ */ .radar { position: relative; height: 320vh; background: var(--night); color: var(--inv); } .radar-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .radar-head { position: absolute; top: clamp(70px, 10vh, 130px); text-align: center; z-index: 6; padding-inline: 24px; } .radar-head .h2 { color: var(--inv); } .radar-stage { position: relative; width: min(640px, 90vw, 64vh); aspect-ratio: 1; } .radar-stage svg { width: 100%; height: 100%; overflow: visible; } .radar-km { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); text-align: center; } .radar-km .num { font-family: var(--font-caps); font-weight: 200; font-size: clamp(30px, 4vw, 46px); letter-spacing: 0.1em; color: var(--inv); } .radar-km .lbl { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-dim); margin-top: 6px; } .rdot { opacity: 0; transition: opacity 0.6s var(--ease); } .rdot.on { opacity: 1; } .rdot text { fill: var(--inv-dim); font-family: var(--font-caps); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; } .rdot circle { fill: #fff; } .rdot .halo { fill: none; stroke: rgba(255, 255, 255, 0.35); transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out infinite; } @keyframes halo { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } /* ============================================================ LID OPEN (produkte, pinned) — dark ============================================================ */ .lid { position: relative; height: 360vh; background: var(--night); color: var(--inv); } .lid-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 6vw, 100px); padding-inline: 24px; } @media (min-width: 801px) { .lid-sticky { padding-left: clamp(220px, 20vw, 320px); } } /* Ab hier stehen die Beschriftungen links neben dem Gerät und brauchen Raum */ @media (min-width: 1201px) { .lid-sticky { padding-left: clamp(346px, 27vw, 430px); } } .lid-stage { position: relative; width: min(400px, 60vw, 50vh); aspect-ratio: 3038 / 3956; perspective: 1600px; flex: none; } .lid-guts { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-inv); } .lid-guts img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); will-change: filter; } .lid-door { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(168deg, #f7f8fa 0%, #e6eaee 55%, #d8dee4 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 30px 70px -15px rgba(0, 0, 0, 0.55); will-change: transform, opacity; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; z-index: 6; } .lid-door::before { content: ""; position: absolute; inset: 5% 7%; border: 1px solid rgba(23, 28, 36, 0.07); } .lid-door::after { content: "IQ PRO"; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.5em; text-indent: 0.5em; color: rgba(23, 28, 36, 0.3); } .lid-part { position: absolute; overflow: hidden; border-radius: 3px; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12); opacity: 0; will-change: transform, opacity; z-index: 8; } .lid-part img { width: 100%; height: 100%; object-fit: cover; display: block; } .lid-part .plabel { position: absolute; left: 0; bottom: 0; right: 0; padding: 8px 12px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(10, 14, 20, 0.65)); } .lid-copy { max-width: 430px; } .lid-copy .h2 { color: var(--inv); margin-bottom: 20px; } .lid-copy p { color: var(--inv-dim); font-weight: 300; font-size: 14.5px; } .lid-feats { margin-top: 30px; display: grid; } .lid-feats li { display: flex; gap: 16px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line-inv); font-size: 14px; font-weight: 300; color: var(--inv-dim); opacity: 0.3; transition: opacity 0.6s var(--ease), color 0.6s; } .lid-feats li.on { opacity: 1; color: var(--inv); } .lid-feats li i { font-style: normal; font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.2em; color: var(--inv-dim); flex: none; } @media (max-width: 800px) { .lid { height: auto; } .lid-sticky { position: static; height: auto; flex-direction: column; gap: 36px; padding: 110px 24px; } .lid-stage { width: min(320px, 76vw); } /* Mobil bleibt die Zentrale geschlossen – kein Blick ins Innere */ .lid-guts, .lid-part { display: none; } .lid-door { display: flex; transform: none !important; opacity: 1 !important; } .lid-copy { text-align: center; max-width: 480px; } .lid-feats li { opacity: 1; color: var(--inv); justify-content: center; text-align: left; } } /* ---------- product cards ---------- */ .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .pcard { position: relative; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); padding: 44px 36px 38px; overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s; } .pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); } .pcard .pimg { height: 200px; display: grid; place-items: center; margin-bottom: 30px; } .pcard .pimg img { max-height: 100%; object-fit: contain; transition: transform 0.8s var(--ease); } .pcard:hover .pimg img { transform: scale(1.04) translateY(-3px); } .pcard .sub { font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); } .pcard h3 { font-family: var(--font-caps); font-weight: 400; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; margin: 12px 0 10px; } .pcard p { color: var(--dim); font-weight: 300; font-size: 13.5px; margin-bottom: 24px; } .pcard .link { font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; } .pcard .link .arr { transition: transform 0.3s var(--ease); } .pcard:hover .link .arr { transform: translateX(5px); } @media (max-width: 900px) { .pgrid { grid-template-columns: 1fr; } } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); } .step { padding: 42px 34px 10px 0; border-right: 1px solid var(--line); margin-right: 34px; } .step:last-child { border-right: none; margin-right: 0; } .step .n { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.3em; color: var(--faint); margin-bottom: 18px; } .step h3 { font-family: var(--font-caps); font-weight: 400; font-size: 13.5px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 12px; } .step p { color: var(--dim); font-weight: 300; font-size: 14px; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .step { border-right: none; margin-right: 0; border-bottom: 1px solid var(--line); padding: 32px 0; } .step:last-child { border-bottom: none; } } /* ---------- CTA / funnel ---------- */ .cta { background: var(--night); color: var(--inv); overflow: hidden; position: relative; } .cta::before { content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); top: -420px; right: -240px; } .cta::after { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.05); top: -290px; right: -110px; } .cta-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(44px, 6vw, 100px); align-items: start; position: relative; z-index: 2; } .cta .h2 { color: var(--inv); } .cta-benefits { margin-top: 32px; display: grid; } .cta-benefits li { display: flex; gap: 18px; align-items: baseline; color: var(--inv-dim); font-weight: 300; font-size: 14px; padding: 14px 0; border-top: 1px solid var(--line-inv); } .cta-benefits li:first-child { border-top: none; } .cta-benefits .check { font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.2em; color: var(--inv-dim); flex: none; } @media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } } /* ---------- forms ---------- */ .form-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-inv); border-radius: var(--radius); padding: clamp(28px, 4vw, 46px); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .form-card.on-light { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); } .form-card.on-dark-solid { background: var(--night-2); border: 1px solid var(--line-inv); } .field { margin-bottom: 18px; } .field label { display: block; font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.65; } .field input, .field select, .field textarea { width: 100%; padding: 15px 18px; border-radius: var(--radius); border: 1px solid rgba(128, 136, 148, 0.4); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; font-weight: 300; font-size: 15px; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; -webkit-appearance: none; appearance: none; } .form-card.on-light .field input, .form-card.on-light .field select, .form-card.on-light .field textarea { background: var(--cloud); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: currentColor; box-shadow: 0 0 0 3px rgba(128, 136, 148, 0.18); } .field select { cursor: pointer; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } .form-note { font-size: 11.5px; font-weight: 300; opacity: 0.5; margin-top: 16px; } .form-note a { text-decoration: underline; } /* choice chips */ .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .choice { border: 1px solid rgba(128, 136, 148, 0.4); border-radius: var(--radius); padding: 19px 18px; text-align: left; transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s; display: flex; align-items: center; gap: 14px; font-weight: 400; font-size: 13.5px; background: transparent; } .form-card.on-light .choice { background: var(--cloud); } .choice svg { color: currentColor; opacity: 0.7; flex: none; } .choice:hover { transform: translateY(-2px); border-color: currentColor; } .choice.selected { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; } /* multistep */ .msteps { position: relative; overflow: hidden; } .mstep { display: none; animation: stepIn 0.6s var(--ease); } .mstep.active { display: block; } @keyframes stepIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } } .msteps-bar { height: 1px; background: rgba(128, 136, 148, 0.3); margin-bottom: 34px; overflow: hidden; } .msteps-bar i { display: block; height: 100%; background: currentColor; transition: width 0.7s var(--ease); } .mstep-nav { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; } .mstep h3 { font-family: var(--font-caps); font-weight: 400; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 24px; } .btn-back { font-family: var(--font-caps); color: inherit; opacity: 0.55; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; padding: 16px 10px; transition: opacity 0.25s; } .btn-back:hover { opacity: 1; } .form-success { text-align: center; padding: 46px 10px; display: none; } .form-success.show { display: block; animation: stepIn 0.6s var(--ease); } .form-success .big { width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.8; display: grid; place-items: center; } .form-success h3 { font-family: var(--font-caps); font-weight: 400; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; } /* ---------- FAQ ---------- */ .faq { display: grid; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; text-align: left; padding: 26px 4px; font-family: var(--font-caps); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.3s; } .faq-q:hover { opacity: 0.7; } .faq-q .plus { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-body); font-size: 15px; font-weight: 300; transition: transform 0.45s var(--ease), background 0.3s, color 0.3s, border-color 0.3s; } .faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { padding: 0 4px 26px; color: var(--dim); font-weight: 300; font-size: 14.5px; max-width: 70ch; } /* ---------- product detail ---------- */ .prod { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 100px); align-items: center; } .prod.flip .prod-media { order: 2; } .prod-media { position: relative; } .prod-media .main { border-radius: var(--radius); overflow: hidden; background: var(--cloud); aspect-ratio: 4 / 3.4; box-shadow: var(--shadow-card); } .prod-media .main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease, transform 0.7s var(--ease); } .prod-media .main img.swapping { opacity: 0; transform: scale(1.02); } .thumbs { display: flex; gap: 10px; margin-top: 14px; } .thumb { width: 72px; height: 58px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); opacity: 0.55; transition: opacity 0.3s, border-color 0.3s, transform 0.3s var(--ease); padding: 0; background: #fff; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb:hover { opacity: 1; transform: translateY(-3px); } .thumb.active { opacity: 1; border-color: var(--ink); } .spec-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 30px; } .spec-chips span { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line); color: var(--dim); } .dark .spec-chips span, .on-dark .spec-chips span { border-color: var(--line-inv); color: var(--inv-dim); } .prod-features { display: grid; margin-top: 20px; } .prod-features li { display: flex; gap: 16px; align-items: baseline; font-size: 14px; font-weight: 300; color: var(--dim); padding: 13px 0; border-top: 1px solid var(--line); } .dark .prod-features li, .on-dark .prod-features li { color: var(--inv-dim); border-color: var(--line-inv); } .prod-features .check { font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.2em; color: var(--faint); flex: none; } .on-dark .prod-features .check { color: var(--inv-dim); } @media (max-width: 900px) { .prod { grid-template-columns: 1fr; } .prod.flip .prod-media { order: 0; } } /* sensor grid */ .sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .scard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .scard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .scard .icon { width: 44px; height: 44px; border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; margin-bottom: 20px; } .scard h4 { font-family: var(--font-caps); font-weight: 400; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; } .scard p { font-size: 12.5px; font-weight: 300; color: var(--dim); } @media (max-width: 1000px) { .sgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .sgrid { grid-template-columns: 1fr; } } /* ---------- page hero (subpages) ---------- */ .page-hero { background: linear-gradient(180deg, #fff 0%, var(--cloud) 100%); padding: calc(var(--nav-h) + clamp(80px, 11vw, 150px)) 0 clamp(70px, 9vw, 110px); } .page-hero h1 { font-family: var(--font-caps); font-weight: 200; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(24px, 3.8vw, 46px); line-height: 1.3; margin-bottom: 24px; } .page-hero .accent { color: var(--faint); } /* ---------- tabs ---------- */ .tabs { display: inline-flex; border: 1px solid var(--line); padding: 5px; position: relative; gap: 4px; background: #fff; } .tab { position: relative; z-index: 2; padding: 13px 32px; font-family: var(--font-caps); font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); transition: color 0.3s; } .tab.active { color: #fff; } .tab-pill { position: absolute; top: 5px; bottom: 5px; background: var(--ink); transition: left 0.5s var(--ease), width 0.5s var(--ease); z-index: 1; } .tab-panels { position: relative; margin-top: clamp(44px, 5vw, 70px); } .tab-panel { display: none; } .tab-panel.active { display: block; animation: stepIn 0.6s var(--ease); } /* ---------- timeline ---------- */ .timeline { position: relative; display: grid; max-width: 720px; } .timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 40px; width: 1px; background: var(--line); } .timeline .tl-line { position: absolute; left: 15px; top: 8px; bottom: 40px; width: 1px; background: var(--ink); transform-origin: top; transform: scaleY(0); } .tl-item { position: relative; padding: 0 0 48px 60px; opacity: 0.3; transition: opacity 0.6s var(--ease); } .tl-item.on { opacity: 1; } .tl-item .dot { position: absolute; left: 0; top: 0; width: 31px; height: 31px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--dim); display: grid; place-items: center; font-family: var(--font-caps); font-size: 9px; letter-spacing: 0.1em; transition: border-color 0.5s, color 0.5s, box-shadow 0.5s; } .tl-item.on .dot { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 5px rgba(23, 28, 36, 0.06); } .tl-item h4 { font-family: var(--font-caps); font-weight: 400; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; } .tl-item p { color: var(--dim); font-weight: 300; font-size: 14px; max-width: 56ch; } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(44px, 6vw, 90px); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-info { display: grid; } .ci { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); } .ci:first-child { border-top: none; } .ci .icon { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; } .ci h4 { font-family: var(--font-caps); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 4px; } .ci p, .ci a { color: var(--dim); font-weight: 300; font-size: 14px; } .ci a:hover { color: var(--ink); } /* ---------- footer ---------- */ footer { background: var(--night); color: var(--inv-dim); padding: 80px 0 46px; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 60px; } .foot-grid h5 { font-family: var(--font-caps); color: var(--inv); font-size: 9px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 20px; } .foot-grid a { display: block; padding: 6px 0; font-size: 13.5px; font-weight: 300; transition: color 0.25s; } .foot-grid a:hover { color: var(--inv); } .foot-brand p { font-size: 13px; font-weight: 300; margin-top: 20px; max-width: 32ch; line-height: 1.8; } .foot-bottom { border-top: 1px solid var(--line-inv); padding-top: 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11.5px; font-weight: 300; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } } /* legal */ .legal { padding: calc(var(--nav-h) + 70px) 0 110px; background: #fff; min-height: 80vh; } .legal h1 { font-family: var(--font-caps); font-weight: 200; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(24px, 3.6vw, 38px); margin-bottom: 36px; } .legal h2 { font-family: var(--font-caps); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; font-size: 14px; margin: 40px 0 12px; } .legal p, .legal li { color: var(--dim); font-weight: 300; font-size: 14.5px; margin-bottom: 10px; } .legal ul { list-style: disc; padding-left: 22px; } .legal a { text-decoration: underline; } .legal .note { background: var(--cloud); border: 1px solid var(--line); padding: 14px 18px; color: var(--ink); font-size: 13px; } /* sticky mobile CTA */ .sticky-cta { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 120px); z-index: 90; transition: transform 0.6s var(--ease); display: none; box-shadow: 0 16px 40px -12px rgba(10, 14, 20, 0.5); } .sticky-cta.show { transform: translate(-50%, 0); } @media (max-width: 720px) { .sticky-cta { display: inline-flex; } } /* ============================================================ TECH HERO (index) ============================================================ */ .hero-tech { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 60px; background: var(--paper); overflow: hidden; } .ht-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(23, 28, 36, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 28, 36, 0.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 68% 45%, #000 30%, transparent 72%); mask-image: radial-gradient(ellipse 75% 65% at 68% 45%, #000 30%, transparent 72%); pointer-events: none; } .ht-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 5vw, 80px); align-items: center; position: relative; } .ht-copy .display { margin-bottom: 26px; } .ht-ctas { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; } .ht-status { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); padding: 10px 18px; margin-bottom: 30px; } .ht-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: statusping 2.4s infinite; } @keyframes statusping { 0% { box-shadow: 0 0 0 0 rgba(23, 28, 36, 0.35); } 70% { box-shadow: 0 0 0 8px rgba(23, 28, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 28, 36, 0); } } .ht-stage { position: relative; padding: 6% 4%; } .ht-rings { position: absolute; inset: -6% -10%; border-radius: 50%; border: 1px solid rgba(23, 28, 36, 0.07); pointer-events: none; } .ht-rings::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(23, 28, 36, 0.05); } .ht-sweep { position: absolute; inset: -6% -10%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(23, 28, 36, 0.07), transparent 65deg, transparent 360deg); animation: spin 10s linear infinite; pointer-events: none; } @keyframes spin { to { transform: rotate(360deg); } } .ht-panel { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 40px 60px rgba(10, 14, 20, 0.28)); animation: float 8s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .hchip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 11px 16px; opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), border-color 0.4s, box-shadow 0.4s; white-space: nowrap; } .hchip.on { opacity: 1; transform: none; } .hchip.hot { border-color: var(--ink); box-shadow: 0 8px 26px -12px rgba(10, 14, 20, 0.4); } .hchip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: statusping 2.4s infinite; } @media (max-width: 900px) { .ht-grid { grid-template-columns: 1fr; text-align: center; } .ht-copy .lead { margin-inline: auto; } .ht-ctas { justify-content: center; } .ht-logo { margin-inline: auto; } .ht-stage { max-width: 480px; margin-inline: auto; } .hchip { display: none; } .hchip:nth-of-type(1), .hchip:nth-of-type(2) { display: inline-flex; } } /* ============================================================ DOOR SCENE (loesungen, pinned) ============================================================ */ .scene { position: relative; height: 400vh; background: var(--night); color: var(--inv); } .scene-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; padding-top: var(--nav-h); } .scene-head { text-align: center; padding-inline: 24px; z-index: 5; } .scene-head .h2 { color: var(--inv); } .scene-stage { position: relative; width: min(340px, 70vw, 40vh); aspect-ratio: 3 / 4.4; perspective: 1400px; } .door-frame { position: absolute; inset: 0; border: 10px solid #2a303a; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); box-shadow: 0 40px 90px -25px rgba(0, 0, 0, 0.7); } .door-leaf { position: absolute; inset: 0; background: linear-gradient(160deg, #f4f5f7, #dde1e6); transform-origin: left center; will-change: transform; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); } .door-leaf::before { content: ""; position: absolute; inset: 10% 12%; border: 1px solid rgba(23, 28, 36, 0.1); } .door-leaf .handle { position: absolute; right: 7%; top: 50%; width: 5px; height: 56px; transform: translateY(-50%); background: #9aa1ab; border-radius: 3px; } .door-sensor-a, .door-sensor-b { position: absolute; background: #fff; border: 1px solid rgba(23, 28, 36, 0.15); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); z-index: 4; } .door-sensor-a { top: -3px; right: 14%; width: 16%; height: 13px; } .door-leaf .door-sensor-b { top: 8px; right: 14%; width: 16%; height: 13px; border-radius: 1px; } .door-sensor-a .led { position: absolute; right: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #788088; transition: background 0.3s, box-shadow 0.3s; } .scene.locked .door-sensor-a .led { background: #6ee7a0; box-shadow: 0 0 8px rgba(110, 231, 160, 0.9); } .scene.alarm .door-sensor-a .led { background: #ff5f56; box-shadow: 0 0 10px rgba(255, 95, 86, 0.9); } .scene-status { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-dim); border: 1px solid var(--line-inv); padding: 14px 28px; transition: color 0.4s, border-color 0.4s, background 0.4s; } .scene-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #4a525d; transition: background 0.4s, box-shadow 0.4s; } .scene.locked .scene-status { color: var(--inv); border-color: rgba(255, 255, 255, 0.4); } .scene.locked .scene-status .dot { background: #6ee7a0; box-shadow: 0 0 10px rgba(110, 231, 160, 0.8); } .scene.alarm .scene-status { color: #fff; border-color: rgba(255, 95, 86, 0.7); background: rgba(255, 95, 86, 0.12); } .scene.alarm .scene-status .dot { background: #ff5f56; box-shadow: 0 0 12px rgba(255, 95, 86, 0.9); animation: statusping 0.8s infinite; } .scene-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(255, 95, 86, 0.16), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .scene.alarm .scene-flash { opacity: 1; animation: alarmpulse 1.1s ease-in-out infinite; } @keyframes alarmpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* sensor icon pulse */ .scard .icon { position: relative; } .scard .icon::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(23, 28, 36, 0.3); opacity: 0; animation: iconping 3.6s ease-out infinite; animation-delay: var(--pd, 0s); } @keyframes iconping { 0% { transform: scale(0.9); opacity: 0.7; } 35% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } /* page-hero with media */ .ph-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .ph-media { position: relative; } .ph-media .ph-rings { position: absolute; inset: -8% -12%; border-radius: 50%; border: 1px solid rgba(23, 28, 36, 0.08); pointer-events: none; } .ph-media img { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 34px 54px rgba(10, 14, 20, 0.25)); animation: float 8s ease-in-out infinite; } @media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; } .ph-media { max-width: 420px; } } /* sensor pulse stagger */ .sgrid .scard:nth-child(2) .icon::after { --pd: 0.6s; } .sgrid .scard:nth-child(3) .icon::after { --pd: 1.2s; } .sgrid .scard:nth-child(4) .icon::after { --pd: 1.8s; } .sgrid .scard:nth-child(5) .icon::after { --pd: 2.4s; } .sgrid .scard:nth-child(6) .icon::after { --pd: 3s; } .sgrid .scard:nth-child(7) .icon::after { --pd: 3.6s; } .sgrid .scard:nth-child(8) .icon::after { --pd: 4.2s; } /* ============================================================ SYSTEM CONSTELLATION (index, pinned) ============================================================ */ .grow { position: relative; height: 460vh; background: linear-gradient(180deg, var(--paper) 0%, var(--cloud) 100%); } .grow-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .grow-kicker { position: absolute; top: calc(var(--nav-h) + 3vh); left: 50%; transform: translateX(-50%); font-family: var(--font-caps); font-size: 10px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--faint); white-space: nowrap; z-index: 20; transition: opacity 0.5s; } .grow-stage { position: relative; width: min(960px, 94vw, 118vh); aspect-ratio: 16 / 10.5; will-change: transform, opacity; } .grow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .gline { stroke: rgba(23, 28, 36, 0.22); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); } .gline.show { stroke-dashoffset: 0; } .grow-panel { position: absolute; left: 50%; top: 50%; width: 44%; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 50px rgba(10, 14, 20, 0.28)); z-index: 5; } .gnode { position: absolute; z-index: 6; text-align: center; opacity: 0; transform: translateY(26px) scale(0.85); transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; } .gnode.show { opacity: 1; transform: none; } .gnode img { width: 100%; filter: drop-shadow(0 14px 26px rgba(10, 14, 20, 0.22)); } .gnode .glabel { display: block; margin-top: 10px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .grow-ring { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.5); border-radius: 50%; border: 1px solid rgba(23, 28, 36, 0.25); opacity: 0; pointer-events: none; z-index: 2; } .grow-ring.show { animation: growring 2.6s var(--ease) infinite; } @keyframes growring { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .grow-tagline { position: absolute; bottom: 7vh; left: 50%; transform: translate(-50%, 16px); font-family: var(--font-caps); font-size: clamp(13px, 1.6vw, 17px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); z-index: 20; } .grow-tagline.show { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 720px) { .grow { height: 400vh; } .gnode .glabel { font-size: 7px; letter-spacing: 0.2em; } } /* trustline logos */ .trustline img { height: 30px; width: auto; filter: grayscale(1); opacity: 0.55; mix-blend-mode: multiply; } .trustline .wrap { align-items: center; } /* sensor photo cards */ .spgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .spcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .spcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .spcard .spimg { aspect-ratio: 4 / 3.2; display: grid; place-items: center; background: var(--cloud); padding: 12%; overflow: hidden; } .spcard .spimg img { max-height: 100%; object-fit: contain; transition: transform 0.7s var(--ease); } .spcard .spimg.cover { padding: 0; } .spcard .spimg.cover img { width: 100%; height: 100%; object-fit: cover; max-height: none; } .spcard:hover .spimg img { transform: scale(1.06); } .spcard .spbody { padding: 20px 22px 22px; } .spcard h4 { font-family: var(--font-caps); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 5px; } .spcard p { font-size: 12.5px; font-weight: 300; color: var(--dim); } @media (max-width: 1000px) { .spgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .spgrid { grid-template-columns: 1fr; } } /* monitoring split */ .monitor-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 90px); align-items: center; } .monitor-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .monitor-media img { width: 100%; display: block; } @media (max-width: 900px) { .monitor-grid { grid-template-columns: 1fr; } } /* product grid: allow 4 */ .pgrid.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .pgrid.four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pgrid.four { grid-template-columns: 1fr; } } /* hero logo prominence */ .ht-logo { height: clamp(120px, 15vw, 170px); width: auto; mix-blend-mode: multiply; filter: brightness(1.07) contrast(1.04); margin-bottom: 28px; } footer .brand-img { height: 74px; } /* ============================================================ HEROFLOW — hero and constellation as one continuous scene ============================================================ */ .hflow { position: relative; height: 640vh; background: linear-gradient(180deg, var(--paper) 0%, var(--cloud) 100%); } .hflow-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hf-copy { position: absolute; left: max(24px, calc((100vw - 1180px) / 2)); top: 50%; transform: translateY(-50%); width: min(460px, 38vw); z-index: 30; will-change: opacity, transform; } .hf-copy .display { margin-bottom: 24px; } .hf-ctas { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; } .hf-canvas { position: relative; width: min(1060px, 96vw, 130vh); aspect-ratio: 16 / 10; } .hf-panelwrap { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); z-index: 5; will-change: transform, opacity; } .hf-panelwrap .ht-sweep, .hf-panelwrap .ht-rings { inset: -10% -14%; } .hf-panelwrap .ht-panel { animation: none; } .hflow .grow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; } .gflow { stroke: rgba(23, 28, 36, 0.4); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 1.4 5.1; stroke-linecap: round; opacity: 0; transition: opacity 0.8s ease; } .gflow.on { opacity: 0.6; animation: gflowmove 1.4s linear infinite; } @keyframes gflowmove { to { stroke-dashoffset: -6.5; } } .hflow .gnode { z-index: 6; } .gnode::before { content: ""; position: absolute; left: 50%; top: 42%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.5); border-radius: 50%; border: 1px solid rgba(23, 28, 36, 0.35); opacity: 0; pointer-events: none; } .gnode.show::before { animation: none; } @keyframes nodeburst { 0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.55; } 55% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } } .gnode.show img { animation: none; } .hf-ring, .hf-ring2 { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.5); border-radius: 50%; border: 1px solid rgba(23, 28, 36, 0.28); opacity: 0; pointer-events: none; z-index: 1; } .hf-ring.show { animation: growring 3s var(--ease) infinite; } .hf-ring2.show { animation: growring 3s var(--ease) infinite 1.5s; } .hf-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--faint); z-index: 30; transition: opacity 0.4s; } .hf-hint i { width: 1px; height: 36px; background: linear-gradient(var(--ink), transparent); animation: drip 2s ease-in-out infinite; } @media (max-width: 900px) { .hflow { height: 560vh; } .hf-copy { left: 50%; top: calc(var(--nav-h) + 3vh); transform: translateX(-50%); width: min(520px, calc(100vw - 48px)); text-align: center; } .hf-copy .lead { margin-inline: auto; } .hf-ctas { justify-content: center; } .hf-canvas { width: min(96vw, 74vh); margin-top: 16vh; } } /* timeline with side media */ .tl-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .tl-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .tl-media { position: sticky; top: calc(var(--nav-h) + 40px); } @media (max-width: 900px) { .tl-grid { grid-template-columns: 1fr; } .tl-media { position: static; } } /* ============================================================ HERO VILLA LAYER (index) ============================================================ */ .hf-villa { position: absolute; inset: 0; z-index: 25; overflow: hidden; will-change: opacity; } .hf-villa > img { width: 100%; height: 100%; object-fit: cover; will-change: transform; animation: kenburns 3.5s var(--ease) forwards; } @keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1.02); } } .hf-villa-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 21, 0.12) 35%, rgba(13, 16, 21, 0.55) 70%, rgba(13, 16, 21, 0.92) 100%), linear-gradient(100deg, rgba(13, 16, 21, 0.45) 0%, transparent 55%); } .hf-villa-copy { position: absolute; left: max(24px, calc((100vw - 1180px) / 2)); bottom: clamp(48px, 9vh, 110px); width: min(560px, 46vw); text-align: left; color: #fff; } .hf-villa-copy .display { color: #fff; margin-bottom: 20px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); } .hf-villa-copy .lead { color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45); } .hf-villa-copy .hf-ctas { justify-content: flex-start; } @media (max-width: 900px) { .hf-villa-copy { left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 48px)); text-align: center; } .hf-villa-copy .lead { margin-inline: auto; } .hf-villa-copy .hf-ctas { justify-content: center; } } .hf-villa .hf-hint-v { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .hf-villa .hf-hint-v i { width: 1px; height: 30px; background: linear-gradient(#fff, transparent); animation: drip 2s ease-in-out infinite; } .btn-glass { color: #fff; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); } .btn-glass:hover { background: rgba(255, 255, 255, 0.22); } /* circuit traces instead of spider lines */ .gtrace { fill: none; stroke: rgba(23, 28, 36, 0.28); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); } .gtrace.show { stroke-dashoffset: 0; } .gtraceflow { fill: none; stroke: rgba(23, 28, 36, 0.45); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 1.4 5.1; stroke-linecap: round; opacity: 0; transition: opacity 0.8s ease; } .gtraceflow.on { opacity: 0.55; animation: gflowmove 1.4s linear infinite; } /* ============================================================ PAGE HERO variants ============================================================ */ .ph-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; } .ph-pills a { font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; padding: 13px 20px; border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s, color 0.3s; } .ph-pills a:hover { border-color: var(--ink); } .page-hero.ph-dark { position: relative; overflow: hidden; color: var(--inv); } .page-hero.ph-dark .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.35) brightness(0.8); } .page-hero.ph-dark .ph-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 21, 0.6) 0%, rgba(13, 16, 21, 0.85) 100%); } .page-hero.ph-dark .wrap { position: relative; z-index: 2; } .page-hero.ph-dark h1 { color: #fff; } .page-hero.ph-dark .lead { color: var(--inv-dim); } .page-hero.ph-dark .kicker { color: var(--inv-dim); } .page-hero.ph-dark .kicker::before { background: var(--inv-dim); } .page-hero.ph-dark .ph-pills a { border-color: var(--line-inv); color: var(--inv); } .page-hero.ph-dark .ph-pills a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); } .ph-media .ph-photo { border-radius: var(--radius); box-shadow: var(--shadow-soft); } /* device badge on wide reveal */ .wide-badge { position: absolute; right: 4%; bottom: 10%; z-index: 6; width: min(250px, 30vw); opacity: 0; transform: translateY(20px); text-align: center; } .wide-badge img { width: 100%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)); } .wide-badge .wb-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(13, 16, 21, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 10px 16px; white-space: nowrap; } .wide-badge .wb-status .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9); animation: statusping 2.2s infinite; } /* uniform constellation nodes */ .gnode img { aspect-ratio: 1 / 1; object-fit: contain; } /* ============================================================ NIGHT HERO (loesungen) — pinned image hero, device docks in ============================================================ */ .nighthero { position: relative; height: 260vh; background: var(--night); } .nighthero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; } .nighthero-sticky > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; } .nighthero .nh-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 21, 0.35) 0%, rgba(13, 16, 21, 0.05) 40%, rgba(13, 16, 21, 0.75) 100%); } .nh-copy { position: absolute; left: 50%; bottom: clamp(48px, 10vh, 120px); transform: translateX(-50%); width: min(880px, calc(100vw - 48px)); text-align: center; color: #fff; z-index: 4; } .nh-copy h1 { font-family: var(--font-caps); font-weight: 200; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(24px, 3.8vw, 46px); line-height: 1.3; color: #fff; margin-bottom: 18px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); } .nh-copy .lead { color: rgba(255, 255, 255, 0.85); margin-inline: auto; } .nh-copy .ph-pills { justify-content: center; } .nh-copy .ph-pills a { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .nh-copy .ph-pills a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); } /* ============================================================ 3D VIEWER (produkte hero) ============================================================ */ .p3d { position: relative; background: radial-gradient(1000px 600px at 60% 40%, var(--night-2), var(--night) 75%); color: var(--inv); padding: calc(var(--nav-h) + clamp(60px, 8vw, 110px)) 0 clamp(70px, 9vw, 120px); overflow: hidden; } .p3d-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .p3d h1 { color: #fff; } .p3d .lead { color: var(--inv-dim); } .p3d .kicker { color: var(--inv-dim); } .p3d .kicker::before { background: var(--inv-dim); } .p3d .ph-pills a { border-color: var(--line-inv); color: var(--inv); } .p3d .ph-pills a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); } .p3d-stage { position: relative; aspect-ratio: 4 / 3; perspective: 1400px; cursor: grab; touch-action: pan-y; } .p3d-stage:active { cursor: grabbing; } .p3d-inner { position: absolute; inset: 8%; transform-style: preserve-3d; will-change: transform; } .p3d-inner img { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%); filter: drop-shadow(0 50px 70px rgba(0, 0, 0, 0.55)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .p3d-inner img.active { opacity: 1; } .p3d-floor { position: absolute; left: 50%; bottom: 2%; width: 60%; height: 24px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%); filter: blur(6px); } .p3d-hint { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--inv-dim); white-space: nowrap; } .p3d-views { display: flex; gap: 8px; justify-content: center; margin-top: 30px; } .p3d-views button { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--inv-dim); border: 1px solid var(--line-inv); padding: 11px 18px; transition: color 0.3s, border-color 0.3s, background 0.3s; } .p3d-views button.active { color: var(--ink); background: #fff; border-color: #fff; } @media (max-width: 900px) { .p3d-grid { grid-template-columns: 1fr; } .p3d-stage { max-width: 520px; margin-inline: auto; } } /* group stats (ueber uns) */ .gstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .gstat { padding: 36px 20px; text-align: center; border-right: 1px solid var(--line); } .gstat:last-child { border-right: none; } .gstat .num { font-family: var(--font-caps); font-weight: 200; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: 0.08em; } .gstat .lbl { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); margin-top: 8px; } @media (max-width: 720px) { .gstats { grid-template-columns: repeat(2, 1fr); } .gstat:nth-child(2) { border-right: none; } } .pv-card { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); border: 1px solid var(--line); padding: clamp(28px, 4vw, 52px); background: #fff; flex-wrap: wrap; } .pv-card img { height: clamp(70px, 9vw, 110px); width: auto; } .pv-card p { color: var(--dim); font-weight: 300; font-size: 15px; max-width: 52ch; } /* funktionsweise rows */ .how { display: grid; gap: 0; border-top: 1px solid var(--line); } .how-row { display: grid; grid-template-columns: 90px 1fr 1.1fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(30px, 4vw, 46px) 0; border-bottom: 1px solid var(--line); } .how-row .num { font-family: var(--font-caps); font-weight: 200; font-size: clamp(26px, 3vw, 40px); color: var(--faint); } .how-row h3 { font-family: var(--font-caps); font-weight: 400; font-size: 13.5px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 10px; } .how-row p { color: var(--dim); font-weight: 300; font-size: 14.5px; max-width: 56ch; } @media (max-width: 800px) { .how-row { grid-template-columns: 1fr; gap: 10px; } .how-row .num { font-size: 22px; } } /* p3d v2 — single image, auto-rotating product stage */ .p3d-inner .p3d-img { opacity: 1; transition: none; } .p3d-glare { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); -webkit-mask-image: url("../img/panel4-front.png"); mask-image: url("../img/panel4-front.png"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%); background-size: 280% 100%; pointer-events: none; } .p3d-mirror { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%, 52%) scaleY(-1); opacity: 0.14; filter: blur(1px); -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 55%, rgba(0,0,0,0.9)); mask-image: linear-gradient(rgba(0,0,0,0) 55%, rgba(0,0,0,0.9)); pointer-events: none; } .p3d-stage { aspect-ratio: 4 / 3.4; } .p3d-inner { inset: 4% 8% 18% 8%; } /* fix: nav CTA text was overridden to dim by .nav-links a */ .nav-links a.btn { color: #fff; } .nav-links a.btn:hover { color: #fff; } /* ============================================================ SENSOR EXPLORER (produkte) ============================================================ */ .sx { display: grid; grid-template-columns: 1fr 0.95fr; gap: clamp(30px, 4vw, 60px); align-items: start; } .sx-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .sx-item { border: 1px solid var(--line); background: #fff; padding: 14px 12px 12px; text-align: center; cursor: pointer; transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s var(--ease); } .sx-item img { width: 100%; aspect-ratio: 1; object-fit: contain; } .sx-item span { display: block; margin-top: 6px; font-family: var(--font-caps); font-size: 8px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } .sx-item:hover { transform: translateY(-3px); border-color: var(--ink); } .sx-item.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-card); } .sx-item.active span { color: var(--ink); } .sx-detail { position: sticky; top: calc(var(--nav-h) + 30px); border: 1px solid var(--line); background: #fff; padding: clamp(26px, 3vw, 40px); } .sx-detail .sxd-anim { animation: stepIn 0.5s var(--ease); } .sx-detail img { width: 130px; aspect-ratio: 1; object-fit: contain; margin-bottom: 14px; } .sx-detail h3 { font-family: var(--font-caps); font-weight: 400; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 10px; } .sx-detail p { color: var(--dim); font-weight: 300; font-size: 14.5px; } .sx-detail .sxd-role { margin-top: 18px; padding: 14px 16px; background: var(--cloud); border-left: 2px solid var(--ink); font-size: 13px; font-weight: 300; color: var(--ink-2, var(--ink)); } .sx-detail .sxd-role b { font-weight: 500; } .sx-link { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); } .sx-link .pulse-line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); background-size: 24px 1px; animation: sxflow 1.2s linear infinite; opacity: 0.5; } @keyframes sxflow { to { background-position: 24px 0; } } @media (max-width: 900px) { .sx { grid-template-columns: 1fr; } .sx-detail { position: static; } .sx-list { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ IQ PRO callouts (statt fliegender Teile) ============================================================ */ .lid-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 7; pointer-events: none; } .lid-call { position: absolute; z-index: 8; max-width: 190px; opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); pointer-events: none; } .lid-call.show { opacity: 1; transform: none; } .lid-call .tag { font-family: var(--font-caps); font-size: 8px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--inv-dim); display: block; margin-bottom: 5px; } .lid-call h4 { font-family: var(--font-caps); font-weight: 400; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 4px; } .lid-call p { font-size: 11.5px; font-weight: 300; color: var(--inv-dim); line-height: 1.55; } .lid-call.left { text-align: right; } .lid .gtrace { stroke: rgba(255, 255, 255, 0.4); } /* Schmalere Fenster: der Deckel öffnet weiterhin, aber ohne Beschriftung – links ist schlicht nicht genug Raum, sonst wird der Text angeschnitten. */ @media (max-width: 1200px) { .lid-call, .lid-lines { display: none; } } /* ============================================================ IQ HERO (produkte) — platform intro ============================================================ */ .iqhero { position: relative; background: radial-gradient(1000px 600px at 62% 42%, var(--night-2), var(--night) 75%); color: var(--inv); padding: calc(var(--nav-h) + clamp(60px, 8vw, 110px)) 0 clamp(70px, 9vw, 120px); overflow: hidden; } .iqhero-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .iqhero h1 { color: #fff; } .iqhero .lead { color: var(--inv-dim); } .iqhero .kicker { color: var(--inv-dim); } .iqhero .kicker::before { background: var(--inv-dim); } .iq-badge { display: inline-block; background: #fff; padding: 14px 22px; margin-bottom: 26px; } .iq-badge img { height: 44px; width: auto; display: block; } .iqhero-steps { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--line-inv); } .iqhero-steps a { display: flex; align-items: baseline; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--line-inv); transition: background 0.3s, padding-left 0.3s var(--ease); } .iqhero-steps a:hover { background: rgba(255, 255, 255, 0.05); padding-left: 12px; } .iqhero-steps .n { font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.2em; color: var(--inv-dim); flex: none; } .iqhero-steps .t { font-family: var(--font-caps); font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--inv); } .iqhero-steps .d { font-size: 12px; font-weight: 300; color: var(--inv-dim); margin-left: auto; text-align: right; } .iqhero-media { position: relative; } .iqhero-media img { width: min(560px, 100%); margin-inline: auto; filter: drop-shadow(0 50px 70px rgba(0, 0, 0, 0.55)); animation: float 8s ease-in-out infinite; } .iqhero-media .ht-rings { inset: -4% -8%; } @media (max-width: 900px) { .iqhero-grid { grid-template-columns: 1fr; } .iqhero-steps .d { display: none; } } /* numbered section kickers */ .numkick { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-caps); font-size: 10px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; } .numkick b { font-weight: 300; font-size: 22px; letter-spacing: 0.1em; color: var(--ink); } .on-dark .numkick, .dark .numkick { color: var(--inv-dim); } .on-dark .numkick b, .dark .numkick b { color: var(--inv); } /* ============================================================ RADAR facts ============================================================ */ .radar-facts { position: absolute; right: max(24px, calc((100vw - 1180px) / 2)); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; z-index: 6; width: min(250px, 26vw); } .rfact { border: 1px solid var(--line-inv); background: rgba(13, 16, 21, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 14px 18px; opacity: 0; transform: translateX(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .rfact.show { opacity: 1; transform: none; } .rfact .t { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--inv); display: block; margin-bottom: 3px; } .rfact .d { font-size: 11.5px; font-weight: 300; color: var(--inv-dim); line-height: 1.5; } .rlabel { fill: rgba(243, 244, 245, 0.45); font-family: Montserrat, sans-serif; font-size: 9px; letter-spacing: 2px; } @media (max-width: 1000px) { .radar-facts { display: none; } } /* ============================================================ NIGHT HERO — Zielerfassung & Alarm ============================================================ */ .nh-target { position: absolute; left: 10%; top: 34%; width: 13%; aspect-ratio: 1 / 2.1; z-index: 3; opacity: 0; pointer-events: none; } .nh-target i { position: absolute; width: 22%; aspect-ratio: 1; border: 2px solid #ff5f56; } .nh-target i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .nh-target i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; } .nh-target i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .nh-target i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; } .nh-target .scan { position: absolute; left: 6%; right: 6%; height: 1.5px; background: rgba(255, 95, 86, 0.85); box-shadow: 0 0 10px rgba(255, 95, 86, 0.8); animation: nhscan 1.6s ease-in-out infinite alternate; } @keyframes nhscan { from { top: 8%; } to { top: 90%; } } .nh-target .ttag { position: absolute; left: 108%; top: 4%; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: #ff8a84; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } .nh-alarmglow { position: absolute; right: 8%; top: 18%; width: 34%; height: 46%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 95, 86, 0.28), transparent 65%); opacity: 0; pointer-events: none; z-index: 2; } .nighthero.alarm .nh-alarmglow { animation: alarmpulse 1.1s ease-in-out infinite; } .nh-status { position: absolute; left: 50%; top: calc(var(--nav-h) + 4vh); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(13, 16, 21, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px 24px; z-index: 5; opacity: 0; transition: opacity 0.5s, color 0.4s, border-color 0.4s, background 0.4s; white-space: nowrap; } .nh-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a0; box-shadow: 0 0 10px rgba(110,231,160,.8); } .nighthero.alarm .nh-status { color: #fff; border-color: rgba(255, 95, 86, 0.8); background: rgba(120, 20, 15, 0.45); } .nighthero.alarm .nh-status .dot { background: #ff5f56; box-shadow: 0 0 12px rgba(255, 95, 86, 0.9); animation: statusping 0.8s infinite; } /* ============================================================ SERVICE HUB (PowerManage = Rückgrat) ============================================================ */ .hub-stage { position: relative; width: min(860px, 94vw); margin-inline: auto; aspect-ratio: 16 / 9.5; } .hub-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--night); color: #fff; padding: 26px 34px; text-align: center; z-index: 5; box-shadow: var(--shadow-soft); } .hub-center .t { font-family: var(--font-caps); font-size: 13px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; } .hub-center .d { font-family: var(--font-caps); font-size: 8px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 6px; } .hub-node { position: absolute; z-index: 4; width: 180px; max-width: 24vw; background: #fff; border: 1px solid var(--line); padding: 16px 18px; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .hub-node.show { opacity: 1; transform: none; } .hub-node .t { font-family: var(--font-caps); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 4px; } .hub-node .d { font-size: 11.5px; font-weight: 300; color: var(--dim); line-height: 1.5; } .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } @media (max-width: 800px) { .hub-stage { aspect-ratio: auto; display: grid; gap: 12px; } .hub-center { position: static; transform: none; order: -1; } .hub-node { position: static; width: auto; max-width: none; } .hub-lines { display: none; } } /* gewerbe use cases */ .ucgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .uc { border: 1px solid var(--line); background: #fff; padding: 30px 28px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .uc:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .uc h4 { font-family: var(--font-caps); font-weight: 400; font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 10px; } .uc p { font-size: 13.5px; font-weight: 300; color: var(--dim); } .uc .uctags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .uc .uctags span { font-family: var(--font-caps); font-size: 8px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--line); color: var(--dim); padding: 6px 10px; } @media (max-width: 720px) { .ucgrid { grid-template-columns: 1fr; } } /* funnel: multi-select + weiter */ .choices.multi .choice.selected { background: var(--ink); color: #fff; border-color: var(--ink); } .choices.multi .choice.selected svg { opacity: 1; } .mstep-next { display: flex; justify-content: flex-end; margin-top: 22px; } /* explorer group labels */ .sx-glabel { grid-column: 1 / -1; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--faint); margin-top: 10px; } .sx-glabel:first-child { margin-top: 0; } /* cutout media without card frame */ .monitor-media.clean, .ph-media.clean { border-radius: 0; overflow: visible; box-shadow: none; } .monitor-media.clean img { width: auto; max-height: 520px; margin-inline: auto; filter: drop-shadow(0 30px 50px rgba(10, 14, 20, 0.28)); } /* Freigestellte Produktbilder: vollstaendig sichtbar, kein Beschnitt, keine Kartenecken, die die runden Geraeteecken anschneiden. */ .prod-media .main.clean { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; aspect-ratio: auto; display: grid; place-items: center; } .prod-media .main.clean img { width: 100%; height: auto; object-fit: contain; } /* funnel small helpers */ .mstep-back { margin-top: 18px; } .mstep-note { font-size: 13px; font-weight: 300; color: var(--dim); margin: -10px 0 18px; } /* ============================================================ ANTI-KAHL: Textur, Tiefe, Sicherheits-Details ============================================================ */ .section.first { padding-top: calc(var(--nav-h) + clamp(60px, 8vw, 100px)); } /* feines technisches Punktraster in hellen Sektionen */ .section.cloud { background-image: radial-gradient(rgba(23, 28, 36, 0.055) 1px, transparent 1px); background-size: 26px 26px; background-color: var(--cloud); } /* Kamera-Rahmen-Ecken an Medien (Zielerfassungs-Motiv) */ .prod-media .main, .monitor-media { position: relative; } .corner-frame::before, .corner-frame::after, .prod-media .main::before, .prod-media .main::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(23, 28, 36, 0.4); z-index: 3; pointer-events: none; } .prod-media .main::before { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .prod-media .main::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; } .prod-media .main.clean::before, .prod-media .main.clean::after { display: none; } .monitor-media::before, .monitor-media::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(255, 255, 255, 0.65); z-index: 3; pointer-events: none; } .monitor-media::before { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .monitor-media::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; } .monitor-media.clean::before, .monitor-media.clean::after { display: none; } /* große Geisterziffern hinter Produktsektionen */ .ghostnum { overflow: hidden; } .ghostnum::before { content: attr(data-num); position: absolute; right: -0.05em; top: 30px; font-family: var(--font-caps); font-weight: 200; font-size: clamp(160px, 22vw, 320px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(23, 28, 36, 0.07); pointer-events: none; z-index: 0; } .ghostnum > .wrap { position: relative; z-index: 1; } /* Headline-Gewicht: kurzer Balken unter Section-Headlines */ .section-head .h2::after { content: ""; display: block; width: 44px; height: 3px; background: var(--ink); margin-top: 18px; } .section-head.center .h2::after { margin-inline: auto; } .dark .section-head .h2::after { background: var(--inv); } /* ============================================================ FIXES & WÄRME ============================================================ */ /* Leiterbahnen: unsichtbar bis zum Einsatz (kein Dash-Artefakt) */ .gtrace { opacity: 0; transition: stroke-dashoffset 1.2s var(--ease), opacity 0.3s ease; } .gtrace.show { opacity: 1; } /* Zielerfassung wird per JS aufs Bild gerechnet */ .nh-target { aspect-ratio: auto; } /* freundliche Bildkarten in Seitenspalten */ .side-photo { margin-top: 34px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-card); } .side-photo img { width: 100%; display: block; } /* Sensor-Explorer: ruhige Listenzeilen statt Kachel-Gitter */ .sx-list { display: block; border-top: 1px solid var(--line); background: transparent; } .sx-glabel { display: block; margin: 26px 0 4px; } .sx-glabel:first-child { margin-top: 18px; } .sx-item { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; position: relative; } .sx-item::after { display: none; } .sx-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); transform: scaleY(0); transition: transform 0.3s var(--ease); } .sx-item:hover { transform: none; border-color: var(--line); background: #fff; } .sx-item.active { border-color: var(--line); box-shadow: none; background: #fff; } .sx-item.active::before { transform: none; } .sx-item img { width: 50px; aspect-ratio: 1; object-fit: contain; flex: none; } .sx-item .si b { display: block; font-family: var(--font-caps); font-weight: 500; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } .sx-item .si i { font-style: normal; font-size: 12.5px; font-weight: 300; color: var(--dim); } .sx-item span:not(.si) { display: none; } /* ============================================================ REVISION: Ecken weg, Linien kräftiger, Hero-Übergang ============================================================ */ /* Kamera-Ecken entfernen */ .prod-media .main::before, .prod-media .main::after, .monitor-media::before, .monitor-media::after, .corner-frame::before, .corner-frame::after { display: none !important; } /* Leiterbahnen kräftiger */ .gtrace { stroke: rgba(23, 28, 36, 0.5); stroke-width: 1.75px; } .gtraceflow { stroke: rgba(23, 28, 36, 0.75); stroke-width: 2.2px; } .gtraceflow.on { opacity: 0.8; } /* Hero: Panel liegt von Anfang an über dem Villa-Bild */ .hf-panelwrap { z-index: 30; } .hf-status { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(13, 16, 21, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 10px 16px; white-space: nowrap; } .hf-status .dot { width: 5px; height: 5px; border-radius: 50%; background: #6ee7a0; box-shadow: 0 0 8px rgba(110, 231, 160, 0.9); animation: statusping 2.2s infinite; } /* ============================================================ SMART HOME SZENARIEN (index) ============================================================ */ .scn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .scn { border: 1px solid var(--line); background: #fff; padding: 30px 28px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .scn:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .scn h3 { font-family: var(--font-caps); font-weight: 400; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; } .scn-chain { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; list-style: none; padding: 0; } .scn-chain li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--line); padding: 8px 12px; color: var(--dim); opacity: 0.3; } .scn-chain li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); } .scn.in .scn-chain li { animation: chipon 0.6s var(--ease) forwards; animation-delay: calc(0.5s + var(--i) * 0.45s); } @keyframes chipon { to { opacity: 1; color: var(--ink); border-color: var(--ink); } } .scn.in .scn-chain li::before { animation: dotgreen 0.6s var(--ease) forwards; animation-delay: calc(0.5s + var(--i) * 0.45s); } @keyframes dotgreen { to { background: #34b872; box-shadow: 0 0 8px rgba(52, 184, 114, 0.6); } } .scn p { font-size: 13.5px; font-weight: 300; color: var(--dim); } @media (max-width: 900px) { .scn-grid { grid-template-columns: 1fr; } } /* ============================================================ SERVICE HUB v2 — dunkel, lebendig, mit Live-Protokoll ============================================================ */ .hub-v2 .hub-node { background: var(--night-2); border: 1px solid var(--line-inv); } .hub-v2 .hub-node .t { color: var(--inv); } .hub-v2 .hub-node .d { color: var(--inv-dim); } .hub-v2 .gtrace { stroke: rgba(255, 255, 255, 0.4); } .hub-v2 .gtraceflow { stroke: rgba(255, 255, 255, 0.75); } .hub-v2 .hub-center { background: #fff; color: var(--ink); animation: hubglow 3s ease-in-out infinite; } @keyframes hubglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.15), var(--shadow-soft); } 50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0), var(--shadow-soft); } } .hub-v2 .hub-center .d { color: var(--dim); } .hub-log { max-width: 560px; margin: 50px auto 0; border: 1px solid var(--line-inv); background: var(--night-2); } .hub-log-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line-inv); font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--inv); } .hub-log-head .dot { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a0; box-shadow: 0 0 8px rgba(110, 231, 160, 0.9); animation: statusping 2.2s infinite; } .hub-log-mask { height: 132px; overflow: hidden; position: relative; } .hub-log-mask::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--night-2), transparent 25%, transparent 75%, var(--night-2)); pointer-events: none; } .hub-log ul { animation: logscroll 16s linear infinite; } .hub-log li { padding: 10px 20px; font-size: 12.5px; font-weight: 300; color: var(--inv-dim); border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-log li b { font-weight: 500; color: var(--inv); font-variant-numeric: tabular-nums; margin-right: 10px; } @keyframes logscroll { to { transform: translateY(-50%); } } /* Über-uns Hero-Bild */ .ph-media .ph-photo { width: 100%; } /* Gründer-Zitat */ .quote { font-weight: 300; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.6; color: var(--inv); max-width: 26ch; margin: 26px auto 22px; } .quote-by { font-family: var(--font-caps); font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--inv-dim); } /* Kamera-REC-Bild klebt nicht mehr beim Scrollen */ .tl-media { position: static; } /* Smart-Home-Kopf mit Wohnküchen-Foto */ .sh-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .sh-photo { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-card); } .sh-photo img { width: 100%; display: block; } @media (max-width: 900px) { .sh-grid { grid-template-columns: 1fr; } } /* IQ4 NS: Geräte-Inset auf dem Wohnzimmerfoto */ .ns-badge { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 12px 16px; z-index: 3; } .ns-badge img { width: 74px; } .ns-badge span { font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); line-height: 1.7; } /* ============================================================ HAUS-DIAGRAMM (produkte · Sensorik) ============================================================ */ .hx-stage { position: relative; width: min(1040px, 96vw); margin-inline: auto; aspect-ratio: 16 / 9.5; } .hx-stage .grow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; } .hx-house { position: absolute; left: 50%; top: 52%; width: 52%; transform: translate(-50%, -50%); filter: drop-shadow(0 34px 50px rgba(10, 14, 20, 0.25)); z-index: 2; } .hx-node { position: absolute; z-index: 5; width: 10%; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; } .hx-node > img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(10, 14, 20, 0.18)); transition: transform 0.35s var(--ease); } .hx-node:hover > img, .hx-node.open > img { transform: scale(1.1); } .hx-node .glabel { display: block; margin-top: 8px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .hx-node.open .glabel, .hx-node:hover .glabel { color: var(--ink); } .hx-pop { position: absolute; top: -10px; width: 250px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); padding: 18px 20px; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; z-index: 20; } .hx-node.left .hx-pop { left: calc(100% + 14px); } .hx-node.right .hx-pop { right: calc(100% + 14px); } .hx-node:hover .hx-pop, .hx-node.open .hx-pop { opacity: 1; transform: none; } .hx-pop h4 { font-family: var(--font-caps); font-weight: 500; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 10px; } .hx-pop ul { list-style: none; display: grid; gap: 6px; } .hx-pop li { font-size: 12.5px; font-weight: 300; color: var(--dim); line-height: 1.5; padding-left: 14px; position: relative; } .hx-pop li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--ink); } .hx-mobilegrid { display: contents; } @media (max-width: 820px) { .hx-stage { aspect-ratio: auto; } .hx-stage .grow-lines { display: none; } .hx-house { position: static; transform: none; width: min(420px, 86vw); margin: 0 auto 28px; display: block; } .hx-node { position: static; width: auto; display: flex; flex-direction: column; align-items: center; padding: 16px 10px; border: 1px solid var(--line); background: #fff; } .hx-node > img { width: 64px; } .hx-mobilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hx-pop { position: static; width: auto; border: 0; box-shadow: none; padding: 12px 4px 0; display: none; opacity: 1; transform: none; pointer-events: auto; } .hx-node.open .hx-pop { display: block; } .hx-node:hover .hx-pop { opacity: 1; } } /* Gewerbe-Karten mit Bild */ .uc { padding: 0; overflow: hidden; } .uc .uc-img { aspect-ratio: 16 / 8.5; overflow: hidden; } .uc .uc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .uc:hover .uc-img img { transform: scale(1.05); } .uc .uc-body { padding: 24px 26px 26px; } /* ============================================================ REVISION 2: heller Produkt-Hero, Haus geerdet, Hub-Logo ============================================================ */ /* Produkt-Hero hell statt schwarz */ .iqhero { background: linear-gradient(180deg, #fff 0%, var(--cloud) 100%); color: var(--ink); } .iqhero h1 { color: var(--ink); } .iqhero .lead { color: var(--dim); } .iqhero .kicker { color: var(--faint); } .iqhero .kicker::before { background: var(--faint); } .iq-badge { border: 1px solid var(--line); box-shadow: var(--shadow-card); } .iqhero-steps { border-top-color: var(--line); } .iqhero-steps a { border-bottom-color: var(--line); } .iqhero-steps a:hover { background: rgba(23, 28, 36, 0.04); } .iqhero-steps .n { color: var(--faint); } .iqhero-steps .t { color: var(--ink); } .iqhero-steps .d { color: var(--dim); } .iqhero-media img { filter: drop-shadow(0 40px 55px rgba(10, 14, 20, 0.25)); } .iqhero .ht-rings { border-color: rgba(23, 28, 36, 0.08); } .iqhero .ht-rings::before { border-color: rgba(23, 28, 36, 0.06); } /* Haus geerdet: Bodenellipse statt schwebendem Schatten (fixt auch das Flackern) */ .hx-house { filter: none; } .hx-stage::after { content: ""; position: absolute; left: 50%; top: 78%; width: 46%; height: 5%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(10, 14, 20, 0.22), transparent 68%); filter: blur(3px); z-index: 1; pointer-events: none; } @media (max-width: 820px) { .hx-stage::after { display: none; } } /* Hub-Zentrum mit Johnson-Controls-Logo */ .hub-center .hc-logo { height: 24px; width: auto; margin: 0 auto 10px; display: block; } /* Radar-Anzeige: "Bis zu ... Funkreichweite" */ .radar-km .pre { font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--inv-dim); margin-bottom: 4px; } /* ============================================================ REVISION: ruhigere Flächen, feinere Leitungen ============================================================ */ /* Leitungen: durchgehende Haarlinien. Vorher zerlegte die Kombination aus vector-effect:non-scaling-stroke und pathLength das dasharray in willkürliche Striche – die Zeichen-Animation lief nie, es sah nur unruhig aus. Jetzt eine klare Linie, die eingeblendet wird. */ .gtrace { stroke: rgba(23, 28, 36, 0.3); stroke-width: 1px; stroke-dasharray: none; opacity: 0; transition: opacity 0.8s var(--ease); } .gtrace.show { opacity: 1; } .lid .gtrace, .hub-v2 .gtrace { stroke-width: 1.4px; } /* Sensorik-Diagramm: Haus steht auf dem Boden, Melder darüber */ @media (min-width: 821px) { .hx-stage { aspect-ratio: 16 / 10; } .hx-house { top: auto; bottom: 2%; width: 54%; transform: translateX(-50%); } .hx-stage::after { top: 95.5%; width: 46%; height: 5%; } .hx-node { width: 9%; } .hx-node.top .hx-pop { top: calc(100% + 12px); left: 50%; right: auto; transform: translate(-50%, 8px); } .hx-node.top:hover .hx-pop, .hx-node.top.open .hx-pop { transform: translate(-50%, 0); } } /* Hero-Headline auf zwei Zeilen: "PERFEKT INTEGRIERT." braucht Breite */ @media (min-width: 901px) { .hf-villa-copy { width: min(720px, 62vw); } .hf-villa-copy .lead { max-width: 560px; } } /* Konstellation: kein zusätzlicher Kreis hinter dem Panel */ .hflow .ht-rings { display: none; } /* Hero-Bild: Flachdach bleibt im Bild. object-fit:cover schneidet auf breiten, flachen Fenstern oben ab, und darüber liegt noch die 88 px hohe weiße Navigation. Der Ausschnitt ist deshalb oben ausgerichtet, und im Ruhezustand wird nicht mehr zusätzlich hineingezoomt. */ .hf-villa > img { object-position: 50% 0%; animation: kenburns 3.5s var(--ease) forwards; } @keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } } /* Dunkle Seiten-Heros: Motiv war nicht mehr erkennbar. Bild heller und farbiger, Verlauf nach unten schwerer, damit die weiße Schrift trotzdem sicher steht. */ .page-hero.ph-dark .ph-bg { filter: saturate(0.62) brightness(0.98); } .page-hero.ph-dark .ph-scrim { background: linear-gradient(180deg, rgba(13, 16, 21, 0.32) 0%, rgba(13, 16, 21, 0.5) 45%, rgba(13, 16, 21, 0.78) 100%), linear-gradient(100deg, rgba(13, 16, 21, 0.5) 0%, rgba(13, 16, 21, 0.18) 42%, transparent 62%); } /* Schrift steht auf dem helleren Bild über einen weichen Schatten */ .page-hero.ph-dark h1, .page-hero.ph-dark .lead, .page-hero.ph-dark .kicker { text-shadow: 0 1px 20px rgba(13, 16, 21, 0.6); } /* Bildstrecke "Die Gruppe bei der Arbeit" (Über uns) */ .gwork { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(34px, 4vw, 52px); } .gwork figure { margin: 0; } .gwork img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--radius); } .gwork figcaption { margin-top: 12px; font-family: var(--font-caps); font-size: 8.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); } @media (max-width: 900px) { .gwork { grid-template-columns: 1fr 1fr; gap: 14px; } } /* Längere Melder-Namen dürfen in der oberen Reihe umbrechen */ @media (min-width: 821px) { .hx-node.top .glabel { white-space: normal; line-height: 1.5; } } /* Bühne der Startseiten-Animation: die leeren Scroll-Schritte am Ende sind raus, die Choreografie läuft im selben Tempo weiter. */ .hflow { height: 360vh; } @media (max-width: 900px) { .hflow { height: 320vh; } } /* Produktkarten ohne Bild: reine Textblöcke, ganz klickbar */ .pgrid .pcard { padding: 34px 32px 30px; } .pgrid .pcard h3 { margin-top: 10px; } /* Sensoren fliegen seitlich ein und werden vor dem Zielpunkt langsamer. Die Bezeichnungen kommen erst einen Scroll-Schritt später. */ .gnode { transition: opacity 0.55s var(--ease), transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); } .gnode.from-left { transform: translateX(-320%); } .gnode.from-right { transform: translateX(320%); } .gnode.show { transform: none; } .gnode .glabel { opacity: 0; transition: opacity 0.6s var(--ease); } .hflow.labels-on .gnode.show .glabel { opacity: 1; } /* Craftum-Funnel: rendert in einem Shadow-Root, bringt eigene Gestaltung mit. Die Karte gibt nur den Rahmen und lässt dem Widget die volle Breite. */ .funnel-embed { padding: 0; overflow: hidden; } .funnel-embed craftum-funnel { display: block; width: 100%; } /* ============================================================ MOBIL: Konstellation um die Zentrale ============================================================ */ .grow-lines-m { display: none; } @media (max-width: 720px) { /* Bühne nutzt die Höhe statt in einem flachen Streifen zu kleben */ .hf-canvas { aspect-ratio: auto; height: min(72svh, 620px); } /* Zentrale kleiner, damit seitlich Platz für die Leitungen bleibt – und auf der Höhe der mittleren Leitungen statt der Bühnenmitte. */ .hf-panelwrap { width: 40%; top: 43.5%; } /* Zwei schmale Spalten mit Abstand zur Zentrale */ .hflow .gnode { width: 20% !important; } .hflow .gnode.from-left { left: 1% !important; } .hflow .gnode.from-right { left: 79% !important; } /* Sensoren größer. Das Bild ist 74 % der 20 %-Spalte, also 14,8vw breit und – wegen aspect-ratio 1/1 – ebenso hoch. Die Zeilenpositionen ziehen davon die halbe Bildhöhe (7,4vw) ab, damit die Sensormitte unabhängig von der Gerätegröße genau auf der Leitung sitzt. */ .hflow .gnode img { width: 74%; display: block; margin-inline: auto; } .hflow .gnode.r1 { top: calc(11.5% - 7.4vw) !important; } .hflow .gnode.r2 { top: calc(43.5% - 7.4vw) !important; } .hflow .gnode.r3 { top: calc(75.4% - 7.4vw) !important; } .hflow .gnode .glabel { white-space: nowrap; font-size: 7px; letter-spacing: 0.1em; margin-top: 6px; } /* Leitungen: die für den Desktop passen hier nicht */ .hflow .grow-lines { display: none; } .hflow .grow-lines-m { display: block; } /* Bildunterschrift bricht um statt aus der Seite zu laufen */ .grow-tagline { white-space: normal; width: min(86vw, 400px); text-align: center; font-size: 11px; letter-spacing: 0.2em; line-height: 1.7; bottom: 5vh; } /* dieselbe Ruhe wie am Desktop: kein Schweben, keine Pulsringe */ .gnode.show img, .gnode.show::before { animation: none !important; } } /* ============================================================ Einheitlicher Abstand zwischen Überschrift und Fließtext. Als margin-top am folgenden Element: fällt mit vorhandenen margin-bottom der Überschriften zusammen (der größere Wert gewinnt), verdoppelt also nichts. ============================================================ */ .display + p, .display + .lead, .h1 + p, .h1 + .lead, .h2 + p, .h2 + .lead, .h3 + p, .h3 + .lead, h1 + p, h2 + p, h3 + p, h4 + p, h2 + .lead, h3 + .lead { margin-top: clamp(20px, 1.8vw, 28px); } /* Produkte-Hero: Foto im Hintergrund, Text links davor */ .iqhero { background: var(--paper); } .iqhero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .iqhero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 34%, rgba(255, 255, 255, 0.45) 64%, rgba(255, 255, 255, 0.12) 100%); } .iqhero .wrap { position: relative; z-index: 2; } .iqhero-grid { grid-template-columns: minmax(0, 640px); } .iqhero h1, .iqhero .h1 { color: var(--ink); } @media (max-width: 900px) { .iqhero-veil { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 58%, rgba(255, 255, 255, 0.55) 100%); } } /* Nacht-Hero: Box unter der Zentrale wird im Alarmfall rot */ .nighthero.alarm .wide-badge .wb-status { color: #fff; border-color: rgba(226, 62, 52, 0.85); background: rgba(146, 24, 18, 0.82); } .nighthero.alarm .wide-badge .wb-status .dot { background: #ff4136; box-shadow: 0 0 10px rgba(255, 65, 54, 0.95); } /* ============================================================ Über uns: Gruppen-Kachel und Zahlen als ein Element ============================================================ */ .pv-block { border: 1px solid var(--line); background: #fff; } .pv-block .pv-card { border: 0; padding-bottom: clamp(22px, 3vw, 38px); } .pv-block .gstats { border-bottom: 0; } .pv-cta { margin-top: 26px; } /* Kachel fährt beim Scrollen von unten herein */ .reveal-up { transform: translateY(54px); } .reveal-up.in { transform: none; } /* Weniger Luft zum Hero und zum folgenden Block */ .pv-section { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 92px); } /* Service-Hero: Bildmarke ruhig stehen lassen */ .pm-hero img { width: min(220px, 60%); margin-inline: auto; display: block; animation: none; } /* ============================================================ PowerManage-Darstellung: weiße Kacheln, zarte Linien, Produktbild in der Mitte ============================================================ */ .hub-v2 .hub-node { background: #fff; border-color: rgba(255, 255, 255, 0.9); } .hub-v2 .hub-node .t { color: var(--ink); } .hub-v2 .hub-node .d { color: var(--dim); } /* gleicher Duktus wie die Sensor-Leitungen, nur auf dunklem Grund */ .hub-v2 .gtrace { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1px; } .hub-v2 .hub-center { background: none; box-shadow: none; animation: none; padding: 0; width: min(340px, 40%); } .hub-v2 .hub-center img { width: 100%; display: block; } /* Mobil: alles untereinander, nichts überlappt */ @media (max-width: 800px) { .hub-v2 .hub-stage { grid-template-columns: 1fr; gap: 14px; } .hub-v2 .hub-center { width: min(320px, 80%); margin-inline: auto; } .hub-v2 .hub-node { opacity: 1; transform: none; } } /* ============================================================ Sensorik-Darstellung: Haus steht, Melder fliegen ein ============================================================ */ @media (min-width: 821px) { .hx-node { opacity: 0; transition: opacity 0.5s var(--ease), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .hx-node.left { transform: translateX(-280%); } .hx-node.right { transform: translateX(280%); } .hx-node.top { transform: translateY(-260%); } .hx-node.show { opacity: 1; transform: none; } } @media (max-width: 820px) { .hx-node { opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } .hx-node.show { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hx-node { opacity: 1 !important; transform: none !important; } } /* Sensorik-Bühne mobil: füllt den Container statt 96vw, sonst schiebt sie sich um den Innenabstand des Wraps über den Bildschirmrand */ @media (max-width: 820px) { .hx-stage { width: 100%; } .hx-node .glabel { letter-spacing: 0.16em; } } /* ============================================================ MOBIL-DURCHGANG: gefundene Überläufe ============================================================ */ /* Rechtsseiten: lange Überschriften brachen nicht um und zogen die Seite 54 px in die Breite */ @media (max-width: 720px) { .legal h1 { font-size: clamp(19px, 6.4vw, 30px); letter-spacing: 0.08em; overflow-wrap: break-word; hyphens: auto; } .legal h2 { overflow-wrap: break-word; hyphens: auto; } } /* PowerManage-Bühne füllt den Container statt 94vw – sonst ragt sie um den Innenabstand des Wraps hinaus */ @media (max-width: 800px) { .hub-stage { width: 100%; } } /* Nacht-Hero: Statusbox unter der Zentrale lief rechts hinaus */ @media (max-width: 720px) { .wide-badge { width: min(210px, 54vw); right: 5%; } .wide-badge .wb-status { font-size: 7px; letter-spacing: 0.16em; gap: 7px; max-width: 100%; } /* Die Zielerfassung sitzt auf einem Bildpunkt, der im schmalen Zuschnitt aus dem Bild fällt – dann lieber nicht zeigen. */ .nh-target { display: none; } } /* Kontaktkacheln: der globale Abstand Überschrift-zu-Text gilt hier nicht, sonst rutschen E-Mail, Erreichbarkeit und Einsatzgebiet nach unten, während die Telefonnummer (ohne

) oben bleibt. */ .ci h4 + p, .ci h4 + a { margin-top: 6px; } .ci h4 + a { display: block; } .ci p { margin-top: 6px; } /* ============================================================ Nachbesserungen aus den neuen Anweisungen ============================================================ */ /* IQ Pro: Überschrift stand zu weit über dem Text */ .lid-call h4 + p { margin-top: 6px; } /* Service-Hero: der Schlagschatten erzeugte einen grauen Rand unter der Marke */ .pm-hero img { filter: none; } /* PowerManage: Titel und Beschreibung standen ohne Umbruch nebeneinander */ .hub-node .t, .hub-node .d { display: block; } /* PowerManage: kompakter, weniger Luft zwischen Überschrift und Blöcken */ .hub-v2 .section-head { margin-bottom: clamp(26px, 3vw, 40px); } .hub-v2 .hub-stage { aspect-ratio: 16 / 8.4; } /* PowerManage-Darstellung mobil nicht anzeigen */ @media (max-width: 800px) { .hub-v2 .hub-stage { display: none; } } /* Über uns: Hero so tief wie auf der Gewerbeseite */ @media (min-width: 901px) { .page-hero.ph-deep { min-height: 704px; display: flex; align-items: center; } .page-hero.ph-deep > .wrap { width: 100%; } } /* ============================================================ Sensorik mobil: Antippen öffnet die Beschreibung als Feld, das die übrigen Sensoren verdeckt. Schließen über das Kreuz oben rechts oder durch nochmaliges Antippen. Auf dem Desktop bleibt die Anzeige beim Überfahren unberührt. ============================================================ */ .hx-pop-name { display: none; } @media (max-width: 820px) { .hx-mobilegrid { position: relative; } /* Der Einflug lässt eine Transformation auf der Kachel zurück. Die macht die Kachel zum Bezugsrahmen, das Feld wäre dann nur so groß wie sie. Für die geöffnete Kachel wird sie deshalb aufgehoben, damit sich das Feld über das ganze Raster legt. */ /* Die Kacheln sind Raster-Elemente mit z-index 5 und bilden damit eigene Stapelebenen – auch ohne Positionierung. Die geöffnete Kachel muss darüber liegen, sonst zeichnen die nachfolgenden Kacheln über das Feld. */ .hx-node.open { z-index: 30; transform: none !important; transition: none !important; } .hx-node .hx-pop { display: none; } .hx-node.open .hx-pop { display: flex; flex-direction: column; justify-content: flex-start; position: absolute; inset: 0; z-index: 20; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(10, 14, 20, 0.28); padding: 52px clamp(20px, 6vw, 34px) 34px; text-align: left; animation: hxpop 0.32s var(--ease) both; } /* Schließen-Kreuz oben rechts */ .hx-node.open .hx-pop::after { content: "×"; position: absolute; top: 8px; right: 14px; font-size: 30px; line-height: 1; font-weight: 300; color: var(--dim); } .hx-node.open .hx-pop-name { display: block; font-family: var(--font-caps); font-size: 9px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; } .hx-node.open .hx-pop h4 { font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .hx-node.open .hx-pop li { font-size: 13px; line-height: 1.6; } } @keyframes hxpop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================================ Lösungen-Hero mobil: ruhiges Standbild statt Szenerie Desktop bleibt unverändert – hier greift nur die Mobilansicht. ============================================================ */ @media (max-width: 900px) { .nighthero { height: auto; } .nighthero-sticky { position: relative; height: auto; display: block; } /* Bildband im Seitenverhältnis des Ausschnitts – so wird seitlich nichts abgeschnitten und die ganze Familie bleibt im Bild. */ .nighthero-sticky::before { content: ""; display: block; width: 100%; aspect-ratio: 0.72; background: url("../img/loesungen-hero-mobil.jpg") 50% 50% / cover no-repeat; } /* Nachtbild, Einbrecher-Erfassung, Alarmschein, Panel und der Abdunkler über dem Bild entfallen */ .nighthero .nighthero-sticky > img, .nighthero .nh-target, .nighthero .nh-alarmglow, .nighthero .nh-scrim, .nighthero .wide-badge { display: none !important; } /* Überschrift und Text stehen unter dem Bild auf dunklem Grund, damit die Schrift nicht auf den Gesichtern liegt. */ .nighthero .nh-copy { position: static; transform: none; width: auto; padding: clamp(30px, 6vw, 44px) 24px clamp(44px, 9vw, 64px); } } /* ============================================================ Mobil: grauer Kasten um freigestellte Bilder beim ersten Anzeigen ------------------------------------------------------------ Ursache ist "filter: drop-shadow" auf PNGs mit Transparenz. Mobile Safari legt dafür eine eigene Compositing-Ebene an und zeichnet deren Untergrund kurzzeitig deckend – sichtbar als grauer/weißer Kasten in der Größe des Bildes, der nach dem Neuzeichnen verschwindet. Auf dem Desktop bleibt der Schlagschatten unverändert erhalten. ============================================================ */ @media (max-width: 900px) { .ht-panel, .gnode img, .monitor-media.clean img, .ph-media.clean img, .pm-hero img { filter: none; } /* Ebenen nach der Einblendung wieder freigeben, statt sie dauerhaft zu halten – weniger Compositing-Ebenen, weniger Neuzeichnen. */ .reveal.in, .reveal-scale.in, .gnode.show { will-change: auto; } } /* Mobilmenü: erster Eintrag saß direkt unter dem Logo */ @media (max-width: 900px) { .mobile-menu { padding-top: calc(var(--nav-h) + 30px); } } /* Footer-Logo: feste Höhe bei begrenzter Spaltenbreite hat das Logo in die Länge gezogen. Jetzt begrenzen beide Achsen, das Seiten- verhältnis bleibt erhalten. */ footer .brand-img { width: auto; height: auto; max-width: 100%; max-height: 74px; } /* Service mobil: der einleitende Absatz auf dunklem Grund war kaum lesbar. Er entfällt, das Protokoll rückt näher an die Überschrift. */ @media (max-width: 900px) { .hub-v2 .section-head .lead { display: none; } .hub-v2 .section-head { margin-bottom: 22px; } } /* ============================================================ Index-Hero mobil: weniger Inhalt, tiefer gesetzt, offenerer Bildausschnitt. Desktop bleibt unverändert. ============================================================ */ @media (max-width: 900px) { /* Zweiter Button entfällt – der Hero wirkte überladen */ .hf-cta-systeme { display: none; } /* Scroll-Hinweis entfällt, er säße sonst auf dem Button */ .hf-villa .hf-hint-v { display: none; } /* Bild oben als Band, Text darunter auf schwarzem Grund – wie auf der Lösungen-Seite. Dadurch ist das Haus deutlich breiter zu sehen und die Schrift liegt nicht mehr im Bild. */ .hf-villa { background: var(--night); display: flex; flex-direction: column; /* Die Kopfzeile steht fest über dem Hero – ohne diesen Abstand läge das obere Drittel des Bildbands dahinter. */ padding-top: var(--nav-h); } /* Das Band ist 1,55 breit wie hoch. "cover" zeigt davon 87 % der Bildbreite – die Fassade liegt bei 10–88 % und passt vollständig. */ .hf-villa::before { content: ""; display: block; flex: none; width: 100%; aspect-ratio: 1.55; background: url("../img/stock-villa-day.jpg") 50% 50% / cover no-repeat; } .hf-villa > img, .hf-villa .hf-villa-scrim { display: none; } .hf-villa-copy { position: static; left: auto; bottom: auto; transform: none; width: auto; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 6vw, 40px) 24px clamp(30px, 7vw, 46px); text-align: center; } .hf-villa-copy .display, .hf-villa-copy .lead { text-shadow: none; } .hf-ctas { margin-top: 28px; } } /* ============================================================ Herstellerangaben mobil als durchlaufendes Banner Auf dem Desktop bleibt die verteilte Zeile unverändert; die zweite Fassung des Inhalts ist dort ausgeblendet. ============================================================ */ .trustline .tl-dup { display: none; } @media (max-width: 900px) { .trustline { overflow: hidden; padding: 22px 0; } .trustline .tl-viewport { display: flex; width: max-content; animation: tlscroll 26s linear infinite; } .trustline .tl-track { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: auto; max-width: none; padding: 0; gap: 38px; margin-right: 38px; } .tl-dup { display: flex; } .trustline .tl-track span { white-space: nowrap; } .trustline img { height: 26px; } } @keyframes tlscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .trustline .tl-viewport { animation: none; } }