/* Plus Jakarta Sans, selbst gehostet (SIL OFL 1.1).
   Bewusst lokal statt von fonts.gstatic.com: sonst wandert bei jedem
   Seitenaufruf die IP-Adresse des Besuchers in die USA. */
@font-face { font-family:'Plus Jakarta Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/pjs-500-i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/pjs-500-i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/pjs-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/pjs-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/pjs-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/pjs-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/pjs-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/pjs-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/pjs-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/pjs-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/pjs-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/pjs-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Karriere-Starter — Design-System
   Zielgruppe: Studierende / 9-to-5, Einstieg neben dem Hauptleben.
   Sprache: hell, energetisch, optimistisch, verspielt-modern.
   Elektrisch-Violett + Mint, Plus Jakarta Sans, runde Formen.
   Bewusst eigenständig — nicht die Strom/Gas- oder Investment-Ästhetik.
   ===================================================================== */

/* Font-Stylesheet wird per <link> im <head> geladen (nicht @import) — paralleler Fetch statt render-blockierendem Round-Trip. */

:root{
  /* ---- Farben: kühles Weiß, elektrisch-violett, Mint-Pop ---- */
  --bg:        #ffffff;
  --bg-tint:   #f5f3ff;   /* violettgetönter Sektions-BG */
  --bg-tint-2: #eef7f3;   /* mintgetönter Sektions-BG */
  --card:      #ffffff;
  --ink:       #161326;   /* near-black, violett-getönt */
  --ink-2:     #504a63;
  --ink-3:     #6f6884;   /* abgedunkelt ggue. #8b86a0 fuer WCAG-AA-Kontrast (~5.3:1) auf hellem BG */
  --hair:      #e9e6f5;
  --hair-2:    #dcd7ee;

  --brand:     #5b3df5;   /* elektrisch-violett */
  --brand-2:   #7458ff;   /* Hover heller */
  --brand-press:#4a2fd6;
  --brand-soft:#ece8ff;
  --brand-ink: #2b1c85;   /* Text auf hellviolett */

  --mint:      #12c98e;   /* frischer Mint-Akzent (Duotone) */
  --mint-soft: #d5f6ea;
  --mint-ink:  #0a6f4e;

  --sun:       #ffb020;   /* warmer Highlight (sparsam) */

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --shadow-sm: 0 2px 6px rgba(91,61,245,.06);
  --shadow:    0 10px 30px rgba(91,61,245,.10), 0 2px 6px rgba(22,19,38,.05);
  --shadow-lg: 0 30px 70px rgba(91,61,245,.16), 0 6px 16px rgba(22,19,38,.06);
  --shadow-brand: 0 12px 26px rgba(91,61,245,.32);

  --ease:  cubic-bezier(.22,.68,0,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --maxw:  1160px;
  --header-h:70px;
}
@media(max-width:640px){ :root{ --header-h:62px } }

*{ box-sizing:border-box }
[hidden]{ display:none!important }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px) }
html,body{ margin:0; overflow-x:hidden }
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit }
img{ max-width:100%; display:block }
::selection{ background:var(--brand); color:#fff }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px) }

/* ---------- Typo ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.82rem; letter-spacing:.02em;
  color:var(--brand); background:var(--brand-soft);
  padding:7px 14px; border-radius:999px; margin:0 0 18px;
}
.eyebrow.mint{ color:var(--mint-ink); background:var(--mint-soft) }
h1,h2,h3{ margin:0; color:var(--ink); font-weight:800; letter-spacing:-.03em; line-height:1.05 }
h1{ font-size:clamp(2.5rem, 6vw, 4.3rem) }
h1 .hl{ color:var(--brand); position:relative; white-space:nowrap }
h1 .hl-mint{ color:var(--mint-ink) }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing:-.028em }
h3{ font-size:1.2rem; font-weight:700; letter-spacing:-.015em }
.lead{ color:var(--ink-2); font-size:clamp(1.08rem,1.6vw,1.28rem); line-height:1.55; max-width:40em }
.muted{ color:var(--ink-3) }

section{ padding:clamp(64px,9vw,120px) 0 }
.sec-head{ max-width:44rem; margin:0 0 clamp(44px,6vw,64px) }
.sec-head.center{ text-align:center; margin-left:auto; margin-right:auto }
.sec-head.center .eyebrow{ display:inline-flex }

/* ---------- Skip-Link (a11y) ---------- */
.skip-link{ position:absolute; left:0; top:-60px; z-index:200; background:var(--brand); color:#fff; font-weight:700; padding:12px 20px; border-radius:0 0 10px 0; text-decoration:none; transition:top .15s var(--ease) }
.skip-link:focus{ top:0 }

/* ---------- Header ---------- */
header.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
header.nav.scrolled{ border-color:var(--hair); box-shadow:var(--shadow-sm) }
.nav-in{ display:flex; align-items:center; gap:18px; height:var(--header-h) }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.02em; flex:0 0 auto }
.brand .mark{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, var(--brand), #8a6bff);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.15rem;
  box-shadow:var(--shadow-brand); transition:transform .2s var(--bounce);
}
.brand:hover .mark{ transform:rotate(-8deg) scale(1.05) }
.brand-txt{ line-height:1.02; font-size:1.08rem; display:flex; flex-direction:column }
.brand-txt small{ font-weight:600; font-size:.7rem; color:var(--ink-3); letter-spacing:.02em; margin-top:2px }

.nav-menu{ display:flex; align-items:center; gap:2px; margin:0 auto }
.nav-menu a{ font-weight:600; font-size:.94rem; color:var(--ink-2); text-decoration:none; padding:9px 15px; border-radius:999px; min-height:42px; display:inline-flex; align-items:center; transition:color .15s, background .15s }
.nav-menu a:hover{ color:var(--brand); background:var(--brand-soft) }

.nav-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:auto }
.nav-cta{
  font:inherit; font-weight:700; font-size:.92rem; padding:0 22px; min-height:46px;
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  background:var(--brand); color:#fff; border:none; cursor:pointer; text-decoration:none;
  white-space:nowrap; box-shadow:var(--shadow-brand);
  transition:background .15s, transform .15s var(--bounce), box-shadow .15s;
}
.nav-cta:hover{ background:var(--brand-2); transform:translateY(-2px) }
.nav-burger{ display:none; width:46px; height:46px; border:1px solid var(--hair-2); border-radius:13px; background:#fff; cursor:pointer; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto }
.nav-scrim{ position:fixed; inset:0; background:rgba(22,19,38,.4); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; z-index:70 }
.nav-scrim.open{ opacity:1; visibility:visible }
.nav-drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(86vw,340px); background:#fff; z-index:80; transform:translateX(100%); transition:transform .3s var(--ease); box-shadow:-14px 0 44px rgba(22,19,38,.16); display:flex; flex-direction:column; padding:18px 20px calc(18px + env(safe-area-inset-bottom)); overflow-y:auto }
.nav-drawer.open{ transform:none }
.nav-drawer .drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.nav-drawer .nav-close{ width:44px; height:44px; border:1px solid var(--hair-2); border-radius:12px; background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--ink) }
.nav-drawer nav{ display:flex; flex-direction:column; margin-top:4px }
.nav-drawer nav a{ font-weight:700; font-size:1.08rem; color:var(--ink); text-decoration:none; padding:16px 8px; border-bottom:1px solid var(--hair); min-height:52px; display:flex; align-items:center }
.nav-drawer nav a:hover{ color:var(--brand) }
.nav-drawer .nav-cta{ margin-top:20px; justify-content:center; min-height:52px }
@media(max-width:880px){ .nav-menu{ display:none } .nav-right .nav-cta{ display:none } .nav-burger{ display:flex } }
@media(min-width:881px){ .nav-drawer,.nav-scrim{ display:none } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:700; font-size:1rem; min-height:56px; padding:16px 30px; border-radius:999px; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .16s var(--bounce), box-shadow .16s }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand) }
.btn-primary:hover{ background:var(--brand-2); transform:translateY(-3px); box-shadow:0 18px 34px rgba(91,61,245,.36) }
.btn-primary:active{ transform:translateY(-1px) }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--hair-2) }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px) }
.btn-big{ min-height:62px; font-size:1.08rem; padding:18px 36px }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px); overflow:hidden }
.hero::before{ content:""; position:absolute; top:-20%; right:-10%; width:60vw; height:60vw; max-width:720px; max-height:720px; background:radial-gradient(circle, rgba(91,61,245,.14), transparent 62%); pointer-events:none; z-index:0 }
.hero::after{ content:""; position:absolute; bottom:-30%; left:-15%; width:50vw; height:50vw; max-width:620px; max-height:620px; background:radial-gradient(circle, rgba(18,201,142,.12), transparent 62%); pointer-events:none; z-index:0 }
.hero .wrap{ position:relative; z-index:1 }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,5vw,72px); align-items:center }
.hero-grid>*{ min-width:0 } /* Grid-Items koennen sonst ueber die Spaltenbreite/Viewport-Kante hinausragen */
.hero-copy .lead{ margin:24px 0 32px }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px }
.hero-pill{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color:var(--ink-2); background:#fff; border:1px solid var(--hair); border-radius:999px; padding:9px 15px; box-shadow:var(--shadow-sm) }
.hero-pill svg{ color:var(--brand); flex:0 0 auto }

/* Hero-Karte (verspieltes Info-Panel statt Bild) */
.hero-card{ position:relative; background:var(--card); border:1px solid var(--hair); border-radius:var(--r-xl); padding:30px 28px; box-shadow:var(--shadow-lg) }
.hero-card .hc-badge{ position:absolute; top:-16px; right:24px; background:var(--mint); color:#fff; font-weight:800; font-size:.8rem; padding:8px 16px; border-radius:999px; box-shadow:0 10px 22px rgba(18,201,142,.34); transform:rotate(3deg) }
.hero-card h3{ font-size:1.15rem; margin:0 0 18px }
.hc-row{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px dashed var(--hair-2) }
.hc-row:first-of-type{ border-top:0; padding-top:0 }
.hc-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:13px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center }
.hc-ic.mint{ background:var(--mint-soft); color:var(--mint-ink) }
.hc-row .t b{ display:block; font-weight:700; font-size:.98rem }
.hc-row .t small{ color:var(--ink-3); font-size:.86rem; line-height:1.4; display:block; margin-top:2px }
.hc-row .t .placeholder{ display:inline-block; background:var(--brand-soft); color:var(--brand-ink); font-weight:700; padding:1px 8px; border-radius:6px; font-size:.82rem }
@media(max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:40px } .hero-card{ order:2 } }
@media(max-width:520px){ .hero-cta-row .btn{ width:100% } }

/* ---------- Persona-Karten ---------- */
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.pcard{ background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:30px 26px; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s }
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--hair-2) }
.pcard .emoji{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; margin-bottom:18px; background:var(--brand-soft) }
.pcard:nth-child(2) .emoji{ background:var(--mint-soft) }
.pcard:nth-child(3) .emoji{ background:#fff2d6 }
.pcard h3{ margin:0 0 8px }
.pcard p{ margin:0; color:var(--ink-2); font-size:.98rem; line-height:1.6 }
@media(max-width:880px){ .cards3{ grid-template-columns:1fr } }
@media(min-width:521px) and (max-width:880px){ .cards3{ grid-template-columns:1fr 1fr } }

/* ---------- Schritte (verbundene Bubbles) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative }
.stepc{ background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:30px 26px; position:relative; transition:transform .2s var(--ease), box-shadow .2s }
.stepc:hover{ transform:translateY(-5px); box-shadow:var(--shadow) }
.stepc .n{ width:48px; height:48px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:1.2rem; display:grid; place-items:center; margin-bottom:18px; box-shadow:var(--shadow-brand) }
.stepc:nth-child(2) .n{ background:var(--mint); box-shadow:0 12px 26px rgba(18,201,142,.3) }
.stepc:nth-child(3) .n{ background:#161326 }
.stepc h3{ margin:0 0 8px }
.stepc p{ margin:0; color:var(--ink-2); font-size:.97rem; line-height:1.6 }
@media(max-width:880px){ .steps{ grid-template-columns:1fr } }

/* ---------- Was dich erwartet (Feature-Grid) ---------- */
.feat{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px }
.fitem{ display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--hair); border-radius:var(--r); padding:24px; transition:transform .2s var(--ease), box-shadow .2s }
.fitem:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.fitem .fi{ flex:0 0 auto; width:46px; height:46px; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center }
.fitem:nth-child(even) .fi{ background:var(--mint-soft); color:var(--mint-ink) }
.fitem h3{ font-size:1.06rem; margin:0 0 5px }
.fitem p{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.55 }
@media(max-width:720px){ .feat{ grid-template-columns:1fr } }

/* ---------- Ehrlichkeits-/Transparenz-Block ---------- */
.honest{ background:var(--bg-tint); border:1px solid var(--hair-2); border-radius:var(--r-lg); padding:clamp(28px,3.5vw,44px); display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:flex-start }
.honest .icon{ flex:0 0 auto; width:52px; height:52px; border-radius:16px; background:#fff; color:var(--brand); display:grid; place-items:center; box-shadow:var(--shadow-sm) }
.honest h3{ margin:0 0 12px; font-size:1.3rem }
.honest p{ margin:0; color:var(--ink-2); font-size:.98rem; line-height:1.65 }
.honest p + p{ margin-top:10px }
@media(max-width:600px){ .honest{ grid-template-columns:1fr; padding:26px 22px } }

/* ---------- Formular ---------- */
.form-band{ padding:clamp(64px,9vw,120px) 0; background:linear-gradient(180deg, var(--bg-tint), #fff) }
.form-shell{ max-width:600px; margin:0 auto }
.card{ background:var(--card); border:1px solid var(--hair); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:clamp(30px,4vw,46px); position:relative; overflow:hidden }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--brand), var(--mint)) }
.fld{ display:block; margin:0 0 18px }
.fld .lab{ display:block; font-weight:700; font-size:.9rem; margin:0 0 8px; color:var(--ink) }
.fld .lab .req{ color:var(--brand) }
input[type=text],input[type=email],input[type=tel]{ width:100%; font:inherit; font-size:16px; min-height:56px; padding:15px 18px; background:#fff; color:var(--ink); border:2px solid var(--hair-2); border-radius:var(--r); transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none }
input::placeholder{ color:var(--ink-3) }
input:hover{ border-color:#c9c2e6 }
input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft) }
.consent{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 6px; font-size:.88rem; color:var(--ink-2); line-height:1.5 }
.consent input{ margin-top:2px; width:20px; height:20px; accent-color:var(--brand); flex:0 0 auto; cursor:pointer }
.consent a{ color:var(--brand); font-weight:600; text-decoration:underline }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.frow{ display:flex; gap:12px; margin-top:22px }
button.cta{ flex:1; font:inherit; font-weight:800; font-size:1.05rem; min-height:60px; padding:16px 20px; border:none; border-radius:999px; background:var(--brand); color:#fff; cursor:pointer; box-shadow:var(--shadow-brand); display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:background .15s, transform .16s var(--bounce), box-shadow .16s; -webkit-tap-highlight-color:transparent }
button.cta:hover{ background:var(--brand-2); transform:translateY(-3px); box-shadow:0 18px 34px rgba(91,61,245,.36) }
button.cta:active{ transform:translateY(-1px) }
button.cta:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none }
.err{ display:none; margin-top:14px; font-size:.88rem; font-weight:600 }
.err:not(:empty){ display:flex; align-items:flex-start; gap:9px; background:#fdeeee; border:1px solid #f6cccc; color:#c0322b; border-radius:var(--r); padding:11px 15px }
.err:not(:empty)::before{ content:"!"; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#c0322b; color:#fff; display:grid; place-items:center; font-weight:800; font-size:.78rem }
.form-fine{ font-size:.82rem; color:var(--ink-3); margin-top:16px; line-height:1.5 }
.thanks-inline{ text-align:center; background:var(--mint-soft); border:1px solid #bfeeda; color:var(--mint-ink); border-radius:var(--r-lg); padding:34px 28px }
.thanks-inline .ring{ width:70px; height:70px; border-radius:50%; background:#fff; color:var(--mint); display:grid; place-items:center; font-size:2rem; margin:0 auto 16px; box-shadow:0 0 0 8px rgba(255,255,255,.6) }
.thanks-inline h3{ color:var(--ink); margin:0 0 6px; font-size:1.3rem }
.thanks-inline p{ margin:0; color:var(--ink-2) }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:0 auto }
details{ background:var(--card); border:1px solid var(--hair); border-radius:var(--r); margin-bottom:12px; overflow:hidden; transition:box-shadow .2s, border-color .2s }
details[open]{ box-shadow:var(--shadow); border-color:var(--hair-2) }
summary{ list-style:none; cursor:pointer; padding:20px 22px; font-weight:700; font-size:1.04rem; display:flex; justify-content:space-between; align-items:center; gap:18px }
summary::-webkit-details-marker{ display:none }
summary .chev{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; transition:transform .25s var(--ease) }
details[open] summary .chev{ transform:rotate(180deg) }
details .ans{ padding:0 22px 20px; color:var(--ink-2); font-size:.98rem; line-height:1.65 }
details .ans a{ color:var(--brand); font-weight:600; text-decoration:underline }

/* ---------- Final CTA ---------- */
.finale{ padding:clamp(72px,10vw,130px) 0 }
.finale .inner{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--brand), #7a5cff 55%, #12c98e 140%); color:#fff; border-radius:var(--r-xl); padding:clamp(44px,6vw,80px) clamp(28px,5vw,64px); text-align:center; box-shadow:var(--shadow-lg) }
.finale .inner::before{ content:""; position:absolute; top:-40%; right:-10%; width:50%; height:180%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 60%) }
.finale .inner > *{ position:relative; z-index:1 }
.finale h2{ color:#fff; max-width:20ch; margin:0 auto 16px }
.finale p{ color:rgba(255,255,255,.9); max-width:40ch; margin:0 auto 32px; font-size:1.08rem }
.finale .btn-primary{ background:#fff; color:var(--brand); box-shadow:0 14px 30px rgba(0,0,0,.18) }
.finale .btn-primary:hover{ background:#fff; color:var(--brand-press); transform:translateY(-3px) }

/* ---------- Footer ---------- */
footer.ft{ background:#161326; color:#b4aecf }
footer.ft a{ color:#d5d0ea; text-decoration:none; transition:color .15s }
footer.ft a:hover{ color:#fff }
.ft-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px 32px; padding:58px 0 42px }
.ft-brand .brand{ color:#fff; margin-bottom:16px }
.ft-brand .brand-txt small{ color:#8f88b3 }
.ft-claim{ font-size:.93rem; line-height:1.6; color:#9a93bd; max-width:32ch }
.ft-col h4{ color:#fff; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; font-weight:700 }
.ft-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.ft-col li a{ font-size:.93rem; display:inline-flex; align-items:center; gap:9px }
.ft-contact .ic{ color:#8a6bff; flex:0 0 auto }
.ft-bottom{ border-top:1px solid rgba(255,255,255,.09); padding:20px 0 24px; display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:space-between; align-items:center; font-size:.83rem; color:#8f88b3 }
.ft-bottom .ft-legal{ display:flex; gap:18px; flex-wrap:wrap }
@media(max-width:880px){ .ft-top{ grid-template-columns:1fr 1fr; gap:34px 26px } .ft-brand{ grid-column:1/-1 } }
@media(max-width:520px){ .ft-top{ grid-template-columns:1fr; gap:30px } .ft-bottom{ flex-direction:column; align-items:flex-start } }

/* ---------- Sticky Mobile-CTA ---------- */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; align-items:center; justify-content:space-between; gap:14px; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); border-top:1px solid var(--hair); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 -8px 26px rgba(22,19,38,.08); transform:translateY(120%); transition:transform .3s var(--ease) }
.mobile-bar.show{ transform:none }
.mb-txt b{ display:block; font-weight:800; font-size:.92rem; color:var(--ink) }
.mb-txt small{ color:var(--ink-3); font-size:.78rem }
.mb-cta{ flex:0 0 auto; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; font-size:.94rem; padding:0 22px; min-height:48px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow-brand) }
@media(max-width:880px){ body{ padding-bottom:80px } .mobile-bar{ display:flex } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0ms) }
.reveal.in{ opacity:1; transform:none }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } html{ scroll-behavior:auto } }

/* ---------- Content-Seiten ---------- */
.page{ padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px) }
.page-in{ max-width:760px; margin:0 auto }
.page-in h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:16px }
.page-in h2{ font-size:1.3rem; margin:32px 0 12px }
.page-in p, .page-in li{ color:var(--ink-2); font-size:1rem; line-height:1.7 }
.page-in a{ color:var(--brand); font-weight:600; text-decoration:underline }
.page-in ul{ padding-left:1.2em }
.page-in .placeholder-box{ background:var(--brand-soft); border:1px dashed var(--brand); color:var(--brand-ink); border-radius:var(--r); padding:20px 22px; margin:20px 0; font-size:.94rem; line-height:1.6 }
.page-in .placeholder-box b{ color:var(--brand-press) }

/* Lesbare Zeilenlaenge (lief auf dem Desktop bis 117 Zeichen) */
section.tight p, #ablauf .step p, .form-fine{ max-width:55ch }
.sec-head .lead{ max-width:46ch; margin-left:auto; margin-right:auto }