/* ============================================================
   easy.css - Struktur- und Proportionsebene der Startseite
   Sektionsfolge, Kachelgroessen, Textmengen und Abstaende;
   die Designsprache bleibt der bestehende shadcn-Look (heller Grund, Geist,
   .uicard-Widgets, Tuerkis #00aeb5, dunkle Akzentbloecke).
   shadcn.css und bestof.css bleiben unveraendert.
   ============================================================ */

:root{
  /* v7: Inhaltsspalte 1280px (vorher 1180px), aber nie ohne
     Seitenluft. Zwischen 1200 und 1344 bleiben 32px Rand stehen,
     ab 1344 steht die Spalte fest auf 1280px. Pill-Header,
     Foto-Band und die dunklen Bloecke haengen an derselben
     Variablen und skalieren dadurch fluessig mit. */
  --max:min(1280px, calc(100vw - 64px));
  --px-gap:22px;
}

/* ---------- Sektionsrhythmus ---------- */
.px-sect{padding:88px 0}
.px-sect-eng{padding-top:0}
@media(max-width:1100px){.px-sect{padding:84px 0}}
@media(max-width:760px){.px-sect{padding:64px 0}}

.px-head{max-width:800px;margin-bottom:40px}
.px-head.mitte{margin-left:auto;margin-right:auto;text-align:center}
.px-head h2{margin-top:16px}
.px-head .lead{margin-top:16px;font-size:16px;max-width:62ch}
.px-head.mitte .lead{margin-left:auto;margin-right:auto}

/* ---------- Eyebrow mit Trend-Pfeil ---------- */
.px-eyebrow{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.8px;text-transform:uppercase;color:var(--brand-deep);
}
.px-eyebrow::before{content:none}
.px-eyebrow.mitte{justify-content:center}
.px-eyebrow svg{flex:none}

/* ---------- Wiederkehrende Textfarben ---------- */
.px-grau{color:var(--mid)}
.px-grau-hell{color:#a3a3a3}
.px-unter{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--brand)}
.px-micro{
  margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--mid);
}
.px-mitte{display:flex;flex-direction:column;align-items:center;margin-top:36px}
.px-stars{color:#f0a500;letter-spacing:1px;font-size:13px}

/* ============================================================
   01 NAV - Telefonnummer zweizeilig
   ============================================================ */
.nav-tel{flex-direction:column;align-items:flex-end;gap:0;line-height:1.25;padding:6px 12px}
.nav-tel-l{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--mid);
}
.nav-tel .zahl{font-size:12px;color:var(--brand-deep)}
@media(max-width:640px){.nav-tel{display:none}}

/* ============================================================
   02 HERO - Split, kompakt (kein Vollbild-Hero)
   ============================================================ */
.px-hero{padding:108px 0 16px}
.px-hero .hero-grid{grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.px-hero .hero-copy{max-width:700px}
.px-hero .hero-copy h1,
.px-sub-copy h1,
.px-seite .p-hero h1{font-size:clamp(32px,4.1vw,60px);line-height:1.05;margin-top:18px}
.px-hero .hero-copy .lead{margin:20px 0 0;font-size:17px;max-width:50ch}

/* Splitter klein, direkt ueber dem CTA */
.px-split{margin-top:22px;padding:3px}
.px-split .split-btn{font-size:13px;padding:7px 16px;border-radius:14px}
.px-hero-cta{margin-top:18px;display:flex}
.px-hero-cta .btn{height:46px;padding:0 24px;font-size:14.5px}

/* Zwei KPI-Kacheln nebeneinander */
.px-kpis{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.px-kpi{
  display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;
  background:var(--paper);border:1px solid var(--hairline);border-radius:16px;
  box-shadow:var(--sh-card);padding:13px 18px;
}
.px-kpi-ic{
  width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--canvas);color:var(--ink-soft);
}
.px-kpi-t{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.px-kpi-t b{font-weight:500}
.px-kpi-s{color:var(--mid);font-size:12px}
@media(max-width:420px){.px-kpis{flex-direction:column;align-items:stretch}}

/* Hero-Grund: schlicht wie der Rest der Seite.
   Kein Blueprint-Raster, kein tuerkiser Verlauf. Statt dessen nur ein
   weicher, fast weisser Radial-Schein hinter den Karten, damit sie
   auf dem hellen Grund sichtbar schweben. */
.px-hero::before{content:none}
.px-hero::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:-6%;left:auto;right:-8%;transform:none;
  width:min(900px,72vw);height:820px;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.82) 38%,
    rgba(255,255,255,0) 72%);
}
@media(max-width:980px){
  .px-hero::after{right:auto;left:50%;transform:translateX(-50%);top:auto;bottom:-4%;height:640px}
}

/* Cockpit: eine einzelne, frei schwebende Karte - der Live-Eingang.
   Kein Rahmen, kein gemeinsamer Kopf, kein Farbschein. */
.ck-frei{
  max-width:540px;margin-left:auto;width:100%;
  background:none;border:none;padding:0;overflow:visible;
}
.ck-frei::before{content:none}
.ck-frei .ck-wand{display:block;gap:0;background:none;border:none}
.ck-frei .hw{
  margin:0;padding:22px 24px 24px;position:relative;
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(23,23,23,.045),0 26px 56px -20px rgba(10,10,10,.30),0 6px 16px -8px rgba(10,10,10,.14);
  transition:box-shadow .35s;
  will-change:transform;
}
.ck-frei .hw:hover{
  box-shadow:0 0 0 1px rgba(23,23,23,.05),0 36px 72px -22px rgba(10,10,10,.36),0 8px 20px -10px rgba(10,10,10,.16);
  animation-play-state:paused;
}

/* ---- Kopfzeile: Live-Punkt und Tageszaehler ---- */
.ein-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;
}
.ein-label{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.9px;text-transform:uppercase;color:var(--mid);
}
.ein-punkt{
  width:7px;height:7px;border-radius:50%;flex:none;background:#16a34a;
  animation:einPuls 2.6s ease-out infinite;
}
@keyframes einPuls{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.40)}
  70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}
.ein-zaehler{
  font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--mid);white-space:nowrap;
}
.ein-zaehler b{font-weight:500;color:var(--ink-soft)}

/* ---- Liste: vier sichtbare Eintraege, Fenster mit fester Hoehe ---- */
.hw-eingang{--ein-h:76px}
.ein-liste{
  list-style:none;margin:0;padding:0;
  height:calc(4 * var(--ein-h));overflow:hidden;
  transition:opacity .26s ease;
}
.ein-liste.ein-blende{opacity:0}

.ein-item{
  height:var(--ein-h);opacity:1;overflow:hidden;
  transition:height .62s cubic-bezier(.2,.8,.2,1),
             opacity .5s ease,
             transform .62s cubic-bezier(.2,.8,.2,1);
}
.ein-item.ein-neu{height:0;opacity:0;transform:translateY(-12px)}
.ein-item.ein-weg{opacity:0}

.ein-row{
  position:relative;display:flex;align-items:center;gap:13px;
  height:var(--ein-h);padding:0 2px;
  border-top:1px solid var(--canvas);
}
.ein-row > *{position:relative;z-index:1}
.ein-row::before{
  content:"";position:absolute;inset:6px -4px;border-radius:14px;
  background:var(--brand-wash);opacity:0;pointer-events:none;z-index:0;
}
.ein-item.ein-hot .ein-row::before{animation:einHot 1.5s ease-out forwards}
@keyframes einHot{0%{opacity:1}60%{opacity:.55}100%{opacity:0}}

.ein-av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.4px;
}
.ein-tt{min-width:0;flex:1}
.ein-title{
  font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ein-meta{
  margin-top:4px;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3px;color:var(--mid);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ein-src{display:inline-flex;align-items:center;gap:5px;color:var(--ink-soft);flex:none}
.ein-src svg{flex:none}
.ein-sep{color:#c9c9c9}
.ein-badge{
  flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.4px;
  padding:4px 10px;white-space:nowrap;
}
.ein-badge.b-neu{background:var(--brand-wash);color:var(--brand-deep)}
.ein-badge.b-vorq{background:var(--canvas);color:var(--ink-soft)}
.ein-badge.b-termin{background:var(--paper);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--hairline)}

/* Sanftes Schweben, erst nachdem die Karte eingeblendet ist */
@keyframes ckSchweben{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
.ck-frei .hw.in{
  animation:ckSchweben var(--fdur,7.4s) ease-in-out var(--fd,1.2s) infinite;
}

@media(max-width:980px){.ck-frei{margin-right:auto;max-width:560px}}
@media(max-width:660px){
  .ck-frei .hw{padding:18px 18px 20px}
  .hw-eingang{--ein-h:72px}
  .ein-title{font-size:14px}
  .ein-av{width:34px;height:34px;font-size:11px}
}
@media(max-width:400px){
  .ein-badge{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ck-frei .hw.in{animation:none}
  .ein-punkt{animation:none}
  .ein-item{transition:none}
  .ein-liste{transition:none}
  .ein-item.ein-hot .ein-row::before{animation:none;opacity:0}
}

/* ============================================================
   03 FOTO-BAND + LOGO-LEISTE
   ============================================================ */
.px-band{padding:44px 0 8px}
.px-band-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.px-band-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:3px;
  border-radius:var(--r-card);overflow:clip;
  border:1px solid var(--hairline);background:var(--hairline);
}
.px-band-item{position:relative;margin:0;overflow:clip;background:var(--canvas)}
.px-band-item img{
  width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.px-band-item:hover img{transform:scale(1.05)}
.px-chip{
  position:absolute;left:12px;bottom:12px;
  background:var(--brand);color:#fff;border-radius:var(--r-pill);
  padding:5px 13px;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
}
.px-band-item:nth-child(2) .px-chip,
.px-band-item:nth-child(4) .px-chip{bottom:auto;top:12px}

.px-trust{
  margin:34px 0 22px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13.5px;color:var(--mid);
}
.px-trust b{color:var(--ink-soft);font-weight:500}
.px-trust svg{color:var(--brand-deep);flex:none}
.px-band .logo-row{gap:clamp(20px,3.6vw,46px)}
.px-band .logo-row img{height:32px;max-width:130px}
.px-band .logo-row img.quadrat{height:44px;max-width:82px}
.px-band .logo-wort{font-size:13px}

@media(max-width:900px){
  .px-band-item img{aspect-ratio:1/1.15}
  .px-band-row{grid-template-columns:repeat(3,1fr)}
  .px-band-item:nth-child(4){grid-column:span 2}
}
@media(max-width:560px){
  .px-band-row{grid-template-columns:repeat(2,1fr)}
  .px-band-item:nth-child(4){grid-column:span 1}
  .px-band-item:nth-child(5){grid-column:span 2}
  .px-band-item:nth-child(5) img{aspect-ratio:2/1.1}
  .px-chip{left:9px;bottom:9px;padding:4px 10px;font-size:11.5px}
}

/* ============================================================
   04 KUNDENSTIMMEN (alt, nicht mehr eingebunden)
   ============================================================ */
.px-slider-head{margin-bottom:28px}
.px-slider{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.px-slider::-webkit-scrollbar{display:none}
.px-track{display:flex;gap:var(--px-gap);align-items:stretch}
.px-rev{
  flex:0 0 calc(50% - (var(--px-gap) / 2));
  scroll-snap-align:start;min-width:0;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:24px 26px;display:flex;flex-direction:column;
  transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1);
}
.px-rev:hover{box-shadow:var(--sh-lift);transform:translateY(-3px)}
.px-rev-top{display:flex;align-items:center;gap:13px;flex-wrap:wrap;min-height:42px}
.px-av{
  width:42px;height:42px;border-radius:50%;flex:none;overflow:clip;
  background:var(--canvas);display:grid;place-items:center;border:1px solid var(--hairline);
}
.px-av img{width:74%;height:74%;object-fit:contain}
.px-av .kuerzel{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--mid);letter-spacing:.4px}
.px-rev-wer{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.px-rev-n{font-size:14.5px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:center;gap:6px}
.px-verif{
  width:15px;height:15px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:9px;display:inline-grid;place-items:center;flex:none;
}
.px-rev-s{font-size:12px;color:var(--mid)}
.px-rev blockquote{
  margin-top:18px;font-size:14px;line-height:1.62;color:var(--mid);
  border:none;padding:0;
}
.px-slider-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.px-dots{display:flex;gap:6px}
.px-dots i{width:7px;height:7px;border-radius:50%;background:var(--hairline);transition:background .3s,width .3s}
.px-dots i.on{background:var(--brand);width:20px;border-radius:4px}
.px-arrows{display:flex;gap:10px}
.px-arrow{
  width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--ink);
  border:1px solid var(--hairline);display:grid;place-items:center;
  transition:background .25s,color .25s,transform .25s;
}
.px-arrow:hover{background:var(--ink);color:#fafafa;transform:translateY(-2px)}
@media(max-width:820px){.px-rev{flex:0 0 min(84vw,420px)}}

/* ============================================================
   05 PROBLEM - drei Karten mit rotem Mini-Screen oben
   ============================================================ */
.px-h2-breit{max-width:800px;margin-bottom:44px;line-height:1.14}
/* Feste Hoehe des Widget-Felds in den Problem-Kacheln */
.px-problem{--pvis-h:212px}
.px-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--px-gap);align-items:stretch}
.px-pcard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:20px 20px 26px;text-align:center;
  /* Feste Zeilen: Widget, Titel, Text. Damit starten Titel und Text
     in allen drei Kacheln und in beiden Splitter-Zustaenden auf gleicher Hoehe. */
  display:grid;grid-template-rows:var(--pvis-h) auto 1fr;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s;
}
.px-pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:rgba(231,0,11,.28)}
.px-pvis{
  border-radius:14px;padding:16px;margin:0;height:var(--pvis-h);min-height:0;
  background:linear-gradient(180deg,rgba(231,0,11,.07),rgba(231,0,11,.02));
  border:1px solid rgba(231,0,11,.14);
  display:flex;align-items:center;overflow:clip;
}
.px-pvis .pm{width:100%;text-align:left}
/* Die drei Mini-Screens muessen in dasselbe Feld passen, ohne abgeschnitten
   zu werden. Liste und Kalender werden dafuer leicht enger gefasst. */
.px-pvis .pm-liste{gap:4px}
.px-pvis .pm-zeile{padding:6px 10px}
.px-pvis .pm-kal{max-width:230px;margin:0 auto}
.px-pcard h3{
  font-size:23px;font-weight:600;line-height:1.26;letter-spacing:-.03em;
  margin:22px 0 10px;min-height:calc(2 * 1.26em);
  display:flex;align-items:center;justify-content:center;text-wrap:balance;
}
.px-pcard p{
  font-size:16px;line-height:1.55;color:var(--mid);max-width:32ch;margin:0 auto;
  min-height:calc(2 * 1.55em);
}
@media(max-width:1100px){.px-pcard h3{font-size:21px}}
@media(max-width:900px){.px-pgrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* ============================================================
   06 LOESUNG - Bento im getoenten Block
   ============================================================ */
.px-bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--px-gap)}
.px-bcard{
  grid-column:span 1;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;gap:20px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.px-bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.px-bcard-breit{
  grid-column:span 2;flex-direction:row;align-items:center;gap:clamp(24px,3.4vw,48px);
  padding:clamp(26px,3vw,40px);
}
.px-bcard-breit .px-bcopy{flex:1 1 46%;min-width:0}
.px-bcard-breit .px-bvis{flex:1 1 54%;min-width:0}
/* Die beiden schmalen Bento-Karten bekommen dieselbe Visual-Hoehe,
   damit die Texte darunter exakt auf einer Linie beginnen. */
.px-bcard:not(.px-bcard-breit){display:grid;grid-template-rows:158px auto;gap:20px}
.px-bcard:not(.px-bcard-breit) .px-bvis{display:flex;align-items:center;min-height:0;height:158px}
.px-bcard:not(.px-bcard-breit) .px-bvis .px-mock{width:100%}
.px-bcopy h3{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.028em;margin-bottom:10px}
/* Zwei Titelzeilen reservieren, damit die Texte der beiden schmalen
   Bento-Karten auf derselben Linie beginnen. */
.px-bcard:not(.px-bcard-breit) .px-bcopy h3{min-height:calc(2 * 1.3em)}
.px-bcard-breit .px-bcopy h3{font-size:clamp(22px,2.2vw,27px);line-height:1.24}
.px-bcopy p{font-size:14.5px;line-height:1.6;color:var(--mid);max-width:46ch}
.px-mock{margin-bottom:0;padding:16px;box-shadow:var(--sh-card)}
.px-mock:hover{transform:none;box-shadow:var(--sh-card)}
.px-mock-flow{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--canvas);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.px-node{
  font-family:var(--mono);font-size:10px;letter-spacing:.3px;
  padding:5px 10px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--hairline);color:var(--mid);white-space:nowrap;
}
.px-node.on{background:var(--brand);color:#fff;box-shadow:none}
.px-arrowline{flex:1;min-width:12px;height:1px;background:var(--hairline)}
.px-uebergabe{display:flex;align-items:center;gap:8px;padding:8px 0}
.px-ub{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);
}
.px-ub.sq{background:var(--canvas);color:var(--mid);box-shadow:inset 0 0 0 1px var(--hairline)}
.px-ub-line{flex:1;height:1px;background:var(--hairline);min-width:14px}
@media(max-width:900px){
  .px-bento{grid-template-columns:1fr}
  .px-bcard,.px-bcard-breit{grid-column:span 1}
  .px-bcard-breit{flex-direction:column;align-items:stretch}
}

/* ============================================================
   07 METHODE - grosser Kreis, kleine Karten
   ============================================================ */
.px-methode{
  grid-template-columns:minmax(0,1fr) minmax(280px,440px) minmax(0,1fr);
  gap:14px clamp(10px,1.8vw,30px);
  margin-top:8px;align-items:center;
}
.px-methode .mkreis svg{max-width:440px}
.px-methode .mkreis .glow{fill:var(--brand);opacity:.16;filter:blur(16px)}
.px-methode .mkreis-logo img{height:34px}
.px-methode .mcard{padding:15px 17px;border-radius:18px}
.px-methode .mcard{display:flex;flex-direction:column}
.px-methode .mcard h3{font-size:18px;font-weight:600;line-height:1.26;margin:0 0 6px;letter-spacing:-.025em}
.px-methode .mcard p{font-size:13.5px;line-height:1.5;min-height:calc(2 * 1.5em)}
.px-methode .mic{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--brand-wash);color:var(--brand-deep);font-size:13px;margin-bottom:9px;
}
.px-methode .m1,.px-methode .m4{margin-top:26px}
.px-methode .m3,.px-methode .m6{margin-bottom:26px}
@media(max-width:900px){
  .px-methode{grid-template-columns:1fr;gap:14px}
  .px-methode .m1,.px-methode .m4{margin-top:0}
  .px-methode .m3,.px-methode .m6{margin-bottom:0}
  .px-methode .mkreis svg{max-width:260px}
}

/* ============================================================
   08 BRANCHEN-GRID
   ============================================================ */
.px-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--px-gap);align-items:stretch}
.px-btile{
  position:relative;margin:0;border-radius:var(--r-card);overflow:clip;
  border:1px solid var(--hairline);background:var(--canvas);
  display:flex;
}
.px-btile img{
  width:100%;height:100%;aspect-ratio:16/9.6;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.px-btile:hover img{transform:scale(1.05)}
.px-btile::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.78),transparent);
}
.px-btile figcaption{
  position:absolute;left:18px;bottom:15px;z-index:2;
  color:#fafafa;font-size:20px;font-weight:600;letter-spacing:-.025em;
}
.px-more{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:24px}
.px-more[hidden]{display:none}
.px-more .badge{padding:6px 14px;font-size:13px;background:var(--paper)}
.px-more-cases{margin-top:26px}
@media(max-width:880px){.px-bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .px-bgrid{grid-template-columns:1fr}
  .px-btile figcaption{left:14px;bottom:12px;font-size:17px}
}

/* ============================================================
   09 + 15 CTA-KARTEN - dunkel mit Foto rechts
   ============================================================ */
.px-ctacard{
  padding:0;display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;
  overflow:clip;min-height:400px;
}
.px-ctacard::before{top:-260px;right:-120px;width:620px;height:620px}
.px-ctacopy{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.px-ctacopy h2{font-size:clamp(26px,3.1vw,40px);line-height:1.16;margin:0 0 16px;max-width:15ch}
.px-ctacopy .lead{font-size:15px;max-width:44ch;margin-bottom:26px}
.px-ctacopy .btn{align-self:flex-start;max-width:100%}
.px-ctacopy .px-micro{color:#8c8c8c}
.px-ctafoto{position:relative;overflow:clip;min-height:260px;min-width:0}
.px-ctafoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.px-ctafoto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(10,10,10,1) 0%,rgba(10,10,10,1) 8%,rgba(10,10,10,.96) 16%,rgba(10,10,10,.85) 26%,
    rgba(10,10,10,.66) 36%,rgba(10,10,10,.44) 46%,rgba(10,10,10,.25) 56%,rgba(10,10,10,.11) 66%,
    rgba(10,10,10,.03) 76%,transparent 86%);
}
@media(max-width:820px){
  .px-ctacard{grid-template-columns:1fr;min-height:0}
  .px-ctacopy{order:2}
  .px-ctafoto{order:1;min-height:220px;aspect-ratio:16/9}
  .px-ctafoto::after{background:linear-gradient(to bottom,transparent 40%,rgba(10,10,10,.92))}
  .px-ctacopy h2{max-width:none}
}

/* ============================================================
   10 ERGEBNIS-GRID - sechs Case-Karten
   ============================================================ */
.px-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--px-gap);align-items:stretch;grid-auto-rows:1fr}
.px-case{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:14px 14px 18px;
  /* Poster, Firmenname, Person, KPI, Chips: feste Zeilenfolge fuer alle sechs Cases */
  display:grid;grid-template-rows:auto auto auto auto 1fr;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.px-case:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.px-case-media{position:relative;border-radius:14px;overflow:clip;background:var(--canvas)}
.px-case-media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.px-play{
  position:absolute;left:10px;bottom:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.4);
}
.px-case-tag{
  position:absolute;right:10px;bottom:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;
  background:rgba(10,10,10,.72);color:#fafafa;border-radius:var(--r-pill);padding:3px 9px;
}
.px-case h3{font-size:21px;font-weight:600;line-height:1.24;letter-spacing:-.03em;margin:16px 4px 5px}
.px-case-p{font-size:14px;color:var(--mid);line-height:1.5;margin:0 4px 14px}
.px-case-kpi{
  display:flex;gap:9px;align-items:flex-start;margin:0 4px;
  font-size:12.5px;line-height:1.45;color:var(--ink-soft);
  min-height:calc(2 * 1.45em);
}
.px-case-kpi .zahl{font-size:12.5px}
.px-case-ic{color:var(--brand);flex:none;font-size:10px;line-height:1.6}
.px-case-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 4px 0;align-content:flex-start}
.px-case-chips .badge{font-size:11.5px;padding:4px 10px}
@media(max-width:900px){.px-cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.px-cases{grid-template-columns:1fr}}

/* ============================================================
   11 PROZESS (alt, nicht mehr eingebunden)
   ============================================================ */
.px-timeline{margin-top:8px}
.px-tl-foto{margin:0 0 34px;width:min(34%,340px);border-radius:var(--r-card);overflow:clip;border:1px solid var(--hairline)}
.px-tl-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.px-tl-line{position:relative;height:38px;display:block}
.px-tl-bar{
  position:absolute;left:16.6%;right:16.6%;top:19px;height:2px;
  background:var(--hairline);border-radius:2px;display:block;overflow:clip;
}
.px-tl-bar i{
  display:block;height:100%;width:0;background:var(--brand);
  transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}
.px-timeline.tl-on .px-tl-bar i{width:100%}
.px-tl-node{
  position:absolute;top:8px;transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--hairline);color:var(--mid);
  transition:background .4s,color .4s,border-color .4s;
}
.px-tl-node.n1{left:16.6%}
.px-tl-node.n2{left:50%}
.px-tl-node.n3{left:83.4%}
.px-timeline.tl-on .px-tl-node{background:var(--brand);border-color:var(--brand);color:#fff}
.px-timeline.tl-on .px-tl-node.n2{transition-delay:.35s}
.px-timeline.tl-on .px-tl-node.n3{transition-delay:.7s}
.px-tl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--px-gap);margin-top:24px;text-align:center}
.px-tl-step{opacity:.35;transition:opacity .5s}
.px-timeline.tl-on .px-tl-step{opacity:1}
.px-timeline.tl-on .px-tl-step[data-step="2"]{transition-delay:.35s}
.px-timeline.tl-on .px-tl-step[data-step="3"]{transition-delay:.7s}
.px-tl-step h3{font-size:19px;letter-spacing:-.025em;margin-bottom:9px}
.px-tl-step p{font-size:13.5px;line-height:1.58;color:var(--mid);max-width:34ch;margin:0 auto}
@media(max-width:760px){
  .px-tl-foto{width:100%}
  .px-tl-line{display:none}
  .px-tl-steps{grid-template-columns:1fr;text-align:left;gap:26px}
  .px-tl-step{opacity:1}
  .px-tl-step p{margin:0}
}

/* ============================================================
   12 TEAM (alt, nicht mehr eingebunden)
   ============================================================ */
.px-team{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4vw,60px);align-items:center}
.px-team-foto{margin:0;border-radius:var(--r-card);overflow:clip;border:1px solid var(--hairline)}
.px-team-foto img{width:100%;aspect-ratio:4/3.2;object-fit:cover;display:block}
.px-team-copy h2{font-size:clamp(26px,3vw,40px);line-height:1.14;margin-bottom:20px;max-width:17ch}
.px-team-copy p{font-size:14.5px;line-height:1.66;color:var(--mid);margin-bottom:14px;max-width:56ch}
.px-team-copy .sigs{margin-top:28px;padding-top:22px}
.px-team-copy .sig{min-width:170px}
.px-team-copy .sig svg{height:36px;max-width:180px}
#team .tslider{margin-top:44px;align-items:stretch}
#team .tcard{display:flex;flex-direction:column}
#team .tcard img{flex:none}
#team .tcard .tmeta{flex:1}
@media(max-width:880px){
  .px-team{grid-template-columns:1fr}
  .px-team-copy h2{max-width:none}
}

/* ============================================================
   13 VIDEO-SEKTION
   ============================================================ */
.px-video{
  position:relative;margin:0 auto;max-width:min(680px,100%);
  border-radius:var(--r-card);overflow:clip;border:1px solid var(--hairline);
  background:var(--canvas);box-shadow:var(--sh-card);
}
.px-video img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.px-play.gross{
  left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
  width:70px;height:70px;background:rgba(255,255,255,.94);
}
.px-video-cap{
  position:absolute;right:12px;bottom:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.4px;
  background:rgba(10,10,10,.72);color:#fafafa;border-radius:var(--r-pill);padding:4px 10px;
}
.px-video-cta{margin-top:32px}

/* ============================================================
   14 FAQ - vier Fragen, zentriert und schmal
   ============================================================ */
.px-faq{max-width:760px;margin:0 auto}
.px-faq-h{text-align:center;margin-bottom:34px}
.px-frows{display:flex;flex-direction:column;gap:10px}
.px-frows .frow{
  border:1px solid var(--hairline);border-radius:16px;background:var(--paper);
  padding:0 22px;transition:border-color .25s,box-shadow .25s;
}
.px-frows .frow:last-child{border-bottom:1px solid var(--hairline)}
.px-frows .frow.open{border-color:rgba(0,174,181,.35);box-shadow:var(--sh-card)}
.px-frows .frow-btn{padding:18px 0}
.px-frows .frow-btn h3{font-size:15.5px}
.px-frows .frow-body p{padding:0 40px 20px 0;font-size:14px}

/* ============================================================
   16 FOOTER - vier Spalten mit Ansprechpartner-Karte
   ============================================================ */
.px-footer{border-top:1px solid var(--hairline);background:var(--paper);padding:64px 0 36px}
.px-foot-grid{
  display:grid;grid-template-columns:1.15fr .8fr .95fr 1.1fr;
  gap:clamp(24px,3.4vw,48px);margin-bottom:44px;
}
.px-foot-logo{height:26px;width:auto;margin-bottom:18px}
.px-foot-col address{font-style:normal;font-size:13.5px;line-height:1.75;color:var(--mid)}
.px-foot-kontakt{margin-top:14px;font-size:13.5px;line-height:1.75;color:var(--ink-soft)}
.px-foot-kontakt a{transition:color .2s}
.px-foot-kontakt a:hover{color:var(--brand-deep)}
.px-foot-col h3,.px-foot-col h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mid);margin-bottom:15px;font-weight:500;
}
.px-foot-col>a:not(.btn){display:block;font-size:13.5px;color:var(--ink-soft);padding:5px 0;transition:color .2s}
.px-foot-col>a:not(.btn):hover{color:var(--brand-deep)}
.px-ansprech{
  display:flex;align-items:center;gap:14px;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:16px;padding:14px;
}
.px-ansprech img{width:54px;height:62px;object-fit:cover;border-radius:10px;flex:none}
.px-an{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.px-ar{display:block;font-size:11.5px;color:var(--mid);margin-top:2px}
.px-ad{display:block;font-size:11.5px;color:var(--brand-deep);margin-top:6px}
.px-foot-btn{margin-top:14px;height:38px;padding:0 18px;display:inline-flex}
.px-footer .foot-base{padding-top:22px}
@media(max-width:900px){.px-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.px-foot-grid{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   Schmalere Ansichten - Ueberschreibt die Spaltenregeln oben
   (Media Queries erhoehen die Spezifitaet nicht, deshalb hier
   noch einmal mit derselben Selektortiefe)
   ============================================================ */
@media(max-width:980px){
  .px-sub-hero{padding:104px 0 40px}
  .px-sub-visual{margin-top:36px}
  .px-hero{padding:96px 0 8px}
  .px-hero .hero-grid{grid-template-columns:1fr;gap:40px}
  .px-hero .hero-copy{max-width:none}
  .px-hero .hero-copy .lead{max-width:56ch}
  .ck-frei{max-width:620px;margin-left:auto;margin-right:auto}
}
@media(max-width:400px){
  .px-split{width:100%}
  .px-split .split-btn{flex:1;justify-content:center;padding:8px 8px;font-size:12.5px}
  .px-hero-cta .btn{width:100%;justify-content:center;padding:0 14px}
}

/* ============================================================
   Kleine Bildschirme: nichts laeuft ueber 360px hinaus
   ============================================================ */
@media(max-width:400px){
  .wrap{padding:0 18px}
  .px-band-wrap{padding:0 14px}
  .px-rev{padding:20px}
  .px-pcard{padding:16px 16px 22px}
  .px-pcard h3{font-size:19px}
  .px-pcard p{font-size:15px}
  .px-case{padding:12px 12px 16px}
  .px-frows .frow{padding:0 16px}
  .px-hero .hero-copy h1,
  .px-sub-copy h1,
  .px-seite .p-hero h1{font-size:32px}
  .px-ctacopy h2{font-size:24px}
  .px-kpi{padding:11px 14px}
}

/* ============================================================
   Bewegung nur, wenn gewuenscht
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .px-slider{scroll-behavior:auto}
  .px-tl-bar i{transition:none;width:100%}
  .px-tl-node{background:var(--brand);border-color:var(--brand);color:#fff}
  .px-tl-step{opacity:1}
  .px-band-item img,.px-btile img{transition:none}
  .px-rev:hover,.px-case:hover,.px-pcard:hover,.px-bcard:hover{transform:none}
}

/* ============================================================
   16 NAV - Leistungen-Dropdown + Mobil-Panel
   Pill-Nav-Optik bleibt; das Panel uebernimmt den uicard-Look.
   ============================================================ */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--mid);
  padding:8px 14px;border-radius:var(--r-pill);border:0;background:transparent;
  transition:color .2s,background .2s;
}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--ink);background:rgba(255,255,255,.9)}
.nav-chev{width:14px;height:14px;flex:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nav-drop.open .nav-chev{transform:rotate(180deg)}

.nav-drop-panel{
  position:absolute;top:100%;left:-10px;z-index:120;
  width:min(560px,calc(100vw - 48px));
  margin-top:16px;padding:10px;
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--r-card);box-shadow:var(--sh-lift);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .22s;
}
/* unsichtbare Bruecke, damit der Weg von Button zu Panel nicht abreisst */
.nav-drop-panel::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.nav-drop.open .nav-drop-panel{opacity:1;visibility:visible;transform:translateY(0)}

.nav-links .nav-drop-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 12px;border-radius:var(--r-nested);
  color:var(--ink);background:transparent;
  transition:background .2s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-links .nav-drop-item:hover,.nav-links .nav-drop-item:focus-visible{
  background:var(--canvas);color:var(--ink);transform:translateY(-1px);
}
.nav-drop-ic{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);
}
.nav-drop-ic svg{width:16px;height:16px}
.nav-drop-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.nav-drop-t{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.nav-drop-d{font-size:12px;line-height:1.4;color:var(--mid);font-weight:400}

/* ---------- Burger ---------- */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:38px;padding:0 9px;margin-left:10px;
  border:1px solid var(--hairline);border-radius:12px;
  background:var(--paper);transition:background .2s,border-color .2s;
}
.nav-burger:hover{background:var(--canvas)}
.nav-burger-b{display:block;height:1.8px;width:100%;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.nav-burger[aria-expanded="true"] .nav-burger-b:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .nav-burger-b:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .nav-burger-b:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---------- Mobil-Panel ---------- */
.nav-mob{
  position:absolute;top:100%;left:0;right:0;z-index:110;
  height:calc(100vh - 64px);height:calc(100dvh - 64px);
  background:var(--canvas);border-top:1px solid var(--hairline);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.nav-mob[hidden]{display:none}
.nav-mob-in{padding:16px 20px 40px;display:flex;flex-direction:column;gap:4px;max-width:560px;margin:0 auto}
.nav-mob-link,.nav-mob-gbtn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;text-align:left;
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding:14px 14px;border-radius:14px;border:0;background:transparent;
  transition:background .2s;
}
.nav-mob-link:hover,.nav-mob-gbtn:hover{background:var(--paper)}
.nav-mob-gbtn .nav-chev{width:16px;height:16px;color:var(--mid)}
.nav-mob-gbtn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-mob-glist{display:flex;flex-direction:column;gap:4px;padding:4px 0 8px}
.nav-mob-glist[hidden]{display:none}
.nav-mob-sub{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 14px;border-radius:12px;background:var(--paper);
  border:1px solid var(--hairline);
}
.nav-mob-sub:hover{background:#fff}
.nav-mob-tel{
  display:flex;flex-direction:column;gap:2px;
  margin-top:14px;padding:12px 14px;border-radius:14px;
  background:var(--paper);border:1px solid var(--hairline);
}
.nav-mob-tel .nav-tel-l{font-size:10px}
.nav-mob-tel .zahl{font-size:16px;color:var(--brand-deep);font-weight:600}
.nav-mob-cta{margin-top:10px;height:48px;justify-content:center}

/* ---------- Breakpoints ---------- */
@media(max-width:1080px){
  .nav-tel{display:none}
}
@media(max-width:900px){
  .nav-burger{display:flex}
  .nav-drop-panel{display:none}
}
@media(max-width:560px){
  .nav-in{padding:0 18px}
  .nav-cta{padding:0 14px;font-size:13.5px}
  .nav-mob-in{padding:14px 16px 36px}
}
@media(prefers-reduced-motion:reduce){
  .nav-drop-panel,.nav-chev,.nav-burger-b{transition:none}
}


/* ============================================================
   02b UNTERSEITEN-HERO - grosse Headline, wenig Text
   Gleiche Typo wie der Startseiten-Hero, nur einspaltig:
   Eyebrow, zweizeilige H1, kurze Subline, ein Tuerkis-CTA
   und darunter die Mikrozeile. Das bestehende Bild oder
   Dashboard sitzt als eigener Block darunter.
   ============================================================ */
.px-sub-hero{padding:124px 0 56px}
.px-sub-hero::before{content:none}
.px-sub-hero::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:-8%;left:auto;right:-10%;transform:none;
  width:min(920px,74vw);height:780px;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.82) 38%,
    rgba(255,255,255,0) 72%);
}
.px-sub-copy{max-width:1180px}
.px-sub-copy h1{letter-spacing:-.045em}
.px-sub-hero .lead{margin:22px 0 0;font-size:17px;max-width:54ch}
.px-sub-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.px-sub-cta .btn{height:48px;padding:0 26px;font-size:15px}
.px-sub-hero .px-micro{margin-top:14px}
.px-sub-visual{margin-top:52px;max-width:960px}
.px-sub-visual .uicard,.px-sub-visual .hero-photo{width:100%}
@media(max-width:400px){
  .px-sub-hero{padding:92px 0 32px}
  .px-sub-cta{width:100%}
  .px-sub-cta .btn{width:100%;justify-content:center;padding:0 14px}
}

/* ============================================================
   01b NAV - aktive Seite dezent hervorheben
   ============================================================ */
.nav-links a[aria-current="page"],
.nav-drop-btn.is-akt{color:var(--ink);font-weight:600}
.nav-links a[aria-current="page"]{
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.nav-links .nav-drop-item[aria-current="page"]{
  background:var(--brand-wash-soft);
  box-shadow:inset 0 0 0 1px rgba(0,174,181,.28);
}
.nav-links .nav-drop-item[aria-current="page"] .nav-drop-t{color:var(--brand-deep)}
.nav-mob-link[aria-current="page"],
.nav-mob-sub[aria-current="page"],
.nav-mob-gbtn.is-akt{color:var(--brand-deep);font-weight:600}

/* ============================================================
   Unterseiten: Kacheltitel auf Startseiten-Niveau
   ============================================================ */
.px-seite .bcard h3{font-size:21px}
.px-seite .sit h3{font-size:21px}
.px-seite .case h3{font-size:23px}
.px-seite .step h3{font-size:21px}
.px-seite .mcard h3{font-size:20px}
.px-seite .pcard h3{font-size:21px}
.px-seite .vs-col h3{font-size:21px}


/* ============================================================
   ============  v6-AUSBAU  ===================================
   A) Schwebende Pill-Nav        B) Kundenstimmen-Karussell
   C) Live-Eingang (Kopfzeile)   D) Problem-Widgets animiert
   E) Loesung-Bento animiert     F) Ueber uns
   G) Vergleich                  H) Prozess in 3 Karten
   ============================================================ */

/* ------------------------------------------------------------
   A) NAV - schwebende weisse Pill, laeuft beim Scrollen mit
   ------------------------------------------------------------ */
#nav{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;
  padding:16px 24px 0;
  pointer-events:none;
}
#nav .nav-in{
  pointer-events:auto;position:relative;
  max-width:var(--max);margin:0 auto;
  height:64px;padding:0 12px 0 26px;gap:14px;
  background:var(--paper);
  border-radius:999px;
  box-shadow:
    0 0 0 1px rgba(23,23,23,.045),
    0 2px 6px rgba(10,10,10,.05),
    0 16px 38px -14px rgba(10,10,10,.22);
}
#nav .nav-logo{display:flex;align-items:center;flex:none}
#nav .nav-logo img{height:42px;width:auto}
#nav .nav-links{flex:1 1 auto;justify-content:center;gap:2px}
#nav .nav-links a,#nav .nav-drop-btn{padding:9px 15px}
#nav .nav-links a:hover,#nav .nav-drop-btn:hover,
#nav .nav-drop.open .nav-drop-btn{background:var(--canvas)}
#nav .nav-links a.active,#nav .nav-links a[aria-current="page"]{color:var(--ink);background:var(--canvas)}
#nav .nav-cta{flex:none;height:44px;padding:0 22px;border-radius:999px;font-size:14px}
#nav .nav-drop-panel{margin-top:22px;left:50%;transform:translate(-50%,-8px)}
#nav .nav-drop.open .nav-drop-panel{transform:translate(-50%,0)}
#nav .nav-drop-panel::before{top:-26px;height:26px}

/* Mobil-Panel haengt als eigene Karte unter der Pill */
#nav .nav-mob{
  pointer-events:auto;
  top:calc(100% + 10px);left:0;right:0;
  height:auto;max-height:calc(100dvh - 116px);
  background:var(--paper);
  border:1px solid var(--hairline);border-top:1px solid var(--hairline);
  border-radius:26px;
  box-shadow:0 0 0 1px rgba(23,23,23,.04),0 18px 44px -14px rgba(10,10,10,.24);
  overflow-y:auto;
}
#nav .nav-mob-in{max-width:none;padding:12px 12px 22px}
#nav .nav-mob-link,#nav .nav-mob-gbtn{font-size:16px;padding:13px 14px}
#nav .nav-mob-link:hover,#nav .nav-mob-gbtn:hover{background:var(--canvas)}
#nav .nav-mob-sub{background:var(--canvas)}
#nav .nav-mob-tel{background:var(--canvas)}
#nav .nav-burger{margin-left:0}

@media(max-width:900px){
  #nav .nav-cta{height:32px;padding:0 12px;font-size:11.5px}
  #nav .nav-in{padding:0 10px 0 16px;gap:8px}
}
@media(max-width:560px){
  #nav{padding:12px 14px 0}
  #nav .nav-in{height:58px;padding:0 8px 0 16px}
  #nav .nav-mob{top:calc(100% + 8px);max-height:calc(100dvh - 100px)}
}

/* Hero-Abstand: nichts liegt unter der Pill */
.px-hero{padding-top:126px}
.px-sub-hero{padding-top:142px}
@media(max-width:980px){
  .px-hero{padding-top:114px}
  .px-sub-hero{padding-top:122px}
}
@media(max-width:560px){
  .px-hero{padding-top:104px}
  .px-sub-hero{padding-top:112px}
}

/* ------------------------------------------------------------
   D) PROBLEM-WIDGETS - laufen an, sobald sie im Bild sind
   ------------------------------------------------------------ */
#problem .spark.ab .area{fill:rgba(231,0,11,.10);opacity:0;transition:opacity .6s .45s}
#problem .px-pcard.pa-on .spark.ab .area{opacity:1}
#problem .px-pcard.pa-on .spark path:not(.area){stroke-dashoffset:0;animation:paSpark 1.25s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes paSpark{from{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:0}}

#problem .pm-delta{opacity:0;transform:translateY(-4px);transition:opacity .45s .78s,transform .45s .78s cubic-bezier(.2,.8,.2,1)}
#problem .px-pcard.pa-on .pm-delta{opacity:1;transform:none}

#problem .pm-zeile{opacity:0;transform:translateX(-14px)}
#problem .px-pcard.pa-on .pm-zeile{opacity:1;transform:none;animation:paRow .5s cubic-bezier(.2,.8,.2,1) backwards}
#problem .px-pcard.pa-on .pm-zeile:nth-child(1){animation-delay:.08s}
#problem .px-pcard.pa-on .pm-zeile:nth-child(2){animation-delay:.26s}
#problem .px-pcard.pa-on .pm-zeile:nth-child(3){animation-delay:.44s}
@keyframes paRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

#problem .pbadge.nein{opacity:0;transform:scale(.55)}
#problem .px-pcard.pa-on .pbadge.nein{opacity:1;transform:none;animation:paPop .48s cubic-bezier(.34,1.56,.64,1) backwards}
#problem .px-pcard.pa-on .pm-zeile:nth-child(2) .pbadge.nein{animation-delay:.56s}
#problem .px-pcard.pa-on .pm-zeile:nth-child(3) .pbadge.nein{animation-delay:.72s}
@keyframes paPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

#problem .pm-kal i:not(.leer):not(.wt){opacity:0;transform:scale(.62)}
#problem .px-pcard.pa-on .pm-kal i:not(.leer){opacity:1;transform:none;animation:paKal .42s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(.10s + var(--k,0) * .022s)}
@keyframes paKal{from{opacity:0;transform:scale(.62)}to{opacity:1;transform:none}}

/* dezente Endlosschleife, nachdem der Einlauf durch ist */
#problem .px-pcard.pa-on .pm-kal i.voll,
#problem .px-pcard.pa-on .pm-kal i.krank{opacity:1;transform:none;animation:paKal .42s cubic-bezier(.2,.8,.2,1) backwards,
  paGlimm 3.6s 1.6s ease-in-out infinite}
@keyframes paGlimm{0%,100%{filter:none}50%{filter:brightness(1.28)}}
#problem .px-pcard.pa-on .ein-punkt{animation:einPuls 2.6s ease-out infinite}

/* ------------------------------------------------------------
   E) LOESUNG-BENTO - Kanaele, Timeline, Checkliste
   ------------------------------------------------------------ */
.lb-flow{
  display:grid;grid-template-columns:auto 44px auto 30px auto;
  align-items:center;gap:0;
}
.lb-chans{display:flex;flex-direction:column;gap:9px}
.lb-chan{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 12px;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hairline);
  font-family:var(--mono);font-size:11px;letter-spacing:.2px;color:var(--ink-soft);
  opacity:0;transform:translateX(-16px);
}
.lb-chan svg{width:14px;height:14px;flex:none}
.px-bcard.lb-on .lb-chan{opacity:1;transform:none;animation:lbIn .55s cubic-bezier(.2,.8,.2,1) backwards}
.px-bcard.lb-on .lb-chan:nth-child(1){animation-delay:.05s}
.px-bcard.lb-on .lb-chan:nth-child(2){animation-delay:.16s}
.px-bcard.lb-on .lb-chan:nth-child(3){animation-delay:.27s}
@keyframes lbIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

.lb-wires{width:44px;height:110px;overflow:visible}
.lb-wires path{
  --dash:98;fill:none;stroke:var(--hairline);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:var(--dash);stroke-dashoffset:var(--dash);
}
.px-bcard.lb-on .lb-wires path{stroke-dashoffset:0;animation:lbDraw .7s cubic-bezier(.2,.8,.2,1) backwards}
.px-bcard.lb-on .lb-wires path:nth-child(1){animation-delay:.30s}
.px-bcard.lb-on .lb-wires path:nth-child(2){animation-delay:.40s}
.px-bcard.lb-on .lb-wires path:nth-child(3){animation-delay:.50s}
@keyframes lbDraw{from{stroke-dashoffset:var(--dash,98)}to{stroke-dashoffset:0}}

.lb-arrow{width:30px;height:14px;overflow:visible}
.lb-arrow path{--dash:44;fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--dash);stroke-dashoffset:var(--dash)}
.px-bcard.lb-on .lb-arrow path{stroke-dashoffset:0;animation:lbDraw .45s .66s cubic-bezier(.2,.8,.2,1) backwards}

.lb-node{
  display:inline-flex;flex-direction:column;gap:3px;text-align:center;
  padding:11px 14px;border-radius:14px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hairline);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2px;color:var(--mid);white-space:nowrap;
  opacity:0;transform:scale(.86);
}
.lb-node b{font-size:11.5px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.lb-node.on{background:var(--brand);color:rgba(255,255,255,.82);box-shadow:none}
.lb-node.on b{color:#fff}
.px-bcard.lb-on .lb-node{opacity:1;transform:none;animation:lbPop .5s cubic-bezier(.34,1.56,.64,1) backwards}
.px-bcard.lb-on .lb-node:not(.on){animation-delay:.56s}
.px-bcard.lb-on .lb-node.on{animation-delay:.80s}
@keyframes lbPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

.lb-tl{display:flex;flex-direction:column;gap:11px}
.lb-tl-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lb-tl-l{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mid)}
.lb-tl-v{font-family:var(--mono);font-size:11px;color:var(--brand-deep)}
.lb-rail{position:relative;height:8px;border-radius:5px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hairline);overflow:clip}
.lb-rail i{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  transition:width 1.15s .12s cubic-bezier(.2,.8,.2,1)}
.px-bcard.lb-on .lb-rail i{width:var(--w,68%)}
.lb-marks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;color:var(--mid)}
.lb-pin{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:5px 10px;border-radius:var(--r-pill);background:var(--brand-wash);color:var(--brand-deep);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2px;
  opacity:0;transform:translateY(6px);transition:opacity .5s .82s,transform .5s .82s cubic-bezier(.2,.8,.2,1);
}
.px-bcard.lb-on .lb-pin{opacity:1;transform:none}

.lb-check{display:flex;flex-direction:column;gap:9px}
.lb-ci{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:12px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--mid);
  opacity:0;transform:translateY(8px);
}
.lb-ci span{
  width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--canvas);color:transparent;box-shadow:inset 0 0 0 1px var(--hairline);
  transition:background .35s,color .35s,box-shadow .35s;
}
.lb-ci span svg{width:11px;height:11px}
.px-bcard.lb-on .lb-ci{opacity:1;transform:none;animation:lbIn2 .5s cubic-bezier(.2,.8,.2,1) backwards}
.px-bcard.lb-on .lb-ci:nth-child(1){animation-delay:.10s}
.px-bcard.lb-on .lb-ci:nth-child(2){animation-delay:.26s}
.px-bcard.lb-on .lb-ci:nth-child(3){animation-delay:.42s}
@keyframes lbIn2{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.px-bcard.lb-on .lb-ci span{background:var(--brand);color:#fff;box-shadow:none}
.px-bcard.lb-on .lb-ci:nth-child(1) span{transition-delay:.46s}
.px-bcard.lb-on .lb-ci:nth-child(2) span{transition-delay:.62s}
.px-bcard.lb-on .lb-ci:nth-child(3) span{transition-delay:.78s}
.px-bcard.lb-on .lb-ci{color:var(--ink-soft)}

@media(max-width:640px){
  .lb-flow{grid-template-columns:auto 30px auto;row-gap:14px}
  .lb-arrow{display:none}
  .lb-node.on{grid-column:1/-1;justify-self:start}
}

/* ------------------------------------------------------------
   G) VERGLEICH - getoenter Container, zwei Spalten
   ------------------------------------------------------------ */
.vg-box{
  background:var(--surface-alt);border:1px solid var(--hairline);
  border-radius:34px;padding:clamp(18px,2.4vw,30px);
}
.vg-box .vs-grid{gap:clamp(14px,2vw,26px)}
.vg-box .vs-col{background:transparent;border-color:transparent;padding:clamp(20px,2.4vw,32px)}
.vg-box .vs-col.win{
  background:var(--paper);border-color:var(--hairline);
  box-shadow:0 0 0 1px rgba(23,23,23,.04),0 18px 40px -16px rgba(10,10,10,.16);
}
.vg-box .vs-col h3{font-size:19px;font-weight:600;letter-spacing:-.025em;margin-bottom:20px}
.vg-box .vs-col li{font-size:14.5px;line-height:1.55;padding:15px 0}
.vg-box .vs-col li:first-child{border-top:0;padding-top:4px}
.vg-box .vs-col li b{color:var(--ink);font-weight:600}
.vg-box .vs-col:not(.win) li b{color:var(--ink-soft)}
.vg-box .vs-col:not(.win) .vs-mark.grau{background:var(--canvas);color:#a3a3a3;box-shadow:inset 0 0 0 1px var(--hairline)}
.vg-ic{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--canvas);color:#a3a3a3;box-shadow:inset 0 0 0 1px var(--hairline);
}
.vg-ic svg{width:19px;height:19px}
.vg-ic.brand{background:var(--paper);color:var(--brand-deep);box-shadow:var(--sh-card)}
.vg-ic.brand img{width:22px;height:22px;object-fit:contain}
@media(max-width:820px){.vg-box{border-radius:26px}}

/* ------------------------------------------------------------
   F) UEBER UNS - Foto mit Badges links, Text rechts
   ------------------------------------------------------------ */
.ab-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4.4vw,68px);align-items:center}
.ab-fig{position:relative;margin:0;max-width:460px}
.ab-fig img.ab-foto{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:26px;
}
/* Rahmen als eigene Ebene, die nach unten ausblendet */
.ab-fig::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border:1px solid var(--hairline);border-radius:26px;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 68%);
  mask-image:linear-gradient(180deg,#000 35%,transparent 68%);
}
.ab-fig::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:56%;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 45%,#fff 66%);
}
.ab-stack{z-index:2}
.ab-badge{
  position:absolute;top:18px;left:-14px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px 11px 13px;border-radius:999px;
  background:var(--paper);color:var(--ink);
  font-size:15px;font-weight:600;letter-spacing:-.02em;
  box-shadow:0 0 0 1px rgba(23,23,23,.05),0 14px 32px -12px rgba(10,10,10,.28);
}
.ab-badge svg{width:19px;height:19px;color:var(--brand-deep);flex:none}
.ab-stack{
  position:absolute;right:-12px;bottom:18px;z-index:2;
  display:flex;align-items:center;
  padding:6px;border-radius:999px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(23,23,23,.05),0 14px 32px -12px rgba(10,10,10,.28);
}
.ab-stack img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--paper);margin-left:-11px;
}
.ab-stack img:first-child{margin-left:0}
.ab-stack .ab-mehr{
  margin-left:8px;padding:0 12px 0 4px;
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink-soft);
}
.ab-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.04em;margin:14px 0 20px}
.ab-copy p{font-size:15px;line-height:1.68;color:var(--mid);margin-bottom:14px;max-width:56ch}
.ab-trust{margin-top:26px}
.ab-trust-l{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mid);margin-bottom:12px;
}
.ab-logos{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);flex-wrap:wrap}
.ab-logos img{height:26px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.62}
.ab-logos img.quadrat{height:34px}
.ab-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.ab-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
}
.ab-link:hover{color:var(--brand-deep)}
.ab-copy .sigs{margin-top:24px;padding-top:20px}
.ab-copy .sig{min-width:160px}
.ab-copy .sig svg{height:32px;max-width:170px}
#ueber-uns .tslider{margin-top:46px;align-items:stretch;gap:14px}
#ueber-uns .tcard{display:flex;flex-direction:column;flex:0 0 186px;border-radius:18px}
#ueber-uns .tcard img{flex:none;aspect-ratio:4/4.2}
#ueber-uns .tcard .tmeta{flex:1;padding:12px 13px}
#ueber-uns .tcard .tn{font-size:13.5px}
#ueber-uns .tcard .tr{font-size:11px;letter-spacing:.35px}
@media(max-width:900px){
  .ab-grid{grid-template-columns:1fr;gap:38px}
  .ab-fig{max-width:none}
  .ab-badge{left:14px}
  .ab-stack{right:14px}
}

/* ------------------------------------------------------------
   H) PROZESS - drei Schritt-Karten mit Mini-Widget
   ------------------------------------------------------------ */
.pz-grid{
  --pz-vis-h:142px;
  display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:stretch;
}
.pz-card{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:18px 20px 24px;
  display:grid;grid-template-rows:var(--pz-vis-h) auto auto 1fr auto;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.pz-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.pz-vis{height:var(--pz-vis-h);display:flex;align-items:stretch;min-height:0}
.pz-mock{
  width:100%;margin:0;padding:14px;border-radius:16px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;justify-content:space-between;overflow:clip;
}
.pz-mock:hover{transform:none;box-shadow:var(--sh-card)}
.pz-num{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:1px;
  color:var(--brand-deep);margin-top:20px;
}
.pz-card h3{font-size:22px;font-weight:600;line-height:1.24;letter-spacing:-.03em;margin:8px 0 10px;text-wrap:balance}
.pz-card p{font-size:14.5px;line-height:1.58;color:var(--mid);margin:0}
.pz-micro{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--gruen);
}
.pz-micro i{width:6px;height:6px;border-radius:50%;background:var(--gruen);flex:none}

/* Verbindung zwischen den Karten */
.pz-link{align-self:start;margin-top:calc(var(--pz-vis-h) / 2 + 18px);position:relative;height:12px;display:block}
.pz-link i{
  position:absolute;left:4px;right:4px;top:5px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--hairline),rgba(0,174,181,.55));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.pz-link b{
  position:absolute;top:2.5px;left:4px;width:7px;height:7px;border-radius:50%;
  background:var(--brand);opacity:0;
}
.pz-grid.pz-on .pz-link i{transform:scaleX(1)}
.pz-grid.pz-on .pz-link:nth-of-type(1) i{transition-delay:.45s}
.pz-grid.pz-on .pz-link:nth-of-type(2) i{transition-delay:.68s}
.pz-grid.pz-on .pz-link b{animation:pzDot 2.6s 1.4s cubic-bezier(.5,0,.5,1) infinite}
.pz-grid.pz-on .pz-link:nth-of-type(2) b{animation-delay:1.7s}
@keyframes pzDot{
  0%{opacity:0;transform:translateX(0)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateX(30px)}
}

/* Widget-Bausteine */
.pz-mkopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pz-mlabel{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mid)}
.pz-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;
  background:var(--brand-wash);color:var(--brand-deep);white-space:nowrap;
}
.pz-tag.live i{width:6px;height:6px;border-radius:50%;background:var(--gruen);flex:none}
.pz-tag.live{background:var(--gruen-wash);color:var(--gruen)}
.pz-mfoot{font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;color:var(--mid)}

/* 01 Kalender */
.pz-week{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pz-week i{
  height:19px;border-radius:6px;background:var(--canvas);
  font-family:var(--mono);font-size:9px;font-style:normal;color:var(--mid);
  display:grid;place-items:center;
}
.pz-week i.on{background:var(--brand-wash);color:var(--brand-deep)}
.pz-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pz-slot{
  height:26px;border-radius:8px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hairline);
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--mono);font-size:10px;color:var(--mid);
  opacity:0;transform:translateY(7px);
}
.pz-slot svg{width:11px;height:11px;flex:none;opacity:0;transform:scale(.4)}
.pz-grid.pz-on .pz-slot{opacity:1;transform:none;animation:pzIn .45s cubic-bezier(.2,.8,.2,1) backwards}
.pz-grid.pz-on .pz-slot:nth-child(1){animation-delay:.10s}
.pz-grid.pz-on .pz-slot:nth-child(2){animation-delay:.24s}
.pz-grid.pz-on .pz-slot:nth-child(3){animation-delay:.38s}
@keyframes pzIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.pz-slot.ok{transition:background .4s .58s,color .4s .58s,box-shadow .4s .58s}
.pz-grid.pz-on .pz-slot.ok{background:var(--brand);color:#fff;box-shadow:none}
.pz-grid.pz-on .pz-slot.ok svg{opacity:1;transform:none;animation:pzPop .5s .70s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes pzPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* 02 Mini-Report */
.pz-bars{display:flex;flex-direction:column;gap:7px}
.pz-bar{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center}
.pz-bar span{font-family:var(--mono);font-size:9px;letter-spacing:.3px;color:var(--mid)}
.pz-bar i{height:7px;border-radius:4px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hairline);overflow:clip;display:block;position:relative}
.pz-bar i b{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  transition:width .85s cubic-bezier(.2,.8,.2,1);
}
.pz-grid.pz-on .pz-bar i b{width:var(--w,70%)}
.pz-grid.pz-on .pz-bar:nth-child(1) i b{transition-delay:.14s}
.pz-grid.pz-on .pz-bar:nth-child(2) i b{transition-delay:.38s}
.pz-grid.pz-on .pz-bar:nth-child(3) i b{transition-delay:.54s}
.pz-chip{
  align-self:flex-start;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--brand-wash);color:var(--brand-deep);
  font-family:var(--mono);font-size:10px;letter-spacing:.2px;white-space:nowrap;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s .92s,transform .5s .92s cubic-bezier(.2,.8,.2,1);
}
.pz-grid.pz-on .pz-chip{opacity:1;transform:none}

/* 03 Mini-Screen */
.pz-screen{display:grid;grid-template-columns:52px 1fr;gap:9px;align-items:stretch}
.pz-lp{
  border-radius:8px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hairline);
  padding:6px;display:flex;flex-direction:column;gap:4px;justify-content:flex-start;
}
.pz-lp span{display:block;height:4px;border-radius:2px;background:var(--hairline)}
.pz-lp span.s{width:64%}
.pz-lp span.cta{margin-top:auto;height:9px;border-radius:4px;background:var(--brand);opacity:.75}
.pz-rows{display:flex;flex-direction:column;gap:5px;justify-content:center}
.pz-row{
  display:flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:8px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hairline);
  font-size:10.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-soft);
  opacity:0;transform:translateX(14px);
}
.pz-row em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--mid);margin-left:auto}
.pz-av{
  width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);
  font-family:var(--mono);font-size:7.5px;letter-spacing:.2px;
}
.pz-grid.pz-on .pz-row{opacity:1;transform:none;animation:pzInX .55s cubic-bezier(.2,.8,.2,1) backwards}
.pz-grid.pz-on .pz-row:nth-child(1){animation-delay:.48s}
.pz-grid.pz-on .pz-row:nth-child(2){animation-delay:.72s}
@keyframes pzInX{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .pz-grid{grid-template-columns:1fr;gap:var(--px-gap)}
  .pz-link{display:none}
}

/* ------------------------------------------------------------
   Bewegung nur, wenn gewuenscht - Endzustand statisch
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .vo-track{transition:none}
  #problem .spark path:not(.area){stroke-dashoffset:0}
  #problem .spark.ab .area,
  #problem .pm-delta,#problem .pm-zeile,#problem .pbadge.nein,
  #problem .pm-kal i,
  .lb-chan,.lb-node,.lb-pin,.lb-ci,
  .pz-slot,.pz-chip,.pz-row{opacity:1;transform:none;animation:none;transition:none}
  .lb-wires path,.lb-arrow path{stroke-dashoffset:0;animation:none}
  .lb-rail i{transition:none;width:var(--w,68%)}
  .lb-ci span{background:var(--brand);color:#fff;box-shadow:none;transition:none}
  .pz-link i{transform:scaleX(1);transition:none}
  .pz-link b{display:none}
  .pz-bar i b{transition:none;width:var(--w,70%)}
  .pz-slot.ok{background:var(--brand);color:#fff;box-shadow:none}
  .pz-slot.ok svg{opacity:1;transform:none}
  .pz-card:hover{transform:none}
}


/* ============================================================
   ============  v7  ==========================================
   A) Pill-Header ist dauerhaft sichtbar (nur kompakter)
   B) Breitere Inhaltsspalte (1280px) sauber ausskaliert
   shadcn.css/js bleiben unveraendert - alles nur als Override.
   ============================================================ */

/* ------------------------------------------------------------
   A) HEADER BLEIBT STEHEN
   shadcn.js setzt beim Runterscrollen .hide auf #nav und
   shadcn.css schiebt die Leiste damit aus dem Bild. Beides wird
   hier neutralisiert; easy.js raeumt die Klasse zusaetzlich weg.
   ------------------------------------------------------------ */
#nav{
  transform:none;
  transition:padding .34s cubic-bezier(.2,.8,.2,1);
  will-change:padding;
}
#nav.hide,
nav#nav.hide{
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
#nav .nav-in{
  transition:
    height .34s cubic-bezier(.2,.8,.2,1),
    padding .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .34s ease,
    background .34s ease;
  will-change:height;
}
#nav .nav-cta{transition:height .34s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}

/* Kompaktzustand ab 60px Scroll: 64 -> 56px, Schatten etwas kraeftiger */
#nav.px-kompakt{padding-top:10px}
#nav.px-kompakt .nav-in{
  height:56px;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  box-shadow:
    0 0 0 1px rgba(23,23,23,.06),
    0 3px 10px rgba(10,10,10,.07),
    0 20px 46px -14px rgba(10,10,10,.30);
}
#nav.px-kompakt .nav-cta{height:38px}
#nav.px-kompakt .nav-drop-panel{margin-top:18px}
@media(max-width:560px){
  #nav.px-kompakt{padding-top:8px}
  #nav.px-kompakt .nav-in{height:52px}
}
@media(prefers-reduced-motion:reduce){
  #nav,#nav .nav-in,#nav .nav-cta{transition:none}
}

/* ------------------------------------------------------------
   B) BREITE - Pill laeuft auf Containerbreite mit
   ------------------------------------------------------------ */
/* Pill-Rand 24px, Innenrand 28px: damit steht das Logo praktisch
   auf der Textkante des Containers (.wrap = --max + 32px Innenrand).
   Abweichung ueber alle Breiten: 4px. */
#nav{padding-left:24px;padding-right:24px}
#nav .nav-in{max-width:var(--max);padding-left:28px}
@media(max-width:900px){
  #nav .nav-in{padding-left:20px}
}

/* Foto-Band buendig zur Textkante des Containers */
.px-band-wrap{padding-left:32px;padding-right:32px}
@media(max-width:560px){.px-band-wrap{padding-left:20px;padding-right:20px}}
@media(max-width:400px){.px-band-wrap{padding-left:14px;padding-right:14px}}

/* Sektionskoepfe und Fliesstexte an die breitere Spalte anpassen */
.px-h2-breit{max-width:860px}
.px-head .lead{max-width:66ch}

/* Kachelraster: gleiche Reihenhoehen bleiben, nur mehr Luft */
.px-pgrid,.px-bgrid,.px-cases,.px-tl-steps,.px-bento{gap:var(--px-gap)}
.px-pcard p{max-width:36ch}
.px-bcopy p{max-width:50ch}
.px-tl-step p{max-width:38ch}

/* Dunkle CTA-Bloecke fuellen die neue Breite ohne leere Mitte */
.px-ctacard{min-height:430px}
.px-ctacopy h2{font-size:clamp(26px,3.2vw,44px);max-width:16ch}
.px-ctacopy .lead{font-size:15.5px;max-width:48ch}
@media(max-width:820px){.px-ctacard{min-height:0}}

/* Ueber uns / Vergleich duerfen die Breite nutzen */
.px-team-copy p{max-width:60ch}
.px-methode{grid-template-columns:minmax(0,1fr) minmax(290px,470px) minmax(0,1fr)}
@media(max-width:900px){.px-methode{grid-template-columns:1fr}}

/* Fliessender Uebergang 1200 -> 1344: unterhalb 1200 wie bisher */
@media(max-width:1200px){
  :root{--max:1180px;--px-gap:20px}
  .px-hero .hero-copy{max-width:640px}
  .ck-frei{max-width:520px}
  .px-ctacard{min-height:400px}
}

/* ============================================================
   v8) FUENF NEUE SEKTIONEN
   Portal (Software), Case-Block, KPI-Block, Bewertungs-Masonry
   und die Produkt-Bento als Variante B. Alles im bestehenden
   hellen shadcn-Look: .uicard, 1px Hairlines, weiche Schatten,
   Tuerkis nur fuer Akzente.
   ============================================================ */

/* ------------------------------------------------------------
   v8.1 PORTAL - Split mit Browser-Mockup, das nach rechts
   ueber den Container ragt. Die Sektion clippt selbst, damit
   nie horizontal gescrollt werden muss.
   ------------------------------------------------------------ */
.po-sect{overflow:hidden}
.po-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.po-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.04em;margin:14px 0 18px}
.po-copy .lead{font-size:15.5px;max-width:46ch;margin:0 0 26px}
.po-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.po-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.po-ck{
  width:21px;height:21px;border-radius:7px;flex:none;margin-top:1px;
  display:grid;place-items:center;background:var(--brand-wash);color:var(--brand-deep);
}
.po-ck svg{width:12px;height:12px}

.po-vis{position:relative;perspective:1600px}
.po-browser{
  position:relative;width:calc(100% + 68px);
  transform-origin:left center;transform:rotateY(-6deg);
  background:var(--paper);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(23,23,23,.04),0 34px 68px -26px rgba(0,0,0,.24),0 10px 24px -14px rgba(0,0,0,.14);
}
.po-bar{
  display:flex;align-items:center;gap:14px;padding:11px 15px;
  background:var(--surface-alt);border-bottom:1px solid var(--hairline);
}
.po-dots{display:flex;gap:6px;flex:none}
.po-dots i{width:9px;height:9px;border-radius:50%;background:#e2e2e2;display:block}
.po-url{
  display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:290px;flex:1;
  font-family:var(--mono);font-size:11px;color:var(--mid);
  background:var(--paper);border:1px solid var(--hairline);border-radius:8px;padding:4px 12px;
}
.po-url svg{flex:none;color:var(--gruen)}

.po-app{padding:15px 16px 18px}
.po-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:13px;border-bottom:1px solid var(--hairline);margin-bottom:14px;
}
.po-kunde{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.po-kav{
  width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);font-family:var(--mono);font-size:9px;letter-spacing:.3px;
}
.po-tabs{display:inline-flex;gap:3px;background:var(--canvas);border-radius:10px;padding:3px}
.po-tabs i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;
  color:var(--mid);padding:4px 9px;border-radius:7px;white-space:nowrap;
}
.po-tabs i.on{background:var(--paper);color:var(--ink-soft);box-shadow:var(--sh-card)}
.po-chips{display:inline-flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.po-chip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:10.5px;color:var(--mid);background:var(--canvas);border-radius:8px;padding:4px 9px;
}
.po-chip b{color:var(--ink-soft);font-weight:500;font-size:10.5px}
.po-chip-neu{background:var(--brand-wash);color:var(--brand-deep)}
.po-chip-neu b{color:var(--brand-deep)}

.po-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;align-items:stretch}
.po-col{background:var(--canvas);border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:9px}
.po-col-h{display:flex;align-items:center;justify-content:space-between;gap:6px}
.po-col-n{
  display:inline-flex;align-items:center;gap:6px;min-width:0;
  font-family:var(--mono);font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:var(--mid);
}
.po-col-c{font-size:9px;color:var(--mid)}
.po-pt{width:6px;height:6px;border-radius:50%;flex:none;background:var(--brand)}
.po-pt.kon{background:#c4c4c4}
.po-pt.ter{background:var(--brand-deep)}
.po-pt.gew{background:var(--gruen)}
.po-cards{display:flex;flex-direction:column;gap:8px}
.po-card{
  background:var(--paper);border:1px solid var(--hairline);border-radius:10px;
  padding:9px 10px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.po-card-t{display:flex;align-items:flex-start;gap:8px}
.po-av{
  width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--canvas);color:var(--mid);font-family:var(--mono);font-size:8.5px;letter-spacing:.3px;
}
.po-t{font-size:11.5px;font-weight:500;line-height:1.34;letter-spacing:-.012em;color:var(--ink-soft)}
.po-tags{display:flex;flex-wrap:wrap;gap:5px}
.po-src{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.3px;color:var(--mid);
  background:var(--canvas);border-radius:6px;padding:3px 6px;
}
.po-src svg{width:10px;height:10px;flex:none}
.po-ant{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.2px;
  color:var(--brand-deep);background:var(--brand-wash);border-radius:6px;padding:3px 6px;
}
.po-ant.ok{color:var(--gruen);background:var(--gruen-wash)}
.po-won{box-shadow:0 1px 2px rgba(0,0,0,.05),inset 3px 0 0 rgba(13,122,77,.32)}

/* Karte wandert von "Neu" nach "Termin", neue Karte poppt nach.
   Der Startzustand haengt an .po-start und gilt nur, solange
   .po-on fehlt; dadurch springt nichts und ohne JS steht das
   Board sofort im Endzustand. */
.po-fly{position:relative;z-index:3}
.po-browser.po-start:not(.po-on) .po-fly{
  transform:translate(var(--dx,0px),var(--dy,0px));transition:none;
  box-shadow:0 14px 26px -10px rgba(0,0,0,.3);
}
.po-browser.po-on .po-fly{
  transform:none;
  transition:transform 1.2s cubic-bezier(.45,.02,.18,1),box-shadow .5s .9s;
}
.po-browser.po-start:not(.po-on) .po-new{opacity:0;transform:translateY(6px) scale(.97);transition:none}
.po-browser.po-on .po-new{
  transition:opacity .5s .72s cubic-bezier(.2,.8,.2,1),transform .55s .72s cubic-bezier(.34,1.56,.64,1);
}
.po-browser.po-start:not(.po-on) .po-chip-neu{opacity:0;transform:translateY(4px);transition:none}
.po-browser.po-on .po-chip-neu{
  transition:opacity .5s 1.12s cubic-bezier(.2,.8,.2,1),transform .5s 1.12s cubic-bezier(.2,.8,.2,1);
}

/* Schwebende Pills rund um das Mockup */
.po-pill{
  position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill);
  box-shadow:var(--sh-lift);padding:9px 15px;font-size:12.5px;font-weight:500;color:var(--ink-soft);
}
.po-pill svg{width:13px;height:13px;flex:none;color:var(--brand-deep)}
.po-pill i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--gruen);box-shadow:0 0 0 3px var(--gruen-wash)}
.po-p1{top:-20px;left:-30px;animation:poSchweb 6.2s ease-in-out infinite}
.po-p2{bottom:26px;left:-48px;animation:poSchweb 7.4s .7s ease-in-out infinite}
.po-p3{bottom:-24px;left:24%;animation:poSchweb 6.8s .35s ease-in-out infinite}
@keyframes poSchweb{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:1380px){
  .po-browser{width:calc(100% + 34px)}
  .po-p2{left:-32px}
}
@media(max-width:1099.98px){
  .po-grid{grid-template-columns:1fr;gap:38px}
  .po-vis{perspective:none}
  .po-browser{width:100%;transform:none}
  .po-copy .lead{max-width:60ch}
  /* Einspaltig gibt es nichts mehr zum Umschweben: aus den
     schwebenden Pills wird eine ruhige Chip-Reihe unter dem
     Mockup. Nie freie Pills ohne Bezug zum Browserfenster. */
  .po-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .po-pill{
    position:static;inset:auto;animation:none;
    font-size:11.5px;padding:7px 12px;box-shadow:var(--sh-card);
  }
}
@media(max-width:820px){
  .po-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-chips{margin-left:0}
}
@media(max-width:560px){
  .po-board{grid-template-columns:1fr}
  .po-tabs{display:none}
  .po-app{padding:13px 12px 15px}
  .po-pills{gap:6px;margin-top:12px}
  .po-pill{font-size:11px;padding:6px 10px;gap:6px}
}

/* ------------------------------------------------------------
   v8.2 FALLBEISPIEL-BAUSTEINE - Zitat, Person, Stat-Zeile
   Werden seit v11 im Akkordeon der Fallbeispiel-Liste genutzt
   ------------------------------------------------------------ */
.cb-quote{
  margin:18px 0 0;font-size:28px;line-height:1.34;letter-spacing:-.032em;
  font-weight:500;color:var(--ink);text-wrap:balance;
}
.cb-wer{display:flex;align-items:center;gap:12px;margin-top:26px}
.cb-av{
  width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--canvas);border:1px solid var(--hairline);display:grid;place-items:center;
}
.cb-av img{width:70%;height:70%;object-fit:contain}
.cb-n{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.cb-f{display:block;font-size:12.5px;color:var(--mid);margin-top:2px}
.cb-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.cb-stat{padding:18px 18px 18px 20px;border-left:1px solid var(--hairline)}
.cb-stat:first-child{border-left:0;padding-left:0}
.cb-z{display:block;font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.025em;color:var(--ink);line-height:1.2}
.cb-l{display:block;font-size:12px;color:var(--mid);margin-top:6px;line-height:1.42}
@media(max-width:900px){
  .cb-quote{font-size:22px}
  .cb-stats{grid-template-columns:1fr}
  .cb-stat{border-left:0;border-top:1px solid var(--hairline);padding:14px 0}
  .cb-stat:first-child{border-top:0}
}

/* ------------------------------------------------------------
   v8.3 KPI-BLOCK 2x2 mit Haltungszitat
   ------------------------------------------------------------ */
.kz-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.kz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--px-gap);grid-auto-rows:1fr}
.kz-tile{
  margin-bottom:0;padding:26px 22px 24px;display:flex;flex-direction:column;
  border-radius:20px;
}
.kz-z{font-family:var(--mono);font-size:44px;font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.kz-t{font-size:15px;font-weight:600;letter-spacing:-.02em;margin-top:13px}
.kz-l{font-size:12.5px;line-height:1.5;color:var(--mid);margin-top:6px}
.kz-fuss{margin-top:18px;font-size:12px;line-height:1.6;color:var(--mid);max-width:56ch}
.kz-quote{
  margin:16px 0 0;font-size:26px;line-height:1.38;letter-spacing:-.03em;
  font-weight:500;color:var(--ink);max-width:26ch;text-wrap:balance;
}
.kz-wer{display:flex;align-items:center;gap:13px;margin-top:28px}
.kz-avs{display:flex;flex:none}
.kz-avs img{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2px solid var(--paper);box-shadow:var(--sh-card);margin-left:-13px;
}
.kz-avs img:first-child{margin-left:0}
.kz-n{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.kz-r{display:block;font-size:12.5px;color:var(--mid);margin-top:2px}
.kz-pill{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;height:42px;padding:0 20px;
  border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--hairline);
  box-shadow:var(--sh-card);font-size:13.5px;font-weight:500;color:var(--ink);
  transition:transform .2s,box-shadow .2s,color .2s;
}
.kz-pill:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);color:var(--brand-deep)}
@media(max-width:980px){
  .kz-grid{grid-template-columns:1fr;gap:40px}
  .kz-quote{font-size:22px;max-width:38ch}
}
@media(max-width:520px){
  .kz-tiles{grid-template-columns:1fr}
  .kz-z{font-size:38px}
}

/* ------------------------------------------------------------
   v8.4 BEWERTUNGS-MASONRY, oben und unten ausgeblendet
   ------------------------------------------------------------ */
.bw-wall{
  position:relative;max-height:640px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 46px,#000 calc(100% - 118px),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 46px,#000 calc(100% - 118px),rgba(0,0,0,0) 100%);
}
.bw-cols{column-count:3;column-gap:var(--px-gap)}
.bw-card{padding:22px;margin-bottom:var(--px-gap);border-radius:20px}
.bw-card:hover{transform:none;box-shadow:var(--sh-card)}
.bw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.bw-g{width:22px;height:22px;display:grid;place-items:center;flex:none}
.bw-g svg{width:18px;height:18px}
.bw-stars{color:#f0a500;letter-spacing:1.6px;font-size:12.5px}
.bw-tx{font-size:14px;line-height:1.62;color:var(--ink-soft);margin:0 0 18px}
.bw-wer{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--hairline)}
.bw-av{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--canvas);border:1px solid var(--hairline);
}
.bw-av .kuerzel{font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--mid);letter-spacing:.3px}
.bw-wer-tx{min-width:0}
.bw-n{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em}
.bw-f{display:block;font-size:11.5px;color:var(--mid);margin-top:1px}
.bw-d{margin-left:auto;font-size:10.5px;color:var(--mid);white-space:nowrap;flex:none}
.bw-wall .bw-card{opacity:0;transform:translateY(20px)}
.bw-wall.in .bw-card{animation:bwIn .75s cubic-bezier(.2,.8,.2,1) forwards}
.bw-wall.in .bw-card:nth-child(1){animation-delay:.02s}
.bw-wall.in .bw-card:nth-child(2){animation-delay:.08s}
.bw-wall.in .bw-card:nth-child(3){animation-delay:.14s}
.bw-wall.in .bw-card:nth-child(4){animation-delay:.20s}
.bw-wall.in .bw-card:nth-child(5){animation-delay:.26s}
.bw-wall.in .bw-card:nth-child(6){animation-delay:.32s}
.bw-wall.in .bw-card:nth-child(7){animation-delay:.38s}
.bw-wall.in .bw-card:nth-child(8){animation-delay:.44s}
.bw-wall.in .bw-card:nth-child(9){animation-delay:.50s}
@keyframes bwIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.bw-fuss{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:32px}
.bw-badge{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill);
  box-shadow:var(--sh-card);padding:9px 18px;font-size:13px;color:var(--ink-soft);
}
.bw-badge svg{width:17px;height:17px;flex:none}
.bw-badge b{font-weight:500}
.bw-badge-s{color:var(--mid);font-size:12.5px}
.bw-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink);transition:color .2s}
.bw-link:hover{color:var(--brand-deep)}
@media(max-width:900px){.bw-cols{column-count:2}.bw-wall{max-height:560px}}
@media(max-width:600px){.bw-cols{column-count:1}.bw-wall{max-height:640px}.bw-sep{display:none}}

/* ------------------------------------------------------------
   v8) Reduzierte Bewegung
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .po-pill{animation:none}
  .po-browser.po-start .po-fly,
  .po-browser.po-start .po-new,
  .po-browser.po-start .po-chip-neu{transform:none;opacity:1;transition:none}
  .bw-wall .bw-card{opacity:1;transform:none;animation:none}
}

/* ============================================================
   v9) Feedback-Runde 9
   1) Hero-CTA gross, Splitter und KPI-Kacheln proportional
   2) Header-CTA tuerkis und groesser (alle 9 Seiten)
   3) Logo-Reihe direkt unter dem Hero, rotierend
   4) Case-Block kompakt im Querformat mit Datenblatt
   5) Branchen-Band randlos ueber die volle Breite
   6) Tuerkis-Highlight mit gezeichnetem Unterstrich
   7) Portal als Software mit vier Benefit-Karten
   ============================================================ */

/* ------------------------------------------------------------
   v9.1 HERO-CTA - der Hauptknopf traegt die Sektion
   ------------------------------------------------------------ */
.px-hero-cta{margin-top:24px;gap:14px}
.px-hero-cta .btn{
  height:60px;padding:0 36px;font-size:22px;font-weight:500;
  border-radius:20px;letter-spacing:-.02em;
  box-shadow:0 10px 24px -12px rgba(0,174,181,.42),0 2px 8px -3px rgba(0,174,181,.22);
}
.px-hero-cta .btn .arr{font-size:20px}
.px-hero-cta .btn:hover{
  box-shadow:0 22px 46px -14px rgba(0,174,181,.66),0 6px 16px -6px rgba(0,174,181,.4);
}

/* Splitter und KPI-Kacheln wachsen mit, damit die Spalte ruhig bleibt */
.px-split{margin-top:26px;padding:4px}
.px-split .split-btn{font-size:14.5px;padding:9px 20px;border-radius:16px}
.px-kpis{gap:14px;margin-top:34px}
.px-kpi{padding:15px 20px;gap:13px;border-radius:18px}
.px-kpi-ic{width:36px;height:36px;border-radius:11px}
.px-kpi-t{font-size:14.5px}
.px-kpi-s{font-size:13px}
.px-hero .hero-copy .lead{font-size:17.5px}

@media(max-width:760px){
  .px-hero-cta .btn{height:56px;font-size:19px;padding:0 26px}
  .px-split .split-btn{font-size:13.5px;padding:8px 16px}
  .px-kpi{padding:13px 16px}
  .px-kpi-t{font-size:13.5px}
}
@media(max-width:400px){
  .px-hero-cta .btn{width:100%;justify-content:center;padding:0 16px;height:54px;font-size:18px}
  .px-split .split-btn{font-size:12.5px;padding:8px 8px}
}

/* ------------------------------------------------------------
   v9.2 HEADER-CTA - tuerkis, groesser, auf allen Seiten gleich
   ------------------------------------------------------------ */
#nav .nav-cta{
  height:48px;padding:0 26px;font-size:17px;font-weight:500;
  background:var(--brand);color:#fff;border-radius:999px;letter-spacing:-.015em;
  box-shadow:0 8px 20px -10px rgba(0,174,181,.55);
}
#nav .nav-cta:hover{
  background:var(--brand-deep);color:#fff;
  box-shadow:0 12px 26px -10px rgba(0,174,181,.6);
}
#nav.px-kompakt .nav-cta{height:44px;padding:0 22px;font-size:16px}
#nav .nav-mob-cta{
  background:var(--brand);color:#fff;height:50px;font-size:17px;
  box-shadow:0 10px 24px -12px rgba(0,174,181,.55);
}
#nav .nav-mob-cta:hover{background:var(--brand-deep);color:#fff}

/* ------------------------------------------------------------
   v9.3 LOGO-REIHE unter dem Hero
   Fuenf Plaetze, jeder wechselt fuer sich alle drei Sekunden,
   versetzt um 0,4 Sekunden. Altes Logo faehrt nach oben raus,
   neues kommt von unten nach.
   ------------------------------------------------------------ */
.lg-sect{padding:34px 0 10px}
.lg-line{
  margin:0 0 24px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13.5px;color:var(--mid);
}
.lg-line b{color:var(--ink-soft);font-weight:500}
.lg-line svg{color:var(--brand-deep);flex:none}
.lg-row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;gap:clamp(14px,3vw,44px);
}
.lg-slot{position:relative;height:44px;overflow:hidden}
.lg-item{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s cubic-bezier(.2,.8,.2,1);
}
.lg-item img{
  max-height:30px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.6;
}
.lg-item img.quadrat{max-height:44px}
.lg-wort{
  font-size:15px;font-weight:600;letter-spacing:-.02em;color:#b0b0b0;
  white-space:nowrap;
}
.lg-item.lg-raus{transform:translateY(-100%);opacity:0}
.lg-item.lg-rein{transform:translateY(100%);opacity:0}

@media(max-width:760px){
  .lg-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .lg-slot:nth-child(n+4){display:none}
  .lg-sect{padding:26px 0 4px}
}
@media(prefers-reduced-motion:reduce){
  .lg-item{transition:none}
  .lg-item.lg-raus,.lg-item.lg-rein{transform:none;opacity:1}
}

/* ------------------------------------------------------------
   v9.4 FALLBEISPIEL-INHALT - Datenblatt und 16:9-Medienflaeche
   Links Ausgangslage, Ziel, Ergebnis, rechts das Medium
   ------------------------------------------------------------ */
.cb-daten{margin-top:16px;border-top:1px solid var(--hairline)}
.cb-zeile{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;
  padding:9px 0;border-bottom:1px solid var(--hairline);align-items:start;
}
.cb-lab{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.7px;
  text-transform:uppercase;color:var(--mid);padding-top:3px;
}
.cb-val{font-size:14px;line-height:1.48;color:var(--ink-soft)}
.cb-stats{
  margin-top:16px;border-top:0;border-bottom:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cb-stat{padding:0 14px;border-left:1px solid var(--hairline)}
.cb-stat:first-child{padding-left:0}
.cb-z{font-size:16.5px}
.cb-l{font-size:11.5px;margin-top:4px}
.cb-quote{
  margin:18px 0 0;font-size:18px;line-height:1.45;letter-spacing:-.02em;
  font-weight:500;color:var(--ink);
}
.cb-wer{margin-top:14px;gap:11px}
.cb-av{width:38px;height:38px}
.cb-n{font-size:13.5px}
.cb-f{font-size:12px}

/* Medienflaeche rechts: Querformat mit Play-Overlay */
.cb-medien{
  position:relative;margin:0;border-radius:18px;overflow:hidden;
  aspect-ratio:16/9;box-shadow:var(--sh-card);background:var(--canvas);
}
.cb-medien img{width:100%;height:100%;object-fit:cover;display:block}
.cb-medien::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.34) 100%);
}
.cb-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.cb-medien:hover .cb-play{transform:translate(-50%,-50%) scale(1.08)}
.cb-medien .px-chip{z-index:2;left:14px;bottom:14px}

@media(max-width:900px){
  .cb-medien{order:-1}
  .cb-zeile{grid-template-columns:1fr;gap:3px;padding:10px 0}
  .cb-lab{padding-top:0}
  .cb-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cb-stat{border-left:1px solid var(--hairline);border-top:0;padding:0 10px}
  .cb-stat:first-child{padding-left:0}
}
@media(max-width:560px){
  .cb-quote{font-size:16.5px}
  .cb-stats{grid-template-columns:1fr}
  .cb-stat{border-left:0;border-top:1px solid var(--hairline);padding:11px 0}
  .cb-stat:first-child{border-top:0;padding-top:0}
  .cb-play{width:48px;height:48px}
}

/* ------------------------------------------------------------
   v9.5 BRANCHEN-BAND randlos
   Die Reihe haengt direkt an der Sektion und damit an der
   Body-Breite. Kein 100vw, deshalb kein Scrollbalken-Ueberhang.
   ------------------------------------------------------------ */
.px-band{padding:10px 0 8px}
.px-band-kopf{margin:0 0 18px}
.px-band-row{
  width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;height:360px;border:0;border-radius:0;background:var(--hairline);
}
.px-band-item{border-radius:0}
.px-band-item img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.px-band-item:hover img{transform:scale(1.03)}
.px-band .px-chip{font-size:16px;padding:8px 18px;left:16px;bottom:16px}
.px-band-item:nth-child(2) .px-chip,
.px-band-item:nth-child(4) .px-chip{bottom:16px;top:auto}

@media(max-width:1100px){.px-band-row{height:300px}}
@media(max-width:760px){
  .px-band-row{
    display:flex;height:250px;gap:8px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;background:none;padding:0 14px;
  }
  .px-band-row::-webkit-scrollbar{display:none}
  .px-band-item{flex:0 0 78%;scroll-snap-align:center;border-radius:14px}
  .px-band-item:first-child{margin-left:0}
  .px-band .px-chip{font-size:14px;padding:6px 14px;left:12px;bottom:12px}
  .px-band-item:nth-child(2) .px-chip,
  .px-band-item:nth-child(4) .px-chip{bottom:12px;top:auto}
}

/* ------------------------------------------------------------
   v9.6 TUERKIS-HIGHLIGHT - nur Farbe, kein Unterstrich mehr
   (v12b: der gezeichnete SVG-Strich ist entfallen)
   ------------------------------------------------------------ */
.hl-tk{color:var(--brand)}

/* ------------------------------------------------------------
   v9.7 PORTAL als Software: vier Benefit-Karten
   ------------------------------------------------------------ */
/* Nur ab 1100px zwei Spalten. Ohne die Media-Query wuerde diese
   spaete Regel den Einspalter aus dem Portal-Block ueberschreiben. */
@media(min-width:1100px){
  .po-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.po-copy h2{margin:12px 0 14px}
.po-copy .lead{max-width:52ch;margin:0 0 22px}
.po-bento{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:0 0 20px;align-items:stretch;
}
.po-bcard{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper);border:1px solid var(--hairline);border-radius:16px;
  padding:16px 16px 18px;box-shadow:var(--sh-card);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.po-bcard:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(23,23,23,.05),0 14px 30px -14px rgba(10,10,10,.24)}
.po-bic{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);margin-bottom:12px;
}
.po-bic svg{width:16px;height:16px}
.po-bt{margin:0 0 5px;font-size:14.5px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.po-bp{margin:0;font-size:13px;line-height:1.5;color:var(--mid)}
.po-warum{
  display:flex;align-items:flex-start;gap:11px;margin:0 0 22px;
  padding:14px 16px;border-radius:14px;
  background:var(--brand-wash-soft);border:1px solid rgba(0,174,181,.16);
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}
.po-warum b{font-weight:600;color:var(--brand-deep)}
.po-warum svg{flex:none;color:var(--brand-deep);margin-top:2px}
@media(max-width:900px){
  .po-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .po-bento{grid-template-columns:1fr}
}
.po-produkt{
  margin:10px 0 0;font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
}
.po-produkt::before{
  content:"";display:inline-block;vertical-align:middle;
  width:9px;height:9px;border-radius:3px;background:var(--brand);
  margin-right:9px;margin-top:-2px;
}

/* Der Reveal-Rahmen der H1 clippt am Padding-Rand. Etwas Luft
   unten, damit der gezeichnete Strich nicht abgeschnitten wird. */
h1 .hl{padding-bottom:.12em}

/* Auf dunklen Bloecken bleibt Tuerkis das Highlight */
.px-ctacard .hl-tk,.px-ctacopy .hl-tk{color:var(--brand)}

/* v9 Nachzug: Bandreihe braucht eine feste Zeile, sonst wachsen
   die Kacheln auf die Bildhoehe und werden nur weggeclippt. */
.px-band-row{grid-template-rows:minmax(0,1fr);align-items:stretch}
.px-band-item{min-height:0;height:100%}

/* v9 Nachzug: Case-Block bleibt unter 560px Hoehe */
.cb-zeile{padding:8px 0}
.cb-daten{margin-top:14px}
.cb-stats{margin-top:14px}
.cb-quote{margin-top:16px}
.cb-wer{margin-top:12px}

/* v9 Nachzug: beide Reihen der Benefit-Karten gleich hoch */
.po-bento{grid-auto-rows:1fr}

/* v9 Nachzug: Logos etwas praesenter, damit helle Marken tragen */
.lg-item img{opacity:.72}

/* ============================================================
   v10: echte Daten. Verlinkte Chips, Videostory-Zeile,
   Team-Ueberschrift.
   ============================================================ */

/* Google-Chip im Hero und Badge unter der Bewertungswand sind
   jetzt Links auf das Google-Profil. */
.px-kpi-link,
a.bw-badge{text-decoration:none;color:inherit}
.px-kpi-link{transition:border-color .25s,transform .25s}
.px-kpi-link:hover{transform:translateY(-1px)}
a.bw-badge:hover{border-color:rgba(10,10,10,.22)}

/* Team-Ueberschrift ueber dem Slider */
.ab-team-h{
  margin:64px 0 22px;font-size:clamp(20px,2.2vw,26px);
  font-weight:600;letter-spacing:-.025em;line-height:1.25;
}

/* Fallbeispiel: Play-Flaeche ist bei Kenda ein echter Link */
a.cb-play{text-decoration:none}

/* Ansprechpartner-Durchwahl im Footer ist jetzt ein tel-Link */
a.px-ad{text-decoration:none}
a.px-ad:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   v11) Fallbeispiele als aufklappbare Liste
   Alle Referenzen untereinander, geschlossen eine Zeile mit
   Logo, Firma, Branche und Ergebnis-Kurzzahl. Aufgeklappt das
   bekannte Datenblatt links und die Medienflaeche rechts.
   ============================================================ */
.fb-liste{display:flex;flex-direction:column;gap:12px;margin-top:40px}

.fb-item{margin-bottom:0;padding:0;border-radius:18px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.fb-item:hover{transform:none;box-shadow:var(--sh-card)}
.fb-item.fb-offen{box-shadow:var(--sh-lift,0 18px 40px -22px rgba(0,0,0,.28))}

.fb-kopf{margin:0;font-size:inherit;font-weight:400}
.fb-btn{
  width:100%;display:grid;align-items:center;gap:16px;
  grid-template-columns:44px minmax(0,1fr) auto auto 26px;
  padding:16px 22px;border:0;background:none;cursor:pointer;
  text-align:left;color:var(--ink);font:inherit;
  transition:background .22s;
}
.fb-btn:hover{background:var(--canvas)}
.fb-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:18px}

.fb-logo{
  width:40px;height:40px;border-radius:11px;flex:none;overflow:hidden;
  background:var(--canvas);border:1px solid var(--hairline);
  display:grid;place-items:center;
}
.fb-logo img{width:76%;height:76%;object-fit:contain;display:block}
.fb-logo .kuerzel{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mid);letter-spacing:.4px}

.fb-firma{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.2;min-width:0}
.fb-meta{display:contents}
.fb-branche{
  font-family:var(--mono);font-size:11px;letter-spacing:.4px;
  padding:5px 11px;border-radius:var(--r-pill,999px);white-space:nowrap;
  background:var(--canvas);color:var(--mid);box-shadow:inset 0 0 0 1px var(--hairline);
}
.fb-kpi{
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:-.02em;
  color:var(--brand-deep);white-space:nowrap;text-align:right;
}
.fb-chev{
  /* feste Spalte: bleibt buendig, auch wenn eine Zeile keine KPI hat */
  grid-column:5;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--mid);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hairline);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),background .22s,color .22s;
}
.fb-item.fb-offen .fb-chev{transform:rotate(180deg);background:var(--brand);color:#fff;box-shadow:none}

.fb-panel{height:0;overflow:hidden;transition:height .32s cubic-bezier(.2,.8,.2,1)}
.fb-panel-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:center;
  padding:6px 22px 26px;border-top:1px solid var(--hairline);margin:0 0 0;
}
.fb-item .cb-daten{margin-top:14px}
.fb-item .cb-quote{font-size:17px}
.fb-item .px-chip{font-size:12.5px}

@media(max-width:900px){
  .fb-btn{
    grid-template-columns:40px minmax(0,1fr) 26px;
    grid-template-areas:"logo firma chev" "logo meta meta";
    row-gap:7px;padding:14px 18px;
  }
  .fb-logo{grid-area:logo;align-self:start}
  .fb-firma{grid-area:firma;font-size:18px}
  .fb-chev{grid-area:chev}
  .fb-meta{
    display:flex;grid-area:meta;align-items:center;
    justify-content:space-between;gap:10px;min-width:0;
  }
  .fb-branche{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .fb-kpi{flex:none;font-size:13px}
  .fb-panel-in{grid-template-columns:1fr;padding:6px 18px 22px;gap:20px}
}
@media(max-width:560px){
  .fb-btn{gap:12px;padding:13px 15px}
  .fb-firma{font-size:17px}
  .fb-branche{font-size:10.5px;padding:4px 9px}
  .fb-kpi{font-size:12px}
  .fb-panel-in{padding:6px 15px 20px}
}
@media (prefers-reduced-motion:reduce){
  .fb-panel{transition:none}
  .fb-chev{transition:none}
}

/* ---------- Wortmarke Lead+ / Team+ (wie Logo: Wort + türkises Plus) ---------- */
.wm{white-space:nowrap;font-weight:inherit;color:var(--ink,#1a1a1a)}
.wm sup{position:relative;top:-.42em;margin-left:.04em;font-size:.72em;line-height:0;font-weight:800;color:var(--brand);vertical-align:baseline}
.px-eyebrow .wm{color:inherit}
.px-eyebrow .wm sup{font-size:.85em;top:-.3em}

/* ============================================================
   UNTERSEITE NEUKUNDENGEWINNUNG
   Eigene Bausteine der Leistungsseite. Alles Weitere kommt aus
   den Startseiten-Klassen weiter oben. Nur neue Selektoren,
   keine bestehende Regel wird veraendert.
   ============================================================ */

/* ---------- Unterseite: Kennzahlen-Reihe ---------- */
.px-kpi-sect{padding:14px 0 4px}
.px-kpi-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(18px,2.4vw,34px);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:26px 0;
}
.px-kpi-zelle{display:flex;flex-direction:column;gap:8px;min-width:0}
.px-kpi-zelle + .px-kpi-zelle{
  border-left:1px solid var(--hairline);
  padding-left:clamp(18px,2.4vw,34px);
}
.px-kpi-wert{
  font-size:clamp(30px,3.4vw,44px);font-weight:500;line-height:1;
  letter-spacing:-.045em;color:var(--ink);
}
.px-kpi-wert small{font-size:.44em;font-weight:400;color:var(--mid);letter-spacing:-.01em}
.px-kpi-txt{
  font-family:var(--mono);font-size:11px;line-height:1.5;
  letter-spacing:.5px;text-transform:uppercase;color:var(--mid);
}
@media(max-width:820px){
  .px-kpi-row{grid-template-columns:repeat(2,1fr);row-gap:26px;padding:24px 0}
  .px-kpi-zelle + .px-kpi-zelle{border-left:0;padding-left:0}
  .px-kpi-zelle:nth-child(2n){
    border-left:1px solid var(--hairline);
    padding-left:clamp(18px,4vw,28px);
  }
}
@media(max-width:460px){
  .px-kpi-row{grid-template-columns:1fr;row-gap:20px}
  .px-kpi-zelle:nth-child(2n){border-left:0;padding-left:0}
  .px-kpi-zelle + .px-kpi-zelle{border-top:1px solid var(--hairline);padding-top:20px}
}

/* ---------- Unterseite: Gründe ---------- */
.px-gruende{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,3vw,44px);
  border-top:1px solid var(--hairline);
  padding-top:clamp(28px,3vw,40px);
}
.px-grund{min-width:0}
.px-grund + .px-grund{
  border-left:1px solid var(--hairline);
  padding-left:clamp(24px,3vw,44px);
}
.px-grund-nr{
  font-size:clamp(40px,4.4vw,56px);font-weight:500;line-height:1;
  letter-spacing:-.05em;color:var(--brand);margin:0 0 18px;
}
.px-grund h3{
  font-size:21px;font-weight:600;line-height:1.28;letter-spacing:-.03em;
  margin:0 0 12px;text-wrap:balance;
}
.px-grund p{font-size:15.5px;line-height:1.6;color:var(--mid);margin:0;max-width:38ch}
@media(max-width:900px){
  .px-gruende{grid-template-columns:1fr;row-gap:0}
  .px-grund + .px-grund{
    border-left:0;padding-left:0;
    border-top:1px solid var(--hairline);
    margin-top:28px;padding-top:28px;
  }
  .px-grund p{max-width:none}
}

/* ---------- Unterseite: Passt das? ---------- */
.px-passt{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--px-gap);align-items:stretch}
.px-passt-card{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.px-passt-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.px-passt-ic{
  width:36px;height:36px;border-radius:11px;flex:none;
  display:grid;place-items:center;margin-bottom:18px;
  background:var(--brand-wash);color:var(--brand-deep);
}
.px-passt-ic svg{width:17px;height:17px}
.px-passt-card h3{
  font-size:21px;font-weight:600;line-height:1.28;letter-spacing:-.03em;
  margin:0 0 10px;text-wrap:balance;
}
.px-passt-card p{font-size:15.5px;line-height:1.6;color:var(--mid);margin:0}
@media(max-width:820px){.px-passt{grid-template-columns:1fr}}

/* ---------- Unterseite: Dunkelkarte mit Chart ---------- */
.px-dark-wide .px-eyebrow{color:#a3a3a3}
.px-dark-wide h2{margin:16px 0 12px}
.px-dark-wide .lead{max-width:640px}
.px-dark-wide .chart-card{margin-top:clamp(30px,3.6vw,44px)}

/* ---------- Unterseite: Ergebnisse mit vier Fällen ---------- */
.px-cases-vier{grid-template-columns:repeat(2,1fr)}
.px-cases-vier .px-case{padding:16px 16px 20px}
.px-cases-vier .px-case h3{font-size:23px;margin-top:18px}
.px-cases-vier .px-case-kpi{font-size:13.5px}
.px-cases-vier .px-case-kpi .zahl{font-size:13.5px}
@media(max-width:600px){.px-cases-vier{grid-template-columns:1fr}}

/* ---------- Unterseite Neukunden: Pipeline-Ticker im Hero ---------- */
.ck-sub{width:100%;max-width:100%}
.ck-sub .hw{width:100%;max-width:none}
.ein-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ein-vol b{display:inline-block;min-width:9ch;text-align:right;color:var(--brand-deep,var(--brand));font-weight:600;transition:transform .25s ease}
.ein-vol b.vol-tick{transform:scale(1.06)}
.ein-budget{
  flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.2px;
  padding:3px 8px;border-radius:999px;background:var(--canvas);color:var(--ink-soft);
  border:1px solid var(--hairline);white-space:nowrap;margin-right:8px;
}
@media(max-width:640px){.ein-budget{display:none}}
.hero .ein-budget{margin-right:0}
.hero .ein-budget + .ein-badge{display:none}

/* ============================================================
   UNTERSEITE MITARBEITERGEWINNUNG
   Eigene Bausteine der zweiten Leistungsseite. Bewusst andere
   Sektionsformen als bei Neukundengewinnung. Nur neue
   Selektoren, keine bestehende Regel wird veraendert.
   ============================================================ */

/* ---------- Unterseite Mitarbeiter: Bewerber-Ticker im Hero ---------- */
#einQuali{min-width:3ch}
/* Unter 640px blendet .ein-budget aus. Damit die Zeile dann nicht ganz
   ohne Status dasteht, kommt der Statuspunkt hier wieder zurueck.
   Nur fuer die Bewerber-Liste (data-quali), die Neukunden-Seite
   behaelt ihr bisheriges Verhalten. */
@media(max-width:640px){
  .hero .ein-liste[data-quali] .ein-budget + .ein-badge{display:inline-flex}
}

/* ---------- Unterseite Mitarbeiter: Hebel-Stepper ---------- */
.px-hebel{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,3vw,44px);
  padding-top:30px;
}
.px-hebel-linie{
  position:absolute;top:5px;left:0;right:0;height:1px;
  background:linear-gradient(to right,var(--hairline),var(--hairline));
  pointer-events:none;
}
.px-hebel-step{position:relative;min-width:0;display:flex;flex-direction:column}
.px-hebel-knoten{
  position:absolute;top:-30px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--brand);
}
.px-hebel-knoten::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:var(--brand-wash);
}
.px-hebel-badge{margin:0 0 14px}
.px-hebel-step h3{
  font-size:clamp(20px,2vw,23px);font-weight:600;line-height:1.28;
  letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance;
}
.px-hebel-step > p{font-size:15.5px;line-height:1.6;color:var(--mid);margin:0;max-width:40ch}
@media(max-width:900px){
  .px-hebel{grid-template-columns:1fr;padding-top:0;padding-left:30px}
  .px-hebel-linie{top:6px;bottom:6px;left:5px;right:auto;width:1px;height:auto}
  .px-hebel-knoten{top:6px;left:-30px}
  .px-hebel-step + .px-hebel-step{margin-top:34px}
  .px-hebel-step > p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .px-hebel-knoten::after{transition:none}
}

/* ---------- Unterseite Mitarbeiter: Idealzustand-Karten ---------- */
.px-ideal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--px-gap);align-items:stretch}
.px-ideal-card{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:clamp(22px,2.4vw,28px);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.px-ideal-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.px-ideal-card .bviz{
  margin:0 0 22px;padding:0;min-height:132px;
  display:flex;flex-direction:column;justify-content:center;
}
.px-ideal-card .bviz .mail-row:first-child{margin-top:0}
.px-ideal-card h3{
  font-size:21px;font-weight:600;line-height:1.28;letter-spacing:-.03em;
  margin:0 0 10px;text-wrap:balance;
}
.px-ideal-card p{font-size:15.5px;line-height:1.6;color:var(--mid);margin:0}
.px-ideal-card.dunkel{
  background:var(--ink);border-color:rgba(255,255,255,.1);color:#fafafa;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.45);
}
.px-ideal-card.dunkel:hover{box-shadow:0 22px 46px -16px rgba(0,0,0,.55)}
.px-ideal-card.dunkel h3{color:#fafafa}
.px-ideal-card.dunkel p{color:#a3a3a3}
.px-ideal-card.dunkel .uc-row{border-color:rgba(255,255,255,.09);color:#fafafa}
.px-ideal-card.dunkel .uc-row .nm{color:#fafafa}
.px-ideal-zahl{font-family:var(--mono);font-size:13px;color:var(--brand-hover)}
@media(max-width:900px){.px-ideal{grid-template-columns:1fr}
  .px-ideal-card .bviz{min-height:0}
}

/* ---------- Unterseite Mitarbeiter: Nummerierte Liste ---------- */
.px-liste{border-top:1px solid var(--hairline)}
.px-liste-row{
  display:grid;grid-template-columns:clamp(46px,4vw,62px) minmax(0,1fr);
  gap:0 clamp(18px,2.4vw,32px);
  padding:clamp(24px,2.6vw,34px) 0;
  border-bottom:1px solid var(--hairline);
}
.px-liste-nr{
  font-size:clamp(30px,3vw,40px);font-weight:500;line-height:1.05;
  letter-spacing:-.05em;color:var(--brand);margin:0;
}
.px-liste-tx{min-width:0}
.px-liste-tx h3{
  font-size:clamp(20px,2vw,24px);font-weight:600;line-height:1.28;
  letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance;
}
.px-liste-tx p{font-size:15.5px;line-height:1.65;color:var(--mid);margin:0;max-width:74ch}
@media(max-width:640px){
  .px-liste-row{grid-template-columns:1fr;gap:12px 0}
  .px-liste-nr{font-size:26px}
  .px-liste-tx p{max-width:none}
}

/* ---------- Unterseite Mitarbeiter: Datenblatt in der Dunkelkarte ---------- */
.px-datenblatt{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 clamp(18px,2.4vw,34px);
  margin-top:clamp(32px,3.6vw,46px);
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:clamp(26px,2.8vw,34px) 0;
}
.px-daten-zelle{display:flex;flex-direction:column;gap:10px;min-width:0}
.px-daten-zelle + .px-daten-zelle{
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:clamp(18px,2.4vw,34px);
}
.px-daten-wert{
  font-size:clamp(38px,4.4vw,58px);font-weight:500;line-height:1;
  letter-spacing:-.05em;color:#fafafa;
}
.px-daten-txt{
  font-family:var(--mono);font-size:11px;line-height:1.55;
  letter-spacing:.5px;text-transform:uppercase;color:#a3a3a3;
}
.px-daten-fuss{
  margin:18px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.5px;color:#737373;
}
@media(max-width:900px){
  .px-datenblatt{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .px-daten-zelle + .px-daten-zelle{border-left:0;padding-left:0}
  .px-daten-zelle:nth-child(2n){
    border-left:1px solid rgba(255,255,255,.14);
    padding-left:clamp(18px,4vw,28px);
  }
}
@media(max-width:520px){
  .px-datenblatt{grid-template-columns:1fr;row-gap:22px}
  .px-daten-zelle:nth-child(2n){border-left:0;padding-left:0}
  .px-daten-zelle + .px-daten-zelle{border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
}

/* ------------------------------------------------------------
   Z) FAQ-ZEILEN - Titel als span statt h3 (valides Markup im
      Button). Uebernimmt exakt die bisherigen h3-Werte.
   ------------------------------------------------------------ */
.frow-btn .frow-t{font-size:17px;font-weight:500;line-height:1.33;letter-spacing:-.01em}
.px-frows .frow-btn .frow-t{font-size:15.5px}

/* Hero-Pill: Google- und Trustpilot-Icon nebeneinander */
.px-kpi-link .px-kpi-ic{width:auto;min-width:30px;border-radius:999px;padding:0 7px;display:inline-flex;align-items:center;gap:1px}

/* Hero-Pills in einer Zeile */
@media(min-width:421px){
  .px-kpis{flex-wrap:nowrap;gap:10px}
  .px-kpi{padding:12px 14px;gap:9px}
  .px-kpis .px-kpi:first-child{flex:none}
  .px-kpi-t{font-size:13px;flex-wrap:nowrap;white-space:nowrap}
  .px-kpi-s{font-size:11.5px;white-space:nowrap}
  .px-kpi .px-stars{font-size:11px;letter-spacing:1px}
}

/* Bewertungs-Pill neben dem CTA */
.px-hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.px-hero-cta .px-kpi{height:60px;padding:0 18px;border-radius:20px;box-shadow:var(--sh-card)}

/* Hero: mehr Luft oben und unten */
.px-hero{padding-top:164px;padding-bottom:84px}
@media(max-width:980px){.px-hero{padding-top:140px;padding-bottom:60px}}
@media(max-width:640px){.px-hero{padding-top:120px;padding-bottom:44px}}

/* Problem-Sektion: kraeftigeres, dunkleres Rot */
#problem .px-h2-breit .hl-tk{color:#c9060f}
#problem .px-pvis .pm{
  background:linear-gradient(180deg,rgba(201,6,15,.12),rgba(201,6,15,.045));
  border-color:rgba(201,6,15,.24);
}
#problem .pm-delta{color:#b00510;font-weight:600}
#problem .spark.ab path:not(.area){stroke:#c9060f;opacity:.95}
#problem .spark.ab .area{fill:rgba(201,6,15,.16)}
#problem .pbadge.nein{background:rgba(201,6,15,.13);color:#a3040e}
#problem .px-pcard:hover{border-color:rgba(201,6,15,.4)}

/* Bewertungs-Grid: Logos in den Avataren */
.bw-av img{width:80%;height:80%;object-fit:contain}

/* ============================================================
   Mobile-Feinschliff (01.09.2026)
   ============================================================ */
/* Hero-Karten duerfen ihre Grid-Spalte nie aufsprengen */
.px-hero .hero-grid > *{min-width:0}

/* Prozess-Schritte: Luft zwischen Mock-Box und Schritt-Nummer
   (.pz-card p überschrieb das margin der Nummer) */
.pz-card p.pz-num{margin:26px 0 0}

@media(max-width:640px){
  /* CRM-Grafik: vertikaler Ablauf statt gequetschtem Grid */
  .lb-flow{display:flex;flex-direction:column;align-items:center;gap:10px}
  .lb-chans{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .lb-wires{display:none}
  .lb-flow .lb-arrow{display:block;transform:rotate(90deg);width:24px;height:12px;margin:2px 0}
  /* Vertrauen-uns-Logos: sauberes 2x2 statt ausgefranstem Umbruch */
  .ab-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px;justify-items:start;align-items:center}
}

/* ============================================================
   Mobile-Feinschliff Teil 2 (01.09.2026)
   ============================================================ */
@media(max-width:760px){
  /* Branchen-Band: 3 Kacheln oben, 2 unten statt Wisch-Streifen */
  .px-band-row{
    display:grid;grid-template-columns:repeat(6,1fr);height:auto;gap:6px;
    overflow:visible;scroll-snap-type:none;padding:0 14px;background:none;
  }
  .px-band-item{flex:none;border-radius:14px}
  /* oben klein: Gesundheit, Hotellerie, Handel - unten gross: Handwerk, Industrie */
  .px-band-item:nth-child(1){order:1;grid-column:span 2}
  .px-band-item:nth-child(4){order:2;grid-column:span 2}
  .px-band-item:nth-child(5){order:3;grid-column:span 2}
  .px-band-item:nth-child(2){order:4;grid-column:span 3}
  .px-band-item:nth-child(3){order:5;grid-column:span 3}
  .px-band-item img{aspect-ratio:1/1.15;height:100%}
  .px-band .px-chip{font-size:11px;padding:4px 10px;left:8px;bottom:8px}
  .px-band-item:nth-child(2) .px-chip,
  .px-band-item:nth-child(4) .px-chip{bottom:8px;top:auto}
}
@media(max-width:640px){
  /* Portal-Board: nur zwei Statusspalten, sonst wird die Deko zu lang */
  .po-col:nth-child(n+3){display:none}
  /* Mock-Schriften einen Tick groesser */
  .po-ant{font-size:9.5px}
  .po-col-n{font-size:10px}
  /* Ausgewogene Umbrueche in Sektions-Ueberschriften */
  .px-head h2{text-wrap:balance}
  /* Groessere Tap-Flaechen im Footer und bei Inline-Links */
  footer a{display:inline-block;padding:5px 0}
  .ab-link,.bw-link{display:inline-block;padding:8px 0}
}

/* ============================================================
   Mobile-Feinschliff Teil 3 (01.09.2026)
   ============================================================ */
/* Engpass-Umschalter in den Sektionen Problem + Loesung */
.px-split-sekt{margin-top:20px;margin-bottom:16px}

/* ============================================================
   Software-Sektion: Icon neben Kachel-Titel + groessere mobile Typo
   ============================================================ */
.po-bento .po-bcard{display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center}
.po-bento .po-bic{margin-bottom:0;width:30px;height:30px}
.po-bento .po-bt{margin:0}
.po-bento .po-bp{grid-column:1/-1;margin-top:6px}

@media(max-width:640px){
  h2{font-size:33px}
  .po-copy h2{font-size:31px}
  .po-bento .po-bt{font-size:16px}
  .po-bento .po-bp{font-size:14px;line-height:1.55}
}

/* Portal-Widget mobil: verkleinerte Desktop-Ansicht, 3 Phasen, schlanke Karten */
@media(max-width:640px){
  .po-browser{zoom:0.6}
  .po-board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .po-col:nth-child(3){display:flex}
  .po-col:nth-child(4){display:none}
  .po-tabs{display:flex}
  .po-chips{display:none}
  .po-app{padding:16px 14px 18px}
  /* Karten nur mit Avatar + Titel, ohne Chip-Zeilen */
  .po-card .po-tags{display:none}
  /* Feature-Pills als ueberlappende Badges oben rechts am Widget */
  .po-vis{position:relative}
  .po-pills{position:absolute;top:-16px;right:-4px;margin:0;flex-direction:column;align-items:flex-end;gap:7px;z-index:3}
  .po-pill{background:#fff;box-shadow:0 10px 24px -10px rgba(10,10,10,.35),inset 0 0 0 1px var(--hairline)}
  .po-pill:nth-child(2){transform:translateX(-12px)}
  .po-pill:nth-child(3){transform:translateX(-24px)}
}

/* Software-Sektion mobil: Widget direkt nach der Subline, Kacheln danach */
@media(max-width:640px){
  #portal .po-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  #portal .po-copy{display:contents}
  #portal .po-produkt{order:1}
  #portal .po-copy h2{order:2}
  #portal .po-copy .lead{order:3}
  #portal .po-vis{order:4;margin-top:30px}
  #portal .po-bento{order:5;margin-top:26px}
}

/* Kennzeichnung von Beispiel-Widgets */
.ein-demo{
  margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;
  text-transform:uppercase;color:#b3b3af;align-self:center;
}
.po-bar .ein-demo{margin-left:12px}

/* ============================================================
   UX-Fixes (01.09.2026, Audit-Runde 2)
   ============================================================ */
/* Bewertungs-Wall aufklappbar */
.bw-wall.offen{max-height:none;-webkit-mask-image:none;mask-image:none}
.bw-mehr-halter{margin-top:18px}

/* Burger: groessere Tap-Flaeche */
.nav-burger{width:46px;height:44px;padding:0 12px;gap:6px}

/* Fix 03.09.2026: Bei <=560px Logo + CTA + Burger nebeneinander in der Pill,
   Burger darf nie schrumpfen oder aus der Pille ragen (vorher bei 375px oben
   abgeschnitten, CTA aus v9.2 war mit 17px/26px zu breit). */
@media(max-width:560px){
  #nav .nav-in{padding:0 8px 0 14px;gap:6px;overflow:visible}
  #nav .nav-logo img{height:36px}
  #nav .nav-cta,#nav.px-kompakt .nav-cta{height:40px;padding:0 14px;font-size:14px;white-space:nowrap}
  #nav .nav-burger{flex:0 0 46px;margin-left:0;min-width:46px;height:44px}
}
@media(max-width:360px){
  #nav .nav-cta,#nav.px-kompakt .nav-cta{padding:0 11px;font-size:13px}
  #nav .nav-cta .arr{display:none}
}

/* Menue-Panel: dunkles Overlay dahinter (rein visuell) */
body:has(#navMob:not([hidden]))::after{
  content:"";position:fixed;inset:0;background:rgba(10,10,10,.35);
  z-index:90;pointer-events:none;
}

/* Groessere Tap-Flaechen im Footer (Audit: 30px -> 40px+) */
@media(max-width:640px){
  footer a{padding:8px 0}
}

/* Animations-Fallback: bei reduzierter Bewegung alles sofort sichtbar */
@media (prefers-reduced-motion:reduce){
  .lb-chan,.lb-node,.pz-chip,.pz-row,.bw-wall .bw-card,.rv{opacity:1!important;transform:none!important;animation:none!important}
}

/* 03.09.2026: Logo-Leiste, Größenklassen nach Seitenverhältnis */
.lg-slot{height:52px}
.lg-item img.lg-s{max-height:52px}
.lg-item img.lg-m{max-height:42px}
.lg-item img.lg-l{max-height:30px}

/* 03.09.2026: Ergebnis-Kachel statt Platzhalterfoto */
.cb-kachel{
  position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-card);border:1px solid var(--hairline);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(0,166,166,.16),transparent 55%),
    radial-gradient(90% 80% at 0% 100%,rgba(0,166,166,.08),transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--canvas) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,3vw,28px);
}
.cb-kachel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:28px 28px;opacity:.45;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%);
}
.cb-kachel-logo{
  position:absolute;top:clamp(14px,2.4vw,22px);left:clamp(18px,3vw,28px);
  height:44px;max-width:46%;display:flex;align-items:center;
}
.cb-kachel-logo img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.cb-kachel-logo .kuerzel{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--mid);letter-spacing:.4px;padding:8px 12px;border:1px solid var(--hairline);border-radius:10px;background:#fff}
.cb-kachel-zahl{
  position:relative;display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(44px,5.2vw,64px);line-height:1;letter-spacing:-.04em;color:var(--ink);
}
.cb-kachel-lab{
  position:relative;display:block;margin-top:10px;max-width:22ch;
  font-size:14.5px;line-height:1.4;color:var(--ink-soft);
}
.cb-kachel-chip{
  position:absolute;top:clamp(14px,2.4vw,22px);right:clamp(18px,3vw,28px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--brand);background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:6px 10px;
}
@media (max-width:900px){
  .cb-kachel{order:-1}
  .cb-kachel-zahl{font-size:44px}
}

/* 03.09.2026: Ergebnis-Kachel mit Ansprechperson (Foto rechts) */
.cb-kachel.hat-person{padding-right:clamp(18px,3vw,28px)}
.cb-kachel-person{
  position:absolute;top:clamp(14px,2.4vw,22px);right:clamp(18px,3vw,28px);bottom:clamp(14px,2.4vw,22px);
  width:38%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.45);
}
.cb-kachel-person img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.cb-kachel-person figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:#fff;
}
.cb-kachel-person .cb-kachel-n{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cb-kachel-person .cb-kachel-f{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;opacity:.85;margin-top:3px}
.cb-kachel.hat-person .cb-kachel-chip{right:auto;left:auto;top:auto;bottom:clamp(14px,2.4vw,22px);right:calc(38% + clamp(18px,3vw,28px) + 12px);display:none}
.cb-kachel.hat-person .cb-kachel-zahl,.cb-kachel.hat-person .cb-kachel-lab,.cb-kachel.hat-person .cb-kachel-logo{max-width:56%}
.cb-kachel.hat-person .cb-kachel-lab{max-width:20ch}
@media (max-width:640px){
  .cb-kachel-person{width:34%}
  .cb-kachel.hat-person .cb-kachel-zahl{font-size:38px}
}

/* Doppelporträt: breitere Personen-Box */
.cb-kachel-person.breit{width:56%}
.cb-kachel.person-breit .cb-kachel-zahl,.cb-kachel.person-breit .cb-kachel-lab,.cb-kachel.person-breit .cb-kachel-logo{max-width:40%}
.cb-kachel.person-breit .cb-kachel-lab{max-width:16ch}

/* Startseite: Ergebnis-Kacheln in den Case-Karten + aufklappbare weitere Cases */
.px-case .cb-kachel{border-radius:14px}
.px-cases[hidden]{display:none}

/* Startseite: kompakte Ergebnis-Kachel in den kleineren Case-Karten */
.px-case .cb-kachel{padding:14px}
.px-case .cb-kachel-logo{height:26px;top:12px;left:14px;max-width:46%}
.px-case .cb-kachel-zahl{font-size:34px;letter-spacing:-.03em}
.px-case .cb-kachel-lab{font-size:12px;line-height:1.3;margin-top:6px}
.px-case .cb-kachel.hat-person .cb-kachel-zahl,
.px-case .cb-kachel.hat-person .cb-kachel-lab,
.px-case .cb-kachel.hat-person .cb-kachel-logo{max-width:55%}
.px-case .cb-kachel-person{width:40%;top:12px;right:14px;bottom:12px;border-radius:10px}
.px-case .cb-kachel-person figcaption{padding:18px 8px 7px}
.px-case .cb-kachel-person .cb-kachel-n{font-size:11px;line-height:1.2}
.px-case .cb-kachel-person .cb-kachel-f{font-size:8px;margin-top:2px}
.px-case .cb-kachel-chip{top:12px;right:14px;font-size:9px;padding:4px 8px}

/* ============================================================
   Copy- und Design-Runde 03.09.2026 (Review B/C)
   ============================================================ */

/* C7 Kontrast: Primaer-Buttons auf --brand-deep (#007d82, 4,9:1 auf Weiss),
   Headline-Tuerkis auf #008c92 (4,1:1, reicht fuer grosse Schrift),
   Chip-Text auf #005f63 (6,6:1 auf --brand-wash). Das helle Tuerkis
   bleibt fuer Flaechen, Icons und Dekor. */
.btn-brand{background:var(--brand-deep);color:#fff}
.btn-brand:hover{background:#00666b;color:#fff;box-shadow:0 8px 20px -6px rgba(0,125,130,.45)}
#nav .nav-cta{background:var(--brand-deep);box-shadow:0 8px 20px -10px rgba(0,125,130,.55)}
#nav .nav-cta:hover{background:#00666b;box-shadow:0 12px 26px -10px rgba(0,125,130,.6)}
#nav .nav-mob-cta{background:var(--brand-deep)}
#nav .nav-mob-cta:hover{background:#00666b}
.hl-tk{color:#008c92}
.pz-chip,.po-ant,.po-chip-neu,.po-chip-neu b,.po-kav,.ein-badge.b-neu,.lb-tl-v{color:#005f63}
.po-pill svg,.px-eyebrow{color:#006b70}

/* B5 Label ueber dem Hero-Umschalter */
.px-split-l{
  margin:22px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--mid);
}
.px-split-l + .px-split{margin-top:8px}

/* B1 Garantie-Zeile unter dem Hero-CTA */
.px-garantie{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 0;font-size:18px;line-height:1.3;color:var(--ink);letter-spacing:-.01em;
}
.px-garantie svg{flex:none;width:22px;height:22px;color:#006b70}
.px-garantie b{font-weight:600;color:var(--ink)}
@media(max-width:560px){.px-garantie{font-size:16px}}

/* C5 Ergebnis-Link statt Aufklappen */
#ergebnisse .px-mitte{margin-top:34px}

/* B2 Trustpilot-Karten in der Bewertungs-Wall */
.bw-g.bw-tp svg{width:18px;height:18px}

/* C4 Trust-Logos: gleiche optische Hoehe, gleiche Deckkraft */
.ab-logos{gap:clamp(18px,2.2vw,28px)}
.ab-logos img{height:24px;max-width:110px;filter:grayscale(1);opacity:.7}
.ab-logos img.quadrat{height:36px;width:36px}
.ab-logos img.breit{height:24px}
@media(max-width:560px){
  .ab-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:center;justify-items:center}
  .ab-logos img{max-width:100%}
  .ab-logos img.breit{height:20px}
  .ab-logos img.quadrat{height:34px;width:34px}
}

/* C3 Portal-Board mobil: keine 0.6-Verkleinerung mehr, sondern
   horizontal wischbare Spalten in Originalgroesse, Schrift >= 12px */
.po-wisch{display:none}
@media(max-width:640px){
  .po-browser{zoom:1}
  .po-app{padding:14px 12px 16px}
  .po-head{gap:10px}
  .po-kunde{font-size:14px}
  .po-tabs i{font-size:11px;padding:5px 9px}
  .po-wisch{
    display:block;margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.4px;
    text-transform:uppercase;color:var(--mid);
  }
  .po-board{
    display:flex;grid-template-columns:none;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -12px;padding:2px 12px 8px;
  }
  .po-board::-webkit-scrollbar{display:none}
  .po-col,.po-col:nth-child(3),.po-col:nth-child(4),.po-col:nth-child(n+3){
    display:flex;flex:0 0 76%;scroll-snap-align:start;padding:11px;
  }
  .po-col-n{font-size:12px;letter-spacing:.3px}
  .po-col-c{font-size:12px}
  .po-card{padding:11px 12px;gap:9px}
  .po-card .po-tags{display:flex;gap:6px}
  .po-av{width:28px;height:28px;font-size:11px;border-radius:8px}
  .po-t{font-size:14px;line-height:1.35}
  .po-src,.po-ant{font-size:12px;padding:4px 8px}
  .po-src svg{width:12px;height:12px}
  /* Feature-Pills als ruhige Liste unter dem Widget statt ueberlappend */
  .po-pills{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;transform:none}
  .po-pill,.po-pill:nth-child(2),.po-pill:nth-child(3){transform:none;box-shadow:var(--sh-card);font-size:12.5px;padding:8px 12px}
}

/* Modus-Varianten in der Bento-Sektion (04.09.2026) */
.lb-ci em{font-style:normal}
.px-bcopy p[data-eng]{margin-top:0}


/* ============================================================
   EASYANFRAGE - Programm fuer Handwerksbetriebe (17.09.2026)
   Nav-Hinweis und Announcement-Pille im Hero
   (Sektion #handwerk am 16.10.2026 entfernt). Eigenes Praefix
   hwk-, damit nichts mit den bestehenden Bloecken kollidiert.
   ============================================================ */

/* ---------- Nav: abgesetzter Einstieg ---------- */
.nav-links .nav-hw{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--brand-deep);font-weight:500;white-space:nowrap;
}
.nav-links .nav-hw::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-wash-soft);
  transition:box-shadow .25s;
}
.nav-links .nav-hw:hover,.nav-links .nav-hw:focus-visible{
  color:var(--brand-deep);background:var(--brand-wash-soft);
}
.nav-links .nav-hw:hover::before{box-shadow:0 0 0 4px var(--brand-wash)}
.nav-hw-neu{
  flex:none;padding:2px 6px 3px;border-radius:999px;
  background:var(--brand-wash);color:var(--brand-deep);
  font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;line-height:1.2;
}

/* Fuenf Punkte muessen zwischen 1024 und 1200 in die Pill passen */
@media(max-width:1200px){
  #nav .nav-links{gap:0}
  #nav .nav-links a{padding:9px 11px}
}
@media(max-width:1040px){
  #nav .nav-links a{padding:9px 9px}
  .nav-links .nav-hw{gap:6px}
}
@media(max-width:940px){
  #nav .nav-links a{padding:9px 8px;font-size:13.5px}
  .nav-links .nav-hw-neu{display:none}
}

/* Mobil-Panel: gleiche Hervorhebung, eigene Zeile */
.nav-mob-link.nav-hw-mob{
  color:var(--brand-deep);
  background:var(--brand-wash-soft);
  box-shadow:inset 0 0 0 1px rgba(0,174,181,.22);
  margin-bottom:6px;
}
#nav .nav-mob-link.nav-hw-mob:hover{background:var(--brand-wash)}
.nav-hw-mob .nav-hw-tx{display:inline-flex;align-items:center;gap:9px}
.nav-hw-mob .nav-hw-tx::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);
}

/* ---------- Hero: Announcement-Pille ---------- */
.hwk-pille{
  display:inline-flex;align-items:center;gap:10px;
  max-width:100%;margin:0 0 20px;padding:7px 15px 7px 13px;
  background:linear-gradient(100deg,var(--brand-wash-soft),rgba(255,255,255,.75) 70%),var(--paper);
  border:1px solid rgba(0,174,181,.34);border-radius:999px;
  box-shadow:0 1px 2px rgba(10,10,10,.04);
  transition:border-color .25s,box-shadow .32s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.hwk-pille-dot{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);
}
.hwk-pille-t{
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink-soft);line-height:1.35;
}
.hwk-pille .arr{
  display:inline-block;margin-left:5px;color:var(--brand-deep);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.hwk-pille:hover,.hwk-pille:focus-visible{
  border-color:var(--brand);transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(0,174,181,.6),0 0 0 4px var(--brand-wash-soft);
}
.hwk-pille:hover .arr{transform:translateX(4px)}
@media(max-width:620px){
  .hwk-pille{gap:8px;padding:6px 13px 6px 11px;margin-bottom:16px}
  .hwk-pille-t{font-size:12.8px}
}
@media(max-width:380px){
  .hwk-pille-t{font-size:12.2px}
}

@media(prefers-reduced-motion:reduce){
  .hwk-pille,.hwk-pille .arr{transition:none}
}


/* Datenschutz: Sprungpunkt #bewerbung nicht unter der festen Navigation */
#bewerbung { scroll-margin-top: 96px; }

/* Zeilenumbrüche nach Sinneinheiten (06.10.2026) */
.nw{white-space:nowrap}
h1,h2,h3,.po-bt{text-wrap:balance}
p,li{text-wrap:pretty}
#ueber-uns .tcard .tn,#ueber-uns .tcard .tr{white-space:normal;overflow-wrap:normal}
#loesung .px-head{max-width:none}
.lead,.px-head p{text-wrap:balance}
.px-ctacopy h2{max-width:24ch;text-wrap:wrap}

/* Umbruch-Vorschläge 07.10.2026, von Patrick freigegeben */
/* methode: Sechs Bausteine zwischen 901 und 1200 px: Mittelkreis schmaler, Kartentitel kleiner, Kartentext ausgeglichen */
@media(min-width:901px) and (max-width:1200px){html body .px-methode{grid-template-columns:minmax(0,1fr) minmax(250px,.9fr) minmax(0,1fr)} html body .px-methode .mcard h3{font-size:16.5px} html body .px-methode .mcard p{text-wrap:balance}}
/* portal-punkte: Portal-Vorschau auf Handys ohne Fensterpunkte, damit die Adresse ganz sichtbar ist */
@media(max-width:440px){html body .po-dots{display:none}}
/* kachel-zahl-referenzen: Große Zahl in den Referenz-Kacheln bleibt zusammen und passt sich der Kachelbreite an */
html body .fb-item .cb-kachel{container-type:inline-size} html body .fb-item .cb-kachel-zahl{white-space:nowrap} html body .fb-item .cb-kachel.hat-person .cb-kachel-zahl{font-size:min(clamp(44px,5.2vw,64px),12cqw)} @media(max-width:900px){html body .fb-item .cb-kachel.hat-person .cb-kachel-zahl{font-size:min(44px,12cqw)}} @media(max-width:640px){html body .fb-item .cb-kachel.hat-person .cb-kachel-zahl{font-size:min(38px,12cqw)}}
/* portal-kompakt: Portal-Vorschau mit vier Spalten. Ab 1100 px stehen die Initialen über dem Titel, Abstände sind kleiner und Titel und Kärtchen werden nur so weit kleiner, dass nichts über die Karte ragt. Die zwei unteren Schwebe-Hinweise sitzen unter den Karten, damit sie keinen Text verdecken. Zwischen 821 und 959 px zwei Spalten. */
@media(min-width:821px) and (max-width:959px){html body .po-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){html body .po-board{gap:6px} html body .po-col{padding:6px;gap:7px} html body .po-card{padding:8px 7px;gap:6px;container-type:inline-size} html body .po-card-t{flex-direction:column;gap:5px} html body .po-t{font-size:min(11.5px,9.4cqi)} html body .po-tags{gap:4px} html body .po-p2{bottom:-22px} html body .po-p3{left:auto;right:-16px} html body .po-src,html body .po-ant{white-space:nowrap;letter-spacing:0;padding:3px 5px;font-size:min(8.5px,calc((100cqi - 10px) / 10.8))}}