/* KI & Automatisierung: eigene Abschnitte (Zahlen, Zeit-Rechner, Treppe, Beispiele, Werkzeuge, Datenschutz, Termin). Farben und Schrift aus der Webflow-CSS.
   Startzustände für Animationen nur mit html.zk-bereit (setzt ki-seite.js) und ohne „Bewegung reduzieren“: ohne Skript ist alles sichtbar. */
.zk-abschnitt{padding:120px 0}
.zk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zk-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:8px 24px;border:1px solid var(--background-color-02);border-radius:100px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zk-titel{margin:0;color:var(--text-color-01);font-size:48px;font-weight:600;line-height:1.2em;text-transform:uppercase;text-wrap:balance}
.zk-grau{color:var(--text-color-02)}
.zk-text{margin:0;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.5em}
.zk-text a,.zk-stufe a,.zk-zeilen a{color:var(--text-color-01);text-decoration:underline;text-decoration-color:var(--primary-color);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .3s}
.zigla-maus .zk-text a:hover,.zigla-maus .zk-stufe a:hover,.zigla-maus .zk-zeilen a:hover{color:var(--primary-color)}
.zk-kopf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px 80px;align-items:end;margin-bottom:64px}
.zk-knopf{display:inline-flex;align-items:center;gap:14px;padding:6px 24px 6px 6px;border:1px solid var(--background-color-02);border-radius:100px;background:var(--white-color);color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase;text-decoration:none;transition:border-color .4s,box-shadow .4s}
.zk-knopf-pfeil{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:var(--white-color);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zk-knopf-pfeil svg{width:16px;height:16px}
.zigla-maus .zk-knopf:hover{border-color:var(--primary-color);box-shadow:0 10px 30px #c00bf726}
.zigla-maus .zk-knopf:hover .zk-knopf-pfeil{transform:rotate(-45deg)}
.zk-knopf:focus-visible,.zk-feld select:focus-visible,.zk-feld input:focus-visible{outline:2px solid var(--primary-color);outline-offset:3px}
.service-sort-description:has(.zk-hero-knopf){flex-direction:column;align-items:flex-start}
.zk-hero-knopf{margin-top:32px}
/* Knopf nur so breit wie sein Text: Webflows Hover-Füllung ist eine 400 px breite Form und deckt breitere Knöpfe nicht ganz ab (wie /online-marketing) */
.zk-hero-knopf .large-button-copy{display:inline-flex}
/* „Kostenlosen Check buchen“ ist breiter als Webflows 400-px-Füllform: Form wächst mit (Füllung beginnt 20 % links vom Knopf) */
.zk-hero-knopf .circle-svg.large{width:max(400px,140%);height:auto}
.service-features-wrapper{overflow-x:clip}
.zk-zahlen{padding-top:0;padding-bottom:40px}
.zk-zahlen .staticts-item{justify-content:flex-start}
.zk-zahlen .count-name .body-text-default-medium-copy{justify-content:center;text-align:center}
.zk-zahl{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.zk-rolle{display:inline-block;height:1.33em;overflow:hidden;vertical-align:top}
.zk-rolle-band{display:flex;flex-direction:column;transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
.zk-rolle-band>span{height:1.33em;text-align:center}
.zk-einblenden{transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}

/* Dunkle Boxen (Zeit-Rechner, Datenschutz) mit feinen Linien wie im Footer */
.zk-dunkel{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;background-color:var(--text-color-01);background-image:linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:25% 100%;color:var(--white-color)}
.zk-dunkel::before{content:"";position:absolute;right:-18%;bottom:-55%;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#5510ff5c,#c00bf72e 55%,transparent)}
.zk-dunkel .zk-pill{border-color:#ffffff33;color:var(--white-color)}
.zk-dunkel .zk-titel{color:var(--white-color)}
.zk-dunkel .zk-text{color:#b5b5bd}

/* Zeit-Rechner */
.zk-rechner-box{padding:80px}
.zk-rechner-kopf{max-width:760px;margin-bottom:48px}
.zk-rechner-kopf .zk-titel{margin-bottom:24px}
.zk-rechner-beispiel{margin:0 0 40px;font-size:24px;font-weight:600;line-height:1.4em}
.zk-rechner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:24px;margin:0 0 40px}
.zk-rechner[hidden],.zk-ergebnis[hidden],.zk-ergebnis [hidden]{display:none}
.zk-feld{display:flex;flex-direction:column;gap:10px;min-width:0}
.zk-feld label{color:#b5b5bd;font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zk-feld select,.zk-feld input{width:100%;height:60px;padding:0 18px;border:1px solid #ffffff40;border-radius:12px;background:#ffffff12;color:var(--white-color);font:inherit;font-size:18px;font-weight:600}
.zk-feld select option{background:var(--white-color);color:var(--text-color-01)}
.zk-feld input[aria-invalid="true"]{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color)}
.zk-ergebnis{margin:0 0 32px;padding-top:32px;border-top:1px solid #ffffff26}
.zk-ergebnis-zahl{margin:0;font-size:64px;font-weight:600;line-height:1.1em;font-variant-numeric:tabular-nums}
.zk-ergebnis-tage{margin:12px 0 0;color:#b5b5bd;font-size:20px;font-weight:600;line-height:1.4em}
.zk-ergebnis-hinweis{margin:0;font-size:18px;font-weight:600;line-height:1.5em}
.zk-quelle{margin:24px 0 0;color:#9a9aa3;font-size:13px;line-height:1.5em}

/* Treppe: vier Stufen, auf dem Desktop ansteigend, mobil untereinander an einer lila Linie */
.zk-treppe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start;margin:0;padding:0;list-style:none}
.zk-stufe{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:32px 28px 36px;border-radius:20px;background:var(--background-color-01);box-shadow:0 5px 32px #0000001a}
.zk-stufe:nth-child(1){margin-top:168px}
.zk-stufe:nth-child(2){margin-top:112px}
.zk-stufe:nth-child(3){margin-top:56px}
.zk-stufe-linie{position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.zk-stufe-nr{display:flex;flex:none;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:24px;border-radius:50%;background:var(--white-color);color:var(--text-color-01);font-size:24px;font-weight:600;line-height:1}
.zk-stufe:last-child .zk-stufe-nr{background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));color:var(--white-color)}
.zk-stufe-titel{margin:0 0 12px;color:var(--text-color-01);font-size:20px;font-weight:600;line-height:1.35em;text-transform:uppercase}
.zk-stufe p{margin:0;color:var(--text-color-02);font-size:16px;font-weight:500;line-height:1.5em}
.zk-stufe .zk-stufe-beispiel{margin-top:20px;padding-top:20px;border-top:1px solid var(--background-color-02);color:var(--text-color-01);font-weight:600}
.zk-stufe .zk-stufe-hinweis{margin-top:16px;padding:12px 16px;border-radius:12px;background:#f3e1fe;color:var(--text-color-01);font-size:14px}

/* Echte Beispiele */
.zk-beispiel-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.zk-beispiel{display:flex;flex-direction:column;padding:40px;border:1px solid var(--background-color-02);border-radius:20px;background:var(--white-color);transition:opacity .8s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.zigla-maus .zk-beispiel:hover{transform:translateY(-6px);box-shadow:0 24px 48px #5510ff1f}
.zk-beispiel-kopf{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.zk-marke{padding:6px 14px;border-radius:100px;background:var(--background-color-01);color:var(--text-color-01);font-size:12px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zk-marke-stufe{background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));color:var(--white-color)}
.zk-beispiel-titel{margin:0 0 24px;color:var(--text-color-01);font-size:24px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.zk-zeilen{display:grid;gap:16px;margin:0}
.zk-zeilen>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px}
.zk-zeilen dt{color:var(--text-color-01);font-size:13px;font-weight:600;line-height:1.8em;text-transform:uppercase}
.zk-zeilen dd{margin:0;color:var(--text-color-02);font-size:16px;font-weight:500;line-height:1.55em}
/* Partner-Hinweis unten in der Karte (Kundenprojekte über Gate11) */
.zk-partner{margin:auto 0 0;padding-top:24px;color:var(--text-color-02);font-size:14px;font-weight:600;line-height:1.5em}
.zk-partner::before{content:"";display:block;height:1px;margin-bottom:20px;background:var(--background-color-02)}
.zk-partner a{color:var(--text-color-01);text-decoration:underline;text-decoration-color:var(--primary-color);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .3s}
.zigla-maus .zk-partner a:hover{color:var(--primary-color)}

/* Werkzeuge und Stichwort-Band (läuft mit dem Scrollen, Skript setzt --zk-versatz) */
.zk-werkzeuge{padding-bottom:40px}
.zk-werkzeuge-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 80px;align-items:end;padding-top:64px;border-top:1px solid var(--background-color-02)}
.zk-band{overflow:hidden;padding:24px 0 100px}
.zk-band-zeile{display:flex;gap:.3em;align-items:center;width:max-content;margin:0;color:var(--text-color-01);font-size:96px;font-weight:700;line-height:1.15em;text-transform:uppercase;white-space:nowrap;transform:translate3d(calc(var(--zk-versatz,0) * -.3px),0,0);will-change:transform}
.zk-band-zeile.zk-kontur{color:var(--white-color);-webkit-text-stroke:4px var(--text-color-01);paint-order:stroke fill;transform:translate3d(calc(-35% + var(--zk-versatz,0) * .3px),0,0)}
.zk-band-punkt{flex:none;width:.28em;height:.28em;border-radius:50%;background:linear-gradient(135deg,var(--secondary-color),var(--primary-color))}

/* KI, aber sicher */
.zk-sicher-box{padding:80px}
.zk-sicher-box .zk-titel{margin-bottom:48px}
.zk-sicher-punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.zk-sicher-punkte li{padding-top:24px;border-top:1px solid #ffffff26}
.zk-sicher-titel{margin:0 0 12px;color:var(--white-color);font-size:20px;font-weight:600;line-height:1.35em;text-transform:uppercase}
.zk-sicher-punkte p{margin:0;color:#b5b5bd;font-size:16px;font-weight:500;line-height:1.55em}

/* Kostenloser Check mit Terminkarte */
.zk-termin-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px 80px;align-items:start}
.zk-termin-inhalt .zk-titel{margin-bottom:24px}
.zk-termin-inhalt .termin{scroll-margin-top:110px}
.zk-liste-titel{margin:32px 0 16px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zk-gespraech{display:grid;gap:18px;margin:0 0 32px;padding:0;list-style:none;counter-reset:zk-gespraech}
.zk-gespraech li{position:relative;padding-left:54px;color:var(--text-color-01);font-size:17px;font-weight:500;line-height:1.55em;counter-increment:zk-gespraech}
.zk-gespraech li::before{content:counter(zk-gespraech);position:absolute;top:-4px;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#f3e1fe;color:var(--secondary-color);font-size:15px;font-weight:600}
.zk-beweis{margin:0 0 20px;padding:16px 20px;border-left:3px solid var(--primary-color);border-radius:0 12px 12px 0;background:var(--background-color-01);color:var(--text-color-01);font-size:16px;font-weight:500;line-height:1.55em}
.zk-anruf{font-size:16px}

@media screen and (max-width:991px){
  .zk-abschnitt{padding:80px 0}
  .zk-titel{font-size:40px}
  .zk-kopf,.zk-werkzeuge-inhalt,.zk-termin-inhalt{grid-template-columns:minmax(0,1fr);gap:24px}
  .zk-kopf{margin-bottom:48px}
  .zk-termin-inhalt{gap:40px}
  .zk-rechner-box,.zk-sicher-box{padding:56px 40px}
  .zk-treppe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zk-stufe:nth-child(1),.zk-stufe:nth-child(3){margin-top:56px}
  .zk-stufe:nth-child(2){margin-top:0}
  .zk-beispiel-liste{grid-template-columns:minmax(0,1fr)}
  .zk-sicher-punkte{grid-template-columns:minmax(0,1fr);gap:24px}
  .zk-band-zeile{font-size:72px}
  .zk-dunkel::after{display:none}
}
@media screen and (max-width:767px){
  .zk-abschnitt{padding:60px 0}
  .zk-titel{font-size:32px}
  .zk-text{font-size:16px}
  .zk-rechner{grid-template-columns:minmax(0,1fr);gap:16px}
  .zk-rechner-box,.zk-sicher-box{padding:40px 24px}
  .zk-rechner-beispiel{font-size:20px}
  .zk-ergebnis-zahl{font-size:44px}
  .zk-treppe{position:relative;grid-template-columns:minmax(0,1fr);gap:16px;padding-left:24px}
  .zk-treppe::before{content:"";position:absolute;top:30px;bottom:30px;left:0;width:3px;border-radius:3px;background:linear-gradient(var(--secondary-color),var(--primary-color))}
  .zk-stufe:nth-child(n){margin-top:0}
  .zk-beispiel{padding:28px 24px}
  .zk-beispiel-titel{font-size:20px}
  .zk-zeilen>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .zk-band{padding:16px 0 60px}
  .zk-band-zeile{font-size:52px}
  .zk-band-zeile.zk-kontur{-webkit-text-stroke-width:3px}
}
/* H1: „AUTOMATISIERUNG“ ist in Großbuchstaben breiter als ein 320-px-Handy (Webflow: 32 px) */
@media screen and (max-width:359px){
  .service-details-heading{font-size:28px}
}
@media screen and (max-width:479px){
  .zk-pill{padding:6px 18px;font-size:12px}
  .zk-titel{font-size:28px}
  .zk-stufe{padding:24px 20px 28px}
  .zk-stufe-nr{width:48px;height:48px;font-size:20px}
  .zk-knopf{font-size:13px}
  .zk-band-zeile{font-size:40px}
}

/* Animationen nur mit Skript und ohne „Bewegung reduzieren“ */
@media (prefers-reduced-motion:no-preference){
  html.zk-bereit .zk-einblenden:not(.zk-sichtbar){opacity:0;transform:translateY(48px)}
  html.zk-bereit .zk-treppe:not(.zk-los) .zk-stufe-linie{transform:scaleX(0)}
  .zk-dunkel::after{content:"";position:absolute;top:-80px;left:25%;z-index:-1;width:3px;height:80px;margin-left:-1px;border-radius:3px;background:linear-gradient(transparent,var(--primary-color));animation:zk-strich 7s linear infinite}
  @keyframes zk-strich{to{transform:translateY(1400px)}}
}
@media (prefers-reduced-motion:reduce){
  .zk-band-zeile,.zk-band-zeile.zk-kontur{transform:none}
}