/* ============================================================
   semco ONE — Konzept C "Soft Canvas"
   Ruhig, premium, hell, schwebende Farbatmosphäre
   ============================================================ */
:root{
  --navy:#12152D;            /* dunkle Schrift/Ink */
  --orange:#FF7A00; --rot:#F4280E; --gruen:#0CBC7B; --blau:#0D71EA;
  --white:#FFFFFF;           /* Seiten-Grund (hell) */
  --card:#FFFFFF;
  --surface-1:#F5F7FC;
  --surface-2:#EDF1F9;
  --line:#E5E8F2;
  --text-soft:#4A5170;
  --mute:#676E90;
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --sec:clamp(2.9rem, 5vw, 4.5rem);
  --sec-inner:clamp(1.8rem, 3.4vw, 2.75rem);
  --container:1160px;
  --shadow-soft:0 20px 60px -24px rgba(18,21,45,.14);
  --shadow-card:0 10px 34px -14px rgba(18,21,45,.12);
  --ease-out:cubic-bezier(.22,.61,.2,1);
}
/* Dunkles Theme — nur per Umschalter */
:root[data-theme="dark"]{
  --navy:#EDF0FA;
  --orange:#FF8A3D; --rot:#FF5A47; --gruen:#22C98B; --blau:#4C93FF;
  --white:#141A2E; --card:#1E2542; --surface-1:#1A2038; --surface-2:#242C4E;
  --line:rgba(255,255,255,.14);
  --text-soft:#AAB3D0; --mute:#8C95B6;
  --shadow-soft:0 34px 80px -34px rgba(0,0,0,.6);
  --shadow-card:0 18px 46px -20px rgba(0,0,0,.48);
}

/* ---------- Darkmode: Token-Ebene (System-Präferenz + Toggle) ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:'Poppins','Poppins',sans-serif;line-height:1.24;font-weight:500;letter-spacing:0}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:6px}

::selection{background:rgba(13,113,234,.16)}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.7rem 1.2rem;border-radius:0 0 12px 0;z-index:200;font-weight:600;font-size:.9rem;
}
.skip-link:focus{left:0}

/* ---------- Wortmarke ---------- */
.wordmark{display:inline-flex;align-items:baseline;gap:.28em;white-space:nowrap;color:var(--navy);text-decoration:none;font-family:'Poppins','Poppins',sans-serif}
.wordmark .wm-semco{font-weight:500;letter-spacing:-.01em}
.wordmark .wm-one{
  font-weight:600;letter-spacing:.02em;position:relative;
  background:var(--navy);color:var(--white);
  padding:.1em .5em .14em;border-radius:.6em;line-height:1.25;
}
.wordmark .wm-one::after{
  content:"";position:absolute;top:-.3em;right:-.3em;width:.62em;height:.62em;border-radius:50%;
  background:conic-gradient(var(--orange) 0 25%,var(--rot) 0 50%,var(--gruen) 0 75%,var(--blau) 0);
  border:2px solid var(--white);
}
.site-footer .wm-one{background:#fff;color:#12152D}
.site-footer .wm-one::after{border-color:#12152D}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Poppins','Poppins',sans-serif;font-weight:500;font-size:1rem;line-height:1;
  padding:1rem 1.75rem;border-radius:999px;text-decoration:none;cursor:pointer;
  border:2px solid transparent;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s,border-color .25s,color .25s;
}
.btn-primary{
  background:var(--navy);color:var(--white);
  box-shadow:0 14px 30px -12px rgba(18,21,45,.45);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(18,21,45,.5)}
.btn-secondary{
  background:var(--card);color:var(--navy);border-color:var(--line);
  box-shadow:0 6px 18px -10px rgba(18,21,45,.14);
}
.btn-secondary:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-sm{padding:.7rem 1.3rem;font-size:.9rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--white) 84%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:72px;
}
.brand{display:inline-flex;align-items:center;font-size:1.25rem}
/* Horizontales semco-ONE-Logo im Header (navy hell / weiß dark) */
.brand-logo{width:auto;height:34px;display:block}
.brand-logo-white{display:none}
:root[data-theme="dark"] .brand-logo-navy{display:none}
:root[data-theme="dark"] .brand-logo-white{display:block;height:34px}
.main-nav{display:flex;align-items:center;gap:.15rem}
.nav-item{position:relative}
.nav-link,.nav-trigger{
  display:inline-flex;align-items:center;gap:.3rem;font-family:inherit;
  font-size:.92rem;font-weight:500;color:var(--text-soft);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:.5rem .68rem;border-radius:10px;
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-link:hover,.nav-trigger:hover,.nav-item:hover .nav-trigger,.nav-item:focus-within .nav-trigger{color:var(--navy);background:var(--surface-1)}
.nav-trigger .chev{transition:transform .25s var(--ease-out);opacity:.7}
.nav-item:hover .nav-trigger .chev,.nav-item:focus-within .nav-trigger .chev{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + .55rem);left:0;min-width:250px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-soft);padding:.55rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;z-index:120;
}
.nav-panel::before{content:"";position:absolute;top:-.6rem;left:0;right:0;height:.6rem}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{opacity:1;visibility:visible;transform:none}
.np-wide{min-width:500px}
.np-grid{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .4rem}
.np-col-title{font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);padding:.55rem .68rem .3rem}
.np-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .68rem;border-radius:11px;color:var(--navy);text-decoration:none;font-size:.9rem;font-weight:500;transition:background .18s}
.np-item:hover{background:var(--surface-1)}
.np-item .dot{width:9px;height:9px;border-radius:3px;flex:none}
.np-ic{width:24px;height:24px;border-radius:7px;flex:none}
.np-item .txt{display:flex;flex-direction:column;line-height:1.28}
.np-item .txt small{color:var(--mute);font-size:.75rem;font-weight:400}
.np-soon{margin-left:auto;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--surface-2);border-radius:999px;padding:.14rem .45rem}
.np-item[data-soon]{opacity:.75}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;cursor:pointer;color:var(--navy)}
.nav-toggle svg{display:block}
.theme-btn{
  background:none;border:1px solid var(--line);border-radius:10px;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-soft);flex:none;
  transition:color .2s,border-color .2s;
}
.theme-btn:hover{color:var(--navy);border-color:var(--navy)}
.theme-btn .ico-moon{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:none}
:root[data-theme="dark"] .theme-btn .ico-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .ico-moon{display:block}
}
:root[data-theme="light"] .theme-btn .ico-sun{display:block}
:root[data-theme="light"] .theme-btn .ico-moon{display:none}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:.4rem .9rem 1.1rem;display:none;box-shadow:var(--shadow-soft);
    max-height:82vh;overflow:auto;
  }
  .main-nav.open{display:flex}
  .nav-item{border-bottom:1px solid var(--surface-2)}
  .nav-link,.nav-trigger{width:100%;justify-content:space-between;padding:.95rem .5rem;font-size:1rem;border-radius:0}
  .nav-link:hover,.nav-trigger:hover{background:none}
  .nav-panel{
    position:static;min-width:0;opacity:1;visibility:hidden;transform:none;
    box-shadow:none;border:0;background:none;padding:0 .5rem;
    max-height:0;overflow:hidden;transition:max-height .32s var(--ease-out),visibility .32s;
  }
  .nav-item.open .nav-panel{visibility:visible;max-height:640px;padding-bottom:.7rem}
  .nav-item.open .nav-trigger .chev{transform:rotate(180deg)}
  .np-wide{min-width:0}
  .np-grid{grid-template-columns:1fr}
  .main-nav .theme-btn{margin-top:.9rem}
  .main-nav .btn{margin-top:.7rem;justify-content:center}
}

/* ---------- Deko-Blobs (Soft Canvas Atmosphäre) ---------- */
.blob{
  position:absolute;border-radius:50%;
  filter:blur(70px);pointer-events:none;z-index:0;
}
.blob-orange{background:radial-gradient(circle,rgba(255,122,0,.16),transparent 70%)}
.blob-rot{background:radial-gradient(circle,rgba(244,40,14,.11),transparent 70%)}
.blob-gruen{background:radial-gradient(circle,rgba(12,188,123,.15),transparent 70%)}
.blob-blau{background:radial-gradient(circle,rgba(13,113,234,.14),transparent 70%)}
@keyframes drift-a{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4%,6%) scale(1.06)}
  66%{transform:translate(-3%,-4%) scale(.96)}
}
@keyframes drift-b{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-5%,4%) scale(1.05)}
  75%{transform:translate(3%,-5%) scale(.95)}
}
html.anim .blob{animation:drift-a 18s ease-in-out infinite}
html.anim .blob:nth-of-type(even){animation-name:drift-b;animation-duration:22s}

@keyframes float-soft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

/* ---------- Scroll-Reveal (Fail-safe: nur bei html.anim versteckt) ---------- */
html.anim .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
html.anim .reveal.in{opacity:1;transform:none}
/* Stagger in Karten-Rastern (Motion-Skill-Rhythmus) */
html.anim :is(.numbers-grid,.steps-grid,.audience-grid,.scene-stack,.group-grid,.proofstrip-grid) > .reveal:nth-child(2){transition-delay:.12s}
html.anim :is(.numbers-grid,.steps-grid,.audience-grid,.scene-stack,.group-grid,.proofstrip-grid) > .reveal:nth-child(3){transition-delay:.24s}
html.anim :is(.numbers-grid,.steps-grid,.audience-grid,.scene-stack,.group-grid,.proofstrip-grid) > .reveal:nth-child(4){transition-delay:.36s}
html.anim :is(.numbers-grid,.steps-grid,.audience-grid,.scene-stack,.group-grid,.proofstrip-grid) > .reveal:nth-child(5){transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  html.anim .reveal{opacity:1 !important;transform:none !important;transition:none}
  html.anim .blob,html.anim .chip-pos .app-chip,html.anim .marquee-track,
  html.anim .ring-text,html.anim .app-art img,html.anim .chat-typing i,
  html.anim .hv-rot,html.anim .hv-rot2,html.anim .hv-sonar{animation:none !important}
  .hv-pd{display:none}
  html.anim .msg{opacity:1 !important;transform:none !important;transition:none}
  html.anim .timeline::before,html.anim .tl-item::before{transform:none !important;transition:none}
}

/* ---------- Sektionen allgemein ---------- */
section{position:relative}
.sec-pad{padding-block:var(--sec)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-soft);
}
.eyebrow::before{
  content:"";width:26px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau));
}
.sec-title{font-size:clamp(1.45rem,2.9vw,2.1rem);font-weight:500;margin-top:.75rem}
.sec-lede{color:var(--text-soft);max-width:44rem;margin-top:1rem;font-size:1.05rem}

/* ============================================================
   HERO — 60/40, viel Luft, schwebende App-Icons
   ============================================================ */
.hero{
  overflow:hidden;
  background:
    radial-gradient(56rem 34rem at 8% -10%, rgba(13,113,234,.09), transparent 60%),
    radial-gradient(48rem 30rem at 100% 8%, rgba(255,122,0,.10), transparent 60%),
    radial-gradient(40rem 28rem at 70% 105%, rgba(12,188,123,.08), transparent 65%),
    var(--white);
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(4.5rem,9vw,7rem) clamp(4rem,8vw,6rem);
}

/* ===== Zentrierter Hero mit großer Filmbühne ===== */
.hero-centered{position:relative;padding-block:clamp(3rem,6vw,4.5rem) clamp(2.6rem,5vw,4rem)}

/* Constellation: schwebende Punkte (nur heller Modus), größer & dezent */
.hero-constellation{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-constellation span{position:absolute;border-radius:50%;filter:blur(.3px);will-change:transform}
:root[data-theme="dark"] .hero-constellation{display:none}
@keyframes cf1{0%,100%{transform:translate(0,0)}33%{transform:translate(42px,-34px)}66%{transform:translate(-30px,26px)}}
@keyframes cf2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-44px)}}
@keyframes cf3{0%,100%{transform:translate(0,0)}40%{transform:translate(36px,40px)}75%{transform:translate(-26px,-22px)}}
@media (prefers-reduced-motion:reduce){.hero-constellation span{animation:none!important}}
.hero-centered .hero-blob-1{position:absolute;top:-6%;left:-4%;width:34rem;height:34rem;z-index:0}
.hero-centered .hero-blob-2{position:absolute;top:8%;right:-6%;width:30rem;height:30rem;z-index:0}
.hero-head{position:relative;z-index:1;max-width:53rem;margin-inline:auto;text-align:center}
.hero-head .hero-eyebrow{margin-inline:auto}
.hero-head h1{font-weight:600;line-height:1.12;letter-spacing:-.01em;
  font-size:clamp(2.1rem,5.2vw,3.5rem);margin-top:1.3rem}
.hero-head .hero-sub{color:var(--text-soft);font-size:clamp(1.05rem,1.6vw,1.2rem);
  max-width:40rem;margin:1.2rem auto 0}
.hero-head .hero-ctas{justify-content:center;margin-top:1.7rem}

/* Ambient-Glow hinter dem Hero-Film — Marken-Farben, weich verlaufend */
.hero-film-wrap{position:relative}
.hero-film-wrap::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:52%;transform:translate(-50%,-50%);
  width:82%;height:74%;border-radius:44px;
  background:
    radial-gradient(42% 55% at 18% 22%, rgba(255,122,0,.55), transparent 72%),
    radial-gradient(44% 55% at 84% 26%, rgba(244,40,14,.45), transparent 72%),
    radial-gradient(46% 58% at 22% 86%, rgba(12,188,123,.5), transparent 72%),
    radial-gradient(46% 58% at 82% 84%, rgba(13,113,234,.55), transparent 72%);
  filter:blur(58px);opacity:.9;
}
:root[data-theme="dark"] .hero-film-wrap::before{opacity:.75}
.hero-film-stage{position:relative;z-index:1;margin:clamp(1.8rem,4vw,2.8rem) auto 0;
  max-width:var(--container);aspect-ratio:16/9;border-radius:clamp(16px,2vw,24px);overflow:hidden;
  background:#0a0d1c;cursor:pointer;
  box-shadow:0 50px 100px -40px rgba(18,21,45,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  isolation:isolate}
.hero-film-stage .hf-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-film-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 22%,transparent 70%,rgba(0,0,0,.45));
  transition:opacity .3s var(--ease-out);z-index:1}
.hero-film-stage.is-playing::after{opacity:0}
.hf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:var(--navy);display:grid;place-items:center;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.5);transition:transform .2s var(--ease-out),background .2s;
  padding-left:4px}
.hf-play:hover{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.hf-play svg{width:clamp(28px,3vw,36px);height:auto}
.hero-film-stage.is-playing .hf-play{opacity:0;pointer-events:none}
.hf-meta{position:absolute;left:clamp(.9rem,2vw,1.4rem);bottom:clamp(.8rem,2vw,1.2rem);z-index:2;
  font-size:.8rem;color:rgba(255,255,255,.92);letter-spacing:.01em;
  background:rgba(10,13,28,.5);backdrop-filter:blur(6px);padding:.4rem .8rem;border-radius:999px;
  transition:opacity .3s var(--ease-out)}
.hf-meta b{font-weight:600}
.hero-film-stage.is-playing .hf-meta{opacity:0}

.hero-trust-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem clamp(1.4rem,3vw,2.4rem);margin:clamp(1.4rem,3vw,2rem) auto 0;max-width:var(--container);padding:0}
.hero-trust-row li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-soft)}
@media(max-width:600px){
  .hero-head h1{font-size:clamp(1.8rem,7vw,2.4rem)}
  .hero-head h1 br{display:none}
  .pivot h2 br{display:none}
  .hero-trust-row{gap:.5rem 1.1rem}
  .hero-trust-row li{font-size:.82rem}
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.82rem;font-weight:500;color:var(--text-soft);
  box-shadow:0 6px 18px -12px rgba(18,21,45,.18);
}
.hero-eyebrow .dot-row{display:inline-flex;gap:4px}
.hero-eyebrow .dot-row i{width:8px;height:8px;border-radius:50%}
.hero h1{
  font-size:clamp(2rem,4.2vw,3.05rem);
  font-weight:500;letter-spacing:-.005em;line-height:1.18;
  margin-top:1.5rem;
}
/* Marken-Verlauf für farbige Schrift (statt einzelner bunter Buchstaben) */
.brand-gradient,.cockpit{
  background:linear-gradient(100deg,var(--orange) 0%,var(--rot) 34%,var(--gruen) 66%,var(--blau) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.cockpit{white-space:nowrap;font-weight:600}
/* die alten Einzelfarben aufheben — Gradient wirkt durch das ganze Wort */
.cockpit .c1,.cockpit .c2,.cockpit .c3,.cockpit .c4{color:inherit;-webkit-text-fill-color:inherit}
.hero-sub{
  color:var(--text-soft);font-size:clamp(1.02rem,1.6vw,1.15rem);
  max-width:36rem;margin-top:1.5rem;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.25rem}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:1.1rem 1.75rem;margin-top:2.5rem;
  padding-top:1.75rem;border-top:1px solid var(--line);
}
.hero-trust li{
  display:flex;align-items:center;gap:.55rem;
  font-size:.88rem;font-weight:500;color:var(--text-soft);
}
.hero-trust svg{flex:none}

/* Hero Visual: animierte Orbit-Motion-Graphic */
.hero-visual{position:relative;min-height:auto;display:grid;place-items:center;padding-block:1rem}
.hero-visual .blob{width:70%;height:70%;position:absolute}
.hv-blob-1{top:-6%;left:-4%}
.hv-blob-2{bottom:-8%;right:-6%}
/* Hero-Video statt Orbit-Diagramm */
.hero-video{position:relative;z-index:1;margin:0;width:min(100%,540px);
  aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(18,21,45,.55), 0 2px 0 rgba(255,255,255,.5) inset;
  border:1px solid var(--line);background:var(--surface-2)}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hv-stage{position:relative;width:min(100%,440px);aspect-ratio:1}
.hv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.hv-dash{fill:none;stroke:color-mix(in srgb,var(--navy) 16%,transparent);stroke-width:.45;stroke-dasharray:1.4 2.6;stroke-linecap:round}
.hv-solid{fill:none;stroke:color-mix(in srgb,var(--navy) 9%,transparent);stroke-width:.5}
.hv-rot,.hv-rot2{transform-box:fill-box;transform-origin:center}
html.anim .hv-rot{animation:hv-spin 46s linear infinite}
html.anim .hv-rot2{animation:hv-spin 66s linear infinite reverse}
@keyframes hv-spin{to{transform:rotate(360deg)}}
.hv-conn{stroke-width:.4;opacity:.4;stroke-linecap:round}
.hv-sonar{fill:none;stroke:color-mix(in srgb,var(--blau) 42%,transparent);stroke-width:.7;transform-box:fill-box;transform-origin:center;opacity:0}
html.anim .hv-sonar{animation:hv-sonar 3.4s ease-out infinite}
html.anim .hv-sonar.s2{animation-delay:1.7s}
@keyframes hv-sonar{0%{transform:scale(.35);opacity:.5}100%{transform:scale(2.7);opacity:0}}
.chip-pos{position:absolute;transform:translate(-50%,-50%);z-index:2}
html.anim .chip-pos .app-chip{animation:float-soft 6s ease-in-out infinite}
.app-chip{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--line);border-radius:18px;
  padding:.75rem .85rem .62rem;box-shadow:var(--shadow-card);backdrop-filter:blur(4px);
}
.app-chip img{width:clamp(44px,5vw,56px);height:auto;border-radius:13px}
.app-chip span{font-size:.66rem;font-weight:700;letter-spacing:.13em}
.chip-orga{top:13%;left:50%}
.chip-tech{top:50%;left:87%}
.chip-link{top:87%;left:50%}
.chip-team{top:50%;left:13%}
html.anim .chip-tech .app-chip{animation-delay:1.5s}
html.anim .chip-link .app-chip{animation-delay:3s}
html.anim .chip-team .app-chip{animation-delay:4.5s}
.chip-orga span{color:var(--orange)}
.chip-team span{color:var(--rot)}
.chip-tech span{color:var(--blau)}
.chip-link span{color:var(--gruen)}
.hv-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);z-index:3;
}
.hv-center img{width:50px;height:50px}
.hv-center::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid color-mix(in srgb,var(--blau) 20%,transparent)}

@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr;padding-block:3.5rem 3rem}
  .hero-visual{max-width:400px;margin-inline:auto;width:100%}
}
@media (max-width:480px){
  .app-chip{padding:.5rem .6rem .48rem;border-radius:15px}
  .app-chip img{width:40px}
  .app-chip span{font-size:.6rem}
  .hv-center{width:64px;height:64px}
  .hv-center img{width:38px;height:38px}
}

/* ============================================================
   PROBLEM — asymmetrische Split-Sektion: Sticky-Intro + Szenen-Stapel
   ============================================================ */
.problem{
  background:
    radial-gradient(50rem 30rem at -10% 20%, rgba(244,40,14,.06), transparent 60%),
    radial-gradient(44rem 28rem at 110% 80%, rgba(13,113,234,.07), transparent 60%),
    var(--surface-1);
}
.problem-grid{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.problem-intro{position:sticky;top:110px}
.problem-intro p{color:var(--text-soft);margin-top:1.1rem}
.scene-stack{display:flex;flex-direction:column;gap:1rem}
.scene{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.4rem 1.5rem;box-shadow:0 8px 26px -18px rgba(18,21,45,.16);
  border-left:4px solid var(--line);
  color:var(--text-soft);font-size:.98rem;
}
.scene strong{color:var(--navy);font-weight:600}
.scene:nth-child(1){border-left-color:var(--orange)}
.scene:nth-child(2){border-left-color:var(--blau)}
.scene:nth-child(3){border-left-color:var(--rot)}
.scene:nth-child(4){border-left-color:var(--gruen)}
.scene:nth-child(5){border-left-color:var(--mute)}
.scene:nth-child(odd){margin-right:clamp(0rem,3vw,2.5rem)}
.scene:nth-child(even){margin-left:clamp(0rem,3vw,2.5rem)}
.problem-verdict{
  margin-top:1.75rem;
  background:linear-gradient(135deg,rgba(255,122,0,.07),rgba(244,40,14,.06) 35%,rgba(12,188,123,.06) 70%,rgba(13,113,234,.07));
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.6rem 1.7rem;color:var(--text-soft);
}
.problem-verdict strong{color:var(--navy)}
@media (max-width:860px){
  .problem-grid{grid-template-columns:1fr}
  .problem-intro{position:static}
  .scene:nth-child(odd),.scene:nth-child(even){margin:0}
}

/* ============================================================
   PIVOT — zentrierter Statement-Block mit großem Eigenbegriff
   ============================================================ */
.pivot{
  overflow:hidden;text-align:center;
  background:
    radial-gradient(46rem 30rem at 50% -20%, rgba(13,113,234,.08), transparent 60%),
    radial-gradient(40rem 26rem at 12% 110%, rgba(255,122,0,.08), transparent 60%),
    radial-gradient(40rem 26rem at 88% 110%, rgba(12,188,123,.08), transparent 60%),
    var(--white);
}
.pivot .blob{width:26rem;height:26rem}
.pivot-blob-1{top:-40%;left:-10%}
.pivot-blob-2{bottom:-45%;right:-8%}
.pivot-inner{position:relative;z-index:1;max-width:52rem;margin-inline:auto}
.pivot h2{
  font-size:clamp(1.45rem,3vw,2.2rem);font-weight:500;
}
.pivot h2 .accent-one{
  font-weight:600;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pivot-copy{color:var(--text-soft);font-size:1.08rem;margin-top:1.5rem;max-width:40rem;margin-inline:auto}
.pivot-term{
  margin-top:2.1rem;
  font-size:clamp(1.85rem,4.6vw,3rem);font-weight:600;letter-spacing:-.01em;line-height:1.08;
}
.pivot-formula{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;
  margin-top:1.6rem;
}
.pivot-formula span{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1.1rem;font-size:.88rem;font-weight:600;color:var(--text-soft);
  box-shadow:0 4px 14px -10px rgba(18,21,45,.16);
}

/* ============================================================
   APPS — abwechselnd links/rechts mit großen Icon-Illustrationen
   ============================================================ */
.apps{
  background:
    linear-gradient(180deg, rgba(255,122,0,.075), rgba(244,40,14,.05) 30%, rgba(13,113,234,.06) 62%, rgba(12,188,123,.075)),
    radial-gradient(56rem 40rem at 0% 12%, rgba(255,122,0,.10), transparent 55%),
    radial-gradient(52rem 38rem at 100% 40%, rgba(244,40,14,.08), transparent 55%),
    radial-gradient(52rem 38rem at 0% 68%, rgba(13,113,234,.10), transparent 55%),
    radial-gradient(52rem 38rem at 100% 95%, rgba(12,188,123,.10), transparent 55%),
    var(--white);
}
.apps-head{text-align:center;max-width:44rem;margin-inline:auto}
.apps-flow{display:flex;flex-direction:column;gap:var(--sec-inner);margin-top:var(--sec-inner)}
.app-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,4.5vw,4rem);align-items:center;
}
.app-row.flip .app-art{order:2}
.app-art{
  position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-lg);
  min-height:clamp(320px,36vw,400px);padding-block:2.2rem;
  border:1px solid var(--line);
  overflow:hidden;
}
.art-orga{background:radial-gradient(120% 120% at 20% 15%,rgba(255,122,0,.17),rgba(255,122,0,.05) 55%,var(--card))}
.art-team{background:radial-gradient(120% 120% at 80% 15%,rgba(244,40,14,.14),rgba(244,40,14,.04) 55%,var(--card))}
.art-tech{background:radial-gradient(120% 120% at 20% 85%,rgba(13,113,234,.15),rgba(13,113,234,.05) 55%,var(--card))}
.art-link{background:radial-gradient(120% 120% at 80% 85%,rgba(12,188,123,.16),rgba(12,188,123,.05) 55%,var(--card))}
.app-art::before{
  content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(18,21,45,.12);
}



/* Rotierender Kreis-Text um die App-Icons */
.ring-text{
  position:absolute;inset:0;margin:auto;
  width:min(94%,400px);aspect-ratio:1;z-index:1;pointer-events:none;
}
@keyframes spin-slow{to{transform:rotate(360deg)}}
html.anim .ring-text{animation:spin-slow 32s linear infinite}
.ring-text text{
  font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:700;
  text-transform:uppercase;
}
.art-orga .ring-text text{fill:var(--orange);opacity:.8}
.art-team .ring-text text{fill:var(--rot);opacity:.8}
.art-tech .ring-text text{fill:var(--blau);opacity:.8}
.art-link .ring-text text{fill:var(--gruen);opacity:.8}
.app-tag{
  position:absolute;z-index:2;
  background:color-mix(in srgb, var(--card) 94%, transparent);border:1px solid var(--line);border-radius:999px;
  padding:.4rem .95rem;font-size:.75rem;font-weight:600;color:var(--text-soft);
  box-shadow:0 6px 16px -10px rgba(18,21,45,.2);
}
.app-tag.t1{top:14%;left:10%}
.app-tag.t2{bottom:14%;right:10%}
.app-kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;font-weight:700;letter-spacing:-.01em;color:var(--navy);
}
.ak-pill{color:#fff;padding:.18em .6em .22em;border-radius:.55em;font-weight:700;letter-spacing:.1em;font-size:.74rem}
.ak-orga{background:var(--orange)} .ak-team{background:var(--rot)}
.ak-tech{background:var(--blau)} .ak-link{background:var(--gruen)}
.app-kicker i{width:10px;height:10px;border-radius:3px;flex:none}
.k-orga{color:var(--orange)}.k-orga i{background:var(--orange)}
.k-team{color:var(--rot)}.k-team i{background:var(--rot)}
.k-tech{color:var(--blau)}.k-tech i{background:var(--blau)}
.k-link{color:var(--gruen)}.k-link i{background:var(--gruen)}
.app-copy h3{font-size:clamp(1.15rem,2vw,1.5rem);margin-top:.7rem}
.app-copy p{color:var(--text-soft);margin-top:.85rem}
.app-feats{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.app-feats li{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.95rem;color:var(--text-soft);
}
.app-feats svg{flex:none;margin-top:.28rem}
@media (max-width:860px){
  .app-row{grid-template-columns:1fr}
  .app-row.flip .app-art{order:0}
}

/* ============================================================
   ZAHLEN — zentriertes Grid, hell, Count-ups
   ============================================================ */
.numbers{
  background:
    linear-gradient(180deg,var(--surface-1),var(--surface-2));
  overflow:hidden;
}
.numbers .blob{width:24rem;height:24rem}
.num-blob-1{top:-30%;left:-8%}
.num-blob-2{bottom:-35%;right:-6%}
.numbers-head{text-align:center;max-width:44rem;margin-inline:auto;position:relative;z-index:1}
.numbers-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;margin-top:var(--sec-inner);
}
.num-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.9rem 1.4rem 1.7rem;text-align:center;
  box-shadow:var(--shadow-card);
  border-top:4px solid var(--line);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.num-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.num-card:nth-child(1){border-top-color:var(--orange)}
.num-card:nth-child(2){border-top-color:var(--rot)}
.num-card:nth-child(3){border-top-color:var(--gruen)}
.num-card:nth-child(4){border-top-color:var(--blau)}
.num-value{font-size:clamp(2rem,3.7vw,2.7rem);font-weight:600;letter-spacing:-.01em;line-height:1;font-family:'Poppins',sans-serif}
.num-value .unit{font-size:.55em;font-weight:700}
.num-label{font-weight:600;margin-top:.6rem;font-size:1rem}
.num-note{color:var(--mute);font-size:.85rem;margin-top:.4rem;line-height:1.5}
.roi-line{position:relative;z-index:1;text-align:center;margin-top:1.9rem;font-size:1.08rem;color:var(--text-soft)}
.roi-line strong{background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

@media (max-width:900px){.numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.numbers-grid{grid-template-columns:1fr}}

/* ============================================================
   MARQUEE — Branchen & Trust
   ============================================================ */
.marquee{
  border-block:1px solid var(--line);
  background:var(--white);padding-block:1.4rem;overflow:hidden;
}
.marquee-track{
  display:flex;gap:2.75rem;width:max-content;
  padding-inline:1.375rem;
}
html.anim .marquee-track{animation:marquee 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-item{
  display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-size:.95rem;font-weight:500;color:var(--text-soft);
}
.marquee-item i{width:9px;height:9px;border-radius:50%;flex:none}
.mi-1 i{background:var(--orange)}
.mi-2 i{background:var(--rot)}
.mi-3 i{background:var(--gruen)}
.mi-4 i{background:var(--blau)}

/* ============================================================
   DIENSTAG — horizontale Timeline
   ============================================================ */
.day{
  background:
    radial-gradient(48rem 30rem at 85% -15%, rgba(12,188,123,.08), transparent 60%),
    radial-gradient(44rem 28rem at 5% 110%, rgba(255,122,0,.07), transparent 60%),
    var(--white);
}
.day-head{max-width:44rem}
.timeline{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem;margin-top:var(--sec-inner);position:relative;
}
.timeline::before{
  content:"";position:absolute;top:9px;left:2%;right:2%;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau));
  border-radius:2px;opacity:.5;
}
.tl-item{position:relative;padding-top:2rem}
.tl-item::before{
  content:"";position:absolute;top:0;left:0;
  width:20px;height:20px;border-radius:50%;
  background:var(--card);border:4px solid var(--line);
}
.tl-item:nth-child(1)::before{border-color:var(--orange)}
.tl-item:nth-child(2)::before{border-color:var(--rot)}
.tl-item:nth-child(3)::before{border-color:var(--gruen)}
.tl-item:nth-child(4)::before{border-color:var(--blau)}
.tl-time{font-weight:600;font-size:1.05rem;font-family:'Poppins',sans-serif}
.tl-item p{color:var(--text-soft);font-size:.93rem;margin-top:.55rem}

/* Scroll-Choreografie: Linie zeichnet sich, Punkte poppen, Items staffeln */
html.anim .timeline::before{transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease-out) .15s}
html.anim .timeline.play::before{transform:scaleX(1)}
html.anim .tl-item::before{transform:scale(0);transition:transform .5s var(--ease-out)}
html.anim .timeline.play .tl-item::before{transform:scale(1)}
html.anim .timeline.play .tl-item:nth-child(1)::before{transition-delay:.2s}
html.anim .timeline.play .tl-item:nth-child(2)::before{transition-delay:.55s}
html.anim .timeline.play .tl-item:nth-child(3)::before{transition-delay:.9s}
html.anim .timeline.play .tl-item:nth-child(4)::before{transition-delay:1.25s}
html.anim .timeline .tl-item.reveal:nth-child(2){transition-delay:.18s}
html.anim .timeline .tl-item.reveal:nth-child(3){transition-delay:.36s}
html.anim .timeline .tl-item.reveal:nth-child(4){transition-delay:.54s}

@media (max-width:860px){
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline::before{top:2%;bottom:2%;left:9px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--orange),var(--rot),var(--gruen),var(--blau))}
  html.anim .timeline::before{transform:scaleY(0);transform-origin:top}
  html.anim .timeline.play::before{transform:scaleY(1)}
  .tl-item{padding:0 0 1.8rem 2.4rem}
  .tl-item:last-child{padding-bottom:0}
}

/* ============================================================
   ABLAUF — 4er-Kartenraster mit Nummern
   ============================================================ */
.steps{background:var(--surface-1)}
.steps-head{text-align:center;max-width:44rem;margin-inline:auto}
.steps-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;margin-top:var(--sec-inner);
}
.step-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.7rem 1.4rem;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.step-num{
  width:42px;height:42px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:1.05rem;color:#fff;font-family:'Poppins',sans-serif;
}
.step-card:nth-child(1) .step-num{background:var(--orange)}
.step-card:nth-child(2) .step-num{background:var(--rot)}
.step-card:nth-child(3) .step-num{background:var(--gruen)}
.step-card:nth-child(4) .step-num{background:var(--blau)}
.step-card h3{font-size:1.05rem}
.step-card p{color:var(--text-soft);font-size:.92rem}
@media (max-width:960px){.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps-grid{grid-template-columns:1fr}}

/* ============================================================
   FÜR WEN — 3er-Kartenraster
   ============================================================ */
.audience{
  background:
    radial-gradient(50rem 32rem at 50% 120%, rgba(13,113,234,.07), transparent 60%),
    var(--white);
}
.audience-head{text-align:center;max-width:44rem;margin-inline:auto}
.audience-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;margin-top:var(--sec-inner);
}
.aud-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.9rem 1.6rem;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.aud-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
}
.aud-card:nth-child(1) .aud-icon{background:rgba(255,122,0,.12);color:var(--orange)}
.aud-card:nth-child(2) .aud-icon{background:rgba(12,188,123,.12);color:var(--gruen)}
.aud-card:nth-child(3) .aud-icon{background:rgba(13,113,234,.12);color:var(--blau)}
.aud-card h3{font-size:1.12rem}
.aud-card p{color:var(--text-soft);font-size:.94rem;margin-top:.7rem}
.audience-note{
  text-align:center;color:var(--mute);font-size:.92rem;font-style:italic;
  max-width:40rem;margin:2rem auto 0;
}
@media (max-width:860px){.audience-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* ============================================================
   EINWÄNDE — FAQ-Akkordeon
   ============================================================ */
.faq{
  background:
    radial-gradient(44rem 28rem at -8% 30%, rgba(255,122,0,.06), transparent 60%),
    radial-gradient(44rem 28rem at 108% 70%, rgba(12,188,123,.06), transparent 60%),
    var(--surface-1);
}
.faq-inner{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-intro{position:sticky;top:110px}
.faq-intro p{color:var(--text-soft);margin-top:1rem}
/* Chat-Box: Einwände als Konversation, die sich beim Scrollen schreibt */
.chat-box{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);overflow:hidden;
}
.chat-head{
  display:flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.4rem;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-1) 65%, transparent);
}
.chat-head img{width:36px;height:36px}
.chat-head .ch-name{font-weight:700;font-size:.98rem;line-height:1.25}
.chat-head .ch-status{font-size:.76rem;color:var(--gruen);display:flex;align-items:center;gap:.4rem;font-weight:500}
.chat-head .ch-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen)}
.chat-msgs{
  padding:1.4rem;display:flex;flex-direction:column;gap:.85rem;
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgba(13,113,234,.05), transparent 60%),
    radial-gradient(26rem 18rem at 0% 100%, rgba(12,188,123,.05), transparent 60%);
}
.msg{
  max-width:86%;padding:.9rem 1.15rem;border-radius:18px;
  font-size:.93rem;line-height:1.55;
}
.msg.q{
  align-self:flex-start;background:var(--surface-2);color:var(--navy);
  border-bottom-left-radius:6px;font-weight:600;
}
.msg.a{
  align-self:flex-end;background:var(--navy);color:var(--white);
  border-bottom-right-radius:6px;
}
.msg.a strong{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gruen) 70%,transparent);text-underline-offset:3px}
html.anim .msg{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
html.anim .msg.on{opacity:1;transform:none}
.chat-typing{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  background:var(--surface-2);border-radius:18px;border-bottom-left-radius:6px;
  padding:.85rem 1.05rem;visibility:hidden;opacity:0;
  transition:opacity .2s var(--ease-out);
}
.chat-typing.is-active{visibility:visible;opacity:1}
.chat-typing i{
  width:7px;height:7px;border-radius:50%;background:var(--mute);display:block;
  animation:typing-dot 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2){animation-delay:.18s}
.chat-typing i:nth-child(3){animation-delay:.36s}
@keyframes typing-dot{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-5px);opacity:1}
}
@media (max-width:860px){
  .faq-inner{grid-template-columns:1fr}
  .faq-intro{position:static}
  .msg{max-width:94%}
}

/* ============================================================
   TESTIMONIAL — zentriertes Zitat
   ============================================================ */
.quote{
  text-align:center;overflow:hidden;
  background:
    radial-gradient(44rem 26rem at 50% -30%, rgba(244,40,14,.06), transparent 60%),
    var(--white);
}
.quote-inner{max-width:46rem;margin-inline:auto;position:relative;z-index:1}
.quote-mark{
  font-size:4.5rem;font-weight:800;line-height:.6;display:block;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.quote blockquote p{
  font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:500;
  line-height:1.45;margin-top:1.2rem;
}
.quote-attr{margin-top:1.6rem;font-size:.95rem;color:var(--text-soft)}
.quote-attr strong{color:var(--navy);display:block;font-size:1rem}
.quote-note{margin-top:1.4rem;font-size:.82rem;color:var(--mute);font-style:italic}

/* ============================================================
   CLOSE / CTA
   ============================================================ */
.close-cta{
  overflow:hidden;text-align:center;
  background:
    radial-gradient(48rem 30rem at 15% 0%, rgba(255,122,0,.12), transparent 55%),
    radial-gradient(48rem 30rem at 85% 0%, rgba(13,113,234,.12), transparent 55%),
    radial-gradient(44rem 28rem at 30% 110%, rgba(244,40,14,.08), transparent 55%),
    radial-gradient(44rem 28rem at 70% 110%, rgba(12,188,123,.10), transparent 55%),
    var(--surface-1);
}
.close-cta .blob{width:22rem;height:22rem}
.cta-blob-1{top:-30%;left:6%}
.cta-blob-2{bottom:-35%;right:4%}
.close-inner{position:relative;z-index:1;max-width:48rem;margin-inline:auto}
.close-inner h2{font-size:clamp(1.5rem,3.1vw,2.2rem)}
.close-paths{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;
  margin-top:2.25rem;text-align:left;
}
.path-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow-card);
}
.path-card h3{font-size:1rem;display:flex;align-items:center;gap:.6rem}
.path-card h3 i{width:10px;height:10px;border-radius:50%;flex:none}
.path-old h3 i{background:var(--mute)}
.path-new h3 i{background:var(--gruen)}
.path-old h3{color:var(--text-soft)}
.path-card p{color:var(--text-soft);font-size:.93rem;margin-top:.7rem}
.path-new{border-color:rgba(12,188,123,.4);box-shadow:0 14px 38px -18px rgba(12,188,123,.35)}
.close-line{margin-top:2rem;color:var(--text-soft);font-size:1.02rem}
.close-btn-wrap{margin-top:1.9rem}
.close-contact{
  margin-top:2.25rem;color:var(--mute);font-size:.88rem;line-height:1.8;
}
.close-contact a{color:var(--text-soft);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.close-contact a:hover{color:var(--navy);border-color:var(--navy)}
@media (max-width:720px){.close-paths{grid-template-columns:1fr}}

/* ============================================================
   ECHTE APP-SCREENSHOTS — animiert in den Panels
   ============================================================ */
.shot-wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:min(430px,90%)}
.shot{border-radius:20px;box-shadow:0 30px 58px -26px rgba(18,21,45,.5);height:auto}
.shot-solo{width:92%}
.shot-wrap.duo{width:min(350px,92%)}
.duo .shot{width:57%}
.duo .shot-back{margin-right:-16%;transform:rotate(-4deg) translateY(12px);opacity:.95}
.duo .shot-front{position:relative;z-index:2;transform:rotate(2.5deg)}
@keyframes drift-solo{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-12px)}}
@keyframes drift-front{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-12px)}}
@keyframes drift-back{0%,100%{transform:rotate(-4deg) translateY(12px)}50%{transform:rotate(-4deg) translateY(-2px)}}
html.anim .shot-solo{animation:drift-solo 9s ease-in-out infinite}
.shot-vid{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 58px -26px rgba(18,21,45,.5);background:var(--surface-2)}
.day-video{max-width:720px;margin:1.9rem auto 0;position:relative;z-index:1}
.day-video video{display:block;width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);background:var(--surface-2)}
.day-video figcaption{margin-top:.7rem;text-align:center;font-size:.82rem;color:var(--mute)}

/* ---- Dienstag: Gesamtfilm + Sequenzen pro App ---- */
.dayfilm{max-width:940px;margin:1.9rem auto 0;position:relative;z-index:1}
.dayfilm-stage{position:relative;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 34px 64px -28px rgba(18,21,45,.55);background:var(--surface-2);aspect-ratio:16/9}
.dayfilm-stage video{display:block;width:100%;height:100%;object-fit:cover}
.dayfilm-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.dayfilm-tab{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--navy);
  font:inherit;font-size:.83rem;font-weight:500;cursor:pointer;transition:.18s ease}
.dayfilm-tab:hover{transform:translateY(-1px)}
.dayfilm-tab .dot{width:8px;height:8px;border-radius:50%;background:var(--acc,var(--mute))}
.dayfilm-tab[aria-selected="true"]{border-color:var(--acc,var(--navy));
  box-shadow:inset 0 0 0 1px var(--acc,var(--navy))}
.dayfilm-tab[data-app="alle"]{--acc:var(--navy)}
.dayfilm-tab[data-app="orga"]{--acc:var(--orange)}
.dayfilm-tab[data-app="team"]{--acc:var(--rot)}
.dayfilm-tab[data-app="tech"]{--acc:var(--blau)}
.dayfilm-tab[data-app="link"]{--acc:var(--gruen)}
.dayfilm figcaption{margin-top:.75rem;text-align:center;font-size:.82rem;color:var(--mute)}
.app-analyse{margin-top:var(--sec-inner)}
.app-analyse .aa-head{text-align:center;max-width:44rem;margin:0 auto 1.4rem}
.app-analyse .aa-head h3{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600}
.app-analyse .aa-head p{color:var(--text-soft);margin-top:.6rem;font-size:.98rem}
.aa-frame{position:relative;max-width:940px;margin-inline:auto;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--card)}
.aa-frame img{display:block;width:100%}
.aa-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.aa-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blau);padding:.32rem .8rem;border-radius:999px}
.aa-grid{max-width:940px;margin:1rem auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.aa-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.aa-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.aa-tile .aa-img{background:var(--surface-1);display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;overflow:hidden}
.aa-tile .aa-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.aa-tile figcaption{padding:.85rem 1rem 1rem}
.aa-tile figcaption b{display:block;font-family:'Poppins',sans-serif;font-weight:500;font-size:.98rem}
.aa-tile figcaption span{display:block;color:var(--text-soft);font-size:.85rem;margin-top:.2rem;line-height:1.45}
@media (max-width:820px){.aa-grid{grid-template-columns:1fr;max-width:520px}.aa-tile .aa-img{aspect-ratio:16/9}}

/* ===== Motion-Graphic-Feature-Reihen (verteilt, zickzack) ===== */
.mgsplit-inner{display:grid;grid-template-columns:1fr 1.42fr;
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.mgsplit-text .eyebrow{margin-bottom:.5rem}
.mgsplit-text h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.mgsplit-text p{color:var(--text-soft);font-size:1.05rem;line-height:1.6;margin-top:1rem;max-width:34rem}
.mgsplit-media{margin:0;overflow:visible;aspect-ratio:960/540;
  filter:drop-shadow(0 26px 46px rgba(18,21,45,.34))}
.mgsplit-media iframe{width:100%;height:100%;border:0;display:block;background:transparent}
/* rev = Medium links, Text rechts — Spalten drehen, damit die Grafik die breite Spur behält */
.mgsplit-rev .mgsplit-inner{grid-template-columns:1.42fr 1fr}
.mgsplit-rev .mgsplit-media{order:-1}
@media (max-width:820px){
  .mgsplit-inner{grid-template-columns:1fr;gap:1.6rem}
  .mgsplit-rev .mgsplit-media{order:0}
  .mgsplit-media{max-width:520px;margin-inline:auto;width:100%}
}
html.anim .duo .shot-front{animation:drift-front 8s ease-in-out infinite}
html.anim .duo .shot-back{animation:drift-back 10.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  html.anim .shot-solo,html.anim .duo .shot-front,html.anim .duo .shot-back{animation:none !important}
}

/* ============================================================
   PAKETE — drei Preis-Karten in App-Farben
   ============================================================ */
.pricing{
  background:
    radial-gradient(48rem 30rem at 8% -15%, rgba(255,122,0,.07), transparent 60%),
    radial-gradient(48rem 30rem at 92% 115%, rgba(244,40,14,.06), transparent 60%),
    var(--white);
}
.pricing-head{text-align:center;max-width:44rem;margin-inline:auto}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;margin-top:var(--sec-inner);align-items:stretch;
}
.price-card{
  --pc:var(--blau);
  display:flex;flex-direction:column;gap:1rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  border-top:4px solid var(--pc);
  padding:1.9rem 1.6rem;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.price-card.pc-orga{--pc:var(--orange)}
.price-card.pc-tech{--pc:var(--blau)}
.price-card.pc-team{--pc:var(--rot)}
.price-app{font-weight:600;font-size:1.1rem;font-family:'Poppins',sans-serif}
.price-app .app-word{background:var(--pc);color:#fff;padding:.12em .55em .16em;border-radius:.55em;letter-spacing:.04em}
.price-value{display:flex;align-items:baseline;gap:.45rem}
.price-value b{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:600;letter-spacing:-.01em;font-family:'Poppins',sans-serif}
.price-value span{color:var(--mute);font-size:.9rem;font-weight:500}
.price-feats{display:flex;flex-direction:column;gap:.55rem;flex:1}
.price-feats li{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;color:var(--text-soft)}
.price-feats svg{flex:none;margin-top:.3rem}
.price-note{text-align:center;color:var(--mute);font-size:.85rem;margin-top:1.6rem}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:540px;margin-inline:auto}}

/* ============================================================
   KUNDEN & PARTNER — Namens-Chips
   ============================================================ */
.proof{
  background:linear-gradient(180deg,var(--surface-1),var(--white));
}
.proof-head{text-align:center;max-width:44rem;margin-inline:auto}
.chip-cloud{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  margin-top:1.9rem;max-width:56rem;margin-inline:auto;
}
.chip-cloud span{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1rem;font-size:.88rem;font-weight:600;color:var(--text-soft);
  box-shadow:0 4px 12px -9px rgba(18,21,45,.18);
  transition:transform .25s var(--ease-out),border-color .25s,color .25s;
}
.chip-cloud span:hover{transform:translateY(-2px);border-color:var(--blau);color:var(--navy)}
.proof-sub{
  text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin-top:2.6rem;
}
.chip-cloud.partners span{font-size:.82rem;padding:.4rem .9rem;font-weight:500}

/* ============================================================
   FIRMENGRUPPE — drei Marken, ein Verbund
   ============================================================ */
.group{
  background:
    radial-gradient(46rem 28rem at 12% -20%, rgba(13,113,234,.07), transparent 60%),
    radial-gradient(42rem 26rem at 88% 120%, rgba(255,122,0,.06), transparent 60%),
    var(--surface-1);
}
.group-head{text-align:center;max-width:44rem;margin-inline:auto}
.group-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;margin-top:var(--sec-inner);
}
.group-card{
  position:relative;display:flex;flex-direction:column;gap:.75rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.8rem 1.6rem;box-shadow:var(--shadow-card);
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
.group-card.self .group-tag{padding-right:110px}
a.group-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--blau)}
.group-card.self{border-color:color-mix(in srgb, var(--blau) 40%, var(--line))}
.group-badge{
  position:absolute;top:1.1rem;right:1.1rem;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blau);background:color-mix(in srgb, var(--blau) 12%, transparent);
  border-radius:999px;padding:.3rem .7rem;
}
.group-tag{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.group-wm{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem;min-height:44px}
.group-wm img{width:28px;height:28px}
/* echte Marken-Logos (panitec, FilialTec) — nicht stauchen */
.group-wm img.grp-logo{width:auto;height:auto;object-fit:contain;display:block}
.group-wm .grp-logo[src*="panitec"]{height:26px;max-width:150px}
.group-wm .grp-logo[src*="filialtec"]{height:42px;max-width:160px}
.group-wm .grp-logo[src*="semco-one"]{height:30px;max-width:160px}
/* Footer-Logo (weiß, auf dunklem Grund) */
.footer-logo{height:52px;width:auto;display:block}
.group-wm img.grp-logo-one{height:58px;width:auto;max-width:210px;object-fit:contain}
.group-wm .wm-light{font-weight:500}
.group-wm b{background:var(--navy);color:var(--white);padding:.06em .4em .1em;border-radius:.5em;font-weight:700}
.group-wm .pi{color:#2e45ff}
:root[data-theme="dark"] .group-wm .pi{color:#5a7bff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .group-wm .pi{color:#5a7bff}}
.group-wm .ft{color:#7cb1c0}
.group-card p{color:var(--text-soft);font-size:.92rem;line-height:1.55;flex:1}
.group-go{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.88rem;font-weight:600;color:var(--blau);
}
a.group-card:hover .group-go{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.group-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* ============================================================
   FOOTER — einzige dunkle Fläche
   ============================================================ */
.site-footer{background:#12152D;color:#fff;padding-block:3.25rem 2rem}
.footer-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand{display:flex;align-items:center;gap:.7rem;font-size:1.2rem;color:#fff}
.footer-brand img{height:52px;width:auto}
.footer-claim{font-size:1rem;font-weight:500;color:rgba(255,255,255,.85)}
.footer-claim .fc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 .15rem;vertical-align:middle}
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:1.75rem;font-size:.82rem;color:rgba(255,255,255,.55);
}
.footer-bottom a{color:rgba(255,255,255,.75);text-decoration:none}
.footer-bottom a:hover{color:#fff;text-decoration:underline}
.footer-links{display:flex;flex-wrap:wrap;gap:1.25rem}

/* ============================================================
   MULTI-PAGE: Cockpit-Band, Werkzeuge-Grid, App-Uebersicht
   ============================================================ */
.ck-band{background:linear-gradient(180deg,var(--surface-1),var(--white))}
.ck-grid{display:grid;grid-template-columns:1fr;gap:var(--sec-inner);align-items:center}
@media(min-width:900px){.ck-grid{grid-template-columns:1.05fr .95fr}}
.ck-points{margin-top:1.3rem;display:grid;gap:.6rem}
.ck-points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:var(--text-soft);list-style:none}
.ck-points svg{flex:none;margin-top:.2em}
.cockpit-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.1rem;box-shadow:var(--shadow-soft);max-width:440px;width:100%;margin-inline:auto}
.ck-bar{display:flex;align-items:center;justify-content:space-between;padding:.2rem .4rem .9rem;border-bottom:1px solid var(--line)}
.ck-bar .t{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem}
.ck-bar .t img{width:22px;height:22px}
.ck-live{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen);display:inline-flex;align-items:center;gap:.4em}
.ck-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 0 color-mix(in srgb,var(--gruen) 60%,transparent);animation:ckpulse 2.2s infinite}
@keyframes ckpulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ck-kpis{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.9rem}
.ck-kpi{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md);padding:.8rem .85rem}
.ck-kpi .l{font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.ck-kpi .v{font-family:'Poppins',sans-serif;font-size:1.7rem;font-weight:600;letter-spacing:-.02em;margin-top:.15rem;display:flex;align-items:baseline;gap:.12em;font-variant-numeric:tabular-nums}
.ck-kpi .v .u{font-size:.85rem;font-weight:600;color:var(--mute)}
.ck-kpi .d{font-size:.72rem;font-weight:600;margin-top:.1rem}
.ck-kpi .d.up{color:var(--gruen)}.ck-kpi .d.dn{color:var(--blau)}
.ck-spark{margin-top:.7rem;height:46px;width:100%}
.ck-apps{margin-top:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .4rem 0;border-top:1px solid var(--line)}
.ck-apps .lab{font-size:.72rem;color:var(--mute);font-weight:500}
.ck-apps .row{display:flex;gap:.4rem}.ck-apps .row img{width:30px;height:30px;border-radius:8px}

.feats{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:var(--sec-inner)}
@media(min-width:600px){.feats{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.feats{grid-template-columns:repeat(4,1fr)}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.1rem;transition:transform .2s,border-color .2s}
.feat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--fc,var(--blau)) 45%,var(--line))}
.feat .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--fc,var(--blau))}
.feat h3,.feat h4{font-family:'Poppins',sans-serif;margin-top:.8rem;font-size:1.02rem;font-weight:500}
.feat p{margin-top:.3rem;font-size:.88rem;color:var(--text-soft);line-height:1.5}

.apps-ov{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:var(--sec-inner)}
@media(min-width:760px){.apps-ov{grid-template-columns:1fr 1fr}}
.appcard{--c:var(--blau);position:relative;display:flex;flex-direction:column;gap:.85rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);border-top:3px solid var(--c);padding:1.6rem;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.appcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.appcard.c-orga{--c:var(--orange)}.appcard.c-team{--c:var(--rot)}.appcard.c-tech{--c:var(--blau)}.appcard.c-link{--c:var(--gruen)}
.appcard-top{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.appcard-top img{height:84px;width:auto;display:block;filter:drop-shadow(0 8px 16px rgba(18,21,45,.14))}
.appcard-top img.appcard-logo-white{display:none}
:root[data-theme="dark"] .appcard-top img.appcard-logo-dark{display:none}
:root[data-theme="dark"] .appcard-top img.appcard-logo-white{display:block}
.appcard-wm{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:500;letter-spacing:-.01em;line-height:1.05}
.appcard-wm b{color:var(--c);font-weight:600}
.appcard-tag{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-top:.3rem}
.appcard>p{color:var(--text-soft);font-size:.94rem;line-height:1.55}
.appcard-feats{display:flex;flex-direction:column;gap:.5rem;padding:0;list-style:none}
.appcard-feats li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--text-soft)}
.appcard-feats svg{flex:none;margin-top:.15em;color:var(--c)}
.appcard-go{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--c);font-size:.92rem}
.appcard:hover .appcard-go{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.ck-live::before{animation:none}}

/* ============================================================
   APP-DETAILSEITEN
   ============================================================ */
.apphero{position:relative;overflow:hidden;padding-block:clamp(2.6rem,4vw,4rem) 0}
.apphero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:420px;z-index:-1;filter:blur(10px);pointer-events:none;
  background:radial-gradient(42% 60% at 20% 0%, color-mix(in srgb,var(--ac) 22%,transparent), transparent 70%),radial-gradient(40% 55% at 85% 8%, color-mix(in srgb,var(--ac) 14%,transparent), transparent 70%)}
.apphero .back{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:500;color:var(--text-soft);margin-bottom:1.2rem}
.apphero .back:hover{color:var(--navy)}
.apphero-lock{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.apphero-lock img{width:60px;height:60px;border-radius:16px;filter:drop-shadow(0 10px 20px rgba(18,21,45,.2))}
.apphero-wm{font-family:'Poppins',sans-serif;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:500;letter-spacing:-.01em;line-height:1}
.apphero-wm b{color:var(--ac);font-weight:600}
.apphero-lock .apphero-tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:.3rem}
.apphero h1{font-family:'Poppins',sans-serif;font-size:clamp(1.9rem,4.4vw,3rem);font-weight:500;letter-spacing:-.01em;max-width:22ch;line-height:1.12}
.apphero p.lede{margin-top:1.1rem;max-width:52ch}
.apphero-cta{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem;padding-bottom:clamp(2.4rem,4vw,3.4rem)}
.app-cross{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:var(--sec-inner)}
@media(max-width:680px){.app-cross{grid-template-columns:1fr}}
.crosscard{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:.95rem 1.1rem;text-decoration:none;color:var(--navy);box-shadow:var(--shadow-card);transition:transform .25s var(--ease-out),border-color .25s}
.crosscard:hover{transform:translateY(-3px)}
.crosscard img{width:38px;height:38px;border-radius:10px;flex:none}
.crosscard .cc-wm{font-family:'Poppins',sans-serif;font-weight:500;font-size:1rem}
.crosscard .cc-wm b{font-weight:600}
.crosscard .cc-tag{font-size:.76rem;color:var(--mute)}
.crosscard.x-orga{--xc:var(--orange)} .crosscard.x-team{--xc:var(--rot)} .crosscard.x-tech{--xc:var(--blau)} .crosscard.x-link{--xc:var(--gruen)}
.crosscard:hover{border-color:color-mix(in srgb,var(--xc) 45%,var(--line))}
.crosscard .cc-wm b{color:var(--xc)}

/* ============================================================
   Ankuendigungsleiste, Bereichs-Auswahl, Hero-Elemente, Praxis-Badge
   ============================================================ */
.anno{background:var(--navy);color:var(--white)}
.anno-in{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;font-size:.82rem}
.anno-badge{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(90deg,var(--orange),var(--rot));color:#fff;border-radius:999px;padding:.16rem .55rem;flex:none}
.anno-txt{color:color-mix(in srgb,var(--white) 82%,transparent);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anno-link{margin-left:auto;font-weight:600;white-space:nowrap;color:var(--white);text-decoration:none;flex:none}
.anno-link:hover{text-decoration:underline}
.anno-x{background:none;border:0;color:color-mix(in srgb,var(--white) 60%,transparent);cursor:pointer;font-size:1.15rem;line-height:1;padding:.1rem .35rem;flex:none}
.anno-x:hover{color:var(--white)}
.anno.hide{display:none}

.selector{background:linear-gradient(180deg,var(--surface-1),var(--white))}
.sel-head{text-align:center;max-width:44rem;margin-inline:auto}
/* Hinweis, dass man auswählen kann */
.sel-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:var(--sec-inner) auto .95rem;color:var(--mute);font-size:.92rem;font-weight:500}
.sel-hint svg{color:var(--blau);flex:none;animation:sel-tap 2.4s ease-in-out infinite}
@keyframes sel-tap{0%,100%{transform:translateY(0)}12%{transform:translateY(-3px)}24%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sel-hint svg{animation:none}}

/* Segmented Control: klar als „eine Auswahl treffen" erkennbar */
.sel-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;
  width:fit-content;max-width:100%;margin:0 auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.4rem;
  box-shadow:inset 0 1px 3px rgba(18,21,45,.06)}
.sel-tab{--c:var(--blau);font-family:'Poppins',sans-serif;font-weight:500;font-size:.96rem;
  padding:.56rem 1.15rem;border-radius:999px;border:0;background:transparent;color:var(--text-soft);
  cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .15s;
  display:inline-flex;align-items:center;gap:.5rem}
.sel-tab .dot{width:9px;height:9px;border-radius:3px;background:var(--c);transition:transform .2s}
.sel-tab:not(.is-active):hover{background:var(--card);color:var(--navy);box-shadow:0 2px 8px -3px rgba(18,21,45,.2)}
.sel-tab:not(.is-active):hover .dot{transform:scale(1.25)}
.sel-tab.is-active{background:var(--c);color:#fff;box-shadow:0 8px 20px -8px var(--c);transform:translateY(-1px)}
.sel-tab.is-active .dot{background:#fff;transform:scale(1.15)}
.sel-tab[data-app=orga]{--c:var(--orange)}.sel-tab[data-app=team]{--c:var(--rot)}.sel-tab[data-app=tech]{--c:var(--blau)}.sel-tab[data-app=link]{--c:var(--gruen)}
.sel-panels{margin-top:1.7rem;max-width:58rem;margin-inline:auto}
.sel-panel{display:none}
.sel-panel.is-active{display:block;animation:selin .4s var(--ease-out)}
@keyframes selin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sel-pains{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:760px){.sel-pains{grid-template-columns:repeat(3,1fr)}}
.sel-panel{--c:var(--blau)}
.sel-panel.c-orga{--c:var(--orange)}.sel-panel.c-team{--c:var(--rot)}.sel-panel.c-tech{--c:var(--blau)}.sel-panel.c-link{--c:var(--gruen)}
.sel-pain{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:var(--radius-md);padding:1.05rem 1.15rem;color:var(--text-soft);font-size:.94rem;line-height:1.5;box-shadow:var(--shadow-card);display:flex;gap:.7rem;align-items:flex-start}
.sel-pain .x{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);font-weight:800;font-size:.8rem}
.sel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.4rem}
.sel-solve{display:inline-flex;align-items:center;gap:.5rem;font-family:'Poppins',sans-serif;font-weight:500;font-size:1rem;color:#fff;background:var(--c);padding:.72rem 1.4rem;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--c) 60%,transparent)}
.sel-solve:hover{transform:translateY(-2px)}
.sel-note{color:var(--mute);font-size:.88rem}

html.anim .hero::before{animation:heroLive 20s ease-in-out infinite}
@keyframes heroLive{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.09) translate(1.5%,1%)}}

.real-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--gruen);background:color-mix(in srgb,var(--gruen) 10%,transparent);border:1px solid color-mix(in srgb,var(--gruen) 30%,transparent);border-radius:999px;padding:.42rem .95rem;margin-top:1rem}
@media (prefers-reduced-motion:reduce){html.anim .hero::before{animation:none}}


/* ============================================================
   THEME — hell als Standard, dunkel per Umschalter
   ============================================================ */
body{background-color:var(--white);
  background-image:
    radial-gradient(50rem 30rem at 10% -5%, rgba(255,122,0,.07), transparent 60%),
    radial-gradient(48rem 30rem at 92% 4%, rgba(13,113,234,.09), transparent 60%),
    radial-gradient(52rem 34rem at 60% 118%, rgba(12,188,123,.06), transparent 62%);
  background-attachment:fixed;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(18,21,45,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,21,45,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(78% 60% at 50% 22%,#000,transparent 92%);mask:radial-gradient(78% 60% at 50% 22%,#000,transparent 92%)}
header,main,footer,.anno{position:relative;z-index:1}

/* Typo */
h1,h2,h3,h4{font-family:'Poppins',sans-serif;letter-spacing:-.02em}
.hero h1,.apphero h1{font-weight:300;letter-spacing:-.035em;line-height:1.05}
.sec-title,.pivot h2,.close-inner h2,.aa-head h3{font-weight:300}
.appcard-wm,.apphero-wm,.price-app,.num-value,.tl-time,.crosscard .cc-wm,.group-wm{font-weight:400}

.site-header{background:color-mix(in srgb, var(--white) 84%, transparent);border-bottom:1px solid var(--line)}

/* Buttons (hell) */
.btn-primary{background:linear-gradient(100deg,var(--blau),#3f8ef0)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 14px 30px -14px rgba(13,113,234,.45)!important}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{background:var(--card)!important;color:var(--navy)!important;border-color:var(--line)!important}
.btn-secondary:hover{background:var(--surface-1)!important;border-color:var(--mute)!important}

/* Karten: hell = weiß mit feiner Kante */
.cockpit-card,.appcard,.num-card,.step-card,.aud-card,.feat,.price-card,.group-card,.crosscard,.chat-box,.sel-pain,.aa-tile,.aa-frame,.mock,.problem-verdict,.hero-eyebrow,.badge{
  background:var(--card)!important;border-color:var(--line)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.cockpit-card{box-shadow:var(--shadow-soft)}
.appcard{box-shadow:var(--shadow-card)}
.appcard::after,.price-card{box-shadow:0 0 26px -8px var(--c,transparent)}
.app-art{border-color:var(--line)!important}

.anno{background:var(--surface-2)!important;color:var(--navy)!important;border-bottom:1px solid var(--line)}
.anno-txt{color:var(--text-soft)!important}
.anno-link{color:var(--navy)!important}
.site-footer{background:#12152D!important;border-top:1px solid var(--line)}

/* Hell/Dunkel-Umschalter wieder sichtbar */
.theme-btn{display:inline-flex!important}

.marquee{background:var(--surface-1)!important;border-color:var(--line)!important}
.selector{background:linear-gradient(180deg,var(--surface-1),var(--white))!important}

/* ---------------- DUNKEL (nur per Umschalter) ---------------- */
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(50rem 30rem at 10% -5%, rgba(255,138,61,.14), transparent 60%),
    radial-gradient(48rem 30rem at 92% 4%, rgba(76,147,255,.17), transparent 60%),
    radial-gradient(52rem 34rem at 60% 118%, rgba(34,201,139,.12), transparent 62%);}
:root[data-theme="dark"] body::before{opacity:.7;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)}
:root[data-theme="dark"] .btn-primary{background:linear-gradient(100deg,var(--blau),#7db0ff)!important;color:#04122e!important;box-shadow:0 14px 34px -14px rgba(76,147,255,.6)!important}
:root[data-theme="dark"] .btn-secondary{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.16)!important}
:root[data-theme="dark"] .btn-secondary:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.4)!important}
:root[data-theme="dark"] .cockpit-card,:root[data-theme="dark"] .appcard,:root[data-theme="dark"] .num-card,:root[data-theme="dark"] .step-card,:root[data-theme="dark"] .aud-card,:root[data-theme="dark"] .feat,:root[data-theme="dark"] .price-card,:root[data-theme="dark"] .group-card,:root[data-theme="dark"] .crosscard,:root[data-theme="dark"] .chat-box,:root[data-theme="dark"] .sel-pain,:root[data-theme="dark"] .aa-tile,:root[data-theme="dark"] .aa-frame,:root[data-theme="dark"] .mock,:root[data-theme="dark"] .problem-verdict,:root[data-theme="dark"] .hero-eyebrow,:root[data-theme="dark"] .badge{
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.04))!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
:root[data-theme="dark"] .cockpit-card{box-shadow:0 44px 100px -46px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07)}
:root[data-theme="dark"] .anno{background:#1B2239!important}
:root[data-theme="dark"] .site-footer{background:#171E33!important}
:root[data-theme="dark"] .feat .fi,:root[data-theme="dark"] .aud-c .ic,:root[data-theme="dark"] .ck-apps .row img,:root[data-theme="dark"] .appcard-top img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}

/* ============================================================
   UI-MOTION-MOCKUPS — ersetzen die App-Videos (reines CSS/SVG)
   Heller App-Screen im dunklen Glas-Device, endlos loopend
   ============================================================ */
.uim{position:relative;border-radius:26px;padding:12px;
  background:linear-gradient(160deg,#212a50,#0d1330);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 46px 104px -48px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.09);}
.uim *{box-sizing:border-box}
.uim-screen{position:relative;border-radius:15px;overflow:hidden;background:#eef1f7;color:#111634;
  font-family:'Poppins',sans-serif;height:100%;line-height:1.25}
.uim.tab{width:100%;max-width:540px;aspect-ratio:15/11}
.uim.phone{width:min(280px,74%);aspect-ratio:210/430}
.uim-note{margin-top:.75rem;text-align:center;font-size:.82rem;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.uim *{animation:none!important}}

/* -- gemeinsame Screen-Chrome -- */
.uim-bar{display:flex;align-items:center;gap:.4rem;padding:8px 11px;background:#fff;border-bottom:1px solid #e5e9f2}
.uim-bar .dts{display:flex;gap:4px}.uim-bar .dts i{width:7px;height:7px;border-radius:50%;background:#d3d9e6}
.uim-ttl{font-size:11px;font-weight:600;color:#3a4166;margin-left:2px}
.uim-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:#0CBC7B;text-transform:uppercase;letter-spacing:.06em}
.uim-live b{width:6px;height:6px;border-radius:50%;background:#0CBC7B;animation:uim-blink 1.6s infinite}
@keyframes uim-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ============ TECH — Inventar + Deutschland-Karte ============ */
.uim.tech .uim-screen{display:grid;grid-template-rows:auto 1fr}
.uim-tech-body{display:grid;grid-template-columns:46% 1fr;min-height:0}
.uim-inv{border-right:1px solid #e5e9f2;padding:9px 7px;display:flex;flex-direction:column;gap:5px;background:#fff;min-width:0}
.uim-inv .ih{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98a0bb;margin-bottom:1px}
.uim-row{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:8px;background:#f5f7fb;font-size:9.5px;font-weight:500;white-space:nowrap;min-width:0}
.uim-row .st{width:8px;height:8px;border-radius:50%;background:#0CBC7B;flex:0 0 auto;box-shadow:0 0 0 3px rgba(12,188,123,.15)}
.uim-row .lc{margin-left:auto;font-size:8px;color:#9aa2bd;flex:0 0 auto}
.uim-row.alert{animation:uim-rowalert 11s infinite}
.uim-row.alert .st{animation:uim-stalert 11s infinite}
@keyframes uim-rowalert{0%,24%{background:#f5f7fb}30%,90%{background:#fff1ef;box-shadow:inset 0 0 0 1px #ffd7d0}96%,100%{background:#f5f7fb;box-shadow:none}}
@keyframes uim-stalert{0%,24%{background:#0CBC7B;box-shadow:0 0 0 3px rgba(12,188,123,.15)}30%,90%{background:#F4280E;box-shadow:0 0 0 3px rgba(244,40,14,.2)}96%,100%{background:#0CBC7B}}
.uim-map{position:relative;background:
   radial-gradient(120% 90% at 60% 30%,#eaf1ff,#dde6f5);overflow:hidden}
.uim-map svg{position:absolute;inset:0;width:100%;height:100%}
.uim-map .de{fill:#cdd9ef;stroke:#a9bbdd;stroke-width:1.1;filter:drop-shadow(0 6px 10px rgba(13,113,234,.18))}
.uim-pin{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%)}
.uim-pin.ok{background:#0D71EA;box-shadow:0 0 0 0 rgba(13,113,234,.5);animation:uim-ping 2.4s infinite}
.uim-pin.ok.b{animation-delay:.8s}.uim-pin.ok.c{animation-delay:1.5s}
@keyframes uim-ping{0%{box-shadow:0 0 0 0 rgba(13,113,234,.45)}70%,100%{box-shadow:0 0 0 9px rgba(13,113,234,0)}}
.uim-pin.err{background:#F4280E;width:11px;height:11px;opacity:0;animation:uim-errpin 11s infinite}
@keyframes uim-errpin{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}34%,90%{opacity:1;transform:translate(-50%,-50%) scale(1)}box-shadow:0 0 0 0 rgba(244,40,14,.5)}96%,100%{opacity:0}}
.uim-pin.err::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(244,40,14,.55);animation:uim-ping-r 1.4s infinite}
@keyframes uim-ping-r{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.uim-tech-toast{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #ffd7d0;border-left:3px solid #F4280E;border-radius:9px;padding:7px 9px;
  box-shadow:0 12px 26px -12px rgba(20,10,10,.35);opacity:0;transform:translateY(14px);animation:uim-toast 11s infinite}
.uim-tech-toast .ic{width:18px;height:18px;border-radius:6px;background:#F4280E;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto}
.uim-tech-toast .tx b{display:block;font-size:10px;font-weight:700;color:#12152D}
.uim-tech-toast .tx span{font-size:9px;color:#8a91ad}
@keyframes uim-toast{0%,26%{opacity:0;transform:translateY(14px)}31%,88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(14px)}}
.uim-tech .tech-dot{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);z-index:3;
  offset-path:path("M 78 26 L 60 52");offset-distance:0%;animation:uim-drive 11s infinite}
.uim-tech .tech-dot i{display:block;width:12px;height:12px;border-radius:50% 50% 50% 2px;background:#12152D;box-shadow:0 3px 6px rgba(0,0,0,.4)}
@keyframes uim-drive{0%,40%{offset-distance:0%;opacity:0}46%{opacity:1}80%{offset-distance:100%;opacity:1}86%,100%{opacity:0}}

/* ============ ORGA — KI-Suche im Wissenspool (Phone) ============ */
.uim.ki .uim-screen{display:flex;flex-direction:column;background:#f2f4fa}
.uim-ki-head{padding:11px 12px 9px;background:#fff;border-bottom:1px solid #e9edf5}
.uim-ki-head .kt{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#12152D}
.uim-ki-head .kt .b{width:14px;height:14px;border-radius:5px;background:linear-gradient(150deg,#FF9B00,#FF6A00)}
.uim-search{margin-top:9px;display:flex;align-items:center;gap:7px;background:#f4f6fb;border:1px solid #e3e8f2;border-radius:9px;padding:7px 9px}
.uim-search .mg{width:12px;height:12px;border:1.8px solid #FF7A00;border-radius:50%;position:relative;flex:0 0 auto}
.uim-search .mg::after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;height:1.8px;background:#FF7A00;transform:rotate(45deg);border-radius:2px}
.uim-q{font-size:10.5px;font-weight:500;color:#12152D;white-space:nowrap;overflow:hidden;border-right:1.5px solid #FF7A00;
  width:0;animation:uim-type 11s steps(22,end) infinite, uim-caret .7s step-end infinite}
@keyframes uim-type{0%{width:0}4%{width:0}34%{width:12.5ch}90%{width:12.5ch}97%,100%{width:0}}
@keyframes uim-caret{50%{border-color:transparent}}
.uim-ki-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px;position:relative;flex:1}
.uim-results{display:flex;flex-direction:column;gap:8px}
.uim-thinking{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:9.5px;font-weight:600;color:#FF7A00;
  background:#fff3e8;border:1px solid #ffdcb8;border-radius:999px;padding:5px 9px;opacity:0;animation:uim-think 11s infinite}
.uim-thinking .sp{width:9px;height:9px;border-radius:50%;border:2px solid #ffcf9c;border-top-color:#FF7A00;animation:uim-spin .8s linear infinite}
@keyframes uim-spin{to{transform:rotate(360deg)}}
@keyframes uim-think{0%,34%{opacity:0}38%,52%{opacity:1}58%,100%{opacity:0}}
.uim-res{background:#fff;border:1px solid #e9edf5;border-radius:11px;padding:9px 10px;box-shadow:0 10px 22px -14px rgba(20,20,40,.25);
  opacity:0;transform:translateY(12px);}
.uim-res.r1{animation:uim-res1 11s infinite}
.uim-res.r2{animation:uim-res2 11s infinite}
@keyframes uim-res1{0%,52%{opacity:0;transform:translateY(12px)}58%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(12px)}}
@keyframes uim-res2{0%,60%{opacity:0;transform:translateY(12px)}66%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(12px)}}
.uim-res .rh{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#12152D}
.uim-res .doc{width:13px;height:13px;border-radius:3px;background:#FF7A00;flex:0 0 auto;position:relative}
.uim-res .doc::after{content:"";position:absolute;inset:3px 3px auto 3px;height:1.5px;background:#fff;box-shadow:0 3px 0 #fff,0 6px 0 rgba(255,255,255,.6)}
.uim-res .badge{margin-left:auto;font-size:8px;font-weight:700;color:#0CBC7B;background:#e7f8f1;border-radius:999px;padding:2px 6px}
.uim-res .hl{margin-top:6px;font-size:9.5px;color:#3a4166;background:linear-gradient(transparent 55%,#ffe6a8 55%);display:inline;padding:0 2px;line-height:1.6}
.uim-res .src{margin-top:6px;font-size:8.5px;color:#98a0bb}

/* ============ ORGA-MELDUNG — Störung per QR melden (Phone) ============ */
.uim.mld .uim-screen{background:#0f1430}
.uim-mld-layer{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0}
.uim-mld-layer.s1{animation:uim-mld1 12s infinite}
.uim-mld-layer.s2{animation:uim-mld2 12s infinite}
.uim-mld-layer.s3{animation:uim-mld3 12s infinite}
@keyframes uim-mld1{0%,30%{opacity:1}36%,100%{opacity:0}}
@keyframes uim-mld2{0%,34%{opacity:0}40%,66%{opacity:1}72%,100%{opacity:0}}
@keyframes uim-mld3{0%,70%{opacity:0}76%,96%{opacity:1}100%{opacity:0}}
/* Scan-Screen */
.uim-scan{flex:1;position:relative;background:radial-gradient(90% 70% at 50% 42%,#1c2450,#0c1128);display:grid;place-items:center}
.uim-scan .cam{width:56%;aspect-ratio:1;border-radius:16px;background:linear-gradient(150deg,#2b3566,#161d40);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.uim-scan .cam .dev{position:absolute;inset:26%;border-radius:10px;background:linear-gradient(160deg,#3a4680,#232c58)}
.uim-scan .cam .cn{position:absolute;width:16px;height:16px;border:2.4px solid #FF9B00}
.uim-scan .cam .cn.tl{top:9px;left:9px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.uim-scan .cam .cn.tr{top:9px;right:9px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.uim-scan .cam .cn.bl{bottom:9px;left:9px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.uim-scan .cam .cn.br{bottom:9px;right:9px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.uim-scan .cam .laser{position:absolute;left:9px;right:9px;height:2px;background:linear-gradient(90deg,transparent,#FF9B00,transparent);top:12px;box-shadow:0 0 10px #FF9B00;animation:uim-laser 2.1s ease-in-out infinite}
@keyframes uim-laser{0%,100%{top:12px}50%{top:calc(100% - 12px)}}
.uim-scan .cap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:10px;font-weight:600;color:#cdd6f5}
/* Form-Screen */
.uim-form{flex:1;background:#f2f4fa;padding:12px 12px}
.uim-form .fh{font-size:11px;font-weight:700;color:#12152D;display:flex;align-items:center;gap:6px}
.uim-form .fh .ok{width:15px;height:15px;border-radius:50%;background:#0CBC7B;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}
.uim-fld{margin-top:9px;background:#fff;border:1px solid #e6eaf3;border-radius:8px;padding:7px 9px;opacity:0;transform:translateY(8px);animation:uim-fld 12s infinite}
.uim-fld.f2{animation-delay:.35s}.uim-fld.f3{animation-delay:.7s}
@keyframes uim-fld{0%,40%{opacity:0;transform:translateY(8px)}46%,66%{opacity:1;transform:translateY(0)}72%,100%{opacity:0}}
.uim-fld .k{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a2a9c2}
.uim-fld .v{font-size:10.5px;font-weight:600;color:#12152D;margin-top:2px;display:flex;align-items:center;gap:6px}
.uim-fld .chip{font-size:8.5px;font-weight:700;color:#F4280E;background:#feecea;border-radius:999px;padding:2px 7px}
.uim-btn{margin-top:11px;background:linear-gradient(100deg,#FF7A00,#FF9B00);color:#fff;text-align:center;font-size:11px;font-weight:700;
  border-radius:9px;padding:9px;box-shadow:0 10px 22px -10px rgba(255,122,0,.6);opacity:0;animation:uim-btn 12s infinite}
@keyframes uim-btn{0%,52%{opacity:0;transform:scale(.96)}58%,63%{opacity:1;transform:scale(1)}66%{transform:scale(.93)}70%,100%{opacity:0}}
/* Success-Screen */
.uim-succ{flex:1;background:radial-gradient(90% 70% at 50% 40%,#12351f,#0c1128);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:16px}
.uim-succ .big{width:52px;height:52px;border-radius:50%;background:#0CBC7B;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(12,188,123,.5);animation:uim-succring 2.4s infinite}
.uim-succ .big svg{width:26px;height:26px}
@keyframes uim-succring{0%{box-shadow:0 0 0 0 rgba(12,188,123,.5)}70%,100%{box-shadow:0 0 0 18px rgba(12,188,123,0)}}
.uim-succ .t{font-size:12px;font-weight:700;color:#fff;text-align:center}
.uim-succ .s{font-size:9.5px;color:#9fb6c9;text-align:center;margin-top:3px}
.uim-succ .notif{margin-top:4px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:6px 10px}
.uim-succ .notif .ic{width:16px;height:16px;border-radius:5px;background:#0D71EA;flex:0 0 auto}
.uim-succ .notif b{font-size:9.5px;color:#fff;font-weight:600}

/* KI-Suche im Querformat (App-Detailseiten, sitzt im Ring) */
.uim.ki.tab{width:100%;max-width:520px;aspect-ratio:15/11}
.uim.ki.tab .uim-search{margin-top:0;flex:1}
.uim.ki.tab .uim-ki-head .kt{margin-bottom:9px}
.uim.ki.tab .uim-ki-head{display:flex;flex-direction:column}
.uim.ki.tab .uim-results{flex-direction:row;align-items:stretch}
.uim.ki.tab .uim-res{flex:1;min-width:0}

.uim-stage{display:flex;justify-content:center;margin-bottom:.2rem}

/* ============================================================
   App-Detail: Deko-Kreise entfernen + realistische TECH-Karte
   ============================================================ */
.ring-text{display:none!important}
.app-art::before{display:none!important}

/* Realistische Live-Karte (SVG-Szene) */
.uim-map{background:linear-gradient(158deg,#eef3fc,#dbe6f6)!important}
.uim-mapsvg{position:absolute;inset:0;width:100%;height:100%}
.de2{fill:#d9e3f5;stroke:#aebfdd;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 5px 8px rgba(13,113,234,.16))}
.uim-region{fill:none;stroke:#c3d1ea;stroke-width:.7;opacity:.65}
.uim-city{fill:#a7b7d8}
.uim-clabel{fill:#8291b4;font-size:4.6px;font-weight:600;font-family:'Poppins',sans-serif}
.uim-okpin{fill:#0D71EA}
.uim-okrip{fill:none;stroke:#0D71EA;stroke-width:1.3;transform-box:fill-box;transform-origin:center;animation:uim-okrip 2.6s ease-out infinite}
.uim-okrip.b{animation-delay:.9s}.uim-okrip.c{animation-delay:1.7s}
@keyframes uim-okrip{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.7);opacity:0}}
.uim-route{fill:none;stroke:#0D71EA;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:26;stroke-dashoffset:26;opacity:0;animation:uim-route 11s ease-in-out infinite}
@keyframes uim-route{0%,30%{stroke-dashoffset:26;opacity:0}35%{opacity:.85}55%{stroke-dashoffset:0;opacity:.85}86%{opacity:.85}93%,100%{opacity:0;stroke-dashoffset:26}}
.uim-errg{animation:uim-errg 11s ease-out infinite}
@keyframes uim-errg{0%,27%{opacity:0}31%{opacity:1}88%{opacity:1}95%,100%{opacity:0}}
.uim-errpin{fill:#F4280E;transform-box:fill-box;transform-origin:center;animation:uim-errdrop 11s cubic-bezier(.5,1.6,.5,1) infinite}
@keyframes uim-errdrop{0%,27%{transform:translateY(-9px) scale(.2)}31%{transform:translateY(0) scale(1.35)}36%,100%{transform:translateY(0) scale(1)}}
.uim-errrip{fill:none;stroke:#F4280E;stroke-width:1.3;transform-box:fill-box;transform-origin:center;animation:uim-errrip 1.5s ease-out infinite}
@keyframes uim-errrip{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.uim-tmark{fill:#12152D}
.uim-tmark-ring{fill:rgba(18,21,45,.14)}

/* Toast schlanker (einzeilig) */
.uim-tech-toast{padding:6px 9px!important}
.uim-tech-toast .tx{font-size:9.5px;color:#5a6180;line-height:1.25}
.uim-tech-toast .tx b{display:inline!important;font-size:9.5px!important;color:#12152D}

/* ============================================================
   Mockups TEAM (Schulung→Zertifikat) + LINK (QR→Info→gelöst)
   ============================================================ */
/* ---- LINK (grün) ---- */
.uim.link .uim-screen{display:grid;grid-template-rows:auto 1fr;background:#eef1f7}
.uim-link-body{display:grid;grid-template-columns:42% 1fr;min-height:0}
.uim-qr{position:relative;background:radial-gradient(90% 80% at 50% 42%,#eafaf3,#d3ecdf);display:grid;place-items:center;border-right:1px solid #e5e9f2;overflow:hidden}
.uim-qrimg{width:54%;aspect-ratio:1}
.uim-qrimg rect{fill:#12352a}
.uim-qrimg rect.lt{fill:#eafaf3}
.uim-qrline{position:absolute;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,#0CBC7B,transparent);box-shadow:0 0 10px #0CBC7B;top:26%;animation:uim-qrline 2.1s ease-in-out infinite}
@keyframes uim-qrline{0%,100%{top:26%}50%{top:72%}}
.uim-qrcap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:9px;font-weight:600;color:#2b7a5f}
.uim-qrok{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,188,123,.94);color:#fff;font-size:28px;font-weight:900;opacity:0;animation:uim-qrok 11s infinite}
@keyframes uim-qrok{0%,22%{opacity:0}26%{opacity:1}33%,100%{opacity:0}}
.uim-link-info{padding:10px 11px;display:flex;flex-direction:column;gap:8px;background:#fff}
.uim-dev{display:flex;align-items:center;gap:8px;border:1px solid #e6eaf3;border-radius:10px;padding:8px 9px;opacity:0;transform:translateY(8px);animation:uim-dev 11s infinite}
@keyframes uim-dev{0%,28%{opacity:0;transform:translateY(8px)}33%,92%{opacity:1;transform:translateY(0)}97%,100%{opacity:0}}
.uim-dev-ic{width:26px;height:26px;border-radius:7px;background:linear-gradient(150deg,#22C98B,#0CBC7B);flex:0 0 auto}
.uim-dev b{display:block;font-size:10.5px;color:#12152D}
.uim-dev span{font-size:9px;color:#8a91ad}
.uim-dev i{color:#0CBC7B;font-style:normal;font-weight:700}
.uim-steps{display:flex;flex-direction:column;gap:5px}
.uim-step{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#3a4166;background:#f5f7fb;border-radius:7px;padding:5px 7px;opacity:0;transform:translateX(-6px)}
.uim-step i{width:15px;height:15px;border-radius:50%;background:#0CBC7B;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:800;font-style:normal;flex:0 0 auto}
.uim-step.s1{animation:uim-step 11s infinite}
.uim-step.s2{animation:uim-step 11s infinite .22s}
.uim-step.s3{animation:uim-step 11s infinite .44s}
@keyframes uim-step{0%,35%{opacity:0;transform:translateX(-6px)}40%,92%{opacity:1;transform:translateX(0)}97%,100%{opacity:0}}
.uim-linkdone{margin-top:7px;background:#e7f8f1;border:1px solid #b6e8d4;color:#0a7a52;border-radius:8px;padding:7px 9px;font-size:9.5px;font-weight:700;text-align:center;opacity:0;animation:uim-linkdone 11s infinite}
@keyframes uim-linkdone{0%,60%{opacity:0;transform:scale(.96)}66%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}

/* ---- TEAM (rot) ---- */
.uim.team .uim-screen{display:grid;grid-template-rows:auto 1fr;background:#eef1f7}
.uim-team-body{display:grid;grid-template-columns:40% 1fr;min-height:0}
.uim-mods{background:#fff;border-right:1px solid #e5e9f2;padding:9px 8px;display:flex;flex-direction:column;gap:5px;min-width:0}
.uim-mods .mh{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98a0bb;margin-bottom:1px}
.uim-mod{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:500;color:#3a4166;background:#f5f7fb;border-radius:8px;padding:6px 7px;white-space:nowrap}
.uim-mod i{width:14px;height:14px;border-radius:50%;border:1.6px solid #cfd6e6;flex:0 0 auto;display:grid;place-items:center;font-size:8px;font-style:normal;color:#fff}
.uim-mod.done i{background:#0CBC7B;border-color:#0CBC7B}
.uim-mod.active{background:#feecea;box-shadow:inset 0 0 0 1px #f7c9c2}
.uim-mod.active i{border-color:#F4280E}
.uim-mod .pc{margin-left:auto;font-size:8.5px;color:#9aa2bd;font-weight:600}
.uim-mod.done .pc{color:#0CBC7B}
.uim-mod.active .pc{color:#F4280E}
.uim-lesson{padding:11px 12px;display:flex;flex-direction:column;gap:9px;background:#fff}
.uim-lesson .lh{font-size:11px;font-weight:700;color:#12152D}
.uim-prog{height:7px;border-radius:99px;background:#eef1f7;overflow:hidden}
.uim-progbar{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#F4280E,#ff6a52);animation:uim-prog 11s ease-out infinite}
@keyframes uim-prog{0%,8%{width:0}52%,92%{width:100%}97%,100%{width:0}}
.uim-quiz{background:#f7f9fc;border:1px solid #e9edf5;border-radius:9px;padding:8px 9px;display:flex;flex-direction:column;gap:5px}
.uim-quiz .q{font-size:9.5px;font-weight:700;color:#12152D}
.uim-opt{font-size:9px;color:#3a4166;background:#fff;border:1px solid #e6eaf3;border-radius:7px;padding:5px 8px;opacity:0;transform:translateY(5px);animation:uim-opt 11s infinite}
.uim-opt.o2{animation-delay:.12s}.uim-opt.o3{animation-delay:.24s}
@keyframes uim-opt{0%,40%{opacity:0;transform:translateY(5px)}46%,92%{opacity:1;transform:translateY(0)}97%,100%{opacity:0}}
.uim-opt.correct{animation:uim-optc 11s infinite}
@keyframes uim-optc{0%,40%{opacity:0;transform:translateY(5px)}46%{opacity:1;transform:translateY(0);background:#fff;border-color:#e6eaf3;color:#3a4166}56%,92%{opacity:1;background:#e7f8f1;border-color:#0CBC7B;color:#0a7a52;font-weight:700}97%,100%{opacity:0}}
.uim-opt.correct::after{content:" ✓";color:#0CBC7B;font-weight:900}
.uim-cert{margin-top:7px;text-align:center;font-size:9.5px;font-weight:700;color:#7a1f13;background:linear-gradient(100deg,#fff0d6,#ffe0b8);border:1px solid #f2cf95;border-radius:8px;padding:7px 9px;opacity:0;animation:uim-cert 11s infinite}
@keyframes uim-cert{0%,60%{opacity:0;transform:scale(.94)}66%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}

/* ============ Beweis-Zahlen-Leiste (aus Salespage) ============ */
.proofstrip{padding:1.7rem 0;border-block:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-1),var(--white))}
.proofstrip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
@media(min-width:760px){.proofstrip-grid{grid-template-columns:repeat(3,1fr)}}
.proofstrip-grid>div{text-align:center;position:relative}
@media(min-width:760px){.proofstrip-grid>div+div::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line)}}
.ps-num{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2rem,4.2vw,3.05rem);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.ps-lbl{display:block;margin-top:.4rem;font-size:.85rem;color:var(--text-soft)}
/* Emoji-Icon-Variante der feat-Karten */
.feat .fi.emo{background:color-mix(in srgb, var(--fc) 20%, transparent);display:grid;place-items:center;font-size:19px;line-height:1}

/* Analyse: animiertes iPad-Dashboard statt statischem Bild */
.aa-frame.aa-embed{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible;max-width:1000px}
.aa-frame.aa-embed::after{display:none!important}
.aa-frame.aa-embed iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ============================================================
   KI-Bot — klassifiziert Störungsmeldungen (Analyse-Kachel)
   ============================================================ */
.kibot{position:relative;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 30%,#141d3a,#0b1022);font-family:'Poppins',sans-serif}
.kibot *{box-sizing:border-box}
/* Roh-Meldungen fliegen von links rein */
.kb-in{position:absolute;left:3%;top:0;bottom:0;width:30%;display:flex;flex-direction:column;justify-content:center;gap:7px;z-index:2}
.kb-chip{align-self:flex-start;max-width:100%;font-size:9px;font-weight:500;color:#cdd6f5;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:4px 8px;white-space:nowrap;opacity:0}
.kb-chip.i1{animation:kb-fly 7s ease-in infinite}
.kb-chip.i2{animation:kb-fly 7s ease-in infinite 1.1s}
.kb-chip.i3{animation:kb-fly 7s ease-in infinite 2.2s}
@keyframes kb-fly{0%{opacity:0;transform:translateX(-14px) scale(.9)}8%{opacity:1;transform:translateX(0) scale(1)}22%{opacity:1;transform:translateX(8px)}32%{opacity:0;transform:translateX(70px) scale(.6)}100%{opacity:0}}

/* Bot in der Mitte */
.kb-bot{position:absolute;left:30%;top:50%;transform:translate(-50%,-50%);width:30%;max-width:104px;height:auto;z-index:3}
.kb-ball{transform-box:fill-box;transform-origin:center;animation:kb-ball 1.6s ease-in-out infinite}
@keyframes kb-ball{0%,100%{opacity:.7}50%{opacity:1;filter:drop-shadow(0 0 5px #FF8A3D)}}
.kb-eye{transform-box:fill-box;transform-origin:center;animation:kb-scan 2.1s ease-in-out infinite}
@keyframes kb-scan{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.kb-scanline{opacity:.9;animation:kb-line 2.1s ease-in-out infinite}
@keyframes kb-line{0%,100%{transform:translateY(-6px);opacity:0}50%{transform:translateY(6px);opacity:.85}}
.kb-ring{transform-box:fill-box;transform-origin:center;animation:kb-ring 7s ease-out infinite}
@keyframes kb-ring{0%,30%{opacity:0;transform:scale(.6)}38%{opacity:.6;transform:scale(1)}55%{opacity:0;transform:scale(1.7)}100%{opacity:0}}

/* Klassifizierte Kategorien poppen rechts raus */
.kb-out{position:absolute;right:4%;top:0;bottom:0;width:54%;display:flex;flex-direction:column;justify-content:center;gap:6px;z-index:2}
.kb-cat{display:flex;align-items:center;gap:6px;align-self:flex-end;font-size:9px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 9px;white-space:nowrap;
  opacity:0;transform:translateX(10px) scale(.9)}
.kb-cat i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.kb-cat .n{margin-left:2px;color:#9fb0d6;font-weight:700}
.kb-cat.o1{animation:kb-pop 7s ease-out infinite 3.2s}
.kb-cat.o2{animation:kb-pop 7s ease-out infinite 3.7s}
.kb-cat.o3{animation:kb-pop 7s ease-out infinite 4.2s}
@keyframes kb-pop{0%,6%{opacity:0;transform:translateX(10px) scale(.9)}12%{opacity:1;transform:translateX(0) scale(1.04)}16%,80%{opacity:1;transform:translateX(0) scale(1)}90%,100%{opacity:0;transform:translateX(6px)}}
.kb-tag{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#6f7aa0;z-index:2}
@media (prefers-reduced-motion:reduce){.kibot *{animation:none!important;opacity:1!important}}

/* ============================================================
   Analyse-Kacheln: Dienstleister-Benchmark + Kosten-Heatmap
   ============================================================ */
.dbench{position:relative;width:100%;height:100%;background:radial-gradient(90% 80% at 50% 20%,#141d3a,#0b1022);padding:12px 14px;font-family:'Poppins',sans-serif;display:flex;flex-direction:column;gap:8px;justify-content:center}
.dbench-h{font-size:10px;font-weight:700;color:#9fb0d6;letter-spacing:.5px;text-transform:uppercase}
.db-row{display:flex;align-items:center;gap:8px;opacity:0;animation:db-row 7s ease-out infinite}
.db-row.r1{animation-delay:.2s}.db-row.r2{animation-delay:.5s}.db-row.r3{animation-delay:.8s}.db-row.r4{animation-delay:1.1s}
@keyframes db-row{0%{opacity:0}6%,90%{opacity:1}98%,100%{opacity:0}}
.db-name{font-size:10px;color:#dfe6fb;width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-track{flex:1;height:10px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden}
.db-bar{display:block;height:100%;border-radius:6px;transform-origin:left;transform:scaleX(0);animation:db-grow 7s cubic-bezier(.22,.61,.36,1) infinite}
.db-row.r1 .db-bar{animation-delay:.2s}.db-row.r2 .db-bar{animation-delay:.5s}.db-row.r3 .db-bar{animation-delay:.8s}.db-row.r4 .db-bar{animation-delay:1.1s}
@keyframes db-grow{0%{transform:scaleX(0)}16%{transform:scaleX(1)}90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.db-val{font-size:10px;font-weight:700;color:#fff;width:38px;text-align:right;font-variant-numeric:tabular-nums}

.kmat{position:relative;width:100%;height:100%;background:radial-gradient(90% 80% at 50% 20%,#141d3a,#0b1022);padding:12px 13px;font-family:'Poppins',sans-serif;display:flex;flex-direction:column;gap:7px}
.kmat-h{font-size:10px;font-weight:700;color:#9fb0d6;letter-spacing:.5px;text-transform:uppercase}
.km-grid{flex:1;display:grid;grid-template-columns:40% repeat(5,1fr) auto;gap:4px;align-content:center}
.km-lbl{font-size:9px;color:#c3ccec;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-cell{border-radius:4px;min-height:15px;background:var(--c,rgba(255,255,255,.05));opacity:0;transform:scale(.6);animation:km-in 7s ease-out infinite}
.km-cell.hi{box-shadow:inset 0 0 0 1px rgba(255,138,61,.7)}
@keyframes km-in{0%{opacity:0;transform:scale(.6)}10%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.6)}}
.km-tot{font-size:9px;font-weight:700;color:#ffb98a;display:flex;align-items:center;justify-content:flex-end;white-space:nowrap}

/* Analyse-Kacheln: Tablet-Motion-Grafiken per iframe */
.aa-img iframe{width:100%;height:100%;border:0;display:block;background:transparent}

/* Analyse-Kacheln freistellen: Tablets floaten ohne Karten-Box */
.app-analyse .aa-tile{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.app-analyse .aa-tile:hover{transform:none!important;box-shadow:none!important}
.app-analyse .aa-tile .aa-img{background:transparent!important;overflow:visible;box-shadow:none}
.app-analyse .aa-tile .aa-img::after{display:none!important}
.app-analyse .aa-tile figcaption{padding-inline:.4rem}

/* Analyse-Tablets bündig zur Seitenbreite (Container), nicht überstehend */
.aa-frame.aa-embed{width:100%!important;max-width:var(--container)!important;margin-inline:auto}
.app-analyse .aa-grid{width:100%;max-width:var(--container);margin-left:auto;margin-right:auto;gap:1.4rem}
.app-analyse .aa-tile .aa-img{aspect-ratio:16/9}

/* ============================================================
   HELL/DUNKEL-MIX — dunkle „Bühnen" in heller Basis
   ============================================================ */
.tone-dark{
  --navy:#EDF0FA;
  --orange:#FF8A3D; --rot:#FF5A47; --gruen:#22C98B; --blau:#4C93FF;
  --white:#141A2E; --card:#1E2542; --surface-1:#1A2038; --surface-2:#242C4E;
  --line:rgba(255,255,255,.14); --text-soft:#AAB3D0; --mute:#8C95B6;
  --shadow-soft:0 34px 80px -34px rgba(0,0,0,.6);
  --shadow-card:0 18px 46px -20px rgba(0,0,0,.48);
  background-color:var(--white); color:var(--navy);
  position:relative; isolation:isolate;
}
/* Atmosphäre: farbige Glows + feines Grid */
.tone-dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(42rem 24rem at 12% -10%, rgba(255,138,61,.12), transparent 60%),
    radial-gradient(40rem 24rem at 88% 6%, rgba(76,147,255,.15), transparent 60%),
    radial-gradient(44rem 26rem at 62% 112%, rgba(34,201,139,.10), transparent 62%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:auto,auto,auto,56px 56px,56px 56px;}
/* Karten in dunklen Bühnen wieder als Glas */
.tone-dark .cockpit-card,.tone-dark .appcard,.tone-dark .num-card,.tone-dark .step-card,
.tone-dark .aud-card,.tone-dark .feat,.tone-dark .price-card,.tone-dark .group-card,
.tone-dark .crosscard,.tone-dark .chat-box,.tone-dark .sel-pain,.tone-dark .mock,
.tone-dark .problem-verdict,.tone-dark .hero-eyebrow,.tone-dark .badge{
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.04))!important;
  border-color:var(--line)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.tone-dark .cockpit-card{box-shadow:0 44px 100px -46px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07)}
/* Buttons in dunklen Bühnen */
.tone-dark .btn-primary{background:linear-gradient(100deg,var(--blau),#7db0ff)!important;color:#04122e!important;box-shadow:0 14px 34px -14px rgba(76,147,255,.55)!important}
.tone-dark .btn-secondary{background:rgba(255,255,255,.05)!important;color:var(--navy)!important;border-color:rgba(255,255,255,.18)!important}
.tone-dark .btn-secondary:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.4)!important}

/* Analyse: große abgerundete Dark-Stage in heller Sektion */
.app-analyse.tone-dark{
  width:min(96vw,1400px); margin-inline:auto; margin-top:clamp(2.5rem,5vw,4rem);
  border-radius:clamp(20px,2.5vw,34px);
  padding:clamp(1.8rem,4vw,3.2rem) clamp(1.1rem,3vw,2.4rem);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 110px -50px rgba(18,21,45,.45);
  overflow:hidden;}
.app-analyse.tone-dark .aa-frame.aa-embed{width:min(100%,1240px)!important}
.app-analyse.tone-dark .aa-grid{width:min(100%,1240px)}

/* ============================================================
   ECHTE semco CI + bündiges, modernes Layout
   ============================================================ */
/* --- 1) CI-Typografie: runde Displayschrift für Headlines --- */
h1,h2,h3,h4,.wm-semco,.wm-one,.appcard-wm,.apphero-wm,.cc-wm,.group-wm,.price-app,.btn{
  font-family:'Baloo 2','Poppins',sans-serif}
h1,h2,h3,h4{letter-spacing:-.005em}
.hero h1,.apphero h1{font-weight:600;line-height:1.14;letter-spacing:-.01em}
.sec-title,.pivot h2,.close-inner h2,.aa-head h3{font-weight:600;line-height:1.18}
.btn{font-weight:600}

/* --- 2) Markenfarben bleiben CI-treu, auch dunkel --- */
.tone-dark,:root[data-theme="dark"]{
  --orange:#FF7A00; --rot:#F4280E; --gruen:#0CBC7B; --blau:#1384F9;
}
.tone-dark{
  --navy:#F3F5FC;
  --white:#12152D;                    /* CI-Navy als dunkle Bühne */
  --card:#1C2143; --surface-1:#181C3A; --surface-2:#232A50;
  --line:rgba(255,255,255,.13);
  --text-soft:#B4BCD8; --mute:#8F98BA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- 3) Dunkle Bühnen randlos über die volle Breite --- */
section.tone-dark{
  width:auto; max-width:none;
  margin-inline:0;
  margin-block:0;
  border-radius:0;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
section.tone-dark > .container{max-width:var(--container);margin-inline:auto;padding-inline:0}
.app-analyse.tone-dark{
  width:100%; max-width:var(--container); margin-inline:auto;
  border-radius:0;
}
/* Tablet + Kachelreihe bündig zur Seitenbreite (Container) statt volle Bühne */
.app-analyse.tone-dark .aa-frame.aa-embed{width:100%!important;max-width:var(--container)!important;margin-inline:auto}
.app-analyse.tone-dark .aa-grid{width:100%;max-width:var(--container);margin-inline:auto}

/* --- 4) Modernere Hintergründe: weiche Marken-Verläufe statt Raster --- */
body{background-image:
  radial-gradient(60rem 32rem at 8% -8%, rgba(255,122,0,.06), transparent 62%),
  radial-gradient(56rem 30rem at 96% 2%, rgba(13,113,234,.08), transparent 62%),
  radial-gradient(64rem 36rem at 50% 108%, rgba(12,188,123,.05), transparent 64%)}
body::before{display:none}
.tone-dark::after{border-radius:inherit;background-size:auto;
  background-image:
    radial-gradient(38rem 22rem at 10% -12%, rgba(255,122,0,.16), transparent 62%),
    radial-gradient(36rem 22rem at 90% 4%, rgba(19,132,249,.20), transparent 62%),
    radial-gradient(40rem 24rem at 62% 114%, rgba(12,188,123,.13), transparent 64%)}
/* Analyse-Bühne randlos: aus dem Container ausbrechen */
.app-analyse.tone-dark{
  width:100vw; max-width:none;
  margin-inline:calc(50% - 50vw);
  border-radius:0;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.app-analyse.tone-dark > *{max-width:var(--container);margin-inline:auto}

/* ============ Partner-Wand: weiße Logos auf transparent ============ */
/* Alle Herstellerlogos als einheitlich weiße Silhouetten (brightness(0)
   invert(1)) auf transparentem Grund — keine Kacheln, ruhiger Auftritt.
   12 Partner, Spaltenzahl stets Teiler von 12 (6+6 / 4+4+4 / 3er / 2er). */
.partner-wall{display:grid;grid-template-columns:repeat(6,1fr);
  gap:1.7rem 1.2rem;margin-top:1.4rem}
.pw-item{display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:.35rem .6rem;background:none;border:0;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.pw-item:hover{transform:translateY(-2px)}
.pw-item img{max-height:29px;max-width:100%;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.8}
.pw-item:hover img{opacity:1}
.pw-text span{font-family:'Baloo 2','Poppins',sans-serif;font-weight:600;
  font-size:.95rem;color:#fff;opacity:.8;letter-spacing:-.01em;text-align:center}
.pw-item.pw-text:hover span{opacity:1}
@media (max-width:900px){ .partner-wall{grid-template-columns:repeat(4,1fr)} }
@media (max-width:640px){
  .partner-wall{grid-template-columns:repeat(3,1fr);gap:1.3rem .8rem}
  .pw-item img{max-height:25px}
  .pw-text span{font-size:.85rem}
}
@media (max-width:420px){ .partner-wall{grid-template-columns:repeat(2,1fr)} }

/* ============ Kundenlogo-Marquee: läuft links → rechts ============ */
.logo-marquee{overflow:hidden;margin-top:var(--sec-inner);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.logo-marquee-track{display:flex;align-items:center;gap:clamp(2.2rem,5vw,4rem);
  width:max-content;will-change:transform}
/* -50% → 0 bewegt den Inhalt nach rechts; doppelter Satz = nahtlose Schleife */
html.anim .logo-marquee-track{animation:logo-scroll 44s linear infinite}
@keyframes logo-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused}
.logo-marquee a{flex:none;display:flex;align-items:center;justify-content:center;height:52px}
.logo-marquee .lw-img{max-height:40px;max-width:150px;width:auto;object-fit:contain;
  opacity:.85;transition:opacity .25s var(--ease-out)}
.logo-marquee a:hover .lw-img{opacity:1}
.logo-marquee .lw-img.invert{filter:invert(1)}
@media (prefers-reduced-motion:reduce){
  html.anim .logo-marquee-track{animation:none;transform:translateX(0)}
  .logo-marquee{-webkit-mask-image:none;mask-image:none}
  .logo-marquee-track{flex-wrap:wrap;justify-content:center;gap:1.4rem 2.4rem}
}
@media (max-width:420px){ .partner-wall{grid-template-columns:repeat(2,1fr)} }

/* ============ Referenzen: echte Kundenlogos ============ */
/* 10 Kundenlogos: 5 Spalten ergeben zwei volle Zeilen (5+5), 2 Spalten fuenf Zeilen */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin-top:var(--sec-inner)}
.logo-wall a{display:flex;align-items:center;justify-content:center;min-height:94px;padding:1rem 1.15rem;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:rgba(255,255,255,.045);
  transition:transform .25s var(--ease-out),background .25s var(--ease-out),border-color .25s var(--ease-out)}
.logo-wall a:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.32)}
.logo-wall .lw-img{max-width:100%;max-height:44px;object-fit:contain;opacity:.88;transition:opacity .25s var(--ease-out)}
.logo-wall a:hover .lw-img{opacity:1}
.logo-wall .lw-img.invert{filter:invert(1)}          /* schwarzes Logo für dunkle Bühne */
.logo-more{margin-top:1.1rem;text-align:center;font-size:.86rem;color:var(--text-soft);line-height:1.7}
@media (max-width:520px){.logo-wall{grid-template-columns:repeat(2,1fr)}.logo-wall a{min-height:78px}}

/* ============ App-Namen überall im Marken-Gradient ============ */
/* Ersetzt die per-App-Einzelfarben der App-Namen (ORGA/TEAM/TECH/LINK)
   durch den durchlaufenden Marken-Verlauf — konsistent zur Filial-Cockpit-
   Schrift. Die App-Zuordnung bleibt über Kartenrand/Icon erhalten. */
.appcard-wm b,
.apphero-wm b,
.crosscard .cc-wm b{
  background:linear-gradient(100deg,var(--orange) 0%,var(--rot) 34%,var(--gruen) 66%,var(--blau) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Preis-Badges: Pille im Gradient statt Einzelfarbe, Text bleibt weiß */
.price-app .app-word{
  background:linear-gradient(100deg,var(--orange) 0%,var(--rot) 34%,var(--gruen) 66%,var(--blau) 100%);
  color:#fff;-webkit-text-fill-color:#fff;
}

/* ============ Wissens-Hub & Ratgeber-Artikel ============ */
.wiki{padding:clamp(2rem,5vw,3.6rem) 0 clamp(2.5rem,6vw,4.5rem)}
.wiki-inner{max-width:820px}
.wiki-crumbs{font-size:.82rem;color:var(--mute);margin-bottom:1.4rem}
.wiki-crumbs a{color:var(--text-soft);text-decoration:none}
.wiki-crumbs a:hover{color:var(--blau)}
.wiki-hero{border-bottom:1px solid var(--line);padding-bottom:1.6rem;margin-bottom:1.8rem}
.wiki-hero h1{font-size:clamp(1.9rem,4.2vw,2.7rem);font-weight:600;line-height:1.14;margin:.5rem 0 0}
.wiki-lede{color:var(--text-soft);font-size:1.14rem;line-height:1.6;margin-top:1rem;max-width:44rem}
.wiki-body{font-size:1.05rem;line-height:1.72;color:var(--ink)}
.wiki-body h2{font-family:'Baloo 2','Poppins',sans-serif;font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:600;line-height:1.22;margin:2.2rem 0 .7rem}
.wiki-body h3{font-size:1.15rem;font-weight:600;margin:1.5rem 0 .5rem}
.wiki-body p{margin:.85rem 0;color:var(--text-soft)}
.wiki-body strong{color:var(--ink);font-weight:600}
.wiki-body ul,.wiki-body ol{margin:.9rem 0;padding-left:0;list-style:none}
.wiki-body ul li{position:relative;padding-left:1.7rem;margin:.5rem 0;color:var(--text-soft)}
.wiki-body ul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--ac,var(--blau))}
.wiki-body ol{counter-reset:wo}
.wiki-body ol li{counter-increment:wo;position:relative;padding-left:2rem;margin:.5rem 0;color:var(--text-soft)}
.wiki-body ol li::before{content:counter(wo);position:absolute;left:0;top:.05em;width:1.35rem;height:1.35rem;border-radius:50%;background:color-mix(in srgb,var(--ac,var(--blau)) 14%,transparent);color:var(--ac,var(--blau));font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.wiki-body .wtake{background:var(--surface-1);border-left:3px solid var(--ac,var(--blau));border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:1.4rem 0}
.wiki-body .wtake p{margin:0;color:var(--ink)}

/* FAQ */
.wq{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.6rem}
.wq h2{font-family:'Baloo 2','Poppins',sans-serif;font-size:1.5rem;font-weight:600;margin:0 0 1rem}
.wq-item{border:1px solid var(--line);border-radius:12px;margin:.6rem 0;background:var(--card);overflow:hidden}
.wq-item summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:500;list-style:none;position:relative;padding-right:2.6rem}
.wq-item summary::-webkit-details-marker{display:none}
.wq-item summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--ac,var(--blau));font-weight:400}
.wq-item[open] summary::after{content:"–"}
.wq-a{padding:0 1.1rem 1rem;color:var(--text-soft)}
.wq-a p{margin:0}

/* CTA */
.wiki-cta{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center;
  margin-top:2.6rem;padding:1.6rem 1.8rem;border-radius:18px;
  background:linear-gradient(120deg,var(--navy),#1b2140);color:#fff}
.wiki-cta .wc-k{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#9fb0d6;margin:0 0 .2rem}
.wiki-cta h3{font-family:'Baloo 2',sans-serif;color:#fff;font-size:1.35rem;margin:0 0 .4rem}
.wiki-cta p{color:#c6cfe8;margin:0;font-size:.95rem;max-width:30rem}
.wiki-cta .wc-btns{display:flex;gap:.7rem;flex-wrap:wrap}

/* Verwandte Themen */
.wiki-related{margin-top:2.6rem}
.wr-title{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 .8rem}
.wr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.wr-grid a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--card);
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;transition:.2s var(--ease-out)}
.wr-grid a:hover{border-color:var(--ac,var(--blau));transform:translateY(-2px)}
.wr-grid a svg{color:var(--ac,var(--blau));flex:none}

/* Hub-Index */
.whub{padding:clamp(2rem,5vw,3.4rem) 0 clamp(2.5rem,6vw,4.5rem)}
.whub-head{max-width:44rem;margin-bottom:2rem}
.whub-head h1{font-size:clamp(2rem,4.5vw,2.9rem);font-weight:600;line-height:1.12;margin:.4rem 0 0}
.whub-head p{color:var(--text-soft);font-size:1.12rem;margin-top:.9rem}
.whub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.whub-card{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;border:1px solid var(--line);
  border-radius:16px;background:var(--card);text-decoration:none;color:var(--ink);
  border-top:3px solid var(--wc,var(--blau));transition:.25s var(--ease-out);box-shadow:var(--shadow-card)}
.whub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.whub-card .wc-app{font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--wc,var(--blau))}
.whub-card h3{font-family:'Baloo 2',sans-serif;font-size:1.15rem;font-weight:600;margin:.1rem 0;line-height:1.25}
.whub-card p{color:var(--text-soft);font-size:.9rem;margin:0;line-height:1.5}
.whub-group{font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:600;color:var(--mute);margin:2rem 0 .8rem}
@media(max-width:820px){.whub-grid{grid-template-columns:1fr 1fr}.wr-grid{grid-template-columns:1fr}}
@media(max-width:560px){.whub-grid{grid-template-columns:1fr}.wiki-cta{flex-direction:column;align-items:flex-start}}

/* ============ Rechtliche Seiten ============ */
.legal{padding-top:clamp(1.5rem,4vw,2.6rem)}
.legal-review{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid var(--orange);
  border-radius:12px;padding:.9rem 1.2rem;margin:1.2rem 0 1.6rem;font-size:.92rem;color:#7c4a12}
.legal-review strong{color:#7c4a12}
.legal-body h2{font-size:1.15rem;margin-top:1.9rem}
.legal-body p,.legal-body li{font-size:.98rem;line-height:1.7}
.legal-body a{color:var(--blau)}
:root[data-theme="dark"] .legal-review{background:rgba(255,122,0,.08);border-color:rgba(255,122,0,.3);color:#f0b878}

/* ============ Einsparrechner ============ */
.rech-hero{position:relative;overflow:hidden;padding-block:clamp(2.4rem,5vw,3.8rem) clamp(3rem,6vw,4.5rem)}
.rech-head{position:relative;z-index:1;max-width:50rem;margin-inline:auto;text-align:center}
.rech-head h1{font-weight:600;line-height:1.12;font-size:clamp(2rem,4.6vw,3rem);margin-top:1rem}
.rech-sub{color:var(--text-soft);font-size:1.1rem;max-width:40rem;margin:1rem auto 0}
.rech-panel{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  max-width:var(--container);margin:clamp(1.8rem,4vw,2.6rem) auto 0;
  background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px -44px rgba(18,21,45,.42)}
.rech-inputs{padding:clamp(1.4rem,3vw,2.2rem)}
.rech-field{margin-bottom:1.5rem}
.rech-field:last-child{margin-bottom:0}
.rech-field label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-weight:500;font-size:.98rem;margin-bottom:.6rem;color:var(--ink)}
.rech-field output{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--blau);font-size:1.05rem;white-space:nowrap}
.rech-hint{display:block;color:var(--mute);font-size:.82rem;margin-top:.4rem}
.rech-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--surface-2);outline:none;cursor:pointer}
.rech-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(140deg,var(--blau),#4c93ff);border:3px solid #fff;box-shadow:0 3px 10px -2px rgba(13,113,234,.6);cursor:pointer}
.rech-field input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--blau);border:3px solid #fff;box-shadow:0 3px 10px -2px rgba(13,113,234,.6);cursor:pointer}
.rech-result{background:linear-gradient(150deg,var(--navy),#1b2140);color:#fff;padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.5rem;justify-content:center}
.rech-result .rr-k{color:#9fb0d6;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin:0}
.rech-result .rr-big{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;margin:.2rem 0 .6rem;
  background:linear-gradient(100deg,#ffd9a8,#8fd3ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rr-rows{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 1rem}
.rr-rows>div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;background:rgba(255,255,255,.06);border-radius:10px;font-size:.92rem}
.rr-rows span{color:#c6cfe8}.rr-rows b{font-family:'Baloo 2',sans-serif;font-weight:600}
.rr-roi{background:rgba(12,188,123,.16)!important}.rr-roi b{color:#5ee6a8}
.rech-disc{position:relative;z-index:1;max-width:46rem;margin:1.2rem auto 0;text-align:center;color:var(--mute);font-size:.82rem;line-height:1.6}
@media(max-width:760px){.rech-panel{grid-template-columns:1fr}}

/* ============ Wissen/Branchen Motion-Graphics ============ */
.wiki-body .mg{margin:1.8rem 0;border-radius:18px;overflow:hidden;position:relative;
  background:#12152D;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(18,21,45,.5)}
.mg-inner{padding:clamp(1.3rem,3vw,2rem);position:relative;z-index:1}
.mg-cap{text-align:center;font-size:.82rem;color:var(--mute);margin-top:.7rem}
.mg *{box-sizing:border-box}
/* HACCP-Checkliste */
.mg-haccp{--g:#0CBC7B}
.mg-haccp .hc-row{display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem;margin:.45rem 0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#EDF0FA;font-size:.95rem}
.mg-haccp .hc-box{width:26px;height:26px;border-radius:8px;flex:none;border:2px solid rgba(255,255,255,.25);position:relative}
.mg-haccp .hc-box svg{position:absolute;inset:0;width:100%;height:100%;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22}
html.anim .mg-haccp.go .hc-row .hc-box{background:var(--g);border-color:var(--g);transition:.3s var(--ease-out)}
html.anim .mg-haccp.go .hc-row .hc-box svg{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease-out) .15s}
.mg-haccp .hc-row:nth-child(1){transition-delay:0s}
.mg-haccp .hc-badge{margin-top:1rem;text-align:center;color:var(--g);font-weight:600;font-size:.9rem;opacity:0}
html.anim .mg-haccp.go .hc-badge{opacity:1;transition:opacity .4s 1.4s}
/* QR-Scan */
.mg-qr{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center}
.mg-qr .qr-phone{width:118px;height:210px;margin-inline:auto;background:#0a0d1c;border:3px solid #2a3358;border-radius:22px;position:relative;overflow:hidden;flex:none}
.mg-qr .qr-code{position:absolute;inset:22% 20%;background:
  conic-gradient(from 0deg,#EDF0FA 25%,transparent 0 50%,#EDF0FA 0 75%,transparent 0);background-size:14px 14px;opacity:.85;border-radius:6px}
.mg-qr .qr-scan{position:absolute;left:18%;right:18%;height:3px;background:#5ee6a8;box-shadow:0 0 10px #5ee6a8;top:24%}
html.anim .mg-qr.go .qr-scan{animation:qrscan 2.2s ease-in-out infinite}
@keyframes qrscan{0%,100%{top:24%}50%{top:70%}}
.mg-qr .qr-toast{background:rgba(94,230,168,.1);border:1px solid rgba(94,230,168,.3);border-radius:12px;padding:1rem 1.15rem;color:#EDF0FA}
.mg-qr .qr-toast b{display:block;font-size:.95rem}.mg-qr .qr-toast span{color:#9fb0d6;font-size:.85rem}
.mg-qr .qr-toast .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5ee6a8;margin-right:.4rem}
.mg-qr .qr-toast{opacity:0;transform:translateY(8px)}
html.anim .mg-qr.go .qr-toast{opacity:1;transform:none;transition:.5s var(--ease-out) .6s}
/* KPI-Chart */
.mg-kpi{display:flex;align-items:flex-end;gap:.9rem;height:180px;padding-top:1rem}
.mg-kpi .kp{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;height:100%;justify-content:flex-end}
.mg-kpi .kp-bar{width:100%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#4c93ff,#0D71EA);transform:scaleY(0);transform-origin:bottom;height:var(--h)}
html.anim .mg-kpi.go .kp-bar{transform:scaleY(1);transition:transform .9s var(--ease-out)}
.mg-kpi .kp:nth-child(2) .kp-bar{transition-delay:.1s}.mg-kpi .kp:nth-child(3) .kp-bar{transition-delay:.2s;background:linear-gradient(180deg,#5ee6a8,#0CBC7B)}.mg-kpi .kp:nth-child(4) .kp-bar{transition-delay:.3s}
.mg-kpi .kp-lbl{color:#9fb0d6;font-size:.8rem}.mg-kpi .kp-val{color:#EDF0FA;font-weight:600;font-size:.9rem}
@media(max-width:560px){.mg-qr{grid-template-columns:1fr}}
/* HACCP Stagger */
html.anim .mg-haccp.go .hc-row:nth-child(2) .hc-box,html.anim .mg-haccp.go .hc-row:nth-child(2) .hc-box svg{transition-delay:.25s,.4s}
html.anim .mg-haccp.go .hc-row:nth-child(3) .hc-box,html.anim .mg-haccp.go .hc-row:nth-child(3) .hc-box svg{transition-delay:.5s,.65s}
html.anim .mg-haccp.go .hc-row:nth-child(4) .hc-box,html.anim .mg-haccp.go .hc-row:nth-child(4) .hc-box svg{transition-delay:.75s,.9s}
@media (prefers-reduced-motion:reduce){.mg *{animation:none!important;transition:none!important}
  .mg-haccp .hc-box{background:var(--g)!important;border-color:var(--g)!important}
  .mg-haccp .hc-box svg{stroke-dashoffset:0!important}.mg-haccp .hc-badge,.mg-qr .qr-toast{opacity:1!important;transform:none!important}
  .mg-kpi .kp-bar{transform:scaleY(1)!important}}

/* ============ Solution Experience ============ */
.solex{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0b53de 0%,#1f7bff 40%,#0c2a86 100%)}
.solex::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 60% at 16% 8%,rgba(150,196,255,.55),transparent 62%),
             radial-gradient(55% 55% at 92% 96%,rgba(7,18,66,.7),transparent 60%)}
.solex>.container{position:relative;z-index:2}
.solex-head{text-align:center;max-width:46rem;margin:0 auto clamp(1.9rem,4vw,3rem)}
.solex .eyebrow-light{justify-content:center;color:#c3d8ff}
.solex .eyebrow-light::before{background:linear-gradient(90deg,#fff,#8fbaff)}
.solex-head h2{font-family:'Baloo 2',sans-serif;font-weight:600;color:#fff;margin:0;
  font-size:clamp(1.7rem,3.4vw,2.55rem);line-height:1.14;letter-spacing:-.01em}
.solex-sub{color:rgba(255,255,255,.85);font-size:1.05rem;margin:.8rem auto 0;max-width:36rem}
/* Bühne */
.solex-stage{position:relative;max-width:920px;margin:0 auto;min-height:clamp(330px,42vw,490px)}
.solex-browser{position:absolute;right:0;top:0;width:75%;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 46px 100px -34px rgba(3,9,38,.7);border:1px solid rgba(255,255,255,.55)}
.solex-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#eef1f7;border-bottom:1px solid #e2e6f0}
.solex-bar .d{width:11px;height:11px;border-radius:50%;flex:none}
.solex-bar .r{background:#ff5f57}.solex-bar .y{background:#febc2e}.solex-bar .g{background:#28c840}
.solex-bar .url{margin-left:10px;flex:1;background:#fff;border:1px solid #e6e9f2;border-radius:7px;
  padding:5px 12px;font-size:12px;color:#8b93ad;font-family:'Poppins',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.solex-shot{aspect-ratio:1.33/1;background:#fff}
.solex-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:opacity .3s var(--ease-out)}
.solex-phone{position:absolute;left:1%;bottom:-3%;width:25%;max-width:222px;min-width:132px;z-index:3;
  border-radius:30px;background:#0b0f1e;padding:7px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 44px 84px -26px rgba(3,9,38,.75)}
.solex-phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:32%;height:6px;border-radius:99px;background:#000;z-index:2;opacity:.9}
.solex-pshot{border-radius:23px;overflow:hidden;aspect-ratio:9/19;background:#0b0f1e}
.solex-pshot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:opacity .3s var(--ease-out)}
@keyframes solex-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* Feature-Leiste */
.solex-tabs{display:flex;gap:3px;margin:clamp(2rem,4vw,3rem) auto 0;max-width:980px;
  background:rgba(6,13,44,.5);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:6px;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);overflow-x:auto;scrollbar-width:none}
.solex-tabs::-webkit-scrollbar{display:none}
.solex-tab{flex:1 0 auto;min-width:132px;text-align:left;background:none;border:0;cursor:pointer;
  border-radius:12px;padding:11px 15px;transition:background .22s var(--ease-out)}
.solex-tab b{display:block;font-family:'Poppins',sans-serif;font-size:.93rem;font-weight:600;color:rgba(255,255,255,.9)}
.solex-tab span{font-size:.75rem;color:rgba(255,255,255,.52)}
.solex-tab:hover{background:rgba(255,255,255,.08)}
.solex-tab.is-active{background:rgba(255,255,255,.16)}
.solex-tab.is-active b{color:#fff}
.solex-tab.is-active span{color:#d3e3ff}
@media(max-width:760px){
  .solex-stage{min-height:0;display:flex;flex-direction:column-reverse;align-items:center;gap:0}
  .solex-browser{position:relative;right:auto;top:auto;width:100%}
  .solex-phone{position:relative;left:auto;bottom:auto;width:46%;margin:-46px 0 0 0}
  .solex-tabs{border-radius:14px}
  .solex-tab{min-width:150px}
}
@media(prefers-reduced-motion:reduce){.solex-phone{animation:none}}

/* Solex — Video + Feintuning */
.solex-shot video{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:opacity .3s var(--ease-out);background:#0b1022}
.solex-live{margin-left:12px;flex:none;font-size:11px;font-weight:600;color:#0aa06a;letter-spacing:.02em;display:inline-flex;align-items:center}
.solex-tab b,.solex-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.solex-tabs{max-width:1040px}
.solex-stage{min-height:clamp(360px,44vw,520px)}
.solex-phone{bottom:1%}
@media(max-width:760px){.solex-phone{bottom:auto}}

/* Solex — [hidden] muss display:block der Medien schlagen (Bild/Video-Umschaltung) */
.solex-shot img[hidden],.solex-shot video[hidden]{display:none!important}

/* ============ Solex Mockups (eigene UI, kein Bild/Video) ============ */
.solex-shot,.solex-pshot{position:relative;overflow:hidden}
.sx-desk,.sx-phone{position:absolute;top:0;left:0;transform-origin:top left;font-family:'Poppins',sans-serif;color:#12152D;-webkit-font-smoothing:antialiased}
.sx-desk{width:660px;height:495px}
.sx-phone{width:300px;height:632px}
.solex-shot .sx-desk[hidden],.solex-pshot .sx-phone[hidden]{display:none}
.sx-desk *,.sx-phone *{box-sizing:border-box;margin:0}
.sx-app{width:100%;height:100%;background:#eef1f8;display:flex;flex-direction:column;overflow:hidden}
.sx-app.dk{background:#0e1430}
/* Topbar */
.sx-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid #e7eaf3;flex:none}
.sx-app.dk .sx-top{background:#141c3d;border-color:rgba(255,255,255,.08)}
.sx-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none;font-size:15px}
.sx-ttl{font-weight:600;font-size:14.5px;line-height:1.1}.sx-ttl small{display:block;font-weight:400;font-size:11px;color:#98a0bd;margin-top:1px}
.sx-app.dk .sx-ttl{color:#eef1fb}
.sx-pill{margin-left:auto;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sx-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.sx-pill.g{color:#088a5a;background:rgba(12,188,123,.13)}
.sx-pill.o{color:#b5610a;background:rgba(255,122,0,.14)}
.sx-pill.b{color:#0d63cf;background:rgba(13,113,234,.13)}
/* Body */
.sx-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.sx-row2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;min-height:0}
.sx-card{background:#fff;border:1px solid #e7eaf3;border-radius:14px;padding:14px;display:flex;flex-direction:column;min-height:0}
.sx-app.dk .sx-card{background:#18213f;border-color:rgba(255,255,255,.07)}
.sx-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sx-ch b{font-size:13px;font-weight:600}.sx-ch span{font-size:11px;color:#8b93ad}
.sx-app.dk .sx-ch b{color:#eef1fb}
/* KPI */
.sx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sx-kpi{background:#fff;border:1px solid #e7eaf3;border-radius:12px;padding:11px 12px}
.sx-kpi .l{font-size:10.5px;color:#8b93ad;font-weight:500}
.sx-kpi .v{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.sx-kpi .d{font-size:10px;font-weight:600;margin-top:2px}
.sx-up{color:#0aa06a}.sx-dn{color:#e0402f}
.sx-kpi .v .u{font-size:12px;color:#98a0bd;font-weight:600}
/* Liste */
.sx-list{display:flex;flex-direction:column}
.sx-li{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #f0f2f8}
.sx-app.dk .sx-li{border-color:rgba(255,255,255,.06)}
.sx-li:last-child{border-bottom:0}
.sx-dot{width:9px;height:9px;border-radius:50%;flex:none}
.sx-li .t{flex:1;min-width:0}.sx-li .t b{font-size:12.5px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-li .t small{font-size:10.5px;color:#98a0bd}
.sx-tag{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sx-tag.g{color:#088a5a;background:rgba(12,188,123,.14)}
.sx-tag.o{color:#b5610a;background:rgba(255,122,0,.15)}
.sx-tag.r{color:#c62a1a;background:rgba(244,40,14,.13)}
.sx-tag.n{color:#5b6280;background:#eef1f8}
/* Progress / Bars */
.sx-prog{height:8px;border-radius:99px;background:#e9edf6;overflow:hidden}
.sx-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0CBC7B,#33d996)}
.sx-bars{display:flex;align-items:flex-end;gap:8px;height:100%;padding-top:6px}
.sx-bars .bar{flex:1;background:linear-gradient(180deg,#FF9a4d,#FF7A00);border-radius:5px 5px 0 0;min-height:6px}
.sx-bars .bar.hi{background:linear-gradient(180deg,#4c93ff,#0D71EA)}
/* Ring */
.sx-ring{position:relative;width:98px;height:98px;aspect-ratio:1;flex:none;margin:6px auto 8px}
.sx-ring svg{display:block;width:98px;height:98px;transform:rotate(-90deg)}
.sx-ring .bg{fill:none;stroke:#e9edf6;stroke-width:9}
.sx-ring .fg{fill:none;stroke:#0CBC7B;stroke-width:9;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:44}
.sx-ring .vv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-weight:700;font-size:22px}
.sx-ring .vv small{font-size:10px;color:#98a0bd;font-weight:500}
/* Check-Zeile */
.sx-chk{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.5px}
.sx-cbx{width:19px;height:19px;border-radius:6px;flex:none;display:grid;place-items:center;color:#fff;font-size:11px;background:#0CBC7B}
.sx-cbx.o{background:#fff;border:1.6px solid #d7dced;color:transparent}
.sx-chk.done{color:#12152D}.sx-chk.todo{color:#98a0bd}
/* Chat */
.sx-chat{display:flex;flex-direction:column;gap:9px;overflow:hidden}
.sx-msg{max-width:80%;padding:8px 12px;border-radius:14px;font-size:12px;line-height:1.35}
.sx-msg.in{background:#fff;border:1px solid #e7eaf3;align-self:flex-start;border-bottom-left-radius:4px}
.sx-msg.out{background:#0D71EA;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.sx-msg .rd{display:block;font-size:9.5px;opacity:.8;margin-top:3px;text-align:right}
/* KI-Klassifizierung */
.sx-ki{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;height:100%}
.sx-kin,.sx-kout{display:flex;flex-direction:column;gap:8px}
.sx-raw{background:#fff;border:1px solid #e7eaf3;border-radius:10px;padding:8px 11px;font-size:11.5px;color:#5b6280}
.sx-arrow{color:#0D71EA;font-size:22px;font-weight:700}
.sx-clu{background:#fff;border:1px solid #e7eaf3;border-radius:10px;padding:8px 11px}
.sx-clu b{font-size:11.5px;font-weight:600;display:flex;justify-content:space-between}
.sx-conf{height:5px;border-radius:99px;background:#e9edf6;margin-top:5px;overflow:hidden}
.sx-conf i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0D71EA,#4c93ff)}
/* Timeline (phone) */
.sx-tl{display:flex;flex-direction:column;gap:0}
.sx-tli{display:flex;gap:11px;padding-bottom:14px;position:relative}
.sx-tli::before{content:"";position:absolute;left:8px;top:18px;bottom:-2px;width:2px;background:#e3e8f2}
.sx-tli:last-child::before{display:none}
.sx-tli .mk{width:18px;height:18px;border-radius:50%;flex:none;background:#0CBC7B;display:grid;place-items:center;color:#fff;font-size:10px;z-index:1}
.sx-tli.now .mk{background:#0D71EA;box-shadow:0 0 0 4px rgba(13,113,234,.18)}
.sx-tli.wait .mk{background:#fff;border:2px solid #d7dced}
.sx-tli .tt b{font-size:12.5px;display:block}.sx-tli .tt small{font-size:10.5px;color:#98a0bd}
.sx-mini{display:flex;flex-direction:column;gap:9px}
.sx-statcard{background:#fff;border:1px solid #e7eaf3;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:11px}
.sx-statcard .ico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;font-size:15px}
.sx-statcard .v{font-size:18px;font-weight:700}.sx-statcard .l{font-size:10.5px;color:#8b93ad}
.sx-note{margin-top:auto;font-size:10.5px;color:#088a5a;background:rgba(12,188,123,.09);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:7px}
@media(prefers-reduced-motion:reduce){.sx-desk,.sx-phone{}}

/* ============ Solex Mockups — Animationen (spielen bei Tab-Wechsel neu) ============ */
@keyframes sx-in{from{opacity:0;transform:translateY(9px)}}
@keyframes sx-pop{from{opacity:0;transform:scale(.9)}}
@keyframes sx-growx{from{transform:scaleX(0)}}
@keyframes sx-growy{from{transform:scaleY(0)}}
@keyframes sx-ringin{from{stroke-dashoffset:264}}
@keyframes sx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(13,113,234,.5)}50%{box-shadow:0 0 0 7px rgba(13,113,234,0)}}
@keyframes sx-blink{0%,100%{opacity:1}50%{opacity:.35}}
/* Gesamt-Inhalt kurz einblenden */
.sx-body{animation:sx-in .4s var(--ease-out) both}
/* Datenelemente gestaffelt */
.sx-kpi,.sx-statcard,.sx-li,.sx-chk,.sx-tli,.sx-clu,.sx-raw{animation:sx-in .5s var(--ease-out) both}
.sx-kpi:nth-child(1),.sx-statcard:nth-child(1),.sx-li:nth-child(1),.sx-chk:nth-child(1),.sx-tli:nth-child(1),.sx-clu:nth-child(1),.sx-raw:nth-child(1){animation-delay:.06s}
.sx-kpi:nth-child(2),.sx-statcard:nth-child(2),.sx-li:nth-child(2),.sx-chk:nth-child(2),.sx-tli:nth-child(2),.sx-clu:nth-child(2),.sx-raw:nth-child(2){animation-delay:.14s}
.sx-kpi:nth-child(3),.sx-statcard:nth-child(3),.sx-li:nth-child(3),.sx-chk:nth-child(3),.sx-tli:nth-child(3),.sx-clu:nth-child(3),.sx-raw:nth-child(3){animation-delay:.22s}
.sx-kpi:nth-child(4),.sx-li:nth-child(4),.sx-chk:nth-child(4),.sx-tli:nth-child(4),.sx-raw:nth-child(4){animation-delay:.3s}
.sx-chk:nth-child(5),.sx-raw:nth-child(5){animation-delay:.38s}
/* Chat-Bubbles poppen nacheinander */
.sx-chat .sx-msg{animation:sx-pop .45s var(--ease-out) both}
.sx-chat .sx-msg:nth-child(2){animation-delay:.3s}
.sx-chat .sx-msg:nth-child(3){animation-delay:.6s}
.sx-chat .sx-msg:nth-child(4){animation-delay:.9s}
.sx-chat .sx-msg:nth-child(5){animation-delay:1.2s}
/* Balken wachsen */
.sx-bars .bar{transform-origin:bottom;animation:sx-growy .7s var(--ease-out) both}
.sx-bars .bar:nth-child(2){animation-delay:.08s}.sx-bars .bar:nth-child(3){animation-delay:.16s}
.sx-bars .bar:nth-child(4){animation-delay:.24s}.sx-bars .bar:nth-child(5){animation-delay:.32s}.sx-bars .bar:nth-child(6){animation-delay:.4s}
/* Fortschritt / Konfidenz laufen */
.sx-prog i,.sx-conf i{transform-origin:left;animation:sx-growx 1s var(--ease-out) .3s both}
/* Ring zeichnet sich */
.sx-ring .fg{animation:sx-ringin 1.3s var(--ease-out) .3s both}
/* Live-Indikatoren */
.sx-tli.now .mk{animation:sx-pulse 2s ease-in-out infinite}
.sx-pill .dot{animation:sx-blink 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sx-app *,.sx-body{animation:none!important}}

/* ============ Header-Hintergrund: Punkt-Raster + Glow ============ */
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:#fbfcff;
  background-image:
    radial-gradient(rgba(18,21,45,.07) 1.4px,transparent 1.6px),
    radial-gradient(60% 50% at 50% 18%,rgba(13,113,234,.12),transparent 66%),
    radial-gradient(40% 38% at 88% 30%,rgba(255,122,0,.07),transparent 72%);
  background-size:24px 24px,cover,cover;
  background-position:0 0,center,center;
  -webkit-mask:linear-gradient(180deg,#000 72%,transparent);
  mask:linear-gradient(180deg,#000 72%,transparent)}
:root[data-theme="dark"] .hero-grid{background-color:transparent;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1.4px,transparent 1.6px),
    radial-gradient(60% 50% at 50% 18%,rgba(76,147,255,.18),transparent 66%),
    radial-gradient(40% 38% at 88% 30%,rgba(255,138,61,.09),transparent 72%)}

/* ============ Übergang Analyse-Band -> Solex: kein weißer Zwischenraum ============ */
.apps{padding-bottom:0}
.app-analyse.tone-dark{padding-block:clamp(2.6rem,5vw,3.8rem)}

/* ===== Plattform-Unterseiten: echte App-Mockups + In-Aktion ===== */
.am-frame{position:relative;border-radius:36px;padding:10px;background:#0b0e1d;border:1px solid rgba(255,255,255,.08);box-shadow:0 34px 80px -26px rgba(10,14,35,.6);animation:drift-solo 9s ease-in-out infinite}
.am-frame *{box-sizing:border-box;margin:0}
.am-frame .am-phone{border-radius:27px;font-family:'Poppins',sans-serif;color:#12152D;-webkit-font-smoothing:antialiased}
.inakt-grid{display:grid;gap:26px;align-items:stretch}
.inakt-grid.portrait{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr)}
.inakt-grid.landscape{grid-template-columns:1fr 1fr}
.ia{margin:0;background:#ffffff;border:1px solid #e3e9f3;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;box-shadow:0 20px 50px -30px rgba(18,21,45,.18)}
.ia video{display:block;max-width:100%;border-radius:14px;border:1px solid #e3e9f3}
.portrait .ia-clip video{max-width:min(250px,100%)}
.ia figcaption{font-size:.86rem;color:#4c5470;display:flex;align-items:center;gap:8px;text-align:center;line-height:1.45;max-width:34rem}
.ia-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#FF7A00}
.ia-dot.z{background:#1BA44C}
.ia-desk-fit{width:100%;position:relative;overflow:hidden}
.ia-desk-inner{position:absolute;left:50%;top:0;width:660px;margin-left:-330px;transform-origin:top center}
.ia-desk-inner .am-desk{font-family:'Poppins',sans-serif;color:#12152D;border-radius:14px;border:1px solid #e3e9f3;box-shadow:0 18px 46px -18px rgba(18,21,45,.28)}
.ia-desk-inner *{box-sizing:border-box;margin:0}
@media(max-width:900px){.inakt-grid.portrait,.inakt-grid.landscape{grid-template-columns:1fr}}
:root[data-theme="dark"] .ia{background:#10182e;border-color:rgba(255,255,255,.07);box-shadow:none}
:root[data-theme="dark"] .ia figcaption{color:rgba(238,241,251,.66)}
:root[data-theme="dark"] .ia video,:root[data-theme="dark"] .ia-desk-inner .am-desk{border-color:rgba(255,255,255,.1)}

/* ============ Kundenstimmen-Karten (Referenzdesign aus Figma) ============ */
.refs{
  background:
    radial-gradient(46rem 26rem at 50% -22%, color-mix(in srgb,var(--orange) 9%,transparent), transparent 62%),
    var(--surface-1);
}
.refs-head{text-align:center;max-width:44rem;margin-inline:auto}
.ref-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:var(--sec-inner)}
@media(min-width:620px){.ref-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.ref-grid{grid-template-columns:repeat(4,1fr)}}
.ref-card{
  display:flex;flex-direction:column;background:#12152D;
  border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out);
}
.ref-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
/* Bildband: zeigt --rc-img, solange keins gesetzt ist den Markenverlauf */
.rc-photo{
  position:relative;aspect-ratio:16/11;border-radius:var(--radius-md) var(--radius-md) 0 0;
  background-image:var(--rc-img,none),linear-gradient(140deg,var(--rc-a,#FF9333),var(--rc-b,#FF7A00));
  background-size:cover;background-position:center 24%;
}
.rc-photo::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%,rgba(18,21,45,.5));
}
.rc-mark{position:absolute;left:1.05rem;bottom:-.45rem;z-index:2;display:block;color:var(--orange)}
.rc-body{display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.2rem 1.3rem;flex:1}
.rc-body blockquote{color:#fff;font-size:.93rem;line-height:1.58;flex:1}
.rc-attr{display:flex;align-items:center;gap:.7rem}
.rc-logo{flex:none;width:58px;height:40px;border-radius:9px;background:#fff;display:grid;place-items:center;padding:.35rem}
.rc-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:invert(1)}
.rc-logo img.is-dark{filter:none}
.rc-who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rc-who strong{color:#fff;font-size:.82rem;font-weight:600}
.rc-who span{color:rgba(237,240,250,.6);font-size:.78rem}
@media (prefers-reduced-motion:reduce){
  .ref-card{transition:none}
  .ref-card:hover{transform:none}
}

/* ---------- Header-CTA: Umbruch-Fix ----------
   Der Button „Demo vereinbaren" brach bei knappem Platz auf zwei Zeilen um,
   wurde dadurch hoeher als die Kopfzeile und ragte ueber deren Unterkante hinaus. */
.main-nav .btn{white-space:nowrap;flex:none}
.main-nav .theme-btn{margin-left:.45rem}
.main-nav .btn-primary{margin-left:.4rem}

/* ==================================================================
   MOBILE-OPTIMIERUNG (2026-08-27)
   ================================================================== */

/* ---------- 1. Touch-Ziele: mind. 44 px hoch (Apple HIG / Google) ---------- */
@media (max-width:900px){
  .footer-links a,
  .wiki-crumbs a,
  .close-contact a,
  .anno-link,
  .wc-link,
  a.back{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .footer-links{gap:0 1.15rem;flex-wrap:wrap}
  .wiki-crumbs{gap:0 .4rem;flex-wrap:wrap}
  .anno-x{
    width:44px;height:44px;display:inline-flex;align-items:center;
    justify-content:center;padding:0;font-size:1.35rem;
  }
  .brand{min-height:44px}
  .sel-tab,.dayfilm-tab,.solex-tab,.nav-trigger,.nav-link{min-height:44px}
  /* Aufklapp-Punkte im Mobilmenue grosszuegiger */
  .main-nav .np-item{min-height:44px}
}

/* ---------- 2. Lesbare Schriftgroessen ---------- */
@media (max-width:900px){
  .np-col-title{font-size:.75rem}          /* war 11 px */
  .footer-links a,.wiki-crumbs a{font-size:.85rem}
}

/* ---------- 3. Kundenstimmen: schmales Farbband, solange kein Foto gesetzt ist.
   Sobald an der Karte --rc-img haengt, greift wieder das Portraitformat 16:11. ---------- */
@media (max-width:619px){
  .ref-card:not([style*="--rc-img"]) .rc-photo{aspect-ratio:16/4.2}
  .rc-body{padding:1.5rem 1.15rem 1.25rem}
}

/* ---------- 4. Breite Mockups: mobil lesbar halten und seitlich schiebbar ---------- */
.why-scale,.ia-desk-fit{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.why-scale::-webkit-scrollbar,.ia-desk-fit::-webkit-scrollbar{display:none}
.why-pan,.fit-pan{pointer-events:none}
.pan-hint{
  display:none;margin:.55rem 0 0;font-size:.78rem;letter-spacing:.02em;
  color:var(--mute);text-align:center;
}
.is-pannable + .pan-hint{display:block}

/* ---------- 5. „Die Loesung erleben": Telefon-Mockup ragte mobil in den Fliesstext ---------- */
@media (max-width:720px){
  .solex-stage{margin-top:2.6rem}
}

/* ---------- 6. Rechner: Schieberegler mit greifbarer Flaeche ---------- */
@media (max-width:900px){
  .rech-field input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:44px;
    background:transparent;cursor:pointer;
  }
  .rech-field input[type=range]::-webkit-slider-runnable-track{
    height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);
  }
  .rech-field input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:28px;height:28px;border-radius:50%;margin-top:-11px;
    background:linear-gradient(180deg,#FF9333,#FF7A00);border:2px solid #fff;
    box-shadow:0 4px 12px -2px rgba(255,122,0,.6);
  }
  .rech-field input[type=range]::-moz-range-track{
    height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);
  }
  .rech-field input[type=range]::-moz-range-thumb{
    width:28px;height:28px;border:2px solid #fff;border-radius:50%;
    background:linear-gradient(180deg,#FF9333,#FF7A00);
  }
}
/* Grid-/Flex-Kinder duerfen nicht auf ihre min-content-Breite aufgehen,
   sonst schiebt das breite Mockup die ganze Seite auf (Overflow). */
.inakt-grid>*,.ia,.ia-desk,.ia-desk-fit,.why-grid>*,.why-scale{min-width:0}
/* Mail-/Telefonlinks im Fliesstext (z. B. Impressum) ebenfalls greifbar */
@media (max-width:900px){
  .legal a[href^="mailto:"],.legal a[href^="tel:"],
  main p > a[href^="mailto:"],main p > a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
}
/* Lange URLs in Datenschutz/AGB sprengten mobil die Seitenbreite */
.legal-body,.wiki-body{overflow-wrap:anywhere}
.legal-body a,.wiki-body a{word-break:break-word}
/* Sehr lange Komposita (z. B. „Geschäftsbedingungen") auf schmalen Geraeten umbrechen */
@media (max-width:400px){
  .wiki-hero h1,.wiki-body h2,.wiki-body h3{overflow-wrap:anywhere;hyphens:auto}
}

/* ==================================================================
   HERO-FILM: Play-Button als sichtbarer CTA (2026-08-27)
   ================================================================== */
/* Poster leicht abdunkeln, damit der Aufruf traegt */
.hero-film-stage::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(64% 62% at 50% 46%,rgba(8,11,24,.5),rgba(8,11,24,.16) 68%,transparent);
  transition:opacity .3s var(--ease-out);
}
.hero-film-stage.is-playing::before{opacity:0}

.hf-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:auto;height:auto;padding:0;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  transition:opacity .3s var(--ease-out);
}
.hf-disc{
  position:relative;display:grid;place-items:center;padding-left:5px;
  width:clamp(70px,7.2vw,92px);height:clamp(70px,7.2vw,92px);border-radius:50%;
  background:linear-gradient(140deg,#FF9333,#FF7A00);color:#fff;
  box-shadow:0 22px 52px -14px rgba(255,122,0,.8),0 0 0 7px rgba(255,255,255,.13);
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.hf-play svg{width:clamp(29px,3vw,37px);height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 2px 5px rgba(110,45,0,.4))}

/* zwei nach aussen laufende Ringe als Klick-Signal */
.hf-ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,147,51,.8);opacity:0;
}
html.anim .hf-ring{animation:hf-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite}
html.anim .hf-ring-2{animation-delay:1.4s}
@keyframes hf-pulse{
  0%{transform:scale(1);opacity:.8}
  75%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}

.hf-label{
  display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.28;
  background:rgba(9,12,26,.6);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:.5rem 1.15rem;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  transition:border-color .22s var(--ease-out),background .22s var(--ease-out);
}
.hf-label b{color:#fff;font-size:.97rem;font-weight:600;letter-spacing:.01em}
.hf-label span{color:rgba(255,255,255,.74);font-size:.77rem}

.hf-play:hover .hf-disc,.hf-play:focus-visible .hf-disc{
  transform:scale(1.08);
  box-shadow:0 26px 60px -14px rgba(255,122,0,.95),0 0 0 9px rgba(255,255,255,.18);
}
.hf-play:hover .hf-label,.hf-play:focus-visible .hf-label{
  background:rgba(9,12,26,.78);border-color:rgba(255,147,51,.6);
}
.hf-play:focus-visible{outline:3px solid #FF9333;outline-offset:8px;border-radius:24px}
.hero-film-stage.is-playing .hf-play{opacity:0;pointer-events:none}

@media (max-width:600px){
  .hf-label{padding:.42rem .9rem}
  .hf-label b{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .hf-ring{animation:none;opacity:.45}
  .hf-play:hover .hf-disc{transform:none}
}

/* Portrait der Geschaeftsfuehrung, sitzt auf der Kante zwischen Farbband und Karte.
   Die Originale von semco-one.com sind nur 136-304 px breit — als Kreis in dieser
   Groesse gestochen scharf, fuer ein formatfuellendes Bildband zu klein. */
.rc-face{
  position:absolute;right:1.05rem;bottom:-26px;z-index:3;
  width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:3px solid #12152D;background:#12152D;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.65);
}
.ref-card:hover .rc-face{transform:none}
@media (max-width:619px){
  .rc-face{width:62px;height:62px;bottom:-24px;right:.9rem}
}
/* Sobald echte, hoch aufgeloeste Motive vorliegen: --rc-img an die Karte haengen,
   dann fuellt das Foto wieder das ganze Band und der Kreis kann entfallen. */
/* Ohne formatfuellendes Motiv braucht das Farbband keine Bildhoehe mehr —
   es wird zum Markenstreifen, auf dem das Portrait sitzt. */
.ref-card:not([style*="--rc-img"]) .rc-photo{aspect-ratio:16/5.5}
@media (max-width:619px){
  .ref-card:not([style*="--rc-img"]) .rc-photo{aspect-ratio:16/4.6}
}

/* ==================================================================
   KUNDENSTIMMEN v2: ein dominantes Element je Karte (2026-08-27)
   Standard = grosses Logo auf dem Markenband.
   Variante .ref-card--face zeigt stattdessen das Portrait gross —
   dafuer werden hoch aufgeloeste Motive gebraucht (mind. 700x480).
   ================================================================== */
.rc-brand{
  position:relative;display:grid;place-items:center;aspect-ratio:16/6.4;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:linear-gradient(140deg,var(--rc-a,#FF9333),var(--rc-b,#FF7A00));
  padding:1rem 1.4rem;
}
.rc-brand::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 46%,rgba(18,21,45,.22));
}
/* Logos liegen teils schwarz, teils weiss vor — so werden alle sauber weiss */
.rc-logo-big{
  position:relative;z-index:1;max-height:54px;max-width:74%;width:auto;height:auto;
  object-fit:contain;filter:brightness(0) invert(1);
  opacity:.97;
}
.rc-body{display:flex;flex-direction:column;gap:.85rem;padding:1.35rem 1.2rem 1.3rem;flex:1}
.rc-mark{display:block;color:var(--orange);line-height:0}
.rc-body blockquote{color:#fff;font-size:.93rem;line-height:1.58;flex:1}
.rc-attr{display:flex;align-items:center;gap:.75rem;padding-top:.35rem;
  border-top:1px solid rgba(255,255,255,.1);margin-top:.35rem}
.rc-face{
  position:static;flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;
  object-position:center 22%;border:2px solid rgba(255,255,255,.28);background:#1b2038;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);margin-top:.6rem;
}
.rc-who{display:flex;flex-direction:column;line-height:1.3;min-width:0;margin-top:.6rem}
.rc-who strong{color:#fff;font-size:.9rem;font-weight:600}
.rc-who span{color:rgba(237,240,250,.62);font-size:.78rem}

/* Variante: Portrait gross statt Logo */
.ref-card--face .rc-brand{aspect-ratio:16/11;padding:0;overflow:hidden}
.ref-card--face .rc-logo-big{
  position:absolute;left:1rem;bottom:.9rem;max-height:26px;max-width:44%;z-index:2;
  filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.ref-card--face .rc-brand>.rc-portrait{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;
}
.ref-card--face .rc-face{display:none}

@media (max-width:619px){
  .rc-brand{aspect-ratio:16/5.4}
  .rc-logo-big{max-height:48px}
  .rc-face{width:52px;height:52px}
}
/* Zitatzeichen sass noch auf der alten absoluten Position aus v1 */
.rc-mark{position:static;left:auto;bottom:auto;margin-bottom:.1rem}
/* Logos etwas praesenter, damit auch hohe Marken (Bachmann, Brothaus) tragen */
.rc-logo-big{max-height:62px;max-width:78%}
@media (max-width:619px){ .rc-logo-big{max-height:54px} }

/* ---------- Kundenstimmen v3: Portrait im Kopf, Logo in der Signatur ---------- */
.ref-card--face .rc-brand{aspect-ratio:16/11;padding:0;overflow:hidden;display:block}
.ref-card--face .rc-portrait{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;display:block;
}
/* Verlauf der Markenfarbe bleibt als Grund sichtbar, wo das Motiv nicht reicht */
.ref-card--face .rc-brand::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(18,21,45,.55));
}
.rc-logo-small{
  flex:none;max-height:30px;max-width:96px;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.92;
}
.ref-card--face .rc-attr{align-items:center;gap:.8rem}
.ref-card--face .rc-who{margin-top:0}
@media (max-width:619px){
  .ref-card--face .rc-brand{aspect-ratio:16/9}
  .rc-logo-small{max-height:26px;max-width:84px}
}
/* Markenfarbe bleibt als Kante unter dem Portrait erhalten */
.ref-card--face .rc-brand::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--rc-a,#FF9333),var(--rc-b,#FF7A00));
}

/* ==================================================================
   VERGLEICHSSEITE (2026-08-27)
   ================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-hero{background:
  radial-gradient(48rem 26rem at 50% -18%, color-mix(in srgb,var(--blau) 10%,transparent), transparent 64%),
  var(--white)}
.cmp-hero .sec-title{margin-top:.5rem}

/* Tabelle: auf schmalen Geraeten seitlich schiebbar, erste Spalte bleibt stehen */
.cmp-wrap{margin-top:var(--sec-inner);overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card)}
.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:.9rem}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-1);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.83rem;line-height:1.35;
  color:var(--text-soft);letter-spacing:.01em;vertical-align:bottom;
}
.cmp tbody th{
  text-align:left;font-weight:500;color:var(--navy);
  position:sticky;left:0;z-index:1;background:var(--card);
  min-width:16rem;box-shadow:1px 0 0 var(--line);
}
.cmp thead th:first-child{left:0;z-index:3;background:var(--surface-1);text-align:left}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:color-mix(in srgb,var(--surface-1) 60%,transparent)}
/* eigene Spalte hervorheben */
.cmp .is-own{background:color-mix(in srgb,var(--orange) 8%,transparent)}
.cmp thead .is-own{
  color:var(--navy);font-size:.95rem;
  box-shadow:inset 0 3px 0 var(--orange);
  background:color-mix(in srgb,var(--orange) 14%,var(--surface-1));
}

/* Symbole */
.cmp-i{display:inline-block;width:22px;height:22px;border-radius:50%;position:relative;vertical-align:middle}
.cmp-yes{background:color-mix(in srgb,var(--gruen) 20%,transparent)}
.cmp-yes::after{content:"";position:absolute;left:6px;top:6.5px;width:9px;height:5px;
  border-left:2.2px solid var(--gruen);border-bottom:2.2px solid var(--gruen);transform:rotate(-45deg)}
.cmp-part{background:color-mix(in srgb,var(--orange) 20%,transparent)}
.cmp-part::after{content:"";position:absolute;left:6px;top:10px;width:10px;height:2.2px;
  background:var(--orange);border-radius:2px}
.cmp-no{background:color-mix(in srgb,var(--mute) 18%,transparent)}
.cmp-no::after,.cmp-no::before{content:"";position:absolute;left:6px;top:10px;width:10px;height:2.2px;
  background:var(--mute);border-radius:2px}
.cmp-no::after{transform:rotate(45deg)} .cmp-no::before{transform:rotate(-45deg)}

.cmp-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1rem;
  font-size:.83rem;color:var(--text-soft)}
.cmp-legend span{display:inline-flex;align-items:center;gap:.45rem}
.cmp-note{margin-top:.9rem;font-size:.8rem;color:var(--mute);max-width:46rem;line-height:1.6}
.cmp-kicker{font-family:'Poppins',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fc,var(--blau))}
.feat .cmp-kicker+h3{margin-top:.35rem}

.cmp-honest{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:var(--sec-inner)}
@media(min-width:760px){.cmp-honest{grid-template-columns:repeat(3,1fr)}}
.ch-card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.25rem}
.ch-card h3{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500}
.ch-card p{margin-top:.45rem;font-size:.88rem;color:var(--text-soft);line-height:1.58}

/* ==================================================================
   KI-ANALYSEN-SEITE (2026-08-27) — hell als Default
   ================================================================== */
.ki-hero{background:
  radial-gradient(52rem 28rem at 78% -14%, color-mix(in srgb,var(--blau) 12%,transparent), transparent 62%),
  radial-gradient(40rem 24rem at 8% 10%, color-mix(in srgb,var(--orange) 8%,transparent), transparent 62%),
  var(--white)}
.ki-hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:980px){.ki-hero-grid{grid-template-columns:.92fr 1.08fr}}
.ki-hero .sec-title{margin-top:.5rem}
.ki-facts{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:2rem;padding:0;list-style:none}
.ki-facts li{display:flex;flex-direction:column;line-height:1.2}
.ki-facts b{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:600;
  background:linear-gradient(90deg,var(--orange),var(--blau));-webkit-background-clip:text;background-clip:text;color:transparent}
.ki-facts span{font-size:.8rem;color:var(--mute)}

.ki-shot{margin:0;min-width:0}
.ki-shot figcaption{margin-top:.7rem;display:flex;align-items:center;gap:.5rem;
  font-size:.83rem;color:var(--text-soft);line-height:1.45}

/* Heute vs. mit KI */
.ki-split{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:var(--sec-inner)}
@media(min-width:860px){.ki-split{grid-template-columns:1fr 1fr}}
.ki-col{border:1px solid var(--line);border-radius:var(--radius-md);padding:1.4rem 1.3rem}
.ki-col-alt{background:var(--surface-1)}
.ki-col-new{background:linear-gradient(180deg,color-mix(in srgb,var(--gruen) 7%,var(--card)),var(--card));
  border-color:color-mix(in srgb,var(--gruen) 30%,var(--line))}
.ki-col-h{font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute)}
.ki-col-new .ki-col-h{color:var(--gruen)}
.ki-col ul{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.95rem}
.ki-col li{display:grid;grid-template-columns:22px 1fr;gap:.1rem .7rem;align-items:start}
.ki-col li::before{content:"";grid-row:1/3;width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:color-mix(in srgb,var(--mute) 18%,transparent);position:relative}
.ki-col li.v::before{background:color-mix(in srgb,var(--gruen) 20%,transparent)}
.ki-col li b{font-family:'Poppins',sans-serif;font-size:.94rem;font-weight:500;color:var(--navy)}
.ki-col li span{font-size:.86rem;color:var(--text-soft);line-height:1.55}

/* Fallstudien-Blöcke */
.ki-case{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center;margin-top:var(--sec-inner)}
@media(min-width:980px){
  .ki-case{grid-template-columns:.85fr 1.15fr}
  .ki-case-rev>div:first-child{order:2}
}
.ki-case>div{min-width:0}
.ki-q{font-family:'Poppins',sans-serif;font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:500;
  color:var(--navy);line-height:1.35}
.ki-case p:not(.ki-q){margin-top:.7rem;color:var(--text-soft);line-height:1.62;font-size:.94rem}

/* KI-Keywords */
.ki-kw{background:var(--surface-1)}
.ki-kw-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:980px){.ki-kw-grid{grid-template-columns:1fr 1fr}}
.ki-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem 1rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:clamp(1.4rem,3vw,2.2rem);line-height:1.15;min-width:0}
.ki-cloud span{font-family:'Poppins',sans-serif;font-weight:500;color:var(--blau);white-space:nowrap}
.ki-cloud span:nth-child(3n){color:#3D8BFF}
.ki-cloud span:nth-child(5n){color:var(--navy)}

/* Ablauf */
.ki-steps{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:var(--sec-inner)}
@media(min-width:700px){.ki-steps{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.ki-steps{grid-template-columns:repeat(4,1fr)}}
.ki-step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.25rem}
.ki-step .n{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(140deg,var(--orange),#FF7A00);color:#fff;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem}
.ki-step h3{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500;margin-top:.85rem}
.ki-step p{margin-top:.4rem;font-size:.87rem;color:var(--text-soft);line-height:1.58}

/* FAQ */
.ki-faq{border-bottom:1px solid var(--line)}
.ki-faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500;color:var(--navy)}
.ki-faq summary::-webkit-details-marker{display:none}
.ki-faq summary::after{content:"";position:absolute;right:.4rem;top:1.35rem;width:9px;height:9px;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:rotate(45deg);transition:transform .2s var(--ease-out)}
.ki-faq[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.ki-faq p{padding:0 0 1.1rem;font-size:.9rem;color:var(--text-soft);line-height:1.65;max-width:44rem}

/* zusaetzliche Mockup-Bausteine: horizontale Balken + Filterleiste + KV-Zeile */
.am-seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.am-seg span{font-size:9.5px;color:var(--mute);background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:3px 8px}
.am-kv{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;
  color:var(--mute);margin-top:6px}
.am-kv b{color:var(--ink);font-variant-numeric:tabular-nums}
.am-hb{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.am-hb-l{flex:none;width:106px;font-size:10px;color:var(--mute);text-align:right}
.am-hb-t{display:flex;height:15px;border-radius:3px;overflow:hidden;min-width:6px}
.am-hb-t i{display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:8.5px;color:#fff;overflow:hidden;white-space:nowrap}
.am-hb-t .s1{background:#0052A0}
.am-hb-t .s2{background:#7FB2E5}

/* ==================================================================
   ÜBER UNS / HISTORIE (2026-08-27)
   ================================================================== */
.ueber-hero{background:
  radial-gradient(50rem 26rem at 50% -16%, color-mix(in srgb,var(--orange) 10%,transparent), transparent 64%),
  var(--white)}
.ueber-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;list-style:none;padding:0;
  margin:var(--sec-inner) auto 0;max-width:52rem;text-align:center}
@media(min-width:760px){.ueber-facts{grid-template-columns:repeat(4,1fr)}}
.ueber-facts li{display:flex;flex-direction:column;gap:.2rem}
.ueber-facts b{font-family:'Poppins',sans-serif;font-size:1.75rem;font-weight:600;
  background:linear-gradient(90deg,var(--orange),var(--blau));-webkit-background-clip:text;background-clip:text;color:transparent}
.ueber-facts span{font-size:.82rem;color:var(--text-soft);line-height:1.4}

.ueber-founder{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media(min-width:940px){.ueber-founder{grid-template-columns:1.25fr .75fr}}
.ueber-founder p{margin-top:.9rem;color:var(--text-soft);line-height:1.68}
.ueber-quote{margin:0;background:linear-gradient(150deg,#12152D,#1B2140);border-radius:var(--radius-md);
  padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.ueber-quote::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau))}
.ueber-quote blockquote{color:#fff;font-family:'Poppins',sans-serif;font-size:clamp(1.05rem,2vw,1.25rem);
  font-weight:400;line-height:1.5}
.ueber-quote figcaption{margin-top:1rem;font-size:.83rem;color:rgba(237,240,250,.62)}

/* Historie: senkrechte Zeitachse */
.hist{background:var(--surface-1)}
.hist-list{list-style:none;padding:0;margin:var(--sec-inner) 0 0;position:relative}
.hist-item{position:relative;display:grid;grid-template-columns:1fr;gap:.5rem;
  padding:0 0 2.1rem 2.15rem}
@media(min-width:820px){
  .hist-item{grid-template-columns:9rem 1fr;gap:0 2.2rem;padding-left:0}
  .hist-item::before{left:9.55rem}
  .hist-item::after{left:calc(9.55rem + 5px)}
}
.hist-item::before{content:"";position:absolute;top:.55rem;bottom:-.55rem;left:5px;width:2px;
  background:linear-gradient(180deg,var(--line),color-mix(in srgb,var(--line) 40%,transparent))}
.hist-item:last-child::before{display:none}
.hist-item::after{content:"";position:absolute;top:.35rem;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--card);border:3px solid var(--orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 14%,transparent)}
.hist-item:nth-child(4n+2)::after{border-color:var(--blau);box-shadow:0 0 0 4px color-mix(in srgb,var(--blau) 14%,transparent)}
.hist-item:nth-child(4n+3)::after{border-color:var(--gruen);box-shadow:0 0 0 4px color-mix(in srgb,var(--gruen) 14%,transparent)}
.hist-item:nth-child(4n+4)::after{border-color:var(--rot);box-shadow:0 0 0 4px color-mix(in srgb,var(--rot) 14%,transparent)}
.hist-year{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:600;color:var(--navy);
  letter-spacing:.01em;line-height:1.3}
@media(min-width:820px){.hist-year{text-align:right;padding-top:.05rem}}
.hist-body{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.2rem 1.25rem;min-width:0}
.hist-body h3{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:500;color:var(--navy)}
.hist-body p{margin-top:.55rem;font-size:.92rem;color:var(--text-soft);line-height:1.65}
.hist-body .hist-sub{font-size:.87rem;color:var(--mute);border-top:1px solid var(--line);
  margin-top:.85rem;padding-top:.75rem}

.ueber-team{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media(min-width:820px){.ueber-team{grid-template-columns:1fr 1fr}}
.ueber-team>div{background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:1.35rem}
.ueber-team h3{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500}
.ueber-team p{margin-top:.5rem;font-size:.9rem;color:var(--text-soft);line-height:1.62}

/* Der Abschluss-CTA verlaeuft auf den Unterseiten von hell nach dunkel.
   Beide Buttons brauchen deshalb solide Flaechen — Transparenz war auf der
   hellen Haelfte weiss auf weiss und damit unlesbar. */
.close-cta .btn-primary{background:linear-gradient(100deg,#0D71EA,#3F8EF0)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 16px 34px -14px rgba(13,113,234,.55)!important}
.close-cta .btn-secondary{background:#fff!important;color:#12152D!important;
  border-color:rgba(18,21,45,.16)!important;box-shadow:0 10px 26px -12px rgba(18,21,45,.35)!important}
.close-cta .btn-secondary:hover{background:#EDF1F9!important;border-color:rgba(18,21,45,.38)!important}

/* ==================================================================
   FILM-BANNER (2026-08-27) — wiederverwendbarer Block
   ================================================================== */
.filmbanner .container{min-width:0}
.fb-card{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  border-radius:var(--radius-lg);overflow:hidden;background:#0a0d1c;
  box-shadow:0 40px 90px -40px rgba(18,21,45,.55);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
  text-align:left;font-family:inherit;
}
.fb-card:hover{transform:translateY(-4px);box-shadow:0 52px 110px -40px rgba(18,21,45,.7)}
.fb-card:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.fb-bg{
  position:absolute;inset:0;background:url("/assets/video/hero-film.jpg") center 42%/cover no-repeat;
  transform:scale(1.06);transition:transform 6s linear;
}
html.anim .fb-card:hover .fb-bg{transform:scale(1.12)}
.fb-veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,11,24,.94) 0%,rgba(8,11,24,.82) 42%,rgba(8,11,24,.42) 78%,rgba(8,11,24,.55) 100%)}
.fb-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:1.6rem;
  align-items:center;padding:clamp(1.6rem,4vw,2.8rem)}
@media(min-width:820px){.fb-inner{grid-template-columns:1fr auto;gap:2.4rem}}
.fb-text{display:block;max-width:38rem}
.fb-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:'Poppins',sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--orange)}
.fb-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--rot))}
.fb-h{display:block;margin-top:.8rem;font-family:'Poppins',sans-serif;color:#fff;font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.24;letter-spacing:-.01em}
.fb-h b{font-weight:600}
.fb-p{display:block;margin-top:.85rem;color:rgba(237,240,250,.74);font-size:.95rem;line-height:1.6}
.fb-play{display:flex;align-items:center;gap:1rem;flex:none}
.fb-disc{position:relative;display:grid;place-items:center;flex:none;padding-left:5px;
  width:clamp(64px,6vw,82px);height:clamp(64px,6vw,82px);border-radius:50%;color:#fff;
  background:linear-gradient(140deg,#FF9333,#FF7A00);
  box-shadow:0 20px 46px -12px rgba(255,122,0,.8),0 0 0 6px rgba(255,255,255,.12);
  transition:transform .22s var(--ease-out)}
.fb-card:hover .fb-disc{transform:scale(1.08)}
.fb-disc svg{position:relative;z-index:1;width:clamp(26px,2.6vw,33px);height:auto}
.fb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,147,51,.8);opacity:0;
  pointer-events:none}
html.anim .fb-ring{animation:hf-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite}
html.anim .fb-ring.r2{animation-delay:1.4s}
.fb-cta{font-family:'Poppins',sans-serif;color:#fff;font-weight:600;font-size:1rem;white-space:nowrap}
.fb-cta small{display:block;font-weight:400;font-size:.8rem;color:rgba(237,240,250,.62);margin-top:.15rem}
.fb-video{display:none;width:100%;border-radius:var(--radius-lg);background:#000}
.filmbanner.is-playing .fb-card{display:none}
.filmbanner.is-playing .fb-video{display:block}
@media (prefers-reduced-motion:reduce){
  .fb-ring{animation:none;opacity:.45}
  .fb-card:hover{transform:none}
  .fb-bg,html.anim .fb-card:hover .fb-bg{transition:none;transform:scale(1.06)}
}

/* ==================================================================
   KI-AGENT-SEITE (2026-08-27)
   ================================================================== */
.ka-hero{background:
  radial-gradient(50rem 28rem at 84% -12%, color-mix(in srgb,var(--gruen) 12%,transparent), transparent 62%),
  radial-gradient(38rem 22rem at 6% 6%, color-mix(in srgb,var(--orange) 9%,transparent), transparent 62%),
  var(--white)}
.ka-hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center;justify-items:center}
@media(min-width:940px){.ka-hero-grid{grid-template-columns:1.1fr .9fr;justify-items:stretch}}
.ka-hero .sec-title{margin-top:.5rem}
.ka-hero .sec-lede+.sec-lede{margin-top:.9rem}
.ka-phone{display:flex;justify-content:center;min-width:0}
.am-frame-phone{border-radius:34px;padding:9px}

/* Chatverlauf im Telefon-Mockup */
.am-chat{gap:0;overflow:hidden;display:flex;flex-direction:column}
.am-ctx{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-bottom:9px;flex:none}
.am-ctx b{display:block;font-size:11px;color:var(--ink)}
.am-ctx span{display:block;font-size:9.5px;color:var(--mute);margin-top:2px}
.am-cb{max-width:84%;font-size:11px;line-height:1.45;padding:7px 10px;border-radius:12px;margin-bottom:6px;flex:none}
.am-ca{background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.am-cs{background:#EFF5FC;border:1px solid #D6E5F5;color:#0052A0;border-bottom-left-radius:4px;font-weight:500}
.am-cu{background:#0052A0;color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.am-cok{background:#DCFCE7;border-color:#A7E6BF;color:#15803D}
.am-cin{margin-top:auto;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;font-size:10.5px;color:var(--mute-2);flex:none}

/* Fallbeispiele */
.ka-cases{background:var(--surface-1)}
.ka-case-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:var(--sec-inner)}
@media(min-width:820px){.ka-case-grid{grid-template-columns:repeat(3,1fr)}}
.ka-case{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.35rem 1.25rem;display:flex;flex-direction:column}
.ka-q{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:500;color:var(--navy);line-height:1.3}
.ka-dev{margin-top:.2rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ka-txt{margin-top:.85rem;font-size:.9rem;color:var(--text-soft);line-height:1.6;flex:1}
.ka-out{margin-top:1rem;align-self:flex-start;font-size:.78rem;font-weight:600;
  padding:.35rem .75rem;border-radius:999px;
  background:color-mix(in srgb,var(--gruen) 14%,transparent);color:var(--gruen)}

/* Sicherheit & Grenzen */
.ka-safe-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:var(--sec-inner)}
@media(min-width:700px){.ka-safe-grid{grid-template-columns:1fr 1fr}}
.ka-sec{border:1px solid var(--line);border-radius:var(--radius-md);padding:1.25rem;
  background:var(--card);border-left:3px solid var(--blau)}
.ka-safe-grid .ka-sec:nth-child(4){border-left-color:var(--rot)}
.ka-sec h3{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500}
.ka-sec p{margin-top:.45rem;font-size:.89rem;color:var(--text-soft);line-height:1.6}
/* Chatverlauf kompakter, damit er komplett ins Telefon passt */
.am-cb{padding:6px 9px;margin-bottom:5px;font-size:10.5px;line-height:1.42}
.am-ctx{padding:6px 9px;margin-bottom:7px}
.am-cin{padding:6px 11px}
/* Portrait des Gründers im Zitat-Block */
.uq-face{
  display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:center 22%;
  background:#fff;border:3px solid rgba(255,255,255,.22);margin-bottom:1.1rem;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
}
.ueber-quote figcaption strong{display:block;color:#fff;font-weight:600;font-size:.9rem}
.ueber-quote figcaption{margin-top:1.1rem;line-height:1.45}

/* ==================================================================
   ONBOARDING-SEITE (2026-08-28)
   ================================================================== */
.ob-hero{background:
  radial-gradient(50rem 26rem at 50% -16%, color-mix(in srgb,var(--blau) 11%,transparent), transparent 64%),
  var(--white)}
.ob-probs{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:var(--sec-inner)}
@media(min-width:820px){.ob-probs{grid-template-columns:repeat(3,1fr)}}
.ob-prob{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.3rem 1.25rem;border-top:3px solid var(--rot)}
.ob-prob h3{font-family:'Poppins',sans-serif;font-size:1.02rem;font-weight:500;color:var(--navy)}
.ob-prob p{margin-top:.5rem;font-size:.9rem;color:var(--text-soft);line-height:1.6}

/* Fahrplan-Band */
.ob-journey{background:var(--surface-1)}
.ob-road{list-style:none;padding:0;margin:var(--sec-inner) 0 0;display:grid;
  grid-template-columns:1fr;gap:.9rem;position:relative}
@media(min-width:900px){
  .ob-road{grid-template-columns:repeat(5,1fr);gap:1rem}
  .ob-road::before{content:"";position:absolute;top:18px;left:9%;right:9%;height:2px;
    background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau))}
}
.ob-r{position:relative;display:flex;flex-direction:column;gap:.2rem;padding-left:3rem}
@media(min-width:900px){.ob-r{padding:2.6rem 0 0;text-align:center;align-items:center}}
.ob-r-n{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--card);border:2px solid var(--line);
  font-family:'Poppins',sans-serif;font-weight:600;color:var(--navy);font-size:.95rem}
@media(min-width:900px){.ob-r-n{left:50%;transform:translateX(-50%)}}
.ob-r:nth-child(1) .ob-r-n{border-color:var(--orange)}
.ob-r:nth-child(2) .ob-r-n{border-color:var(--rot)}
.ob-r:nth-child(3) .ob-r-n{border-color:var(--gruen)}
.ob-r:nth-child(4) .ob-r-n{border-color:var(--blau)}
.ob-r:nth-child(5) .ob-r-n{border-color:var(--navy)}
.ob-r b{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500;color:var(--navy)}
.ob-r>span:last-child{font-size:.82rem;color:var(--mute)}

/* Pakete */
.ob-pakete{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:var(--sec-inner);align-items:start}
@media(min-width:900px){.ob-pakete{grid-template-columns:1fr 1.15fr}}
.ob-pak{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:1.6rem 1.5rem}
.ob-pak-top{border-color:color-mix(in srgb,var(--orange) 42%,var(--line));
  box-shadow:var(--shadow-card);background:linear-gradient(180deg,color-mix(in srgb,var(--orange) 5%,var(--card)),var(--card))}
.ob-badge{position:absolute;top:-.75rem;right:1.4rem;background:linear-gradient(140deg,#FF9333,#FF7A00);
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px;box-shadow:0 8px 20px -8px rgba(255,122,0,.7)}
.ob-pak-k{font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.ob-pak h3{font-family:'Poppins',sans-serif;font-size:1.45rem;font-weight:500;color:var(--navy);margin-top:.25rem}
.ob-pak-p{margin-top:.6rem;font-size:.9rem;color:var(--text-soft);line-height:1.6}
.ob-pak ul{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-direction:column;gap:.8rem}
.ob-pak li{position:relative;padding-left:1.9rem;font-size:.91rem;color:var(--text-soft);line-height:1.58}
.ob-pak li strong{color:var(--navy)}
.ob-pak li::before{content:"";position:absolute;left:0;top:.28rem;width:18px;height:18px;border-radius:50%;
  background:color-mix(in srgb,var(--gruen) 18%,transparent)}
.ob-pak li::after{content:"";position:absolute;left:5px;top:.62rem;width:8px;height:4px;
  border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(-45deg)}

/* Wochensprints */
.ob-sprints{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:var(--sec-inner)}
@media(min-width:760px){.ob-sprints{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.ob-sprints{grid-template-columns:repeat(5,1fr)}}
.ob-sp{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.2rem;border-left:3px solid var(--blau)}
.ob-sprints .ob-sp:nth-child(1){border-left-color:var(--orange)}
.ob-sprints .ob-sp:nth-child(2){border-left-color:var(--rot)}
.ob-sprints .ob-sp:nth-child(3){border-left-color:var(--gruen)}
.ob-sprints .ob-sp:nth-child(5){border-left-color:var(--navy)}
.ob-sp h3{font-family:'Poppins',sans-serif;font-size:.94rem;font-weight:600;color:var(--navy)}
.ob-sp p{margin-top:.5rem;font-size:.87rem;color:var(--text-soft);line-height:1.58}

/* ==================================================================
   SCHNITTSTELLEN-SEITE (2026-08-28)
   ================================================================== */
.sk-hero{background:
  radial-gradient(52rem 26rem at 50% -16%, color-mix(in srgb,var(--gruen) 10%,transparent), transparent 64%),
  var(--white)}
.sk-groups{display:flex;flex-direction:column;gap:clamp(1.8rem,3.5vw,2.8rem);margin-top:var(--sec-inner)}
.sk-group-head{position:relative;padding-left:1rem;border-left:3px solid var(--sk,var(--blau))}
.sk-group-head h3{font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:500;color:var(--navy)}
.sk-group-head p{margin-top:.25rem;font-size:.9rem;color:var(--text-soft)}
.sk-count{position:absolute;right:0;top:.1rem;font-family:'Poppins',sans-serif;font-size:.78rem;
  font-weight:600;color:var(--sk,var(--blau));background:color-mix(in srgb,var(--sk,var(--blau)) 12%,transparent);
  border-radius:999px;padding:.2rem .6rem}
.sk-grid{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:1.1rem}
@media(min-width:560px){.sk-grid{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.sk-grid{grid-template-columns:repeat(3,1fr)}}
.sk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.15rem 1.2rem;transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}
.sk-card:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--sk,var(--blau)) 45%,var(--line))}
.sk-logo{display:flex;align-items:center;justify-content:flex-start;height:38px;margin-bottom:.85rem}
/* Breite Wortmarken begrenzt max-width, kompakte Bildmarken (TGTG, DATEV, iQ shop)
   dürfen die volle Höhe nutzen — sonst sind sie bei 30px nicht mehr lesbar. */
.sk-logo img{max-height:36px;max-width:132px;width:auto;height:auto;object-fit:contain}
.sk-logo-text b{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:600;color:var(--navy);
  letter-spacing:-.01em;line-height:1;
  border-bottom:2px solid color-mix(in srgb,var(--sk,var(--blau)) 55%,transparent);padding-bottom:.2rem}
.sk-card h3{font-family:'Poppins',sans-serif;font-size:.95rem;font-weight:500;color:var(--navy)}
.sk-card>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sk-card p{font-size:.86rem;color:var(--text-soft);line-height:1.55}

.sk-more{background:var(--surface-1)}
.sk-more-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:980px){.sk-more-grid{grid-template-columns:1fr 1fr}}
.sk-steps{grid-template-columns:1fr!important;margin-top:0!important}
.sk-steps .ki-step{background:var(--card)}

/* Fünf Bausteine symmetrisch: 3 oben, 2 mittig darunter */
@media(min-width:960px){
  .ka-caps{grid-template-columns:repeat(6,1fr)}
  .ka-caps>.feat{grid-column:span 2}
  .ka-caps>.feat:nth-child(4){grid-column:2/4}
  .ka-caps>.feat:nth-child(5){grid-column:4/6}
}

/* ==================================================================
   SEMMY — das semco-ONE-Maskottchen im Header (2026-08-28)
   ================================================================== */
.semmy-btn{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  color:var(--navy);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem .25rem .35rem;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.semmy-btn:hover,.semmy-btn:focus-visible{
  border-color:color-mix(in srgb,var(--orange) 55%,var(--line));
  background:color-mix(in srgb,var(--orange) 8%,transparent);
}
.semmy{width:30px;height:30px;flex:none;color:var(--navy);overflow:visible}
.sy-visor{fill:#0B0E1D}
.sy-eyes{fill:#fff}
.sy-smile{stroke:#fff;opacity:.85}
:root[data-theme="dark"] .semmy,.tone-dark .semmy{color:#E8ECFA}
:root[data-theme="dark"] .sy-visor{fill:#0B0E1D}
.semmy-label{font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:500;
  color:var(--text-soft);white-space:nowrap}
.semmy-btn:hover .semmy-label{color:var(--navy)}
/* ab hier wird es im Kopf eng: nur noch das Maskottchen */
@media(max-width:1180px){.semmy-label{display:none}
  .semmy-btn{padding:.25rem;border-radius:12px}}

/* Leben: blinzeln + Antennenpuls, beides bewusst sparsam */
@keyframes sy-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes sy-float{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(1px) scaleX(1.06)}}
@keyframes sy-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
html.anim .sy-eye{transform-box:fill-box;transform-origin:center;animation:sy-blink 6s infinite}
html.anim .sy-eye:nth-child(2){animation-delay:.06s}
html.anim .sy-wisp{transform-box:fill-box;transform-origin:center top;animation:sy-float 3.4s ease-in-out infinite}
html.anim .semmy-btn:hover .sy-crown{animation:sy-nod .5s ease-in-out}
@media (prefers-reduced-motion:reduce){
  html.anim .sy-eye,html.anim .sy-wisp,html.anim .semmy-btn:hover .sy-crown{animation:none}
}
/* Gerätesymbole auf den Fallbeispiel-Karten */
.ka-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  margin-bottom:1rem;color:var(--kc,var(--blau));
  background:color-mix(in srgb,var(--kc,var(--blau)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--kc,var(--blau)) 24%,transparent)}
.ka-ico svg{width:24px;height:24px}
.ka-case{border-top:3px solid color-mix(in srgb,var(--kc,var(--blau)) 60%,transparent)}
/* Icons in „Sicherheit & Grenzen" */
.ka-sec-h{display:flex;align-items:center;gap:.8rem}
.ka-ico-s{width:38px;height:38px;border-radius:11px;margin-bottom:0;flex:none}
.ka-ico-s svg{width:21px;height:21px}
.ka-sec{border-left-color:var(--kc,var(--blau))}
.ka-sec p{margin-top:.65rem}
/* Semmy als Flaschengeist: höheres Seitenverhältnis, Farbe steckt im SVG selbst */
.semmy{width:32px;height:36px;overflow:visible}
.semmy-btn{padding:.15rem .7rem .15rem .4rem}
@media(max-width:1180px){.semmy-btn{padding:.15rem .35rem}}
.sy-crown{transform-box:fill-box;transform-origin:center bottom}
/* Firmenname bleibt sichtbar — reine Bildmarken (Power BI, TGTG) wären sonst nicht zuzuordnen */
.sk-card>h3{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
  font-family:'Poppins',sans-serif;font-size:.95rem;font-weight:600;color:var(--navy);
  margin-bottom:.3rem}
.sk-logo{height:36px;margin-bottom:.9rem}
.sk-logo img{max-height:34px;max-width:126px}
.sk-logo-text{margin-bottom:.5rem;height:auto}
.sk-logo-text b{font-size:1rem}
/* Wortmarken-Kachel: der Name steht schon in der Überschrift */
.sk-card:has(.sk-logo-text)>h3{display:none}
.sk-card:has(.sk-logo-text) .sk-logo-text b{font-size:1.05rem;color:var(--navy)}

/* Dark Mode: Partner-Logos sind Markenzeichen und dürfen nicht umgefärbt werden.
   Dunkle Wortmarken (ATOSS, Personio, BRITA, Winterhalter …) brauchen deshalb
   eine helle Trägerfläche, sonst verschwinden sie auf der dunklen Karte. */
:root[data-theme="dark"] .sk-logo:not(.sk-logo-text){
  background:#FFFFFF;border-radius:9px;padding:3px 10px;
  box-sizing:border-box;width:fit-content;max-width:100%}
:root[data-theme="dark"] .sk-logo:not(.sk-logo-text) img{max-height:30px;max-width:120px}

/* ==================================================================
   ERGEBNIS-SEITE (2026-08-28)
   ================================================================== */
.er-hero{background:
  radial-gradient(52rem 26rem at 50% -16%, color-mix(in srgb,var(--orange) 11%,transparent), transparent 64%),
  var(--white)}
.er-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:var(--sec-inner)}
@media(min-width:640px){.er-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.er-grid{grid-template-columns:repeat(3,1fr)}}
.er-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.4rem 1.35rem;border-top:3px solid var(--ec,var(--orange));
  transition:transform .2s var(--ease-out)}
.er-card:hover{transform:translateY(-3px)}
.er-num{font-family:'Poppins',sans-serif;font-size:2.5rem;font-weight:600;line-height:1;
  color:var(--ec,var(--orange));display:flex;align-items:baseline;gap:.12em}
.er-num span{font-size:1.3rem;font-weight:500}
.er-lbl{margin-top:.45rem;font-family:'Poppins',sans-serif;font-size:1rem;font-weight:500;color:var(--navy)}
.er-txt{margin-top:.6rem;font-size:.89rem;color:var(--text-soft);line-height:1.6}
.er-hinweis{margin-top:1.4rem;background:var(--surface-1);border:1px solid var(--line);
  border-left:3px solid var(--mute);border-radius:var(--radius-md);padding:1.2rem 1.3rem}
.er-hinweis p{font-size:.88rem;color:var(--text-soft);line-height:1.68;max-width:60rem}
.er-hinweis strong{color:var(--navy)}

.er-kpis{background:var(--surface-1)}
.er-kpi-list{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:var(--sec-inner)}
@media(min-width:820px){.er-kpi-list{grid-template-columns:1fr 1fr}}
.er-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.25rem}
.er-kpi-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem}
.er-kpi h3{font-family:'Poppins',sans-serif;font-size:1.02rem;font-weight:500;color:var(--navy)}
.er-formel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
  color:var(--blau);background:color-mix(in srgb,var(--blau) 9%,transparent);
  border-radius:6px;padding:.22rem .55rem}
.er-kpi p{margin-top:.6rem;font-size:.88rem;color:var(--text-soft);line-height:1.6}
.er-quelle{margin-top:.7rem!important;font-size:.8rem!important;color:var(--mute)!important;
  border-top:1px solid var(--line);padding-top:.6rem}

.er-rechner-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:980px){.er-rechner-grid{grid-template-columns:1.05fr .95fr}}
.er-rechner-vis{display:flex;flex-direction:column;gap:.85rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:1.5rem}
.er-bar{display:flex;align-items:center;gap:.9rem}
.er-bar span{display:block;height:14px;border-radius:99px;flex:none;min-width:12px}
.er-bar b{font-size:.83rem;font-weight:500;color:var(--text-soft);white-space:nowrap}
/* Balken + Beschriftung nebeneinander sprengten auf dem Handy die Breite */
.er-bar{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;min-width:0}
.er-bar span{max-width:100%;flex:none}
.er-bar b{white-space:normal;line-height:1.35}
@media(min-width:520px){
  .er-bar{flex-direction:row;align-items:center;gap:.9rem}
  .er-bar span{max-width:62%}
}
.er-formel{overflow-wrap:anywhere}
.er-kpi-h{min-width:0}

/* Kundenstimme zum Workshop (Onboarding) */
.ob-quote{position:relative;margin:0;max-width:56rem;margin-inline:auto;
  background:linear-gradient(150deg,#12152D,#1B2140);border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,2.8rem);box-shadow:var(--shadow-card);overflow:hidden}
.ob-quote::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau))}
.ob-quote-mark{display:block;color:var(--orange);line-height:0;margin-bottom:1.1rem}
.ob-quote blockquote p{color:#fff;font-size:clamp(.98rem,1.7vw,1.1rem);line-height:1.62;font-weight:300}
.ob-quote blockquote p+p{margin-top:.9rem}
.ob-quote-attr{display:flex;align-items:center;gap:1rem;margin-top:1.6rem;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.14)}
.ob-quote-logo{width:52px;height:auto;flex:none;filter:brightness(0) invert(1);opacity:.92}
.ob-quote-attr span{display:flex;flex-direction:column;line-height:1.35}
.ob-quote-attr strong{color:#fff;font-size:.95rem;font-weight:600}
.ob-quote-attr span span,.ob-quote-attr>span{color:rgba(237,240,250,.66);font-size:.85rem}
.ob-quote-attr>span strong{color:#fff}
/* Maskottchen ist jetzt die semco-Blume mit Gesicht — quadratisch statt hochkant */
.semmy{width:30px;height:30px}
.sy-smile{stroke:#12152D;opacity:1}

/* ==================================================================
   ÜBERGÄNGE DUNKLER SEKTIONEN (2026-08-29)
   Die Marken-Glows in .tone-dark::after waren auf grosse Buehnen ausgelegt.
   In kurzen Sektionen (Abschluss-CTA, ~350 px) deckten 22-rem-Radien die
   komplette Flaeche ab — sichtbar als helle Baender oben und unten.
   Jetzt: Glows nur noch als Ecklicht, und die dunklen Sektionen schliessen
   farbgleich an den Footer an.
   ================================================================== */
.tone-dark::after{
  background-image:
    radial-gradient(24rem 13rem at 2% -12%, rgba(255,122,0,.15), transparent 58%),
    radial-gradient(22rem 12rem at 98% -8%, rgba(19,132,249,.17), transparent 58%),
    radial-gradient(26rem 14rem at 78% 112%, rgba(12,188,123,.10), transparent 58%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}

/* Der Abschluss-CTA behaelt seinen dunklen Grund aus der Basisregel —
   die Kantenverlaeufe steuert calm.css. */
.close-cta{position:relative}
.close-cta > .container{position:relative;z-index:1}
/* Keine helle Innenkante am Abschluss-CTA — sie lag mitten im Verlauf
   und war als Strich sichtbar. Der Footer schliesst farbgleich an. */
section.close-cta.tone-dark{box-shadow:none}
/* Der Footer hatte eine Oberkante in der hellen Linienfarbe — auf Navy eine
   leuchtende Haarlinie. Der Farbwechsel trennt ausreichend, die Kante entfaellt. */
.site-footer{border-top:0!important}
/* 1-px-Spalt zwischen Abschluss-CTA und Footer: durch Teilpixel-Rundung blitzte
   der helle Seitengrund als Haarlinie durch. Ein Pixel Ueberlappung schliesst ihn. */
section.close-cta.tone-dark{margin-bottom:-1px}
.site-footer{position:relative}
/* Bot-Variante: Antenne ragt über die Blüte hinaus, Augen blinken */
.semmy{overflow:visible}
@keyframes sy-tip{0%,100%{opacity:1}50%{opacity:.45}}
html.anim .sy-tip{animation:sy-tip 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.anim .sy-tip{animation:none}}

/* ==================================================================
   DATENSCHUTZ-HINWEIS (2026-08-29)
   Kein Consent-Banner: die Seite setzt keine Cookies und laedt keine
   externen Dienste. Der Hinweis informiert nur — deshalb genuegt ein
   „Verstanden". Die Merkung liegt in localStorage (funktional, §25
   Abs. 2 TDDDG, damit einwilligungsfrei).
   ================================================================== */
.dsbar{position:fixed;left:50%;bottom:1rem;transform:translate(-50%,calc(100% + 2rem));
  z-index:900;width:min(46rem,calc(100vw - 2rem));
  background:#12152D;color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);box-shadow:0 30px 70px -24px rgba(8,11,24,.7);
  opacity:0;transition:transform .38s var(--ease-out),opacity .3s var(--ease-out)}
.dsbar.is-in{transform:translate(-50%,0);opacity:1}
.dsbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--rot),var(--gruen),var(--blau))}
.dsbar-in{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.2rem}
.dsbar-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  color:#0CBC7B;background:rgba(12,188,123,.14)}
.dsbar-ico svg{width:22px;height:22px}
.dsbar-tx{flex:1;font-size:.86rem;line-height:1.55;color:rgba(237,240,250,.76);margin:0}
.dsbar-tx b{display:block;color:#fff;font-size:.94rem;font-weight:600;margin-bottom:.15rem}
.dsbar-tx a{color:#7FB2E5;text-decoration:underline;text-underline-offset:2px}
.dsbar-tx a:hover{color:#fff}
.dsbar-ok{flex:none;min-height:44px;padding:.6rem 1.3rem;border:0;border-radius:10px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:.88rem;font-weight:600;color:#fff;
  background:linear-gradient(140deg,#FF9333,#FF7A00);
  box-shadow:0 10px 24px -10px rgba(255,122,0,.7);transition:transform .18s var(--ease-out)}
.dsbar-ok:hover{transform:translateY(-1px)}
@media(max-width:620px){
  .dsbar-in{flex-wrap:wrap;gap:.8rem}
  .dsbar-ico{display:none}
  .dsbar-ok{width:100%}
}
@media (prefers-reduced-motion:reduce){.dsbar{transition:none}}
/* Video-Vorschau: nur noch Button + Label. Der Aufruf steht kompakter
   direkt am Button, damit das Standbild nicht zugestellt wird. */
.hf-play{gap:.65rem}
.hf-label{flex-direction:row;align-items:baseline;gap:.5rem;padding:.42rem 1rem}
.hf-label b{font-size:.92rem}
.hf-label span{font-size:.78rem}
.hf-label span::before{content:"·";margin-right:.45rem;opacity:.6}
.hero-film-stage::before{
  background:radial-gradient(58% 56% at 50% 46%,rgba(8,11,24,.34),rgba(8,11,24,.06) 72%,transparent);
}
/* Lange Kundenstimme unter den vier Karten — volle Breite statt fuenfter Kachel,
   weil der Text fuer das kompakte Kartenformat zu lang ist. */
.ref-quote{max-width:none;margin-top:1.15rem}
.ref-quote blockquote p{font-size:clamp(.95rem,1.6vw,1.05rem)}
@media(min-width:900px){
  .ref-quote{display:grid;grid-template-columns:auto 1fr;gap:0 1.6rem;align-items:start}
  .ref-quote .ob-quote-mark{grid-row:1/3;margin-bottom:0}
  .ref-quote blockquote{grid-column:2}
  .ref-quote .ob-quote-attr{grid-column:2;margin-top:1.3rem}
  .ref-quote blockquote p+p{margin-top:.7rem}
}
/* Wortmarke ist breit und dunkel — auf der dunklen Karte weiss einfaerben */
.ob-quote-logo{width:auto;max-width:150px;height:auto;max-height:16px}

/* ==================================================================
   KENNZAHLEN: Variante B — Verlauf Orange → Rot (2026-08-29)
   Der Vier-Farben-Verlauf zerlegte die Ziffern optisch in vier Farbwelten.
   Ein Verlauf innerhalb einer Farbfamilie haelt die Zahl als Einheit
   zusammen und bleibt trotzdem CI-treu.
   ================================================================== */
.num-value.brand-gradient,
.ps-num.brand-gradient,
.roi-line strong{
  background-image:linear-gradient(100deg,#FFA640 0%,#FF6A2A 55%,#F4280E 100%)!important;
  background-color:transparent!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
/* Die Wortmarke „Filial-Cockpit" behaelt bewusst die vier Markenfarben */

/* ==================================================================
   KUNDENSTIMMEN ALS LAUFBAND (2026-08-29)
   Fuenf Karten passen in kein 4er-Raster — als endloses Karussell
   bleibt die Reihe ruhig und alle Stimmen kommen vorbei.
   ================================================================== */
.ref-marquee{margin-top:var(--sec-inner);overflow:hidden;position:relative;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ref-track{display:flex;gap:1rem;width:max-content;align-items:stretch}
html.anim .ref-track{animation:ref-scroll 72s linear infinite}
@keyframes ref-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .5rem))}}
.ref-marquee:hover .ref-track,.ref-marquee:focus-within .ref-track{animation-play-state:paused}
.ref-track .ref-card{width:clamp(268px,25vw,320px);flex:none}
/* Karte fuer Martin Auer: Wortmarke statt Portrait */
.rc-brand-wort{background:linear-gradient(140deg,#2A3350,#12152D)}
.rc-wort{position:relative;z-index:1;max-width:70%;max-height:20px;width:auto;height:auto;
  object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.ref-card-ma .rc-attr{padding-top:.55rem}
@media (prefers-reduced-motion:reduce){
  .ref-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none}
  html.anim .ref-track{animation:none}
}
/* SVG ohne intrinsische Groesse braucht ein Seitenverhaeltnis, sonst kollabiert es */
.rc-wort,.ob-quote-logo{aspect-ratio:595/49}
/* Auch die Kennzahlen-Leisten auf Variante B — der Verlauf Orange→Blau
   lief in der Mitte durch ein stumpfes Braungrau. */
.ueber-facts b,.ki-facts b{
  background-image:linear-gradient(100deg,#FFA640 0%,#FF6A2A 55%,#F4280E 100%)!important;
  background-color:transparent!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
/* Der Badge sitzt jetzt ueber dem Video — dort ist die Spalte breiter,
   er passt in eine Zeile und gibt dem Standbild eine Ueberschrift. */
.heronew-col > .hn-eyebrow{margin:0 0 .85rem;align-self:flex-start}
@media(min-width:980px){
  .heronew-col:last-child{display:flex;flex-direction:column;justify-content:center}
  .heronew-col > .hn-eyebrow{margin-left:auto;margin-right:auto}
}
.heronew-col > .hn-eyebrow + .hero-film-stage{margin-top:0}
/* Hinweis unter der Motion-Grafik: die acht Schritte sind Links */
.why-hint{display:flex;align-items:center;justify-content:center;gap:.55rem;
  margin:.85rem 0 0;font-size:.84rem;line-height:1.45;color:rgba(238,241,251,.66);text-align:center}
.why-hint svg{width:17px;height:17px;flex:none;color:var(--orange)}
:root[data-theme="light"] .why-hint{color:#54607e}
@media(max-width:920px){.why-hint{font-size:.8rem}}
/* Vollbild-Schalter an der Motion-Grafik */
.why-wrap{position:relative;min-width:0}
.why-fs{position:absolute;right:.7rem;top:.7rem;z-index:5;display:inline-flex;align-items:center;gap:.4rem;
  min-height:36px;padding:.35rem .8rem;border-radius:999px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:.78rem;font-weight:600;color:#12152D;
  background:rgba(255,255,255,.92);border:1px solid rgba(18,21,45,.12);
  box-shadow:0 8px 20px -10px rgba(18,21,45,.5);
  opacity:0;transform:translateY(-4px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.why-fs svg{width:15px;height:15px}
.why-wrap:hover .why-fs,.why-fs:focus-visible{opacity:1;transform:translateY(0)}
@media (hover:none){.why-fs{opacity:1;transform:none}}
/* im Vollbild: dunkler Grund, Grafik mittig */
#whyScale:fullscreen{background:#0B0E1D;display:grid;place-items:center;min-height:100vh}
#whyScale:-webkit-full-screen{background:#0B0E1D;min-height:100vh}
#whyScale:fullscreen .why-pan{margin:0}
/* Kundenstimmen final: Logo gross auf dem Markenband, Portrait als Kreis
   in der Signaturzeile. Die Face-Variante wird nicht mehr genutzt. */
.ref-card .rc-brand{aspect-ratio:16/6.4;padding:1rem 1.4rem;display:grid;place-items:center}
.ref-card .rc-brand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--rc-a),var(--rc-b))}
.ref-card .rc-logo-big{max-height:56px;max-width:78%;filter:brightness(0) invert(1);opacity:.97}
.ref-card-ma .rc-logo-big{max-height:22px}
.ref-card .rc-face{position:static;flex:none;width:52px;height:52px;border-radius:50%;
  object-fit:cover;object-position:center 22%;border:2px solid rgba(255,255,255,.28);
  background:#1b2038;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);margin-top:0;display:block}
.ref-card .rc-attr{display:flex;align-items:center;gap:.75rem;padding-top:.7rem;
  border-top:1px solid rgba(255,255,255,.1);margin-top:.5rem}
.ref-card .rc-who{margin-top:0}
/* Der Badge ist die Kopfzeile des gesamten Hero — linksbuendig mit der
   Ueberschrift, nicht an das Video geklebt. */
.hn-eyebrow-top{grid-column:1/-1;justify-self:start;margin:0 0 clamp(1.1rem,2.4vw,1.9rem)}
.heronew-col > .hn-eyebrow{margin-left:0;margin-right:auto}
/* Hinweis gehoert unter die Grafik und richtet sich an deren linker Kante aus */
.why-wrap .why-hint{justify-content:flex-start;text-align:left;margin:.75rem 0 0}
@media(max-width:920px){.why-wrap .why-hint{justify-content:center;text-align:center}}

/* ==================================================================
   KUNDENSTIMMEN: volle Breite, groessere Karten (2026-08-29)
   ================================================================== */
.ref-marquee{width:100vw;max-width:none;margin-inline:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
.ref-track{gap:1.15rem;padding-inline:1.15rem}
.ref-track .ref-card{width:clamp(300px,27vw,382px)}
.ref-card .rc-brand{aspect-ratio:16/6}
.ref-card .rc-body{padding:1.5rem 1.35rem 1.4rem;gap:.95rem}
.ref-card .rc-body blockquote{font-size:.97rem;line-height:1.6}
.ref-card .rc-face{width:56px;height:56px}
.ref-card .rc-who strong{font-size:.94rem}
@keyframes ref-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .575rem))}}
/* Logo-Harmonie: Wortmarken und kompakte Bildmarken wirken bei gleicher Hoehe
   unterschiedlich gross. Deshalb je Marke auf eine aehnliche optische FLAECHE
   normiert (Zielwert rund 8.000 px²) statt auf gleiche Hoehe. */
.rc-logo-big{max-height:none;max-width:none}
.rc-logo-big[src*="client-10"]     {max-height:48px;max-width:min(170px,80%)}  /* Der Beck  420x123 */
.rc-logo-big[src*="leifert"]       {max-height:40px;max-width:min(230px,78%)}  /* Leifert  1380x271 */
.rc-logo-big[src*="client-4."]      {max-height:46px;max-width:min(180px,82%)}  /* geiping   296x78  */
.rc-logo-big[src*="client-8."]      {max-height:68px;max-width:min(130px,60%)}  /* Bachmann  195x115 */
.rc-logo-big[src*="client-3."]      {max-height:74px;max-width:min(115px,55%)}  /* Brothaus  291x201 */
.rc-logo-big[src*="martin-auer"]    {max-height:26px;max-width:min(290px,86%)}  /* M. Auer   595x49  */
/* Der Badge sitzt unter dem Film — er kostet dort keine eigene Hero-Zeile
   und klebt nicht an der Videokante. */
.hn-eyebrow-film{margin:0 0 .9rem;justify-self:start}
@media(max-width:979px){.hn-eyebrow-film{margin-inline:0}}

/* Badge unter dem Film — hoehere Spezifitaet, sonst gewinnt die aeltere Regel */
/* Hoehere Spezifitaet noetig: index.html bringt einen eigenen <style>-Block
   mit .heronew .hn-eyebrow{margin:0} mit, der spaeter im Dokument steht. */
.heronew .heronew-col > .hn-eyebrow-film{margin:0 0 .9rem;align-self:flex-start}

/* ============================================================
   FILM-BUTTON: Hover neu (2026-08-29)
   Die Basisregel .hf-play{border-radius:50%;box-shadow:...} stammt vom
   runden Ein-Icon-Button. Beim neuen, breiten Button (Disc + Label)
   erzeugt sie eine weisse Ellipse.
   Darum hier gezielt fuer .hf-play-neu aufgehoben statt global geloescht.
   ============================================================ */
.hf-play-neu,
.hf-play-neu:hover,
.hf-play-neu:focus-visible{
  background:none;border-radius:0;box-shadow:none;
  width:auto;height:auto;padding:0;padding-left:0;
  transform:translate(-50%,-50%)}

/* Hover: der Film hebt sich, der Knopf tritt hervor, das Bild zieht leicht an */
.hero-film-stage .hf-video{transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .35s ease}
.hero-film-stage:hover .hf-video,
.hf-play-neu:focus-visible ~ .hf-video{transform:scale(1.02);filter:brightness(1.05)}
.hero-film-stage.is-playing:hover .hf-video{transform:none;filter:none}

.hf-play-neu .hf-disc{
  box-shadow:0 22px 52px -14px rgba(255,122,0,.75),0 0 0 7px rgba(255,168,90,.16);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s ease,background .26s ease}
.hero-film-stage:hover .hf-play-neu .hf-disc,
.hf-play-neu:hover .hf-disc,
.hf-play-neu:focus-visible .hf-disc{
  transform:scale(1.07);
  background:linear-gradient(140deg,#FFA24A,#FF7F0A);
  box-shadow:0 30px 70px -16px rgba(255,122,0,.9),0 0 0 11px rgba(255,168,90,.24)}
.hf-play-neu:active .hf-disc{transform:scale(1.01);transition-duration:.09s}

.hf-play-neu .hf-label{transition:background .26s ease,border-color .26s ease,transform .26s cubic-bezier(.22,.61,.36,1)}
.hero-film-stage:hover .hf-play-neu .hf-label,
.hf-play-neu:hover .hf-label,
.hf-play-neu:focus-visible .hf-label{
  background:rgba(9,12,26,.8);border-color:rgba(255,147,51,.55);transform:translateY(2px)}

.hf-play-neu:focus-visible{outline:3px solid #FF9333;outline-offset:10px;border-radius:26px}

@media (prefers-reduced-motion:reduce){
  .hero-film-stage:hover .hf-video{transform:none;filter:brightness(1.04)}
  .hero-film-stage:hover .hf-play-neu .hf-disc,
  .hf-play-neu:hover .hf-disc{transform:none}
  .hero-film-stage:hover .hf-play-neu .hf-label,
  .hf-play-neu:hover .hf-label{transform:none}}

/* ============================================================
   PIVOT-SEKTION: Farbwelt wie im Hero (2026-08-29)
   Statt des vierfarbigen Marken-Verlaufs (orange/rot/gruen/blau)
   der warme Akzent aus dem Hero-Header — gleiche Logik wie bei
   den Kennzahlen (Variante B).
   ============================================================ */
.pivot h2 .accent-one,
.pivot .cockpit{
  background-image:linear-gradient(100deg,#FFA640 0%,#FF6A2A 55%,#F4280E 100%)!important;
  background-color:transparent!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}

/* ============================================================
   ZAHLEN-LEISTE: fuenf Felder in einer Reihe (2026-08-30)
   Die Vertrauens-Angaben aus dem Hero stehen jetzt hier mit.
   Zahlen bewusst kleiner und nicht mehr fett, damit alles
   in eine Leiste passt.
   ============================================================ */
@media(min-width:900px){
  /* Jedes Feld einzeilig: Zahl bzw. Symbol und Beschriftung nebeneinander,
     die Spalten so breit wie ihr Inhalt. */
  .proofstrip-grid{grid-template-columns:repeat(5,auto);justify-content:space-between;
    align-items:center;column-gap:clamp(1.2rem,2.6vw,2.6rem)}
  .proofstrip-grid>div{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
  .proofstrip-grid>div+div::before{left:calc(-1 * clamp(.6rem,1.3vw,1.3rem));top:8%;height:84%}
  .proofstrip .ps-num,.proofstrip .ps-sym{display:inline-flex}
  .proofstrip .ps-lbl{display:inline;margin-top:0}
}
.ps-num{font-weight:600;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.02em}
.ps-lbl{margin-top:.3rem;font-size:.85rem}
/* Die beiden Merkmale stehen an derselben Stelle wie die Zahlen und
   sind genauso hoch, damit die Leiste eine Linie behaelt. */
.ps-sym{display:flex;align-items:center;justify-content:center;
  height:clamp(1.15rem,1.7vw,1.5rem);color:#FF8A2B}
.ps-sym svg{height:clamp(1.15rem,1.7vw,1.5rem);width:auto;display:block}
.ps-sym-flagge svg{height:clamp(.85rem,1.25vw,1.1rem);border-radius:3px}
@media(max-width:899px){
  .proofstrip-grid{grid-template-columns:repeat(2,1fr)}
  /* letztes Feld sitzt sonst allein links in der Schlusszeile */
  .proofstrip-grid>div:last-child{grid-column:1/-1}
}

/* ============================================================
   APP-WORTMARKEN IN IHRER EIGENEN FARBE (2026-08-30)
   Vorher lief ueber jedes App-Kuerzel der vierfarbige Marken-
   Verlauf, egal welche App gemeint war. Jetzt: ORGA orange,
   TECH blau, LINK gruen, TEAM rot.
   ============================================================ */
.apphero-wm b,
.appcard-wm b,
.crosscard .cc-wm b{
  background:none!important;background-image:none!important;
  -webkit-text-fill-color:currentColor!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
}
/* App-Seite: Kuerzel in der Seitenfarbe */
.apphero-wm b{color:var(--ac)!important}
/* Querverweis-Karten: jede Karte in der Farbe der verlinkten App */
.crosscard.x-orga .cc-wm b,.appcard.c-orga .appcard-wm b{color:var(--orange)!important}
.crosscard.x-team .cc-wm b,.appcard.c-team .appcard-wm b{color:var(--rot)!important}
.crosscard.x-link .cc-wm b,.appcard.c-link .appcard-wm b{color:var(--gruen)!important}
.crosscard.x-tech .cc-wm b,.appcard.c-tech .appcard-wm b{color:var(--blau)!important}

/* ============================================================
   DUNKLE CTA-KAESTEN: feste Farben statt umschaltender Variable
   (2026-08-30)
   .wiki-cta und .rech-result mischten var(--navy) mit dem festen
   #1b2140. Im Dark Mode wird --navy zu #EDF0FA — der Verlauf lief
   also von fast weiss nach dunkelblau, waehrend der Text weiss
   blieb. Ergebnis: die ersten Zeilen waren praktisch unlesbar.
   Beide Kaesten sind bewusst dunkel mit weisser Schrift, darum
   hier feste Werte.
   ============================================================ */
.wiki-cta{background-image:linear-gradient(120deg,#141833,#1b2140)!important;color:#fff!important}
.rech-result{background-image:linear-gradient(150deg,#141833,#1b2140)!important;color:#fff!important}
.wiki-cta h3,.rech-result h3{color:#fff!important}
.wiki-cta p{color:#cdd6ee!important}
.wiki-cta .wc-k{color:#a7b6dc!important}

/* ============================================================
   BILDPLAETZE (2026-08-30)
   Vorbereitete Flaechen fuer Fotos, die noch fehlen. Das Bild
   wird als erste Ebene von background-image gesetzt: fehlt die
   Datei, bleibt der CI-Verlauf darunter stehen — kein kaputtes
   Bildsymbol, kein Sprung im Layout. Sobald die Datei unter dem
   angegebenen Pfad liegt, ist sie ohne weitere Aenderung da.
   Motiv-Liste: assets/photos/BILDPLAETZE.md
   ============================================================ */
.bildplatz{
  position:relative;display:block;width:100%;border-radius:14px;overflow:hidden;
  background-image:var(--bp),linear-gradient(135deg,
    color-mix(in srgb,var(--bp-ton,#FF7A00) 30%,#141833),
    color-mix(in srgb,var(--bp-ton,#FF7A00) 12%,#10142c) 60%,#0e1226);
  background-size:cover,auto;background-position:center;background-repeat:no-repeat;
  aspect-ratio:var(--bp-ar,4/3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
/* feines Raster, damit die leere Flaeche als Gestaltung lesbar ist
   und nicht als Fehler; verschwindet unter dem Foto. */
.bildplatz::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(75% 65% at 50% 40%,#000,transparent);
          mask:radial-gradient(75% 65% at 50% 40%,#000,transparent);
}
.ch-card .bildplatz{margin-bottom:1rem}
.bildplatz-banner{margin:1.6rem 0 .4rem;border-radius:16px}
@media(max-width:640px){.bildplatz-banner{--bp-ar:16/10!important}}
/* Timeline: Bild als Auftakt der Station */
.bildplatz-hist{margin:0 0 .9rem;border-radius:13px}
@media(min-width:900px){.bildplatz-hist{max-width:min(100%,420px)}}

/* ============================================================
   DEMO-SEITE mit Anfrageformular (2026-08-30)
   Loest die mailto-Links als Conversion-Weg ab.
   ============================================================ */
.demo-hero{padding-top:clamp(2rem,4vw,3.2rem)}
.demo-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
@media(max-width:900px){.demo-grid{grid-template-columns:1fr;gap:2rem}}
.demo-text h1{font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;margin:.5rem 0 0}
.demo-lede{margin-top:1rem;font-size:1.04rem;line-height:1.6;color:var(--text-soft);max-width:38rem}

.demo-fakten{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.85rem}
.demo-fakten li{display:flex;flex-direction:column;gap:.1rem;padding-left:1.5rem;position:relative}
.demo-fakten li::before{content:"";position:absolute;left:0;top:.45rem;width:9px;height:9px;
  border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 18%,transparent)}
.demo-fakten b{font-size:.99rem}
.demo-fakten span{font-size:.9rem;color:var(--text-soft)}

.demo-ablauf{margin-top:1.9rem;padding:1.15rem 1.3rem;border:1px solid var(--line);
  border-radius:15px;background:var(--surface-1)}
.demo-ablauf-k{margin:0 0 .6rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.demo-ablauf ol{margin:0;padding-left:1.2rem;display:grid;gap:.5rem}
.demo-ablauf li{font-size:.93rem;line-height:1.5;color:var(--text-soft)}
.demo-alt{margin-top:1.5rem;font-size:.92rem;color:var(--text-soft)}

.demo-formbox{position:sticky;top:calc(var(--header-h,72px) + 1.2rem)}
@media(max-width:900px){.demo-formbox{position:static}}
.demo-form{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.3rem,2.4vw,1.8rem);box-shadow:var(--shadow-card);display:grid;gap:.95rem}
.df-titel{margin:0;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.25rem}
.df-zeile{display:grid;gap:.35rem}
.df-paar{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
@media(max-width:420px){.df-paar{grid-template-columns:1fr}}
.df-zeile label{font-size:.85rem;font-weight:500;color:var(--text-soft)}
.df-zeile label span{color:var(--orange)}
.df-zeile input,.df-zeile select,.df-zeile textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--navy);
  background:var(--surface-1);border:1px solid var(--line);border-radius:10px;
  padding:.66rem .8rem;transition:border-color .16s,box-shadow .16s}
.df-zeile textarea{resize:vertical;min-height:76px}
.df-zeile input:focus,.df-zeile select:focus,.df-zeile textarea:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
.df-zeile input[aria-invalid="true"]{border-color:#F4280E;box-shadow:0 0 0 3px rgba(244,40,14,.18)}
/* Honigtopf gegen Bots: fuer Menschen unsichtbar, fuer Screenreader ausgeblendet */
.df-senden{margin-top:.3rem;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  color:#231206;background:linear-gradient(180deg,#FF9333,#FF7A00);border:0;border-radius:12px;
  padding:.85rem 1.2rem;box-shadow:0 18px 40px -16px rgba(255,122,0,.7);
  transition:transform .12s ease,filter .16s}
.df-senden:hover{transform:translateY(-1px);filter:brightness(1.04)}
.df-senden[disabled]{opacity:.6;cursor:progress;transform:none}
.df-hinweis{margin:0;font-size:.79rem;line-height:1.5;color:var(--mute)}
.df-extra-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;pointer-events:none!important}
.cryptedmail:after{content:attr(data-name) "@" attr(data-domain) "." attr(data-tld)}
.df-status{margin:0;font-size:.9rem;line-height:1.5;min-height:0}
.df-status.fehler{color:#FF6B4F}
.df-status.gut{color:#0CBC7B;font-weight:600}
.demo-form.gesendet .df-zeile,.demo-form.gesendet .df-paar,
.demo-form.gesendet .df-senden,.demo-form.gesendet .df-hinweis{display:none}

/* Werte-Karten auf "Ueber uns": Icon in der jeweiligen Markenfarbe (2026-08-30) */
.ch-card .ch-ic,.ch-card-t .ch-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  margin:0 0 .9rem;color:var(--chc,var(--orange));
  background:color-mix(in srgb,var(--chc,var(--orange)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--chc,var(--orange)) 28%,transparent)}
.ch-card .ch-ic svg,.ch-card-t .ch-ic svg{width:21px;height:21px;display:block}

/* ============================================================
   MOBILE FEINSCHLIFF (2026-08-31)
   Ergebnis der Pruefung bei 360 und 390 px:
   kein Ueberlauf, aber drei Punkte unter den Richtwerten.
   ============================================================ */
@media(max-width:640px){
  /* Kachel-Unterzeilen lagen bei 10,6px — unter der Lesbarkeitsschwelle */
  .appcard-tag{font-size:.72rem}

  /* Rechtslinks im Fuss: "AGB" war nur 28px breit, der Link im
     Cookie-Hinweis nur 19px hoch. Beides unter den 32px, die eine
     Fingerkuppe sicher trifft. Vergroessert wird die Trefferflaeche,
     nicht die Schrift. */
  .site-footer a{display:inline-block;padding:.42rem .5rem;margin:-.42rem -.15rem}
  .dsbar-tx a,.df-hinweis a{display:inline-block;padding:.42rem 0;line-height:1.55}
}

/* ============================================================
   MOBIL: Loesungs-Buehne und Netzwerk-Grafik (2026-08-31)
   ============================================================ */
@media(max-width:760px){
  /* Das Handy war mit 46 % Breite so klein, dass die Bildschirm-
     inhalte nicht mehr lesbar waren. Groesser, dafuer staerker
     ueberlappend, damit die Sektion nicht hoeher wird. */
  .solex-phone{width:58%;margin:-72px 0 0 0}

  /* Vollbild-Knopf auf dem Handy dauerhaft sichtbar und groesser —
     er ist hier der eigentliche Weg zu den Details. */
  .why-fs{opacity:1;transform:none;padding:.5rem .8rem;font-size:.82rem;
    right:.5rem;top:.5rem}
  .why-scale{overflow-x:hidden}
  .pan-hint{display:none}
}
/* Quellenhinweis unter der ROI-Zeile (2026-09-01) */
.roi-quelle{margin-top:.5rem;font-size:.86rem;text-align:center}
.roi-quelle a{color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.roi-quelle a:hover{color:var(--orange)}

/* Kundennamen direkt unter der Kennzahlen-Leiste (2026-09-01).
   Der erste Kundenname stand vorher erst bei 89 % Scrolltiefe — in dieser
   Branche wiegt ein bekannter Name mehr als jede Nutzerzahl. */
.kundenzeile{border-bottom:1px solid var(--line);padding:.85rem 0;
  font-size:.88rem;color:var(--text-soft);text-align:center}
.kundenzeile b{color:var(--text);font-weight:600}
@media(max-width:640px){
  .kundenzeile{font-size:.8rem;line-height:1.7;text-align:left}
}



/* ============================================================
   ZWISCHEN-AUSGÄNGE ZUR DEMO (2026-09-01)
   Zwischen Sektion 7 und dem Seitenende lagen 10.600 px Desktop
   und 16.800 px mobil ohne einen einzigen Weg zur Demo. Kauf-
   bereitschaft entsteht bei jedem Leser an anderer Stelle.
   ============================================================ */
.sek-cta{text-align:center;margin-top:clamp(1.8rem,3.2vw,2.6rem)}
.sek-cta-txt{font-size:1.02rem;color:var(--text-soft);margin:0 0 1rem}
.sek-cta-link{margin-top:.9rem;font-size:.9rem}
.sek-cta-link a{color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.sek-cta-link a:hover{color:var(--orange)}

/* Was nach dem Klick passiert — stand bisher erst auf der Zielseite */
.cta-hinweis{margin:.75rem 0 0;font-size:.82rem;color:var(--mute);line-height:1.5}
.heronew .cta-hinweis{margin-top:.85rem}

/* Zweiter Ausgang im Problem-Selektor */
.sel-demo{display:inline-block;font-size:.9rem;font-weight:500;
  color:var(--mute);text-decoration:none;border-bottom:1px solid transparent}
.sel-demo:hover{color:var(--orange);border-bottom-color:currentColor}
@media(max-width:640px){
  .sel-foot{flex-direction:column;align-items:flex-start;gap:.5rem}
  .sek-cta-txt{font-size:.95rem}
}



/* ============================================================
   FUSS-NAVIGATION (2026-09-01)
   16 fertige Ratgeberseiten bekamen bisher keinen einzigen Link
   von einer Hauptseite — sie verlinkten nur sich selbst. Damit
   erreicht sie weder ein Besucher noch eine Suchmaschine.
   ============================================================ */
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.4rem;
  padding:2.2rem 0 1.8rem;border-top:1px solid rgba(255,255,255,.1);margin-top:1.8rem}
.footer-nav h3{font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  margin:0 0 .85rem}
.footer-nav .fn-sp{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.footer-nav a{color:rgba(255,255,255,.55);
  text-decoration:none;font-size:.9rem;line-height:1.4}
.footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:1.8rem}
}
@media(max-width:520px){
  .footer-nav{grid-template-columns:1fr;gap:1.6rem;padding:1.8rem 0 1.4rem}
  .footer-nav a{font-size:.88rem;padding:.18rem 0}
}

/* ============================================================
   A14 — Kundenstimmen: Lauf anhalten (2026-09-01)
   Ein Zitat von fünf Zeilen liest niemand in einem fahrenden
   Band zu Ende. Auf Touch lässt es sich weder anhalten (kein
   :hover) noch wischen (overflow war hidden). Bewegung liest
   sich als Deko, Stillstand als Beleg.
   ============================================================ */
@media (hover:none){
  html.anim .ref-track{animation:none!important}
  .ref-marquee{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ref-marquee::-webkit-scrollbar{display:none}
  .ref-marquee .ref-card{scroll-snap-align:center}
}

/* Die Lösungs-Bühne bleibt Desktop vorbehalten: auf dem Handy sind die
   Geräteattrappen zu klein, um ihren Inhalt zu zeigen (2026-09-01). */
@media(max-width:760px){ .solex{display:none} }

/* Der App-Hero endete mit padding-bottom:0 — das Geräte-Mockup stieß
   direkt an die nächste Sektion (2026-09-01). */
.apphero{padding-bottom:clamp(2rem,3.6vw,3.2rem)}

/* Fuß-Links bewusst zurückgenommen — beim Darüberfahren voll lesbar (2026-09-01) */
.footer-nav a:hover,.footer-nav a:focus-visible{color:rgba(255,255,255,.95)}
.footer-links a{color:rgba(255,255,255,.55)}
.footer-links a:hover,.footer-links a:focus-visible{color:rgba(255,255,255,.95)}

/* ============================================================
   COOKIE-HINWEIS (2026-09-01)
   Wieder als klickbarer Hinweis — aber erst, wenn der Besucher
   den ersten Bildschirm verlassen hat. Vorher lag er auf dem
   Handy zu 100 % über dem Hauptknopf im Hero.
   ============================================================ */
@media(max-width:640px){
  .dsbar{left:.75rem;right:.75rem;bottom:.75rem;transform:translateY(calc(100% + 2rem));
    width:auto;max-width:none}
  .dsbar.is-in{transform:translateY(0)}
  .dsbar-in{flex-wrap:wrap;gap:.7rem;padding:.9rem 1rem}
  .dsbar-tx{font-size:.82rem;line-height:1.5}
  .dsbar-ok{width:100%}
}

/* ============================================================
   HERKUNFT — Gründung/Familienunternehmen auf der Startseite
   (ergänzt 2026-09-01). Bewusst am Ende der Datei und auf
   oberster Ebene: NICHT in einen @media-Block einrücken.
   ============================================================ */
.hk-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,3.4vw,3.2rem);align-items:center}
.hk-text .sec-lede{max-width:38rem}
.hk-facts{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.4rem}
.hk-facts li{border-top:2px solid var(--line);padding-top:.6rem}
.hk-facts b{display:block;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:1.02rem;line-height:1.25;color:var(--text)}
.hk-facts span{display:block;margin-top:.15rem;font-size:.84rem;line-height:1.4;color:var(--text-soft)}
.hk-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.6rem;
  font-weight:600;font-size:.95rem;color:var(--blau);text-decoration:none}
.hk-link:hover,.hk-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.hk-quote{align-self:center}
@media(max-width:900px){
  .hk-grid{grid-template-columns:1fr}
  .hk-facts{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hk-facts{grid-template-columns:1fr;gap:.8rem}
}