/* ── Raumatlas — Seiten-Chrome (nur v5): Anker-Nav, Back-to-top, Rechts-Modals, Cookie-Banner. Isoliert, damit ältere Versionen unberührt bleiben. Tokens aus landing.css. ─────────────────────── */ /* Gemeinsame Sichtbarkeits-Logik: erscheint erst, wenn das Intro durch ist. bekommt dann die Klasse .intro-done. */ .site-nav, .to-top { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease, transform .5s ease; pointer-events: none; } body.intro-done .site-nav, body.intro-done .to-top { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Anker-Nav (rechts, vertikal) ───────────────────────────────── */ .site-nav { position: fixed; top: 50%; right: 28px; transform: translateY(-50%) translateX(8px); z-index: 40; display: flex; flex-direction: column; gap: 2px; } body.intro-done .site-nav { transform: translateY(-50%) translateX(0); } .site-nav a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 6px 2px; text-decoration: none; color: var(--quiet); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } .site-nav .nv-label { opacity: 0; transform: translateX(6px); transition: opacity .28s ease, transform .28s ease, color .28s ease; white-space: nowrap; } .site-nav .nv-tick { width: 22px; height: 1.5px; background: var(--num); flex: none; transition: width .28s ease, background .28s ease; } .site-nav a:hover .nv-label, .site-nav a:focus-visible .nv-label, .site-nav a.active .nv-label { opacity: 1; transform: translateX(0); } .site-nav a:hover .nv-tick, .site-nav a:focus-visible .nv-tick { width: 34px; background: var(--text); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--text); } .site-nav a.active .nv-tick { width: 40px; background: var(--accent); } .site-nav a.active { color: var(--accent); } /* ── Sticky-CTA „Auf die Warteliste" (erscheint nach dem Intro) ──── */ .cta-sticky { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(14px); z-index: 45; display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 999px; box-shadow: 0 12px 32px -10px color-mix(in oklab, var(--accent) 70%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s ease, transform .45s ease, box-shadow .25s ease; } body.intro-done .cta-sticky { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } body.intro-done .cta-sticky.cta-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(14px); } .cta-sticky:hover { box-shadow: 0 16px 38px -10px color-mix(in oklab, var(--accent) 80%, transparent); } .cta-sticky .cta-arrow { transition: transform .25s ease; } .cta-sticky:hover .cta-arrow { transform: translateX(3px); } /* B6 — ein bewusster Akzent-Moment im Hero-Finale */ .accent-dot { color: var(--accent); } /* B3 — genau EIN Produkt-Mockup (App-Screenshot im Browser-Rahmen) */ .app-shot { margin: 4px 0 60px; } .app-frame { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: 0 32px 84px -44px rgba(29, 29, 27, 0.28); } .app-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--hairline); } .app-dot { width: 11px; height: 11px; border-radius: 50%; background: #d8d6cc; flex: none; } .app-url { margin-left: 12px; font-size: 12px; color: var(--quiet); letter-spacing: 0.02em; } .app-frame img { display: block; width: 100%; height: auto; } .app-shot figcaption { margin-top: 16px; text-align: center; font-size: 13px; color: var(--quiet); } @media (max-width: 600px) { .app-bar { padding: 9px 12px; gap: 6px; } .app-url { margin-left: 8px; } } /* ── Back-to-top ────────────────────────────────────────────────── */ .to-top { position: fixed; bottom: 26px; right: 26px; z-index: 40; width: 46px; height: 46px; border: 1.5px solid var(--hairline); background: var(--bg); border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text); transition: border-color .25s ease, color .25s ease, transform .25s ease, opacity .5s ease, visibility .5s ease; } .to-top:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .to-top svg { width: 18px; height: 18px; display: block; } /* ── Modals (Impressum / Datenschutz / Kontakt) ─────────────────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 18, 0.42); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .modal-backdrop.open { opacity: 1; visibility: visible; } .modal { position: relative; background: var(--bg); max-width: 620px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 48px 52px 44px; border: 1px solid var(--hairline); transform: translateY(12px); transition: transform .3s ease; } .modal-backdrop.open .modal { transform: translateY(0); } .modal h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; } .modal .modal-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--eyebrow); margin-bottom: 14px; } .modal p { font-size: 15px; line-height: 1.62; color: var(--body); margin-bottom: 14px; } .modal p:last-child { margin-bottom: 0; } .modal a { color: var(--accent); text-decoration: none; } .modal a:hover { text-decoration: underline; } .modal dl { margin: 4px 0 14px; } .modal dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--quiet); margin-top: 14px; } .modal dd { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 3px 0 0; } .modal .modal-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--quiet); } .modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: none; background: none; cursor: pointer; color: var(--quiet); display: grid; place-items: center; border-radius: 50%; transition: background .2s ease, color .2s ease; } .modal-close:hover { background: var(--bg-alt); color: var(--text); } .modal-close svg { width: 16px; height: 16px; } /* ── Cookie-Banner ──────────────────────────────────────────────── */ .cookie-bar { position: fixed; left: 22px; bottom: 22px; z-index: 50; max-width: 380px; background: var(--bg); border: 1px solid var(--hairline); box-shadow: 0 12px 40px rgba(20, 20, 18, 0.12); padding: 22px 24px 20px; transform: translateY(140%); transition: transform .45s cubic-bezier(.2,.7,.2,1); } .cookie-bar.show { transform: translateY(0); } .cookie-bar h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; } .cookie-bar p { font-size: 13px; line-height: 1.55; color: var(--body); margin-bottom: 16px; } .cookie-bar p a { color: var(--accent); text-decoration: none; } .cookie-bar p a:hover { text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; } .cookie-actions button { flex: 1; font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer; border: 1.5px solid var(--text); background: none; color: var(--text); transition: background .2s ease, color .2s ease, border-color .2s ease; } .cookie-actions .ck-accept { background: var(--text); color: var(--bg); } .cookie-actions .ck-accept:hover { background: var(--accent); border-color: var(--accent); } .cookie-actions .ck-essential:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 600px) { .site-nav { display: none; } .to-top { bottom: 18px; right: 18px; } .cta-sticky { bottom: 18px; left: 18px; transform: translateX(0) translateY(14px); padding: 12px 20px; font-size: 14px; } body.intro-done .cta-sticky { transform: translateX(0) translateY(0); } body.intro-done .cta-sticky.cta-hidden { transform: translateX(0) translateY(14px); } .cookie-bar { left: 14px; right: 14px; bottom: 14px; max-width: none; } .modal { padding: 40px 26px 34px; } }