/* ============================================================
   bestof.css — Ergaenzungen zu shadcn.css
   Neue Bausteine der Best-of-Startseite:
   Splitter, Hero-Cockpit (Bento aus Reporting-Widgets),
   Problem-Karten mit Mini-Screens, Wurzel,
   Kreisgrafik-Methode, Branchen-Tabs, Vergleichstabelle,
   Garantie-Block, Zahlen-Bento, Unterschriften, Abschluss.
   shadcn.css bleibt unveraendert.
   ============================================================ */

:root{
  --gruen:#0d7a4d;
  --gruen-tief:#0a5c3a;
  --gruen-wash:rgba(13,122,77,.10);
  --gruen-wash-soft:rgba(13,122,77,.06);
  --rot-wash:rgba(231,0,11,.08);
}

/* ---------- Sichtbarer Tastaturfokus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ink);color:#fafafa;padding:12px 20px;
  border-radius:0 0 var(--r-nested) 0;font-size:14px;font-weight:500;
}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Zahlen immer in Mono ---------- */
.zahl{font-family:var(--mono);font-weight:500;letter-spacing:-.01em}

/* ---------- Engpass-Splitter: Sichtbarkeit ---------- */
body[data-engpass="auftraege"] [data-eng="fachkraefte"]:not(.eng-face),
body[data-engpass="fachkraefte"] [data-eng="auftraege"]:not(.eng-face){display:none}

/* Wechselnde Chips blenden sich weich ein */
@keyframes engIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.kpichip[data-eng],.ck-n[data-eng]{animation:engIn .45s cubic-bezier(.2,.8,.2,1)}

/* Gestapelte Flaechen: beide liegen uebereinander, es blendet weich um */
.eng-stack{display:grid}
.eng-face{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px) scale(.994);
  transition:opacity .42s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .5s;
}
body[data-engpass="auftraege"] .eng-face[data-eng="auftraege"],
body[data-engpass="fachkraefte"] .eng-face[data-eng="fachkraefte"],
body[data-engpass="auftraege"] .hw-face[data-face="auftraege"],
body[data-engpass="fachkraefte"] .hw-face[data-face="fachkraefte"]{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition-delay:.08s,.08s,0s;
}

/* ============================================================
   NAV — Telefonnummer
   ============================================================ */
.nav-tel{
  display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:14px;
  font-family:var(--mono);font-size:13px;letter-spacing:-.01em;color:var(--ink-soft);
  padding:8px 12px;border-radius:var(--r-pill);transition:color .2s,background .2s;
}
.nav-tel:hover{color:var(--brand-deep);background:rgba(255,255,255,.9)}
.nav-tel svg{flex:none}
@media(max-width:640px){.nav-tel span{display:none}.nav-tel{margin-right:6px;padding:8px}}

/* ============================================================
   02 HERO — zweispaltig, Splitter, KPI-Chips, DACH-Karte
   ============================================================ */
.hero{padding:132px 0 40px}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,4.5vw,64px);align-items:center;
}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero-copy{max-width:640px}
.hero-copy h1{font-size:clamp(31px,4.1vw,54px)}
.hero-copy .hero-badge{margin-bottom:24px}
.hero .hero-copy .lead{margin:24px 0 0;max-width:560px}
.hero .hero-copy .hero-ctas{justify-content:flex-start;margin-top:30px}
.hero .hero-copy .hero-note{margin-top:16px}
.hl:nth-child(3)>span{transition-delay:.16s}
.hl:nth-child(4)>span{transition-delay:.24s}

/* Splitter-Toggle */
.split{
  display:inline-flex;gap:4px;margin-top:26px;padding:4px;
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--r-pill);box-shadow:var(--sh-card);
  max-width:100%;flex-wrap:wrap;
}
.split-btn{
  border:none;background:none;color:var(--mid);
  font-size:14px;font-weight:500;letter-spacing:-.01em;
  padding:9px 18px;border-radius:15px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s,color .25s;
}
.split-btn:hover{color:var(--ink)}
.split-btn .dt{width:7px;height:7px;border-radius:50%;background:var(--hairline);flex:none;transition:background .25s}
.split-btn[aria-pressed="true"]{background:var(--ink);color:#fafafa}
.split-btn[aria-pressed="true"] .dt{background:var(--brand-hover)}
@media(max-width:400px){.split{width:100%}.split-btn{flex:1;justify-content:center;padding:9px 10px;font-size:13px}}

/* KPI-Chips */
.kpichips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.kpichip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill);
  box-shadow:var(--sh-card);padding:8px 15px;
  font-family:var(--mono);font-size:12px;letter-spacing:-.01em;color:var(--ink-soft);
}
.kpichip i{width:6px;height:6px;border-radius:2px;background:var(--brand);flex:none;font-style:normal}

/* ============================================================
   HERO RECHTS — Engpass-Cockpit (Bento aus Reporting-Widgets)
   ============================================================ */
.cockpit{position:relative;z-index:2}
.ck-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid);
}
.ck-pkt{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;animation:pulse 2s infinite}
.ck-t{color:var(--ink-soft);font-weight:500}
.ck-n{
  margin-left:auto;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--brand-wash-soft);color:var(--brand-deep);
  box-shadow:inset 0 0 0 1px rgba(0,174,181,.22);letter-spacing:.4px;
}
.ck-wand{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.ck-fuss{
  margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;
  line-height:1.6;color:var(--mid);max-width:56ch;
}

/* Widget-Grundform: uicard aus shadcn, nur enger und ohne Spalten-Abstand */
.hw{margin-bottom:0;padding:18px;display:flex;flex-direction:column;min-width:0}
.hw.hw-2{grid-column:span 2}
.hw .uc-big{font-size:clamp(22px,2.1vw,30px);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hw .uc-big small{font-size:12px;letter-spacing:.3px;font-family:var(--mono);color:var(--mid)}
.hw .uc-label{margin-bottom:6px}
.hw .uc-head{margin-bottom:12px}
.hw .uc-foot{font-size:11px;font-family:var(--mono);letter-spacing:.2px;gap:8px;line-height:1.4;flex-wrap:wrap}
.hw .uc-foot .badge{font-size:10.5px;white-space:nowrap}
.hw .uc-delta{white-space:nowrap}
.hw .spark{height:72px}
.hw-x{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;color:var(--mid)}
.hw .pipe{margin-top:14px;gap:9px}
.hw .pipe-step .ps{flex:none;width:96px;font-size:12px}
.hw .leads{margin-top:2px}
.hw .lead-row{padding:9px 11px;font-size:12.5px}
.hw .lead-row .badge{font-size:10px;padding:2px 8px}
.hw .lead-row .ln{font-size:12.5px;letter-spacing:-.01em}

/* Kanalverteilung in der Kosten-Kachel */
.hw-kanal{margin-top:14px;padding-top:12px;border-top:1px solid var(--canvas);display:grid;gap:8px}
.hw-kanal .kz{display:flex;align-items:center;gap:10px}
.hw-kanal .kn{font-family:var(--mono);font-size:10px;letter-spacing:.4px;color:var(--mid);width:56px;flex:none}
.hw-kanal .kb{flex:1;height:5px;border-radius:3px;background:var(--canvas);overflow:hidden}
.hw-kanal .kb i{display:block;height:100%;border-radius:3px;background:var(--brand);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.in .hw-kanal .kb i{width:var(--w)}

/* Gruender-Karte */
.hw-foto{padding:0;overflow:clip}
.hw-foto img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hw-foto:hover img{transform:scale(1.04)}
.hw-foto-txt{padding:16px 18px 18px}
.hw-foto-txt .uc-title{line-height:1.35;font-size:14px}

/* Zwei Inhalte pro Widget, gestapelt */
.hw-stack{display:grid;flex:1}
.hw-face{
  grid-area:1/1;display:flex;flex-direction:column;min-width:0;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.994);
  transition:opacity .42s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .5s;
}
.hw-face .uc-foot{margin-top:auto;padding-top:14px}

/* Neu zeichnen beim Umschalten */
@keyframes hwSpark{from{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:0}}
@keyframes hwBar{from{width:0}to{width:var(--w)}}
@keyframes hwRow{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes hwArea{from{opacity:0}to{opacity:1}}
.hw-face.hw-draw .spark path:not(.area){animation:hwSpark 1.15s cubic-bezier(.2,.8,.2,1)}
.hw-face.hw-draw .spark .area{animation:hwArea .9s .45s backwards}
.hw-face.hw-draw .uc-bar i,
.hw-face.hw-draw .pipe-step .pb i,
.hw-face.hw-draw .hw-kanal .kb i{animation:hwBar 1s cubic-bezier(.2,.8,.2,1)}
.hw-face.hw-draw .lead-row{animation:hwRow .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*.08s + .08s)}
.hw-face.hw-draw .pipe-step{animation:hwRow .45s cubic-bezier(.2,.8,.2,1) backwards}
.hw-face.hw-draw .pipe-step:nth-child(2){animation-delay:.06s}
.hw-face.hw-draw .pipe-step:nth-child(3){animation-delay:.12s}
.hw-face.hw-draw .pipe-step:nth-child(4){animation-delay:.18s}

/* Sparkline-Laenge pro Pfad steuerbar */
.spark path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}

@media(max-width:980px){.cockpit{max-width:660px;margin-left:auto;margin-right:auto}}
@media(max-width:660px){
  .ck-wand{grid-template-columns:1fr}
  .hw.hw-2{grid-column:span 1}
  .ck-n{margin-left:0}
}

/* ============================================================
   03 REFERENZLEISTE — statisch
   ============================================================ */
.logo-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,4.4vw,58px);
}
.logo-row img{
  height:40px;width:auto;max-width:160px;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:opacity .25s,filter .25s;
}
/* Dateien im Quadratformat zeigen die Marke kleiner — mehr Hoehe gleicht das aus */
.logo-row img.quadrat{height:56px;max-width:100px}
.logo-row img:hover{filter:grayscale(0);opacity:1}
.logo-wort{
  font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mid);transition:color .25s;
}
.logo-wort:hover{color:var(--ink)}
.logo-note{
  margin:30px 0 0;text-align:center;font-size:15px;color:var(--mid);
  font-family:var(--font);letter-spacing:normal;text-transform:none;
}

/* ============================================================
   04 TESTIMONIAL-KARTEN
   ============================================================ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr}}
.tkarte{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:30px;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.tkarte:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.tkarte .terg{
  font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.25;
  font-family:var(--mono);
}
.tkarte .tbranche{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--brand-deep);
}
.tkarte blockquote{
  margin-top:18px;font-size:15.5px;line-height:1.62;color:var(--ink-soft);flex:1;
}
.tkarte .twer{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--hairline);
  display:flex;align-items:center;gap:14px;
}
.tkarte .tlogo{
  width:62px;height:52px;flex:none;display:grid;place-items:center;
  border:1px solid var(--hairline);border-radius:var(--r-nested);
  background:var(--surface-alt);overflow:clip;padding:5px;
}
.tkarte .tlogo img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.75}
.tkarte .tlogo .kuerzel{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--mid);letter-spacing:.04em}
.tkarte .tname{font-size:14px;font-weight:600;letter-spacing:-.01em;display:block}
.tkarte .trolle{font-size:12.5px;color:var(--mid);display:block;margin-top:2px;line-height:1.4}
.tkarte .tverif{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--brand-deep);background:var(--brand-wash-soft);
  border-radius:var(--r-pill);padding:5px 12px;box-shadow:inset 0 0 0 1px rgba(0,174,181,.22);
}

/* ============================================================
   05 PROBLEM IN EURO — rote Akzentkarten
   ============================================================ */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.pcards{grid-template-columns:1fr}}
.pcard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:28px;display:flex;flex-direction:column;
  position:relative;overflow:clip;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s;
}
.pcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember);opacity:.55;
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:rgba(231,0,11,.28)}
.pcard .pnum{font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:var(--ember)}
.pcard h3{font-size:20px;letter-spacing:-.025em;margin:12px 0 10px;line-height:1.3}
.pcard p{font-size:14.5px;color:var(--mid);line-height:1.6}
.pcard .peuro{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em;color:var(--ink-soft);
}
.pcard .peuro b{color:var(--ember);font-weight:500;font-size:15px}

/* Mini-UIs in den Problem-Karten — echte kleine Screens */
.pm-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.pm-label{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mid)}
.pm-delta{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ember)}
.pm-x{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;color:var(--mid)}

/* a) Sparkline nach unten */
.spark.ab{height:58px;margin-top:0}
.spark.ab path{stroke:var(--ember);opacity:.72}
.spark.ab .area{fill:url(#sparkdown);stroke:none;opacity:0}
.in .spark.ab .area{opacity:1}

/* b) Posteingang mit Badges */
.pm-liste{display:flex;flex-direction:column;gap:6px}
.pm-zeile{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-nested);
  padding:8px 10px;
}
.pm-zeile .pav{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--canvas);font-family:var(--mono);font-size:9px;font-weight:500;color:var(--mid);
}
.pm-zeile .pnm{font-size:12.5px;font-weight:500;letter-spacing:-.01em;line-height:1.25;min-width:0}
.pm-zeile .pnm em{
  display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.3px;color:var(--mid);font-weight:400;margin-top:2px;
}
.pm-zeile .pbadge{
  margin-left:auto;flex:none;border-radius:var(--r-pill);padding:3px 9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;white-space:nowrap;
}
.pm-zeile .pbadge.ok{background:var(--brand-wash);color:var(--brand-deep)}
.pm-zeile .pbadge.nein{background:var(--rot-wash);color:var(--ember)}
.pm-zeile.aus{background:var(--surface-alt)}
.pm-zeile.aus .pnm{color:var(--mid)}

/* c) Kalender mit leerem Monat */
.pm-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.pm-kal .wt{
  font-family:var(--mono);font-size:9px;letter-spacing:.4px;color:var(--mid);
  text-align:center;padding-bottom:2px;
}
.pm-kal i{
  display:block;aspect-ratio:1;border-radius:5px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.pm-kal i.we{background:var(--canvas);box-shadow:none}
.pm-kal i.leer{background:none;box-shadow:none}
.pm-kal i.voll{background:var(--brand);box-shadow:none}
.pm-kal i.krank{background:rgba(231,0,11,.42);box-shadow:none}
.pm-legende{
  display:flex;gap:16px;margin-top:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;color:var(--mid);
}
.pm-legende span{display:inline-flex;align-items:center;gap:6px}
.pm-legende i{width:9px;height:9px;border-radius:3px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hairline)}
.pm-legende i.voll{background:var(--brand);box-shadow:none}
.pm-legende i.krank{background:rgba(231,0,11,.42);box-shadow:none}
@keyframes kalPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.pcard.in .pm-kal i.voll,.pcard.in .pm-kal i.krank{animation:kalPop .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.45s}

/* ============================================================
   06 DIE WURZEL
   ============================================================ */
.wurzel{max-width:820px;margin:0 auto;text-align:center}
.wurzel h2{margin-bottom:36px}
.wurzel p{font-size:17.5px;line-height:1.7;color:var(--mid);max-width:70ch;margin:0 auto}
.wurzel p+p{margin-top:22px}
.kernsatz{
  margin:44px auto;padding:34px clamp(20px,4vw,44px);max-width:760px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);position:relative;
}
.kernsatz::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand);
}
.kernsatz p{
  font-size:clamp(19px,2.4vw,26px);font-weight:500;line-height:1.42;
  letter-spacing:-.025em;color:var(--ink);max-width:26ch;
}
.wurzel .schluss{
  margin-top:8px;font-family:var(--mono);font-size:13px;letter-spacing:-.01em;
  color:var(--brand-deep);
}

/* ============================================================
   07 METHODE — Kreisgrafik
   ============================================================ */
.methode{
  display:grid;grid-template-columns:1fr minmax(190px,240px) 1fr;
  gap:18px clamp(24px,3.6vw,52px);align-items:center;margin-top:52px;
}
.mkreis{grid-column:2;grid-row:1/4;display:grid;place-items:center}
.mkreis svg{width:100%;max-width:240px;height:auto;display:block}
.mkreis .ring{fill:none;stroke:var(--hairline);stroke-width:1.4}
.mkreis .ring-akzent{fill:none;stroke:var(--brand);stroke-width:1.6;opacity:.55;
  stroke-dasharray:5 9;stroke-linecap:round}
.mkreis .tick{fill:var(--brand)}
.mkreis .scheibe{fill:var(--paper);stroke:var(--hairline);stroke-width:1.2}
.mkreis-logo{
  position:absolute;display:grid;place-items:center;gap:8px;text-align:center;pointer-events:none;
}
.mkreis-wrap{position:relative;display:grid;place-items:center;width:100%}
.mkreis-logo img{height:24px;width:auto}
.mkreis-logo .ml{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid)}
.mcard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:20px 22px;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  transition-delay:var(--d,0s);
}
.mcard.mc-in{opacity:1;transform:none}
.mcard:hover{box-shadow:var(--sh-lift)}
.mcard .mn{font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:var(--brand-deep)}
.mcard h3{font-size:17px;letter-spacing:-.02em;margin:8px 0 6px}
.mcard p{font-size:13.5px;line-height:1.55;color:var(--mid)}
.m1{grid-column:1;grid-row:1}.m2{grid-column:1;grid-row:2}.m3{grid-column:1;grid-row:3}
.m4{grid-column:3;grid-row:1}.m5{grid-column:3;grid-row:2}.m6{grid-column:3;grid-row:3}
@media(max-width:900px){
  .methode{grid-template-columns:1fr;gap:16px}
  .mkreis,.m1,.m2,.m3,.m4,.m5,.m6{grid-column:1;grid-row:auto}
  .mkreis{margin-bottom:12px}
  .mkreis svg{max-width:190px}
}
@media (prefers-reduced-motion:reduce){.mcard{opacity:1;transform:none}}

/* ============================================================
   08 BRANCHEN-TABS + CASE-KARTEN
   ============================================================ */
.tabs{
  display:flex;gap:4px;flex-wrap:wrap;padding:4px;margin-bottom:32px;
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--r-pill);box-shadow:var(--sh-card);
}
.tab{
  border:none;background:none;color:var(--mid);
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  padding:9px 17px;border-radius:15px;white-space:nowrap;
  transition:background .25s,color .25s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:#fafafa}
@media(max-width:700px){
  .tabs{border-radius:var(--r-card)}
  .tab{flex:1 1 auto;text-align:center;font-size:13px;padding:9px 12px}
}
.tabpanel[hidden]{display:none}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:960px){.cgrid{grid-template-columns:1fr}}
.casecard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:28px;display:flex;flex-direction:column;
  transition:opacity .4s,filter .4s,border-color .3s,box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1);
}
.casecard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
body[data-engpass="auftraege"] .casecard[data-focus="fachkraefte"],
body[data-engpass="fachkraefte"] .casecard[data-focus="auftraege"]{opacity:.6;filter:saturate(.55)}
body[data-engpass="auftraege"] .casecard[data-focus="auftraege"],
body[data-engpass="fachkraefte"] .casecard[data-focus="fachkraefte"]{
  border-color:rgba(0,174,181,.4);
  box-shadow:0 0 0 3px var(--brand-wash-soft),var(--sh-card);
}
.ckopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.clogo{
  width:104px;height:60px;flex:none;display:grid;place-items:center;padding:5px;
  border:1px solid var(--hairline);border-radius:var(--r-nested);background:var(--surface-alt);overflow:clip;
}
.clogo img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.78}
.clogo .kuerzel{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--mid);letter-spacing:.05em;text-align:center;line-height:1.2}
.cbranche{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--brand-deep);background:var(--brand-wash-soft);
  border-radius:var(--r-pill);padding:5px 12px;box-shadow:inset 0 0 0 1px rgba(0,174,181,.22);
}
.casecard h3{font-size:20px;letter-spacing:-.025em;margin:20px 0 4px;line-height:1.3}
.cziel{font-family:var(--mono);font-size:12px;letter-spacing:-.01em;color:var(--mid);margin-top:8px}
.cchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.cchips span{
  font-family:var(--mono);font-size:11px;letter-spacing:.3px;padding:5px 11px;
  border-radius:var(--r-pill);background:var(--canvas);color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.cblock{margin-top:22px}
.cblock .cbt{
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mid);margin-bottom:10px;
}
.cblock ul{list-style:none;display:grid;gap:8px}
.cblock li{display:flex;gap:10px;font-size:14px;line-height:1.55;align-items:flex-start}
.cblock.vorher li{color:var(--mid)}
.cblock.vorher li::before{content:"⊗";color:var(--ember);font-size:12px;margin-top:2px;flex:none;opacity:.75}
.cblock.nachher li{color:var(--ink-soft)}
.cblock.nachher li::before{content:"✓";color:var(--brand);font-weight:600;font-size:12px;margin-top:2px;flex:none}
.ckpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(max-width:400px){.ckpis{grid-template-columns:1fr}}
.kpitile{
  border:1px solid var(--hairline);border-radius:14px;padding:15px;background:var(--surface-alt);
}
.kpitile .kt{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mid)}
.kpitile .kw{
  font-family:var(--mono);font-size:clamp(19px,2.2vw,24px);font-weight:500;
  letter-spacing:-.035em;line-height:1.15;margin-top:6px;color:var(--ink);
}
.kpitile .kn{font-family:var(--mono);font-size:11px;color:var(--mid);margin-top:5px;line-height:1.4}
.cstand{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--mid);
}
.cfoto{border-radius:var(--r-nested);overflow:clip;border:1px solid var(--hairline);margin-top:18px}
.cfoto img{width:100%;height:180px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.casecard:hover .cfoto img{transform:scale(1.04)}
.cgrid.solo{grid-template-columns:minmax(0,1fr);max-width:640px}
.hotelnamen{
  margin-top:18px;font-size:14.5px;line-height:1.8;color:var(--ink-soft);
}
.hotelnamen .trenner{color:var(--brand);padding:0 8px}
.tab-cta{margin-top:40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tab-cta .hinweis{font-size:14px;color:var(--mid);max-width:38ch;line-height:1.5}

/* ============================================================
   09 VERGLEICHSTABELLE
   ============================================================ */
.cmp-scroll{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--sh-card)}
.cmp{width:100%;border-collapse:collapse;text-align:left;min-width:660px}
.cmp caption{
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mid);text-align:left;padding:22px 26px 0;
}
.cmp th,.cmp td{padding:18px 20px;vertical-align:top;font-size:14.5px;line-height:1.55;border-top:1px solid var(--hairline)}
.cmp thead th{
  border-top:none;font-family:var(--mono);font-size:11px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--mid);font-weight:500;padding-top:22px;padding-bottom:14px;
}
.cmp thead th.gut{color:var(--brand-deep)}
.cmp tbody th{
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mid);font-weight:500;width:210px;
}
.cmp td{color:var(--mid)}
.cmp td.gut{color:var(--ink-soft);background:var(--brand-wash-soft)}
.cmp .zeichen{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:600;margin-right:9px;vertical-align:-4px;
}
.cmp .zeichen.nein{background:var(--rot-wash);color:var(--ember)}
.cmp .zeichen.halb{background:var(--canvas);color:var(--mid)}
.cmp .zeichen.ja{background:var(--brand);color:#fff}
.cmp tbody tr:last-child td.gut{border-radius:0 0 var(--r-card) 0}
@media(max-width:760px){
  .cmp th,.cmp td{padding:15px 14px;font-size:13.5px}
  .cmp tbody th{width:150px}
}

/* ============================================================
   10 GARANTIE — gruener Block
   ============================================================ */
.garantie{
  background:var(--gruen);color:#f2fbf6;border-radius:var(--r-card);
  padding:clamp(38px,5.6vw,72px);position:relative;overflow:clip;
}
.garantie::before{
  content:"";position:absolute;top:-300px;right:-200px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);pointer-events:none;
}
.garantie>*{position:relative;z-index:2}
.garantie .eyebrow{color:rgba(255,255,255,.72)}
.garantie .eyebrow::before{background:#7ee0af}
.garantie h2{color:#fff;margin:16px 0 20px}
.garantie .gtext{font-size:17.5px;line-height:1.68;color:rgba(255,255,255,.9);max-width:64ch}
.garantie .gtext b{color:#fff;font-weight:600}
.gbed{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px 0 34px;
}
@media(max-width:820px){.gbed{grid-template-columns:1fr}}
.gbed>div{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:20px;
}
.gbed .gn{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.66)}
.gbed p{margin-top:9px;font-size:14.5px;line-height:1.55;color:#fff}
.btn-hell{background:#fff;color:var(--gruen-tief)}
.btn-hell:hover{background:#eafaf1;transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(0,0,0,.3)}
.gfuss{
  margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.4px;
  color:rgba(255,255,255,.7);
}

/* ============================================================
   11 PROZESS — gruene Mikrozeile
   ============================================================ */
.step .mikro{
  margin-top:10px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.3px;
  color:var(--gruen);background:var(--gruen-wash-soft);
  border-radius:var(--r-pill);padding:5px 12px;box-shadow:inset 0 0 0 1px rgba(13,122,77,.2);
}

/* ============================================================
   12 ZAHLEN-BENTO
   ============================================================ */
.zbento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
@media(max-width:1000px){.zbento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.zbento{grid-template-columns:1fr}}
.zcard{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:28px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:172px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.zcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.zcard .zw{
  font-family:var(--mono);font-size:clamp(34px,4vw,52px);font-weight:500;
  letter-spacing:-.055em;line-height:1.05;
}
.zcard .zw em{font-style:normal;color:var(--brand)}
.zcard .zl{
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mid);margin-top:12px;line-height:1.5;
}
.zcard.z4{grid-column:span 4}
.zcard.z3{grid-column:span 3}
.zcard.z2{grid-column:span 2}
.zcard.z6{grid-column:span 6;min-height:0}
@media(max-width:1000px){.zcard.z4,.zcard.z3,.zcard.z2{grid-column:span 1}.zcard.z6{grid-column:1/-1}}
.zcard.dunkel{background:var(--ink);border-color:var(--ink);color:#fafafa}
.zcard.dunkel .zl{color:#a3a3a3}
.zcard.dunkel .zw em{color:var(--brand-hover)}
.zteam{display:flex;align-items:center;margin-bottom:14px;padding-left:2px}
.zteam img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid var(--paper);margin-right:-10px;
}
.zcard.dunkel .zteam img{border-color:var(--ink)}
.zfuss{
  margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--mid);max-width:70ch;
}

/* ============================================================
   13 TEAM — Unterschriften, Ansprechpartner, Standort
   ============================================================ */
.sigs{
  margin-top:40px;padding-top:28px;border-top:1px solid var(--hairline);
  display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;align-items:flex-end;
}
.sig{display:flex;flex-direction:column;gap:10px;min-width:220px}
.sig svg{height:44px;width:auto;max-width:220px}
.sig svg path{fill:none;stroke:var(--mid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.45;
  stroke-dasharray:4 7}
.sig .sname{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--mid);padding-top:9px;border-top:1px solid var(--hairline);
}
.ansprech{
  margin-top:44px;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);
  align-items:center;background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:28px;
}
@media(max-width:640px){.ansprech{grid-template-columns:1fr}}
.ansprech>img{
  width:132px;height:152px;object-fit:cover;border-radius:var(--r-nested);
  border:1px solid var(--hairline);
}
.ansprech .an{font-size:20px;font-weight:600;letter-spacing:-.02em}
.ansprech .ar{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--brand-deep);margin-top:4px;
}
.ansprech dl{margin-top:18px;display:grid;gap:0}
.ansprech dl>div{
  display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--hairline);
}
.ansprech dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--mid);min-width:96px;flex:none;
}
.ansprech dd{font-size:14.5px;color:var(--ink-soft);word-break:break-word}
.ansprech dd a:hover{color:var(--brand-deep)}
.standort{
  margin-top:32px;padding-top:28px;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
}
@media(max-width:760px){.standort{grid-template-columns:1fr}}
.standort .eyebrow{margin-bottom:12px}
.standort address,.standort p{font-style:normal;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.standort a{transition:color .2s}
.standort a:hover{color:var(--brand-deep)}

/* ============================================================
   14 ABSCHLUSS — Bildkarte mit Formular
   ============================================================ */
.abschluss-grid{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,52px);
  align-items:start;margin-top:40px;
}
@media(max-width:900px){.abschluss-grid{grid-template-columns:1fr}}
.abschluss-foto img{
  width:100%;height:100%;min-height:260px;object-fit:cover;display:block;
  border-radius:var(--r-nested);border:1px solid rgba(255,255,255,.14);
}
.abschluss-foto figcaption{
  padding:12px 2px 0;font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;color:#a3a3a3;
}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.formular{grid-template-columns:1fr}}
.feld{display:flex;flex-direction:column;gap:8px}
.feld.voll{grid-column:1/-1}
.feld label{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#a3a3a3}
.feld input,.feld textarea{
  font-family:inherit;font-size:15px;color:#fafafa;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-nested);padding:12px 14px;width:100%;
  transition:border-color .2s,background .2s;
}
.feld textarea{resize:vertical;min-height:110px;line-height:1.55}
.feld input:hover,.feld textarea:hover{border-color:rgba(255,255,255,.3)}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--brand);background:rgba(255,255,255,.09)}
.abschicken{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.abschicken .btn{border:none}
.abschicken .hinweis{font-size:13px;color:#a3a3a3;max-width:34ch;line-height:1.5}
.dark-block .mono-line{color:#a3a3a3}
.mono-line{font-family:var(--mono);font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid)}

/* ---------- Schmale Bildschirme: lange Buttons duerfen umbrechen ---------- */
@media(max-width:560px){
  .garantie .btn,
  .tab-cta .btn,
  .abschicken .btn,
  .hero-ctas .btn{
    white-space:normal;height:auto;min-height:44px;
    padding:12px 20px;line-height:1.35;text-align:left;
  }
  .cmp caption{padding:18px 18px 0}
}

/* Hinweis, dass die Vergleichstabelle seitlich scrollt */
.cmp-hinweis{display:none}
@media(max-width:760px){
  .cmp-hinweis{
    display:block;margin-top:12px;
    font-family:var(--mono);font-size:11px;letter-spacing:.5px;
    text-transform:uppercase;color:var(--mid);
  }
}

/* ---------- Kleinigkeiten ---------- */
.sect-note{margin-top:26px;font-size:15px;color:var(--mid)}
.sect-head.mitte{margin-left:auto;margin-right:auto;text-align:center}
.sect-head.mitte .eyebrow{justify-content:center}

/* ============================================================
   NACHBESSERUNG — Widgets auf Reporting-Niveau
   ============================================================ */

/* ---------- Hero: Spaltenverhaeltnis fuer das Cockpit ---------- */
.hero-grid{grid-template-columns:1fr 1.04fr;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}

/* ---------- 08 Case-Karten: Mini-Chart im uicard-Stil ---------- */
.cgrid .casecard:nth-child(2){--d:.1s}
.cviz{
  margin-top:24px;border:1px solid var(--hairline);border-radius:var(--r-nested);
  background:var(--surface-alt);padding:14px 16px 12px;
}
.cviz-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cviz .uc-label{margin-bottom:0}
.cviz .uc-delta{white-space:nowrap}
.cviz .bars{height:74px;margin:12px 0 6px;gap:7px}
.cviz .bars i{background:#dcdcdc}
.cviz .bars i.hot{background:var(--brand)}
.cviz.matt .bars i{background:#e2e2e2}
.cviz.matt .uc-delta{color:var(--mid)}
.cviz .bars-x{gap:7px}

/* KPI-Kacheln praeziser */
.kpitile{position:relative;overflow:clip}
.kpitile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(to right,var(--brand),rgba(0,174,181,0));
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s;
}
.casecard.in .kpitile::after{transform:scaleX(1)}

/* ---------- 08 Tabs: Wechsel mit Crossfade ---------- */
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tabpanel:not([hidden]){animation:panelIn .5s cubic-bezier(.2,.8,.2,1)}
.tab{position:relative}
.tab::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:var(--brand);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.tab:hover::after{transform:scaleX(1)}
.tab[aria-selected="true"]::after{transform:scaleX(0)}

/* ---------- 07 Methode: feinere Kreisgrafik ---------- */
.mkreis-wrap::before{
  content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,174,181,.14),transparent 66%);
}
.mkreis .ring-akzent{animation:ringDreh 46s linear infinite;transform-origin:50% 50%}
@keyframes ringDreh{to{transform:rotate(360deg)}}
.mkreis .tick{opacity:.85}
.mkreis .scheibe{filter:drop-shadow(0 6px 18px rgba(0,0,0,.07))}
.mcard{position:relative}
.mcard::after{
  content:"";position:absolute;top:50%;width:clamp(14px,2.6vw,44px);height:1px;
  opacity:0;transition:opacity .7s ease .35s;pointer-events:none;
}
.mcard::before{
  content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--brand);margin-top:-2.5px;opacity:0;
  transition:opacity .5s ease .5s,transform .5s cubic-bezier(.2,.8,.2,1) .5s;
  transform:scale(.4);pointer-events:none;
}
.m1::after,.m2::after,.m3::after{left:100%;background:linear-gradient(to right,rgba(0,174,181,.55),rgba(0,174,181,0))}
.m4::after,.m5::after,.m6::after{right:100%;background:linear-gradient(to left,rgba(0,174,181,.55),rgba(0,174,181,0))}
.m1::before,.m2::before,.m3::before{left:100%;margin-left:-2.5px}
.m4::before,.m5::before,.m6::before{right:100%;margin-right:-2.5px}
.mcard.mc-in::after,.mcard.mc-in::before{opacity:1}
.mcard.mc-in::before{transform:scale(1)}
@media(max-width:900px){.mcard::after,.mcard::before{display:none}}

/* ---------- 09 Vergleichstabelle: ruhiger, klarer ---------- */
.cmp-scroll{background:var(--paper);box-shadow:var(--sh-card)}
.cmp thead th{background:var(--surface-alt)}
.cmp thead th.gut{background:var(--brand-wash-soft)}
.cmp-tag{
  display:inline-block;margin-left:8px;vertical-align:1px;
  background:var(--brand);color:#fff;border-radius:var(--r-pill);
  padding:2px 9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;
  text-transform:uppercase;font-weight:500;
}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover td{background:var(--surface-alt)}
.cmp tbody tr:hover td.gut{background:var(--brand-wash)}
.cmp tbody tr:hover th{color:var(--ink)}
.cmp td.gut{box-shadow:inset 1px 0 0 rgba(0,174,181,.18)}

/* ---------- 10 Garantie: Fortschritts-Widget ---------- */
.gmeter{
  margin-top:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:16px;padding:20px 22px;
}
.gm-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gm-t{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.gm-v{font-size:20px;color:#fff}
.gm-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:clip;margin-top:14px}
.gm-bar i{
  display:block;height:100%;border-radius:4px;width:0;
  background:linear-gradient(to right,#7ee0af,#c9f4dd);
  transition:width 1.3s cubic-bezier(.2,.8,.2,1) .2s;
}
.garantie.in .gm-bar i{width:var(--w,72%)}
.gm-foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.3px;color:rgba(255,255,255,.7);line-height:1.5;
}

/* ---------- 12 Zahlen-Bento: Widgets statt Kacheln ---------- */
.zcard{position:relative;overflow:clip}
.zkopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;
}
.zkopf .zt{color:var(--mid)}
.zkopf .zdelta{color:var(--brand-deep)}
.zcard.dunkel .zkopf .zt{color:#a3a3a3}
.zcard.dunkel .zkopf .zdelta{color:var(--brand-hover)}
.zcard .zl{margin-top:10px}
.zspark{margin-top:16px;height:54px}
.zspark path{stroke:var(--brand)}
.zcard.dunkel .zspark path{stroke:var(--brand-hover)}
.zbars{height:56px;margin:16px 0 0;gap:6px}
.zbars i{background:#dcdcdc}
.zbars i.hot{background:var(--brand)}
.zchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.zchips span{
  font-family:var(--mono);font-size:10px;letter-spacing:.3px;padding:4px 9px;
  border-radius:var(--r-pill);background:var(--brand-wash-soft);color:var(--brand-deep);
  box-shadow:inset 0 0 0 1px rgba(0,174,181,.2);
}
.zteam .zrest{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--canvas);border:2px solid var(--paper);
  font-family:var(--mono);font-size:11px;color:var(--mid);
}
.zcard.quer{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
}
.zcard.quer .zl{margin-top:10px}
.zlaender{flex:1;min-width:240px;display:grid;gap:10px}
.zl-zeile{display:flex;align-items:center;gap:14px}
.zl-n{font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:var(--mid);width:92px;flex:none}
.zl-zeile .uc-bar{flex:1;margin-top:0}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .eng-face,.hw-face{transition:none}
  .hw-face.hw-draw .spark path:not(.area),
  .hw-face.hw-draw .uc-bar i,
  .hw-face.hw-draw .pipe-step .pb i,
  .hw-face.hw-draw .hw-kanal .kb i,
  .hw-face.hw-draw .lead-row,
  .hw-face.hw-draw .pipe-step{animation:none}
  .mkreis .ring-akzent{animation:none}
  .tabpanel:not([hidden]){animation:none}
  .pcard.in .pm-kal i.voll,.pcard.in .pm-kal i.krank{animation:none}
  .in .hw-kanal .kb i,.garantie.in .gm-bar i{transition:none}
  .mcard::after,.mcard::before{transition:none}
  .hw-foto img{transition:none}
}

/* Lange Zeilentitel im Cockpit nicht umbrechen lassen */
.hw .lead-row>div{min-width:0}
.hw .lead-row .ln,.hw .lead-row .ls{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Problem-Karten: Mini-Screen fuellt die Karte, Euro-Zeile sitzt unten */
.pcard .peuro{margin-top:auto;padding-top:22px}
.pm-zeile .pbadge{flex:none}
.pm-zeile .pnm{flex:1;overflow:hidden}
.pm-zeile .pnm,.pm-zeile .pnm em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}