/* ── Raumatlas Landing — Sections 1–3 ───────────────────────────── Tokens aus dem Handoff-Design-System. Akzent + Hero-BG + Animationen werden via Tweaks-Panel auf gesteuert: html[data-hero-bg="aus|grundriss|raster"] html[data-anim="on|off"] --accent, --bg-strength ─────────────────────────────────────────────────────────────────── */ :root { --text: #1d1d1b; --text-2: #2a2a26; --body: #555; --quiet: #777; --muted: #aaa; --eyebrow: #b0b0a8; --num: #c8c8c0; --accent: #2d6099; --bg: #ffffff; --bg-alt: #faf9f5; --hairline: #e8e7e0; --bg-strength: 0.5; --ampel-gruen: oklch(0.66 0.12 152); --ampel-gelb: oklch(0.78 0.12 82); --ampel-rot: oklch(0.6 0.13 30); --font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { max-width: 960px; margin: 0 auto; } section, header.hero { padding: 96px 64px; } .eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--eyebrow); } /* ── 1 · Hero ──────────────────────────────────────────────────── */ .hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; background: var(--bg); } .hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: var(--bg-strength); } .hero-bg svg { position: absolute; display: none; } html[data-hero-bg="grundriss"] .hero-bg svg.bg-grundriss { display: block; } html[data-hero-bg="raster"] .hero-bg svg.bg-raster { display: block; } .bg-grundriss { right: -120px; top: 50%; transform: translateY(-50%); width: min(820px, 60vw); height: auto; } .bg-raster { inset: 0; width: 100%; height: 100%; } .hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; } .wordmark { width: min(520px, 78vw); } .wordmark svg { display: block; width: 100%; height: auto; } .wordmark .st0 { fill: var(--text); } .wordmark .st1 { fill: var(--bg); } .wordmark .st2 { fill: none; } .slogan { margin-top: 44px; font-size: clamp(48px, 7.5vw, 58px); font-weight: 500; letter-spacing: -0.022em; line-height: 1.08; color: var(--text); } .promise { margin-top: 18px; font-size: clamp(20px, 2.2vw, 23px); font-weight: 400; color: var(--body); } .promise strong { font-weight: 600; color: var(--text-2); } /* Marquee */ .marquee { position: relative; margin-top: 56px; width: min(720px, 86vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; gap: 0; animation: marquee 38s linear infinite; } .marquee-track span { white-space: nowrap; font-size: 15px; color: var(--quiet); letter-spacing: 0.01em; } .marquee-track .dot { color: var(--muted); padding: 0 14px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } html[data-anim="off"] .marquee-track { animation-play-state: paused; } /* ── Hero · Live-Grundriss (v3) ───────────────────────── */ .hero-plan { margin: 0; } .hero-plan svg { display: block; width: 100%; height: auto; } .plan-lines { fill: none; stroke: #cfcdc2; stroke-width: 1.5; } .plan-lines .dim { stroke: #e0ded4; } .room { fill: var(--accent); fill-opacity: 0; transition: fill-opacity 0.7s ease; cursor: pointer; } .room.active { fill-opacity: 0.08; } .room-chip { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 13px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 999px; box-shadow: 0 10px 28px -14px rgba(29, 29, 27, 0.35); font-size: 12.5px; color: var(--text-2); letter-spacing: 0.01em; opacity: 0; transition: opacity 0.55s ease, transform 0.55s ease; pointer-events: none; } .room-chip.active { opacity: 1; transform: translate(-50%, calc(-50% - 6px)); } .room-chip .chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .room-chip .chip-dot.gruen { background: var(--ampel-gruen); } .room-chip .chip-dot.gelb { background: var(--ampel-gelb); } html[data-anim="off"] .room-chip { opacity: 0 !important; } html[data-anim="off"] .room { fill-opacity: 0 !important; } /* Layout-Variante „Live“: zweispaltig, Text links, Plan rechts */ html[data-hero="live"] .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; text-align: left; max-width: 1280px; margin: 0 auto; } html[data-hero="live"] .hero-inner { align-items: flex-start; } html[data-hero="live"] .wordmark { width: min(420px, 64vw); } html[data-hero="live"] .marquee { width: 100%; } html[data-hero="live"] .hero-plan { position: relative; opacity: var(--bg-strength); } /* Layout-Variante „Ruhig“: zentriert, Plan als Hintergrund rechts */ html[data-hero="ruhig"] .hero-plan { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: min(820px, 60vw); opacity: calc(var(--bg-strength) * 0.55); pointer-events: none; } html[data-hero="ruhig"] .room-chip { display: none; } html[data-hero="ruhig"] .room { fill-opacity: 0 !important; } /* Entrance: Plan zeichnet sich, Slogan-Wörter steigen auf */ .plan-lines line, .plan-lines rect, .plan-lines path { stroke-dasharray: 1; stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { html[data-anim="on"] .plan-lines line, html[data-anim="on"] .plan-lines rect, html[data-anim="on"] .plan-lines path { animation: planDraw 1.5s ease-out backwards; } html[data-anim="on"] .plan-lines :nth-child(2) { animation-delay: 0.25s; } html[data-anim="on"] .plan-lines :nth-child(3) { animation-delay: 0.35s; } html[data-anim="on"] .plan-lines :nth-child(4) { animation-delay: 0.45s; } html[data-anim="on"] .plan-lines :nth-child(5) { animation-delay: 0.55s; } html[data-anim="on"] .plan-lines :nth-child(6) { animation-delay: 0.6s; } html[data-anim="on"] .plan-lines :nth-child(7) { animation-delay: 0.7s; } html[data-anim="on"] .plan-lines :nth-child(8) { animation-delay: 0.75s; } html[data-anim="on"] .plan-lines :nth-child(9) { animation-delay: 0.85s; } html[data-anim="on"] .plan-lines :nth-child(10) { animation-delay: 0.95s; } html[data-anim="on"] .plan-lines :nth-child(n+11) { animation-delay: 1.05s; } html[data-anim="on"] .plan-lines .dim { animation-delay: 1.3s; } html[data-anim="on"] .hero-enter > * { animation: riseIn 0.7s ease-out backwards; } html[data-anim="on"] .hero-enter > :nth-child(1) { animation-delay: 0.05s; } html[data-anim="on"] .hero-enter > :nth-child(2) { animation-delay: 0.2s; } html[data-anim="on"] .hero-enter > :nth-child(3) { animation-delay: 0.35s; } html[data-anim="on"] .hero-enter > :nth-child(4) { animation-delay: 0.55s; } } @keyframes planDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ── 2 · Vision-Manifest ───────────────────────────────────────── */ .manifest { background: var(--bg-alt); } .manifest .container { max-width: 760px; } .manifest h2 { margin-top: 28px; font-size: clamp(30px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.15; color: var(--text); } .manifest p { margin-top: 28px; font-size: clamp(22px, 2.4vw, 26px); font-weight: 400; line-height: 1.45; color: var(--text-2); text-wrap: pretty; } .manifest p.closing { font-weight: 500; } /* ── 3 · Bausteine ─────────────────────────────────────────────── */ .bausteine { background: var(--bg); } .bs-list { list-style: none; margin-top: 56px; display: flex; flex-direction: column; gap: 64px; } .bs { display: grid; grid-template-columns: 88px 1fr 300px; gap: 32px; align-items: center; } .bs-num { font-size: 56px; font-weight: 300; line-height: 1; color: var(--num); font-variant-numeric: tabular-nums; transition: color 0.35s ease; align-self: start; } .bs:hover .bs-num { color: var(--accent); } .bs-text { align-self: start; } .bs-text h3 { font-size: clamp(24px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; color: var(--text); } .bs-text p { margin-top: 14px; font-size: 18px; font-weight: 400; line-height: 1.55; color: var(--body); text-wrap: pretty; } .bs-text .connects { margin-top: 16px; font-size: 13px; color: var(--quiet); letter-spacing: 0.02em; } .bs-text .connects b { font-weight: 600; color: var(--quiet); } /* Visualisierungen */ .bs-viz { display: flex; justify-content: center; } .bs-viz svg { display: block; overflow: visible; max-width: 100%; height: auto; } .viz-hairline { stroke: var(--hairline); } .viz-node { fill: var(--bg-alt); stroke: var(--hairline); transition: stroke 0.35s ease; } .viz-label { font-family: var(--font); font-size: 11px; fill: var(--body); } .viz-caption { font-family: var(--font); font-size: 10px; fill: var(--quiet); letter-spacing: 0.06em; text-transform: uppercase; } .bs:hover .viz-node { stroke: var(--accent); } /* B02 — Sync-Pfeile */ .viz-flow { stroke: var(--muted); stroke-width: 1.5; fill: none; stroke-dasharray: 4 5; } html[data-anim="on"] .bs:hover .viz-flow.flow-hin { animation: flowHin 1.2s linear infinite; } html[data-anim="on"] .bs:hover .viz-flow.flow-zurueck { animation: flowZurueck 1.2s linear infinite; } .bs:hover .viz-flow { stroke: var(--accent); } .viz-arrowhead { fill: var(--muted); transition: fill 0.35s ease; } .bs:hover .viz-arrowhead { fill: var(--accent); } @keyframes flowHin { to { stroke-dashoffset: -18; } } @keyframes flowZurueck { to { stroke-dashoffset: 18; } } /* B03 — Ampel */ .dot-gruen { fill: var(--ampel-gruen); } .dot-gelb { fill: var(--ampel-gelb); } .dot-rot { fill: var(--ampel-rot); } .dot-leer { fill: none; stroke: var(--hairline); stroke-width: 1.5; } /* B04 — Infrastruktur-Chips */ .infra-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 280px; } .infra-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; color: var(--body); background: var(--bg); transition: border-color 0.3s ease, color 0.3s ease; } .infra-chip.selected { border-color: var(--accent); color: var(--text); } .infra-chip.selected::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .bs:hover .infra-chip:not(.selected) { border-color: #d8d6cc; } /* B05 — Phone */ .phone { width: 168px; height: 336px; border: 1.5px solid var(--text); border-radius: 26px; background: var(--bg); position: relative; padding: 14px 12px; box-shadow: 0 24px 48px -32px rgba(29, 29, 27, 0.25); } .phone::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 3px; background: var(--hairline); } .phone svg { width: 100%; height: 100%; } .pin-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; } html[data-anim="on"] .bs:hover .pin-ring { animation: pinPulse 1.8s ease-out infinite; } @keyframes pinPulse { 0% { opacity: 0.7; r: 7; } 70% { opacity: 0; r: 18; } 100% { opacity: 0; r: 18; } } /* ── 4 · Für wen ───────────────────────────────────────────────── */ .fuerwen { background: var(--bg-alt); } .persona-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .persona { background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px; padding: 32px; transition: border-color 0.35s ease; } .persona:hover { border-color: var(--accent); } .persona-head { display: flex; align-items: center; gap: 14px; } .persona-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--body); flex-shrink: 0; } .persona h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .persona dl { margin: 20px 0 0; display: flex; flex-direction: column; gap: 16px; } .persona dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--eyebrow); } .persona dd { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--body); text-wrap: pretty; } .persona dd.loesung { color: var(--text-2); } /* ── 3b · Souveränität (Self-Host / Trust) ─────────────────── */ .souv { background: #1b1b19; color: #f4f3ef; } .souv .eyebrow { color: #8f8f86; } .souv h2 { margin-top: 28px; max-width: 820px; font-size: clamp(30px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; color: #fff; text-wrap: balance; } .souv .souv-lead { margin-top: 24px; max-width: 640px; font-size: clamp(18px, 2.1vw, 22px); font-weight: 400; line-height: 1.5; color: #d7d6d0; text-wrap: pretty; } .souv-hosting { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; } .souv .infra-chip { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: #d7d6d0; } .souv .infra-chip.selected { border-color: var(--accent); color: #fff; } .souv .infra-chip.selected::before { background: var(--accent); } .souv-points { list-style: none; margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .souv-points li { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .souv-points h3 { font-size: 16px; font-weight: 600; color: #fff; } .souv-points p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #b0afa8; text-wrap: pretty; } /* ── 4b · Branchen ──────────────────────────────────── */ .branchen { margin-top: 80px; } .branchen-h { margin-top: 16px; max-width: 740px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.014em; line-height: 1.2; color: var(--text); text-wrap: pretty; } .branchen-sub { margin-top: 16px; max-width: 660px; font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: pretty; } .branchen-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .branche { background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; transition: border-color 0.35s ease; } .branche:hover { border-color: var(--accent); } .branche h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .branche p { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--body); text-wrap: pretty; } .branche .b-label { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--eyebrow); } .branche .b-mit .b-label { color: var(--accent); } /* ── 5 · Wer steht dahinter ────────────────────────────────────── */ .dahinter { background: var(--bg); } .dahinter .container { max-width: 760px; } .dahinter p { margin-top: 28px; font-size: clamp(22px, 2.4vw, 26px); font-weight: 400; line-height: 1.45; color: var(--text-2); text-wrap: pretty; } .dahinter p b { font-weight: 600; } /* ── 6 · Waitlist ──────────────────────────────────────────────── */ .waitlist { background: var(--bg-alt); } .waitlist .container { max-width: 640px; text-align: center; } .waitlist h2 { margin-top: 28px; font-size: clamp(30px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.018em; color: var(--text); } .waitlist .sub { margin-top: 16px; font-size: 18px; color: var(--body); } .waitlist-form { margin-top: 40px; } .wl-row { display: flex; gap: 12px; justify-content: center; } .wl-row input[type="email"] { flex: 1; max-width: 360px; padding: 14px 18px; font-family: var(--font); font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--hairline); border-radius: 8px; outline: none; transition: border-color 0.25s ease; } .wl-row input[type="email"]:focus { border-color: var(--accent); } .wl-row input[type="email"].invalid { border-color: var(--ampel-rot); } .wl-row button { padding: 14px 26px; font-family: var(--font); font-size: 16px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 8px; cursor: pointer; transition: filter 0.25s ease; } .wl-row button:hover { filter: brightness(1.08); } .wl-consent { margin: 20px auto 0; max-width: 480px; display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.5; color: var(--quiet); } .wl-consent input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); } .wl-consent.invalid { color: var(--ampel-rot); } .wl-consent a { color: inherit; text-decoration: underline; } .wl-error { margin-top: 14px; font-size: 14px; color: var(--ampel-rot); min-height: 1.4em; } .wl-success { display: none; margin-top: 40px; font-size: clamp(20px, 2.2vw, 23px); color: var(--text-2); } .wl-success .ok-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ampel-gruen); margin-right: 10px; } .waitlist-form[data-state="done"] .wl-row, .waitlist-form[data-state="done"] .wl-consent, .waitlist-form[data-state="done"] .wl-error { display: none; } .waitlist-form[data-state="done"] + .wl-success { display: block; } .wl-pricing { margin-top: 30px; font-size: 14px; color: var(--quiet); } /* Honeypot — für Menschen unsichtbar, nur Bots füllen es aus */ .wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── 7 · Footer ────────────────────────────────────────────────── */ .footer { background: var(--bg); border-top: 1px solid var(--hairline); padding: 40px 64px; } .footer .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer .colophon { font-size: 13px; color: var(--quiet); } .footer nav { display: flex; gap: 24px; } .footer nav a { font-size: 13px; color: var(--quiet); text-decoration: none; transition: color 0.25s ease; } .footer nav a:hover { color: var(--text); } /* ── Scroll-Reveal ─────────────────────────────────────────────── */ html[data-anim="on"] .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } html[data-anim="on"] .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html[data-anim] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee-track { animation: none !important; } .viz-flow, .pin-ring { animation: none !important; } html { scroll-behavior: auto; } } @media print { html[data-anim] .reveal { opacity: 1 !important; transform: none !important; } .hero { min-height: auto; } } /* ── Responsive ────────────────────────────────────────────────── */ @media (max-width: 920px) { section, header.hero { padding: 72px 32px; } html[data-hero="live"] .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; } html[data-hero="live"] .hero-inner { align-items: center; } html[data-hero="live"] .hero-plan { max-width: 540px; margin: 0 auto; } .footer { padding: 32px; } .persona-grid { grid-template-columns: 1fr; } .bs { grid-template-columns: 64px 1fr; } .bs-num { font-size: 44px; } .bs-viz { grid-column: 2; justify-content: flex-start; margin-top: 8px; } .bg-grundriss { right: -300px; } .souv-points { grid-template-columns: 1fr 1fr; gap: 24px; } .branchen-grid { grid-template-columns: 1fr 1fr; } .branchen { margin-top: 64px; } } @media (max-width: 560px) { section, header.hero { padding: 56px 20px; } /* Waitlist: Formular stapeln, Button als volle Touch-Fläche */ .wl-row { flex-direction: column; align-items: stretch; } .wl-row input[type="email"] { max-width: none; } .wl-row button { padding: 16px 26px; } .waitlist h2 { font-size: 27px; } /* Bausteine: einspaltig, kompaktere Rhythmen */ .bs { grid-template-columns: 1fr; gap: 16px; } .bs-num { font-size: 40px; } .bs-viz { grid-column: 1; justify-content: flex-start; } .bs-list { margin-top: 40px; gap: 56px; } /* Manifest / Dahinter: eine Stufe kleiner, bleibt aber über 18px */ .manifest h2 { font-size: 27px; } .manifest p, .dahinter p { font-size: 20px; margin-top: 22px; } /* Personas: engere Karten */ .persona-grid { margin-top: 40px; gap: 16px; } .persona { padding: 24px 20px; } .marquee-track span { font-size: 13.5px; } /* Footer: untereinander, Links mit größerer Tap-Fläche */ .footer { padding: 24px 20px; } .footer .container { flex-direction: column; align-items: flex-start; gap: 14px; } .footer nav a { padding: 6px 0; } .souv-points { grid-template-columns: 1fr; gap: 20px; } .branchen-grid { grid-template-columns: 1fr; } .branchen { margin-top: 48px; } }