/* Startseite (SEO-Paket 2026-10, docs/seo-2026-10/01): die neuen Blöcke Referenzen, So arbeiten wir, Aus der Region,
   Häufige Fragen und Abschluss. Präfix zs-. Aussehen wie die übrigen neuen Abschnitte der Seite (Pill + Versal-Überschrift
   wie /online-marketing, Kacheln wie /webdesign-entwicklung, FAQ wie das Webflow-Akkordeon). Der Hero ist wie vorher,
   nur steht die H1 an der Stelle des früheren Satzes (Tim, 08.10.). */

/* Webflows Hover-Füllung ist eine feste 400-px-Form: Knöpfe nie breiter als ihr Text */
.zs-knopf-zeile .large-button{display:inline-flex}

/* Webflow macht den Hero bei ≤ 479 px fest 100vh hoch. Auf kurzen Handys (320 × 568) passen Schriftzug, sechs Leistungen und
   H1 nicht hinein: dann wächst er mit, sonst bleibt er 100vh wie bisher */
@media screen and (max-width:479px){.hero-wrapper{height:auto;min-height:100vh}}

/* „Inhaber“ ist kürzer als „Geschäftsführer“: links unter dem Namen halten (Webflow zentriert die Zeile ab Desktop) */
.client-designation .body-text-default-medium{align-items:flex-start}

/* Abschnitte */
.zs-abschnitt{padding:120px 0}
.zs-abschnitt+.zs-abschnitt{padding-top:0}
.zs-pill{display:inline-flex;align-items:center;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}
.zs-titel{margin:0;color:var(--text-color-01);font-size:48px;font-weight:600;line-height:1.2em;text-transform:uppercase;text-wrap:balance}
.zs-kopf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 80px;align-items:end;margin-bottom:56px}
.zs-kopf p{margin:0;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.zs-knopf-zeile{display:flex;justify-content:center;margin-top:56px}

/* Referenz-Kacheln wie das Laufband auf /webdesign-entwicklung */
.zs-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.zs-kachel-link{display:block;height:100%;overflow:hidden;border-radius:16px;background:var(--text-color-01);color:var(--white-color);text-decoration:none;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.zs-kachel-leiste{display:flex;gap:6px;padding:12px 14px}
.zs-kachel-leiste span{width:9px;height:9px;border-radius:50%;background:#ffffff38;transition:background .4s}
.zs-kachel-bild{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#1b1b24}
.zs-kachel-text{display:flex;flex-direction:column;gap:2px;padding:16px 18px 18px}
.zs-kachel-name{font-size:18px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.zs-kachel-info{color:#b5b5bd;font-size:14px;line-height:1.4em}
.zs-kachel-link:focus-visible{outline:2px solid var(--primary-color);outline-offset:4px}
.zigla-maus .zs-kachel-link:hover{transform:translateY(-8px);box-shadow:0 24px 44px #c00bf72e}
.zigla-maus .zs-kachel-link:hover .zs-kachel-leiste span{background:var(--primary-color)}
.zigla-maus .zs-kachel-link:hover .zs-kachel-leiste span:nth-child(2){transition-delay:.08s}
.zigla-maus .zs-kachel-link:hover .zs-kachel-leiste span:nth-child(3){transition-delay:.16s}

/* So arbeiten wir: drei Karten, Kopf weiß mit Nummer, Inhalt grau (wie die Karten auf /webdesign-entwicklung) */
.zs-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.zs-schritt{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--background-color-01);box-shadow:0 5px 32px #0000001a}
.zs-schritt-kopf{display:flex;align-items:center;height:100px;padding:0 24px;background:var(--white-color)}
.zs-schritt-nr{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--background-color-01);color:var(--text-color-01);font-size:24px;font-weight:600;line-height:1}
.zs-schritt-inhalt{flex:1;padding:24px 24px 32px}
.zs-schritt-titel{margin:0 0 12px;color:var(--text-color-01);font-size:20px;font-weight:600;line-height:1.35em;text-transform:uppercase}
.zs-schritt p{margin:0;color:var(--text-color-02);font-size:16px;font-weight:500;line-height:1.5em}

/* Aus der Region (wie der Regionalteil auf /online-marketing) */
.zs-region-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;padding-top:64px;border-top:1px solid var(--background-color-02)}
.zs-region .zs-titel{color:var(--text-color-02)}
.zs-region-text p{margin:0 0 24px;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.zs-weiter{display:flex;flex-wrap:wrap;gap:12px 32px;margin:8px 0 0;padding:0;list-style:none}
.zs-weiter a{display:inline-flex;align-items:center;gap:10px;color:var(--text-color-01);font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;text-transform:uppercase}
.zs-weiter a::after{content:"";width:8px;height:8px;border-top:2px solid var(--primary-color);border-right:2px solid var(--primary-color);transform:rotate(45deg);transition:transform .3s}
.zigla-maus .zs-weiter a:hover{color:var(--primary-color)}
.zigla-maus .zs-weiter a:hover::after{transform:translateX(4px) rotate(45deg)}
.zs-region-text a:not(.zs-weiter a),.zs-antwort a,.zs-abschluss-text a{color:inherit;text-decoration:underline;text-decoration-color:var(--primary-color);text-decoration-thickness:2px;text-underline-offset:3px}

/* Häufige Fragen: Aussehen des Webflow-Akkordeons (/online-marketing), als <details> ohne IX2 */
.zs-faq-inhalt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 80px;align-items:start}
.zs-faq-bild{width:100%;max-width:420px;height:auto;margin:0 auto}
.zs-faq-liste{display:grid;gap:20px;margin-top:40px}
.zs-frage{background:var(--background-color-01);interpolate-size:allow-keywords}
.zs-frage-kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;cursor:pointer;list-style:none}
.zs-frage-kopf::-webkit-details-marker{display:none}
.zs-frage-kopf:focus-visible{outline:2px solid var(--primary-color);outline-offset:4px}
.zs-frage-titel{margin:0;color:var(--text-color-01);font-size:16px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zs-frage-pfeil{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--text-color-02);border-radius:50%;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .4s,border-color .4s}
.zs-frage-pfeil::before{content:"";position:absolute;top:9px;left:11px;width:8px;height:8px;border-right:1.6px solid var(--text-color-02);border-bottom:1.6px solid var(--text-color-02);transform:rotate(45deg);transition:border-color .4s}
.zs-frage[open] .zs-frage-pfeil{transform:rotate(180deg);border-color:var(--primary-color);background:var(--primary-color)}
.zs-frage[open] .zs-frage-pfeil::before{border-color:var(--white-color)}
.zigla-maus .zs-frage-kopf:hover .zs-frage-pfeil{border-color:var(--primary-color)}
.zs-antwort{max-width:90%;padding:0 24px 24px;color:var(--text-color-01);font-size:16px;font-weight:400;line-height:1.5em}
.zs-frage::details-content{height:0;overflow:clip;transition:height .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete}
.zs-frage[open]::details-content{height:auto}

/* Abschluss: dunkle Box mit feinen Linien wie im Footer (wie der Abschluss auf /webdesign-entwicklung) */
.zs-abschluss{position:relative;isolation:isolate;overflow:hidden;padding:80px;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)}
.zs-abschluss::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)}
.zs-abschluss-inhalt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 80px;align-items:end}
.zs-abschluss .zs-titel{color:var(--white-color)}
.zs-abschluss-text{margin:24px 0 0;color:#b5b5bd;font-size:18px;font-weight:500;line-height:1.6em}
.zs-abschluss-aktion{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.zs-abschluss-aktion .large-button{display:inline-flex}
.zs-telefon{color:#d6d6de;font-size:16px;font-weight:500}
.zs-telefon a{color:var(--white-color);font-weight:600;text-decoration:underline;text-decoration-color:var(--primary-color);text-decoration-thickness:2px;text-underline-offset:3px}

/* Zähler: Ziffern sind Deko (aria-hidden), der Klartext steht vorlesbar daneben */
.zigla-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:no-preference){
  html.w-mod-js .zs-einblenden:not(.zs-sichtbar){opacity:0;transform:translateY(40px)}
  .zs-einblenden{transition:opacity .7s ease,transform .9s cubic-bezier(.25,1,.5,1)}
  html.w-mod-js:not(.zs-bereit) .zs-einblenden{animation:zs-notfall 0s 3s forwards}
}
@keyframes zs-notfall{to{opacity:1;transform:none}}

@media screen and (max-width:991px){
  .zs-abschnitt{padding:80px 0}
  .zs-titel{font-size:40px}
  .zs-kopf,.zs-region-inhalt,.zs-faq-inhalt,.zs-abschluss-inhalt{grid-template-columns:minmax(0,1fr);gap:24px}
  .zs-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zs-schritte{grid-template-columns:minmax(0,1fr)}
  .zs-faq-bild{max-width:260px}
  .zs-abschluss{padding:56px 40px}
}
@media screen and (max-width:767px){
  .zs-abschnitt{padding:60px 0}
  .zs-titel{font-size:30px}
  .zs-kopf{margin-bottom:40px}
  .zs-kopf p,.zs-region-text p,.zs-abschluss-text{font-size:16px}
  .zs-kacheln{grid-template-columns:minmax(0,1fr);gap:16px}
  .zs-schritt-kopf{height:76px;padding:0 20px}
  .zs-schritt-nr{width:48px;height:48px;font-size:20px}
  .zs-schritt-inhalt{padding:20px 20px 24px}
  .zs-schritt-titel{font-size:18px}
  .zs-frage-kopf{padding:20px}
  .zs-antwort{max-width:none;padding:0 20px 20px}
  .zs-abschluss{padding:40px 24px}
  .zs-faq-bild{max-width:200px}
}
@media screen and (max-width:479px){
  .zs-pill{padding:6px 18px;font-size:12px}
}