/* ==========================================================================
   Jobriver v2 – Kern (Design-Tokens, Basis, Buttons, Navigation, Mega-Menü,
   Footer, FAQ, Dark Mode, Link-Hover, Reveal). Gilt für alle v2-Seiten.
   Styleguide: docu/design/v2-styleguide.md
   ========================================================================== */

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Farben */
    --ink: #15111f;
    --ink-2: #3b3550;
    --muted: #5f5873;
    --line: #ebe7f3;
    --line-2: #ddd6ec;
    --bg: #ffffff;
    --tint: #f8f6fd;
    --brand: #724fff;
    --brand-600: #5f3df0;
    --brand-700: #4b2cc9;
    --brand-50: #f5f2ff;
    --brand-100: #ebe5ff;
    --brand-200: #d8ccff;
    --plum: #1d1233;
    --plum-2: #2b1b4a;
    --mint: #12b886;
    --surface: #ffffff;
    --glass-weak: rgba(255, 255, 255, .55);
    --glass: rgba(255, 255, 255, .7);
    --glass-strong: rgba(255, 255, 255, .85);
    --glass-line: rgba(255, 255, 255, .8);
    --nav-glass: rgba(255, 255, 255, .5);
    --hero-glow-o: 1;
    --flow-line: rgba(114, 79, 255, .35);
    --flow-pulse: #724fff;
    --ask-grad: linear-gradient(180deg, var(--bg) 0%, #ece5ff 18%, #a48dff 55%, #4a2d96 100%);
    --cta-grad: linear-gradient(180deg, var(--bg) 0%, #f1ebff 22%, #c9b3ff 52%, #6a45d8 78%, #170e2a 100%);
    --seg-grad: linear-gradient(160deg, #efe9ff, #f9e9f6 60%, #ebe6ff);
    --feature-grad: linear-gradient(150deg, #f1ecff, #fbeaf6);

    /* Typo */
    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-h1: clamp(2.6rem, 1.4rem + 5.2vw, 5.25rem);
    --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
    --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);

    /* Form */
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --shadow-sm: 0 1px 2px rgba(21, 17, 31, .05), 0 2px 8px rgba(21, 17, 31, .04);
    --shadow: 0 2px 6px rgba(21, 17, 31, .04), 0 12px 32px -8px rgba(60, 30, 140, .14);
    --shadow-lg: 0 30px 80px -20px rgba(60, 30, 140, .28);
    --ease: cubic-bezier(.22, .8, .24, 1);
    --wrap: 1200px;
    /* Randabstand randnaher Karten-Sektionen (CTA-Bänder, Kennzahlen-Flächen):
       mind. 16 px, nie breiter als die Footer-Karte (1408 px). % = Breite des Elternblocks. */
    --edge-max: 1408px;
    --edge: max(16px, calc((100% - var(--edge-max)) / 2));

    /* Ebenen */
    --z-nav: 50;
    --z-suggest: 40;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--brand-200); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* Lange deutsche Wörter („Erstveröffentlichung/Ursprung“) dürfen in schmalen Feldern
   nie aus dem Layout brechen: Silbentrennung + Notumbruch für Labels, Fakten, Tabellen. */
dt, dd, figcaption, .chip, label { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
/* Tabellenzellen: nur im Notfall im Wort umbrechen – Zahlen und Daten bleiben ganz */
th, td { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
td:has(time), td.num, td[data-num] { white-space: nowrap; hyphens: none; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }

/* ---------- Buttons & Chips ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px;
    border: 1px solid transparent; border-radius: 999px;
    font-weight: 550; font-size: 1rem; letter-spacing: -.005em; white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--ink-2); }
.btn--brand { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px rgba(114, 79, 255, .7); }
.btn--brand:hover { background: var(--brand-600); }
.btn--ghost { background: var(--glass); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
/* Auf dunklen Flächen (Bänder, CTA-Karten) – war bisher nur in Seiten-CSS definiert */
.btn--light { background: #fff; color: var(--plum); }
.btn--light:hover { background: #f1ecff; }
.btn:active { transform: translateY(1px); }
.btn svg { stroke: currentColor; }

.chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 16px;
    border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
    font-size: .9375rem; font-weight: 500; color: var(--ink-2);
    transition: border-color .2s, background-color .2s, color .2s;
}
.chip span { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--brand); color: var(--brand-700); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }
.chip[aria-pressed="true"] span { color: var(--brand-600); }

.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 550; white-space: nowrap; }
.pill--soft { background: var(--brand-50); color: var(--brand-700); }
.pill--brand { background: linear-gradient(135deg, var(--brand), #a46bff); color: #fff; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--brand-700); }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

.kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.kicker--center { text-align: center; }
.kicker--light { color: #b9a9ff; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; font-weight: 600; letter-spacing: -.035em; }
.h2--center { text-align: center; margin-inline: auto; max-width: 820px; }
.h2--light { color: #fff; }

/* ---------- Navigation ----------
   Oben: transparent, volle Breite. Beim Scrollen (.is-scrolled): schwebende
   Glas-Leiste mit Abstand, Radius und Blur. Mega-Menü offen (.is-open): deckend weiß. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: 0; transition: padding .45s var(--ease); }
.nav__shell {
    position: relative; margin-inline: auto; max-width: 100%;
    background: rgba(255, 255, 255, 0); border: 1px solid transparent; border-radius: 0;
    transition: max-width .45s var(--ease), border-radius .45s var(--ease), background-color .3s, border-color .3s, box-shadow .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s;
}
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; padding-inline: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); transition: height .45s var(--ease), padding .45s var(--ease); }
.nav.is-scrolled { padding: 12px 16px 0; }
/* weniger Blur: Hintergrund scheint stärker durch */
.nav.is-scrolled .nav__shell {
    max-width: calc(var(--wrap) + 24px); border-radius: 22px;
    background: var(--nav-glass); border-color: var(--glass-line);
    box-shadow: 0 1px 0 rgba(21, 17, 31, .04), 0 12px 40px -16px rgba(60, 30, 140, .28);
    -webkit-backdrop-filter: saturate(160%) blur(7px); backdrop-filter: saturate(160%) blur(7px);
}
.nav.is-scrolled .nav__bar { height: 60px; padding-inline: 12px 10px; }
.nav.is-open .nav__shell, .nav.is-menu .nav__shell { background: var(--surface); border-color: var(--line); box-shadow: 0 24px 60px -20px rgba(21, 17, 31, .25); }
.nav.is-open:not(.is-scrolled) .nav__shell { border-color: transparent transparent var(--line); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.375rem; letter-spacing: -.04em; flex: none; }
.brand img { width: 22px; height: auto; }
.nav__links { display: flex; gap: 2px; }
.nav__item { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; font-size: 1rem; font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s; }
.nav__item:hover, .nav__item[aria-expanded="true"] { background: rgba(114, 79, 255, .08); color: var(--ink); }
.chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
[aria-expanded="true"] > .chev, details[open] > summary .chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__login { padding: 8px 12px; font-weight: 500; color: var(--ink-2); }
.nav__login:hover { color: var(--brand-700); }
.nav__burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; position: relative; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease); }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* Sprachschalter */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font-size: .875rem; font-weight: 550; color: var(--ink-2); }
.lang__btn svg:first-child { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: rgba(114, 79, 255, .08); color: var(--ink); }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; z-index: 5; }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang--up .lang__menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; transform: translateY(4px); }
.lang__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .9375rem; color: var(--ink); }
.lang__menu a b { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 6px; background: var(--tint); font-size: .75rem; }
.lang__menu a:hover { background: var(--brand-50); }
.lang__menu a[aria-current="true"] b { background: var(--brand); color: #fff; }

/* Mega-Menü */
.mega { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.nav.is-open .mega { grid-template-rows: 1fr; }
.mega__clip { min-height: 0; overflow: hidden; }
.mega__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 32px; max-width: var(--wrap); margin-inline: auto; padding: 12px 24px 28px; }
.nav.is-scrolled .mega__panel { padding-inline: 16px; }
.mega__panel[hidden] { display: none; }
.mega__panel:not([hidden]) { animation: megaIn .35s var(--ease); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } }
.mega__panel:has(.mm-grid) { grid-template-columns: minmax(0, 1fr) 300px; }
.mm-h { margin: 6px 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mm-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; margin-inline: -10px; border-radius: 10px; font-weight: 500; color: var(--ink); transition: background-color .15s; }
.mm-row small { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-row:hover { background: var(--brand-50); }
.mm-more { display: inline-block; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--brand-700); }
.mm-more::after { content: " →"; }
.mm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
.mm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mm-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; transition: background-color .15s; }
.mm-card:hover { background: var(--brand-50); }
.mm-card strong { display: block; font-weight: 600; }
.mm-card small { display: block; margin-top: 2px; font-size: .875rem; color: var(--muted); line-height: 1.4; }
.mm-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); transition: background-color .15s; }
.mm-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--brand-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-card:hover .mm-ico { background: var(--surface); }
.mm-feature { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: var(--feature-grad); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s; }
.mm-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mm-feature strong { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; }
.mm-feature span { font-size: .875rem; color: var(--muted); }
.mm-feature .mm-feature__k { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.mm-feature__big { font-size: 2.25rem !important; font-weight: 600; letter-spacing: -.04em !important; font-variant-numeric: tabular-nums; }
.mm-feature .mm-feature__go { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--brand-700); }
.mm-feature .mm-feature__go::after { content: " →"; }
.mm-feature--img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 6px; }
.mm-feature--dark { background: linear-gradient(150deg, var(--plum-2), var(--plum)); color: #fff; }
.mm-feature--dark span { color: #b8afd0; }
.mm-feature--dark .mm-feature__k, .mm-feature--dark .mm-feature__go { color: #c9b8ff; }

.scrim { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(21, 17, 31, .22); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.scrim.is-on { opacity: 1; visibility: visible; }

/* Mobilmenü */
.mnav { display: grid; gap: 0; max-height: calc(100dvh - 84px); overflow-y: auto; margin: 8px 16px 0; padding: 8px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); }
.nav.is-scrolled .mnav { margin-inline: 0; }
.mnav[hidden] { display: none; }
@media (min-width: 1081px) { .mnav { display: none !important; } }
.mnav details { border-bottom: 1px solid var(--line); }
.mnav summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 1.125rem; font-weight: 550; cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav details > div { display: grid; padding: 0 0 12px; }
.mnav details a { padding: 10px 0; color: var(--ink-2); }
.mnav__foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 550; }
.mnav__lang { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--tint); }
.mnav__lang a { padding: 6px 12px; border-radius: 999px; font-size: .875rem; }
.mnav__lang a[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }

/* ---------- Allgemeine Sektionen ---------- */
.section { padding: clamp(80px, 10vw, 128px) 0; }
.section--tint { background: var(--tint); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.round { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .2s, background-color .2s; }
.round svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { border-color: var(--ink); }
.round:disabled { opacity: .35; cursor: default; border-color: var(--line-2); }
/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); }
.faq__lead { margin-top: 18px; color: var(--muted); }
.faq__lead a { color: var(--brand-700); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 1.125rem; font-weight: 550; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--brand-700); }
.qa__plus { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--tint); transition: background-color .2s, transform .3s var(--ease); }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; }
.qa__plus::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.qa[open] .qa__plus { background: var(--brand); transform: rotate(180deg); }
.qa[open] .qa__plus::before, .qa[open] .qa__plus::after { background: #fff; }
.qa[open] .qa__plus::after { transform: rotate(0); }
.qa__a { padding: 0 48px 22px 0; color: var(--ink-2); }

/* ---------- Footer (Personio-Stil: dunkle Karte auf Verlauf, Wortmarke angeschnitten) ---------- */
/* Standard: Footer-Karte schwebt mit gleichmäßigem Rand auf dem Seitenhintergrund.
   Endet die Seite mit einer dunklen Verlaufs-Sektion (data-flow-foot), läuft der
   Verlauf nahtlos weiter – dann ohne oberen Rand. */
.foot { padding: 16px; background: var(--bg); }
main:has(> :last-child[data-flow-foot]) + .foot { padding-top: 0; background: linear-gradient(180deg, #170e2a 0%, #2c1a5c 55%, #6a45d8 100%); }
:root[data-theme="dark"] main:has(> :last-child[data-flow-foot]) + .foot { background: linear-gradient(180deg, #120b20 0%, #1d1238 60%, #3a2575 100%); }
.foot__card { position: relative; overflow: hidden; max-width: var(--edge-max); margin-inline: auto; padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px) 0; border-radius: 32px; background: radial-gradient(90% 70% at 30% 0%, #2f1d52, var(--plum) 70%); border: 1px solid rgba(255, 255, 255, .08); color: #cfc6e6; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(32px, 5vw, 80px); }
.foot__claim { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; color: #c9b8ff; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.foot__h { margin-bottom: 14px; font-size: .9375rem; font-weight: 550; color: #8e84aa; }
.foot__cols a { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #ece7fb; font-size: .9375rem; transition: color .2s; }
.foot__cols a svg { width: 16px; height: 16px; opacity: .8; }
.foot__cols a:hover { color: #fff; }
.foot__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(48px, 7vw, 96px); }
.foot__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: clamp(24px, 3vw, 40px); }
.foot .lang__btn { color: #ece7fb; border: 1px solid rgba(255, 255, 255, .18); }
.foot .lang__btn:hover, .foot .lang__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: #fff; }
.foot__copy { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #8e84aa; }
.foot__word { font-size: clamp(5rem, 17vw, 17rem); line-height: .8; font-weight: 700; letter-spacing: -.065em; color: #fff; text-align: right; white-space: nowrap; margin-bottom: -.13em; user-select: none; }

/* ---------- Dark Mode (data-theme setzt das Inline-Script im <head>) ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f4f1fb;
    --ink-2: #d6cfe8;
    --muted: #a59dbb;
    --line: #2a2238;
    --line-2: #3b3150;
    --bg: #0d0a14;
    --tint: #130f1c;
    --surface: #18131f;
    --brand-50: rgba(140, 110, 255, .14);
    --brand-100: rgba(140, 110, 255, .24);
    --brand-200: #5d48b8;
    --brand-700: #bba8ff;
    --glass-weak: rgba(28, 22, 40, .55);
    --glass: rgba(28, 22, 40, .7);
    --glass-strong: rgba(28, 22, 40, .85);
    --glass-line: rgba(255, 255, 255, .08);
    --nav-glass: rgba(18, 14, 26, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .7);
    --hero-glow-o: .45;
    --flow-line: rgba(255, 255, 255, .3);
    --flow-pulse: #d6c9ff;
    --ask-grad: linear-gradient(180deg, var(--bg) 0%, #1d1538 22%, #3b2585 55%, #24163f 100%);
    --cta-grad: linear-gradient(180deg, var(--bg) 0%, #1a1330 30%, #3a2575 62%, #120b20 100%);
    --seg-grad: linear-gradient(160deg, #1f1733, #2a1630 60%, #1c1530);
    --feature-grad: linear-gradient(150deg, #241a3d, #2e1a35);
}
:root[data-theme="dark"] .nav.is-open .nav__shell, :root[data-theme="dark"] .nav.is-menu .nav__shell { border-color: var(--line); }

/* Theme-Schalter */
.theme-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); transition: background-color .2s, color .2s; }
.theme-btn:hover { background: rgba(114, 79, 255, .1); color: var(--ink); }
.theme-btn svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease), opacity .3s; }
.theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-btn .i-sun { opacity: 1; transform: none; }

/* Kreisförmiger Übergang beim Umschalten (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: themeReveal .6s var(--ease); }
@keyframes themeReveal { from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0)); } to { clip-path: circle(var(--tr, 150vmax) at var(--tx, 100%) var(--ty, 0)); } }

/* ---------- Scroll-Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Erster Bildschirm (Hero): gleiche Bewegung, aber per CSS ab dem ersten Paint statt nach dem
   JS-Start – sonst wartet der größte Text (LCP) auf v2-core.js. Versatz wie im JS: 70 ms je Geschwister.
   Start-Deckkraft .01 statt 0: Chrome wertet Text mit Deckkraft 0 erst am Animationsende als LCP.
   Füllmodus nur „backwards“, damit nach dem Ende kein transform/Stapelkontext hängen bleibt. */
.js .reveal.reveal--now { opacity: 1; transform: none; transition: none; animation: revealNow .8s var(--ease) backwards; }
.js .reveal--now:nth-child(2) { animation-delay: 70ms; }
.js .reveal--now:nth-child(3) { animation-delay: 140ms; }
.js .reveal--now:nth-child(4) { animation-delay: 210ms; }
.js .reveal--now:nth-child(5) { animation-delay: 280ms; }
.js .reveal--now:nth-child(6) { animation-delay: 350ms; }
.js .reveal--now:nth-child(n+7) { animation-delay: 420ms; }
@keyframes revealNow { from { opacity: .01; transform: translateY(24px); } }


/* ---------- Link-Hover: Unterstrich wächst von links (Text-Links in Fließtext, Footer, Mega-Menü) ---------- */
.ulink, .foot__cols a, .faq__lead a, .mm-more, .pillar li a, .lang__menu a span, .mnav details a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .35s var(--ease), color .2s;
}
.ulink:hover, .foot__cols a:hover, .faq__lead a:hover, .mm-more:hover, .mnav details a:hover { background-size: 100% 1.5px; }
.foot__cols a { width: fit-content; background-position: 26px 100%; }
.foot__cols a:not(:has(svg)) { background-position: 0 100%; }
.faq__lead a { text-decoration: none; background-size: 100% 1.5px; }
.faq__lead a:hover { background-size: 0% 1.5px; background-position: 100% 100%; }
/* Pfeil-Links: Unterstrich + Pfeil schiebt */
.link-arrow { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: background-size .35s var(--ease); }
.link-arrow:hover { background-size: calc(100% - 1.2em) 1.5px; }
/* Navigations-Einträge: weiche Pille + Text hebt sich leicht */
.nav__item, .nav__login { position: relative; }
.nav__login::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav__login:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__item.is-current { color: var(--brand-700); }
/* Karten-Links: Titel wechselt sanft in Markenfarbe */
.mm-row { transition: background-color .15s, padding .25s var(--ease); }
.mm-row:hover { padding-left: 14px; }


/* ---------- Minimal-Footer (Login, Registrierung) ---------- */
.foot-min { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px 32px; border-top: 1px solid var(--line); background: var(--bg); text-align: center; }
.foot-min__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.foot-min__links a { padding: 6px 10px; font-size: .875rem; color: var(--muted); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 10px calc(100% - 4px); transition: color .2s, background-size .35s var(--ease); }
.foot-min__links a:hover { color: var(--ink); background-size: calc(100% - 20px) 1.5px; }
.foot-min__links a + a::before { content: none; }
.foot-min__copy { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Vorführ-Modus: schwebende Steuerleiste ---------- */
.showbar { position: fixed; left: 50%; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(21, 17, 31, .82); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .55); color: #fff; transform: translateX(-50%); animation: showIn .5s var(--ease) both; }
@keyframes showIn { from { opacity: 0; transform: translate(-50%, 20px); } }
.showbar__n { font-size: .75rem; color: #b9b0d6; font-variant-numeric: tabular-nums; }
.showbar__t { margin: 0 8px 0 4px; font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showbar button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font: 600 .9375rem var(--font); transition: background-color .2s; }
.showbar button:hover { background: var(--brand); }

/* ---------- Responsive (Kern) ---------- */
@media (max-width: 1080px) {
    .nav__links, .nav__login, .nav .lang { display: none; }
    .nav__burger { display: block; }
    .mega { display: none; }
    .foot__top, .foot__bottom { grid-template-columns: 1fr; }
    .foot__word { text-align: left; }
}
@media (max-width: 560px) {
    .wrap { padding-inline: 16px; }
    .h2 br { display: none; }
    .nav__cta { display: none; }
    .foot__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
    .js .reveal.reveal--now { animation: none; }
}