/* ─── Theme-Variablen ───────────────────────────────────────────────────── Default: Dark. Wenn user/system Light will, kommt [data-theme="light"] auf . Section-Pastell-Tönungen kommen über Sektion-Klassen. */ :root { --bg-base: #0b0e18; --bg-elevated: #11151f; --bg-surface: #11192b; --bg-overlay: rgba(12,15,26,0.85); --bg-hero: radial-gradient(circle at 50% -10%,#16203a 0%,#0c0f1a 60%); --bg-final: radial-gradient(circle at 50% 120%,#16203a 0%,#0c0f1a 60%); --bg-usp: linear-gradient(180deg,#0c0f1a,#0e1424); --bg-modi: linear-gradient(180deg,#0e1424,#0c0f1a); --bg-privacy: linear-gradient(180deg,#0c0f1a,#0e1424); --bg-section-modules: transparent; --bg-section-characters: transparent; --text-primary: #e8edf5; --text-bright: #ffffff; --text-strong: #c5cee0; --text-secondary: #aab3c5; --text-muted: #9aa6ba; --text-faint: #7a89a3; --text-footer: #6b7689; --text-link: #9fb3d6; --border: #161b28; --border-mid: #1e2636; --border-strong: #2c3444; --border-active: #2d4a6b; --border-tab: #233048; --accent: #5b9cf8; --accent-on: #0c0f1a; --accent-warm: #fbbf24; --accent-good: #6ee7a8; --accent-good-bg: #0f2018; --accent-good-border: #1d3a2a; --accent-purple-border: #3a2c5b; --accent-purple-bg: linear-gradient(180deg,#15122a,#11151f); --accent-green-border: #1d4a2e; --accent-green-bg: linear-gradient(180deg,#0e1f15,#11151f); --accent-blue-border: #1d3a5b; --accent-blue-bg: linear-gradient(180deg,#11192b,#11151f); --accent-blue-bg-soft: #102841; --accent-smart: #a78bfa; --accent-smart-bg: #1a1530; --accent-negative: #c97169; --shadow-card: none; --shadow-hover: none; --toggle-icon: '☀️'; } html[data-theme="light"] { --bg-base: #fbfaf7; --bg-elevated: #ffffff; --bg-surface: #f3f5f8; --bg-overlay: rgba(255,255,255,0.85); --bg-hero: radial-gradient(circle at 50% -10%,#dbeafe 0%,#fafbfc 60%); --bg-final: radial-gradient(circle at 50% 120%,#dbeafe 0%,#fafbfc 60%); --bg-usp: linear-gradient(180deg,#fafbfc,#eff6ff); /* zartes Blau */ --bg-modi: linear-gradient(180deg,#fdf4ff,#fafbfc); /* zartes Violet */ --bg-privacy: linear-gradient(180deg,#fafbfc,#f0fdf4);/* zartes Grün */ --bg-section-modules: #fefce8; /* zartes Gelb */ --bg-section-characters: #fff7ed; /* zartes Pfirsich */ --text-primary: #1a2030; --text-bright: #0c0f1a; --text-strong: #2d3748; --text-secondary: #4a5568; --text-muted: #6b7280; --text-faint: #94a3b8; --text-footer: #94a3b8; --text-link: #3b82f6; --border: #e2e8f0; --border-mid: #cbd5e1; --border-strong: #cbd5e1; --border-active: #93c5fd; --border-tab: #93c5fd; --accent: #4f8de4; --accent-on: #ffffff; --accent-warm: #f59e0b; --accent-good: #16a34a; --accent-good-bg: #dcfce7; --accent-good-border: #86efac; --accent-purple-border: #c4b5fd; --accent-purple-bg: linear-gradient(180deg,#f3e8ff,#ffffff); --accent-green-border: #86efac; --accent-green-bg: linear-gradient(180deg,#dcfce7,#ffffff); --accent-blue-border: #93c5fd; --accent-blue-bg: linear-gradient(180deg,#dbeafe,#ffffff); --accent-blue-bg-soft: #dbeafe; --accent-smart: #8b5cf6; --accent-smart-bg: #f5f3ff; --accent-negative: #b85d4f; --shadow-card: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04); --shadow-hover: 0 6px 16px rgba(59,130,246,0.10), 0 2px 4px rgba(15,23,42,0.06); --toggle-icon: '🌙'; } /* ─── Base ─────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Body',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;background:var(--bg-base);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .25s,color .25s} a{color:inherit;text-decoration:none} .wrap{max-width:1040px;margin:0 auto;padding:0 22px} .accent{color:var(--accent)} .btn{display:inline-block;padding:14px 26px;border-radius:12px;font-weight:700;font-size:16px;cursor:pointer;transition:transform .12s,filter .12s;border:none;font-family:inherit} .btn:hover{transform:translateY(-1px);filter:brightness(1.08)} .btn-primary{background:var(--accent);color:var(--accent-on)} .btn-ghost{background:transparent;border:1px solid var(--border-strong);color:var(--text-primary)} header{padding:12px 0;position:sticky;top:0;background:var(--bg-overlay);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid var(--border)} .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px} .nav .logo{justify-self:start} .nav .lang{justify-self:center} .nav-right{justify-self:end;display:flex;align-items:center;gap:10px} .logo{font-size:22px;font-weight:800} .lang{font-size:13px;position:relative} .lang>summary{list-style:none;cursor:pointer} .lang>summary::-webkit-details-marker{display:none} /* Sprachschalter überall als klickbares Dropdown (ein
versteckt seinen Inhalt browserseitig, solange es nicht [open] ist — deshalb KEINE "offene Liste" auf Desktop). */ .lang-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding:6px 10px;border-radius:8px;border:1px solid var(--border-strong);color:var(--text-bright);font-size:14px;font-weight:700;white-space:nowrap} .lang-toggle .flag{font-size:14px;margin-right:1px} .lang-toggle::after{content:'▾';opacity:.6;font-size:11px} .lang[open] .lang-toggle::after{content:'▴'} .lang-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:30;flex-direction:column;align-items:stretch;gap:2px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.3);min-width:150px} .lang[open] .lang-menu{display:flex} .lang a{padding:8px 12px;border-radius:7px;border:1px solid transparent;color:var(--text-link);font-size:14px;letter-spacing:.3px} .lang a:hover{background:var(--bg-surface);color:var(--text-bright)} .lang a.active{background:var(--bg-surface);border-color:var(--border-tab);color:var(--text-bright);font-weight:700} .lang .flag{font-size:15px;margin-right:3px} /* Theme-Toggle */ .theme-toggle{background:transparent;border:1px solid var(--border-strong);color:var(--text-primary);width:36px;height:36px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s,border-color .15s} .theme-toggle:hover{background:var(--bg-surface);border-color:var(--accent)} .theme-toggle::before{content:var(--toggle-icon)} /* Header im Hochformat: alles in EINER Zeile (kein Umbruch); bei wenig Platz skalieren die Elemente kompakter. Sprachen als Ausklapp-Menü. */ @media (max-width:760px){ .nav{gap:6px;flex-wrap:nowrap} .nav .logo{margin-right:auto;order:1;font-size:18px;white-space:nowrap} .nav .lang{order:2} .nav .theme-toggle{order:3;width:32px;height:32px;font-size:14px;flex-shrink:0} .nav .btn{order:4;padding:7px 13px!important;font-size:13px!important;white-space:nowrap;flex-shrink:0} .lang-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding:6px 9px;border-radius:8px;border:1px solid var(--border-strong);color:var(--text-bright);font-size:13px;font-weight:700;white-space:nowrap} .lang-toggle .flag{font-size:13px;margin-right:1px} .lang-toggle::after{content:'▾';opacity:.6;font-size:11px} .lang[open] .lang-toggle::after{content:'▴'} .lang-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:30;flex-direction:column;align-items:stretch;gap:2px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.3);min-width:150px} .lang[open] .lang-menu{display:flex} .lang-menu a{font-size:14px;padding:8px 12px} } /* Sehr schmale Geräte: noch etwas kompakter */ @media (max-width:380px){ .nav .logo{font-size:16px} .nav .logo img{height:1em!important;width:1em!important} .nav .btn{padding:6px 10px!important;font-size:12px!important} .lang-toggle{padding:6px 7px;font-size:12px} } .hero{padding:40px 0 48px;text-align:center;background:var(--bg-hero)} .hero h1{font-size:clamp(28px,5.2vw,48px);line-height:1.12;font-weight:800;letter-spacing:-0.8px;margin-bottom:16px;color:var(--text-bright)} .hero h1 .line{display:block;text-wrap:balance} .accent-negative{color:var(--accent-negative)} .hero p.lead{font-size:clamp(18px,2.5vw,23px);color:var(--text-secondary);max-width:660px;margin:0 auto 4px;line-height:1.35} .hero p.lead strong{color:var(--text-primary);font-weight:700} .hero .hero-description{font-size:15px;color:var(--text-muted);max-width:680px;margin:0 auto 22px;line-height:1.6;text-align:left} .hero .hero-description p{margin-bottom:10px} .hero .hero-description p:last-child{margin-bottom:0} .hero .hero-description strong{color:var(--text-strong);font-weight:600} @media (max-width:600px){.hero .hero-description{font-size:14.5px}} .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero .meta{margin-top:12px;font-size:13px;color:var(--text-faint)} .badges{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .badge{font-size:13px;padding:7px 14px;border-radius:999px;background:var(--bg-surface);border:1px solid var(--border-tab);color:var(--text-link)} /* Demo-CTA: präsenter, mehr Kontrast (Glow + Größe + ▶) */ .cta-demo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px} .btn-demo{display:inline-flex;align-items:center;gap:10px;padding:17px 42px;border-radius:14px;font-size:18px;font-weight:800;letter-spacing:.2px;color:var(--accent-on);background:linear-gradient(180deg,color-mix(in srgb,#fff 16%,var(--accent)),var(--accent));box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 50%,transparent);cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s;font-family:inherit} .btn-demo:hover{transform:translateY(-2px);box-shadow:0 12px 36px color-mix(in srgb,var(--accent) 62%,transparent);filter:brightness(1.05)} .btn-demo .play{font-size:14px;line-height:1} .cta-sub{font-size:14.5px;font-weight:600;color:var(--text-strong)} /* Markenwort „Robin" — warmer Display-Serif (Fraunces) als menschlicher Gegenpol zum System-Sans der Big-Tech-Zeilen */ @font-face{font-family:'BrandSerif';src:url('/fraunces-brand.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal} @font-face{font-family:'Body';src:url('/hanken-grotesk-var.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal} .brandmark{font-family:'BrandSerif',Georgia,serif;font-weight:600;color:var(--accent);letter-spacing:-.02em;font-variation-settings:'opsz' 144,'SOFT' 50,'wght' 600} .hero h1 .brandmark{font-size:1.5em;line-height:.85;display:inline-block;vertical-align:-.07em} .hero h1 .line:last-child{margin-top:.08em} /* Hero: 4 Charakter-Stimmen zum Anhören (eigener Block, Luft zum CTA) */ .voice-pick{margin:28px auto 0;max-width:700px} .voice-pick-title{font-size:14px;font-weight:600;color:var(--text-bright);margin:0 0 13px} .voice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:11px} .voice-card{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;cursor:pointer;text-align:left;font-family:inherit;position:relative;overflow:hidden; background:color-mix(in srgb,var(--vc) 14%,var(--bg-surface)); border:1px solid color-mix(in srgb,var(--vc) 34%,transparent); transition:transform .14s ease,box-shadow .14s ease} .voice-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--vc) 26%,transparent)} .voice-card.playing{box-shadow:0 0 0 2px color-mix(in srgb,var(--vc) 60%,transparent),0 10px 24px color-mix(in srgb,var(--vc) 26%,transparent)} .voice-card .vp{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:#fff; background:linear-gradient(140deg,color-mix(in srgb,var(--vc) 75%,#fff),var(--vc));box-shadow:0 5px 14px color-mix(in srgb,var(--vc) 50%,transparent)} .voice-card.playing .vp{font-size:12px} .voice-card .vemoji{font-size:22px;flex:none;line-height:1} .voice-card .vchar{font-size:14px;font-weight:700;color:var(--text-bright);line-height:1.18} /* die 4 Charaktertypen — je eigene Farbwelt */ .v-warm{--vc:#fb6f92} .v-motiv{--vc:#3b82f6} .v-poet{--vc:#9b7bf0} .v-ironic{--vc:#64748b} .voice-foot{font-size:12.5px;color:var(--text-faint);margin:15px auto 0;line-height:1.5;max-width:560px} .hero .cta{margin-top:26px} .hero .modulechain{margin-top:18px;font-size:13px;color:var(--text-faint);letter-spacing:.02em} /* Hochformat/Phone: Stimm-Buttons klein + nebeneinander (2×2). MUSS nach den .voice-card- Basisregeln stehen — Media Queries erhöhen die Spezifität nicht, nur die Quell-Reihenfolge zählt. */ @media (max-width:520px){ .voice-pick{margin-top:20px} .voice-pick-title{font-size:13px;margin-bottom:10px} .voice-row{gap:9px} .voice-card{padding:10px 11px;gap:9px;border-radius:13px} .voice-card .vp{width:36px;height:36px;font-size:13px} .voice-card .vemoji{font-size:18px} .voice-card .vchar{font-size:12.5px} .voice-foot{font-size:11.5px;margin-top:12px} } section{padding:54px 0} .section-title{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-0.5px;margin-bottom:12px;color:var(--text-primary)} .section-sub{color:var(--text-secondary);font-size:16px;max-width:680px;margin-bottom:26px} .usp{background:var(--bg-usp)} .usp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px} /* Auf größeren Screens: Robin-Karte (win) breiter, damit Items in einer Zeile bleiben */ @media (min-width:820px){ .usp-grid{grid-template-columns:1fr 1fr 1.5fr} } .usp-col{background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:14px;padding:22px;box-shadow:var(--shadow-card)} .usp-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);margin-bottom:14px;font-weight:700} .usp-col.win{border-color:var(--border-active);background:var(--accent-blue-bg)} .usp-col.win h4{color:var(--accent)} .usp-col ul{list-style:none;display:flex;flex-direction:column;gap:9px} .usp-col li{font-size:15px;color:var(--text-strong);display:flex;align-items:flex-start;gap:9px} .usp-col li::before{content:'';display:inline-block;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--text-faint);flex-shrink:0} .usp-col.win li::before{background:var(--accent)} /* "Eine App, dein ganzes Leben" + andere generische Sektionen */ section.has-pastel-modules{background:var(--bg-section-modules)} section.has-pastel-characters{background:var(--bg-section-characters)} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .card{background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:14px;padding:18px;transition:border-color .12s,transform .12s,box-shadow .12s;box-shadow:var(--shadow-card)} /* Kompakte Feature-Reihen (Module, Stimme): Icon + Titel + Halbsatz, kein Karten-Ballast */ .feature-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:0 26px;margin-top:6px} .frow{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;border-bottom:1px solid var(--border)} .frow .fi{font-size:21px;line-height:1.25;flex:none} .frow .ft{display:flex;flex-direction:column;gap:1px;min-width:0} .frow b{font-size:14.5px;font-weight:700;color:var(--text-primary);line-height:1.3} .frow .fd{font-size:13px;color:var(--text-muted);line-height:1.35} /* Chips (KI-Stufen, Charaktere, EU-Modus, Plan-Inklusiv) */ .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--bg-surface);border:1px solid var(--border-tab);color:var(--text-strong);font-size:13.5px;font-weight:600} /* Datenschutz-Tiles (kompakter als Karten) */ .tile-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:6px} .tile{background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-card)} .tile .ti{font-size:22px;line-height:1.1} .tile b{font-size:15px;font-weight:700;color:var(--text-primary)} .tile .td{font-size:13px;color:var(--text-muted);line-height:1.4} /* „… oder eigene Charaktere"-Überleitung im Modi-Block */ .merge-or{text-align:center;margin:26px 0 14px;color:var(--text-secondary);font-size:15px} .modi .chip-row{justify-content:center} .card:hover{border-color:var(--border-active);transform:translateY(-2px);box-shadow:var(--shadow-hover)} .card h3{font-size:17px;margin-bottom:8px;font-weight:700;color:var(--text-primary)} .card p{color:var(--text-muted);font-size:14.5px} .icon{font-size:28px;margin-bottom:12px;line-height:1} .tag{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-good);background:var(--accent-good-bg);border:1px solid var(--accent-good-border);padding:2px 8px;border-radius:6px;margin-left:6px;vertical-align:middle;font-weight:700} .modi{background:var(--bg-modi)} /* === Robin-Modi-Switch: kompakte Tab-Pills + ein Detail-Panel === */ .modi-switch{position:relative;max-width:620px;margin:0 auto; --m-accent:var(--accent);--m-border:var(--accent-blue-border);--m-bg:var(--accent-blue-bg)} .modi-switch[data-mode="purple"]{--m-accent:var(--accent-smart);--m-border:var(--accent-purple-border);--m-bg:var(--accent-purple-bg)} .modi-switch[data-mode="green"]{--m-accent:var(--accent-good);--m-border:var(--accent-green-border);--m-bg:var(--accent-green-bg)} .modi-switch[data-mode="gold"]{--m-accent:var(--accent-warm);--m-border:color-mix(in srgb,var(--accent-warm) 45%,var(--border-mid));--m-bg:linear-gradient(180deg,color-mix(in srgb,var(--accent-warm) 13%,var(--bg-elevated)),var(--bg-elevated))} .modi-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .mtab{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:12px;cursor:pointer;background:var(--bg-elevated);border:1px solid var(--border-mid);color:var(--text-secondary);font-family:inherit;font-weight:700;font-size:14px;transition:border-color .18s,color .18s,background .18s,transform .12s} .mtab .mt-ico{font-size:18px;line-height:1} .mtab:hover{color:var(--text-primary);transform:translateY(-1px)} .mtab.blue[aria-selected="true"]{color:var(--accent);border-color:var(--accent-blue-border);background:var(--accent-blue-bg)} .mtab.purple[aria-selected="true"]{color:var(--accent-smart);border-color:var(--accent-purple-border);background:var(--accent-purple-bg)} .mtab.green[aria-selected="true"]{color:var(--accent-good);border-color:var(--accent-green-border);background:var(--accent-green-bg)} .mtab.gold[aria-selected="true"]{color:var(--accent-warm);border-color:color-mix(in srgb,var(--accent-warm) 45%,var(--border-mid));background:linear-gradient(180deg,color-mix(in srgb,var(--accent-warm) 13%,var(--bg-elevated)),var(--bg-elevated))} .mtab:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px} .modi-panel{position:relative;margin-top:12px;min-height:92px;padding:16px 18px;border-radius:14px;background:var(--m-bg);border:1px solid var(--m-border);box-shadow:var(--shadow-card);transition:background .25s,border-color .25s} .mp{animation:mpIn .28s ease} .mp[hidden]{display:none} .mp h3{font-size:18px;font-weight:800;color:var(--text-primary)} .mp p{margin-top:5px;color:var(--text-secondary);font-size:14.5px} .mp .role{display:inline-block;font-size:11px;font-weight:700;color:var(--m-accent);border:1px solid color-mix(in srgb,var(--m-accent) 42%,transparent);border-radius:6px;padding:1px 7px;margin-left:5px;vertical-align:middle;letter-spacing:.3px;white-space:nowrap} @keyframes mpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .modi-arrow{position:absolute;top:calc(50% + 11px);transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text-primary);font-size:20px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .18s,border-color .15s;z-index:2} .modi-arrow.prev{left:-10px}.modi-arrow.next{right:-10px} .modi-arrow:hover{border-color:var(--m-accent)} @media (hover:hover){.modi-switch:hover .modi-arrow{opacity:1;pointer-events:auto}} .modi-dots{display:flex;justify-content:center;gap:6px;margin-top:10px} .modi-dots i{width:6px;height:6px;border-radius:50%;background:var(--border-strong);transition:background .2s,width .2s} .modi-dots i.on{width:18px;border-radius:3px;background:var(--m-accent)} @media (max-width:600px){ .mtab{flex-direction:column;gap:3px;padding:8px 4px;font-size:12px} .mtab .mt-ico{font-size:17px} .modi-arrow{display:none} .modi-switch{touch-action:pan-y} } @media (prefers-reduced-motion:reduce){.mp{animation:none}} .privacy{background:var(--bg-privacy)} .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--accent-good);background:var(--accent-good-bg);border:1px solid var(--accent-good-border);padding:6px 12px;border-radius:999px;margin-bottom:18px} .faq details{background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:12px;padding:4px 18px;margin-bottom:10px;box-shadow:var(--shadow-card)} .faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;font-size:16px;color:var(--text-primary)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';float:right;color:var(--accent);font-weight:700} .faq details[open] summary::after{content:'–'} .faq p{color:var(--text-muted);padding:0 0 16px} .kbd{display:inline-block;background:var(--bg-surface);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--text-strong);margin:0 2px} .final{text-align:center;background:var(--bg-final)} footer{padding:40px 0;border-top:1px solid var(--border);color:var(--text-footer);font-size:14px;text-align:center} footer a{color:var(--text-link)} footer a:hover{color:var(--text-bright)} /* Form */ .input,.textarea{background:var(--bg-base);border:1px solid var(--border-strong);border-radius:10px;padding:13px 14px;color:var(--text-primary);font-size:15px;font-family:inherit;width:100%} .textarea{resize:vertical;min-height:120px} /* ════════ DESIGN-UPGRADE: Editorial-Wärme ════════ */ /* Textur-Variablen je Theme */ :root{ --topo-op:.05; --grain-op:.035; --glow-a:color-mix(in srgb,var(--accent-warm) 8%,transparent); --glow-b:color-mix(in srgb,#f0a868 7%,transparent); } html[data-theme="light"]{ --topo-op:.07; --grain-op:.018; --glow-a:color-mix(in srgb,var(--accent-warm) 9%,transparent); --glow-b:color-mix(in srgb,#fcd9b6 26%,transparent); } /* Hintergrund-Layer (klick-transparent). Glow hinter dem Inhalt, Topo+Korn als feiner Film darüber. */ .bg-glow{position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(58% 48% at 0% 0%,var(--glow-a),transparent 60%),radial-gradient(54% 46% at 100% 100%,var(--glow-b),transparent 62%)} .bg-topo{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--topo-op); background-repeat:repeat-y;background-position:50% 0;background-size:1400px auto; -webkit-mask-image:radial-gradient(140% 105% at 50% 38%,#000 48%,transparent 92%);mask-image:radial-gradient(140% 105% at 50% 38%,#000 48%,transparent 92%); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cg fill='none' stroke='%237b96c8' stroke-width='1'%3E%3Cpath d='M0 180 C 300 120 600 240 900 170 S 1400 120 1400 200'/%3E%3Cpath d='M0 360 C 320 300 620 420 940 350 S 1400 300 1400 380'/%3E%3Cpath d='M0 560 C 300 500 640 620 960 540 S 1400 500 1400 580'/%3E%3Cpath d='M0 760 C 340 700 640 820 960 740 S 1400 700 1400 780'/%3E%3C/g%3E%3C/svg%3E")} html[data-theme="light"] .bg-topo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cg fill='none' stroke='%234a6aa0' stroke-width='1'%3E%3Cpath d='M0 180 C 300 120 600 240 900 170 S 1400 120 1400 200'/%3E%3Cpath d='M0 360 C 320 300 620 420 940 350 S 1400 300 1400 380'/%3E%3Cpath d='M0 560 C 300 500 640 620 960 540 S 1400 500 1400 580'/%3E%3Cpath d='M0 760 C 340 700 640 820 960 740 S 1400 700 1400 780'/%3E%3C/g%3E%3C/svg%3E")} .bg-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);background-size:170px 170px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} @media (prefers-reduced-data:reduce){.bg-grain{display:none}} /* Fraunces öfter (nutzt die bestehende @font-face 'BrandSerif') */ .section-title{font-family:'BrandSerif',Georgia,serif;font-weight:580;font-variation-settings:'opsz' 80,'SOFT' 50,'wght' 580;letter-spacing:-.01em;margin-bottom:16px} .section-title .accent{font-variation-settings:'opsz' 72,'SOFT' 80,'wght' 480} .price{font-family:'BrandSerif',Georgia,serif;font-weight:600;font-variation-settings:'opsz' 36,'wght' 600;font-variant-numeric:tabular-nums lining-nums;font-size:30px;line-height:1} .dropcap::first-letter{font-family:'BrandSerif',Georgia,serif;font-weight:600;font-variation-settings:'opsz' 144,'SOFT' 40,'wght' 600;float:left;font-size:3.1em;line-height:.8;margin:.04em .14em 0 0;color:var(--accent-warm)} footer .brandmark{font-size:1.05em} /* Mikro-Verfeinerungen */ .fd,.td,.chip{font-weight:500} .section-sub{text-wrap:pretty} ::selection{background:color-mix(in srgb,var(--accent-warm) 30%,transparent)} /* ── Geräte-Mockups / Screenshot-Platzhalter ── */ .showcase-wrap{display:flex;align-items:center;gap:44px;flex-wrap:wrap;justify-content:center} .showcase-text{flex:1 1 300px;min-width:280px} .showcase-text .section-sub{margin-bottom:0} .device-row{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:6px} .everywhere{text-align:center} .everywhere .section-sub{margin-left:auto;margin-right:auto} .phone-frame{width:262px;aspect-ratio:9/19.3;border-radius:38px;padding:9px;background:linear-gradient(155deg,#2a3142,#10141d);box-shadow:0 30px 60px -22px rgba(0,0,0,.55);position:relative;flex:none} .phone-frame.sm{width:172px;border-radius:30px} .phone-frame .screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden} .phone-frame.sm .screen{border-radius:23px} .phone-frame::after{content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);width:42%;height:19px;background:#10141d;border-radius:0 0 13px 13px;z-index:2} .phone-frame.sm::after{height:14px;top:12px} .tablet-frame{width:min(400px,82vw);aspect-ratio:16/10.5;border-radius:22px;padding:12px;background:linear-gradient(155deg,#2a3142,#10141d);box-shadow:0 30px 60px -22px rgba(0,0,0,.5);flex:none} .tablet-frame .screen{width:100%;height:100%;border-radius:12px;overflow:hidden} .browser-frame{width:min(460px,88vw);aspect-ratio:16/10.6;border-radius:14px;overflow:hidden;background:#10141d;box-shadow:0 30px 60px -22px rgba(0,0,0,.5);flex:none;border:1px solid #20283a} .browser-frame .bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 13px;background:#1b2230} .browser-frame .bar i{width:10px;height:10px;border-radius:50%;background:#39414f} .browser-frame .screen{width:100%;height:calc(100% - 30px);overflow:hidden} .shot-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:14px;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.3; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--bg-surface)) 0 13px,var(--bg-surface) 13px 26px)} .shot-ph .big{font-size:30px} .shot-ph span{font-size:11px;font-weight:500;color:var(--text-faint)} .shot{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;cursor:zoom-in} /* Lightbox: Klick auf Screenshot → abdunkeln + flüssig groß */ .lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(7,9,16,0);transition:background .38s ease;cursor:zoom-out} .lightbox.open{display:flex} .lightbox.show{background:rgba(7,9,16,.9)} .lightbox img{max-width:min(94vw,860px);max-height:90vh;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);display:block}