/* ============================================================
   Constructly Recruiting — Design-System v4
   Handschrift nach Referenzen (Georg, Funnellab, Dörrzapf, Persox):
   weiche Grotesk in Normalschreibung, Farbakzent in der Headline,
   runde Ecken, weiche Schatten, Fotos ohne Abdunklung.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  /* Farben: tiefes Nachtblau, kühles Weiß, Marken-Orange */
  --ink:        #121213;
  --ink-2:      #1A1A1C;
  --ink-3:      #232326;
  --paper:      #FFFFFF;
  --paper-2:    #F5F5F4;
  --paper-3:    #EBEBE9;
  --txt:        #1C1C1E;
  --txt-soft:   #63636B;
  --txt-inv:    #FFFFFF;
  --txt-inv-soft: rgba(255,255,255,.70);
  --line:       rgba(18,18,19,.10);
  --line-dark:  rgba(255,255,255,.12);
  --accent:     #FF5C0A;
  --accent-hot: #FF8038;
  --accent-soft: rgba(255,92,10,.10);
  --ok:         #17936A;
  --bad:        #D0402B;

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typo: ruhige Skala, Normalschreibung */
  --fs-xs:   clamp(.78rem, .76rem + .1vw, .85rem);
  --fs-sm:   clamp(.9rem, .87rem + .15vw, 1rem);
  --fs-base: clamp(1rem, .97rem + .18vw, 1.1rem);
  --fs-md:   clamp(1.08rem, 1.02rem + .3vw, 1.28rem);
  --fs-lg:   clamp(1.3rem, 1.18rem + .5vw, 1.65rem);
  --fs-xl:   clamp(1.85rem, 1.55rem + 1.3vw, 2.9rem);
  --fs-2xl:  clamp(2.1rem, 1.7rem + 1.9vw, 3.5rem);
  --fs-hero: clamp(2.4rem, 1.85rem + 2.6vw, 4.4rem);

  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;  --s-7: 6rem;
  --sect: clamp(4.5rem, 3.8rem + 5vw, 9rem);
  --sect-sm: clamp(3rem, 2.6rem + 3vw, 5.5rem);
  --gap-cards: clamp(1.25rem, 1.8vw, 2rem);

  --w-text: 42rem;
  --w-content: 71rem;
  --w-wide: 82rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(18,18,19,.05), 0 1px 2px rgba(18,18,19,.04);
  --shadow: 0 12px 32px rgba(18,18,19,.08), 0 2px 8px rgba(18,18,19,.04);
  --shadow-lg: 0 30px 70px rgba(18,18,19,.14), 0 8px 20px rgba(18,18,19,.07);
}

@media (min-width: 1800px) {
  :root { --fs-hero: 4.8rem; --w-content: 76rem; --w-wide: 88rem; }
}

/* ---------- Basis ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--txt);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
h1,h2,h3 { font-family: var(--font); font-weight: 800; letter-spacing: -.022em; line-height: 1.12; margin: 0 0 var(--s-3); text-wrap: balance; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; }
h4 { font-family: var(--font); margin: 0 0 var(--s-2); font-weight: 700; }
p  { margin: 0 0 var(--s-2); max-width: var(--w-text); }
a  { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }

.container      { width:100%; max-width: calc(var(--w-content) + 2*var(--gutter)); margin-inline:auto; padding-inline: var(--gutter); }
.container-wide { width:100%; max-width: calc(var(--w-wide) + 2*var(--gutter)); margin-inline:auto; padding-inline: var(--gutter); }
section { padding-block: var(--sect); position: relative; }

.dark { background: var(--ink); color: var(--txt-inv); }
.dark h2, .dark h3 { color: #fff; }
.dark p { color: var(--txt-inv-soft); }
.grain::after { content: none; }

/* ---------- Kicker: Pill-Badge ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: var(--accent); background: var(--accent-soft);
  padding: .5em 1em; border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.kicker::before { content:""; width:.45em; height:.45em; border-radius:50%; background: var(--accent); flex:0 0 auto; }
.dark .kicker, .kicker.inv { color: var(--accent-hot); background: rgba(255,92,10,.14); }

.sect-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.sect-head p { font-size: var(--fs-md); color: var(--txt-soft); }
.dark .sect-head p { color: var(--txt-inv-soft); }
.sect-head[data-num]::after { content: none; }
.center-head { text-align: center; margin-inline: auto; }
.center-head p { margin-inline: auto; }

/* ---------- Buttons: Pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font); font-weight: 600; font-size: var(--fs-sm);
  padding: .95em 1.7em; border: 0; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none; line-height: 1.2;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn::after { content:"→"; font-weight: 500; transition: transform .16s ease; }
.btn:hover::after { transform: translateX(3px); }
.btn-primary { background: var(--accent); color:#fff; box-shadow: 0 8px 20px rgba(255,92,10,.28); }
.btn-primary:hover { background: #F55405; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,92,10,.34); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.dark .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.btn-ghost:hover { background: rgba(127,127,127,.07); }
.btn-note { display:block; font-size: var(--fs-xs); color: var(--txt-soft); margin-top:.85em; }
.dark .btn-note { color: var(--txt-inv-soft); }
.cta-row { display:flex; flex-direction:column; align-items:flex-start; margin-top: var(--s-4); }
.cta-row.center { align-items:center; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Blur liegt auf dem Pseudo-Element: backdrop-filter direkt auf .nav würde die Nav
   zum Containing Block für das fixierte Mobile-Menü machen und es einsperren. */
.nav::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(18,18,19,.85);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.nav-inner { display:flex; align-items:center; gap: var(--s-4); height: 88px; }
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height: 46px; width:auto; }
@media (max-width: 560px) { .nav-logo img { height: 38px; } .nav-inner { height: 76px; } }
.nav-links { display:flex; gap: clamp(.7rem, 1.5vw, 1.7rem); margin-left:auto; align-items:center; }
.nav-links a { color: rgba(255,255,255,.78); text-decoration:none; font-size:.92rem; font-weight:500; transition: color .15s ease; }
.nav-links a:hover { color:#fff; }
.nav-cta { margin-left: var(--s-2); }
.nav .btn { padding:.72em 1.35em; font-size:.88rem; }
.nav-links a.btn-primary { color:#fff; }
.nav-burger { display:none; margin-left:auto; background:none; border:0; cursor:pointer; width:46px; height:46px; padding:11px; z-index:102; }
.nav-burger span { display:block; height:2px; background:#fff; margin:5px 0; border-radius:2px; transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset:0; z-index:101;
    flex-direction:column; justify-content:center; align-items:center; gap:1.3rem;
    padding: 108px var(--gutter) 40px; background: var(--ink);
    opacity:0; pointer-events:none; transition: opacity .22s ease; overflow-y:auto;
  }
  .nav-links a { font-size:1.2rem; color:#fff; }
  .nav-cta { margin:.8rem 0 0; }
  .nav.open .nav-links { opacity:1; pointer-events:auto; }
  .nav-burger { display:block; }
  .nav.open .nav-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.open .nav-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO — "Die Kampagne läuft": echte Anzeige im Handy,
   Bewerbungen laufen rechts live ein
   ============================================================ */
.hero {
  position: relative; background: var(--ink); color: var(--txt-inv);
  padding-top: calc(88px + clamp(2.5rem, 2rem + 3vw, 5rem));
  padding-bottom: clamp(3.5rem, 3rem + 3.5vw, 6rem);
  overflow: hidden;
}
/* ganz leichtes Kampagnen-Shooting im Hintergrund */
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:50% 34%; opacity:.16; filter:grayscale(38%) contrast(1.04); }
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 78% 30%, rgba(255,92,10,.22), transparent 66%),
    linear-gradient(90deg, var(--ink) 6%, rgba(18,18,19,.86) 34%, rgba(18,18,19,.7) 62%, rgba(18,18,19,.82) 100%),
    linear-gradient(180deg, rgba(18,18,19,.55) 0%, transparent 26%, rgba(18,18,19,.75) 88%, var(--ink) 100%);
}
.hero-split {
  position:relative; z-index:2; display:grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items:center; text-align:left;
  width:100%; max-width: calc(78rem + 2*var(--gutter)); margin-inline:auto; padding-inline: var(--gutter);
}
@media (max-width: 1000px) { .hero-split { grid-template-columns:1fr; } }
.hero-copy { display:block; }
.topline {
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.82rem; font-weight:600; color:#FFB183;
  background:rgba(255,92,10,.13); border:1px solid rgba(255,92,10,.3);
  padding:.5em 1.05em; border-radius: var(--r-pill);
  margin:0 0 clamp(1.3rem, 1.1rem + 1vw, 2rem);
}
.topline::before { content:""; width:.45em; height:.45em; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.hero h1 {
  font-size: clamp(2.4rem, 1.85rem + 2.8vw, 4.5rem); font-weight:800;
  letter-spacing:-.035em; line-height:1.04; margin:0 0 1.2rem; color:#fff; max-width:15ch;
}
.hero h1 .u { position:relative; color: var(--accent); white-space:nowrap; }
.hero h1 .u::after { content:""; position:absolute; left:0; right:0; bottom:.05em; height:.12em; background:var(--accent); opacity:.26; border-radius:2px; }
.hero-sub { font-size: clamp(1.02rem, .98rem + .3vw, 1.22rem); color: rgba(255,255,255,.68); max-width:33rem; line-height:1.6; margin:0 0 2rem; }
.hero .cta-row { align-items:flex-start; margin-top:0; }
.hero-guarantee {
  display:block; max-width:33rem; margin: var(--s-4) 0 0;
  font-size:.92rem; line-height:1.6; color: rgba(255,255,255,.66);
  background: rgba(255,255,255,.05); border-radius: var(--r); padding:.9em 1.2em;
}
.hero-guarantee strong { color:#fff; font-weight:700; }
.hero-photo { display:none; }
.hero-vsl { display:none; }
.mono-caption { display:none; }

/* Kennzahlen: immer eine Zeile, drei gleich breite Spalten */
.hero-stats {
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 2.2rem);
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  padding-top: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  border-top:1px solid rgba(255,255,255,.11); text-align:left; max-width:33rem;
}
.stat { min-width:0; }
.stat .stat-n { font-size: clamp(1.4rem, 1.15rem + .95vw, 2rem); font-weight:800; letter-spacing:-.03em; color:#fff; display:block; line-height:1; white-space:nowrap; }
.stat .stat-n em { font-style:normal; color: var(--accent); }
.stat .stat-l { display:block; margin-top:.55em; font-size:.76rem; line-height:1.35; color: rgba(255,255,255,.5); }
.stats-src { display:none; }
@media (max-width: 420px) { .hero-stats { gap:.8rem } .stat .stat-l { font-size:.7rem } }

/* ---------- Bühne: Handy + einlaufende Bewerbungen ---------- */
.hero-stage { position:relative; display:flex; justify-content:flex-start; align-items:center; min-height:620px; padding-right:15.5rem; }
@media (max-width:1240px){ .hero-stage { padding-right:13rem } }
@media (max-width:1000px){ .hero-stage { min-height:auto; justify-content:center; padding-right:0; margin-top:2.5rem; flex-direction:column; gap:2rem } }
.device {
  position:relative; z-index:3; width:min(290px, 74vw); aspect-ratio:9/19.3;
  background:#000; border-radius:46px; padding:11px; flex:0 0 auto;
  box-shadow: 0 0 0 2px #33333A, 0 40px 90px rgba(0,0,0,.72), 0 0 100px rgba(255,92,10,.14);
}
.device .screen { position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#000; }
.device .screen video { width:100%; height:100%; object-fit:cover; }
.device .island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:33%; height:26px; background:#000; border-radius:99px; z-index:4; }
.device .ui-top { position:absolute; top:44px; left:0; right:0; display:flex; align-items:center; gap:.6rem; padding:0 .8rem; z-index:3; }
.device .ui-top .av { height:40px; padding:0 .5rem; border-radius:12px; background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.4); flex:0 0 auto; display:grid; place-items:center; }
.device .ui-top .av img { height:24px; width:auto; object-fit:contain; }
.device .ui-top .nm { font-size:.86rem; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); line-height:1.25; }
.device .ui-top .nm i { display:block; font-style:normal; font-weight:400; font-size:.68rem; opacity:.85; }
.device .grad { position:absolute; inset:0; background:linear-gradient(transparent 52%, rgba(0,0,0,.62)); z-index:2; }
.device .cta {
  position:absolute; left:.8rem; right:.8rem; bottom:1.1rem; z-index:3;
  background: var(--accent); color:#fff; text-align:center; font-size:.85rem; font-weight:700;
  padding:.85em; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.45);
}

/* Bewerbungs-Strom */
.notes-wrap { position:absolute; right:0; top:50%; transform:translateY(-50%); width:min(258px,60vw); z-index:4; }
@media (max-width:1000px){ .notes-wrap { position:static; transform:none; width:min(360px,100%); } }
/* Fester Stapel: drei Plätze, Höhe ändert sich nie.
   Dadurch bleibt der Hinweistext darunter beim Kartenwechsel stehen. */
.notes { --nh: 64px; --ng: 10px; position:relative; height: calc(3 * var(--nh) + 2 * var(--ng)); }
.note {
  position:absolute; left:0; right:0; top:0; height: var(--nh);
  background: rgba(255,255,255,.97); color:#1C1C1E; border-radius:15px; padding:.7rem .85rem;
  display:flex; gap:.65rem; align-items:center; box-shadow:0 16px 42px rgba(0,0,0,.4);
  transition: transform .55s cubic-bezier(.2,.85,.3,1), opacity .4s ease;
  will-change: transform, opacity;
}
/* Ohne JS: die drei Startkarten stehen auf ihren Plätzen */
.note:nth-child(1) { transform: translateY(0); }
.note:nth-child(2) { transform: translateY(calc(1 * (var(--nh) + var(--ng)))); }
.note:nth-child(3) { transform: translateY(calc(2 * (var(--nh) + var(--ng)))); }
.js .note { transition: transform .55s cubic-bezier(.2,.85,.3,1), opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .note { transition:none } }
.note .pic { width:38px; height:38px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:#E7E7E4; }
.note .pic img { width:100%; height:100%; object-fit:cover; }
.note .tx { min-width:0; flex:1 }
.note b { display:block; font-size:.83rem; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.note span { display:block; font-size:.72rem; color:#63636B; margin-top:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.note .st {
  flex:0 0 auto; font-size:.78rem; font-weight:800; letter-spacing:-.02em;
  min-width:2.5em; text-align:center; padding:.3em .55em; border-radius:9px;
  background:rgba(255,92,10,.12); color:#D64A05;
}
.note .st::before { content:"Score"; display:block; font-size:.52rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-bottom:-.1em; }
.note .st.top { background:rgba(23,147,106,.14); color:#0F7A56; }
.notes-hint { margin-top:.8rem; font-size:.7rem; color:rgba(255,255,255,.34); text-align:right; }
@media (max-width:1000px){ .notes-hint { text-align:center } }

/* ---------- Referenz-Leiste ---------- */
.trust { background: var(--paper-2); color: var(--txt); padding-block: clamp(2rem, 1.8rem + 1.5vw, 3rem); }
.trust-line { text-align:center; font-size:.88rem; color: var(--txt-soft); margin:0 0 var(--s-3); }
.trust-line i { display:none; }
.marquee { overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap:0; width:max-content; animation: marquee 46s linear infinite; align-items:center; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation:none; flex-wrap:wrap; width:100%; justify-content:center; } }
.marquee-item { font-size: clamp(.95rem, 1.2vw, 1.15rem); font-weight:600; color: rgba(28,28,30,.42); white-space:nowrap; }
.marquee-item b { color: rgba(28,28,30,.62); font-weight:700; }
.marquee-item::after { content:"•"; color: var(--accent); margin: 0 1.6em; opacity:.55; }

/* ============================================================
   VIDEO-FASSADE
   ============================================================ */
.video-facade {
  position:relative; display:block; width:100%; padding:0;
  aspect-ratio: 16/9; overflow:hidden; cursor:pointer;
  background:#000; border:0; border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font: inherit; color: inherit; text-align: inherit;
}
.video-facade.portrait { aspect-ratio: 9/16; }
.video-facade > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.video-facade:hover > img { transform: scale(1.02); }
.video-facade .play {
  position:absolute; inset:0; margin:auto;
  width: clamp(54px, 6vw, 70px); height: clamp(54px, 6vw, 70px);
  background: var(--accent); border-radius:50%;
  display:grid; place-items:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.video-facade:hover .play { transform: scale(1.07); }
.video-facade .play svg { width:38%; height:38%; fill:#fff; margin-left:8%; }
.video-facade .vf-label {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 2.6em 1.1em 1em;
  background: linear-gradient(transparent, rgba(0,0,0,.55) 55%, rgba(0,0,0,.72));
  color:#fff; font-size:.82rem; font-weight:600; text-align:left;
}
.video-facade iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }

/* ============================================================
   PROBLEM / VERGLEICH
   ============================================================ */
.quote-intro { font-size: var(--fs-lg); font-weight:600; color: var(--txt); max-width:34rem; margin-bottom: var(--s-2); }
.pain-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-cards); }
.pain { background: var(--paper); border:1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 2vw, 2.2rem); box-shadow: var(--shadow-sm); }
.pain .p-num, .pain .j-num { display:inline-flex; align-items:center; justify-content:center; width:2.1em; height:2.1em; border-radius:50%; background: var(--accent-soft); color: var(--accent); font-size:.9rem; font-weight:700; margin-bottom:1rem; }
.pain h3 { font-size: var(--fs-base); font-weight:700; margin-bottom:.45em; }
.pain p { font-size: var(--fs-sm); margin:0; color: var(--txt-soft); }

.compare-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--s-2); }
.compare { display:grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: var(--gap-cards); min-width:max-content; }
.compare.two { grid-template-columns: repeat(2, minmax(0,1fr)); min-width:0; }
@media (min-width: 1180px) { .compare { min-width:0; } .compare-scroll { overflow:visible; margin:0; padding:0; } }
@media (max-width: 800px) { .compare.two { grid-template-columns:1fr; } }
.cmp-col { background: var(--paper); border:1px solid var(--line); border-radius: var(--r); padding: clamp(1.6rem, 2.2vw, 2.4rem); display:flex; flex-direction:column; gap:.85rem; box-shadow: var(--shadow-sm); }
.cmp-tag { font-size:.82rem; font-weight:600; color: var(--txt-soft); }
.cmp-col h3 { font-size:1.15rem; font-weight:700; margin:0 0 .4rem; }
.cmp-col.win { background: var(--ink); color: var(--txt-inv); border-color: transparent; box-shadow: var(--shadow-lg); }
.cmp-col.win h3 { color:#fff; }
.cmp-col.win .cmp-tag { color: var(--accent-hot); }
.cmp-item { display:flex; gap:.65em; align-items:flex-start; font-size:.95rem; line-height:1.5; color: var(--txt-soft); }
.cmp-col.win .cmp-item { color: var(--txt-inv-soft); }
.cmp-item svg { flex:0 0 20px; width:20px; height:20px; margin-top:.15em; }
.cmp-item.no svg { color: var(--bad); }
.cmp-item.yes svg { color: var(--ok); }
.cmp-col.win .cmp-item.yes svg { color: var(--accent-hot); }

/* ============================================================
   DER WEG
   ============================================================ */
.journey { background: var(--ink); color: var(--txt-inv); overflow:clip; }
.journey-grid { display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem, 5vw, 5.5rem); align-items:start; }
.journey-device-wrap { position:sticky; top: calc(88px + 4vh); display:flex; justify-content:center; padding-block: var(--s-2); }

.phone { width:min(310px, 76vw); aspect-ratio:9/19; border-radius:42px; background:#08080A; border:9px solid #2B2B2E; box-shadow: 0 30px 80px rgba(0,0,0,.6); position:relative; overflow:hidden; }
.phone::before { content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34%; height:19px; background:#2B2B2E; border-radius:12px; z-index:5; }
.phone .screen { position:absolute; inset:0; opacity:0; transition: opacity .45s ease; overflow:hidden; }
.phone .screen.active { opacity:1; }
.laptop { width:min(540px, 90%); display:none; }
.laptop .lap-screen { border-radius:12px 12px 0 0; border:8px solid #2B2B2E; border-bottom:0; background:#08080A; overflow:hidden; position:relative; aspect-ratio:16/10; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.laptop .lap-base { height:13px; background:linear-gradient(#43434A,#2B2B2E); border-radius:0 0 12px 12px; }
.laptop .screen { position:absolute; inset:0; opacity:0; transition: opacity .45s ease; }
.laptop .screen.active { opacity:1; }
.journey-device-wrap[data-device="laptop"] .phone { display:none; }
.journey-device-wrap[data-device="laptop"] .laptop { display:block; }

.scr-ig { background:#000; display:flex; flex-direction:column; }
.scr-ig .ig-top { display:flex; align-items:center; gap:.5rem; padding:2.3rem .9rem .6rem; color:#fff; font-size:.72rem; font-weight:600; }
.scr-ig .ig-top .dot { width:26px; height:26px; border-radius:50%; background:var(--accent); }
.scr-ig .ig-media { flex:1; position:relative; background:#0A0D12; }
.scr-ig .ig-media img, .scr-ig .ig-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scr-ig .ig-bar { display:flex; gap:1rem; padding:.7rem .9rem 1.4rem; color:#fff; }
.scr-ig .ig-bar svg { width:22px; height:22px; }
.ig-sponsored { position:absolute; top:.6rem; left:.9rem; background:rgba(0,0,0,.5); color:#fff; font-size:.64rem; padding:.3em .7em; border-radius:99px; }
.ig-cta { position:absolute; left:.9rem; right:.9rem; bottom:.9rem; background:var(--accent); color:#fff; text-align:center; font-size:.8rem; font-weight:700; padding:.75em; border-radius:10px; }

.scr-funnel { background:#F5F5F4; color:var(--ink); display:flex; flex-direction:column; padding:2.5rem .95rem 1rem; }
.scr-funnel .f-logo { font-weight:700; font-size:.82rem; margin-bottom:.8rem; color:var(--txt); }
.scr-funnel .f-card { background:#fff; border-radius:12px; padding:1rem; margin-bottom:.7rem; box-shadow: var(--shadow-sm); }
.scr-funnel .f-card h4 { font-size:.84rem; margin:0 0 .3rem; font-weight:700; }
.scr-funnel .f-card p { font-size:.7rem; color:var(--txt-soft); margin:0; }
.scr-funnel .f-btn { margin-top:auto; background:var(--accent); color:#fff; text-align:center; font-weight:700; font-size:.82rem; padding:.85em; border-radius:var(--r-pill); margin-bottom:.4rem; }
.f-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.f-chip { font-size:.68rem; font-weight:600; padding:.45em .85em; border-radius:99px; background:var(--accent-soft); color:var(--accent); }
.f-chip.on { background:var(--accent); color:#fff; }
.f-progress { height:5px; background:rgba(18,18,19,.08); border-radius:99px; margin:.9rem 0; overflow:hidden; }
.f-progress i { display:block; height:100%; width:66%; background:var(--accent); border-radius:99px; }

.scr-wa { background:#0B141A; display:flex; flex-direction:column; padding:2.5rem 0 0; }
.scr-wa .wa-head { display:flex; align-items:center; gap:.55rem; background:#1F2C34; color:#fff; padding:.6rem .9rem; font-size:.74rem; font-weight:600; }
.scr-wa .wa-head .dot { width:26px; height:26px; border-radius:50%; background:var(--accent); display:grid; place-items:center; font-size:.62rem; color:#fff; font-weight:700; }
.scr-wa .wa-body { flex:1; padding:.8rem .7rem; display:flex; flex-direction:column; gap:.45rem; overflow:hidden; }
.wa-msg { max-width:82%; font-size:.68rem; line-height:1.45; padding:.55em .8em; border-radius:12px; color:#E6EDF1; }
.wa-msg.in  { background:#1F2C34; border-top-left-radius:3px; align-self:flex-start; }
.wa-msg.out { background:#144D37; border-top-right-radius:3px; align-self:flex-end; }
.wa-time { font-size:.54rem; color:rgba(230,237,241,.45); text-align:right; margin-top:.25em; display:block; }

.scr-shot { background:#0A0D12; }
.scr-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; }
.scr-list { background:#191919; padding:1.2rem; display:flex; flex-direction:column; gap:.6rem; overflow:hidden; }
.scr-list .cand { display:flex; align-items:center; gap:.7rem; background:#242427; border-radius:12px; padding:.7rem .8rem; }
.scr-list .cand .av { width:34px; height:34px; border-radius:50%; background:#37373C; flex:0 0 34px; display:grid; place-items:center; font-size:.64rem; font-weight:700; color:#fff; }
.scr-list .cand .cn { font-size:.74rem; color:#fff; font-weight:600; display:block; }
.scr-list .cand .cs { font-size:.62rem; color:rgba(255,255,255,.55); display:block; }
.scr-list .score { margin-left:auto; font-size:.72rem; font-weight:700; color:#fff; background:var(--accent); padding:.3em .7em; border-radius:99px; }
.scr-list .cand.dim { opacity:.4; }
.scr-list .cand.dim .score { background:#43434A; }

.j-steps { display:flex; flex-direction:column; gap: var(--s-3); }
.j-step {
  background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 2.2vw, 2.4rem);
  transition: border-color .3s ease, background-color .3s ease, opacity .3s ease;
  opacity:.55;
}
.j-step.active { opacity:1; background: rgba(255,92,10,.07); border-color: rgba(255,92,10,.32); }
html:not(.js) .j-step { opacity:1; }
.j-num { display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; font-weight:600; color: var(--accent-hot); margin-bottom:.9rem; }
.j-step h3 { font-size: var(--fs-lg); color:#fff; margin-bottom:.5rem; }
.j-step p { font-size: var(--fs-sm); margin:0; }
.j-step .j-side { display:inline-block; margin-top: var(--s-2); font-size:.78rem; font-weight:600; color: var(--txt-inv-soft); }
.j-bg { display:flex; gap: var(--s-3); align-items:flex-start; justify-content:space-between; background: rgba(0,0,0,.22); border-radius: var(--r); padding: 1.1rem 1.3rem; margin-top: var(--s-3); }
.j-bg-main { min-width:0; }
.j-bg-label { display:block; font-size:.76rem; font-weight:700; color: var(--accent-hot); margin-bottom:.65em; }
.j-bg ul { display:flex; flex-direction:column; gap:.4em; }
.j-bg li { display:flex; gap:.6em; font-size:.88rem; color: var(--txt-inv-soft); }
.j-bg li::before { content:"·"; color: var(--accent); font-weight:700; }
.j-aufwand { flex:0 0 auto; text-align:right; font-size:.74rem; color: var(--txt-inv-soft); }
.j-aufwand b { display:block; font-size:1.05rem; font-weight:700; color:#fff; margin-top:.25em; }
.j-mini { display:none; margin-top: var(--s-3); border-radius: var(--r); overflow:hidden; }
.j-mini img { width:100%; }
@media (max-width: 640px) { .j-bg { flex-direction:column; gap: var(--s-2); } .j-aufwand { text-align:left; } }
@media (max-width: 1080px) {
  .journey-grid { grid-template-columns:1fr; }
  .journey-device-wrap { display:none; }
  .j-mini { display:block; }
  .j-step { opacity:1; }
}

/* ---------- Trichter ---------- */
.funnel-strip {
  margin-top: var(--s-6);
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: clamp(1.8rem, 3vw, 3rem);
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s-3); align-items:center;
}
.funnel-cell { text-align:center; }
.funnel-cell .fn { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1; display:block; color:#fff; }
.funnel-cell:nth-child(3) .fn { color: var(--accent-hot); }
.funnel-cell:nth-child(5) .fn { color: var(--accent); }
.funnel-cell .fl { font-size:.84rem; color: var(--txt-inv-soft); margin-top:.5em; display:block; }
.funnel-arrow { color: rgba(255,255,255,.3); font-size:1.5rem; }
.funnel-src { grid-column:1/-1; text-align:center; font-size:.76rem; color: rgba(255,255,255,.4); }
@media (max-width: 720px) { .funnel-strip { grid-template-columns:1fr; } .funnel-arrow { transform:rotate(90deg); margin:0 auto; } }

/* ============================================================
   CASES / TESTIMONIALS
   ============================================================ */
.cases { background: var(--paper-2); }
.case-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--gap-cards); }
.case { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case .video-facade { border-radius:0; box-shadow:none; }
.case-body { padding: clamp(1.4rem, 1.9vw, 1.9rem); display:flex; flex-direction:column; gap:.75rem; flex:1; }
.case-metric { font-size: var(--fs-lg); font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.case-metric em { font-style:normal; color: var(--accent); }
.case-quote { font-size: var(--fs-sm); color: var(--txt-soft); margin:0; }
.case-who { margin-top:auto; display:flex; align-items:center; gap:.75rem; font-size:.9rem; padding-top:.9rem; border-top:1px solid var(--line); }
.case-who img { width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--paper-3); }
.case-who b { display:block; font-weight:700; }
.case-who span { color: var(--txt-soft); font-size:.8rem; }

.mini-cases { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--gap-cards); margin-top: var(--s-4); }
.mini-case { padding: clamp(1.5rem, 2vw, 2rem); background: var(--paper); border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.mini-case b { font-size: var(--fs-md); font-weight:800; letter-spacing:-.02em; }
.mini-case span { display:block; color: var(--txt-soft); font-size: var(--fs-sm); margin-top:.35em; }

.testi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--gap-cards); }
.testi { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 2vw, 2.1rem); display:flex; flex-direction:column; gap: var(--s-2); box-shadow: var(--shadow-sm); }
.testi::before { content:"“"; font-size:2.6rem; font-weight:800; line-height:.8; color: var(--accent); }
.testi p { font-size: var(--fs-sm); color: var(--txt); margin:0; flex:1; }
.testi .case-who { border-top:1px solid var(--line); }

/* ============================================================
   SOCIAL / BAND
   ============================================================ */
.social { background: var(--ink); color: var(--txt-inv); }
.social-badges { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom: clamp(2.5rem, 3.5vw, 4rem); }
.badge-pill { font-size:.85rem; font-weight:500; padding:.6em 1.1em; border-radius: var(--r-pill); background: rgba(255,255,255,.07); color: var(--txt-inv-soft); }
.badge-pill b { color:#fff; font-weight:700; }
.social-films { display:grid; grid-template-columns:1fr 1fr; gap: var(--gap-cards); margin-bottom: var(--sect-sm); }
@media (max-width: 900px) { .social-films { grid-template-columns:1fr; } }
.film-card h3 { font-size: var(--fs-base); font-weight:700; margin: var(--s-3) 0 .2em; color:#fff; }
.film-card span { font-size:.85rem; color: var(--txt-inv-soft); }
.ads-split { display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem, 4vw, 5rem); align-items:center; margin-bottom: var(--sect-sm); }
@media (max-width: 1080px) { .ads-split { grid-template-columns:1fr; } }
.ads-pair { display:flex; gap: var(--gap-cards); justify-content:flex-end; flex-wrap:wrap; }
@media (max-width: 1080px) { .ads-pair { justify-content:flex-start; } }
.ads-pair .video-facade.portrait { width: clamp(14rem, 17vw, 18rem); flex:0 0 auto; }
.reel-row-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom: var(--s-4); }
.reel-row-head h3 { margin:0; }
.social-ads { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--gap-cards); align-items:start; max-width:78rem; }
.reel-tile { position:relative; aspect-ratio:9/16; border-radius: var(--r); overflow:hidden; display:block; text-decoration:none; color:#fff; background: var(--ink-3); box-shadow: var(--shadow); }
.reel-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.reel-tile:hover img { transform: scale(1.04); }
.reel-tile .rt-ico { position:absolute; top:.9rem; right:.9rem; width:26px; height:26px; opacity:.95; }
.reel-tile .rt-label { position:absolute; left:0; right:0; bottom:0; padding:2.4em 1em .9em; background: linear-gradient(transparent, rgba(0,0,0,.7)); font-size:.82rem; font-weight:600; }
.social-note { font-size:.9rem; color: var(--txt-inv-soft); margin-top: var(--s-3); }
.social-note a { color:#fff; font-weight:600; }

.band { position:relative; padding-block: clamp(3.5rem, 3rem + 4vw, 6.5rem); overflow:clip; color: var(--txt-inv); background: var(--ink); }
.band .band-bg { position:absolute; inset:0; }
.band .band-bg img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.band .band-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(18,18,19,.94) 0%, rgba(18,18,19,.8) 42%, rgba(18,18,19,.5) 72%, rgba(18,18,19,.34) 100%); }
.band .container { position:relative; z-index:1; }
.band h2 { max-width:20ch; color:#fff; }
.band p { color: var(--txt-inv-soft); max-width:36rem; }

/* ============================================================
   MITSCORE / HERKUNFT
   ============================================================ */
.mitscore-grid { display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items:center; }
@media (max-width: 1080px) { .mitscore-grid { grid-template-columns:1fr; } }
.mitscore-shot { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.feature-list { display:flex; flex-direction:column; gap: var(--s-3); }
.feature { display:flex; gap: var(--s-3); align-items:flex-start; }
.feature .f-num, .feature .f-ico { flex:0 0 auto; display:inline-grid; place-items:center; width:2.3em; height:2.3em; border-radius:50%; background: var(--accent-soft); color: var(--accent); font-size:.92rem; font-weight:700; }
.feature b { display:block; font-size: var(--fs-base); font-weight:700; margin-bottom:.15em; }
.feature span:not(.f-num):not(.f-ico) { font-size: var(--fs-sm); color: var(--txt-soft); }

.origin { background: var(--paper-2); }
.origin-grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items:center; }
@media (max-width: 1080px) { .origin-grid { grid-template-columns:1fr; } }
.origin-media { position:relative; }
.origin-media .om-main { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.origin-media .om-small { position:absolute; right:-5%; bottom:-9%; width:44%; aspect-ratio:1; object-fit:cover; border-radius: var(--r); border:6px solid var(--paper-2); box-shadow: var(--shadow); }
@media (max-width: 1080px) { .origin-media { margin-bottom: var(--s-6); } .origin-media .om-small { right:0; } }
.fact-cards { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 700px) { .fact-cards { grid-template-columns:1fr; } }
.fact { padding: var(--s-3); background: var(--paper); border:1px solid var(--line); border-radius: var(--r); }
.fact b { font-size: var(--fs-md); font-weight:800; letter-spacing:-.02em; display:block; }
.fact span { font-size:.82rem; color: var(--txt-soft); }

/* ============================================================
   GARANTIE
   ============================================================ */
.guarantee { background: var(--ink); color: var(--txt-inv); }
.contract {
  position:relative; max-width:44rem; margin-top: var(--s-4);
  background: var(--paper); color: var(--txt);
  border-radius: var(--r-lg); padding: clamp(1.8rem, 3vw, 3rem);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}
.contract::before { content:none; }
.contract .c-head { font-size: var(--fs-md); font-weight:800; letter-spacing:-.02em; margin-bottom: var(--s-3); display:flex; align-items:center; gap:.6em; }
.contract .c-head svg { width:1.3em; height:1.3em; color: var(--accent); }
.contract .c-text { background: var(--accent-soft); border-radius: var(--r); padding: 1em 1.2em; font-size: var(--fs-base); margin-bottom: var(--s-3); }
.contract ul { display:flex; flex-direction:column; gap:.65em; margin-bottom: var(--s-3); }
.contract li { display:flex; gap:.65em; color: var(--txt-soft); }
.contract li::before { content:"✓"; color: var(--accent); font-weight:700; flex:0 0 auto; }
.contract .c-sig { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; border-top:1px solid var(--line); padding-top: var(--s-3); font-size:.82rem; color: var(--txt-soft); }
.contract .c-sig .sig { font-size:1.1rem; font-weight:700; color: var(--txt); }

/* ============================================================
   RECHNER / PASST / FAQ
   ============================================================ */
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items:center; }
@media (max-width: 1080px) { .calc-grid { grid-template-columns:1fr; } }
.calc { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 2.4vw, 2.6rem); box-shadow: var(--shadow); }
.calc-row { margin-bottom: var(--s-3); }
.calc-row label { display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; font-weight:600; margin-bottom:.7em; }
.calc-row output { color: var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; accent-color: var(--accent); height:32px; cursor:pointer; }
.calc-result { border-top:1px solid var(--line); padding-top: var(--s-3); text-align:center; }
.calc-result .cr-n { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight:800; letter-spacing:-.025em; color: var(--accent); display:block; font-variant-numeric:tabular-nums; }
.calc-result .cr-l { font-size:.85rem; color: var(--txt-soft); margin-top:.55em; display:block; }
.calc-formula { font-size:.78rem; color: var(--txt-soft); margin-top: var(--s-2); text-align:center; }

.fit-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--gap-cards); }
@media (max-width: 900px) { .fit-grid { grid-template-columns:1fr; } }
.fit-col { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.7rem, 2.4vw, 2.6rem); box-shadow: var(--shadow-sm); }
.fit-col .fit-tag { display:inline-block; font-size:.8rem; font-weight:600; color:#fff; padding:.4em 1em; border-radius: var(--r-pill); margin-bottom: var(--s-3); }
.fit-col.good .fit-tag { background: var(--ok); }
.fit-col.badc .fit-tag { background: var(--bad); }
.fit-col h3 { font-size: var(--fs-md); }
.fit-col ul { display:flex; flex-direction:column; gap:.85em; margin-top: var(--s-3); }
.fit-col li { display:flex; gap:.7em; font-size: var(--fs-sm); color: var(--txt-soft); align-items:flex-start; }
.fit-col li svg { flex:0 0 20px; width:20px; height:20px; margin-top:.15em; }
.fit-col.good li svg { color: var(--ok); }
.fit-col.badc li svg { color: var(--bad); }

.faq-list { max-width:48rem; }
.faq-item { border:1px solid var(--line); border-radius: var(--r); background: var(--paper); margin-bottom:.8rem; box-shadow: var(--shadow-sm); }
.faq-item summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:1rem; padding:1.15rem 1.4rem; font-weight:650; font-size: var(--fs-base); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .faq-n { display:none; }
.faq-item summary::after { content:"+"; font-size:1.5em; line-height:1; color: var(--accent); margin-left:auto; transition: transform .22s ease; flex:0 0 auto; font-weight:400; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding:0 1.4rem 1.35rem; color: var(--txt-soft); font-size: var(--fs-sm); }
.faq-item .faq-a p { margin-bottom:.8em; }

/* ============================================================
   STANDORT / FINAL / FOOTER
   ============================================================ */
.location { background: var(--ink); color: var(--txt-inv); padding:0; }
.location-grid { display:grid; grid-template-columns:1fr 1fr; min-height:480px; }
@media (max-width: 1080px) { .location-grid { grid-template-columns:1fr; } }
.location-media { position:relative; min-height:300px; }
.location-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.location-media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent 45%, rgba(18,18,19,.55) 75%, var(--ink) 98%); }
@media (max-width: 1080px) { .location-media::after { background: linear-gradient(180deg, transparent 45%, rgba(18,18,19,.6) 78%, var(--ink) 98%); } }
.location-body { padding: var(--sect) var(--gutter); display:flex; flex-direction:column; justify-content:center; max-width:42rem; }
.location-addr { font-size: var(--fs-sm); line-height:1.9; color: var(--txt-inv-soft); background: rgba(255,255,255,.05); border-radius: var(--r); padding: 1em 1.2em; margin: var(--s-3) 0; }

.final { background: var(--ink); color: var(--txt-inv); text-align:center; }
.final .container > div { display:flex; flex-direction:column; align-items:center; }
.final h2 { font-size: var(--fs-2xl); max-width:18ch; color:#fff; }
.final p { margin-inline:auto; }
.final .cta-row { align-items:center; }
.ole-card { display:inline-flex; align-items:center; gap: var(--s-2); text-align:left; background: rgba(255,255,255,.06); border-radius: var(--r-pill); padding:.7rem 1.6rem .7rem .7rem; margin-top: var(--s-4); }
.ole-card img { width:50px; height:50px; border-radius:50%; object-fit:cover; }
.ole-card b { display:block; font-size:.95rem; font-weight:700; }
.ole-card span { font-size:.85rem; color: var(--txt-inv-soft); }
.ole-card a { color: var(--accent-hot); text-decoration:none; font-weight:600; }
.ole-card.on-light { background: var(--paper); border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.ole-card.on-light b { color: var(--txt); }
.ole-card.on-light span { color: var(--txt-soft); }
.ole-card.on-light a { color: var(--accent); }

footer { background: var(--ink); color: var(--txt-inv-soft); padding: var(--s-7) 0 var(--s-4); font-size: var(--fs-sm); border-top:1px solid rgba(255,255,255,.08); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
@media (max-width: 900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns:1fr; } }
footer .f-brand img { height:24px; margin-bottom: var(--s-2); }
footer .f-brand p { font-size:.9rem; max-width:22rem; }
footer h4 { font-size:.9rem; font-weight:700; color:#fff; margin:0 0 var(--s-2); }
footer ul { display:flex; flex-direction:column; gap:.6em; }
footer a { color: var(--txt-inv-soft); text-decoration:none; font-size:.92rem; }
footer a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top: var(--s-3); display:flex; flex-wrap:wrap; gap: var(--s-2); justify-content:space-between; align-items:center; font-size:.85rem; }
.footer-social { display:flex; gap:.8rem; }
.footer-social a { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.07); }
.footer-social a:hover { background: var(--accent); color:#fff; }
.footer-social svg { width:17px; height:17px; }

.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(18,18,19,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
  transform: translateY(110%); transition: transform .3s ease; display:none;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width:100%; }
@media (max-width: 700px) { .sticky-cta { display:block; } }

/* ---------- Reveal ---------- */
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1; transform:none; transition:none; } }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.page-hero {
  background: radial-gradient(60% 60% at 50% 0%, rgba(255,92,10,.12), transparent 60%), var(--ink);
  color: var(--txt-inv); padding: calc(88px + var(--sect-sm)) 0 var(--sect-sm); text-align:center;
}
.page-hero .container { display:flex; flex-direction:column; align-items:center; }
.page-hero h1 { font-size: var(--fs-2xl); color:#fff; max-width:20ch; }
.page-hero p, .page-hero .hero-sub { color: var(--txt-inv-soft); font-size: var(--fs-md); max-width:40rem; }
.page-hero .topline { margin-bottom: var(--s-3); }
.page-hero .cta-row { align-items:center; }
.page-hero .btn-note { color: var(--txt-inv-soft); }

.legal-body { padding-block: var(--sect-sm); }
.legal-body .container { max-width:48rem; }
.legal-body h2 { font-size: var(--fs-lg); margin-top: var(--s-5); }
.legal-body h3 { font-size: var(--fs-base); font-weight:700; margin-top: var(--s-4); }
.legal-body p, .legal-body li { font-size: var(--fs-sm); color: var(--txt-soft); overflow-wrap:anywhere; }
.legal-body ul { list-style:disc; padding-left:1.4em; margin-bottom: var(--s-2); }
.legal-body ul.alpha { list-style:none; padding-left:0; }
.legal-body ul.alpha li { padding-left:1.6em; text-indent:-1.6em; margin-bottom:.35em; }
.legal-body ol { padding-left:1.4em; margin-bottom: var(--s-2); }
.legal-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block: var(--s-3); }
.legal-table-scroll table { border-collapse:collapse; font-size:.88rem; min-width:34rem; }
.legal-table-scroll th, .legal-table-scroll td { border:1px solid var(--line); padding:.65em .9em; text-align:left; vertical-align:top; color: var(--txt-soft); }
.legal-table-scroll th { font-weight:700; color: var(--txt); background: var(--paper-2); }

.booking-wrap { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow:hidden; min-height:640px; }
.booking-wrap iframe { width:100%; min-height:640px; border:0; display:block; }
.steps-3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--gap-cards); margin-block: var(--s-5); }

/* Story-Seite */
.story-band { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem); align-items:center; }
@media (max-width: 1080px) { .story-band { grid-template-columns:1fr; } }
.sb-media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sb-media figcaption { font-size:.82rem; color: var(--txt-soft); margin-top:.8em; }
.dark .sb-media figcaption { color: var(--txt-inv-soft); }
.team-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--gap-cards); }
.team-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.team-card img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
.team-card .tc-body { padding: var(--s-3); }
.team-card b { font-size: var(--fs-md); font-weight:700; display:block; }
.team-card .tc-role { font-size:.85rem; font-weight:600; color: var(--accent); display:block; margin:.25em 0 .6em; }
.team-card p { font-size:.9rem; color: var(--txt-soft); margin:0; }
.timeline { border-left:2px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.5rem); display:flex; flex-direction:column; gap: var(--s-5); max-width:42rem; }
.tl-item { position:relative; }
.tl-item::before { content:""; position:absolute; left: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 7px); top:.45em; width:12px; height:12px; border-radius:50%; background: var(--accent); }
.tl-item .tl-year { font-size:.85rem; font-weight:600; color: var(--accent); display:block; margin-bottom:.35em; }
.tl-item h3 { font-size: var(--fs-lg); margin-bottom:.3em; }
.tl-item p { color: var(--txt-soft); font-size: var(--fs-sm); margin:0; }

/* Lange Komposita mobil trennen statt überlaufen */
@media (max-width: 760px) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* ============================================================
   HELLE INSELN IN DUNKLEN SEKTIONEN
   .dark p / .dark h2 / .dark h3 vererben Weiß. Helle Karten
   innerhalb dunkler Sektionen müssen ihre Textfarbe zurückholen,
   sonst steht weiße Schrift auf weißem Grund.
   ============================================================ */
.dark .contract, .dark .contract p, .dark .contract li, .dark .contract span,
.dark .scr-funnel, .dark .scr-funnel p, .dark .scr-funnel h4,
.dark .ole-card.on-light, .dark .ole-card.on-light span,
.dark .testi, .dark .testi p, .dark .case, .dark .case p, .dark .fit-col, .dark .fit-col li,
.dark .pain, .dark .pain p, .dark .mini-case, .dark .mini-case span,
.dark .faq-item, .dark .faq-item p, .dark .calc, .dark .calc label { color: var(--txt); }
.dark .contract p, .dark .contract li, .dark .testi p, .dark .case p,
.dark .fit-col li, .dark .pain p, .dark .mini-case span, .dark .faq-item p { color: var(--txt-soft); }
.dark .contract .c-text { color: var(--txt); }
.dark .contract h2, .dark .contract h3, .dark .contract .c-head { color: var(--txt); }
.dark .case-metric, .dark .case-who b, .dark .mini-case b { color: var(--txt); }