/* Völk AI — Startseite voelk.ai (28.09.2026). Ergänzt styles.css.
   Aufbau wie /sales-coach: dunkler Einstieg, heller Hauptteil, dunkler Abschluss, Übergänge ohne harte Kante.
   Die Muster aus coach.css (hell, Dämmerung, Einblenden, Fragen, Aktionsleiste) sind hier bewusst übernommen,
   damit die Startseite nicht von Änderungen an der Landingpage abhängt. Farbwerte bei Änderungen in beiden Dateien pflegen. */

/* ---------- Grundlagen ---------- */
body.start { background: #071022; --kopf-h: 72px; }
html { scroll-padding-top: 88px; }
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-voll { fill: currentColor; stroke: none; }
.start .titel { text-wrap: balance; }
.start .sektion-kopf .lead { font-size: 18px; }
.start .sektion-kopf.mitte { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.start .sektion-kopf.mitte .marker { justify-content: center; }
.start .chip { gap: 8px; }
ul.chips { margin: 0; padding: 0; list-style: none; }
.start .chip .ic { width: 16px; height: 16px; }
.knopf .ic { width: 18px; height: 18px; }
.knopf-mittel { height: 48px; padding: 0 22px; font-size: 15px; }
.js .einblenden { opacity: 0; transform: translateY(20px); transition: opacity 760ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 760ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .einblenden.sichtbar { opacity: 1; transform: none; }
.js .einblenden.v1 { transition-delay: 90ms; }
.js .einblenden.v2 { transition-delay: 180ms; }
.js .einblenden.v3 { transition-delay: 270ms; }

/* Symbol-Kacheln und kleine Bausteine */
.kachel { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.kachel .ic { width: 21px; height: 21px; }
.kachel.mint { background: rgba(43, 224, 168, 0.13); color: var(--mint); }
.kachel.blau { background: rgba(91, 140, 255, 0.14); color: #9DB4FF; }
.kachel.violett { background: rgba(167, 139, 250, 0.15); color: var(--violett); }
.kachel.gross { width: 50px; height: 50px; border-radius: 14px; }
.kachel.gross .ic { width: 22px; height: 22px; }
.app-icon { display: block; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; }
.lampe { display: inline-block; width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.lampe.bernstein { background: #F0B458; box-shadow: 0 0 18px rgba(240, 180, 88, 0.8); }
.status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status.mint { background: rgba(43, 224, 168, 0.12); color: var(--mint); }
.status.bernstein { background: rgba(240, 180, 88, 0.12); color: #F7C77B; }
.status.violett { background: rgba(167, 139, 250, 0.14); color: #C4B5FD; }
.haken-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.haken-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text); }
.haken-liste .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--mint); }
.haken-liste.bernstein .ic { color: #F7C77B; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--link); }
.textlink .ic { width: 16px; height: 16px; transition: transform 160ms ease; }
.textlink:hover .ic { transform: translateX(2px); }

/* ---------- Kopf ---------- */
.start .kopf { background: rgba(7, 16, 34, 0.84); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); }
.start .kopf .behaelter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; height: var(--kopf-h); }
.start .kopf .marke { justify-self: start; }
.haupt-navi > ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.navi-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 0; border: 0; background: none; font: 600 14px/1 var(--schrift-ui); color: var(--text-2); cursor: pointer; transition: color 160ms ease; }
.navi-link:hover, .navi-link[aria-expanded="true"], .navi-link.aktiv { color: var(--text); }
.navi-link .ic { width: 15px; height: 15px; transition: transform 200ms ease; }
.navi-link[aria-expanded="true"] .ic { transform: rotate(180deg); }
.navi-link.aktiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2BE0A8, #5B8CFF); }
.start .kopf-rechts { grid-column: 3; justify-self: end; gap: 20px; }
.start .kopf .knopf-klein { height: 40px; padding: 0 16px; }
.start .kopf .knopf-klein .ic { width: 16px; height: 16px; }
.menue-knopf .zu { display: none; }
.menue-knopf[aria-expanded="true"] .auf { display: none; }
.menue-knopf[aria-expanded="true"] .zu { display: block; }

/* Projekte-Menü (Desktop): heller als die Seite, dahinter ein Schleier mit Unschärfe */
.mega { position: absolute; left: var(--rand); right: var(--rand); top: calc(100% + 10px); z-index: 40; padding: 16px; border-radius: 24px; background: #111B36; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(2, 6, 20, 0.4); }
.mega[hidden] { display: none; }
.mega:not([hidden]) { animation: mega-auf 180ms ease-out; }
.mega-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: 12px; }
.mega-karte { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.mega-sc { background: radial-gradient(420px 220px at 100% 0%, rgba(61, 107, 255, 0.30), rgba(61, 107, 255, 0) 70%), rgba(61, 107, 255, 0.08); border-color: rgba(91, 140, 255, 0.38); }
.mega-kopf { display: flex; align-items: center; gap: 12px; }
.mega-kopf .name { display: block; font-family: var(--schrift-titel); font-size: 17px; font-weight: 600; color: var(--text); }
.mini-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; font-weight: 700; }
.mini-status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.mini-status.mint { color: var(--mint); }
.mini-status.bernstein { color: #F7C77B; }
.mini-status.violett { color: #C4B5FD; }
.mega-karte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.mega-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 4px; }
.mega-aktion .knopf { height: 44px; padding: 0 18px; font-size: 14.5px; }
.mega-aktion .knopf .ic { width: 16px; height: 16px; }
.mega-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.mega-link:hover { color: #FFFFFF; }
.mega-link .ic { width: 14px; height: 14px; }
.schleier { position: fixed; inset: 0; z-index: 29; background: rgba(3, 7, 18, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.schleier.an { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
.mega-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 16px 20px 6px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--text-2); }
.mega-fuss span { display: inline-flex; align-items: center; gap: 10px; }
.mega-fuss .ic { width: 17px; height: 17px; color: var(--link); }
.mega-fuss a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.mega-fuss a .ic { width: 14px; height: 14px; color: inherit; }

/* Menü-Blatt (Handy und Tablet) */
.blatt { position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: 0; z-index: 35; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 20px var(--rand) calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(420px 300px at 100% 100%, rgba(61, 107, 255, 0.22), rgba(61, 107, 255, 0) 65%), radial-gradient(360px 260px at 0% 0%, rgba(43, 224, 168, 0.10), rgba(43, 224, 168, 0) 60%), #0B1226; }
.blatt[hidden] { display: none; }
body.blatt-offen { overflow: hidden; }
.blatt-titel { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.blatt-projekte { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0 0 10px; list-style: none; border-bottom: 1px solid var(--linie); }
.blatt-projekte a { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.blatt-projekte .text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.blatt-projekte .name { font-family: var(--schrift-titel); font-size: 16px; font-weight: 600; color: var(--text); }
.blatt-projekte .satz { font-size: 13px; line-height: 1.4; color: var(--muted); }
.blatt-projekte .ic { width: 18px; height: 18px; color: var(--muted); }
.blatt-projekte .kachel, .blatt-projekte .app-icon { width: 42px; height: 42px; }
.blatt-links { display: flex; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; }
.blatt-links a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--linie); font-family: var(--schrift-titel); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.blatt-links .ic { width: 18px; height: 18px; color: var(--muted); }
.blatt-aktionen { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.blatt-aktionen .knopf { width: 100%; height: 52px; }
.blatt-aktionen p { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Einstieg ---------- */
.start-hero { position: relative; overflow: visible; padding: 88px 0 104px; }
.start-hero .schein { position: absolute; inset: 0 0 -35% 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.start-hero .n1 { right: -8%; top: -30%; width: 60%; height: 90%; background: radial-gradient(closest-side, rgba(43, 224, 168, 0.20), rgba(43, 224, 168, 0) 72%); animation: treiben1 18s ease-in-out infinite; }
.start-hero .n2 { right: 4%; top: 14%; width: 46%; height: 70%; background: radial-gradient(closest-side, rgba(61, 107, 255, 0.34), rgba(61, 107, 255, 0) 72%); animation: treiben2 22s ease-in-out infinite; }
.start-hero .n3 { right: 34%; top: 50%; width: 40%; height: 55%; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0) 72%); animation: treiben3 20s ease-in-out infinite; }
.hero-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 64px; align-items: center; }
.start-hero .hero-inhalt { gap: 26px; align-items: flex-start; max-width: none; }
.start-hero h1 { margin: 0; font-size: clamp(40px, 4.4vw, 62px); line-height: 1.03; letter-spacing: -0.03em; }
.h1-zweit { display: block; margin-top: 18px; font-size: 0.48em; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-2); }
.start-hero .unter { max-width: 600px; font-size: clamp(17px, 1.35vw, 19px); }
.start-hero .aktionen { margin-top: 4px; }
.neu-hinweis { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #DCE5FF; transition: border-color 160ms ease, background-color 160ms ease; }
.neu-hinweis:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); }
.neu-hinweis .neu { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(43, 224, 168, 0.14); color: var(--mint); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; }
.neu-hinweis .neu::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 10px rgba(43, 224, 168, 0.9); }
.neu-hinweis .ic { width: 15px; height: 15px; flex-shrink: 0; }
.beleg-reihe { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 4px 0 0; padding: 0; list-style: none; }
.beleg-reihe li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.beleg-reihe .ic { width: 16px; height: 16px; color: var(--mint); }

/* Collage aus den drei Projekten */
.collage { position: relative; height: 650px; }
.collage-karte { position: absolute; animation: schweben 8s ease-in-out infinite; }
.collage-px { right: 0; top: 0; width: 252px; z-index: 2; animation-duration: 9s; animation-delay: -3s; }
.collage-sc { left: 0; top: 132px; width: 392px; z-index: 3; }
.collage-fo { right: 0; top: 488px; width: 292px; z-index: 4; animation-duration: 10s; animation-delay: -6s; }
.collage .etikett { position: absolute; top: -15px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: #0C1A38; border: 1px solid var(--linie-stark); font-size: 12px; font-weight: 700; color: var(--text); box-shadow: 0 8px 24px rgba(2, 6, 20, 0.5); }
.collage .etikett .lampe { width: 7px; height: 7px; }
.collage .etikett.mint { border-color: rgba(43, 224, 168, 0.45); }
.collage .etikett.bernstein { border-color: rgba(240, 180, 88, 0.45); }
.collage .etikett.violett { border-color: rgba(167, 139, 250, 0.5); }

.anruf-rahmen { padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linie-stark); box-shadow: 0 40px 100px rgba(2, 6, 20, 0.6); }
.anruf { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.06); background: radial-gradient(520px 320px at 50% 35%, #0F2450 0%, #0A1830 65%); color: #E9F0FC; }
.anruf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 4px; }
.anruf-kopf .t { font-family: var(--schrift-titel); font-size: 13.5px; font-weight: 600; }
.anruf-kopf .s { font-size: 11px; color: #8DA2C4; }
.anruf-kopf .zeit { font-family: var(--schrift-titel); font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anruf-kopf .zeit span { font-size: 11px; font-weight: 500; color: #8DA2C4; }
.anruf-mitte { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 14px 22px 16px; text-align: center; }
.anruf .stimme { gap: 16px; }
.anruf .kugel-halter { width: 68px; height: 68px; }
.anruf .welle { height: 26px; }
.anruf .sprecher { font-size: 10.5px; }
.anruf .zitat { font-size: 16.5px; max-width: 330px; }
.anruf .dran { padding: 7px 13px; font-size: 11.5px; }
.anruf .dran .ic { width: 14px; height: 14px; }
.anruf-fuss { display: flex; justify-content: center; padding: 0 18px 16px; }
.anruf .auflegen { height: 32px; padding: 0 14px; font-size: 11.5px; }

.px-mini { display: flex; flex-direction: column; gap: 11px; padding: 18px; border-radius: 20px; border: 1px solid rgba(240, 180, 88, 0.30); background: linear-gradient(180deg, rgba(42, 31, 14, 0.94), rgba(13, 15, 24, 0.96)); box-shadow: 0 30px 80px rgba(2, 6, 20, 0.55); }
.px-mini .kopfzeile { display: flex; align-items: center; gap: 10px; }
.px-mini .app-icon { width: 30px; height: 30px; border-radius: 8px; }
.px-mini .name { font-family: var(--schrift-titel); font-size: 14px; font-weight: 600; color: #F6EBD8; }
.px-mini .unter-name { font-size: 11px; color: #B8A27E; }
.px-mini .label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #4ADE80; }
.px-mini .wert { font-family: var(--schrift-titel); font-size: 34px; font-weight: 600; line-height: 1; color: #4ADE80; }
.px-mini .balken { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.px-mini .balken i { display: block; width: 78%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22C55E, #4ADE80); }
.px-mini .modelle { display: flex; flex-wrap: wrap; gap: 6px; }
.px-mini .modelle span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 700; color: #E8DCC6; }
.px-mini .modelle .ic { width: 12px; height: 12px; color: #4ADE80; }

.fo-mini { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(167, 139, 250, 0.32); background: rgba(13, 20, 44, 0.95); box-shadow: 0 30px 80px rgba(2, 6, 20, 0.55); }
.fo-mini .kopfzeile { display: flex; align-items: center; gap: 12px; }
.fo-mini .kachel { width: 40px; height: 40px; }
.fo-mini .kachel .ic { width: 20px; height: 20px; }
.fo-mini .name { font-size: 13px; font-weight: 700; color: var(--text); }
.fo-mini .unter-name { font-size: 11.5px; color: var(--muted); }
.fo-mini p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #C9D4EE; }
.pod-welle { display: flex; align-items: center; gap: 2px; height: 28px; }
.pod-welle i { display: block; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #A78BFA, #5B8CFF); }

/* ---------- Projekte ---------- */
.projekte { padding-top: 32px; }
.feature { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--linie-stark); }
.feature + .feature { margin-top: 22px; }
.feature h3 { margin: 0; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.025em; }
.feature-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.feature-text > p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.feature-marke { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.feature-name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--schrift-titel); font-size: 15px; font-weight: 600; color: var(--text); }
.feature-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hoer-knopf { padding-left: 8px; padding-right: 20px; }
.hoer-knopf .puls { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(43, 224, 168, 0.14); color: var(--mint); }
.hoer-knopf .puls .ic { width: 13px; height: 13px; margin-left: 2px; }

.feature-sc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: center; padding: 52px 52px 60px; background: radial-gradient(900px 420px at 92% 0%, rgba(61, 107, 255, 0.24), rgba(61, 107, 255, 0) 60%), radial-gradient(700px 380px at 0% 100%, rgba(43, 224, 168, 0.13), rgba(43, 224, 168, 0) 60%), rgba(255, 255, 255, 0.03); }
.feature-bild { position: relative; }
.geraet { border-radius: 18px; background: #0B1428; padding: 10px; border: 1px solid var(--linie); box-shadow: 0 50px 100px -30px rgba(2, 6, 20, 0.85); }
.geraet .leiste { display: flex; gap: 6px; padding: 4px 6px 10px; }
.geraet .leiste i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.geraet img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: #071022; }
.trainer-moment { position: absolute; left: -40px; bottom: -30px; width: 340px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; background: rgba(11, 20, 40, 0.97); border: 1px solid rgba(240, 180, 88, 0.35); box-shadow: 0 24px 60px rgba(2, 6, 20, 0.65); }
.trainer-moment .wer { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #C4B5FD; }
.trainer-moment .wer .ic { width: 14px; height: 14px; }
.trainer-moment .zeile { display: flex; gap: 10px; align-items: flex-start; }
.zeitmarke { flex-shrink: 0; height: 24px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; background: rgba(240, 180, 88, 0.18); color: #F7C77B; font: 700 12px/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.trainer-moment p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }

.feature-px { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: 470px; padding: 0 56px 0 24px; border-color: rgba(240, 180, 88, 0.22); background: radial-gradient(640px 420px at 24% 100%, rgba(240, 180, 88, 0.17), rgba(240, 180, 88, 0) 62%), radial-gradient(600px 320px at 100% 0%, rgba(61, 107, 255, 0.12), rgba(61, 107, 255, 0) 60%), rgba(255, 255, 255, 0.03); }
.px-telefone { position: relative; align-self: stretch; min-height: 470px; }
.px-telefone::before { content: ""; position: absolute; left: 20%; top: 30%; width: 60%; height: 60%; border-radius: 999px; background: radial-gradient(closest-side, rgba(240, 180, 88, 0.30), rgba(240, 180, 88, 0) 72%); filter: blur(40px); }
/* Unten verankert: Die Handys ragen immer über die Kartenkante hinaus, egal wie hoch die Karte wird. */
.px-telefone img { position: absolute; width: 250px; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); }
.px-telefone .t1 { left: 36px; bottom: -100px; }
.px-telefone .t2 { left: 250px; bottom: -40px; }
.px-text { padding: 48px 0; gap: 18px; }
.px-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.px-kopf .app-icon { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.px-kopf .name { font-family: var(--schrift-titel); font-size: 20px; font-weight: 600; color: var(--text); }
.px-kopf .unter-name { font-size: 13px; color: var(--muted); }
.feature-px .textlink { color: #F7C77B; margin-top: 4px; }
.feature-px .haken-liste { gap: 8px; }

.feature-fo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 44px 52px; border-color: rgba(167, 139, 250, 0.28); background: radial-gradient(700px 320px at 100% 50%, rgba(167, 139, 250, 0.20), rgba(167, 139, 250, 0) 65%), radial-gradient(500px 260px at 0% 0%, rgba(43, 224, 168, 0.08), rgba(43, 224, 168, 0) 60%), rgba(255, 255, 255, 0.03); }
.feature-fo .feature-text { gap: 16px; }
.feature-fo h3 { font-size: clamp(24px, 2.4vw, 30px); }
.feature-fo .feature-text > p { font-size: 16px; }
.feature-fo .textlink { color: #C4B5FD; }
.themen { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.themen .chip { height: 34px; padding: 0 14px; font-size: 13px; }
.themen .chip .ic { color: var(--violett); }

/* ---------- Übergänge ohne harte Kante ---------- */
.daemmerung { position: relative; height: clamp(150px, 18vw, 250px); overflow: hidden; pointer-events: none; }
.daemmerung.ab { background: linear-gradient(180deg, #071022 0%, #0B1A3B 20%, #1D3470 42%, #7D95CC 68%, #DCE5F6 88%, #F5F8FC 100%); }
.daemmerung.auf { background: linear-gradient(0deg, #071022 0%, #0B1A3B 20%, #1D3470 42%, #7D95CC 68%, #DCE5F6 88%, #F5F8FC 100%); }
.daemmerung::before { content: ""; position: absolute; inset: -20% -10%; background: radial-gradient(40% 55% at 18% 48%, rgba(43, 224, 168, 0.22), rgba(43, 224, 168, 0) 70%), radial-gradient(38% 55% at 82% 44%, rgba(167, 139, 250, 0.24), rgba(167, 139, 250, 0) 70%), radial-gradient(45% 60% at 52% 60%, rgba(61, 107, 255, 0.18), rgba(61, 107, 255, 0) 70%); filter: blur(10px); animation: treiben2 28s ease-in-out infinite; }
.daemmerung.ab::before { -webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 40%, #000 56%, transparent 82%); mask-image: linear-gradient(180deg, transparent 14%, #000 40%, #000 56%, transparent 82%); }
.daemmerung.auf::before { -webkit-mask-image: linear-gradient(0deg, transparent 14%, #000 40%, #000 56%, transparent 82%); mask-image: linear-gradient(0deg, transparent 14%, #000 40%, #000 56%, transparent 82%); }

/* ---------- Heller Hauptteil ---------- */
.hell { --text: #0C1B33; --text-2: #3D4E6E; --muted: #5A6B8C; --link: #1F5EFF; --flaeche: #FFFFFF; --flaeche-hover: #FFFFFF; --linie: #DFE6F2; --linie-stark: #C8D4E8; background: #F5F8FC; color: var(--text); color-scheme: light; }
.hell a:hover { color: var(--link); }
.hell ::selection { background: rgba(31, 94, 255, 0.18); }
.hell :focus-visible { outline-color: #1F5EFF; }
.hell .panel { background: #FFFFFF; border-color: var(--linie); box-shadow: 0 1px 2px rgba(12, 27, 51, 0.04), 0 18px 40px -18px rgba(12, 27, 51, 0.14); }
.hell .knopf-sekundaer { border-color: var(--linie-stark); background: #FFFFFF; color: var(--text); }
.hell .knopf-sekundaer:hover { border-color: #9FB2D6; background: #FFFFFF; color: var(--text); }
.hell .knopf-primaer:hover { color: #FFFFFF; }
.hell .marker { color: var(--link); }
.hell .marker::before { background: var(--link); }
.hell .chip { border-color: var(--linie-stark); background: #FFFFFF; color: var(--text); }
.hell .chip .ic { color: #1F5EFF; }
.hell .sektion { padding: 72px 0 48px; }
.hell .sektion:first-child { padding-top: 88px; }
.hell .sektion:last-child { padding-bottom: 104px; }
.hell .kachel.mint { background: #E6FBF4; color: #0E9F74; }
.hell .kachel.blau { background: #EAF0FF; color: #1F5EFF; }
.hell .kachel.violett { background: #F1EDFF; color: #7C5CFA; }
.nummer { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #0C1B33; color: #FFFFFF; font: 700 14px/1 var(--schrift-titel); }
.nummer.blau { background: #1F5EFF; }
.etikett-hell { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #EAF0FF; color: #1F5EFF; font-size: 12px; font-weight: 700; white-space: nowrap; }
.etikett-hell.grau { background: #EEF2F8; color: var(--text-2); }

/* Leistungen: Ablauf mit Verzweigung */
.ablauf { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); grid-template-rows: 1fr 1fr; row-gap: 20px; }
.schritt-eins { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 18px; padding: 34px 34px 30px; }
.gabel { grid-column: 2; grid-row: 1 / span 2; position: relative; }
.option-a { grid-column: 3; grid-row: 1; }
.option-b { grid-column: 3; grid-row: 2; }
.karten-kopf { display: flex; align-items: center; gap: 12px; }
.schritt-eins h3, .option-karte h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
.schritt-eins h3 { font-size: 28px; }
.schritt-eins > p, .option-karte > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.fragen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frage-kachel { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: #F5F8FC; border: 1px solid var(--linie); }
.frage-kachel .kopf-zeile { display: flex; align-items: center; gap: 10px; }
.frage-kachel .kachel { width: 34px; height: 34px; border-radius: 10px; }
.frage-kachel .kachel .ic { width: 17px; height: 17px; }
.frage-kachel h4 { margin: 0; font-family: var(--schrift-titel); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.frage-kachel p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ergebnis { margin-top: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #E6FBF4; border: 1px solid #BFEFDD; }
.ergebnis .ic { width: 18px; height: 18px; margin-top: 2px; color: #0E9F74; }
.ergebnis p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.option-karte { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px; }
.option-karte h3 { font-size: 24px; }
.option-karte > p { font-size: 15.5px; }
.option-karte .chips { margin-top: auto; gap: 8px; }
.option-karte .chip { height: 34px; padding: 0 13px; font-size: 13px; }
.gabel .stamm { position: absolute; left: 0; top: 50%; width: 30px; border-top: 2px dashed #1F5EFF; }
.gabel .arm { position: absolute; left: 30px; right: 8px; top: calc(25% - 5px); bottom: calc(25% - 5px); border: 2px dashed #1F5EFF; border-right: 0; border-radius: 14px 0 0 14px; }
.gabel .punkt { position: absolute; left: -5px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 999px; background: #1F5EFF; }
.gabel .spitze { position: absolute; right: -2px; width: 16px; height: 16px; color: #1F5EFF; stroke-width: 2.2; }
.gabel .spitze.oben { top: calc(25% - 5px - 7px); }
.gabel .spitze.unten { bottom: calc(25% - 5px - 7px); }
.gabel .oder { position: absolute; left: 30px; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 999px; background: #F5F8FC; border: 1px solid var(--linie-stark); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); }
.gabel .mobil { display: none; }
.einsatz { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.einsatz .etikett-klein { margin-right: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.eu-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.eu-punkt { display: flex; gap: 16px; padding: 24px; }
.eu-punkt .kachel { width: 42px; height: 42px; }
.eu-punkt h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.eu-punkt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.potenzial-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 28px; padding: 36px 44px; border-radius: 24px; background: radial-gradient(600px 260px at 100% 0%, rgba(61, 107, 255, 0.45), rgba(61, 107, 255, 0) 60%), radial-gradient(500px 240px at 0% 100%, rgba(43, 224, 168, 0.22), rgba(43, 224, 168, 0) 60%), #0C1B33; color: #EEF3FF; }
.potenzial-cta h3 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; color: #FFFFFF; }
.potenzial-cta p { margin: 0; font-size: 16px; line-height: 1.55; color: #A9B8D9; }
.potenzial-cta .wege { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.potenzial-cta .mail { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #FFFFFF; }
.hell .potenzial-cta .mail:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.potenzial-cta .mail .ic { width: 17px; height: 17px; }

/* Ansatz */
.ansatz-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.venn-karte { padding: 36px 20px 28px; }
.venn { position: relative; max-width: 480px; margin: 0 auto; }
.venn svg { display: block; width: 100%; height: auto; overflow: visible; }
.venn circle { stroke-width: 1.5; mix-blend-mode: multiply; }
.venn .t { font-family: var(--schrift-titel); font-size: 15px; font-weight: 600; fill: #0C1B33; text-anchor: middle; }
.venn .s { font-family: var(--schrift-ui); font-size: 12px; font-weight: 500; fill: #5A6B8C; text-anchor: middle; }
.venn-mitte { position: absolute; left: 50%; top: 47.44%; width: 17.5%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(12, 27, 51, 0.18), 0 0 0 6px rgba(255, 255, 255, 0.6); }
.venn-mitte img { width: 66%; height: auto; }
.saeulen { display: flex; flex-direction: column; }
.saeule { display: flex; gap: 18px; padding: 24px 0; }
.saeule + .saeule { border-top: 1px solid var(--linie); }
.saeule h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
.saeule p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.belegzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.belegzahl { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.belegzahl .wert { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(40px, 4.2vw, 52px); line-height: 1; letter-spacing: -0.035em; background: linear-gradient(90deg, #1F5EFF, #7C5CFA); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.belegzahl .was { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--text); }
.belegzahl .plus { font-size: 0.62em; letter-spacing: -0.02em; }
.saeulen-etikett { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.saeulen-etikett::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.saeulen-etikett.mint { background: #E6FBF4; color: #0E9F74; }
.saeulen-etikett.blau { background: #EAF0FF; color: #1F5EFF; }
.saeulen-etikett.violett { background: #F1EDFF; color: #7C5CFA; }
.kombination { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-top: 48px; }
.kombination h3 { margin: 0; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -0.02em; }
.kombination > p:last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.belegzahl .quelle { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.belegzahl .quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Über uns */
.gruender { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 52px; align-items: center; padding: 40px; }
.gruender picture { display: block; }
.gruender-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: #EEF2F8; box-shadow: 0 1px 2px rgba(12, 27, 51, 0.05), 0 30px 60px -28px rgba(12, 27, 51, 0.35); }
.gruender-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.gruender-text h3 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.gruender-text .rolle { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); }
.gruender-text > p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.zwei-welten { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zwei-welten li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: #F5F8FC; border: 1px solid var(--linie); font-size: 13.5px; font-weight: 600; }
.zwei-welten .ic { width: 16px; height: 16px; color: #1F5EFF; }
.team-titel { text-align: center; margin: 56px 0 20px; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; }
.team-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.team-karte { display: flex; flex-direction: column; gap: 14px; padding: 30px; }
.team-karte .karten-kopf { gap: 14px; }
.team-karte h3 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.team-karte p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.team-karte .chips { gap: 8px; margin-top: 4px; }
.team-karte .chip { height: 34px; padding: 0 13px; font-size: 13px; }

/* ---------- Dunkler Abschluss ---------- */
.dunkel-ende { background: #071022; }
.forschung { position: relative; padding-top: 24px; }
.forschung .schein-oben { position: absolute; left: 15%; top: -6%; width: 70%; height: 520px; border-radius: 999px; background: radial-gradient(closest-side, rgba(167, 139, 250, 0.20), rgba(167, 139, 250, 0) 72%); filter: blur(70px); pointer-events: none; animation: treiben3 24s ease-in-out infinite; }
.forschung .behaelter { position: relative; }
.forschung-kopf { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 900px; margin: 0 auto 48px; text-align: center; }
.forschung-kopf .marker { justify-content: center; }
.forschung-kopf h2 { margin: 0; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
.forschung-kopf p { margin: 0; max-width: 760px; font-size: 18.5px; line-height: 1.55; color: var(--text-2); }
.felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feld { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--linie); }
.feld h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; }
.feld p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.fokus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 56px; }
.richtung-karte { padding: 36px 32px 28px; border-radius: 24px; background: radial-gradient(420px 260px at 50% 40%, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0) 70%), rgba(255, 255, 255, 0.03); border: 1px solid var(--linie); }
.richtung { display: block; width: 100%; height: auto; overflow: visible; }
.richtung .chaos { stroke: rgba(201, 212, 238, 0.55); }
.richtung .weg { stroke: url(#rg-pfeil); }
.richtung .chaos, .richtung .weg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.richtung .band { fill: url(#rg-band); stroke: rgba(167, 139, 250, 0.55); stroke-width: 1.5; }
.richtung .pille { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.richtung .band-t { font-family: var(--schrift-titel); font-size: 13px; font-weight: 600; fill: #FFFFFF; text-anchor: middle; }
.richtung .pille-t { font-family: var(--schrift-ui); font-size: 12px; font-weight: 700; fill: #DCE5FF; text-anchor: middle; }
.richtung .legende { font-family: var(--schrift-ui); font-size: 12px; font-weight: 600; fill: #8FA3CC; text-anchor: middle; }
.fokus-text { display: flex; flex-direction: column; gap: 22px; }
.fokus-text h3 { margin: 0; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.fokus-text > p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.methoden { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.methoden li { display: flex; gap: 16px; align-items: flex-start; }
.methoden h4 { margin: 0 0 4px; font-family: var(--schrift-titel); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.methoden p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.mitmachen { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-top: 56px; padding: 48px 52px; border-radius: 28px; border: 1px solid rgba(167, 139, 250, 0.30); background: radial-gradient(800px 380px at 100% 0%, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0) 60%), radial-gradient(700px 360px at 0% 100%, rgba(43, 224, 168, 0.12), rgba(43, 224, 168, 0) 60%), rgba(255, 255, 255, 0.03); }
.mitmachen-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mitmachen-text .marker { color: #C4B5FD; }
.mitmachen-text .marker::before { background: #C4B5FD; }
.mitmachen-text h3 { margin: 0; font-size: clamp(28px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.025em; }
.mitmachen-text p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.mitmachen-text .wege { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.mitmachen-text .wege span { font-size: 13.5px; color: var(--muted); }
.podcast-karte { display: flex; gap: 20px; align-items: center; padding: 22px; border-radius: 22px; background: rgba(6, 11, 26, 0.75); border: 1px solid var(--linie-stark); box-shadow: 0 30px 80px rgba(2, 6, 20, 0.5); }
.podcast-cover { position: relative; overflow: hidden; width: 132px; height: 132px; flex-shrink: 0; border-radius: 18px; background: radial-gradient(circle at 26% 24%, rgba(43, 224, 168, 0.95), rgba(43, 224, 168, 0) 52%), radial-gradient(circle at 78% 76%, rgba(61, 107, 255, 1), rgba(61, 107, 255, 0) 58%), radial-gradient(circle at 76% 18%, rgba(167, 139, 250, 0.9), rgba(167, 139, 250, 0) 48%), #0A1830; }
.podcast-cover .ic { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: #FFFFFF; }
.podcast-cover span { position: absolute; left: 12px; right: 10px; bottom: 10px; font-family: var(--schrift-titel); font-size: 15px; font-weight: 700; line-height: 1.1; color: #FFFFFF; hyphens: manual; }
.podcast-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.podcast-text .etikett-klein { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #C4B5FD; }
.podcast-text .t { font-family: var(--schrift-titel); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--text); }
.podcast-text .s { font-size: 13px; color: var(--muted); }

/* Kontakt */
.kontakt-box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 56px; border-radius: 28px; border: 1px solid var(--linie-stark); background: radial-gradient(900px 400px at 85% 0%, rgba(61, 107, 255, 0.28), rgba(61, 107, 255, 0) 60%), radial-gradient(700px 360px at 5% 100%, rgba(43, 224, 168, 0.16), rgba(43, 224, 168, 0) 60%), rgba(255, 255, 255, 0.03); }
.kontakt-box .text { display: flex; flex-direction: column; gap: 16px; }
.kontakt-box h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.kontakt-box .text > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.kontakt-box .haken-liste { gap: 8px; margin-top: 6px; }
.kontakt-wege-neu { display: flex; flex-direction: column; gap: 12px; }
.kontakt-wege-neu .knopf { width: 100%; }
.kontakt-klein { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--muted); }
.kontakt-klein a { color: var(--text-2); border-bottom: 1px solid var(--linie-stark); }
.kontakt-klein a:hover { color: #FFFFFF; }
.start #kontakt { padding-top: 0; }

/* Fragen */
.start #fragen { padding-top: 0; }
.fragen { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.frage { border-radius: 16px; border: 1px solid var(--linie); background: rgba(255, 255, 255, 0.03); transition: border-color 160ms ease, background-color 160ms ease; }
.frage[open] { border-color: var(--linie-stark); background: rgba(255, 255, 255, 0.05); }
.frage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-family: var(--schrift-titel); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary .ic { width: 18px; height: 18px; color: var(--muted); transition: transform 220ms ease; }
.frage[open] summary .ic { transform: rotate(45deg); }
.frage .antwort { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.frage .antwort p { margin: 0 0 10px; }
.frage .antwort p:last-child { margin-bottom: 0; }
.frage .antwort a { color: var(--text); border-bottom: 1px solid var(--linie-stark); }

/* Fußzeile */
.fuss-gross { padding: 64px 0 32px; }
.fuss-gross .behaelter { display: block; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss-marke { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fuss-marke img { height: 36px; width: auto; margin-left: -4px; }
.fuss-marke p { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.fuss-marke .anschrift { font-size: 13px; color: var(--muted); }
.fuss-spalte { display: flex; flex-direction: column; gap: 12px; }
.fuss-titel { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fuss-spalte ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fuss-spalte a { font-size: 14px; color: var(--text-2); }
.fuss-spalte a:hover { color: #FFFFFF; }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--muted); }

/* Mobile Aktionsleiste */
.mobil-leiste { display: none; }

/* ---------- Bewegung ---------- */
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mega-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .einblenden { opacity: 1; transform: none; transition: none; }
  .collage-karte, .daemmerung::before, .forschung .schein-oben, .start-hero .nordlicht, .mega:not([hidden]) { animation: none; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1180px) {
  .haupt-navi > ul { gap: 22px; }
  .hero-raster { grid-template-columns: minmax(0, 1fr) 470px; gap: 40px; }
  .collage { transform: scale(0.87); transform-origin: right center; }
  .mega-karte { padding: 18px; }
}
@media (max-width: 1100px) {
  .feature-sc { gap: 36px; padding: 44px 40px 52px; }
  .trainer-moment { left: -20px; width: 300px; }
  .feature-px { gap: 32px; padding-right: 40px; }
  .px-telefone .t1 { left: 12px; }
  .px-telefone .t2 { left: 210px; }
}
@media (max-width: 960px) {
  .haupt-navi { display: none; }
  .start .kopf .menue-knopf { display: inline-flex; }
  .mega { display: none !important; }
  .schleier { display: none; }
  .hero-raster { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .collage { transform: none; width: 100%; max-width: 560px; }
  .feature-sc, .feature-fo, .kontakt-box, .mitmachen, .fokus, .ansatz-raster { grid-template-columns: minmax(0, 1fr); }
  .feature-sc { padding: 36px 28px 44px; }
  .trainer-moment { position: relative; left: auto; bottom: auto; width: auto; margin-top: 14px; }
  .feature-px { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding: 0; }
  .px-telefone { min-height: 0; height: 320px; align-self: auto; border-bottom: 1px solid rgba(240, 180, 88, 0.16); overflow: hidden; }
  .px-telefone img { width: 168px; }
  .px-telefone .t1 { left: calc(50% - 176px); top: 70px; bottom: auto; }
  .px-telefone .t2 { left: calc(50% + 4px); top: 34px; bottom: auto; }
  .px-text { padding: 28px; }
  .feature-fo { padding: 36px 28px; gap: 24px; }
  .ablauf { display: flex; flex-direction: column; }
  .gabel { position: static; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
  .gabel .stamm, .gabel .arm, .gabel .punkt, .gabel .spitze, .gabel .oder { display: none; }
  .gabel .mobil { display: contents; }
  .gabel .strich { width: 2px; height: 22px; background: repeating-linear-gradient(180deg, #1F5EFF 0 4px, transparent 4px 9px); }
  .gabel .pille { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--linie-stark); font-size: 12px; font-weight: 700; color: var(--muted); }
  .option-b { margin-top: 12px; }
  .eu-raster, .belegzahlen { grid-template-columns: minmax(0, 1fr); }
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .potenzial-cta { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .venn-karte { max-width: 560px; }
  .gruender { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
  .gruender picture { max-width: 260px; }
  .kontakt-box { padding: 36px 28px; gap: 28px; }
  .mitmachen { padding: 36px 28px; gap: 28px; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body.start { --kopf-h: 64px; padding-bottom: 76px; }
  .start .kopf .behaelter { height: 64px; }
  .start .kopf .marke-bild { height: 34px; }
  .start .kopf-rechts .knopf { display: none; }
  .start-hero { padding: 36px 0 48px; }
  .start-hero h1 { font-size: clamp(34px, 10.5vw, 42px); line-height: 1.05; }
  .h1-zweit { margin-top: 14px; font-size: 0.51em; line-height: 1.25; }
  .start-hero .unter { font-size: 16.5px; line-height: 1.6; }
  .start-hero .aktionen { flex-direction: column; width: 100%; }
  .start-hero .aktionen .knopf { width: 100%; height: 52px; }
  .beleg-reihe { flex-direction: column; gap: 10px; }
  .beleg-reihe li { align-items: flex-start; }
  .beleg-reihe .ic { margin-top: 2px; }
  .neu-hinweis { font-size: 12.5px; padding-right: 12px; }
  .neu-hinweis .lang { display: none; }
  .sektion-kopf { margin-bottom: 28px; }
  .start .sektion-kopf .lead { font-size: 16px; }
  .feature { border-radius: 24px; }
  .feature + .feature { margin-top: 16px; }
  .feature-sc { padding: 26px 20px 24px; gap: 22px; }
  .feature-text { gap: 18px; }
  .feature-text > p { font-size: 15.5px; }
  .feature-aktionen { flex-direction: column; width: 100%; }
  .feature-aktionen .knopf { width: 100%; }
  .geraet { padding: 7px; border-radius: 14px; }
  .geraet .leiste { display: none; }
  .px-telefone { height: 290px; }
  .px-telefone img { width: 156px; }
  .px-telefone .t1 { left: calc(50% - 164px); top: 58px; }
  .px-telefone .t2 { left: calc(50% - 4px); top: 28px; }
  .px-text { padding: 22px 20px 24px; }
  .feature-fo { padding: 26px 20px; }
  .themen .chip { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .hell .sektion { padding: 56px 0 40px; }
  .hell .sektion:first-child { padding-top: 56px; }
  .hell .sektion:last-child { padding-bottom: 72px; }
  .schritt-eins { padding: 24px 20px; }
  .schritt-eins h3 { font-size: 24px; }
  .fragen-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .option-karte { padding: 22px 20px; }
  .option-karte h3 { font-size: 21px; }
  .einsatz { margin-top: 32px; }
  .einsatz .etikett-klein { width: 100%; }
  .potenzial-cta .wege { flex-direction: column; align-items: stretch; width: 100%; }
  .potenzial-cta .wege .knopf { width: 100%; }
  .potenzial-cta .mail { justify-content: center; }
  .potenzial-cta h3 { font-size: 22px; }
  .venn-karte { padding: 24px 12px 16px; }
  .saeule { gap: 14px; }
  .saeule h3 { font-size: 19px; }
  .belegzahl { padding: 22px; }
  .kombination { margin-top: 36px; }
  .gruender { padding: 22px 20px; }
  .gruender-text h3 { font-size: 26px; }
  .gruender-text > p { font-size: 15.5px; }
  .team-karte { padding: 24px 20px; }
  .team-titel { margin: 40px 0 16px; }
  .team-raster { grid-template-columns: minmax(0, 1fr); }
  .forschung-kopf { margin-bottom: 32px; }
  .forschung-kopf p { font-size: 16.5px; }
  .feld { padding: 20px; }
  .fokus { gap: 28px; margin-top: 40px; }
  .richtung-karte { padding: 20px 14px 16px; }
  .mitmachen { margin-top: 40px; padding: 26px 20px; border-radius: 24px; }
  .mitmachen-text .wege { flex-direction: column; align-items: stretch; width: 100%; }
  .mitmachen-text .wege .knopf { width: 100%; }
  .podcast-karte { padding: 16px; gap: 14px; }
  .podcast-cover { width: 96px; height: 96px; border-radius: 14px; }
  .podcast-cover span { font-size: 12.5px; }
  .podcast-text .status { white-space: normal; height: auto; min-height: 28px; padding: 5px 11px; line-height: 1.3; }
  .kontakt-box { padding: 30px 20px; border-radius: 22px; }
  .frage summary { padding: 18px; font-size: 15.5px; }
  .frage .antwort { padding: 0 18px 18px; font-size: 15px; }
  .fuss-gross { padding: 48px 0 28px; }
  .fuss-raster { gap: 32px; }
  .mobil-leiste { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: rgba(7, 16, 34, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 50px rgba(2, 6, 20, 0.5); transform: translateY(160%); transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .mobil-leiste.zeigen { transform: none; }
  .mobil-leiste .knopf { height: 48px; flex: 1; font-size: 15px; padding: 0 14px; }
  .mobil-leiste .knopf-sekundaer { flex: 0 0 auto; width: 48px; padding: 0; }
  body.blatt-offen .mobil-leiste { display: none; }
}
@media (max-width: 600px) {
  /* Handy: keine überlappende Collage, sondern drei eigene Karten – Sales Coach über die volle Breite, Proofex und Forschung nebeneinander */
  .collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; height: auto; padding-top: 15px; }
  .collage-karte { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; display: flex; flex-direction: column; animation: none; }
  .collage-sc { grid-column: 1 / -1; order: -1; }
  .collage-px, .collage-fo { z-index: 4; }
  .collage .etikett { left: 14px; }
  .px-mini, .fo-mini { flex: 1; gap: 10px; padding: 26px 14px 16px; border-radius: 18px; box-shadow: 0 18px 40px rgba(2, 6, 20, 0.5); }
  .px-mini .kopfzeile, .fo-mini .kopfzeile { flex-direction: column; align-items: flex-start; gap: 10px; }
  .px-mini .app-icon, .fo-mini .kachel { width: 32px; height: 32px; border-radius: 9px; }
  .fo-mini .kachel .ic { width: 17px; height: 17px; }
  .px-mini .unter-name, .px-mini .modelle, .fo-mini p { display: none; }
  .px-mini .label { margin-top: auto; padding-top: 4px; font-size: 10px; letter-spacing: 0.06em; }
  .px-mini .wert { margin-top: -6px; font-size: 26px; }
  .fo-mini .name { font-size: 13px; line-height: 1.35; }
  .fo-mini .unter-name { margin-top: 3px; font-size: 11.5px; line-height: 1.35; }
  .fo-mini .pod-welle { justify-content: space-between; gap: 0; height: 26px; margin-top: auto; }
  .fo-mini .pod-welle i { width: 2px; }
  .anruf .kugel-halter { width: 56px; height: 56px; }
  .anruf .zitat { font-size: 15px; }
  .anruf-kopf { padding: 16px 16px 4px; }
  .anruf-mitte { padding: 12px 16px 14px; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .anruf-kopf .zeit span:last-child { display: none; }
}