/* Nebra · gemeinsames Z-Muster mit Erklaer-Buehnen (05.10.2026)
   Genutzt von /pakete/ und /funktionen/. Huelle: Element mit Klasse .nz.
   Bilder: assets/img/pakete/thema-N.webp (Higgsfield Soul Location). */
/* Hallmark · macrostructure: Alternating Feature Rows (Z) · tone: premium/utilitarian · anchor hue: navy+gold
 * pre-emit critique: P5 H5 E4 S5 R4 V4 · keine Fake-Chrome (Gate 47): Buehnen zeigen nur Inhalt
 * Tokens lokal auf .nz, Werte aus der Seiten-CD (Roboto, Navy, Gold). */
.nz{
  --z-ink:#111A22; --z-navy:#183D6A; --z-gold:#C2A677; --z-gold-d:#A88A56; --z-mute:#5A6470;
  --z-line:rgba(17,26,34,.10); --z-glass:rgba(255,255,255,.92); --z-glass-k:rgba(255,255,255,.7);
  --z-green:#2E9E5B; --z-scrim:rgba(14,30,52,.38); --z-soft:#F5EEE0;
  --ease-out:cubic-bezier(.2,.7,.2,1); --z-loop:9s;
}
.nz .zz{display:flex;flex-direction:column}
.nz .zr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:64px;padding:56px 0;border-top:1px solid var(--z-line)}
.nz .zr--rev .zt{order:2}
.nz .zt h3{margin:0 0 12px;font-size:clamp(23px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.18;color:var(--z-ink);overflow-wrap:anywhere}
.nz .zt>p{margin:0 0 18px;font-size:16.5px;line-height:1.65;color:var(--z-mute);max-width:34em}
.nz .zt-pts{list-style:none;margin:0;padding:0}
.nz .zt-pts li{display:flex;gap:10px;padding:6px 0;font-size:15px;line-height:1.5;color:var(--z-ink)}
.nz .zt-pts svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--z-green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){
  .nz .zr{grid-template-columns:minmax(0,1fr);gap:24px;padding:40px 0}
  .nz .zr--rev .zt{order:0}
}

/* Buehne: Bild als Atmosphaere, Schleier, darueber der erklaerende Inhalt */
.nz .zs{position:relative;margin:0;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--z-navy) var(--zs-bild) center/cover no-repeat;box-shadow:0 30px 70px -40px rgba(14,30,52,.6)}
.nz .zs::before{content:"";position:absolute;inset:0;background:var(--z-scrim)}
.nz .zs-in{position:absolute;inset:0;display:grid;place-items:center;padding:7%}
.nz .zs-in>div{position:relative;width:100%;height:100%}
.nz .zk{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.nz .zs *{animation-play-state:paused}
.nz .zs.is-play *{animation-play-state:running}

/* 1 · KI waehlen: Auswahl springt durch die Modelle, bei "lokal" das Schloss */
.z1{display:flex;flex-direction:column;justify-content:center}
.z1-list{position:relative;z-index:1;list-style:none;margin:0;padding:0;width:min(300px,100%)}
.z1-list li{display:flex;justify-content:space-between;align-items:center;height:46px;margin-bottom:6px;padding:0 16px;border-radius:12px;background:var(--z-glass-k);font-size:15px;color:var(--z-ink)}
.z1-list span{font-size:12.5px;color:var(--z-mute)}
.z1-list li:last-child span{color:var(--z-green);font-weight:700}
.z1-list li.z1-sel{position:absolute;left:0;right:0;top:0;height:46px;margin:0;padding:0;border-radius:12px;border:2px solid var(--z-gold);background:rgba(194,166,119,.18);z-index:2;box-sizing:border-box;animation:z1sel var(--z-loop) var(--ease-out) infinite}
@keyframes z1sel{0%,18%{transform:translateY(0)}24%,42%{transform:translateY(52px)}48%,62%{transform:translateY(104px)}68%,96%{transform:translateY(156px)}100%{transform:translateY(0)}}
.z1-lock{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:12px;background:var(--z-ink);color:#fff;font-size:13.5px;font-weight:600;opacity:0;animation:z1lock var(--z-loop) var(--ease-out) infinite}
.z1-lock svg{width:16px;height:16px;fill:none;stroke:var(--z-gold);stroke-width:2.2;stroke-linecap:round}
@keyframes z1lock{0%,68%{opacity:0;transform:translateY(8px)}74%,94%{opacity:1;transform:none}100%{opacity:0}}
.z1-turbo{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:#fff}
.z1-turbo i{width:8px;height:8px;border-radius:50%;background:#34C759;animation:zpuls 1.8s ease-out infinite}
@keyframes zpuls{0%{box-shadow:0 0 0 0 rgba(52,199,89,.6)}100%{box-shadow:0 0 0 9px rgba(52,199,89,0)}}

/* 2 · Website pruefen: Abtasten, Fundstellen, Liste zum Auswaehlen */
.z2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:center}
.z2-page{container-type:size;position:relative;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:16px;border-radius:14px;background:var(--z-glass);overflow:hidden;aspect-ratio:3/4}
.z2-page .b{display:block;border-radius:5px;background:#E3E7EE}
.z2-page .b-h{width:100%;height:22%;background:#D8DEE8}
.z2-page .b-l{width:85%;height:7px}.z2-page .b-s{width:55%}
.z2-page .b-btn{width:38%;height:16px;background:var(--z-navy);opacity:.7}
.z2-page .b-c{width:calc(33.3% - 6px);height:22%;margin-top:6px}
.z2-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--z-gold);box-shadow:0 0 12px var(--z-gold);animation:z2scan var(--z-loop) linear infinite}
@keyframes z2scan{0%{transform:translateY(0);opacity:1}45%{transform:translateY(100cqh);opacity:1}50%,100%{opacity:0;transform:translateY(100cqh)}}
.z2-pin{position:absolute;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--z-ink);color:#fff;font-style:normal;font-size:11.5px;font-weight:700;transform:scale(0);animation:z2pin var(--z-loop) var(--ease-out) infinite}
.z2-pin.p1{left:62%;top:12%;animation-delay:.6s}.z2-pin.p2{left:46%;top:43%;animation-delay:1.6s}.z2-pin.p3{left:78%;top:70%;animation-delay:2.6s}
@keyframes z2pin{0%{transform:scale(0)}6%,80%{transform:scale(1)}88%,100%{transform:scale(0)}}
.z2-list{list-style:none;margin:0;padding:0}
.z2-list li{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:10px 12px;border-radius:11px;background:var(--z-glass);font-size:13px;line-height:1.3;color:var(--z-ink);opacity:0;animation:z2item var(--z-loop) var(--ease-out) infinite}
.z2-list li:nth-child(1){animation-delay:1.2s}.z2-list li:nth-child(2){animation-delay:2.2s}.z2-list li:nth-child(3){animation-delay:3.2s}
@keyframes z2item{0%{opacity:0;transform:translateX(10px)}6%,80%{opacity:1;transform:none}88%,100%{opacity:0}}
.z2-list i{flex:none;width:16px;height:16px;border-radius:5px;border:2px solid var(--z-ink);background:var(--z-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23fff' stroke-width='3.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat}
.z2-list li.aus{color:var(--z-mute)}
.z2-list li.aus i{background:transparent;border-color:#AAB2BD}

/* 3 · Team auf ein Ziel: Impulse laufen von den Agenten zum Ziel */
.z3-lines{position:absolute;inset:0;width:100%;height:100%}
.z3-lines path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-dasharray:4 6}
.z3-goal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:12px 16px;border-radius:14px;background:var(--z-ink);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 6px rgba(194,166,119,.35)}
.z3-ag{position:absolute;z-index:2;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--z-glass);transform:translate(-50%,-50%)}
.z3-ag b{font-size:12.5px;color:var(--z-ink)}
.z3{container-type:size}
.z3-ag.a1{left:15%;top:22%}.z3-ag.a2{left:85%;top:22%}.z3-ag.a3{left:15%;top:72%}.z3-ag.a4{left:85%;top:72%}
.z3-dot{position:absolute;z-index:1;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--z-gold);box-shadow:0 0 10px var(--z-gold);animation:z3go 3s var(--ease-out) infinite}
.z3-dot.d1{left:15%;top:22%;--sx:35cqw;--sy:28cqh}
.z3-dot.d2{left:85%;top:22%;--sx:-35cqw;--sy:28cqh;animation-delay:.75s}
.z3-dot.d3{left:15%;top:72%;--sx:35cqw;--sy:-22cqh;animation-delay:1.5s}
.z3-dot.d4{left:85%;top:72%;--sx:-35cqw;--sy:-22cqh;animation-delay:2.25s}
@keyframes z3go{0%{transform:translate(0,0);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translate(var(--sx),var(--sy));opacity:0}}
.z3-plan{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border-radius:999px;background:var(--z-glass);font-size:12.5px;font-weight:600;color:var(--z-ink);white-space:nowrap}
.z3-plan i{width:8px;height:8px;border-radius:50%;background:#34C759;animation:zpuls 1.8s ease-out infinite}

/* 4 · Reports: Seiten faechern auf, Balken wachsen */
.z4{display:grid;place-items:center}
.z4-pg{position:absolute;width:52%;aspect-ratio:3/4;border-radius:10px;background:#fff;box-shadow:0 18px 40px -18px rgba(14,30,52,.6)}
.z4-pg.g3{animation:z4fan3 var(--z-loop) var(--ease-out) infinite;opacity:.75}
.z4-pg.g2{animation:z4fan2 var(--z-loop) var(--ease-out) infinite;opacity:.88}
.z4-pg.g1{display:flex;flex-direction:column;gap:8px;padding:6% 7%;box-sizing:border-box}
@keyframes z4fan3{0%,8%{transform:none}22%,86%{transform:translateX(-26%) rotate(-8deg)}100%{transform:none}}
@keyframes z4fan2{0%,8%{transform:none}22%,86%{transform:translateX(26%) rotate(7deg)}100%{transform:none}}
.z4-logo{align-self:flex-start;margin:0;padding:3px 8px;border-radius:5px;background:var(--z-soft);font-size:10.5px;font-weight:700;color:var(--z-gold-d)}
.z4-t{margin:2px 0 6px;font-size:13px;font-weight:800;color:var(--z-ink)}
.z4-bar{display:block;height:12px;border-radius:4px;background:var(--z-navy);transform-origin:left;transform:scaleX(var(--w));animation:z4bar var(--z-loop) var(--ease-out) infinite}
@keyframes z4bar{0%,20%{transform:scaleX(.05)}34%,90%{transform:scaleX(var(--w))}100%{transform:scaleX(.05)}}
.z4-line{display:block;height:6px;margin-top:6px;border-radius:3px;background:#E3E7EE}.z4-line--s{width:62%;margin-top:0}
.z4-tag{position:absolute;left:0;bottom:0;margin:0;padding:7px 12px;border-radius:999px;background:var(--z-glass);font-size:12.5px;font-weight:600;color:var(--z-ink)}

/* 5 · Bedienung: Sprache wechselt, Update faehrt ein */
.z5{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.z5-toggle{position:relative;display:flex;padding:4px;border-radius:999px;background:var(--z-glass-k)}
.z5-toggle span{position:relative;z-index:1;width:46px;text-align:center;font-size:13px;font-weight:700;line-height:30px;color:var(--z-ink)}
.z5-toggle i{position:absolute;left:4px;top:4px;width:46px;height:30px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(14,30,52,.25);animation:z5knob var(--z-loop) var(--ease-out) infinite}
@keyframes z5knob{0%,40%{transform:none}46%,90%{transform:translateX(46px)}96%,100%{transform:none}}
.z5-labels{display:flex;flex-direction:column;gap:8px;width:min(280px,100%)}
.z5-labels p{position:relative;height:44px;margin:0;border-radius:12px;background:var(--z-glass);overflow:hidden}
.z5-labels span{position:absolute;inset:0;display:flex;align-items:center;padding:0 16px;font-size:14.5px;font-weight:600;color:var(--z-ink)}
.z5-labels .de{animation:z5de var(--z-loop) var(--ease-out) infinite}
.z5-labels .en{opacity:0;animation:z5en var(--z-loop) var(--ease-out) infinite}
@keyframes z5de{0%,40%{opacity:1;transform:none}46%,90%{opacity:0;transform:translateY(-10px)}96%,100%{opacity:1;transform:none}}
@keyframes z5en{0%,40%{opacity:0;transform:translateY(10px)}46%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
.z5-toast{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:12px;background:var(--z-ink);color:#fff;font-size:13px;font-weight:600;opacity:0;animation:z5toast var(--z-loop) var(--ease-out) infinite}
.z5-toast svg{width:15px;height:15px;fill:none;stroke:#34C759;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes z5toast{0%,60%{opacity:0;transform:translateY(12px)}66%,92%{opacity:1;transform:none}100%{opacity:0}}

/* In Arbeit: eine leise Zeile */
.nz .zz-bald{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--z-line)}
.nz .zz-bald h3{margin:0;font-size:17px;font-weight:800;color:var(--z-ink)}
.nz .zz-bald small{display:block;font-size:12.5px;font-weight:600;color:#7C8698}
.nz .zz-bald ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nz .zz-bald li{padding:7px 13px;border-radius:999px;border:1px dashed #AAB2BD;font-size:13.5px;color:var(--z-mute)}
@media(max-width:760px){.nz .zz-bald{grid-template-columns:minmax(0,1fr);gap:12px}}

@media(max-width:520px){
  .z2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .z2-list li{font-size:11.5px;padding:8px}
  .z3-goal{font-size:12px;padding:9px 11px}
  .z3-ag{width:48px;height:48px}
}
/* Bewegung reduziert: Endzustand ohne Weg */
@media(prefers-reduced-motion:reduce){
  .nz .zs *{animation:none!important}
  .z1-sel{transform:translateY(156px)}.z1-lock,.z2-list li,.z5-toast{opacity:1}
  .z2-pin{transform:scale(1)}.z2-scan,.z3-dot{display:none}
  .z4-pg.g3{transform:translateX(-26%) rotate(-8deg)}.z4-pg.g2{transform:translateX(26%) rotate(7deg)}
}

/* 05.10.2026 · Mobil: Buehnen hoeher, damit die Animationen nicht abgeschnitten
   werden (4:3 ist bei 327px Breite nur 245px hoch). */
@media(max-width:560px){
  .nz .zs{aspect-ratio:auto;min-height:360px}
  .nz .zs-in{padding:22px 18px}
  .z1-lock{bottom:34px}
  .z1-list li{height:42px;margin-bottom:6px}
  .z1-list li.z1-sel{height:42px}
  @keyframes z1sel{0%,18%{transform:translateY(0)}24%,42%{transform:translateY(48px)}48%,62%{transform:translateY(96px)}68%,96%{transform:translateY(144px)}100%{transform:translateY(0)}}
  .z2{grid-template-columns:minmax(0,1fr);gap:10px}
  .z2-page{aspect-ratio:16/10}
  .z4-pg{width:58%}
}