/* ============================================================
   HANDSCHLAG — 2-in-1 Plattform (Aufträge x Fachkräfte)
   Design system
   ============================================================ */

:root {
  /* Base — koller-lode.de Navy, kühles Grau/Weiss, kein Creme */
  --ink:        #0a0e20;
  --ink-2:      #0a0e20;
  --ink-3:      #0a0e20;
  --canvas:     #ffffff;
  --paper:      #f5f6f8;   /* kühles Grau, kein Beige */
  --paper-2:    #eaecf0;
  --line:       #e3e5eb;
  --muted:      #5b6273;
  --muted-2:    #9298a6;

  /* Aufträge (Neukunden) — Rot (koller-lode.de Signal) */
  --a:          #c12a2a;
  --a-ink:      #9c2020;
  --a-tint:     #f6e7e7;
  --a-tint-2:   #eacccc;

  /* Fachkräfte (Recruiting) — Navy-Blau */
  --b:          #0a0e20;
  --b-ink:      #0a0e20;
  --b-tint:     #edeff3;
  --b-tint-2:   #dcdfe7;

  --ok:         #c12a2a;

  /* Probleme / Pain — dasselbe Rot wie Signal */
  --red:        #c12a2a;
  --red-ink:    #9c2020;
  --red-tint:   #f6e7e7;
  --red-tint-2: #eacccc;
  --red-wash:   #faf4f4;

  /* ultra-subtle washes for large surfaces */
  --a-wash:     #faf4f4;
  --b-wash:     #f6f7f9;

  --r-sm: 3px;
  --r:    3px;
  --r-lg: 3px;
  --r-xl: 3px;

  --shadow-sm: 0 1px 2px rgba(7,11,43,.04);
  --shadow:    0 6px 20px rgba(7,11,43,.06);
  --shadow-lg: 0 16px 44px rgba(7,11,43,.09);

  --wrap: 1200px;

  --f-display: "Inter", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(18px, 3vw, 38px); }

h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 700; margin: 0; line-height: 1.02; letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; color: var(--muted);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a); }
.eyebrow.b .dot { background: var(--b); }
.eyebrow.red { color: var(--red-ink); }
.eyebrow.red .dot { background: var(--red); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-a { background: var(--a); color: #fff; }
.btn-a:hover { background: var(--a-ink); }
.btn-b { background: var(--b); color: #fff; }
.btn-b:hover { background: var(--b-ink); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.20); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #eef0f4; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-lg { padding: 15px 26px; font-size: 15.5px; }
.arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.03em; }
.brand .mark { width: 30px; height: 30px; border-radius: var(--r); background: var(--ink); display: grid; place-items: center; color: #fff; }
.brand .mark svg { width: 18px; height: 18px; }
.brand-logo { height: 26px; width: auto; display: block; }
.footer .brand-logo { height: 24px; }
@media (max-width: 560px) { .brand-logo { height: 22px; } }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a { padding: 9px 14px; border-radius: var(--r); font-weight: 600; font-size: 15px; color: var(--muted); transition: background .15s, color .15s; }
.nav-links a:hover { color: var(--ink); background: var(--paper); }
.nav-links a.active { color: var(--ink); font-weight: 700; background: var(--paper); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

/* ---------- Hero (platform) ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: 76px 0 96px;
  background:
    linear-gradient(102deg, #0a0e20 0%, rgba(10,14,32,.95) 42%, rgba(10,14,32,.80) 72%, rgba(10,14,32,.62) 100%),
    #0a0e20 url('img/hero-handwerk-2.jpg') center right / cover no-repeat;
}
/* Index: zentrierter such-gefuehrter Hero */
.hero.hero-search { position: relative; padding: 96px 0; overflow: hidden;
  background:
    radial-gradient(1100px 720px at 80% 34%, rgba(193,42,42,.16), transparent 58%),
    radial-gradient(900px 600px at 6% 6%, rgba(193,42,42,.10), transparent 60%),
    linear-gradient(180deg, #0c1024 0%, #090c1c 100%); }
.hero-bleed { position: absolute; top: 0; right: 0; height: 100%; width: 56%; object-fit: cover; object-position: 50% 20%; transform: scale(1.42); transform-origin: center 20%; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 26%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 26%, #000 52%); }
.hero.hero-search .wrap { position: relative; z-index: 2; }
.hero-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: stretch; }
.hero.hero-search .hero-copy { max-width: none; }
.hero.hero-search .hero-copy .hero-google { white-space: normal; flex-wrap: wrap; }
/* Case-Study-Video-Card im Hero */
.hero .hero-vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; border-radius: var(--r); overflow: hidden; background: #0a0e20; box-shadow: 0 34px 70px -34px rgba(0,0,0,.7); }
.hv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-shade { position: absolute; inset: 0; background: rgba(10,14,32,.16); transition: background .2s ease; }
.hero-vid:hover .hv-shade { background: rgba(10,14,32,.28); }
.hv-badge { position: absolute; top: 13px; left: 13px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: rgba(10,14,32,.55); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em; padding: 6px 11px; border-radius: var(--r); }
.hv-live { width: 7px; height: 7px; border-radius: 50%; background: #e0524f; box-shadow: 0 0 0 0 rgba(224,82,79,.6); animation: hvpulse 1.8s infinite; }
@keyframes hvpulse { 0%{box-shadow:0 0 0 0 rgba(224,82,79,.55)} 70%{box-shadow:0 0 0 7px rgba(224,82,79,0)} 100%{box-shadow:0 0 0 0 rgba(224,82,79,0)} }
.hv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 66px; height: 66px; border-radius: 50%; background: var(--a); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(0,0,0,.55); transition: background .2s ease; }
.hv-play svg { width: 26px; height: 26px; color: #fff; margin-left: 3px; }
.hero-vid:hover .hv-play { background: var(--a-ink); }
.hv-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 17px 18px 15px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.hv-co { color: #fff; font-weight: 700; font-size: clamp(16px,1.5vw,19px); letter-spacing: -.01em; }
.hv-kpi { display: inline-flex; align-items: center; gap: 8px; color: #8ff0b0; font-weight: 600; font-size: 13.5px; }
.hv-kpi svg { width: 16px; height: 16px; color: #22c55e; flex: 0 0 auto; }
@media (max-width: 900px) { .hero-grid2 { grid-template-columns: 1fr; gap: 32px; } }
.hero-copy .hero-tag { margin-bottom: 20px; }
.hero.hero-search .lede { color: #eceef3; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; margin: 20px 0 30px; max-width: 44ch; }
.hero-copy .hero-cta { justify-content: flex-start; }
.hero-copy .hero-google { justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; margin-top: 26px; }
@media (max-width: 900px) {
  .hero-bleed { width: 100%; object-position: center; opacity: .3;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); }
  .hero-copy { max-width: none; }
  .hero-copy .hero-google { flex-wrap: wrap; white-space: normal; }
}
/* Unterseiten: zweispaltiger Hero */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero-badges { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.hero-badge { display: flex; align-items: center; gap: 9px; color: #aeb3c0; font-size: 14px; font-weight: 600; }
.hero-badge svg { width: 18px; height: 18px; color: var(--ok); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(720px 460px at 8% 0%, rgba(202,40,40,.14), transparent 62%),
    radial-gradient(720px 480px at 96% 12%, rgba(193,42,42,.14), transparent 64%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-center { max-width: 820px; margin: 0 auto; text-align: center; }
.hero-center .hero-cta { justify-content: center; }
.hero-center .lede { margin-left: auto; margin-right: auto; max-width: 600px; }
.hero-center .checker { margin: 30px auto 0; text-align: left; }
.hero-links { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; }
.hero-links a { color: #fff; font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.hero-links a .arrow { color: #e0524f; transition: transform .2s ease; }
.hero-links a:hover .arrow { transform: translateX(3px); }
.hl-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }
.hero-google { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.hg-g { width: 19px; height: 19px; flex: 0 0 auto; }
.hg-stars { color: #f5b301; font-size: 15px; letter-spacing: 1.5px; }
.hg-txt { color: #c7ccd6; font-size: 13.5px; }
.hg-txt strong { color: #fff; font-weight: 700; }
.hg-sep { width: 1px; height: 14px; background: rgba(255,255,255,.22); }
/* Hero: kompakte CTAs, Pool unter Buttons (links), Google unter Video (rechts) */
.hero-grid2 .hero-cta { flex-wrap: wrap; gap: 12px; }
.hero-grid2 .hero-cta .btn { padding: 16px 24px; }
.hero-pool { color: #c7ccd6; font-size: 14.5px; margin-top: 20px; }
.hero-pool strong { color: #fff; font-weight: 700; }
.hero-grid2 .hero-media { display: flex; flex-direction: column; justify-content: center; gap: 15px; aspect-ratio: auto; overflow: visible; box-shadow: none; border-radius: 0; }
.hg-rating { display: inline-flex; align-items: center; gap: 9px; }
.hero-grating { align-self: flex-start; }
@media (max-width: 620px) { .hero-grid2 .hero-cta .btn { flex: 1 1 100%; } }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(224,82,79,.14); border: 1px solid rgba(224,82,79,.34); color: #f0a6a3; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: var(--r); margin-bottom: 22px; }
.hero-tag svg { width: 15px; height: 15px; }
.hero h1 { font-size: clamp(33px, 3.9vw, 50px); letter-spacing: -.035em; font-weight: 700; white-space: nowrap; }
.hero h1 .g-a,
.hero h1 .g-b { color: var(--a); }
.hero .lede { color: #c7cad4; font-size: clamp(17px, 1.5vw, 20px); margin: 22px 0 30px; max-width: 44ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 46px; margin-top: 36px; flex-wrap: wrap; }
.hstat-n { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 36px); letter-spacing: -.02em; color: #fff; line-height: 1; }
.hstat-l { display: block; margin-top: 8px; color: #aeb3c0; font-size: 14px; font-weight: 500; }

/* Split card in hero */
.split {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r); padding: 10px; display: grid; gap: 10px;
}
.split-card {
  border-radius: var(--r); padding: 22px; position: relative; overflow: hidden;
  transition: transform .25s ease, background .2s ease;
  display: block; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.split-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.07); }
.split-a { box-shadow: inset 3px 0 0 var(--a); }
.split-b { box-shadow: inset 3px 0 0 var(--b); }
.split-card .k { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.split-a .k { color: #ef9a9a; }
.split-b .k { color: #dd6a63; }
.split-card h3 { font-size: 22px; margin: 8px 0 6px; color: #fff; }
.split-card p { margin: 0; font-size: 14px; color: #aab0be; max-width: 30ch; }
.split-card .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: #fff; }
.split-card .big { position: absolute; right: 16px; bottom: 6px; font-family: var(--f-display); font-weight: 700; font-size: 58px; opacity: .06; letter-spacing: -.04em; }

/* ---------- Routing-Weiche (Startseite -> Unterseiten) ---------- */
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.route-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 34px 34px 30px; text-decoration: none; box-shadow: 0 5px 22px -16px rgba(10,14,32,.18); }
.route-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.route-card.b::before { background: var(--b); }
.route-card.a::before { background: var(--a); }
.route-card:hover { box-shadow: 0 5px 22px -16px rgba(10,14,32,.18); border-color: var(--line); }
.route-card .ic { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; margin-bottom: 18px; }
.route-card .ic svg { width: 25px; height: 25px; }
.route-card .k { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; margin-bottom: 8px; }
.route-card.b .k { color: var(--b-ink); }
.route-card.a .k { color: var(--a-ink); }
.route-card h3 { font-size: clamp(23px,2.4vw,28px); letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink); }
.route-card > p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 22px; }
.route-card ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.route-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.route-card li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.route-card.b li svg { color: var(--b); }
.route-card.a li svg { color: var(--a); }
.route-card .go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.route-card .go-arw { font-size: 22px; line-height: 0; transition: transform .2s ease; }
.route-card:hover .go-arw { transform: translateX(5px); }
.route-card.b .go { color: var(--b-ink); }
.route-card.a .go { color: var(--a-ink); }
@media (max-width: 780px) { .route-grid { grid-template-columns: 1fr; } }

/* Graue Auswahl-Karten mit durchlaufendem Produkt-Mockup */
.route-card.rc-dark { background: #e9ebf0; border-color: var(--line); color: var(--ink); padding: 0; overflow: hidden; }
.route-card.rc-dark::before { display: none; }
.route-card.rc-dark:hover { border-color: var(--line); box-shadow: 0 5px 22px -16px rgba(10,14,32,.18); }
.route-card.rc-dark h3 { color: var(--ink); margin: 4px 30px 10px; }
.route-card.rc-dark > p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 30px 24px; }
.rc-mock { position: relative; height: 208px; overflow: hidden; margin-bottom: 20px; padding: 0 26px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.rc-stream { display: flex; flex-direction: column; will-change: transform; animation: rc-scroll 20s linear infinite; }
@keyframes rc-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.rc-item { flex: 0 0 auto; margin-bottom: 12px; }
/* Bewerbungs-Pill */
.rc-notif { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--r); padding: 12px 16px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.rc-bell { width: 32px; height: 32px; border-radius: var(--r); background: var(--a-tint); color: var(--a); display: grid; place-items: center; flex: 0 0 auto; }
.rc-bell svg { width: 17px; height: 17px; }
.rc-notif-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rc-notif-txt strong { font-size: 14px; color: var(--ink); font-weight: 700; }
.rc-notif-txt span { font-size: 12.5px; color: var(--muted); }
/* Anfrage-Karte */
.rc-inq { background: #fff; border-radius: var(--r); padding: 15px 17px; box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); }
.rc-inq-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-mail { width: 38px; height: 38px; border-radius: var(--r); background: var(--a-tint); color: var(--a); display: grid; place-items: center; }
.rc-mail svg { width: 20px; height: 20px; }
.rc-new { font-size: 11.5px; font-weight: 700; color: #1a9d5a; background: #e7f8ef; border-radius: var(--r); padding: 5px 12px; }
.rc-inq-sub { font-size: 12.5px; color: var(--muted); }
.rc-inq-prod { font-size: 16.5px; font-weight: 800; color: var(--ink); margin: 2px 0 11px; }
.rc-inq-bud { display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-radius: var(--r); padding: 9px 12px; }
.rc-inq-bud span { font-size: 12.5px; color: var(--muted); }
.rc-inq-bud b { font-size: 18px; font-weight: 800; color: var(--ink); }
.rc-btn { display: inline-flex; align-items: center; align-self: flex-start; background: var(--a); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: var(--r); margin: auto 30px 30px; transition: background .2s ease; }
.route-card.rc-dark:hover .rc-btn { background: var(--a-ink); }
/* Rechte Karte: Anfragen fliegen rein + gruener Stempel */
.rc-mock-flow { display: block; -webkit-mask-image: none; mask-image: none; }
.rc-mock-flow .rc-fly { position: absolute; left: 26px; right: 26px; top: 50%; opacity: 0; transform: translate(70px,-50%); animation: rc-fly 12s ease-in-out infinite; animation-delay: var(--d); }
@keyframes rc-fly {
  0%   { opacity: 0; transform: translate(70px,-50%); }
  4%   { opacity: 1; transform: translate(0,-50%); }
  21%  { opacity: 1; transform: translate(0,-50%); }
  25%  { opacity: 0; transform: translate(-58px,-50%); }
  100% { opacity: 0; transform: translate(-58px,-50%); }
}
.rc-stamp { position: absolute; top: 50%; left: 50%; opacity: 0; color: #148a4f; border: 2.5px solid #148a4f; border-radius: var(--r); padding: 6px 14px; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; background: rgba(230,248,238,.74); white-space: nowrap; pointer-events: none; animation: rc-stamp 12s ease-in-out infinite; animation-delay: var(--d); }
@keyframes rc-stamp {
  0%,7%   { opacity: 0; transform: translate(-50%,-50%) rotate(-13deg) scale(1.6); }
  11%     { opacity: 1; transform: translate(-50%,-50%) rotate(-13deg) scale(1); }
  20%     { opacity: 1; transform: translate(-50%,-50%) rotate(-13deg) scale(1); }
  24%,100%{ opacity: 0; transform: translate(-50%,-50%) rotate(-13deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .rc-stream, .rc-fly, .rc-stamp { animation: none; } .rc-mock-flow .rc-fly:first-child { opacity: 1; transform: translate(0,-50%); } }

/* ---------- Termin / Calendly-Seite ---------- */
.termin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.termin-copy h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.035em; line-height: 1.08; margin: 20px 0 0; color: var(--ink); }
.termin-lede { color: var(--muted); font-size: 18px; line-height: 1.6; margin: 18px 0 0; max-width: 44ch; }
.termin-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.termin-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.termin-list li svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 1px; color: #1a9d5a; }
.termin-alt { margin-top: 36px; }
.termin-alt > span { display: block; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.termin-alt a { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; color: var(--ink); }
.termin-alt a svg { width: 19px; height: 19px; color: var(--a); }
.termin-cal { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .termin-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Sections ---------- */
section { position: relative; }
.pad { padding: 104px 0; }
.pad-sm { padding: 76px 0; }
.sec-head { max-width: 680px; margin-bottom: 48px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(27px, 3vw, 38px); letter-spacing: -.03em; }
.sec-head p { color: var(--muted); font-size: 17px; margin-top: 14px; line-height: 1.6; }

.bg-paper { background: var(--paper); }
.bg-ink { background: var(--ink); color: #fff; }
.bg-ink .sec-head p { color: #aab0be; }

/* ---------- Marketplace (Indeed-style) ---------- */
.market { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.filters { position: sticky; top: 88px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); }
.filters h4 { font-size: 13px; text-transform: none; color: var(--muted); font-family: var(--f-body); font-weight: 700; letter-spacing: 0; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 8px 14px; border-radius: var(--r); font-weight: 600; font-size: 14px;
  background: var(--paper); color: var(--ink); border: 1px solid transparent; transition: all .15s;
}
.chip:hover { background: var(--paper-2); }
.chip.active { background: var(--ink); color: #fff; }
.chip .n { font-size: 12px; opacity: .6; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-block { margin-bottom: 20px; }
.filter-block:last-child { margin-bottom: 0; }
.filter-list { display: flex; flex-direction: column; gap: 3px; }
.filter-list .chip { justify-content: space-between; width: 100%; background: transparent; }
.filter-list .chip:hover { background: var(--paper); }
.filter-list .chip.active { background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--a); border-radius: var(--r); }

.market-main { min-width: 0; }
.market-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.market-bar .count { font-weight: 700; }
.market-bar .count b { color: var(--a); }
.seg { display: inline-flex; background: var(--paper); border-radius: var(--r); padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; font-family: var(--f-body); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: var(--r); cursor: pointer; color: var(--muted); }
.seg button.active { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg button.active.a { color: var(--a-ink); }
.seg button.active.b { color: var(--b-ink); }

.listings { display: grid; gap: 12px; }
.card-lead {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center;
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card-lead:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; }
.card-lead .ic { width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; }
.card-lead .ic svg { width: 26px; height: 26px; }
.ic-a { background: var(--a-tint); color: var(--a-ink); }
.ic-b { background: var(--b-tint); color: var(--b-ink); }
.card-lead .body { min-width: 0; }
.card-lead .tt { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card-lead h3 { font-size: 18px; font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; }
.tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r); letter-spacing: .01em; }
.tag-a { background: var(--a-tint); color: var(--a-ink); }
.tag-b { background: var(--b-tint); color: var(--b-ink); }
.tag-ex { background: var(--ink); color: #fff; }
.card-lead .meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; font-weight: 600; margin-top: 5px; }
.card-lead .meta span { display: inline-flex; align-items: center; gap: 6px; }
.card-lead .meta svg { width: 14px; height: 14px; opacity: .7; }
.card-lead .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.card-lead .price { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.card-lead .price small { font-size: 12px; color: var(--muted); font-weight: 700; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(193,42,42,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(193,42,42,.5)} 70%{box-shadow:0 0 0 8px rgba(193,42,42,0)} 100%{box-shadow:0 0 0 0 rgba(193,42,42,0)} }
.live-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ok); }

/* ---------- Category grid (kompakt, scannbar) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat {
  display: grid; grid-template-columns: 42px 1fr 16px; column-gap: 14px; align-items: center;
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s; cursor: pointer;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.cat .ic { width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.cat .ic svg { width: 22px; height: 22px; }
.cat h3 { grid-column: 2; grid-row: 1; align-self: end; font-size: 15.5px; font-family: var(--f-body); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.cat p { grid-column: 2; grid-row: 2; align-self: start; color: var(--muted); font-size: 12.5px; margin: 2px 0 0; line-height: 1.35; }
.cat .n { display: none; }
.cat .arrow-c { display: none; }
.cat::after {
  content: ''; grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 8px; height: 8px;
  border-right: 2px solid var(--muted-2); border-top: 2px solid var(--muted-2); border-radius: var(--r);
  transform: rotate(45deg); opacity: .4; transition: transform .18s ease, opacity .18s ease;
}
.cat:hover::after { opacity: 1; transform: rotate(45deg) translate(2px,-2px); }
.cat:hover::after { border-color: var(--a-ink); }
.cat.b:hover::after { border-color: var(--b-ink); }
.cat.b:hover { box-shadow: 0 8px 30px rgba(193,42,42,.14); }
.cat.b .arrow-c { color: var(--b-ink); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: left; }
.stat .num { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -.035em; line-height: 1; }
.stat .num .u { font-size: .55em; }
.stat .lbl { color: var(--muted); font-weight: 600; margin-top: 8px; font-size: 15px; }
.bg-ink .stat .lbl { color: #aab0be; }
.stat.a .num { color: var(--a); }
.stat.b .num { color: #dd6a63; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.step .no { font-family: var(--f-display); font-weight: 700; font-size: 20px; width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; background: var(--paper); margin-bottom: 18px; }
.step.a .no { background: var(--a-tint); color: var(--a-ink); }
.step.b .no { background: var(--b-tint); color: var(--b-ink); }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- Split promo (two verticals) ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.promo { border-radius: var(--r); padding: 40px; color: #fff; position: relative; overflow: hidden; min-height: 340px; display: flex; flex-direction: column; }
.promo-a { background: var(--ink); box-shadow: inset 4px 0 0 var(--a); }
.promo-b { background: var(--ink); box-shadow: inset 4px 0 0 var(--b); }
.promo .eyebrow { color: rgba(255,255,255,.7); }
.promo-a .eyebrow .dot { background: var(--a); }
.promo-b .eyebrow .dot { background: var(--b); }
.promo h3 { font-size: 30px; margin: 14px 0 12px; letter-spacing: -.02em; }
.promo p { opacity: .92; margin: 0 0 22px; max-width: 34ch; }
.promo ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.promo li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; }
.promo li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.promo .btn { margin-top: auto; align-self: flex-start; background: #fff; color: var(--ink); }
.promo .deco { position: absolute; right: -40px; bottom: -40px; font-family: var(--f-display); font-weight: 700; font-size: 200px; opacity: .10; letter-spacing: -.06em; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; }
.plan.feat { border-color: transparent; box-shadow: var(--shadow-lg); position: relative; }
.plan .ribbon { position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--r); background: var(--a-tint); color: var(--a-ink); }
.plan h3 { font-family: var(--f-body); font-weight: 700; font-size: 18px; }
.plan .amt { font-family: var(--f-display); font-weight: 700; font-size: 46px; letter-spacing: -.03em; margin: 12px 0 2px; }
.plan .amt small { font-size: 15px; color: var(--muted); font-weight: 600; }
.plan .desc { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; font-weight: 600; }
.plan li svg { width: 18px; height: 18px; color: var(--ok); flex: 0 0 auto; }
.plan .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.qa { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; padding: 22px 24px; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; transition: transform .2s, background .2s; font-weight: 700; }
.qa[open] summary .pm { transform: rotate(45deg); background: var(--a-tint); color: var(--a-ink); }
.qa .ans { padding: 0 24px 24px; color: var(--muted); font-size: 15.5px; }

/* ---------- CTA band ---------- */
.cta { background: var(--ink); color: #fff; border-radius: var(--r); padding: 56px; position: relative; overflow: hidden; text-align: center; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(10,14,32,.9) 0%, rgba(10,14,32,.82) 50%, rgba(10,14,32,.92) 100%); }
.cta::before { content:""; position:absolute; inset:0; z-index:2; background: radial-gradient(560px 340px at 15% 0%, rgba(202,40,40,.2), transparent 62%), radial-gradient(560px 360px at 90% 100%, rgba(193,42,42,.18), transparent 64%); }
.cta > *:not(.cta-bg) { position: relative; z-index: 3; }
.cta h2 { font-size: clamp(28px, 3.6vw, 44px); text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.cta p { color: #d6d9e2; font-size: 18px; margin: 16px auto 28px; max-width: 52ch; }
.cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Logos / trust strip ---------- */
.trust { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: center; opacity: .7; }
.trust span { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--muted); letter-spacing: -.02em; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #c7cad4; padding: 64px 0 34px; }
.footer .cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 30px; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer .brand .mark { background: #fff; color: var(--ink); }
.footer p.mini { max-width: 34ch; font-size: 14.5px; }
.footer h5 { color: #fff; font-family: var(--f-body); font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer a { font-size: 14.5px; color: #aab0be; }
.footer a:hover { color: #fff; }
.footer .rule { height: 1px; background: rgba(255,255,255,.10); margin: 40px 0 22px; }
.footer .fine { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: #7c8291; flex-wrap: wrap; }
.footer .fine a { font-size: 13px; color: #7c8291; }
.footer .fine a:hover { color: #fff; }
.footer .ft-brand { margin-bottom: 4px; }
.footer .ft-brand .brand-logo { height: 30px; }
.footer .ft-brand + .rule { margin: 26px 0 34px; }
.footer .ft-sub { display: block; color: #7c8291; font-size: 12.5px; margin-top: 2px; }
.footer .ft-btn { margin-top: 22px; color: var(--ink); font-weight: 700; }
.footer .ft-btn:hover { color: var(--ink); background: #eef0f4; }
.ft-person { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ft-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ft-person-t { display: flex; flex-direction: column; line-height: 1.3; }
.ft-person-t strong { color: #fff; font-size: 15px; font-weight: 700; }
.ft-person-t span { color: #8a90a0; font-size: 13.5px; }
.ft-contact a { display: inline-flex; align-items: center; gap: 9px; }
.ft-contact svg { width: 16px; height: 16px; color: var(--a); flex: 0 0 auto; }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- Page hero (subpages) ---------- */
.phero { padding: 68px 0 60px; position: relative; overflow: hidden; }
.phero-a { background: linear-gradient(160deg, #180d07 0%, #1c0f09 100%); color: #fff; }
.phero-b { background: linear-gradient(160deg, #04150f 0%, #06231d 100%); color: #fff; }
.phero::before { content:""; position:absolute; inset:0; pointer-events:none; }
.phero-a::before { background: radial-gradient(680px 420px at 92% 0%, rgba(202,40,40,.18), transparent 62%); }
.phero-b::before { background: radial-gradient(680px 420px at 92% 0%, rgba(193,42,42,.20), transparent 62%); }
.phero .wrap { position: relative; }
.phero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.phero h1 { font-size: clamp(38px, 5vw, 62px); }
.phero-a h1 .hl { color: var(--a); }
.phero-b h1 .hl { color: #dd6a63; }
.phero .lede { color: #c9ccd6; font-size: 19px; margin: 20px 0 28px; max-width: 46ch; }
.phero .stat-row { display: flex; gap: 34px; margin-top: 34px; flex-wrap: wrap; }
.phero .stat-row .num { font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: -.03em; }
.phero-a .stat-row .num { color: var(--a); }
.phero-b .stat-row .num { color: #dd6a63; }
.phero .stat-row .lbl { font-size: 13.5px; color: #aab0be; }

/* search bar in page hero */
.searchbar { background: #fff; border-radius: var(--r); padding: 8px; display: flex; gap: 8px; box-shadow: var(--shadow-lg); max-width: 520px; }
.searchbar input { flex: 1; border: 0; outline: 0; font-family: var(--f-body); font-size: 15px; padding: 0 16px; color: var(--ink); background: transparent; }
.searchbar .btn { flex: 0 0 auto; }

/* preview list card in phero */
.pv { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 8px; backdrop-filter: blur(6px); }
.pv-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: var(--r); transition: background .15s; }
.pv-row:hover { background: rgba(255,255,255,.06); }
.pv-row .ic { width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; background: rgba(255,255,255,.12); }
.pv-row .ic svg { width: 21px; height: 21px; color: #fff; }
.pv-row .tt { font-weight: 700; font-size: 15px; color: #fff; }
.pv-row .mt { font-size: 12.5px; color: #a9adba; margin-top: 2px; }
.pv-row .pr { font-family: var(--f-display); font-weight: 700; color: #fff; font-size: 17px; }

/* generic feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.feature-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.feature .ic { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; flex: 0 0 auto; }
.feature .ic svg { width: 24px; height: 24px; }
.ic-both { background: linear-gradient(135deg, var(--b-tint) 0 50%, var(--a-tint) 50% 100%); color: var(--ink); }
.tag { font-size: 11.5px; font-weight: 700; letter-spacing: .01em; padding: 6px 11px; border-radius: var(--r); white-space: nowrap; }
.tag.a { background: var(--a-tint); color: var(--a-ink); }
.tag.b { background: var(--b-tint); color: var(--b-ink); }
.tag.both { background: var(--paper); color: var(--muted); }
.feature h3 { font-size: 19px; margin-bottom: 8px; }
.feature p { color: var(--muted); margin: 0; font-size: 15px; }

.divider-space { height: 0; }

/* ---------- Pain cards ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pain-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pain { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.pain .ic { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; margin-bottom: 16px; background: var(--a-tint); color: var(--a-ink); }
.pain.b .ic { background: var(--b-tint); color: var(--b-ink); }
.pain .ic svg { width: 24px; height: 24px; }
.pain h3 { font-size: 18px; margin-bottom: 8px; }
.pain p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- Comparison ---------- */
.compare { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; }
.vs { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.vs.win { border-color: transparent; box-shadow: var(--shadow-lg); background: var(--ink); color: #fff; }
.vs .who { font-size: 13px; font-weight: 700; color: var(--muted); }
.vs.win .who { color: var(--a); }
.vs h3 { font-size: 20px; margin: 6px 0 18px; }
.vs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.vs li { display: flex; gap: 11px; font-size: 14.5px; font-weight: 600; align-items: flex-start; line-height: 1.4; }
.vs.win li { color: #e7e9ee; }
.vs li svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }
.vs .yes { color: var(--ok); }
.vs .no { color: #ca2828; }

/* ---------- KI / Cloud panel (recruiting) ---------- */
.kipanel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 18px; backdrop-filter: blur(8px); }
.kipanel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kipanel .head .t { font-weight: 700; color: #fff; font-size: 15px; }
.kipanel .head .live-flag { color: var(--ok); }
.kirow { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r); background: rgba(255,255,255,.05); margin-bottom: 8px; color: #dfe2ea; font-size: 13.5px; font-weight: 600; }
.kirow svg { width: 17px; height: 17px; color: var(--ok); flex: 0 0 auto; }
.kirow.mut { color: #a9adba; }
.kichips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 12px; }
.kichip { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: var(--r); background: rgba(255,255,255,.08); color: #cdd2dd; opacity: 0; transform: translateY(4px); animation: kipop .5s forwards; }
@keyframes kipop { to { opacity: 1; transform: none; } }
.kiprog { height: 8px; border-radius: var(--r); background: rgba(255,255,255,.10); overflow: hidden; margin: 6px 0 12px; }
.kiprog > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--b), #dd6a63); border-radius: var(--r); animation: kifill 2.4s ease forwards; }
@keyframes kifill { to { width: 88%; } }
.kiout { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: var(--r); background: rgba(193,42,42,.18); border: 1px solid rgba(94,199,188,.3); color: #fff; font-weight: 700; font-size: 14.5px; }
.kiout svg { width: 20px; height: 20px; color: #dd6a63; }
.avstack { display: flex; align-items: center; }
.avstack .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; margin-left: -8px; border: 2px solid var(--ink); }
.avstack .av:first-child { margin-left: 0; }
.avstack .more { margin-left: 10px; font-size: 12.5px; color: #a9adba; font-weight: 700; }

/* ---------- Process list (recruiting) ---------- */
.proc { display: grid; gap: 12px; max-width: 860px; }
.proc-item { display: grid; grid-template-columns: 46px 1fr; gap: 18px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; align-items: start; }
.proc-item .no { width: 46px; height: 46px; border-radius: var(--r); background: var(--b-tint); color: var(--b-ink); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.proc.a .proc-item .no { background: var(--a-tint); color: var(--a-ink); }
.proc-item h3 { font-size: 18px; margin-bottom: 5px; font-family: var(--f-body); font-weight: 700; }
.proc-item p { margin: 0; color: var(--muted); font-size: 14.5px; }

@media (max-width: 980px) {
  .pain-grid, .pain-grid.four, .compare { grid-template-columns: 1fr; }
  .proc-item { grid-template-columns: 40px 1fr; gap: 12px; }
}

/* ---------- Verfügbarkeits-Check ---------- */
.checker { background: #fff; border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-lg); max-width: 640px; }
.checker-seg { display: inline-flex; background: var(--paper); border-radius: var(--r); padding: 4px; gap: 2px; margin-bottom: 12px; }
.checker-seg button { border: 0; background: transparent; font-family: var(--f-body); font-weight: 700; font-size: 13.5px; padding: 7px 15px; border-radius: var(--r); cursor: pointer; color: var(--muted); }
.checker-seg button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.checker-row { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 8px 8px 8px 20px; transition: border-color .15s, box-shadow .15s; }
.checker-row:focus-within { border-color: var(--muted-2); box-shadow: 0 0 0 4px rgba(193,42,42,.08); }
.checker-ic { display: grid; place-items: center; color: var(--muted-2); margin-right: 14px; flex: 0 0 auto; }
.checker-ic svg { width: 22px; height: 22px; }
.checker-field { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.checker-field label { font-size: 12px; color: var(--muted-2); font-weight: 600; line-height: 1.2; }
.checker-field input { border: 0; background: transparent; padding: 2px 0 0; font-family: var(--f-body); font-size: 15.5px; font-weight: 500; color: var(--ink); outline: 0; width: 100%; }
.checker-field input::placeholder { color: var(--muted-2); font-weight: 400; }
.checker-div { width: 1px; align-self: stretch; background: var(--line); margin: 4px 18px; flex: 0 0 auto; }
.checker-field-plz { flex: 0 0 auto; width: 120px; }
.checker-note { margin: 10px 2px 0; font-size: 13px; font-weight: 600; line-height: 1; display: none; align-items: center; gap: 6px; }
.checker-note.ok, .checker-note.bad { display: flex; }
.checker-note.ok { color: #12813c; }
.checker-note.bad { color: var(--red, #c12a2a); }
.checker-note .cn-ic { font-weight: 800; }
.checker-go { border-radius: var(--r); padding: 13px 24px; flex: 0 0 auto; margin-left: 14px; }
@media (max-width: 560px) {
  .checker-row { flex-wrap: wrap; border-radius: var(--r); padding: 12px; gap: 10px; }
  .checker-ic { display: none; }
  .checker-field { flex: 1 1 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px; }
  .checker-div { display: none; }
  .checker-field-plz { width: 100%; }
  .checker-go { width: 100%; margin-left: 0; justify-content: center; }
}
.checker-result { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--paper); animation: kipop .4s ease; }
.checker-result[hidden] { display: none; }
.checker-result.a { background: var(--a-tint); }
.checker-result.b { background: var(--b-tint); }
.checker-result .cr-ic { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; }
.checker-result .cr-ic svg { width: 24px; height: 24px; }
.cr-num { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.15; color: var(--ink); }
.cr-num .cr-count { font-size: 30px; margin-right: 4px; }
.checker-result.a .cr-count { color: var(--a-ink); }
.checker-result.b .cr-count { color: var(--b-ink); }
.cr-sub { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 3px; }
.cr-tag { color: var(--muted-2); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.cr-cta { padding: 10px 16px; font-size: 13.5px; }

/* Checker: Treffer-Zustand (grün) */
.checker-result.ok { background: #e9f7ee; align-items: start; }
.checker-result.ok .cr-ic.ic-ok { background: #16a34a; color: #fff; }
.checker-result.ok .cr-count { color: #12813c; }
.btn-green { background: #16a34a; color: #fff; }
.btn-green:hover { background: #12813c; }

/* Checker: Lade-/Fehlerzustand */
.checker-result.err { background: #f7e4de; grid-template-columns: 1fr; }
.cr-err { display: flex; align-items: flex-start; gap: 10px; color: #b23c22; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.cr-err svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.checker-result:has(.cr-load) { display: block; }
.cr-load { width: 100%; }
.cr-load-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.cr-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(7,11,43,.12); border-top-color: var(--b); animation: crspin .7s linear infinite; flex: 0 0 auto; }
.checker-result.a .cr-spin { border-top-color: var(--a); }
@keyframes crspin { to { transform: rotate(360deg); } }
.cr-bar { height: 6px; border-radius: var(--r); background: rgba(7,11,43,.08); overflow: hidden; }
.cr-bar > i { display: block; height: 100%; width: 6%; background: var(--b); border-radius: var(--r); transition: width .55s cubic-bezier(.3,.7,.3,1); }
.checker-result.a .cr-bar > i { background: var(--a); }
@media (max-width: 620px) {
  .checker-row { grid-template-columns: 1fr 84px; }
  .checker-go { grid-column: 1 / -1; }
  .checker-result { grid-template-columns: 42px 1fr; }
  .cr-cta { grid-column: 1 / -1; width: 100%; }
}

/* ---------- Images ---------- */
.media { border-radius: var(--r); overflow: hidden; position: relative; box-shadow: var(--shadow-lg); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.tall { aspect-ratio: 4 / 5; }
.media.wide { aspect-ratio: 16 / 10; }
.hero-media { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; position: relative; box-shadow: var(--shadow-lg); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .float {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  background: rgba(7,11,43,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); padding: 14px 16px; color: #fff; display: flex; align-items: center; gap: 12px;
}
.hero-media .float .fic { width: 40px; height: 40px; border-radius: var(--r); background: var(--a); display: grid; place-items: center; flex: 0 0 auto; }
.hero-media .float.b .fic { background: var(--b); }
.hero-media .float .fic svg { width: 21px; height: 21px; color: #fff; }
.hero-media .float .ft { font-weight: 700; font-size: 14.5px; }
.hero-media .float .fs { font-size: 12.5px; color: #c7cad4; }

/* category tiles with image */
.cat.has-img { display: block; padding: 0; overflow: hidden; }
.cat.has-img::after { display: none; }
.cat.has-img .cat-img { aspect-ratio: 16 / 10; overflow: hidden; }
.cat.has-img .cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat.has-img:hover .cat-img img { transform: scale(1.05); }
.cat.has-img .cat-body { padding: 18px 20px; }

/* image showcase band */
.showcase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.showcase .media { aspect-ratio: 3 / 4; }
.showcase .media .cap { position: absolute; left: 12px; bottom: 12px; background: rgba(7,11,43,.7); backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: var(--r); }
@media (max-width: 780px) { .showcase { grid-template-columns: 1fr 1fr; } }

/* ---------- Kundenlogos ---------- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 34px; align-items: center; }
.logos img { max-height: 38px; max-width: 100%; width: auto; margin: 0 auto; filter: grayscale(1); opacity: .5; transition: filter .25s, opacity .25s; }
.logos img:hover { filter: none; opacity: 1; }

/* Schwarze Trust-Leiste direkt unter dem Header */
.trustbar { background: var(--ink); padding: 26px 0 30px; }
.trustbar-t { text-align: center; color: rgba(255,255,255,.55); font-weight: 600; font-size: 13.5px; margin: 0 0 22px; }
.logos-inv { gap: 16px 18px; }
.logos-inv img { filter: grayscale(1); opacity: .9; background: #fff; border-radius: var(--r); padding: 14px 20px; max-height: 26px; box-sizing: content-box; transition: opacity .2s; }
.logos-inv img:hover { opacity: 1; filter: none; }
@media (max-width: 780px) { .logos { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* ---------- Case Studies (Magazine, wie koller-lode.de) ---------- */
.case-featured { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }
.cf-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--paper-2); }
.cf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,11,43,.30), transparent 45%); pointer-events: none; }
.cf-verified { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r); background: rgba(255,255,255,.95); backdrop-filter: blur(6px); font-size: 11.5px; font-weight: 700; color: var(--ink); box-shadow: 0 2px 8px rgba(7,11,43,.12); }
.cf-verified svg { width: 13px; height: 13px; color: var(--b); }
.cf-body { display: flex; flex-direction: column; }
.cf-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--b-ink); margin-bottom: 16px; }
.cf-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--b); }
.cf-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.cf-days { font-family: var(--f-display); font-weight: 700; font-size: clamp(52px, 7vw, 74px); line-height: .92; letter-spacing: -.035em; margin-bottom: 12px; }
.cf-days small { font-size: .32em; color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 8px; }
.cf-head { font-size: 22px; line-height: 1.22; letter-spacing: -.01em; margin-bottom: 22px; }
.cf-quote { border-left: 2px solid var(--b); padding-left: 16px; font-size: 15px; line-height: 1.65; color: var(--muted); font-style: italic; margin-bottom: 22px; }
.cf-person { font-weight: 700; font-size: 14px; }
.cf-person span { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-top: 3px; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.case:hover { border-color: #cfd3db; box-shadow: var(--shadow); }
.c-img { position: relative; aspect-ratio: 16 / 10; background: var(--paper); overflow: hidden; }
.c-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case:hover .c-img img { transform: scale(1.05); }
.c-img.logo { display: flex; align-items: center; justify-content: center; padding: 30px; background: var(--paper); }
.c-img.logo img { position: static; width: auto; height: auto; max-height: 54px; max-width: 62%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: opacity .25s; }
.case:hover .c-img.logo img { opacity: 1; }
.c-pill { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: var(--r); background: rgba(255,255,255,.95); backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 700; color: var(--ink); box-shadow: 0 1px 4px rgba(7,11,43,.1); }
.c-ver { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: var(--r); background: rgba(255,255,255,.95); backdrop-filter: blur(6px); font-size: 10px; font-weight: 700; color: var(--ink); box-shadow: 0 1px 4px rgba(7,11,43,.1); }
.c-ver svg { width: 11px; height: 11px; color: var(--b); }
.c-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.c-metric { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.c-metric .d { font-family: var(--f-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -.035em; }
.c-metric .n { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1; }
.c-metric .u { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.c-metric .sep { color: var(--line); margin: 0 3px; }
.case h3 { font-size: 16px; line-height: 1.32; margin-bottom: 14px; font-family: var(--f-body); font-weight: 700; letter-spacing: -.005em; }
.c-pos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.c-pos span { padding: 3px 9px; border-radius: var(--r); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); font-weight: 500; }
.c-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.c-foot .co { font-weight: 700; font-size: 13.5px; }
.c-foot .re { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
@media (max-width: 900px) { .case-featured { grid-template-columns: 1fr; gap: 28px; } .cases { grid-template-columns: 1fr; } }

/* ---------- Fallstudien (Homepage-Stil, info-reiche Textkarten) ---------- */
.falls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fall { display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; transition: border-color .25s, box-shadow .25s; }
.fall:hover { border-color: #cfd3db; box-shadow: var(--shadow); }
.fall-sys { align-self: flex-start; display: inline-flex; padding: 6px 12px; border-radius: var(--r); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.fall.a .fall-sys { background: var(--a-tint); color: var(--a-ink); }
.fall.b .fall-sys { background: var(--b-tint); color: var(--b-ink); }
.fall h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.015em; margin: 22px 0 0; }
.fall .co { font-size: 13px; color: var(--muted-2); margin-top: 14px; font-weight: 600; }
.fall .aus { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 22px; }
.fall .aus b { color: var(--ink); font-weight: 700; }
.fall ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.fall li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.fall li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.fall.a li svg { color: var(--a); }
.fall.b li svg { color: var(--b); }
.fall .more { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.fall.a .more { color: var(--a-ink); }
.fall.b .more { color: var(--b-ink); }
.fall:hover .more { gap: 11px; }
@media (max-width: 820px) { .falls { grid-template-columns: 1fr; } }

/* ---------- Video-Referenzen (Wistia) ---------- */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vid { appearance: none; -webkit-appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; padding: 0; margin: 0; display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--canvas); cursor: pointer; transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease; }
.vid:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
.vid:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.vid-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(115% 120% at 50% 32%, #2b313d, var(--ink)); }
.vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vid:hover .vid-thumb img { transform: scale(1.05); }
.vid-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,11,15,.12), rgba(9,11,15,.42)); }
.vid-play { position: absolute; inset: 0; margin: auto; z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: var(--a); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.34); transition: transform .2s ease, background .2s ease; }
.vid-play svg { width: 24px; height: 24px; margin-left: 3px; color: #fff; }
.vid:hover .vid-play { transform: scale(1.09); background: var(--a-ink); }
.vid-cap { display: block; padding: 15px 17px; }
.vid-cap .vt { display: block; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.vid-cap .vs { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; padding: 0; border: 0; border-radius: 0; background: none; }
.vid-kpi { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 13px; font-weight: 700; color: var(--b-ink); letter-spacing: -.005em; }
.vid-kpi svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--b); }
.vid-cta { margin-top: 14px; border-radius: var(--r); display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; padding: 26px 34px; background: var(--paper); transition: background .2s; }
.vid-cta:hover { background: var(--paper-2); }
.vid-cta-txt { min-width: 0; }
.vid-cta .vt { font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.vid-cta p { color: var(--muted); font-size: 14.5px; margin: 6px 0 0; }
.vid-cta .btn { flex: none; }

/* Case-Study-Karten (2 nebeneinander) */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.case { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 5px 22px -16px rgba(10,14,32,.20); }
.case:hover { box-shadow: 0 5px 22px -16px rgba(10,14,32,.20); border-color: var(--line); }
.case .vid.case-thumb { border: 0; border-radius: 0; background: none; }
.case .vid.case-thumb:hover { transform: none; box-shadow: none; }
.case .vid.case-thumb:hover .vid-thumb img,
.case .vid.case-thumb:hover .vid-play { transform: none; }
.case-body { padding: 20px 24px 24px; }
/* Kopf: Avatar + Name/Rolle */
.case-head { display: flex; align-items: center; gap: 14px; }
.case-head-t { order: 1; min-width: 0; flex: 1; }
.case-brand { order: 2; flex: 0 0 auto; margin-left: auto; height: 34px; min-width: 34px; padding: 0 10px; background: #f6f7f9; border-radius: var(--r); display: grid; place-items: center; }
.case-logo { max-height: 18px; max-width: 76px; width: auto; height: auto; display: block; object-fit: contain; }
.case-brand-ini { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: .02em; }
.case-name { font-family: var(--f-display); font-weight: 700; font-size: 17.5px; letter-spacing: -.015em; line-height: 1.25; margin: 0; }
.case-verify { width: 15px; height: 15px; color: #16a34a; vertical-align: -2px; margin-left: 5px; }
.case-lab { color: var(--muted-2); font-size: 12.5px; font-weight: 600; margin: 13px 0 5px; }
.case-text { font-size: 14px; line-height: 1.58; margin: 0; color: #545b69; }
/* Ergebnisse = Blickfang der Karte */
.case-res-box { margin-top: 16px; background: rgba(22,163,74,.08); border-radius: var(--r); padding: 16px 18px; }
.case-reslab { color: #17924a; font-size: 12.5px; font-weight: 700; margin: 0 0 11px; }
.case-res { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.case-res li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.case-res li svg { width: 18px; height: 18px; color: #16a34a; flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 820px) { .cases { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .videos { grid-template-columns: 1fr 1fr; } }

/* ---------- Video-Modal (Wistia-Popup) ---------- */
.vmodal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 28px; }
.vmodal.open { display: flex; }
.vmodal-back { position: absolute; inset: 0; background: rgba(9,11,15,.84); backdrop-filter: blur(4px); animation: vfade .2s ease; }
.vmodal-box { position: relative; z-index: 1; width: min(1000px, 100%); animation: vpop .26s cubic-bezier(.2,.7,.2,1); }
.vmodal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal-x { position: absolute; top: -16px; right: -16px; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .15s ease; z-index: 2; }
.vmodal-x:hover { transform: scale(1.08); }
.vmodal-x svg { width: 20px; height: 20px; color: var(--ink); }
@keyframes vfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes vpop { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
@media (max-width: 560px) { .vmodal { padding: 16px } .vmodal-x { top: 8px; right: 8px; width: 40px; height: 40px; } }

/* ---------- Talentpool ---------- */
.pool-wrap { position: relative; display: grid; grid-template-columns: 1.45fr 1fr; gap: 30px; align-items: center; background: radial-gradient(120% 100% at 22% 15%, rgba(193,42,42,.06), transparent 55%), var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 30px; box-shadow: var(--shadow); overflow: hidden; }
.pool { position: relative; z-index: 2; }
.pool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pool-head .ph-dot { width: 32px; height: 32px; border-radius: var(--r); background: var(--b-tint); position: relative; flex: 0 0 auto; }
.pool-head .ph-dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.ph-t { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.ph-s { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.pool svg { width: 100%; height: auto; display: block; overflow: visible; }
.node-c { fill: #fff; stroke: #e4e8ef; stroke-width: 1.5; }
.node-t { fill: #b0b6c3; font-family: var(--f-body); font-weight: 700; font-size: 16px; }
.hot-glow { fill: var(--b); opacity: 0; }
.hot-c { fill: var(--b); }
.hot-t { fill: #fff; font-family: var(--f-body); font-weight: 700; font-size: 16px; }
.hot-dot { fill: var(--ok); stroke: #fff; stroke-width: 2.5; }
.hot { opacity: 0; }
[data-reveal].in .hot { opacity: 1; transition: opacity .5s ease; }
[data-reveal].in .hot-glow { animation: poolGlow 2.8s ease-in-out infinite; }
@keyframes poolGlow { 0%,100% { opacity: .10; } 50% { opacity: .24; } }
.beam { animation: beamSweep 3.8s ease-in-out infinite alternate; }
@keyframes beamSweep { 0% { transform: translateX(-30px); } 100% { transform: translateX(520px); } }
.pool-cards { display: grid; gap: 13px; position: relative; z-index: 3; }
.pcard { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; opacity: 0; transform: translateX(10px); }
[data-reveal].in .pcard { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.pcard .pav { width: 44px; height: 44px; border-radius: 50%; background: var(--b); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 16px; }
.pcard .pn { font-weight: 700; font-size: 15.5px; }
.pcard .pr { color: var(--muted); font-size: 13px; margin-top: 2px; }
.pcard .pw { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ok); margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--line); }
.pcard .pw::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18,160,110,.16); flex: 0 0 auto; }
.pool-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.pool-links path { fill: none; stroke: var(--b); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0; }
[data-reveal].in .pool-links path { opacity: .45; transition: opacity .8s ease .35s; }
.pool-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 24px; }
.pnum { font-family: var(--f-display); font-weight: 700; font-size: 30px; letter-spacing: -.03em; color: var(--b-ink); line-height: 1; }
.plab { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.45; }
.ph-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--b-ink); background: var(--b-wash); border: 1px solid #d9ece8; padding: 6px 11px; border-radius: var(--r); white-space: nowrap; }
.pcard .pw { flex-wrap: wrap; }
.pfresh { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--paper); padding: 3px 8px; border-radius: var(--r); }
.pool-fresh { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 20px 22px; border-radius: var(--r); background: var(--b-wash); border: 1px solid #dcece9; }
.pool-fresh .pf-ic { width: 40px; height: 40px; border-radius: var(--r); background: var(--b); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.pool-fresh .pf-ic svg { width: 21px; height: 21px; }
.pool-fresh p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.pool-fresh p b { color: var(--ink); }
@media (max-width: 900px) { .pool-wrap { grid-template-columns: 1fr; } .pool-links { display: none; } .pool-stats { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- Live-Datenbank Konsole (Talentpool + Anfragenpool) ---------- */
.livedb { position: relative; background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.livedb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 300px at 6% -10%, rgba(193,42,42,.18), transparent 60%), radial-gradient(520px 300px at 94% -10%, rgba(202,40,40,.16), transparent 60%); pointer-events: none; }
.ldb-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ldb-title { color: #fff; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.ldb-title span { color: #9aa1af; font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: var(--r); background: rgba(255,255,255,.06); }
.ldb-sync { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-size: 12.5px; font-weight: 700; }
.ldb-sync svg { width: 14px; height: 14px; animation: ldbspin 2.4s linear infinite; }
@keyframes ldbspin { to { transform: rotate(360deg); } }
.ldb-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.ldb-col { padding: 18px 20px; }
.ldb-col + .ldb-col { border-left: 1px solid rgba(255,255,255,.08); }
.ldb-h { display: flex; align-items: center; gap: 8px; color: #c7cdd8; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.ldb-h b { margin-left: auto; font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.ldb-col.b .ldb-h b { color: #dd6a63; }
.ldb-col.a .ldb-h b { color: #ef9a9a; }
.ldb-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; animation: ldbpulse 1.8s infinite; }
.ldb-col.b .ldb-dot { background: #dd6a63; box-shadow: 0 0 0 0 rgba(94,199,188,.5); }
.ldb-col.a .ldb-dot { background: #ef9a9a; box-shadow: 0 0 0 0 rgba(230,120,120,.5); }
@keyframes ldbpulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.ldb-feed { display: flex; flex-direction: column; gap: 8px; }
.ldb-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.ldb-row.is-new { animation: ldbin .5s ease; }
@keyframes ldbin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.lr-av { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: 0 0 auto; }
.ldb-col.b .lr-av { background: rgba(193,42,42,.9); }
.ldb-col.a .lr-av { background: rgba(202,40,40,.9); }
.lr-main { min-width: 0; }
.lr-t { color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-m { color: #9aa1af; font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-side { text-align: right; flex: 0 0 auto; }
.lr-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--r); white-space: nowrap; }
.ldb-col.b .lr-tag { background: rgba(94,199,188,.15); color: #7fd4c9; }
.ldb-col.a .lr-tag { background: rgba(230,120,120,.16); color: #e8b48f; }
.lr-time { display: block; color: #6f7686; font-size: 10px; margin-top: 4px; }
.ldb-foot { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-top: 1px solid rgba(255,255,255,.08); color: #aab0be; font-size: 13px; line-height: 1.5; }
.ldb-foot svg { width: 19px; height: 19px; color: var(--ok); flex: 0 0 auto; }
.ldb-foot b { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .ldb-cols { grid-template-columns: 1fr; } .ldb-col + .ldb-col { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); } .lr-m { white-space: normal; } }

/* ---------- DB-Panels (Talentpool + Anfragenpool, premium) ---------- */
.dbduo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dbcard { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; box-shadow: var(--shadow-sm); }
.dbcard.b { border-top: 3px solid var(--b); }
.dbcard.a { border-top: 3px solid var(--a); }
.dbcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dbtag { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dblive { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.dblive .pulse { position: static; }
.dbbig { font-family: var(--f-display); font-weight: 700; font-size: clamp(44px,6vw,60px); line-height: 1; letter-spacing: -.04em; }
.dbcard.b .dbbig { color: var(--b-ink); }
.dbcard.a .dbbig { color: var(--a-ink); }
.dbu { font-size: .5em; margin-left: 2px; }
.dbsub { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.dbspark { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 20px 0 22px; }
.dbspark i { flex: 1; height: 100%; border-radius: var(--r); opacity: .5; transform-origin: bottom; animation: eqbar 1.5s ease-in-out infinite alternate; }
.dbcard.b .dbspark i { background: var(--b); }
.dbcard.a .dbspark i { background: var(--a); }
@keyframes eqbar { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
.dblist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.dblist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.dblist li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.dbcard.b .dblist li svg { color: var(--b); }
.dbcard.a .dblist li svg { color: var(--a); }
@media (max-width: 820px) { .dbduo { grid-template-columns: 1fr; } }

/* System-Ablauf im DB-Panel (4 Stufen mit fließender Linie) */
.dbflow { margin-top: 22px; }
.dbstep { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 20px; }
.dbstep:last-child { padding-bottom: 0; }
.dbstep::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; background: var(--line); border-radius: var(--r); }
.dbstep:last-child::before { display: none; }
.dbcard.b .dbstep::before { background: linear-gradient(to bottom, var(--b) 0%, var(--b-tint-2) 45%, var(--b-tint-2) 100%); background-size: 100% 220%; animation: flowdown 2.4s linear infinite; }
.dbcard.a .dbstep::before { background: linear-gradient(to bottom, var(--a) 0%, var(--a-tint-2) 45%, var(--a-tint-2) 100%); background-size: 100% 220%; animation: flowdown 2.4s linear infinite; }
@keyframes flowdown { from { background-position: 0 -110%; } to { background-position: 0 110%; } }
.ds-ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; z-index: 1; }
.dbcard.b .ds-ic { background: var(--b-tint); color: var(--b-ink); }
.dbcard.a .ds-ic { background: var(--a-tint); color: var(--a-ink); }
.ds-ic svg { width: 20px; height: 20px; }
.ds-t { font-weight: 700; font-size: 14px; letter-spacing: -.005em; padding-top: 8px; }
.ds-d { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }

/* ---------- Garantie zweispaltig (Personal + Anfragen) ---------- */
/* Erfolgsgarantie */
.guarantee { position: relative; overflow: hidden; background: linear-gradient(140deg, #c9302e 0%, #a81f1f 52%, #7e1919 100%); color: #fff; border-radius: var(--r); padding: 34px 44px; display: flex; align-items: center; gap: 40px; text-align: left; }
.guarantee::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 360px at 88% -30%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.guarantee > * { position: relative; }
.g-shield { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); width: 190px; height: auto; color: #fff; opacity: .1; z-index: 0; }
.g-head { max-width: none; margin: 0; flex: 1; }
.g-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); color: #fff; font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: var(--r); }
.g-badge svg { width: 14px; height: 14px; }
.guarantee h2 { font-size: clamp(23px,2.4vw,30px); letter-spacing: -.02em; line-height: 1.16; margin: 14px 0 0; }
.g-head p { color: rgba(255,255,255,.88); font-size: 15.5px; margin: 12px 0 0; max-width: 640px; line-height: 1.58; }
@media (max-width: 860px) {
  .guarantee { padding: 44px 24px; }
  .g-shield { width: 200px; right: -30px; bottom: -30px; }
}
@media (max-width: 560px) { .videos { grid-template-columns: 1fr; } }

/* ============================================================
   BENTO GRID + VISUALISIERUNGEN
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(178px, auto); gap: 14px; }
.tile {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tile.c2 { grid-column: span 2; }
.tile.r2 { grid-row: span 2; }
.tile.dark { background: var(--ink); color: #fff; border-color: transparent; }
.tile.asoft { background: var(--a-wash); border-color: #efe7e0; }
.tile.bsoft { background: var(--b-wash); border-color: #e2ece9; }
.tile.rsoft { background: var(--red-wash); border-color: #f3ddd6; }
.tile .t-lab { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tile.dark .t-lab { color: #e0776f; }
.tile.bsoft .t-lab { color: var(--b-ink); }
.tile.asoft .t-lab { color: var(--a-ink); }
.tile.rsoft .t-lab { color: var(--red-ink); }
.tile h3 { font-size: 20px; font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.tile.c2.r2 h3 { font-size: 26px; }
.tile p { color: var(--muted); font-size: 14px; margin: 0; }
.tile.dark p { color: #aab0be; }
.tile .t-viz { margin-top: auto; padding-top: 16px; }
.tile .t-big { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px,4.4vw,50px); line-height: .98; letter-spacing: -.035em; }
.tile.asoft .t-big { color: var(--a-ink); }
.tile.bsoft .t-big { color: var(--b-ink); }
.tile.rsoft .t-big { color: var(--red-ink); }
.tile.rsoft .spread .src { background: #fff; }
.tile .t-big small { font-size: .34em; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.tile.dark .t-big small { color: #aab0be; }

/* spread: 1 -> N (Mehrfachverkauf / Exklusiv) */
.spread { display: flex; align-items: center; gap: 12px; }
.spread .src { width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.tile.asoft .spread .src, .tile.bsoft .spread .src { background: #fff; }
.spread .src svg { width: 22px; height: 22px; }
.spread .arr { flex: 0 0 auto; opacity: .5; }
.spread .arr svg { width: 20px; height: 20px; }
.spread .tgts { display: flex; gap: 7px; flex-wrap: wrap; }
.spread .st {
  width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center;
  font-weight: 700; font-size: 13px; opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
}
[data-reveal].in .spread .st { opacity: 1; transform: none; }
.spread .st:nth-child(1){ transition-delay:.05s } .spread .st:nth-child(2){ transition-delay:.13s }
.spread .st:nth-child(3){ transition-delay:.21s } .spread .st:nth-child(4){ transition-delay:.29s }
.spread .st:nth-child(5){ transition-delay:.37s }
.spread .st.bad { background: rgba(202,40,40,.16); color: #e0776f; }
.tile:not(.dark) .spread .st.bad { background: #f3c7c7; color: #a81f22; }
.spread .st.win { background: var(--ok); color: #fff; }
.spread .st.off { background: rgba(255,255,255,.07); color: #6a707d; }
.tile:not(.dark) .spread .st.off { background: var(--paper-2); color: var(--muted-2); }

/* bigger spread inside the large tile */
.tile.c2.r2 .spread .src { width: 50px; height: 50px; }
.tile.c2.r2 .spread .st { width: 40px; height: 40px; font-size: 15px; border-radius: var(--r); }

/* bars (Monate) */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 60px; }
.bars .bar { flex: 1; height: 0; border-radius: var(--r); background: var(--b-tint-2); transition: height .7s cubic-bezier(.2,.7,.2,1); align-self: flex-end; }
.bars .bar.hot { background: var(--b); }
.bars.red .bar { background: var(--red-tint-2); }
.bars.red .bar.hot { background: var(--red); }
[data-reveal].in .bars .bar { height: var(--h); }
.bars .bar:nth-child(2){ transition-delay:.08s } .bars .bar:nth-child(3){ transition-delay:.16s } .bars .bar:nth-child(4){ transition-delay:.24s }
.bars-lab { display: flex; gap: 8px; margin-top: 7px; }
.bars-lab span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }

/* funnel (Bewerbungen -> passend) */
.funnel { display: grid; gap: 7px; }
.funnel .fb {
  height: 30px; border-radius: var(--r); display: flex; align-items: center; padding: 0 12px; gap: 8px;
  background: var(--b-tint); color: var(--b-ink); font-weight: 700; font-size: 13px;
  width: 0; overflow: hidden; white-space: nowrap; transition: width .7s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in .funnel .fb { width: var(--w); }
.funnel .fb:nth-child(2){ transition-delay:.1s; background:var(--b-tint-2) } .funnel .fb:nth-child(3){ transition-delay:.2s; background:#f3c7c7; color:#a81f22 }
.funnel .fb b { font-family: var(--f-display); font-size: 15px; }
.funnel.red .fb { background: var(--red-tint); color: var(--red-ink); }
.funnel.red .fb:nth-child(2){ background: var(--red-tint-2); }
.funnel.red .fb:nth-child(3){ background: var(--red); color: #fff; }

/* meter (Prozent) */
.meter { height: 10px; border-radius: var(--r); background: var(--paper-2); overflow: hidden; }
.tile.dark .meter { background: rgba(255,255,255,.12); }
.meter i { display: block; height: 100%; width: 0; border-radius: var(--r); background: linear-gradient(90deg, var(--b), #dd6a63); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.meter.a i { background: linear-gradient(90deg, var(--a), #ef9a9a); }
[data-reveal].in .meter i { width: var(--w); }

/* toggle (2-in-1) */
.toggle2 { display: inline-flex; align-items: center; gap: 0; background: var(--paper); border-radius: var(--r); padding: 5px; position: relative; font-weight: 700; font-size: 13px; }
.tile.dark .toggle2 { background: rgba(255,255,255,.08); }
.toggle2 span { padding: 8px 16px; border-radius: var(--r); z-index: 1; color: var(--muted); transition: color .4s; }
.tile.dark .toggle2 span { color: #aab0be; }
.toggle2 .knob { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: var(--r); background: var(--a); z-index: 0; animation: knobslide 3.4s ease-in-out infinite; }
.toggle2 span.l { color: #fff; }
@keyframes knobslide {
  0%,42% { left: 5px; background: var(--a); }
  50%,92% { left: calc(50% ); background: var(--b); }
  100% { left: 5px; background: var(--a); }
}

/* =========================================================
   Vorteile — EINHEITLICHE Schaubild-Sprache
   Zwei Primitive: Balken (.v-bar/.v-seg/.v-steps) + Nodes (.v-flow/.v-swap)
   Ruhig, dünn, ein Akzent pro Card, animiert beim Scrollen.
   ========================================================= */

/* Gemeinsame Label-Zeile unter jedem Schaubild */
.v-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tile.dark .v-cap { color: #8891a8; }
.v-cap .on { color: var(--b-ink); }
.tile.asoft .v-cap .on { color: var(--a-ink); }

/* Balken-Primitiv (30 Tage, Warm statt kalt) */
.v-bar { position: relative; height: 8px; border-radius: var(--r); background: rgba(7,11,43,.10); overflow: hidden; }
.tile.dark .v-bar { background: rgba(255,255,255,.14); }
.v-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r); background: var(--b); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.v-bar.a > i { background: var(--a); }
[data-reveal].in .v-bar > i { width: var(--w, 100%); }

/* Segment-Balken (Exklusiv: 1 belegt, Rest leer) */
.v-seg { display: flex; gap: 6px; }
.v-seg span { flex: 1; height: 8px; border-radius: var(--r); background: rgba(7,11,43,.09); }
.tile.dark .v-seg span { background: rgba(255,255,255,.14); }
.v-seg span.on { background: var(--a); transform-origin: left; }
[data-reveal].in .v-seg span.on { animation: v-segpop .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes v-segpop { from { transform: scaleX(.35); opacity: .3 } to { transform: none; opacity: 1 } }

/* Schritt-Reihe (Anfragen: 3 Schritte) */
.v-steps { display: flex; align-items: flex-start; }
.v-steps .st { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 84px; }
.v-steps .st .nd { width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; background: var(--canvas); border: 2px solid var(--a-tint-2); color: var(--a); opacity: .5; transition: all .4s ease; }
.v-steps .st .nd svg { width: 15px; height: 15px; }
.v-steps .st small { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.25; }
.v-steps .ln { flex: 1; height: 2px; background: var(--a-tint-2); margin-top: 13px; transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
[data-reveal].in .v-steps .st .nd { opacity: 1; background: var(--a); border-color: var(--a); color: #fff; }
[data-reveal].in .v-steps .st:nth-child(1) .nd { transition-delay: .1s }
[data-reveal].in .v-steps .st:nth-child(3) .nd { transition-delay: .45s }
[data-reveal].in .v-steps .st:nth-child(5) .nd { transition-delay: .8s }
[data-reveal].in .v-steps .ln { transform: scaleX(1); }
.v-steps .ln:nth-child(4) { transition-delay: .35s }

/* Node-Diagramm (Hero) */
.v-flow { width: 100%; height: auto; display: block; max-width: 400px; }
.v-flow .ln { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1s ease .2s; }
[data-reveal].in .v-flow .ln { stroke-dashoffset: 0; }

/* Nachbesetzung: zwei Nodes + Pfeil */
.v-swap { display: flex; align-items: center; gap: 13px; }
.v-node { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--canvas); font-size: 13px; font-weight: 700; color: var(--muted); }
.v-node svg { width: 17px; height: 17px; flex: 0 0 auto; }
.v-node.done { background: var(--b); border-color: var(--b); color: #fff; }
.v-swap .arr { color: var(--muted-2); flex: 0 0 auto; }
.v-swap .arr svg { width: 18px; height: 18px; display: block; }
.v-swap .tag { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--b-ink); }

/* Hero-Badges (ruhig) */
.vbadge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #aeb4c6; }
.vbadge svg { width: 14px; height: 14px; flex: 0 0 auto; color: #dd6a63; }

/* pulse dots (echtzeit) */
.dotgrid { display: flex; gap: 6px; flex-wrap: wrap; }
.dotgrid i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); opacity: .25; animation: dotpulse 1.8s infinite; }
.dotgrid i:nth-child(3n){ animation-delay:.3s } .dotgrid i:nth-child(3n+1){ animation-delay:.7s }
@keyframes dotpulse { 0%,100%{opacity:.22} 50%{opacity:1} }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 168px; }
  .tile.c2 { grid-column: span 2; }
  .tile.r2 { grid-row: span 1; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .tile.c2, .tile.r2 { grid-column: span 1; grid-row: span 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .phero-grid { grid-template-columns: 1fr; }
  .market { grid-template-columns: 1fr; }
  .filters { position: static; }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .steps, .duo, .price-grid, .feat-grid, .footer .cols { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cta { padding: 34px 22px; }
  .promo { padding: 28px; }
  .card-lead { grid-template-columns: 44px 1fr; }
  .card-lead .right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .pad { padding: 64px 0; }
}


/* ================= Presse-Vorschau ================= */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.press-card { display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.press-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.press-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.press-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.press-card:hover .press-img img { transform: scale(1.05); }
.press-body { display: flex; flex-direction: column; padding: 26px 28px 28px; flex: 1; }
.press-logo { height: 22px; width: auto; max-width: 78%; object-fit: contain; object-position: left center; margin-bottom: 18px; }
.press-card .kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--a-ink); margin: 0 0 10px; }
.press-card .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a); }
.press-card h3 { font-size: 19px; line-height: 1.32; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink); }
.press-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.press-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r); font-weight: 600; font-size: 13.5px; color: var(--ink); transition: background .15s ease, border-color .15s ease; }
.press-link:hover { background: var(--paper); border-color: var(--muted-2); }
.press-link .arrow { color: var(--a); transition: transform .2s ease; }
.press-link:hover .arrow { transform: translateX(3px); }
@media (max-width: 860px) { .press-grid { grid-template-columns: 1fr; } }

/* ================= Google-Bewertungen (Karussell) ================= */
.rv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.rv-score { display: flex; align-items: center; gap: 14px; }
.rv-score .num { font-family: var(--f-display); font-weight: 700; font-size: 46px; line-height: 1; color: var(--ink); }
.rv-score .meta { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.rv-stars { color: #f5a623; letter-spacing: 1px; }
.rv-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rv-card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.rv-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.rv-left { display: inline-flex; align-items: center; gap: 9px; }
.rv-verified { display: inline-flex; align-items: center; gap: 5px; background: #e9f7ee; color: #12813c; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--r); }
.rv-verified svg { width: 13px; height: 13px; }
.rv-g { width: 22px; height: 22px; display: block; }
.rv-card-top .rv-stars { font-size: 15px; }
.rv-text { color: var(--ink); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; }
.rv-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rv-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px; flex: 0 0 auto; background: var(--b); }
.rv-card:nth-child(3n+2) .rv-avatar { background: var(--a); }
.rv-card:nth-child(3n) .rv-avatar { background: var(--ink); }
.rv-name { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.25; }
.rv-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rv-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.rv-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--canvas); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, border-color .15s ease; }
.rv-nav button:hover { background: var(--paper); border-color: var(--ink); }
.rv-nav button svg { width: 20px; height: 20px; color: var(--ink); }
.rv-hidden { display: none; }
.rv-track.rv-open .rv-hidden { display: flex; }
.rv-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.rv-more { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--a-ink); font-weight: 700; font-size: 15px; padding: 4px 2px; cursor: pointer; text-decoration: none; transition: color .15s ease; }
.rv-more:hover { color: var(--a); }
.rv-more svg { width: 18px; height: 18px; transition: transform .2s ease; }
.rv-more.open svg { transform: rotate(180deg); }
@media (max-width: 900px) { .rv-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rv-track { grid-template-columns: 1fr; } .rv-score .num { font-size: 38px; } }


/* Viz-Varianten fuer die Personal-Unterseite (blau) */
.v-seg.b span.on { background: var(--b); }
.v-steps.b .st .nd { border-color: var(--b-tint-2); color: var(--b); }
[data-reveal].in .v-steps.b .st .nd { background: var(--b); border-color: var(--b); color: #fff; }
.v-steps.b .ln { background: var(--b-tint-2); }


/* ============ Pool-Visual (Unterseiten) ============ */
.pool2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: stretch; }
.pool2-viz { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--r); padding: 26px 28px; display: flex; flex-direction: column; }
.pool2-viz::before { content:""; position:absolute; inset:0; background: radial-gradient(440px 280px at 82% 8%, rgba(193,42,42,.22), transparent 60%); pointer-events:none; }
.pool2-viz.a::before { background: radial-gradient(440px 280px at 82% 8%, rgba(202,40,40,.22), transparent 60%); }
.pool2-viz > * { position: relative; }
.poolcloud { display: grid; grid-template-columns: repeat(16, 1fr); gap: 9px; margin: 20px 0 16px; }
.poolcloud i { width: 100%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.09); }
.poolcloud i.on { background: #dd6a63; animation: cloudpulse 2.2s ease-in-out infinite; }
.pool2-viz.a .poolcloud i.on { background: #dd6a63; }
@keyframes cloudpulse { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.35); opacity: 1 } }
.poolcloud i.on:nth-of-type(3n) { animation-delay: .5s } .poolcloud i.on:nth-of-type(4n) { animation-delay: 1.05s } .poolcloud i.on:nth-of-type(5n) { animation-delay: 1.5s }
.pool2-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: #aab0be; margin-bottom: auto; }
.pool2-legend .ll { display: inline-flex; align-items: center; gap: 7px; }
.pool2-legend .d { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.pool2-legend .d.on { background: #dd6a63; }
.pool2-viz.a .pool2-legend .d.on { background: #dd6a63; }
.pool2-stat { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
.pool2-stat .num { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px,4.6vw,50px); letter-spacing: -.03em; line-height: 1; }
.pool2-stat .lbl { font-size: 13.5px; color: #aab0be; font-weight: 600; }
.pool2-flow { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; display: flex; align-items: center; }
@media (max-width: 880px) { .pool2 { grid-template-columns: 1fr; } }


/* ============ KI-Radar (Pool-Visual) ============ */
.radar { position: relative; width: 100%; max-width: 290px; aspect-ratio: 1; margin: 16px auto 4px; }
.radar-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.radar-svg .rr { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1; }
.radar-svg .cx { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.radar-svg .pdot { fill: rgba(255,255,255,.15); }
.radar-svg .hub { fill: rgba(255,255,255,.55); }
.radar-svg .blip { fill: #dd6a63; transform-box: fill-box; transform-origin: center; animation: radblip 2.6s ease-in-out infinite; }
.radar.a .radar-svg .blip { fill: #dd6a63; }
@keyframes radblip { 0%,100% { opacity: .3; transform: scale(.65) } 45% { opacity: 1; transform: scale(1.4) } }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(193,42,42,.30), rgba(193,42,42,.05) 34deg, transparent 74deg, transparent); animation: radspin 4.6s linear infinite; }
.radar.a .radar-sweep { background: conic-gradient(from 0deg, rgba(193,42,42,.30), rgba(193,42,42,.05) 34deg, transparent 74deg, transparent); }
@keyframes radspin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .radar-sweep { animation: none } .radar-svg .blip { animation: none; opacity: .9 } }
.radar-cap { text-align: center; margin-top: 6px; }
.radar-cap .rn { font-family: var(--f-display); font-weight: 700; font-size: 27px; letter-spacing: -.02em; color: #fff; }
.radar-cap .rn small { font-family: var(--f-body); font-weight: 600; font-size: 13px; color: #aab0be; letter-spacing: 0; margin-left: 7px; }
.radar-cap .rl { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; font-weight: 600; color: #aab0be; }
.radar-cap .rl .d { width: 9px; height: 9px; border-radius: 50%; background: #dd6a63; box-shadow: 0 0 0 4px rgba(193,42,42,.18); flex: 0 0 auto; }
.pool2-viz.a .radar-cap .rl .d { background: #dd6a63; box-shadow: 0 0 0 4px rgba(193,42,42,.18); }


/* ============ Live-Filter (Pool-Visual) ============ */
.lf { position: relative; height: 208px; margin: 16px 0 4px; }
.lf-cloud { position: absolute; left: 0; top: 4%; width: 33%; height: 92%; }
.lf-cloud i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.14); }
.lf-tag { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #8891a8; top: 50%; transform: translateY(-50%); }
.lf-tag-l { left: 2px; }
.lf-gate { position: absolute; left: 50%; top: 8%; bottom: 8%; border-left: 1.5px dashed rgba(255,255,255,.18); }
.lf-gate .chip { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); background: rgba(193,42,42,.16); border: 1px solid rgba(193,42,42,.55); color: #f0cccc; font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--r); white-space: nowrap; }
.lf.a .lf-gate .chip { background: rgba(193,42,42,.16); border-color: rgba(193,42,42,.55); color: #ffd6cd; }
.lf-node { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; padding: 9px 13px; border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.lf .p { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); animation: lfReject 5s linear infinite; }
.lf .p.pass { background: #dd6a63; box-shadow: 0 0 9px rgba(193,42,42,.7); animation: lfPass 5s linear infinite; }
.lf.a .p.pass { background: #dd6a63; box-shadow: 0 0 9px rgba(193,42,42,.7); }
@keyframes lfReject { 0% { left: 3%; opacity: 0; transform: scale(.8) } 14% { opacity: .5 } 44% { left: 45%; opacity: .5; transform: scale(1) } 55% { left: 50%; opacity: 0; transform: scale(.3) } 100% { left: 50%; opacity: 0 } }
@keyframes lfPass { 0% { left: 3%; opacity: 0; transform: scale(.8) } 14% { opacity: .5 } 50% { left: 50%; opacity: .9; transform: scale(1) } 86% { left: 82%; opacity: 1 } 100% { left: 82%; opacity: 0; transform: scale(.6) } }
@media (prefers-reduced-motion: reduce) { .lf .p { animation: none; opacity: .8 } .lf .p:not(.pass) { display: none } .lf .p.pass { left: 66% } }


/* ============ Kandidaten-Match (Mitarbeitergewinnung) ============ */
.match2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 40px 0; }
.m2 { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; display: flex; flex-direction: column; }
.m2.emo { border-color: transparent; box-shadow: var(--shadow); background: var(--b-wash); }
.m2-h { font-weight: 700; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.m2.cond .m2-h { color: var(--muted); }
.m2 .tagx { font-size: 11px; font-weight: 700; color: var(--b-ink); background: var(--b-tint); padding: 4px 9px; border-radius: var(--r); }
.m2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.m2-chips span { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: var(--r); }
.m2.cond .m2-chips span { background: var(--paper); color: var(--muted); }
.m2.emo .m2-chips span { background: #fff; color: var(--b-ink); box-shadow: var(--shadow-sm); }
.m2-res { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; margin-top: auto; }
.m2-res svg { width: 18px; height: 18px; flex: 0 0 auto; }
.m2-res.bad { color: var(--a-ink); } .m2-res.bad svg { color: var(--a); }
.m2-res.good { color: var(--b-ink); } .m2-res.good svg { color: var(--b); }

.cand-lead { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--b-ink); margin: 0 0 16px; }
.cand-lead .pulse { position: static; }
.cand-feed { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.candc { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 20px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.candc:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.candc-top { display: flex; align-items: center; gap: 12px; }
.candc-av { width: 44px; height: 44px; border-radius: var(--r); background: var(--b-tint); color: var(--b-ink); display: grid; place-items: center; flex: 0 0 auto; }
.candc-av svg { width: 24px; height: 24px; }
.candc-role { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.2; }
.candc-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.candc-match { margin-left: auto; text-align: right; font-family: var(--f-display); font-weight: 700; font-size: 23px; color: var(--b-ink); line-height: 1; }
.candc-match small { display: block; font-family: var(--f-body); font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .05em; margin-top: 3px; }
.candc-reason { margin: 18px 0 12px; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.candc-reason svg { width: 16px; height: 16px; color: var(--b); flex: 0 0 auto; }
.candc-reason b { color: var(--b-ink); }
.candc-bar { height: 6px; border-radius: var(--r); background: var(--paper-2); overflow: hidden; }
.candc-bar i { display: block; height: 100%; width: 0; background: var(--b); border-radius: var(--r); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in .candc-bar i { width: var(--w); }
.candc-status { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.candc-status svg { width: 15px; height: 15px; color: var(--ok); flex: 0 0 auto; }
@media (max-width: 880px) { .match2, .cand-feed { grid-template-columns: 1fr; } }


/* ============ KI-Analyse / Wechseltrigger (Mitarbeitergewinnung) ============ */
.ki2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: center; }
.ki-scan { background: var(--ink); color: #fff; border-radius: var(--r); padding: 26px 28px; position: relative; overflow: hidden; }
.ki-scan::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 85% 0%, rgba(193,42,42,.22), transparent 60%); pointer-events: none; }
.ki-scan > * { position: relative; }
.ki-scan-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #aab0be; text-transform: uppercase; }
.ki-scan-role { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin: 14px 0 16px; }
.ki-scan-role svg { width: 20px; height: 20px; color: #dd6a63; }
.ki-steps { display: flex; flex-direction: column; gap: 4px; }
.ki-step { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #cfd3db; padding: 9px 2px; opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; }
.ki-step svg { width: 17px; height: 17px; color: #dd6a63; flex: 0 0 auto; }
[data-reveal].in .ki-step { opacity: 1; transform: none; }
[data-reveal].in .ki-step:nth-child(1){transition-delay:.15s}[data-reveal].in .ki-step:nth-child(2){transition-delay:.5s}[data-reveal].in .ki-step:nth-child(3){transition-delay:.85s}[data-reveal].in .ki-step:nth-child(4){transition-delay:1.2s}[data-reveal].in .ki-step:nth-child(5){transition-delay:1.6s}
.ki-step.trigger { color: #fff; background: rgba(193,42,42,.16); border-radius: var(--r); padding: 10px 12px; font-weight: 700; }
.ki-step.trigger svg { color: #dd6a63; }
.ki-scan-res { margin-top: 18px; }
.ki-res-bar { height: 8px; border-radius: var(--r); background: rgba(255,255,255,.12); overflow: hidden; }
.ki-res-bar i { display: block; height: 100%; width: 0; background: #dd6a63; border-radius: var(--r); transition: width 1.2s cubic-bezier(.2,.7,.2,1) 1.9s; }
[data-reveal].in .ki-res-bar i { width: var(--w); }
.ki-res-lab { margin-top: 11px; font-size: 13.5px; color: #cfd3db; }
.ki-res-lab b { color: #fff; }
.ki-side h3 { font-size: clamp(19px,2vw,22px); letter-spacing: -.01em; margin: 0 0 20px; }
.ki-sig { display: grid; gap: 15px; }
.sig { display: flex; gap: 14px; align-items: flex-start; }
.sig-ic { width: 42px; height: 42px; border-radius: var(--r); background: var(--b-tint); color: var(--b-ink); display: grid; place-items: center; flex: 0 0 auto; }
.sig-ic svg { width: 22px; height: 22px; }
.sig b { font-size: 14.5px; color: var(--ink); display: block; }
.sig span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ki-note { margin-top: 22px; font-size: 13.5px; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; }
.ki-note b { color: var(--b-ink); }
@media (max-width: 880px) { .ki2 { grid-template-columns: 1fr; } }


/* ============ Kundenlogos — Auto-Marquee (grabosch-Style) ============ */
.press-strip { padding: 34px 0 40px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.press-strip-h { text-align: center; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin: 0 0 26px; }
.press-strip-h strong { color: var(--a-ink); font-weight: 800; }
.press-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 54px; }
.press-logos img { height: 26px; width: auto; filter: grayscale(1) brightness(.35); opacity: .62; transition: opacity .2s ease; }
.press-logos img.pl-bv { height: 40px; }
.press-logos img:hover { opacity: .9; }
@media (max-width: 640px) { .press-logos { gap: 26px 32px; } .press-logos img { height: 21px; } .press-logos img.pl-bv { height: 32px; } }

.logos-grid-sec { padding: 56px 0 60px; background: var(--paper); }
.logos-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 1080px; margin: 0 auto; }
.logos-grid .lg { display: flex; align-items: center; justify-content: center; height: 96px; background: #fff; padding: 12px; }
.logos-grid img { max-height: 52px; max-width: 128px; width: auto; object-fit: contain; }
@media (max-width: 820px) { .logos-grid { grid-template-columns: repeat(4, 1fr); } .logos-grid .lg { height: 80px; } .logos-grid img { max-height: 40px; max-width: 100px; } }
@media (max-width: 460px) { .logos-grid { grid-template-columns: repeat(3, 1fr); } }
.sec-head.center.faqc { text-align: center; margin-left: auto; margin-right: auto; }

.logos-mq { padding: 54px 0 58px; background: var(--paper); overflow: hidden; }
.logos-mq-h { text-align: center; color: var(--muted-2); font-weight: 500; font-size: 14.5px; letter-spacing: .01em; line-height: 1.3; margin: 0 auto 34px; max-width: none; padding: 0 20px; }
.marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee + .marquee { margin-top: 30px; }
.mq-track { display: flex; align-items: center; gap: 62px; width: max-content; animation: mqscroll 44s linear infinite; will-change: transform; }
.mq-track.rev { animation-direction: reverse; animation-duration: 52s; }
@keyframes mqscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-track .lg { display: flex; align-items: center; justify-content: center; height: 60px; padding: 8px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); flex: 0 0 auto; }
.mq-track img { height: 38px; max-width: 130px; width: auto; object-fit: contain; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }
@media (max-width: 640px) { .mq-track { gap: 42px; } .mq-track img { height: 28px; } .logos-mq { padding: 42px 0; } }


/* =================================================================
   PREMIUM-PASS — Ruhe, EIN Akzent (Rot), weniger Gimmick
   ================================================================= */
/* getönte Kacheln -> neutral, Akzent nur auf Label/Zahl */
.tile.asoft, .tile.bsoft, .tile.rsoft { background: var(--canvas); border-color: var(--line); }
.tile.asoft .t-lab, .tile.bsoft .t-lab { color: var(--muted); }
.tile.rsoft .t-lab { color: var(--a-ink); }
.tile.asoft .t-big, .tile.bsoft .t-big { color: var(--ink); }
.tile.rsoft .t-big { color: var(--a-ink); }

/* Vorteile: emotionales Panel + Chips neutral */
.m2.emo { background: var(--canvas); box-shadow: none; border: 1px solid var(--line); }
.m2.emo .m2-chips span { background: var(--paper); color: var(--muted); box-shadow: none; }
.m2 .tagx { background: var(--a-tint); color: var(--a-ink); }

/* Tags/Chips generell neutral-grau */
.tag { background: var(--paper); color: var(--muted); }

/* Hero-/Split-Akzente auf einen Akzent */
.split-b { box-shadow: inset 3px 0 0 var(--a); }
.split-a .k, .split-b .k { color: #dd6a63; }

/* Gimmick-Animationen stilllegen (ruhige Reveals bleiben) */
.pulse, .dotgrid i, .toggle2 .knob, .gauge .pin,
.radar-sweep, .poolcloud i.on, .radar-svg .blip, .lf .p { animation: none !important; }
.pulse { box-shadow: none; }

/* Section-Header editorial: linksbündig, mehr Luft */
.sec-head.center { text-align: left; margin-left: 0; margin-right: 0; }
.sec-head { margin-bottom: 44px; }


/* ruhiges Pool-Panel (statt Radar/Partikel) */
.pool2-num { font-family: var(--f-display); font-weight: 800; font-size: clamp(46px,7vw,72px); letter-spacing: -.035em; line-height: 1; margin-top: auto; color: #fff; }
.pool2-num .plus { color: #dd6a63; }
.pool2-sub { font-size: 14.5px; line-height: 1.55; color: #aab0be; margin-top: 16px; max-width: 34ch; }


/* ============ Bento-Visuals — edel, dünn, ein Akzent ============ */
.pv { margin-top: 20px; }
.pv svg { width: 100%; max-width: 244px; height: auto; display: block; }
.pv .dl { stroke: rgba(10,14,32,.16); }
.pv .df { fill: rgba(10,14,32,.12); }
.pv .al { stroke: var(--a); }
.pv .af { fill: var(--a); }
.tile.dark .pv .dl { stroke: rgba(255,255,255,.20); }
.tile.dark .pv .df { fill: rgba(255,255,255,.16); }
.pv-lab { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; font-size: 11.5px; font-weight: 600; color: var(--muted); max-width: 244px; }
.tile.dark .pv-lab { color: #8891a8; }
.pv-lab .a { color: var(--a-ink); }
.tile.dark .pv-lab .a { color: #dd6a63; }


/* ============ Waage / Gleichgewicht (Startseite) ============ */
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.balance-text h2 { font-size: clamp(28px,3.4vw,42px); letter-spacing: -.03em; line-height: 1.12; margin: 0; }
.balance-text p { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin-top: 20px; }
.balance-text .balance-lead { color: var(--ink); font-weight: 600; }
.balance-text .btn { margin-top: 30px; }
.scale-panel { position: relative; overflow: hidden; background: var(--ink); border-radius: var(--r); padding: 26px 28px 22px; box-shadow: 0 30px 60px -32px rgba(10,14,32,.55); }
.scale-panel::before { content:""; position:absolute; inset:0; background: radial-gradient(460px 300px at 82% 6%, rgba(22,163,74,.18), transparent 60%); pointer-events:none; }
.gw { position: relative; }
.gwc-svg { display: block; width: 100%; height: auto; }
.gwc-svg text { font-family: var(--f-body); }
.gw-cap { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; color: #22b357; font-weight: 700; font-size: 14.5px; }
.gw-cap svg { width: 17px; height: 17px; }
/* Basiszustand = fertig gewachsen (auch ohne JS/Bewegung sichtbar) */
.gwc-mark, .gw-cap { opacity: 1; }
/* Linien-Zeichnung + mitlaufende Badges steuert JS (initGrowthChart), langsam & synchron */
[data-reveal].in .gwc-mark   { animation: gw-fadein 5.5s ease forwards; }
[data-reveal].in .gw-cap     { animation: gw-capin 5.5s ease forwards; }
@keyframes gw-fadein  { 0%,52%{opacity:0} 82%,100%{opacity:1} }
@keyframes gw-capin   { 0%,74%{opacity:0; transform:translateY(6px)} 100%{opacity:1; transform:translateY(0)} }
@media (max-width: 880px) { .balance { grid-template-columns: 1fr; gap: 34px; } }


/* ============ Gewerke-Grid (Startseite) ============ */
.gew-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Branchen: links Text, rechts wechselndes 3x2-Grid mit Icon-Cards */
.gew-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 46px; align-items: center; }
.gew-text h2 { font-size: clamp(25px,2.7vw,36px); letter-spacing: -.02em; line-height: 1.16; margin: 0; }
.gew-text p { color: var(--muted); font-size: 16px; line-height: 1.62; margin-top: 16px; }
.gew-text .gew-more-note { color: var(--ink); font-weight: 600; font-size: 15px; margin-top: 14px; }
.gew-cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.gew-cycle .gew { aspect-ratio: 3 / 4; }
.gew-img.nxt { opacity: 0; }
.gew-fade { position: absolute; inset: 0; z-index: 3; background: #0a0e20; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.gew-cycle .gew-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px; }
.gew-ic { width: 44px; height: 44px; border-radius: var(--r); background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); transition: opacity .3s ease; }
.gew-ic svg { width: 24px; height: 24px; color: var(--ink); }
.gew-cycle .gew-name { font-size: clamp(15px,1.4vw,19px); font-weight: 500; letter-spacing: 0; transition: opacity .3s ease; }
@media (max-width: 900px) { .gew-split { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 620px) { .gew-cycle { grid-template-columns: repeat(2, 1fr); } }
.gew { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; color: #fff; background: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; transition: transform .2s ease, box-shadow .2s ease; }
.gew:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gew img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.gew:hover img { transform: scale(1.06); }
.gew-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,32,.05) 0%, rgba(10,14,32,.45) 52%, rgba(10,14,32,.88) 100%); }
.gew-cap { position: relative; z-index: 1; padding: 16px 16px 15px; }
.gew-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.gew-sub { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.72); }
.gew.more { background: var(--a); color: #fff; align-items: flex-start; justify-content: center; gap: 8px; padding: 20px; }
.gew.more .gew-plus { font-family: var(--f-display); font-weight: 800; font-size: 40px; line-height: 1; }
.gew.more h3 { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25; margin: 0; }
@media (max-width: 900px) { .gew-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gew-grid { grid-template-columns: repeat(2, 1fr); } }

/* Waage statisch, kein Kippen */
.scale-svg .beam { transform: none !important; transition: none !important; }

/* Kein Hover-Zoom / kein Anheben auf Cards, Tiles, Bildern (überall) */
.split-card:hover, .route-card:hover, .card-lead:hover, .cat:hover, .feature:hover,
.case:hover, .vid:hover, .tile:hover, .press-card:hover, .candc:hover, .gew:hover,
.case .vid.case-thumb:hover { transform: none !important; }
.cat.has-img:hover .cat-img img, .case:hover .c-img img, .vid:hover .vid-thumb img,
.vid:hover .vid-play, .press-card:hover .press-img img, .gew:hover img { transform: none !important; }

/* Kein aufpoppender Hover-Schatten (statisch statt Reaktion) */
.split-card:hover, .card-lead:hover, .cat:hover, .feature:hover, .vid:hover,
.tile:hover, .press-card:hover, .candc:hover, .gew:hover { box-shadow: none !important; border-color: var(--line) !important; }

/* ============ Rechtsseiten (Impressum / AGB / Datenschutz) ============ */
.legal { max-width: 820px; }
.legal h1 { font-size: clamp(30px,4vw,44px); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 10px; }
.legal h2 { font-size: 21px; letter-spacing: -.01em; margin: 36px 0 10px; color: var(--ink); }
.legal h3 { font-size: 16.5px; margin: 22px 0 6px; color: var(--ink); }
.legal p { color: var(--muted); font-size: 15.5px; line-height: 1.72; margin: 0 0 12px; }
.legal ul { margin: 4px 0 16px; padding-left: 20px; }
.legal li { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin-bottom: 5px; }
.legal a { color: var(--a-ink); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal a:hover { color: var(--a); }

/* ============ Empfehlungsprogramm ============ */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ref-card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 5px 22px -16px rgba(10,14,32,.2); }
.ref-img { margin: -26px -26px 18px; aspect-ratio: 16 / 10; overflow: hidden; background: #eef0f4; }
.ref-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-num { font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: var(--a-ink); text-transform: uppercase; margin-bottom: 12px; }
.ref-reward { font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.ref-reward strong { font-weight: 800; }
.ref-total { margin-top: auto; padding-top: 18px; font-weight: 800; font-size: 18px; color: var(--ink); }
.ref-card.ref-hot { background: var(--ink); border-color: var(--ink); }
.ref-hot .ref-num { color: #f0a6a3; }
.ref-hot .ref-reward, .ref-hot .ref-total { color: #fff; }
.ref-use { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 800px; margin: 0 auto; }
.ref-use-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 22px; font-weight: 700; font-size: 16px; color: var(--ink); }
.ref-use-card svg { width: 30px; height: 30px; color: var(--a); }
.ref-note { max-width: 720px; margin: 24px auto 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
.ref-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ref-step { text-align: center; padding: 8px; }
.ref-step-n { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r); background: var(--a-tint); color: var(--a-ink); font-weight: 800; font-size: 20px; margin-bottom: 16px; }
.ref-step h3 { font-size: 18px; margin: 0; letter-spacing: -.01em; color: var(--ink); }
.ref-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--r); padding: 36px 40px; }
.ref-cta h2 { color: #fff; margin: 0; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; }
.ref-cta p { color: #c7cad4; margin: 8px 0 0; }
@media (max-width: 860px) { .ref-grid, .ref-use, .ref-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ref-grid, .ref-use, .ref-steps { grid-template-columns: 1fr; } }

/* ============ Ihr Erstgespräch ============ */
.eg-hero { max-width: 780px; }
.eg-badges { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; }
.eg-badges span { display: inline-flex; align-items: center; gap: 9px; color: #c7cad4; font-weight: 600; font-size: 14.5px; }
.eg-badges svg { width: 18px; height: 18px; color: #22c55e; flex: 0 0 auto; }
.cs { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; margin-top: 18px; box-shadow: 0 5px 22px -16px rgba(10,14,32,.2); }
.cs-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cs-kpis { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 260px; }
.cs-kpi { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cs-kpi strong { color: var(--a); font-weight: 800; font-size: 22px; margin-right: 4px; }
.cs-kpi span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.cs-person { display: flex; flex-direction: column; gap: 3px; text-align: right; min-width: 220px; }
.cs-name { font-weight: 700; color: var(--ink); }
.cs-role { font-size: 13.5px; color: var(--muted); }
.cs-verified { display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; margin-top: 6px; background: #e9f7ee; color: #12813c; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--r); }
.cs-verified svg { width: 13px; height: 13px; }
.cs-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 22px; }
.cs-col h4 { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 12px; }
.cs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-col li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.cs-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.cs-col:last-child li::before { background: #22c55e; }
.eg-tt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tt { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; box-shadow: 0 5px 22px -16px rgba(10,14,32,.2); }
.tt p { color: var(--ink); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.tt-a { margin-top: auto; display: flex; flex-direction: column; }
.tt-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.tt-co { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.eg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.eg-team { display: grid; gap: 14px; }
.eg-member { display: flex; align-items: center; gap: 14px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.eg-av { width: 46px; height: 46px; border-radius: 50%; background: var(--b); color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.eg-member:nth-child(2) .eg-av { background: var(--a); }
.eg-mn { font-weight: 700; color: var(--ink); }
.eg-mr { font-size: 13.5px; color: var(--muted); }
.eg-about { color: var(--muted); font-size: 16.5px; line-height: 1.7; }
@media (max-width: 820px) { .cs-body { grid-template-columns: 1fr; gap: 20px; } .cs-person { text-align: left; } .cs-verified { align-self: flex-start; } .eg-tt { grid-template-columns: repeat(2,1fr); } .eg-split { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) { .eg-tt { grid-template-columns: 1fr; } }

/* Rechtsseiten: nummerierte Absätze */
.legal-intro { color: var(--muted); font-size: 15.5px; margin: 0 0 4px; }
.legal ol.legal-ol { margin: 12px 0 22px; padding-left: 26px; display: grid; gap: 11px; }
.legal ol.legal-ol > li { color: var(--muted); font-size: 15.5px; line-height: 1.7; padding-left: 4px; }
.legal ol.legal-ol > li::marker { color: var(--ink); font-weight: 700; }
.legal ol.legal-ol-a { list-style-type: lower-alpha; margin: 9px 0 4px; padding-left: 22px; display: grid; gap: 7px; }
.legal-sec .legal > p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }

/* Danke-Seiten */
.thanks-sec { padding: 92px 0 100px; }
.thanks { max-width: 620px; margin: 0 auto; text-align: center; }
.thanks-ic { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--a-tint); color: var(--a-ink); margin-bottom: 26px; }
.thanks-ic svg { width: 40px; height: 40px; }
.thanks h1 { font-size: clamp(28px,3.4vw,42px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 16px; }
.thanks p { color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0 auto 30px; max-width: 48ch; }

/* Empfehlung: Hero mit Bild */
.emp-hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 46px; align-items: center; }
.emp-hero-text .hero-tag { margin-bottom: 18px; }
.emp-hero-text h1 { font-size: clamp(30px,3.6vw,46px); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 16px; }
.emp-hero-text p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }
.emp-hero-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; box-shadow: 0 30px 60px -34px rgba(10,14,32,.5); }
@media (max-width: 860px) { .emp-hero { grid-template-columns: 1fr; gap: 28px; } }

/* Erstgespräch: Team-Fotos */
.eg-av { width: 60px; height: 60px; overflow: hidden; }
.eg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Empfehlung: gestapelte Stufen-Reihen */
.ref-rows { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
.ref-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 26px -18px rgba(10,14,32,.22); }
.ref-row-img { min-height: 250px; background: #eef0f4; }
.ref-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-row-body { padding: 34px 40px; display: flex; flex-direction: column; justify-content: center; }
.ref-row.rev .ref-row-img { order: 2; }
.ref-row.rev .ref-row-body { order: 1; }
.ref-row-hot { background: var(--ink); border-color: var(--ink); }
.ref-row-hot .ref-num { color: #f0a6a3; }
.ref-row-hot .ref-reward, .ref-row-hot .ref-total { color: #fff; }
@media (max-width: 760px) { .ref-row, .ref-row.rev { grid-template-columns: 1fr; } .ref-row.rev .ref-row-img { order: 0; } .ref-row.rev .ref-row-body { order: 0; } .ref-row-img { min-height: 200px; } }

/* Erstgespräch: Team-Porträts + Foto-Karussell */
.eg-persons { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.eg-person { margin: 0; width: 300px; max-width: 100%; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 26px -18px rgba(10,14,32,.22); }
.eg-person-img { aspect-ratio: 4 / 5; background: #eef0f4; }
.eg-person-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-person figcaption { padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.eg-pn { font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -.01em; }
.eg-pr { font-size: 14px; color: var(--muted); }
.eg-gal { margin-top: 42px; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.eg-gal-track { display: flex; gap: 16px; width: max-content; animation: mqscroll 60s linear infinite; will-change: transform; }
.eg-gal:hover .eg-gal-track { animation-play-state: paused; }
.eg-gal-track img { height: 240px; width: auto; border-radius: var(--r); object-fit: cover; flex: 0 0 auto; display: block; }
@media (max-width: 600px) { .eg-gal-track img { height: 180px; } }

/* Unterseiten: Section-Header wieder zentriert (Homepage bleibt linksbündig) */
body.sub .sec-head.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ============ Empfehlungsformular (Multi-Step) ============ */
.ff-sec { background: var(--paper); }
.ff { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 40px 44px; box-shadow: 0 20px 60px -34px rgba(10,14,32,.4); }
.ff-head { text-align: center; margin-bottom: 30px; }
.ff-head .hero-tag { margin-bottom: 16px; }
.ff-head h1 { font-size: clamp(24px,3vw,32px); letter-spacing: -.02em; margin: 0 0 22px; }
.ff-prog { height: 8px; background: var(--paper); border-radius: 999px; overflow: hidden; }
.ff-prog-bar { height: 100%; width: 14%; background: var(--a); border-radius: 999px; transition: width .35s ease; }
.ff-count { margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ff-step h2 { font-size: clamp(20px,2.2vw,26px); letter-spacing: -.02em; margin: 0 0 22px; text-align: center; }
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.ff-field span { font-size: 14px; font-weight: 600; color: var(--ink); }
.ff-field input, .ff-field textarea { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--canvas); outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.ff-field input:focus { border-color: var(--a); box-shadow: 0 0 0 4px rgba(193,42,42,.1); }
.ff-hint { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; text-align: center; }
.ff-choices { display: grid; gap: 10px; margin-bottom: 20px; }
.ff-choice { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 15px 18px; cursor: pointer; font-weight: 600; color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.ff-choice:hover { border-color: var(--muted-2); }
.ff-choice input { accent-color: var(--a); width: 18px; height: 18px; }
.ff-choice:has(input:checked) { border-color: var(--a); background: var(--a-tint); }
.ff-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.ff-check input { margin-top: 3px; accent-color: var(--a); width: 16px; height: 16px; flex: 0 0 auto; }
.ff-check a { color: var(--a-ink); text-decoration: underline; }
.ff-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.ff-nav [data-ff-next], .ff-nav [data-ff-submit] { margin-left: auto; }
.ff-err { color: var(--a); font-size: 14px; font-weight: 600; margin: 14px 0 0; text-align: center; }
.ff-done { text-align: center; padding: 16px 0; }
.ff-done-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #16a34a; color: #fff; margin-bottom: 18px; }
.ff-done-ic svg { width: 34px; height: 34px; }
.ff-done h2 { font-size: clamp(24px,3vw,32px); letter-spacing: -.02em; margin: 0 0 12px; }
.ff-done p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0 auto 26px; }
.ff-done-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .ff { padding: 28px 22px; } .ff-row { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }

/* Empfehlung: zusätzliche CTAs */
.ref-row-body .ref-row-cta { align-self: flex-start; margin-top: 20px; }
.ref-steps-cta { display: flex; justify-content: center; margin-top: 40px; }

/* Presse: "Bald verfügbar" statt Link */
.press-soon { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--a-tint); color: var(--a-ink); border: 1px solid var(--a-tint-2); font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 999px; margin-top: 18px; }
.press-soon svg { width: 14px; height: 14px; }