/* ===================================================================== THA-1 — Landing Experience ("Aurum") Edles, helles Marketing-Theme: warmes Papier + Antik-Gold + Tiefschwarz. Eigenständig vom Cockpit-Theme (.tha1). Body-Klasse: . Kein Build – pur CSS, ergänzt Tailwind-CDN. Pro Modul: --lx-accent überschreiben (Wiedererkennung), Gold bleibt Marke. ===================================================================== */ .lx { /* Flächen – warmes, hochwertiges Papierweiß */ --lx-bg: #ECEAE3; --lx-bg-soft: #F4F2EC; --lx-surface: #FFFFFF; --lx-surface-2: #F7F5EF; /* Tinte / Text */ --lx-ink: #14161A; /* Headlines, fast schwarz */ --lx-ink-soft: #2E333B; --lx-muted: #5C636C; /* Fließtext */ --lx-dim: #8A9099; /* Captions / Labels */ /* Marke: Antik-Gold (auf hellem Grund satter als das UI-Gold) */ --lx-gold: #BE9233; --lx-gold-deep: #93701F; --lx-gold-light:#E7C677; --lx-gold-soft: rgba(190,146,51,.12); --lx-gold-line: rgba(190,146,51,.34); /* Akzent (Modul-Wiedererkennung) – default = Gold */ --lx-accent: var(--lx-gold); --lx-accent-soft: var(--lx-gold-soft); --lx-accent-line: var(--lx-gold-line); --lx-line: rgba(20,22,26,.10); --lx-line-2: rgba(20,22,26,.06); --lx-shadow: 0 1px 2px rgba(20,22,26,.04), 0 18px 50px -20px rgba(20,22,26,.18); --lx-shadow-lg:0 30px 80px -28px rgba(20,22,26,.30); --lx-radius: 22px; --lx-radius-sm:14px; --lx-font-display: "Saira", "Inter", system-ui, sans-serif; --lx-font-body: "Inter", system-ui, -apple-system, sans-serif; --lx-font-serif: "Fraunces", Georgia, "Times New Roman", serif; --lx-font-rounded: "Nunito", "Varela Round", system-ui, sans-serif; /* ~ Arial Rounded (Logo-Font) */ background: var(--lx-bg); color: var(--lx-ink-soft); font-family: var(--lx-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Modul-Akzente fürs Landing (Gold-CTA bleibt, Akzent färbt Icons/Linien/Badges) */ .lx.acc-flow { --lx-accent:#1FA77E; --lx-accent-soft:rgba(31,167,126,.12); --lx-accent-line:rgba(31,167,126,.34); } .lx.acc-insight { --lx-accent:#2C6FE0; --lx-accent-soft:rgba(44,111,224,.12); --lx-accent-line:rgba(44,111,224,.34); } .lx.acc-pricing { --lx-accent:#8A53D9; --lx-accent-soft:rgba(138,83,217,.12); --lx-accent-line:rgba(138,83,217,.34); } .lx.acc-safe { --lx-accent:#E07A1F; --lx-accent-soft:rgba(224,122,31,.12); --lx-accent-line:rgba(224,122,31,.34); } .lx.acc-cfo { --lx-accent:#1899A8; --lx-accent-soft:rgba(24,153,168,.12); --lx-accent-line:rgba(24,153,168,.34); } /* Atmosphäre: weiche Lichtpools + Boden-Vignette + vertikaler Verlauf → Räumlichkeit */ .lx::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(1300px 760px at 12% -12%, rgba(255,255,255,.95), transparent 55%), radial-gradient(1100px 820px at 102% 4%, rgba(231,198,119,.13), transparent 55%), radial-gradient(1200px 900px at 50% 120%, rgba(20,22,26,.08), transparent 62%), linear-gradient(180deg, #F4F2EC 0%, var(--lx-bg) 44%, #E5E2D9 100%); } /* Feines Raster, das nach unten/außen weich ausblendet (Tiefe statt flacher Fläche) */ .lx::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(to right, rgba(20,22,26,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,22,26,.05) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; -webkit-mask-image: radial-gradient(125% 95% at 50% -5%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%); mask-image: radial-gradient(125% 95% at 50% -5%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%); } /* ---------- Layout ---------- */ .lx .lx-wrap { max-width: 1180px; margin-inline:auto; padding-inline: 22px; } @media (min-width:1024px){ .lx .lx-wrap{ padding-inline: 32px; } } /* ---------- Typo ---------- */ .lx .eyebrow { display:inline-flex; align-items:center; gap:9px; font-family: var(--lx-font-rounded); font-weight:700; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--lx-gold-deep); } .lx .eyebrow::before { content:""; width:26px; height:2px; background:var(--lx-accent); border-radius:2px; } .lx h1, .lx .display { font-family: var(--lx-font-display); font-weight:700; color: var(--lx-ink); line-height: .98; letter-spacing:-.01em; text-transform: uppercase; } .lx h1 { font-size: clamp(40px, 6.4vw, 76px); } .lx .gold { color: var(--lx-gold); } .lx h2 { font-family: var(--lx-font-display); font-weight:700; text-transform:uppercase; color: var(--lx-ink); line-height:1.02; letter-spacing:-.005em; font-size: clamp(28px, 3.6vw, 44px); } .lx h3 { font-family: var(--lx-font-display); font-weight:600; color:var(--lx-ink); } .lx .lead { font-size: clamp(17px, 1.7vw, 21px); line-height:1.5; color:var(--lx-muted); } .lx .serif { font-family: var(--lx-font-serif); } /* ---------- Check-Liste (Gold-Kreis + Haken) ---------- */ .lx .checks { display:grid; gap:14px; } .lx .checks li { display:flex; align-items:center; gap:13px; font-size:17px; font-weight:600; color:var(--lx-ink); } .lx .checks .ico { flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; color:#fff; background: linear-gradient(155deg, var(--lx-gold-light), var(--lx-gold) 55%, var(--lx-gold-deep)); box-shadow: 0 4px 10px -3px rgba(147,112,31,.55); } .lx .checks .ico svg { width:16px; height:16px; } /* ---------- Buttons ---------- */ .lx .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--lx-font-body); font-weight:700; font-size:16px; border-radius:999px; padding:15px 28px; cursor:pointer; transition: transform .14s ease, box-shadow .2s ease, filter .2s ease; } .lx .btn-gold { position:relative; overflow:hidden; color:#1c1606; background: linear-gradient(135deg, var(--lx-gold-light) 0%, var(--lx-gold) 38%, var(--lx-gold-deep) 66%, var(--lx-gold) 100%); background-size: 220% 220%; background-position: 0% 0%; box-shadow: 0 10px 26px -10px rgba(147,112,31,.7), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .14s ease, box-shadow .2s ease, background-position .55s ease; } .lx .btn-gold:hover { transform: translateY(-2px); background-position: 100% 100%; /* Verlauf wandert → Gold „bewegt sich“ */ box-shadow: 0 16px 34px -12px rgba(147,112,31,.85), inset 0 1px 0 rgba(255,255,255,.5); } /* durchwischender Glanz-Streifen (Specular-Sweep) */ .lx .btn-gold::after { content:""; position:absolute; top:0; left:-160%; width:55%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); pointer-events:none; transition: left .6s ease; } .lx .btn-gold:hover::after { left:160%; } .lx .btn-gold > * { position:relative; z-index:1; } .lx .btn-gold svg { transition: transform .18s ease; } .lx .btn-gold:hover svg { transform: translateX(4px); } .lx .btn-ghost { color: var(--lx-ink); background: transparent; border:1.5px solid var(--lx-line); padding:13px 24px; } .lx .btn-ghost:hover { border-color: var(--lx-ink); background: rgba(20,22,26,.03); } .lx .btn-sm { padding:11px 20px; font-size:14px; } /* ---------- Karten ---------- */ .lx .card { background: var(--lx-surface); border:1px solid var(--lx-line-2); border-radius: var(--lx-radius); box-shadow: var(--lx-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .lx .card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-lg); border-color: var(--lx-accent-line); } .lx .badge { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px; color:var(--lx-gold-deep); background:var(--lx-accent-soft); border:1px solid var(--lx-accent-line); } .lx .badge-soon { color:var(--lx-dim); background:transparent; border:1px solid var(--lx-line); } /* Modul-Icon-Plakette */ .lx .mod-ico { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; flex:none; background: linear-gradient(165deg, #fff, var(--lx-surface-2)); border:1px solid var(--lx-line); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(20,22,26,.4); } .lx .mod-ico img { width:30px; height:30px; } /* Section-Rhythmus */ .lx section { position:relative; } .lx .pad { padding-block: clamp(56px, 8vw, 104px); } .lx .pad-sm { padding-block: clamp(40px, 5vw, 64px); } .lx .hr { height:1px; background:var(--lx-line); border:0; } /* Hero-Foto: blutet rechts aus, weicher Verlauf in den Hintergrund (wie Vorlage) */ .lx .hero-photo { position:relative; } .lx .hero-photo img { width:100%; height:100%; object-fit:cover; object-position: top center; } .lx .hero-photo::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, var(--lx-bg) 0%, rgba(236,234,227,.55) 16%, transparent 42%); } @media (max-width:1023px){ .lx .hero-photo::before { background: linear-gradient(0deg, var(--lx-bg) 0%, transparent 45%); } } /* Logo-Lockup im Header */ .lx .wordmark { font-family:var(--lx-font-display); font-weight:700; letter-spacing:.14em; font-size:22px; color:var(--lx-ink); } .lx .wordmark .min { color:var(--lx-gold); } .lx .wordmark-sub { font-family:var(--lx-font-body); font-weight:600; letter-spacing:.34em; font-size:11px; text-transform:uppercase; color:var(--lx-gold-deep); } /* ---------- Schwebende Glas-Pillen (Cockpit-Look, hell) ---------- */ .lx .lx-nav { position: sticky; top: 0; z-index: 60; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px clamp(14px, 2.6vw, 30px); pointer-events:none; } .lx .lx-nav > * { pointer-events:auto; } .lx .lx-pill { display:flex; align-items:center; gap:5px; border-radius:999px; min-height:58px; padding:8px 10px; background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.7); box-shadow: 0 12px 34px -14px rgba(20,22,26,.32), inset 0 1px 0 rgba(255,255,255,.65); } .lx .lx-pill-brand { gap:11px; padding:8px 22px 8px 16px; } .lx .lx-pill-brand .wordmark { font-size:20px; } .lx .pill-link { font-family:var(--lx-font-rounded); padding:9px 15px; border-radius:999px; font-weight:700; font-size:15px; color:var(--lx-ink-soft); transition:background .15s, color .15s; white-space:nowrap; } /* Logo-Wortmarke (inline SVG) */ .lx .lx-logo { height:23px; width:auto; display:block; color:var(--lx-ink); transition: filter .35s ease; } .lx .lx-logo-foot { height:26px; width:auto; display:block; color:#fff; } .lx .lx-pill-brand { padding:8px 22px 8px 18px; position:relative; overflow:hidden; } /* Hover: „ONE“ glänzt auf (Verlauf wirkt heller/metallischer) + Glanz wischt über die Pille */ .lx .lx-pill-brand:hover .lx-logo { filter: brightness(1.14) saturate(1.12) drop-shadow(0 1px 1.5px rgba(243,201,114,.45)); } .lx .lx-pill-brand::after { content:""; position:absolute; top:0; left:-160%; width:55%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); pointer-events:none; transition: left .65s ease; } .lx .lx-pill-brand:hover::after { left:160%; } .lx .pill-link:hover { background: rgba(20,22,26,.05); color:var(--lx-ink); } .lx .pill-sep { width:1px; height:26px; background:var(--lx-line); margin:0 5px; } .lx .pill-icon { width:44px; height:44px; border-radius:999px; display:none; place-items:center; color:var(--lx-ink-soft); } .lx .pill-icon:hover { background: rgba(20,22,26,.05); color:var(--lx-ink); } /* Burger nur unter lg zeigen (überschreibt Tailwind nicht – eigene Media-Query, höhere Spezifität) */ @media (max-width:1023px){ .lx .pill-icon { display:grid; } } /* Mobile-Pull-down der Menü-Pille */ .lx .lx-pop { position:absolute; top:66px; right:0; min-width:230px; padding:8px; z-index:70; border-radius:22px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); border:1px solid rgba(255,255,255,.7); box-shadow: 0 26px 60px -22px rgba(20,22,26,.4); } .lx .lx-pop a { font-family:var(--lx-font-rounded); display:block; padding:12px 15px; border-radius:14px; font-weight:700; color:var(--lx-ink-soft); } .lx .lx-pop a:hover { background: rgba(20,22,26,.05); color:var(--lx-ink); } /* Testimonial */ .lx .quote { font-family:var(--lx-font-serif); font-weight:500; font-size:clamp(22px,2.6vw,32px); line-height:1.34; color:var(--lx-ink); } .lx .quote .mark { color:var(--lx-gold); } .lx .testimonial-photo { border-radius:18px; overflow:hidden; background: radial-gradient(120% 80% at 50% 0%, #fff, var(--lx-surface-2)); border:1px solid var(--lx-line); box-shadow: inset 0 1px 0 #fff, 0 14px 34px -20px rgba(20,22,26,.35); } .lx .testimonial-photo img { display:block; width:100%; height:auto; } @media (max-width:767px){ .lx .testimonial-photo{ max-width:240px; margin-inline:auto; } } /* Footer */ .lx .lx-foot { background:#14161A; color:#AEB3BC; } .lx .lx-foot a { color:#D7DBE2; } .lx .lx-foot a:hover { color:#fff; } /* Kleine Statistik-Pille */ .lx .stat .n { font-family:var(--lx-font-display); font-weight:700; font-size:34px; color:var(--lx-ink); line-height:1; } .lx .stat .l { font-size:13px; color:var(--lx-muted); margin-top:6px; } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce){ .lx * { transition:none !important; animation:none !important; } } /* ===================================================================== v2 — "Agentur"-Ausbau: gerahmte Bühne, Showcase-Cards, FAQ, Laptop ===================================================================== */ /* Wortmarke THA-ONE (ONE als Wort) – Punkt-Trenner in Gold */ .lx .wordmark { letter-spacing:.12em; } .lx .wordmark .min { color:var(--lx-gold); padding:0 .06em; } /* ---------- HERO-Bühne: Foto in gerahmter Card + Deko-Hintergrund ---------- */ .lx .stage { position:relative; } .lx .stage-bg { /* spannender Hintergrund hinter der Foto-Card */ position:absolute; inset:-6% -4% -6% 6%; z-index:0; border-radius:34px; background: radial-gradient(120% 90% at 80% 12%, var(--lx-accent-soft), transparent 60%), linear-gradient(160deg, rgba(190,146,51,.10), rgba(20,22,26,.04)); filter: blur(.2px); } .lx .stage-bg::after { /* gold glühender Kreis */ content:""; position:absolute; right:-8%; top:-10%; width:62%; height:62%; background: radial-gradient(circle, rgba(231,198,119,.5), transparent 65%); filter: blur(8px); } .lx .photo-card { position:relative; z-index:1; border-radius:26px; overflow:hidden; aspect-ratio: 5/6; background: linear-gradient(180deg,#fdfcf9,var(--lx-surface-2)); border:1px solid var(--lx-line); box-shadow: var(--lx-shadow-lg), inset 0 0 0 1px rgba(255,255,255,.5); } .lx .photo-card img { width:100%; height:100%; object-fit:cover; object-position: 60% top; } /* schwebende UI-Chips (designter Look) */ .lx .chip { position:absolute; z-index:2; display:flex; align-items:center; gap:11px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border:1px solid var(--lx-line); border-radius:15px; padding:11px 15px; box-shadow: 0 18px 40px -18px rgba(20,22,26,.45); } .lx .chip .k { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--lx-dim); } .lx .chip .v { display:block; font-family:var(--lx-font-display); font-weight:700; font-size:18px; color:var(--lx-ink); line-height:1; margin-top:4px; } .lx .chip .dot { width:11px; height:11px; border-radius:999px; flex:none; box-shadow:0 0 0 4px rgba(0,0,0,.04); } .lx .chip.tl { top:22px; left:-26px; } .lx .chip.br { bottom:26px; right:-26px; } @media (max-width:1023px){ .lx .chip.tl{ left:8px } .lx .chip.br{ right:8px } } .lx .dot-gut{ background:#2FB386 } .lx .dot-gold{ background:var(--lx-gold) } /* Mini-Sparkline (im Chip) */ .lx .spark { width:46px; height:24px; } /* ---------- HERO als EINE große Card (Inhalt links überlappt, Foto rechts, ein Raum) ---------- */ .lx .hero-card { position:relative; overflow:hidden; min-height: 680px; background: var(--lx-surface); border:1px solid var(--lx-line); border-radius: 30px; box-shadow: var(--lx-shadow-lg); isolation:isolate; } /* eigener, dezent spannender Card-Hintergrund (Raster + warmer Lichtkegel) */ .lx .hero-card::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 80% at 88% 6%, var(--lx-accent-soft), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(190,146,51,.06), transparent 60%), linear-gradient(to right, rgba(20,22,26,.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,22,26,.028) 1px, transparent 1px), #fff; background-size: auto, auto, 40px 40px, 40px 40px, auto; } /* Foto: absolut rechts, volle Höhe – er steht „im Raum“ der Card */ .lx .hero-card-photo { position:absolute; top:0; right:0; bottom:0; width:54%; z-index:1; } .lx .hero-card-photo img { width:100%; height:100%; object-fit:cover; object-position:50% top; } /* linke Kante weich in die Card-Fläche blenden – keine harte Naht */ .lx .hero-card-photo::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.6) 15%, transparent 42%); } /* Inhalt: überlappt das Foto leicht (z-index über Foto), Text bleibt auf Weiß lesbar */ .lx .hero-card-body { position:relative; z-index:2; width:58%; min-height:680px; padding: clamp(34px,4vw,68px); display:flex; flex-direction:column; justify-content:center; } /* Chips ragen über die Naht aufs Foto (Tiefe) */ .lx .hero-card .chip { position:absolute; z-index:3; } .lx .hero-card .chip.tl { top:auto; bottom:32%; left:46%; } .lx .hero-card .chip.br { bottom:13%; right:5%; } @media (max-width: 900px){ .lx .hero-card { min-height:540px; } .lx .hero-card-photo { width:60%; } .lx .hero-card-photo::before { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.55) 24%, transparent 62%); } .lx .hero-card-body { width:80%; } .lx .hero-card .chip { display:none; } } @media (max-width: 560px){ .lx .hero-card-photo { width:66%; object-position:50% top; } .lx .hero-card-body { width:90%; padding:30px 26px; } } /* ---------- MODUL-SHOWCASE (zwei große Cards) ---------- */ .lx .showcase { display:grid; gap:22px; } @media (min-width:920px){ .lx .showcase{ grid-template-columns:1fr 1fr; } } .lx .show-card { position:relative; overflow:hidden; border-radius:26px; padding: clamp(26px,3vw,38px); background: linear-gradient(168deg,#fff 0%, var(--lx-surface-2) 100%); border:1px solid var(--lx-line); box-shadow: var(--lx-shadow); display:flex; flex-direction:column; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .lx .show-card:hover { transform: translateY(-5px); box-shadow: var(--lx-shadow-lg); border-color: var(--lx-accent-line); } .lx .show-card::before { /* Akzent-Glow oben rechts */ content:""; position:absolute; top:-30%; right:-18%; width:55%; height:75%; background: radial-gradient(circle, var(--lx-accent-soft), transparent 70%); pointer-events:none; } .lx .show-card .strip { position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--lx-accent), transparent 80%); } .lx .show-card .row { display:flex; align-items:center; gap:14px; } .lx .show-card h3 { font-size:clamp(22px,2.4vw,28px); } .lx .show-card .price { font-family:var(--lx-font-display); font-weight:700; color:var(--lx-ink); } .lx .feat-list { display:grid; gap:9px; margin-top:18px; } .lx .feat-list li { display:flex; gap:10px; align-items:flex-start; color:var(--lx-ink-soft); font-size:15px; } .lx .feat-list svg { width:18px; height:18px; color:var(--lx-accent); flex:none; margin-top:2px; } /* großes Modul-Icon in Akzentfarbe */ .lx .mod-ico-lg { width:60px; height:60px; border-radius:17px; display:grid; place-items:center; flex:none; background: linear-gradient(160deg, var(--lx-accent-soft), #fff); border:1px solid var(--lx-accent-line); box-shadow: inset 0 1px 0 #fff; } .lx .mod-ico-lg img { width:32px; height:32px; } /* ---------- ROADMAP-Streifen (kommende Module, kompakt) ---------- */ .lx .roadmap { display:flex; flex-wrap:wrap; gap:10px; } .lx .rm-pill { display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; background: var(--lx-surface); border:1px solid var(--lx-line); font-weight:600; font-size:14px; color:var(--lx-ink-soft); } .lx .rm-pill .d { width:9px; height:9px; border-radius:999px; } .lx .rm-pill .soon { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--lx-dim); } /* ---------- FAQ (native details, kein JS) ---------- */ .lx .faq { border-top:1px solid var(--lx-line); } .lx .faq details { border-bottom:1px solid var(--lx-line); } .lx .faq summary { cursor:pointer; list-style:none; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--lx-font-display); font-weight:600; font-size:clamp(17px,1.7vw,20px); color:var(--lx-ink); } .lx .faq summary::-webkit-details-marker{ display:none } .lx .faq summary .pm { flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--lx-line); color:var(--lx-gold-deep); transition: transform .25s ease, background .2s; } .lx .faq details[open] summary .pm { transform: rotate(45deg); background:var(--lx-accent-soft); } .lx .faq .ans { padding:0 4px 24px; color:var(--lx-muted); line-height:1.65; max-width:76ch; } /* ---------- LAPTOP-MOCKUP + Software-Vorschau ---------- */ .lx .laptop { position:relative; z-index:1; width:100%; max-width:620px; margin-inline:auto; } .lx .laptop .lid { border-radius:16px 16px 4px 4px; padding:12px 12px 0; background: linear-gradient(180deg,#2a2e36,#16181d); box-shadow: var(--lx-shadow-lg); } .lx .laptop .cam { width:6px;height:6px;border-radius:999px;background:#0c0d10;margin:0 auto 8px; box-shadow:inset 0 0 0 1px #3a3f48; } .lx .laptop .screen { border-radius:8px; overflow:hidden; background:var(--lx-surface); border:1px solid rgba(0,0,0,.3); } .lx .laptop .base { height:14px; border-radius:0 0 14px 14px; background: linear-gradient(180deg,#23262d,#101216); position:relative; box-shadow: 0 22px 40px -20px rgba(20,22,26,.6); } .lx .laptop .base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:90px; height:6px; border-radius:0 0 8px 8px; background:#0c0d10; } /* Fertige Laptop-Render (z.B. neon) – nur rahmen/schatten */ .lx .modul-render { position:relative; z-index:1; display:block; width:100%; height:auto; border-radius:20px; box-shadow: var(--lx-shadow-lg); } /* Stilisierte App-Vorschau (on-brand, ohne echten Screenshot) */ .lx .app { font-family:var(--lx-font-body); background:var(--lx-bg-soft); } .lx .app .bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:#fff; border-bottom:1px solid var(--lx-line-2); } .lx .app .bar .b { width:9px;height:9px;border-radius:999px;background:var(--lx-line); } .lx .app .body { padding:16px; display:grid; gap:12px; } .lx .app .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .lx .app .kpi { background:#fff; border:1px solid var(--lx-line-2); border-radius:12px; padding:11px 12px; } .lx .app .kpi .l { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--lx-dim); } .lx .app .kpi .n { font-family:var(--lx-font-display); font-weight:700; font-size:18px; color:var(--lx-ink); margin-top:4px; } .lx .app .chartbox { background:#fff; border:1px solid var(--lx-line-2); border-radius:12px; padding:14px; } .lx .app .bars { display:flex; align-items:flex-end; gap:7px; height:96px; } .lx .app .bars i { flex:1; border-radius:5px 5px 2px 2px; display:block; background: linear-gradient(180deg, var(--lx-accent), color-mix(in srgb, var(--lx-accent) 55%, #fff)); } .lx .app .ampel { display:flex; gap:6px; margin-top:10px; } .lx .app .ampel s { width:22px;height:7px;border-radius:999px; }