/* =====================================================================
   Vertrieb High-Performer — Design-System
   Zielgruppe: erfahrene Vertriebler, die diskret einen größeren
   Karrierehebel suchen.
   Sprache: near-black, hoher Kontrast, scharfes Rot, geometrischer
   System-Font-Stack, Uppercase-Akzente, kinetisch, exklusiv/executive.
   Bewusst eigenständig — nicht Investment-Dark (warm/Serif/Gold).
   ===================================================================== */

/* ponytail: kein externer Google-Fonts-@import mehr (IP-Transfer ohne Consent
   + mobiler FOUT-Overflow) — robuster System-Font-Stack statt Self-Hosting,
   da im Scope dieses Fixes kein woff2-Asset verfügbar ist. */

:root{
  --bg:       #0a0a0b;   /* fast schwarz, kalt */
  --bg-2:     #101013;   /* Karten */
  --bg-3:     #17171b;   /* tiefere Ebene */
  --bg-line:  #1f1f25;   /* Trennlinien */
  --bg-line-2:#2b2b33;
  --ink:      #f4f3f1;   /* off-white */
  --ink-2:    #a6a6ad;
  --ink-3:    #8f8f97;   /* aufgehellt für ≥4.5:1 Kontrast auf --bg (war #6c6c74 ≈3.8:1) */
  --red:      #ff3b30;   /* scharfes Signalrot */
  --red-2:    #ff5a4f;
  --red-press:#e02a20;
  --red-tint: #1e0f0e;   /* rotgetönter Grund */
  --red-glow: rgba(255,59,48,.30);

  --r:    2px;           /* fast eckig — hart, präzise */
  --r-md: 4px;
  --r-lg: 6px;

  --ease:  cubic-bezier(.2,.7,0,1);
  --disp:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --maxw:  1200px;
  --header-h:76px;
}
@media(max-width:640px){ :root{ --header-h:64px } }

*{ box-sizing:border-box }
[hidden]{ display:none!important }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); background:var(--bg) }
html,body{ margin:0 }
/* ponytail: overflow-x:hidden lebt auf .ox-wrap statt html/body — manche WebKit-Versionen
   brechen position:sticky auf Nachfahren, wenn html/body selbst overflow gesetzt haben.
   .ox-wrap umschließt den Seiteninhalt UNTER dem sticky Header, nicht den Header selbst. */
.ox-wrap{ overflow-x:hidden }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
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(--red); color:#0a0a0b }
::-webkit-scrollbar{ width:11px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#26262d; border:3px solid var(--bg) }

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

/* ---------- Typo ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--disp); font-weight:600;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); margin:0 0 22px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red) }
.eyebrow.ghost{ color:var(--ink-3) }
.eyebrow.ghost::before{ background:var(--ink-3) }

h1,h2,h3{ margin:0; color:var(--ink); font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.02 }
h1{ font-size:clamp(2.7rem, 7vw, 5.6rem); text-transform:uppercase; letter-spacing:-.03em }
h1 .red{ color:var(--red) }
/* ponytail: harte <br>-Umbrüche in der Hero-H1 killen auf sehr schmalen Screens (320-360px)
   die Zwangsumbrüche statt zu croppen — Text fließt natürlich, keine verwaisten Wörter. */
/* Unter 360px die harten Umbrueche aufloesen. Das Leerzeichen VOR dem <br>
   im Markup ist Pflicht: ohne es klebten "kannst" und "verkaufen." aneinander,
   und das eine Riesenwort sprengte das Raster auf 523px. */
@media(max-width:360px){ h1 br.brk{ display:none } }
/* Ein einzelnes langes Wort darf das Rasterfeld nie wieder aufblasen. */
.hero-grid > *{ min-width:0 }
h1{ overflow-wrap:break-word }
h1 .outline{ color:transparent; -webkit-text-stroke:1.4px var(--ink-2); text-stroke:1.4px var(--ink-2) }
h2{ font-size:clamp(2rem, 4vw, 3.3rem); text-transform:uppercase; letter-spacing:-.02em }
h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.01em }
.lead{ color:var(--ink-2); font-size:clamp(1.06rem,1.5vw,1.24rem); line-height:1.55; max-width:42em }
.muted{ color:var(--ink-3) }
.num-lg{ font-family:var(--disp); font-weight:500; font-variant-numeric:tabular-nums }

section{ padding:clamp(76px,11vw,150px) 0 }
.sec-head{ max-width:46rem; margin:0 0 clamp(48px,7vw,74px) }
.sec-head.center{ text-align:center; margin-left:auto; margin-right:auto }
.sec-head.center .eyebrow{ display:inline-flex }

.rule{ height:1px; background:var(--bg-line); border:0 }

/* ---------- Header ---------- */
header.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,11,.72);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
header.nav.scrolled{ border-color:var(--bg-line); background:rgba(10,10,11,.9) }
.nav-in{ display:flex; align-items:center; gap:20px; height:var(--header-h) }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); flex:0 0 auto; font-family:var(--disp); font-weight:700; letter-spacing:.01em; text-transform:uppercase; font-size:1rem }
.brand .mark{ width:36px; height:36px; border:1.5px solid var(--red); color:var(--red); display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:1rem; transition:background .2s, color .2s }
.brand:hover .mark{ background:var(--red); color:#0a0a0b }
.brand-txt{ display:flex; flex-direction:column; line-height:1.05 }
.brand-txt small{ font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; margin-top:3px }

.nav-menu{ display:flex; align-items:center; gap:4px; margin:0 auto }
.nav-menu a{ font-family:var(--disp); font-weight:500; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; padding:10px 15px; min-height:40px; display:inline-flex; align-items:center; transition:color .15s }
.nav-menu a:hover{ color:var(--ink) }

.nav-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:auto }
.nav-cta{
  font-family:var(--disp); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  padding:0 22px; min-height:46px; display:inline-flex; align-items:center; gap:9px;
  background:var(--red); color:#0a0a0b; border:1px solid var(--red);
  cursor:pointer; text-decoration:none; white-space:nowrap; border-radius:var(--r);
  transition:background .15s, box-shadow .18s;
}
.nav-cta:hover{ background:var(--red-2); box-shadow:0 0 0 1px var(--red-2), 0 10px 30px var(--red-glow) }
.nav-burger{ display:none; width:46px; height:46px; border:1px solid var(--bg-line-2); background:transparent; cursor:pointer; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto; border-radius:var(--r) }
.nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.7); 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,360px); background:var(--bg-2); border-left:1px solid var(--bg-line); z-index:80; transform:translateX(100%); transition:transform .3s var(--ease); 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:20px }
.nav-drawer .nav-close{ width:44px; height:44px; border:1px solid var(--bg-line-2); background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--ink); border-radius:var(--r) }
.nav-drawer nav{ display:flex; flex-direction:column; margin-top:6px }
.nav-drawer nav a{ font-family:var(--disp); font-weight:500; font-size:1.02rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:16px 6px; border-bottom:1px solid var(--bg-line); min-height:54px; display:flex; align-items:center }
.nav-drawer nav a:hover{ color:var(--red) }
.nav-drawer .nav-cta{ margin-top:22px; justify-content:center; min-height:54px }
@media(max-width:900px){ .nav-menu{ display:none } .nav-right .nav-cta{ display:none } .nav-burger{ display:flex } }
@media(min-width:901px){ .nav-drawer,.nav-scrim{ display:none } }
/* ponytail: Unterseiten ohne Burger-Markup (impressum/datenschutz/danke/next-steps) —
   sonst verschwindet der einzige CTA im Header auf Mobile komplett (kein Burger-Ersatz da). */
@media(max-width:900px){ body.simple-nav .nav-right .nav-cta{ display:inline-flex } }
/* Tastatur-Falle fixen: Drawer bleibt für Tab/Screenreader erreichbar, solange nur
   transform verschiebt. visibility zusätzlich mit Transition-Delay ausblenden. */
.nav-drawer{ visibility:hidden; transition:transform .3s var(--ease), visibility 0s linear .3s }
.nav-drawer.open{ visibility:visible; transition:transform .3s var(--ease), visibility 0s linear 0s }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:11px; font-family:var(--disp); font-weight:600; font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; min-height:58px; padding:16px 32px; border-radius:var(--r); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s, box-shadow .18s, transform .15s var(--ease) }
.btn::after{ content:"→"; font-family:var(--disp); font-weight:500; transition:transform .18s var(--ease) }
.btn:hover::after{ transform:translateX(4px) }
.btn-primary{ background:var(--red); color:#0a0a0b; border-color:var(--red) }
.btn-primary:hover{ background:var(--red-2); border-color:var(--red-2); box-shadow:0 12px 36px var(--red-glow) }
.btn-primary:active{ background:var(--red-press); transform:translateY(1px) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--bg-line-2) }
.btn-ghost:hover{ border-color:var(--red); color:var(--red) }
.btn-big{ min-height:64px; font-size:1rem; padding:18px 40px }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(64px,9vw,120px) 0 clamp(56px,8vw,96px); overflow:hidden; border-bottom:1px solid var(--bg-line) }
.hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(70% 60% at 78% 0%, rgba(255,59,48,.10), transparent 58%),
  linear-gradient(180deg, transparent, rgba(0,0,0,.4)); pointer-events:none }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(40px,5vw,72px); align-items:end }
.hero-copy .lead{ margin:28px 0 38px }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero-stats{ display:flex; flex-direction:column; gap:0; border:1px solid var(--bg-line); border-radius:var(--r) }
.hero-stats .s{ padding:22px 24px; border-bottom:1px solid var(--bg-line) }
.hero-stats .s:last-child{ border-bottom:0 }
.hero-stats .k{ font-family:var(--disp); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin:0 0 8px }
.hero-stats .v{ font-family:var(--disp); font-weight:500; font-size:1.02rem; color:var(--ink); line-height:1.35; letter-spacing:-.01em }
.placeholder{ display:inline-block; padding:1px 8px; background:var(--red-tint); border:1px solid rgba(255,59,48,.3); color:var(--red-2); font-size:.82rem; letter-spacing:0 }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:44px } }

/* ---------- Für wen (Zeilen-Layout) ---------- */
.rows{ border-top:1px solid var(--bg-line) }
.row{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding:38px 0; border-bottom:1px solid var(--bg-line); transition:background .2s var(--ease) }
.row:hover{ background:linear-gradient(90deg, rgba(255,59,48,.04), transparent 55%) }
.row .idx{ font-family:var(--disp); font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--red); font-variant-numeric:tabular-nums }
.row .body h3{ font-family:var(--disp); font-weight:600; font-size:clamp(1.3rem,2vw,1.7rem); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 8px }
.row .body p{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.6; max-width:56ch }
.row .mark-ok{ flex:0 0 auto; width:44px; height:44px; border:1px solid var(--bg-line-2); border-radius:50%; color:var(--red); display:grid; place-items:center; transition:border-color .2s, background .2s, color .2s }
.row:hover .mark-ok{ border-color:var(--red); background:var(--red); color:#0a0a0b }
@media(max-width:720px){ .row{ grid-template-columns:auto 1fr; gap:18px; padding:28px 0 } .row .mark-ok{ display:none } }

/* ---------- Hebel (Feature-Kacheln, Linien-Grid) ---------- */
.grid-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bg-line); border:1px solid var(--bg-line) }
.tile{ background:var(--bg); padding:38px 32px; min-height:230px; display:flex; flex-direction:column; gap:16px; transition:background .2s var(--ease) }
.tile:hover{ background:var(--bg-2) }
.tile .ic{ width:44px; height:44px; border:1px solid var(--bg-line-2); border-radius:var(--r); color:var(--red); display:grid; place-items:center; transition:border-color .2s }
.tile:hover .ic{ border-color:var(--red) }
.tile h3{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:1.15rem; letter-spacing:-.005em; margin:0 }
.tile p{ margin:auto 0 0; color:var(--ink-2); font-size:.95rem; line-height:1.6 }
@media(max-width:900px){ .grid-tiles{ grid-template-columns:1fr } }
@media(min-width:641px) and (max-width:900px){ .grid-tiles{ grid-template-columns:1fr 1fr } }

/* ---------- Ablauf (nummerierte Blöcke) ---------- */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bg-line); border:1px solid var(--bg-line) }
.flow .st{ background:var(--bg); padding:40px 32px; display:flex; flex-direction:column; gap:18px; transition:background .2s var(--ease) }
.flow .st:hover{ background:var(--bg-2) }
.flow .st .n{ font-family:var(--disp); font-weight:400; font-size:clamp(3rem,4.5vw,4rem); line-height:.85; color:transparent; -webkit-text-stroke:1.4px var(--red); text-stroke:1.4px var(--red) }
.flow .st h3{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:1.2rem; margin:0 }
.flow .st p{ margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.6 }
@media(max-width:900px){ .flow{ grid-template-columns:1fr } }

/* ---------- Diskretion / Ehrlichkeit ---------- */
.discreet-band{ background:var(--bg-3); border-top:1px solid var(--bg-line); border-bottom:1px solid var(--bg-line) }
.discreet{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:flex-start; padding:clamp(40px,5vw,64px) 0 }
.discreet .icon{ flex:0 0 auto; width:54px; height:54px; border:1px solid var(--red); color:var(--red); display:grid; place-items:center; border-radius:var(--r) }
.discreet h3{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:1.4rem; margin:0 0 14px; letter-spacing:-.01em }
.discreet p{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.65; max-width:64ch }
.discreet p + p{ margin-top:12px }
@media(max-width:600px){ .discreet{ grid-template-columns:1fr; padding:36px 0 } }

/* ---------- Formular ---------- */
.form-band{ padding:clamp(76px,10vw,140px) 0 }
.form-shell{ max-width:600px; margin:0 auto }
.form-shell .sec-head{ text-align:center; margin:0 auto 40px }
.form-shell .sec-head .eyebrow{ display:inline-flex }
.card{ background:var(--bg-2); border:1px solid var(--bg-line); border-radius:var(--r-lg); padding:clamp(30px,4vw,46px); position:relative }
.card::before{ content:""; position:absolute; top:-1px; left:-1px; width:56px; height:56px; border-top:2px solid var(--red); border-left:2px solid var(--red); border-radius:var(--r-lg) 0 0 0 }
.card::after{ content:""; position:absolute; bottom:-1px; right:-1px; width:56px; height:56px; border-bottom:2px solid var(--red); border-right:2px solid var(--red); border-radius:0 0 var(--r-lg) 0 }
.fld{ display:block; margin:0 0 20px }
.fld .lab{ display:block; font-family:var(--disp); font-weight:500; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px; color:var(--ink-2) }
.fld .lab .req{ color:var(--red) }
input[type=text],input[type=email],input[type=tel]{ width:100%; font-family:var(--sans); font-size:16px; min-height:56px; padding:15px 18px; background:var(--bg-3); color:var(--ink); border:1px solid var(--bg-line-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:#3a3a44 }
input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,59,48,.14) }
.consent{ display:flex; gap:12px; align-items:flex-start; margin:20px 0 6px; font-size:.86rem; color:var(--ink-2); line-height:1.55 }
.consent input{ margin-top:3px; width:18px; height:18px; accent-color:var(--red); flex:0 0 auto; cursor:pointer }
.consent a{ color:var(--red); text-decoration:underline; text-underline-offset:2px }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.frow{ display:flex; gap:12px; margin-top:24px }
button.cta{ flex:1; font-family:var(--disp); font-weight:600; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; min-height:58px; padding:16px 20px; border:1px solid var(--red); border-radius:var(--r); background:var(--red); color:#0a0a0b; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:11px; transition:background .15s, box-shadow .18s, transform .15s var(--ease); -webkit-tap-highlight-color:transparent }
button.cta::after{ content:"→"; transition:transform .18s var(--ease) }
button.cta:hover{ background:var(--red-2); box-shadow:0 12px 36px var(--red-glow) }
button.cta:hover::after{ transform:translateX(4px) }
button.cta:active{ background:var(--red-press); transform:translateY(1px) }
button.cta:disabled{ opacity:.5; cursor:default; box-shadow:none; transform:none }
.err{ display:none; margin-top:14px; font-size:.86rem; font-weight:500 }
.err:not(:empty){ display:flex; align-items:flex-start; gap:10px; background:rgba(255,59,48,.08); border:1px solid rgba(255,59,48,.32); color:var(--red-2); border-radius:var(--r); padding:12px 15px }
.err:not(:empty)::before{ content:"!"; flex:0 0 auto; width:18px; height:18px; border:1px solid var(--red-2); border-radius:50%; color:var(--red-2); display:grid; place-items:center; font-weight:700; font-size:.72rem; font-family:var(--disp) }
.form-fine{ font-size:.8rem; color:var(--ink-3); margin-top:16px; line-height:1.5 }
.thanks-inline{ text-align:center; background:var(--bg-3); border:1px solid var(--bg-line-2); border-radius:var(--r-lg); padding:34px 28px }
.thanks-inline .ring{ width:66px; height:66px; border:1px solid var(--red); color:var(--red); border-radius:50%; display:grid; place-items:center; font-size:1.8rem; margin:0 auto 16px }
.thanks-inline h3{ font-family:var(--disp); text-transform:uppercase; color:var(--ink); margin:0 0 8px; font-size:1.3rem }
.thanks-inline p{ margin:0; color:var(--ink-2) }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:0 auto; border-top:1px solid var(--bg-line) }
details{ border-bottom:1px solid var(--bg-line); overflow:hidden }
details[open]{ background:linear-gradient(180deg, rgba(255,59,48,.03), transparent) }
summary{ list-style:none; cursor:pointer; padding:26px 4px; font-family:var(--disp); font-weight:500; font-size:clamp(1.02rem,1.4vw,1.18rem); letter-spacing:-.005em; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:24px }
summary::-webkit-details-marker{ display:none }
summary .chev{ flex:0 0 auto; width:30px; height:30px; border:1px solid var(--bg-line-2); color:var(--red); display:grid; place-items:center; transition:transform .25s var(--ease), border-color .2s }
details[open] summary .chev{ transform:rotate(180deg); border-color:var(--red) }
details .ans{ padding:0 4px 26px; color:var(--ink-2); font-size:.98rem; line-height:1.7; max-width:62ch }
details .ans a{ color:var(--red); text-decoration:underline; text-underline-offset:2px }

/* ---------- Final ---------- */
.finale{ padding:clamp(90px,12vw,160px) 0; text-align:center; position:relative; overflow:hidden; border-top:1px solid var(--bg-line) }
.finale::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(255,59,48,.10), transparent 60%); pointer-events:none }
.finale > .wrap{ position:relative; z-index:1 }
.finale h2{ max-width:20ch; margin:0 auto 20px }
.finale p{ max-width:44ch; margin:0 auto 40px; color:var(--ink-2) }

/* ---------- Footer ---------- */
footer.ft{ background:#060607; border-top:1px solid var(--bg-line); color:var(--ink-3) }
footer.ft a{ color:var(--ink-2); text-decoration:none; transition:color .15s }
footer.ft a:hover{ color:var(--red) }
.ft-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:44px 36px; padding:60px 0 46px }
.ft-brand .brand{ color:var(--ink); margin-bottom:18px }
.ft-claim{ font-size:.92rem; line-height:1.65; color:var(--ink-3); max-width:34ch }
.ft-col h4{ color:var(--ink); font-family:var(--disp); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 20px; font-weight:600 }
.ft-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px }
.ft-col li a{ font-size:.92rem; display:inline-flex; align-items:center; gap:9px }
.ft-contact .ic{ color:var(--red); flex:0 0 auto }
.ft-bottom{ border-top:1px solid var(--bg-line); padding:20px 0 24px; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--ink-3) }
.ft-bottom .ft-legal{ display:flex; gap:20px; flex-wrap:wrap }
@media(max-width:900px){ .ft-top{ grid-template-columns:1fr 1fr; gap:36px 28px } .ft-brand{ grid-column:1/-1 } }
@media(max-width:520px){ .ft-top{ grid-template-columns:1fr; gap:32px } .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(10,10,11,.95); border-top:1px solid var(--bg-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transform:translateY(120%); transition:transform .3s var(--ease) }
.mobile-bar.show{ transform:none }
.mb-txt b{ display:block; font-family:var(--disp); font-weight:600; font-size:.92rem; text-transform:uppercase; color:var(--ink) }
.mb-txt small{ color:var(--ink-3); font-size:.76rem }
.mb-cta{ flex:0 0 auto; background:var(--red); color:#0a0a0b; text-decoration:none; font-family:var(--disp); font-weight:600; font-size:.84rem; letter-spacing:.04em; text-transform:uppercase; padding:0 20px; min-height:48px; border-radius:var(--r); display:inline-flex; align-items:center; gap:8px }
@media(max-width:900px){ body{ padding-bottom:80px } .mobile-bar{ display:flex } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); 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(60px,9vw,110px) 0 clamp(48px,7vw,90px) }
.page-in{ max-width:760px; margin:0 auto }
.page-in h1{ font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; margin-bottom:18px }
.page-in h2{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:1.25rem; margin:34px 0 12px; color:var(--ink) }
.page-in p, .page-in li{ color:var(--ink-2); font-size:1rem; line-height:1.7 }
.page-in a{ color:var(--red); text-decoration:underline; text-underline-offset:2px }
.page-in ul{ padding-left:1.2em }
.page-in .placeholder-box{ background:var(--red-tint); border:1px dashed rgba(255,59,48,.4); color:#f0b3ae; border-radius:var(--r); padding:20px 22px; margin:20px 0; font-size:.94rem; line-height:1.6 }
.page-in .placeholder-box b{ color:var(--red-2) }

/* Lesbare Zeilenlaenge */
.discreet-band p, #ablauf .step p, .form-fine{ max-width:55ch }
.sec-head .lead, .hero-copy .lead{ max-width:58ch }