/* =========================================================
   Enno Freese Marketing – Website
   Alle Farben und die Schrift stehen hier oben als Variablen.
   Schriften (final): Manrope für Überschriften, Inter für Fließtext,
   wie im ursprünglichen Baukasten-Entwurf. Selbst gehostet in assets/fonts/.
   ========================================================= */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Schriften (zentral) */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* CI-Farben */
  --c-accent: #25c19b;       /* Türkis: Buttons, Linien, Icons, Rahmen, Kennzahlen */
  --c-accent-ink: #0b6b54;   /* dunkleres Türkis für kleinen Text (Kontrast ca. 4,9:1 auf #e0e0e2) */
  --c-bg: #e0e0e2;           /* Seitenhintergrund */
  --c-text: #111111;         /* Schrift */

  /* abgeleitete Töne */
  --c-surface: #ececee;
  --c-card: #f5f5f6;
  --c-muted: #45454a;
  --c-line: #c4c4c9;
  --c-dark: #111111;
  --c-on-dark: #f5f5f6;
  --c-on-dark-muted: #a9a9b0;
  --c-dark-line: rgba(255, 255, 255, .18);

  --radius: 16px;
  --maxw: 1160px;
  --gutter: 20px;
  --sec: 80px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 900px) {
  :root { --gutter: 36px; --sec: 136px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 17px;
  line-height: 1.62;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; font-family: var(--font-head); }
.btn, .logo, .kpi__v, .how__num, .step__n, .footer__big, .ad__visual strong { font-family: var(--font-head); }
[id] { scroll-margin-top: 84px; }
::selection { background: var(--c-accent); color: var(--c-text); }

:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sec) 0; position: relative; }
.section--surface { background: var(--c-surface); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark); padding: 26px 0; }
@media (min-width: 900px) { .section--dark { padding: 24px 0; } } /* KPI-Band kompakt (halbe Größe, 21.10.2026) */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--c-card); padding: 10px 14px; }

/* Platzhalter: bleiben sichtbar, damit nichts versehentlich live geht */
.todo {
  display: inline-block;
  background: #fff3c4; color: #5a4500;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0;
  padding: 2px 7px; border-radius: 4px;
}

/* ---------- Typografie ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-accent-ink); margin: 0 0 22px;
}
.eyebrow__n { color: var(--c-muted); font-weight: 400; letter-spacing: .1em; }
.section--dark .eyebrow { color: var(--c-accent); }
.section--dark .eyebrow__n { color: var(--c-on-dark-muted); }

.h2 { font-size: clamp(32px, 7.4vw, 60px); margin-bottom: 22px; max-width: 18ch; letter-spacing: -0.035em; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--c-muted); max-width: 58ch; }
.section--dark .lead { color: var(--c-on-dark-muted); }

/* Kopfbereich eines Abschnitts: Desktop zweispaltig */
@media (min-width: 900px) {
  .sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 64px; align-items: end; }
  .sec-head .eyebrow { grid-column: 1 / -1; }
  .sec-head .h2 { margin-bottom: 0; }
  .sec-head .lead { margin: 0 0 6px; }
}

/* ---------- Buttons ---------- */
/* Pill mit dunklem Pfeil-Chip rechts. Beim Hover füllt sich der Button
   vom Chip aus dunkel, die Schrift wird hell, der Chip wird türkis.
   Auf Geräten mit Maus folgt der Button leicht dem Cursor (main.js). */
.btn {
  --chip: 42px;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 58px; padding: 8px 8px 8px 28px;
  font: 600 16px/1.25 var(--font-head); letter-spacing: -.01em;
  text-decoration: none; text-align: left;
  color: var(--c-text);
  background: linear-gradient(180deg, #31d0aa 0%, var(--c-accent) 55%, #20b28e 100%);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 0 0 1px rgba(11, 107, 84, .22),
    0 14px 30px -16px rgba(11, 107, 84, .75);
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
}
.btn::before { /* dunkle Füllung, wächst aus dem Chip */
  content: ""; position: absolute; z-index: -1;
  right: 8px; top: 50%; width: var(--chip); height: var(--chip); margin-top: calc(var(--chip) / -2);
  border-radius: 50%; background: var(--c-dark);
  transform: scale(.001); transition: transform .6s var(--ease);
}
.btn__label { position: relative; }
.btn__chip {
  position: relative; flex: none; width: var(--chip); height: var(--chip); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-dark); color: var(--c-accent);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.btn__chip svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover, .btn:focus-visible {
  color: var(--c-on-dark);
  box-shadow: inset 0 0 0 1px rgba(37, 193, 155, .7), 0 22px 40px -18px rgba(11, 107, 84, .85);
}
.btn:hover::before, .btn:focus-visible::before { transform: scale(24); }
.btn:hover .btn__chip, .btn:focus-visible .btn__chip { background: var(--c-accent); color: var(--c-text); transform: scale(1.06); }
.btn:hover .btn__chip svg, .btn:focus-visible .btn__chip svg { transform: rotate(45deg); }
.btn:active { transform: translate(var(--tx, 0), var(--ty, 0)) scale(.98); }
.btn--small { --chip: 32px; min-height: 44px; padding: 6px 6px 6px 18px; gap: 12px; font-size: 14.5px; }
.btn--small .btn__chip svg { width: 15px; height: 15px; }
.btn--block { width: 100%; }

.textlink { color: var(--c-accent-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.textlink svg { transition: transform .3s var(--ease); }
.textlink:hover svg { transform: translateY(3px); }

/* ---------- Header ---------- */
/* Oben auf der Seite: frei im Raum, ohne Hintergrund.
   Beim Scrollen: schwebende Glas-Pille mit weichem Schatten, etwas flacher,
   mit türkisem Lese-Fortschritt an der Unterkante. Die Höhe der Leiste bleibt
   gleich (--header-h), damit beim Scrollen nichts springt. */
.header {
  --header-h: 76px;
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h); display: flex; align-items: center;
  pointer-events: none; /* nur die Pille selbst ist klickbar */
}
.nav {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 64px;
  border-radius: 999px; border: 1px solid transparent;
  transition: height .45s var(--ease), padding .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease), border-color .45s var(--ease), width .45s var(--ease);
}
.header { transition: none; }
.header.is-scrolled { align-items: flex-start; } /* Leiste schließt oben bündig mit dem Browserfenster ab */
.header.is-scrolled .nav {
  border-radius: 0 0 26px 26px; border-top-color: transparent;
  width: calc(100% - 2 * var(--gutter) + 24px); /* leicht eingerückt, hängt von oben herab */
  height: 58px; padding: 0 7px 0 22px;
  background: rgba(245, 245, 246, .6); /* durchscheinend: Inhalt beim Scrollen leicht sichtbar */
  backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border-color: rgba(255, 255, 255, .7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 2px 6px rgba(17, 17, 17, .05),
    0 18px 40px -18px rgba(17, 17, 17, .28);
}
.nav__progress {
  position: absolute; left: 28px; right: 28px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--c-accent); transform-origin: left; transform: scaleX(var(--progress, 0));
  opacity: 0; transition: opacity .3s ease;
}
.header.is-scrolled .nav__progress { opacity: 1; }
.header.is-scrolled .logo-img { --h: 32px; }
@media (min-width: 900px) {
  .header { --header-h: 88px; }
  .nav { height: 70px; }
  .header.is-scrolled .nav { height: 62px; }
  .header.is-scrolled .logo-img { --h: 34px; }
}
@media (max-width: 899px) { .header.is-scrolled .nav { width: calc(100% - 20px); padding: 0 6px 0 18px; } }
[id] { scroll-margin-top: 100px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 18px; text-decoration: none; letter-spacing: -0.015em; }
/* Logo-Datei hat viel transparenten Rand (2000x667, Inhalt 225..1773 x 191..458).
   Der Rahmen schneidet auf den Inhalt zu; --h ist die sichtbare Höhe. */
.logo-img {
  --h: 34px;
  position: relative; display: block; overflow: hidden;
  height: var(--h); aspect-ratio: 1549 / 268;
  transition: transform .4s var(--ease);
}
.logo-img img {
  position: absolute; max-width: none;
  width: calc(var(--h) * 2000 / 268); height: auto;
  left: calc(var(--h) * -225 / 268); top: calc(var(--h) * -191 / 268);
}
.logo:hover .logo-img { transform: translateY(-1px); }
.logo-img--dark img { filter: brightness(0); } /* einfarbig schwarze Variante für den türkisen Footer */
@media (min-width: 900px) { .header .logo-img { --h: 40px; } }
.nav__links { display: none; }
.nav__links a:not(.btn) { position: relative; text-decoration: none; font-size: 15px; color: var(--c-muted); padding: 6px 0; transition: color .2s; }
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__links a:not(.btn):hover, .nav__links a.is-active { color: var(--c-text); }
.nav__links a:not(.btn):hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.menu-btn { background: none; border: 0; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--c-text); }
.menu-btn svg { width: 26px; height: 26px; }
.mobile-menu { /* aufgeklapptes Menü als Glas-Karte unter der Leiste */
  display: none; pointer-events: auto;
  position: absolute; top: calc(var(--header-h) - 4px); left: 10px; right: 10px;
  padding: 10px 20px 20px; border-radius: 24px;
  background: rgba(245, 245, 246, .98);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 24px 50px -20px rgba(17, 17, 17, .35);
}
.mobile-menu.is-open { display: grid; gap: 2px; animation: drop .35s var(--ease); }
.mobile-menu a:not(.btn) { padding: 13px 4px; text-decoration: none; font-size: 18px; border-bottom: 1px solid var(--c-line); }
.mobile-menu .btn { margin-top: 16px; font-size: 14px; padding-left: 18px; gap: 10px; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (min-width: 1180px) { /* darunter Burger-Menü, sonst bricht die Navigation um */
  .nav__links { display: flex; align-items: center; gap: 30px; white-space: nowrap; }
  .menu-btn, .mobile-menu, .mobile-menu.is-open { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 16px 0 72px; isolation: isolate; }
.hero::before { /* feines Punktraster */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(rgba(17, 17, 17, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}
.hero__glow {
  position: absolute; z-index: -1; width: 620px; height: 620px; right: -180px; top: -120px;
  border-radius: 50%; background: radial-gradient(circle, rgba(37, 193, 155, .42), rgba(37, 193, 155, 0) 65%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate;
}
@media (max-width: 600px) { .hero__glow { width: 380px; height: 380px; right: -140px; top: -60px; } }
@media (max-width: 420px) { .btn { --chip: 38px; padding-left: 20px; gap: 12px; font-size: 14.5px; } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 70px) scale(1.12); } }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(30px, 8.6vw, 62px); letter-spacing: -0.045em; line-height: 1.02; margin-bottom: 22px; } /* kleiner, damit der Button sofort sichtbar ist */
@media (min-width: 600px) {
  .hero h1 .hl { white-space: nowrap; } /* "passende Bewerber?" in einer Zeile */
}
.hero .lead { margin-bottom: 34px; }
.hero__cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hero__cta .btn { width: 100%; }
.checks { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.checks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--c-accent); color: var(--c-text); flex: none; }

@media (min-width: 600px) { .hero__cta { flex-direction: row; align-items: center; gap: 24px; } .hero__cta .btn { width: auto; } }
@media (min-width: 900px) {
  .hero { padding: 30px 0 120px; }
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; }
}

/* Überschrift Wort für Wort */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .2em; margin-bottom: -.2em; } /* Platz für Unterlängen (g, p) */
.hero .eyebrow { color: var(--c-accent); }
/* Gelber Blitz = "besonders wichtig" (bewusst außerhalb der CI-Farben, sparsam einsetzen) */
.bolt { display: inline-block; vertical-align: -.12em; margin-left: .2em; width: .95em; height: .95em; }
.bolt svg { width: 100%; height: 100%; fill: #ffc21a; stroke: #b07d00; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(255, 176, 0, .45)); }
.js .service.is-in .bolt { animation: boltZap 3.6s ease-in-out 1.2s infinite; }
@keyframes boltZap {
  0%, 82%, 100% { transform: none; }
  86% { transform: rotate(-12deg) scale(1.18); }
  90% { transform: rotate(8deg) scale(1.08); }
  94% { transform: none; }
}
/* Vorteile unter den 3 Karten in "Wie es funktioniert": dezent, ohne Kästen */
.benefits { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--c-line); }
.benefits__title { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-ink); margin: 0 0 18px; }
.benefits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 48px; }
.benefits__list li { position: relative; padding-left: 32px; color: var(--c-muted); font-size: 16.5px; line-height: 1.55; }
.benefits__list li::before { /* türkiser Haken im Kreis, wie im Hero */
  content: ""; position: absolute; left: 0; top: .12em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (min-width: 800px) { .benefits__list { grid-template-columns: 1fr 1fr; } }
/* Kleine, dezente Vorteile direkt unter den 3 Karten */
.perks { margin-top: 28px; }
.perks__title { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-ink); margin: 0 0 12px; }
.perks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 32px; }
@media (min-width: 900px) { .perks__list { grid-template-columns: repeat(3, 1fr); } }
.perks__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.perks__list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
/* Variante "Warum mit mir?": fette Kernaussage + kurze Begründung */
.benefits__intro { font: 600 clamp(19px, 2.4vw, 24px)/1.3 var(--font-head); letter-spacing: -.02em; color: var(--c-text); max-width: 40ch; margin: 0 0 26px; }
.benefits__list--why { gap: 22px 48px; }
.benefits__list--why li { font-size: 15.5px; }
.benefits__list--why b { display: block; font: 600 17px/1.3 var(--font-head); letter-spacing: -.01em; color: var(--c-text); margin-bottom: 3px; }
/* Breites Bildband mit leichtem Parallax (Bild bewegt sich beim Scrollen etwas langsamer) */
.imgband { padding: 0 0 calc(var(--sec) * .6); }
#so-funktionierts { padding-bottom: calc(var(--sec) * .6); } /* Bildband rückt näher an Abschnitt 01 */
.imgband__frame {
  position: relative; margin: 0; overflow: hidden; border-radius: calc(var(--radius) + 8px);
  aspect-ratio: 4 / 3;
  box-shadow: 0 2px 6px rgba(17, 17, 17, .06), 0 30px 60px -24px rgba(17, 17, 17, .35);
}
.imgband__frame img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none;
  object-fit: cover; object-position: 28% 50%; /* Hand mit Smartphone bleibt im Bild */
  transform: translateY(var(--py, 0px)); will-change: transform;
}
@media (min-width: 700px) { .imgband__frame { aspect-ratio: 21 / 9; } .imgband__frame img { object-position: 50% 50%; } }
/* Problem-Abschnitt "Kennen Sie das?": Schmerz verstärken, ruhig und ernst */
.pain { padding-bottom: calc(var(--sec) * .55); }
.pain__grid { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 760px) { .pain__grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
.pain__item {
  position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start;
  background: var(--c-card); border-radius: var(--radius); padding: 24px 24px 24px 22px;
  border-left: 3px solid var(--c-dark);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pain__item:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(0, 0, 0, .45); }
.pain__ic { grid-row: span 2; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c-dark); color: var(--c-on-dark); }
.pain__ic svg { width: 22px; height: 22px; }
.pain__item h3 { font-size: 19px; margin: 2px 0 6px; letter-spacing: -.02em; }
.pain__item p { margin: 0; color: var(--c-muted); font-size: 15.5px; line-height: 1.55; }
.pain__turn { margin: 44px 0 0; text-align: center; font: 600 clamp(24px, 4vw, 34px)/1.2 var(--font-head); letter-spacing: -.03em; }
#so-funktionierts { padding-top: calc(var(--sec) * .55); }
#leistungen .sec-head { align-items: center; }
/* Sehr dezente Hervorhebung im Fließtext: CI-Türkis, normale Schriftstärke (Ennos Wunsch) */
.accent-text { color: var(--c-accent); } /* Überschrift mittig zum Text rechts */

/* Textmarker in CI-Türkis, zieht sich beim Einblenden von links nach rechts */
.nowrap { white-space: nowrap; }
.marker { position: relative; z-index: 0; padding: 0 .06em; }
.marker::before { /* Textmarker-Strich: unregelmäßige Kanten, schräge Enden, ungleichmäßige Tinte */
  content: ""; position: absolute; z-index: -1;
  left: -.14em; right: -.18em; top: .2em; bottom: .02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M7 13C60 7 140 12 220 8S358 6 394 10L399 19L391 31L397 45C330 51 250 46 170 51S42 54 3 49L10 37L1 25Z' fill='%2325c19b' fill-opacity='.82'/%3E%3Cpath d='M12 19C120 15 262 19 391 14L393 22C262 27 120 23 9 27Z' fill='%2325c19b' fill-opacity='.35'/%3E%3Cpath d='M8 39C140 36 262 41 395 37L394 42C262 46 140 42 7 45Z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: rotate(-1.2deg);
  mix-blend-mode: multiply;
}
.js .marker::before { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) .45s; }
.js .is-in .marker::before { clip-path: inset(0 0 0 0); }
.hero__claim { font-family: var(--font-head); font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--c-text); margin: 0 0 10px; max-width: 34ch; }
.w > span { display: inline-block; }
.js .w > span { transform: translateY(105%); animation: wordUp .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 70ms + 100ms); }
@keyframes wordUp { to { transform: none; } }
/* "passende Bewerber?": geschwungener, handgezogener Pinselstrich in CI-Türkis,
   der sich nach der Überschrift von links nach rechts zeichnet */
.hl { position: relative; display: inline-block; white-space: nowrap; }
/* Pinselstrich als gefüllte Form: dünn ansetzen, in der Mitte kräftig, am Ende auslaufen */
.hl__stroke { position: absolute; left: 1%; width: 96%; bottom: -.24em; height: .38em; overflow: visible; pointer-events: none; transform: rotate(-.6deg); }
.js .hl__stroke { clip-path: inset(0 100% 0 0); animation: strokeReveal .85s cubic-bezier(.55, .05, .3, 1) 1.05s forwards; }
@keyframes strokeReveal { to { clip-path: inset(0 0 0 0); } }
.js .fade-in { opacity: 0; transform: translateY(14px); animation: fadeUp .9s var(--ease) forwards; animation-delay: var(--delay, .6s); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---------- Smartphone-Mockup (reines HTML/CSS, Hochglanz) ----------
   Rahmen in Titan-Optik, Dynamic Island, seitliche Tasten, Glasreflexion.
   Inhalt: Instagram-artige Beispiel-Anzeige mit dem Lagerbild. */
.phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; perspective: 1400px; }
.phone-wrap::before { /* weicher türkiser Lichtschein hinter dem Gerät */
  content: ""; position: absolute; z-index: -1; width: min(330px, 78%); aspect-ratio: 1; top: 10%;
  border-radius: 50%; background: radial-gradient(circle, rgba(37, 193, 155, .38), rgba(37, 193, 155, 0) 68%);
  filter: blur(8px);
}
.phone-stage { position: relative; transform-style: preserve-3d; animation: float 8s ease-in-out infinite; zoom: .63; } /* Größe des Handys (Inhalt skaliert mit) */
@keyframes float {
  0%, 100% { transform: rotateY(-9deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(-5deg) rotateX(1deg) translateY(-10px); }
}
.phone-stage::after { /* Bodenschatten */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -34px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(17, 17, 17, .35), rgba(17, 17, 17, 0) 70%); filter: blur(6px);
}
.phone {
  position: relative; width: min(290px, 74vw); aspect-ratio: 9 / 19.2;
  padding: 9px; border-radius: 52px;
  background: linear-gradient(145deg, #e9eaec 0%, #9a9da3 18%, #3b3d42 45%, #1b1c1f 60%, #6b6e74 85%, #d4d6da 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .35),
    inset 0 0 0 3px #0c0d0f,
    0 2px 4px rgba(0, 0, 0, .2),
    0 40px 70px -30px rgba(0, 0, 0, .55),
    0 70px 120px -60px rgba(11, 107, 84, .45);
}
.phone__btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5d6066, #b8bbc0); }
.phone__btn--action { left: -3px; top: 17%; height: 4%; }
.phone__btn--vol1 { left: -3px; top: 24%; height: 8%; }
.phone__btn--vol2 { left: -3px; top: 34%; height: 8%; }
.phone__btn--power { right: -3px; top: 27%; height: 12%; }
.phone__screen {
  position: relative; height: 100%; border-radius: 44px; overflow: hidden;
  background: #fff; color: #111;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.phone__glare { /* diagonale Glasreflexion über dem Display */
  position: absolute; inset: 9px; border-radius: 44px; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 28%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08) 100%);
}
.phone__status { position: relative; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font: 600 12.5px/1 var(--font-head); }
.phone__island { position: absolute; left: 50%; top: 11px; width: 88px; height: 25px; margin-left: -44px; border-radius: 20px; background: #000; }
.phone__icons { display: flex; gap: 4px; align-items: center; }
.phone__icons svg { width: 15px; height: 11px; }

.post__head { display: flex; align-items: center; gap: 9px; padding: 6px 12px 9px; }
.post__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 700 10px/1 var(--font-head); color: #fff; background: var(--c-dark);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c-accent);
}
.post__who { line-height: 1.15; }
.post__who b { display: block; font-size: 12.5px; font-weight: 600; }
.post__who small { font-size: 10.5px; color: #737373; }
.post__more { margin-left: auto; font-size: 16px; letter-spacing: 1px; color: #262626; }
.post__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; }
.post__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; } /* Gesicht des Fahrers im oberen Bereich */
.post__overlay {
  position: absolute; inset: auto 0 0 0; padding: 70px 14px 14px; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .82));
}
.post__overlay small { display: block; font: 700 10px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; }
.post__overlay strong { font: 600 19px/1.12 var(--font-head); letter-spacing: -.02em; }
.post__cta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--c-accent); color: #111; font: 600 12.5px/1 var(--font-head);
}
.post__cta svg { width: 14px; height: 14px; }
.post__actions { display: flex; gap: 13px; padding: 10px 12px 4px; color: #262626; }
.post__actions svg { width: 20px; height: 20px; }
.post__actions svg:last-child { margin-left: auto; }
.post__text { margin: 0; padding: 2px 12px; font-size: 11.5px; line-height: 1.4; color: #262626; }
.post__text b { font-weight: 600; }
.post__next { display: flex; align-items: center; gap: 9px; padding: 14px 12px 0; } /* angedeuteter nächster Beitrag im Feed */
.post__next span { width: 30px; height: 30px; border-radius: 50%; background: #e7e7e9; flex: none; }
.post__next i { height: 9px; width: 42%; border-radius: 5px; background: #ececee; }

/* ---------- Funnel-Simulation im Display ----------
   5 Bildschirme liegen übereinander; main.js schaltet .is-active weiter
   (Anzeige → Landing Page → Quiz → Kontaktdaten → Danke). */
.flow { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; }
.scr {
  position: absolute; inset: 0; overflow: hidden; background: #fff;
  opacity: 0; transform: translateX(30%); pointer-events: none;
  transition: transform .55s var(--ease), opacity .45s ease;
}
.scr.is-active { opacity: 1; transform: none; }
.scr.is-leaving { opacity: 0; transform: translateX(-30%); }
.scr.is-reset { transition: none; }

/* Klick-Effekt: Finger-Punkt + Welle + leichtes Eindrücken */
.tap { position: relative; overflow: hidden; transition: transform .18s ease, background .25s ease, border-color .25s ease; }
.tap::before { /* Fingerkuppe */
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(17, 17, 17, .28); box-shadow: 0 0 0 4px rgba(17, 17, 17, .08);
  opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease;
}
.tap::after { /* Welle */
  content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: rgba(255, 255, 255, .6); opacity: 0; transform: scale(0);
}
.tap.is-tapping { transform: scale(.96); }
.tap.is-tapping::before { opacity: 1; transform: scale(1); }
.tap.is-tapping::after { animation: ripple .7s ease-out forwards; }
@keyframes ripple { 0% { opacity: .9; transform: scale(0); } 100% { opacity: 0; transform: scale(7); } }

/* Landing Page */
.lp__img { height: 36%; overflow: hidden; }
.lp__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.lp__body { padding: 14px 14px 0; }
.lp__brand { display: block; font: 700 9.5px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-ink); margin-bottom: 6px; }
.lp__title { display: block; font: 600 17px/1.15 var(--font-head); letter-spacing: -.02em; margin-bottom: 10px; }
.lp__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 11.5px; color: #333; }
.lp__list li { position: relative; padding-left: 18px; }
.lp__list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat;
}
.fbtn {
  display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px;
  background: var(--c-accent); color: #111; font: 600 13px/1 var(--font-head);
  box-shadow: 0 8px 18px -10px rgba(11, 107, 84, .8);
}

/* Quiz und Formular */
.scr--quiz, .scr--form { padding: 16px 14px 0; }
.fprog { height: 4px; border-radius: 4px; background: #ececee; overflow: hidden; margin-bottom: 14px; }
.fprog i { display: block; height: 100%; border-radius: 4px; background: var(--c-accent); }
.fstep { display: block; font-size: 10px; color: #8a8a90; margin-bottom: 6px; }
.fq { display: block; font: 600 16.5px/1.2 var(--font-head); letter-spacing: -.02em; margin-bottom: 14px; }
.opts { display: grid; gap: 8px; }
.opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-radius: 12px; border: 1.5px solid #e3e3e6; font-size: 12px; font-weight: 500; color: #222;
}
.opt.is-selected { border-color: var(--c-accent); background: rgba(37, 193, 155, .12); }
.opt.is-selected::after { /* Haken bei der gewählten Antwort (überschreibt hier die Welle) */
  content: ""; position: static; width: 16px; height: 16px; margin: 0; border-radius: 50%; opacity: 1; transform: none; animation: none;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.ffield { display: block; padding: 7px 11px 8px; border-radius: 10px; border: 1.5px solid #e3e3e6; margin-bottom: 8px; transition: border-color .2s; }
.ffield small { display: block; font-size: 9.5px; color: #8a8a90; margin-bottom: 2px; }
.ffield span { display: block; min-height: 16px; font-size: 12.5px; color: #111; }
.ffield.is-typing { border-color: var(--c-accent); }
.ffield.is-typing span::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #111; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.scr--form .fbtn { margin-top: 12px; }

/* Danke-Seite */
.scr--thanks { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22px 40px; }
.thx__ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: #111; margin-bottom: 18px; box-shadow: 0 0 0 10px rgba(37, 193, 155, .15); }
.thx__ic svg { width: 30px; height: 30px; }
.scr--thanks.is-active .thx__ic { animation: pop .6s var(--ease) .15s both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
.thx__title { font: 600 18px/1.2 var(--font-head); letter-spacing: -.02em; margin-bottom: 8px; }
.thx__text { font-size: 12px; color: #6b6b72; margin: 0; }

/* Benachrichtigungen am Telefon: Glas-Karten */
.toast {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 16px; padding: 9px 14px 9px 9px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 44px -18px rgba(0, 0, 0, .45);
  font-size: 12px; line-height: 1.3; white-space: nowrap; opacity: 0;
  transform: translateZ(40px);
}
.toast b { display: block; font: 600 12.5px/1.3 var(--font-head); }
.toast span { color: var(--c-muted); }
.toast__ic { width: 32px; height: 32px; border-radius: 10px; background: var(--c-accent); display: grid; place-items: center; flex: none; color: #111; }
.toast__ic svg { width: 16px; height: 16px; }
.toast--1 { left: -44px; top: 30%; animation: toastIn 9s var(--ease) 1.6s infinite; }
.toast--2 { right: -40px; top: 80%; animation: toastIn 9s var(--ease) 3.4s infinite; }
@keyframes toastIn {
  0% { opacity: 0; transform: translateZ(40px) translateY(14px) scale(.96); }
  8%, 70% { opacity: 1; transform: translateZ(40px); }
  80%, 100% { opacity: 0; transform: translateZ(40px) translateY(-8px) scale(.98); }
}
@media (max-width: 420px) { .toast--1 { left: -8px; } .toast--2 { right: -8px; } }
.example-note { text-align: center; font-size: 13px; color: var(--c-muted); margin-top: 36px; }


/* ---------- Wie es funktioniert ---------- */
.how { display: grid; gap: 16px; margin-top: 48px; }
.how__item {
  position: relative; overflow: hidden; background: var(--c-card); border-radius: var(--radius); padding: 30px 26px 28px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.how__item::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s;
}
.how__item.is-in::before, html:not(.js) .how__item::before { transform: scaleX(1); }
.how__item:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(0, 0, 0, .4); }
.how__num { font-size: 56px; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--c-accent); display: block; }
.how__item h3 { font-size: 21px; margin: 20px 0 10px; letter-spacing: -.02em; }
.how__item p { margin: 0; color: var(--c-muted); }
@media (min-width: 800px) { .how { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* ---------- Kennzahlen-Leiste ---------- */
.kpis { display: grid; gap: 20px; }
@media (min-width: 800px) { .kpis { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.kpi { position: relative; padding-top: 13px; display: flex; flex-direction: column; } /* Quellen stehen unten auf einer Linie */
.kpi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-dark-line);
}
.kpi::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .3s;
}
.kpi.is-in::after, html:not(.js) .kpi::after { transform: scaleX(1); }
.kpi__v { font-size: clamp(30px, 3.4vw, 40px); font-weight: 300; line-height: 1; letter-spacing: -.04em; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.kpi__v em { font-style: normal; color: var(--c-accent); }
.kpi__l { color: var(--c-on-dark-muted); margin: 0 0 8px; max-width: 36ch; font-size: 13px; line-height: 1.5; }
.kpi .kpi__src { align-self: flex-start; margin-top: auto; }
.kpi__src { display: inline-block; font-size: 10.5px; color: var(--c-on-dark-muted); opacity: .7; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2); transition: opacity .2s; }
.kpi__src:hover { opacity: 1; }
.kpi-note { margin-top: 48px; font-size: 13px; color: var(--c-on-dark-muted); }

/* ---------- Leistungen ---------- */
.services { margin-top: 48px; border-top: 1px solid var(--c-line); counter-reset: svc; }
.service {
  position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 28px 0;
  border-bottom: 1px solid var(--c-line); counter-increment: svc;
}
.service::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.service:hover::after { transform: scaleX(1); }
.service::before { /* kurzes türkises Linienstück links an jeder Trennlinie, zeichnet sich beim Einblenden */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 64px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .3s;
}
.service.is-in::before, html:not(.js) .service::before { transform: scaleX(1); }
.service__ic {
  width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--c-accent);
  background: linear-gradient(140deg, rgba(37, 193, 155, .30), rgba(37, 193, 155, .08));
  display: grid; place-items: center; color: var(--c-accent-ink);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.service:hover .service__ic { background: var(--c-accent); color: var(--c-text); transform: rotate(-6deg); }
.service__ic svg { width: 24px; height: 24px; }
.service h3 { font-size: 20px; margin: 3px 0 8px; letter-spacing: -.02em; transition: transform .35s var(--ease); }
.service:hover h3 { transform: translateX(4px); }
.service h3::before { content: counter(svc, decimal-leading-zero); display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--c-accent-ink); margin-bottom: 6px; }
.service p { margin: 0; color: var(--c-muted); font-size: 16px; }
@media (min-width: 800px) {
  .services { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .service:nth-child(-n+2) { border-top: 1px solid var(--c-line); }
}

/* ---------- Ablauf ---------- */
.steps-wrap { position: relative; margin-top: 52px; max-width: 780px; }
.steps-line { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--c-line); }
.steps-line span { position: absolute; inset: 0; background: var(--c-accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
.steps { list-style: none; padding: 0; margin: 0; }
.step { position: relative; padding: 0 0 44px 76px; }
.step:last-child { padding-bottom: 0; }
.step__n {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-surface); border: 2px solid var(--c-line); color: var(--c-muted);
  display: grid; place-items: center; font-weight: 600; font-size: 18px;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.step.is-active .step__n { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text); transform: scale(1.06); }
.step h3 { font-size: clamp(21px, 3vw, 26px); margin: 9px 0 10px; letter-spacing: -.02em; }
.step p { margin: 0; color: var(--c-muted); }

/* ---------- Über mich ---------- */
.about { display: grid; gap: 40px; align-items: center; }
.about__photo {
  position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 380px;
  border-radius: var(--radius); background: var(--c-card);
}
.about__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  border-radius: var(--radius);
  transition: transform .8s var(--ease);
}
.about__photo-wrap:hover .about__photo img { transform: scale(1.02); transform-origin: 50% 100%; }
/* Handschriftlicher Name mit Pfeil über dem Foto.
   Schrift: Handschrift-Systemschriften, die schon auf dem Gerät sind (kein Download, keine Lizenz):
   Windows "Segoe Print", Apple "Bradley Hand"/"Noteworthy", Android über "cursive". */
.about__name {
  position: absolute; z-index: 2; top: -62px; right: 6%;
  display: flex; align-items: flex-start; gap: 6px;
  font-family: "Segoe Print", "Bradley Hand", "Noteworthy", cursive;
  font-size: 21px; line-height: 1.2; color: var(--c-text);
  transform: rotate(-3deg);
}
.about__arrow { width: 50px; height: 42px; margin-top: 14px; flex: none; }
.js .about__arrow-line { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .9s var(--ease) .5s; }
.js .about__arrow-head { opacity: 0; transition: opacity .3s ease 1.3s; }
.js .is-in .about__arrow-line { stroke-dashoffset: 0; }
.js .is-in .about__arrow-head { opacity: 1; }
.about { padding-top: 24px; } /* Platz für den Namen über dem Foto */
.about__text { color: var(--c-muted); max-width: 58ch; font-size: 18px; line-height: 1.65; }
.about__photo { /* edler, weicher Schatten in mehreren Ebenen statt Rahmen */
  box-shadow:
    0 1px 2px rgba(17, 17, 17, .06),
    0 8px 16px -6px rgba(17, 17, 17, .12),
    0 30px 60px -18px rgba(17, 17, 17, .30);
}
.about__photo-wrap { position: relative; isolation: isolate; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.facts li { padding: 14px 0 14px 30px; position: relative; border-bottom: 1px solid var(--c-line); }
.facts li::before { content: ""; position: absolute; left: 4px; top: 1.35em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }
@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; }
  .about .h2 { font-size: clamp(32px, 4.6vw, 56px); } /* "Ansprechpartner:" passt sonst nicht in die Spalte */
}
@media (min-width: 1200px) { .about { gap: 88px; } }

/* ---------- Abschluss-CTA ---------- */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-dark); color: var(--c-on-dark); border-radius: calc(var(--radius) + 8px);
  padding: 60px 24px; text-align: center;
}
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(37, 193, 155, .32), transparent 60%);
  transition: background .2s;
}
.final::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%);
}
.final h2 { font-size: clamp(32px, 7vw, 60px); margin: 0 auto 20px; max-width: 18ch; letter-spacing: -.04em; }
.final p { color: var(--c-on-dark-muted); max-width: 52ch; margin: 0 auto 34px; font-size: 18px; }
@media (min-width: 900px) { .final { padding: 104px 48px; } }

/* E-Mail-Zeile unter dem Abschluss-Button */
.final .final__mail { margin: 26px auto 0; font-size: 13px; line-height: 1.6; opacity: .75; } /* bewusst klein: Fokus liegt auf dem Button */
.final__mail a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid rgba(37, 193, 155, .4); transition: border-color .2s; }
.final__mail a:hover { border-bottom-color: var(--c-accent); }

/* ---------- Footer ---------- */
.footer { background: var(--c-accent); color: rgba(17, 17, 17, .78); padding: 64px 0 44px; font-size: 15px; }
.footer__big { font-size: clamp(30px, 6vw, 56px); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; color: var(--c-on-dark); margin: 0 0 48px; max-width: 20ch; }
.footer__big em { font-style: normal; color: var(--c-accent); }
.footer__grid { display: grid; gap: 30px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer .logo { color: var(--c-text); }
.footer h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text); margin-bottom: 12px; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer a { text-decoration: none; display: inline-block; padding: 6px 0; transition: color .2s; }
.footer a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; }
.footer a:has(.footer__ic) { display: inline-flex; align-items: center; gap: 10px; }
.footer__ic { width: 18px; height: 18px; flex: none; color: var(--c-text); transition: transform .3s var(--ease); }
.footer a:hover .footer__ic { transform: translateY(-2px); }
.footer__copy { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(17, 17, 17, .18); font-size: 13px; }

/* ---------- Mobiler Sticky-Button ---------- */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  transform: translateY(160%); transition: transform .4s var(--ease);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .4);
}
.sticky-cta.is-visible { transform: none; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Cookie-Banner (assets/js/consent.js) ---------- */
.cc {
  position: fixed; z-index: 200; left: 12px; right: 12px; bottom: 12px;
  max-width: 980px; margin: 0 auto; padding: 22px 22px 18px;
  display: grid; gap: 14px; grid-template-columns: 1fr;
  background: rgba(245, 245, 246, .96);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 70px -25px rgba(17, 17, 17, .45);
  opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.cc [hidden] { display: none !important; } /* versteckte Teile (Einstellungen, Buttons) wirklich ausblenden */
.cc.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.cc__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; color: var(--c-muted); cursor: pointer; display: grid; place-items: center; }
.cc__close:hover { background: rgba(17, 17, 17, .06); color: var(--c-text); }
.cc__close svg { width: 18px; height: 18px; }
.cc__title { font: 600 18px/1.25 var(--font-head); letter-spacing: -.02em; margin: 0 36px 6px 0; }
.cc__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.cc__text a { color: var(--c-accent-ink); }
.cc__panel { display: grid; gap: 0; border-top: 1px solid var(--c-line); max-height: 46vh; overflow: auto; }
.cc__row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.cc__row-text b { display: block; font: 600 14.5px/1.3 var(--font-head); margin-bottom: 2px; }
.cc__row-text b small { font: 500 11px/1 var(--font-brand); color: var(--c-accent-ink); margin-left: 6px; letter-spacing: .02em; }
.cc__row-text span { font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
/* Schalter in CI-Türkis */
.cc__switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #c4c4c9; position: relative; cursor: pointer; transition: background .25s ease; margin: 0; }
.cc__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.cc__switch:checked { background: var(--c-accent); }
.cc__switch:checked::after { transform: translateX(18px); }
.cc__switch:disabled { opacity: .55; cursor: default; }
.cc__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.cc__link { margin-right: auto; border: 0; background: none; padding: 10px 4px; font: 600 14px/1 var(--font-head); color: var(--c-accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Beide Wahl-Buttons gleich groß und gleich gut sichtbar */
.cc__btn { min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 14.5px/1 var(--font-head); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.cc__btn:active { transform: scale(.97); }
.cc__btn--primary { border: 0; background: var(--c-accent); color: var(--c-text); box-shadow: 0 10px 22px -12px rgba(11, 107, 84, .8); }
.cc__btn--primary:hover { background: #2fd0aa; }
.cc__btn--ghost { border: 1.5px solid var(--c-text); background: transparent; color: var(--c-text); }
.cc__btn--ghost:hover { background: rgba(17, 17, 17, .06); }
@media (max-width: 600px) {
  .cc { left: 8px; right: 8px; bottom: 8px; padding: 18px 16px 14px; border-radius: 18px; }
  .cc__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cc__link { grid-column: 1 / -1; margin: 0; justify-self: start; padding: 4px; }
  .cc__btn { width: 100%; padding: 0 10px; }
}
@media (min-width: 900px) {
  .cc:not(.cc--settings) { grid-template-columns: 1fr auto; align-items: center; column-gap: 28px; padding: 22px 26px; }
  .cc:not(.cc--settings) .cc__actions { flex-wrap: nowrap; }
}
html.cc-open .sticky-cta { transform: translateY(160%) !important; } /* mobiler Termin-Button weicht dem Banner */
.footer .cc-link-btn { background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; cursor: pointer; }
.footer .cc-link-btn:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Rechtliche Seiten ---------- */
.legal { padding: 56px var(--gutter) var(--sec); max-width: 760px; box-sizing: content-box; } /* Seitenabstand wie im Rest der Seite */
.legal h1 { font-size: clamp(36px, 8vw, 56px); margin-bottom: 24px; letter-spacing: -.04em; }
.legal h2 { font-size: 22px; margin: 36px 0 10px; }
.legal .back { margin-bottom: 20px; }
.legal h3 { font-size: 18px; margin: 26px 0 8px; letter-spacing: -.01em; }
.legal h4 { font-size: 15.5px; margin: 18px 0 6px; font-family: var(--font-head); font-weight: 600; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; color: #2a2a2e; overflow-wrap: anywhere; }
.legal ul { padding-left: 20px; margin: 0 0 1em; display: grid; gap: 8px; }
.legal a { color: var(--c-accent-ink); }
.footer--simple { padding: 36px 0; }
.footer--simple ul { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .fade-in, .js .w > span { opacity: 1; transform: none; }
  .js .hl__stroke { clip-path: none; }
  .toast { opacity: 1; }
  .toast--2 { display: none; }
  .how__item::before, .kpi::after { transform: scaleX(1); }
  .steps-line span { transform: scaleY(1); }
}