/* Über uns: neue Abschnitte (Hero-Text, Wer wir sind, Leistungen, Netzwerk, Referenzen, Werkzeuge, Gründer, Termin, Fragen). Farben und Schrift aus der Webflow-CSS. */
.zu-abschnitt{padding:120px 0}
.zu-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}
.zu-titel{margin:0;color:var(--text-color-01);font-size:48px;font-weight:600;line-height:1.2em;text-transform:uppercase;text-wrap:balance}
.zu-grau{color:var(--text-color-02)}
.zu-text{margin:0 0 20px;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.zu-text:last-child{margin-bottom:0}
.zu-text a,.zu-antwort a,.zu-netz-frage 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 .zu-text a:hover,.zigla-maus .zu-antwort a:hover,.zigla-maus .zu-netz-frage a:hover{color:var(--primary-color)}
.zu-kopf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px 80px;align-items:end;margin-bottom:64px}
.zu-kopf-rechts{display:flex;flex-direction:column;align-items:flex-start;gap:32px}

/* Knöpfe: weiß mit lila Pfeilkreis (wie „Let’s talk“) und lila gefüllt, beim Hover läuft Schwarz von unten hinein */
.zu-knoepfe{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.zu-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}
.zu-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)}
.zu-knopf-pfeil svg{width:16px;height:16px}
.zigla-maus .zu-knopf:hover{border-color:var(--primary-color);box-shadow:0 10px 30px #c00bf726}
.zigla-maus .zu-knopf:hover .zu-knopf-pfeil{transform:rotate(-45deg)}
.zu-knopf-voll{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;overflow:hidden;border-radius:100px;background:var(--primary-color);color:var(--text-color-01);font-size:16px;font-weight:600;line-height:1.5em;text-transform:uppercase;text-decoration:none;transition:color .4s}
.zu-knopf-voll::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--text-color-01);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zigla-maus .zu-knopf-voll:hover{color:var(--white-color)}
.zigla-maus .zu-knopf-voll:hover::before{transform:none}
.zu-knopf:focus-visible,.zu-knopf-voll:focus-visible,.zu-kachel-link:focus-visible,.zu-frage-kopf:focus-visible,.zu-pause:focus-visible{outline:2px solid var(--primary-color);outline-offset:4px}
/* Karten schneiden mit overflow:hidden alles außen ab: dort liegt der Fokusrahmen innen */
.zu-karte-link:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px;border-radius:20px}

/* Dunkle Box (Netzwerk) mit feinen Linien wie im Footer */
.zu-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)}
.zu-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)}
.zu-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:zu-strich 7s linear infinite}
@keyframes zu-strich{to{transform:translateY(1400px)}}
.zu-dunkel .zu-pill{border-color:#ffffff33;color:var(--white-color)}
.zu-dunkel .zu-titel{color:var(--white-color)}
.zu-dunkel .zu-grau{color:#8e8e96}
.zu-dunkel .zu-text{color:#b5b5bd}

/* Hero: Kurztext und Knöpfe neben der H1, blendet ab dem ersten Bild ein (ohne auf Skripte zu warten) */
.inner-hero-content{gap:40px 64px}
.zu-hero-rechts{max-width:540px}
.zu-hero-text{margin:0 0 32px;color:var(--text-color-01);font-size:20px;font-weight:500;line-height:1.55em}
@keyframes zu-rein{from{opacity:.01;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}

/* Wer wir sind: Text oben bündig, Häkchenliste */
.experience-top-content{align-items:flex-start}
.experience-title-block .zu-pill{margin-bottom:20px}
.zu-haken{display:grid;gap:14px;margin:28px 0 0;padding:0;list-style:none}
.zu-haken li{position:relative;padding-left:40px;color:var(--text-color-01);font-size:17px;font-weight:500;line-height:1.5em}
.zu-haken li::before{content:"";position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;background:#f3e1fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8 6.1-6.4' fill='none' stroke='%23c00bf7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* Leistungs-Karten: Kopf weiß mit Nummer, Inhalt grau (wie auf /webdesign-entwicklung) */
.zu-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.zu-karte{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--background-color-01);box-shadow:0 5px 32px #0000001a;transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .6s,opacity .9s}
.zu-karte::before{content:"";position:absolute;inset:0 0 auto;z-index:2;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.zu-karte::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--zu-x,50%) var(--zu-y,0),#c00bf71a,transparent 45%);opacity:0;transition:opacity .5s}
.zu-karte-link{display:flex;flex:1;flex-direction:column;color:inherit;text-decoration:none}
.zu-karte-kopf{display:flex;align-items:center;justify-content:space-between;height:96px;padding:0 24px;background:var(--white-color)}
.zu-karte-nr{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--background-color-01);color:var(--text-color-01);font-size:22px;font-weight:600;line-height:1;transition:background .5s,color .5s}
.zu-karte-pfeil{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--background-color-02);border-radius:50%;color:var(--text-color-01);transition:transform .5s cubic-bezier(.2,.8,.2,1),background .5s,color .5s,border-color .5s}
.zu-karte-pfeil svg{width:16px;height:16px}
.zu-karte-inhalt{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;padding:24px 24px 28px}
.zu-karte-titel{margin:0 0 12px;color:var(--text-color-01);font-size:20px;font-weight:600;line-height:1.35em;text-transform:uppercase}
.zu-karte-text{color:var(--text-color-02);font-size:16px;font-weight:500;line-height:1.5em}
.zu-karte-mehr{margin-top:auto;padding-top:20px;color:var(--text-color-01);font-size:14px;font-weight:600;text-transform:uppercase}
.zigla-maus .zu-karte:hover{transform:translateY(-8px);box-shadow:0 24px 48px #5510ff1f}
.zigla-maus .zu-karte:hover::before{transform:scaleX(1)}
.zigla-maus .zu-karte:hover::after{opacity:1}
.zigla-maus .zu-karte:hover .zu-karte-nr{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:var(--white-color)}
.zigla-maus .zu-karte:hover .zu-karte-pfeil{transform:rotate(-45deg);background:var(--primary-color);border-color:var(--primary-color);color:var(--white-color)}

/* Netzwerk: Text links, Grafik rechts. Grafik von oben nach unten: Du → ZIGLA → im Haus | mit Partnern */
.zu-netz-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px 80px;align-items:center;padding:80px}
/* „ANSPRECHPARTNER.“ ist ein langes Versal-Wort: Schrift wächst mit der Breite, damit es nie aus der Spalte ragt */
.zu-netz-box .zu-titel{margin-bottom:28px}
.zu-netz-frage{margin:28px 0 0;padding-top:24px;border-top:1px solid #ffffff1f;color:var(--white-color);font-size:16px;font-weight:500;line-height:1.5em}
.zu-netz-frage a{color:var(--white-color)}
.zu-netz{--zu-linie:#ffffff2e;--zu-spalt:20px;display:flex;flex-direction:column;align-items:center;margin:0}
.zu-netz-knoten{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.zu-netz-du{width:76px;height:76px;border-radius:50%;background:var(--white-color);color:var(--text-color-01);font-size:18px;font-weight:600;text-transform:uppercase;box-shadow:0 0 0 8px #ffffff0f}
.zu-netz-zigla{gap:14px;padding:14px 26px 14px 14px;border:1px solid #ffffff2e;border-radius:20px;background:#16161f;box-shadow:0 0 60px #c00bf740;text-align:left;transition-delay:.45s}
.zu-netz-logo{flex:none;width:44px;height:44px}
.zu-netz-name{display:block;font-size:20px;font-weight:600;line-height:1.2em;text-transform:uppercase}
.zu-netz-rolle{display:block;margin-top:2px;color:#b5b5bd;font-size:13px;font-weight:500;line-height:1.4em}
.zu-netz-linie,.zu-netz-gabel{position:relative;flex:none}
.zu-netz-linie{width:2px;height:56px;background:var(--zu-linie)}
.zu-netz-gabel{width:calc(50% + var(--zu-spalt) / 2);height:56px}
.zu-netz-gabel::before,.zu-netz-gabel .zu-netz-licht::before{content:"";position:absolute;top:0;left:calc(50% - 1px);width:2px;height:28px;background:var(--zu-linie)}
.zu-netz-gabel::after,.zu-netz-gabel .zu-netz-licht::after{content:"";position:absolute;inset:26px 0 0;border:2px solid var(--zu-linie);border-bottom:0;border-radius:16px 16px 0 0}
.zu-netz-licht{position:absolute;inset:0;transition:clip-path .6s cubic-bezier(.65,0,.35,1)}
.zu-netz-linie .zu-netz-licht{background:linear-gradient(var(--primary-color),var(--secondary-color));transition-delay:.2s}
.zu-netz-gabel .zu-netz-licht{transition-delay:.75s}
.zu-netz-gabel .zu-netz-licht::before{background:var(--primary-color)}
.zu-netz-gabel .zu-netz-licht::after{border-color:var(--primary-color)}
.zu-netz-linie::after{content:"";position:absolute;top:0;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--white-color);box-shadow:0 0 12px 3px var(--primary-color);opacity:0}
.zu-netz-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--zu-spalt);width:100%}
.zu-netz-gruppe{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 16px;border:1px solid #ffffff1f;border-radius:16px;background:#ffffff08;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:1.05s}
.zu-netz-partner{border-style:dashed;border-color:#c00bf766}
.zu-netz-label{color:#b5b5bd;font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1.4em;text-transform:uppercase}
.zu-netz-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.zu-chip{padding:6px 12px;border:1px solid #ffffff2e;border-radius:100px;background:#ffffff0a;color:var(--white-color);font-size:13px;font-weight:500;line-height:1.4em;white-space:nowrap;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:1.25s}
.zu-chip:nth-child(2){transition-delay:1.31s}
.zu-chip:nth-child(3){transition-delay:1.37s}
.zu-chip:nth-child(4){transition-delay:1.43s}
.zu-chip:nth-child(5){transition-delay:1.49s}
.zu-chip:nth-child(6){transition-delay:1.55s}
.zu-netz-partner .zu-chip{border-color:#c00bf780;background:#c00bf71a}
.zu-netz-partner .zu-chip.zu-chip-offen{border-style:dashed;border-color:#ffffff40;background:transparent;color:#b5b5bd}
.zu-netz-hinweis{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;color:#b5b5bd;font-size:12px;font-weight:500;line-height:1.4em}
.zu-netz-hinweis::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:#c00bf733 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8 6.1-6.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
@keyframes zu-punkt{0%{opacity:0;transform:translateY(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(46px)}}

/* Referenzen-Laufband: endlos, stoppt bei Maus oder Tastatur (wie auf /webdesign-entwicklung) */
.zu-referenzen{overflow-x:clip}
.zu-laufband{padding:8px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.zu-laufband-spur{display:flex;width:max-content;animation:zu-lauf 80s linear infinite}
.zigla-maus .zu-laufband:hover .zu-laufband-spur{animation-play-state:paused}
/* Tastatur im Laufband: Band wird zur scrollbaren Reihe (wie bei reduzierter Bewegung), damit die fokussierte Kachel sichtbar bleibt */
.zu-laufband:has(.zu-kachel-link:focus-visible){overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.zu-laufband:has(.zu-kachel-link:focus-visible) .zu-laufband-spur{animation:none;padding:0 20px}
.zu-laufband:has(.zu-kachel-link:focus-visible) .zu-laufband-liste[aria-hidden]{display:none}
@keyframes zu-lauf{to{transform:translateX(-50%)}}
.zu-laufband-liste{display:flex;gap:24px;margin:0;padding:0 24px 0 0;list-style:none}
.zu-kachel{flex:none;width:380px}
.zu-kachel-link{scroll-margin-inline:24px}
.zu-kachel-link{display:block;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}
.zu-kachel-leiste{display:flex;gap:6px;padding:12px 14px}
.zu-kachel-leiste span{width:9px;height:9px;border-radius:50%;background:#ffffff38;transition:background .4s}
.zu-kachel-bild{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#1b1b24}
.zu-kachel-text{display:flex;flex-direction:column;gap:2px;padding:16px 18px 18px}
.zu-kachel-name{font-size:18px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.zu-kachel-info{color:#b5b5bd;font-size:14px;line-height:1.4em}
.zigla-maus .zu-kachel-link:hover{transform:translateY(-8px);box-shadow:0 24px 44px #c00bf72e}
.zigla-maus .zu-kachel-link:hover .zu-kachel-leiste span{background:var(--primary-color)}
.zigla-maus .zu-kachel-link:hover .zu-kachel-leiste span:nth-child(2){transition-delay:.08s}
.zigla-maus .zu-kachel-link:hover .zu-kachel-leiste span:nth-child(3){transition-delay:.16s}

/* Werkzeuge: große Webflow-Überschrift, kurzer Text, Logo-Band in zwei gegenläufigen Reihen (Symbole grau, beim Hover lila) */
.zu-werkzeuge{overflow-x:clip}
.zu-werkzeuge .zu-werkzeuge-text{max-width:760px;margin:16px auto 56px;text-align:center}
.zu-sprite{position:absolute;width:0;height:0;overflow:hidden}
.zu-logoband{display:grid;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.zu-logoband-zeile{overflow:hidden;padding:6px 0}
.zu-logoband-spur{display:flex;width:max-content;animation:zu-lauf-logos var(--zu-dauer,44s) linear infinite}
.zu-rueckwaerts .zu-logoband-spur{animation-direction:reverse}
.zigla-maus .zu-logoband-zeile:hover .zu-logoband-spur{animation-play-state:paused}
@keyframes zu-lauf-logos{to{transform:translateX(-25%)}}
.zu-logoband-liste{display:flex;gap:16px;margin:0;padding:0 16px 0 0;list-style:none}
.zu-logo{display:flex;flex:none;align-items:center;gap:14px;padding:12px 24px 12px 12px;border:1px solid var(--background-color-02);border-radius:16px;background:var(--white-color);transition:border-color .4s,box-shadow .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.zu-logo-bild{flex:none;width:48px;height:48px;padding:12px;border-radius:12px;background:var(--background-color-01);color:var(--text-color-02);fill:currentColor;transition:color .4s,background .4s}
.zu-logo-name{display:block;color:var(--text-color-01);font-size:16px;font-weight:600;line-height:1.3em;white-space:nowrap}
.zu-logo-bereich{display:block;color:var(--text-color-02);font-size:13px;font-weight:500;line-height:1.4em;white-space:nowrap}
.zigla-maus .zu-logo:hover{border-color:var(--primary-color);box-shadow:0 12px 30px #c00bf71f;transform:translateY(-4px)}
.zigla-maus .zu-logo:hover .zu-logo-bild{background:#f3e1fe;color:var(--primary-color)}

/* Gründer: Porträt mit Ortsmarke, Zitat, zwei Sätze, Termin-Knopf */
.zu-gruender-inhalt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px 96px;align-items:center}
.zu-gruender-bild{position:relative;width:100%;max-width:460px;overflow:hidden;border-radius:24px;box-shadow:0 30px 60px #5510ff26}
.zu-gruender-bild img{display:block;width:100%;height:auto;aspect-ratio:1}
.zu-gruender-ort{position:absolute;bottom:20px;left:20px;padding:8px 16px;border-radius:100px;background:#01010bcc;color:var(--white-color);font-size:13px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zu-zitat{margin:0 0 24px;padding:0;border:0}
.zu-zitat p{margin:0;color:var(--text-color-01);font-size:44px;font-weight:600;line-height:1.2em;text-transform:uppercase;text-wrap:balance}
.zu-gruender-name{margin:28px 0 32px;padding-top:24px;border-top:1px solid var(--background-color-02);color:var(--text-color-01);font-size:18px;font-weight:600;line-height:1.4em;text-transform:uppercase}
.zu-gruender-name span{display:block;margin-top:4px;color:var(--text-color-02);font-size:15px;font-weight:500;text-transform:none}

/* Termin: Text links, Karte von /kontakt rechts */
.zu-termin-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px 80px;align-items:start}
.zu-termin-inhalt .termin{scroll-margin-top:110px}
.zu-termin-text .zu-titel{margin-bottom:28px}
.zu-liste-titel{margin:32px 0 16px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zu-gespraech{display:grid;gap:18px;margin:0 0 32px;padding:0;list-style:none;counter-reset:zu-gespraech}
.zu-gespraech li{position:relative;padding-left:54px;color:var(--text-color-01);font-size:17px;font-weight:500;line-height:1.55em;counter-increment:zu-gespraech}
.zu-gespraech li::before{content:counter(zu-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(--primary-color);font-size:15px;font-weight:600}
.zu-anruf{font-size:16px}

/* Häufige Fragen: details/summary im Stil der Webflow-FAQ, sanftes Aufklappen wo der Browser es kann */
.zu-faq-inhalt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 80px;align-items:start}
.zu-faq-kopf .zu-titel{margin-bottom:24px}
.zu-faq-liste{display:grid;gap:16px}
.zu-frage{border-radius:16px;background:var(--background-color-01)}
.zu-frage-kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;cursor:pointer;list-style:none}
.zu-frage-kopf::-webkit-details-marker{display:none}
.zu-frage-titel{margin:0;color:var(--text-color-01);font-size:16px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.zu-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}
.zu-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}
.zu-frage[open] .zu-frage-pfeil{transform:rotate(180deg);border-color:var(--primary-color);background:var(--primary-color)}
.zu-frage[open] .zu-frage-pfeil::before{border-color:var(--white-color)}
.zigla-maus .zu-frage-kopf:hover .zu-frage-pfeil{border-color:var(--primary-color)}
.zu-antwort{padding:0 24px 24px;color:var(--text-color-02);font-size:16px;font-weight:500;line-height:1.6em}
.zu-antwort p{max-width:680px;margin:0}

/* Pause-Knopf unter beiden Bändern (WCAG 2.2.2): hält Laufband, Logo-Band und die Netzwerk-Animation an */
.zu-pause-zeile{display:flex;justify-content:flex-end}
.zu-pause{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;border:1px solid var(--background-color-02);border-radius:100px;background:var(--white-color);color:var(--text-color-02);font:inherit;font-size:13px;font-weight:600;line-height:1.4em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}
.zu-pause[hidden]{display:none}
.zu-pause::before{content:"";flex:none;width:10px;height:10px;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
html.zu-still .zu-pause::before{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.zigla-maus .zu-pause:hover{border-color:var(--primary-color);color:var(--text-color-01)}
.zu-werkzeuge .zu-pause-zeile{margin-top:24px}
html.zu-still .zu-laufband{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html.zu-still .zu-laufband-spur{animation:none;padding:0 20px}
html.zu-still .zu-laufband-liste[aria-hidden]{display:none}
html.zu-still .zu-logoband{-webkit-mask-image:none;mask-image:none}
html.zu-still .zu-logoband-spur{width:auto;animation:none}
html.zu-still .zu-logoband-liste{flex-wrap:wrap;justify-content:center;padding:0 20px}
html.zu-still .zu-logoband-liste[aria-hidden]{display:none}
html.zu-still .zu-netz.zu-los .zu-netz-linie::after,html.zu-still .zu-dunkel::after{animation:none}

/* ==== Breakpoints ==== */
/* Unter 1280 px wird die Grafik-Spalte zu schmal für die Chips: Text und Grafik untereinander */
@media screen and (max-width:1279px){
  .zu-netz-box{grid-template-columns:minmax(0,1fr);padding:72px 64px}
  .zu-netz-text{max-width:760px}
}
@media screen and (max-width:991px){
  .zu-abschnitt{padding:80px 0}
  .zu-titel{font-size:40px}
  .zu-kopf{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:48px}
  .zu-dunkel::after{display:none}
  .inner-hero-content{flex-direction:column;align-items:flex-start}
  .zu-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zu-netz-box{grid-template-columns:minmax(0,1fr);padding:56px 40px}
  .zu-gruender-inhalt,.zu-termin-inhalt,.zu-faq-inhalt{grid-template-columns:minmax(0,1fr)}
  .zu-zitat p{font-size:36px}
}
@media screen and (max-width:767px){
  .zu-abschnitt{padding:60px 0}
  .zu-titel{font-size:32px}
  .zu-text{font-size:16px}
  .inner-hero-content{align-items:center}
  .zu-hero-rechts{text-align:center}
  .zu-hero-text{font-size:17px}
  .zu-knoepfe{justify-content:center}
  .zu-haken li{font-size:16px}
  .zu-netz-box{padding:40px 24px}
  .zu-netz-box .zu-titel{font-size:clamp(22px,6.9vw,32px)}
  .zu-netz-gruppen{grid-template-columns:minmax(0,1fr);gap:40px}
  .zu-netz-gabel{width:2px;height:40px;background:var(--zu-linie)}
  .zu-netz-gabel::before,.zu-netz-gabel::after,.zu-netz-gabel .zu-netz-licht::before,.zu-netz-gabel .zu-netz-licht::after{display:none}
  .zu-netz-gabel .zu-netz-licht{background:var(--primary-color)}
  .zu-netz-gruppe+.zu-netz-gruppe::before{content:"";position:absolute;top:-41px;left:calc(50% - 1px);width:2px;height:40px;background:var(--primary-color)}
  .zu-kachel{width:290px}
  .zu-werkzeuge .zu-werkzeuge-text{margin-bottom:40px}
  .zu-logo{padding:10px 18px 10px 10px}
  .zu-logo-bild{width:40px;height:40px;padding:10px}
  .zu-zitat p{font-size:28px}
  .zu-gespraech li{font-size:16px}
}
@media screen and (max-width:479px){
  .zu-pill{padding:6px 18px;font-size:12px}
  .zu-knoepfe{flex-direction:column;align-items:stretch}
  .zu-knoepfe .zu-knopf,.zu-knoepfe .zu-knopf-voll{justify-content:center}
  .zu-karten{grid-template-columns:minmax(0,1fr);gap:16px}
  .zu-karte-kopf{height:76px;padding:0 20px}
  .zu-karte-nr{width:48px;height:48px;font-size:20px}
  .zu-karte-inhalt{padding:20px 20px 24px}
  .zu-karte-titel{font-size:18px}
  .zu-chip{white-space:normal}
  .zu-netz-box{padding:36px 20px}
  .zu-frage-kopf{padding:20px}
  .zu-antwort{padding:0 20px 20px}
}

/* ==== Bewegung: Startzustände nur, wenn Bewegung erlaubt ist; ohne Skript nach 3 s sichtbar ==== */
@media (prefers-reduced-motion:no-preference){
  .zu-hero-rechts{animation:zu-rein 1s cubic-bezier(.25,1,.5,1) .15s both}
  .zu-einblenden:not(.zu-karte){transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
  html.w-mod-js .zu-einblenden:not(.zu-sichtbar){opacity:0;transform:translateY(48px)}
  html.w-mod-js .zu-netz:not(.zu-los) .zu-netz-knoten,html.w-mod-js .zu-netz:not(.zu-los) .zu-netz-gruppe{opacity:0;transform:translateY(16px) scale(.96)}
  html.w-mod-js .zu-netz:not(.zu-los) .zu-chip{opacity:0;transform:translateY(8px)}
  html.w-mod-js .zu-netz:not(.zu-los) .zu-netz-licht{clip-path:inset(0 0 100% 0)}
  .zu-netz.zu-los .zu-netz-linie::after{animation:zu-punkt 2.6s 1.6s ease-in-out infinite}
  @supports (interpolate-size:allow-keywords){
    .zu-frage{interpolate-size:allow-keywords}
    .zu-frage::details-content{height:0;overflow:clip;transition:height .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete}
    .zu-frage[open]::details-content{height:auto}
  }
  html.w-mod-js:not(.zu-bereit) .zu-einblenden,html.w-mod-js:not(.zu-bereit) .zu-netz :is(.zu-netz-knoten,.zu-netz-gruppe,.zu-chip,.zu-netz-licht){animation:zu-notfall 0s 3s forwards}
}
@keyframes zu-notfall{to{opacity:1;transform:none;clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){
  .zu-dunkel::after{animation:none}
  .zu-karte,.zu-karte::before{transition:none}
  .zu-laufband{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .zu-laufband-spur{animation:none;padding:0 20px}
  .zu-laufband-liste[aria-hidden]{display:none}
  .zu-kachel-link{transition:none}
  .zu-logoband{-webkit-mask-image:none;mask-image:none}
  .zu-logoband-spur{width:auto;animation:none}
  .zu-logoband-liste{flex-wrap:wrap;justify-content:center;padding:0 20px}
  .zu-logoband-liste[aria-hidden]{display:none}
}