/* ==========================================================================
   RGN Marketing — Paket-Sektion „Das Netz“ (Webdesign + Stadtseiten, 10/2026)
   Fünf Bausteine, untereinander verbunden, von jedem eine Speiche in die
   nachgebaute Google-Suche. Stehen alle Speichen, rückt der eigene Eintrag
   nach oben. Am PC Querformat, auf dem Handy ein Dock aus App-Symbolen.
   Baut auf design.css auf (Tokens, .sec, .wrap, .kicker, .t-d2, Reveal).
   Bewegung nur über opacity/transform/stroke, ein Endlos-Effekt (Pulse),
   alles aus bei reduced motion. Google-Farben nur in der Suche.
   ========================================================================== */
.paket{--pk-h:46px}
.paket h2 + .t-lead{margin-top:1.05rem}
.pk-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;
  background:var(--ink);color:#fff}
.pk-ico svg{width:19px;height:19px}

/* --- Nachgebaute Google-Suche ------------------------------------------- */
.pk-g{font-family:var(--g-font);color:var(--g-tx);font-size:11.5px;line-height:1.35;
  letter-spacing:0;text-align:left}
.pk-g b{font-weight:500}
.pk-g-such{display:flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;
  background:#fff;border:1px solid var(--g-rand);box-shadow:0 1px 3px rgba(32,33,36,.1);
  font-size:12.5px;white-space:nowrap;overflow:hidden}
.pk-g-such svg{width:14px;height:14px;flex:none;color:var(--g-tx-mut)}
.pk-g-block{border-radius:10px;
  transition:opacity .5s var(--fed-weich),box-shadow .35s var(--fed-weich),background-color .35s var(--fed-weich)}
.pk-g-liste{position:relative;height:calc(var(--pk-h) * 3);overflow:hidden}
.pk-g-zeile{position:absolute;left:0;right:0;top:0;height:var(--pk-h);display:flex;align-items:center;
  gap:8px;padding:0 6px;border-bottom:1px solid var(--g-rand-soft);
  transform:translateY(calc(var(--p,0) * var(--pk-h)));
  transition:transform .9s var(--fed),opacity .5s var(--fed-weich),box-shadow .35s,background-color .35s}
.pk-g-du{--p:0}
.pk-g-s1{--p:1}.pk-g-s2{--p:2}.pk-g-s3{--p:3}
.pk-g-l{flex:1;min-width:0;display:grid;gap:1px}
.pk-g-name{font-size:12.5px;font-weight:500;color:var(--g-tx)}
.pk-g-sterne{display:flex;align-items:center;gap:4px;color:var(--g-tx-mut);font-size:10.5px;white-space:nowrap}
.pk-g-sterne i{font-style:normal;color:var(--g-gelb);letter-spacing:-.5px}
.pk-g-mut{color:var(--g-tx-mut);font-size:10.5px;white-space:nowrap}
.pk-g-offen{font-style:normal;color:#188038}
.pk-g-knopf{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--g-rand);color:var(--g-blau)}
.pk-g-knopf svg{width:14px;height:14px}
.pk-skel{display:grid;gap:5px;flex:1}
.pk-skel i{display:block;height:6px;border-radius:4px;background:#E8EAED}
.pk-skel i:nth-child(1){width:46%;height:8px;background:#DADCE0}
.pk-skel i:nth-child(2){width:70%}

/* --- Das Netz ------------------------------------------------------------ */
.netz .sec__kopf{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.netz__buehne{position:relative;aspect-ratio:2/1;max-width:1180px;margin-inline:auto}
.netz__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.netz__svg--m{display:none}
.netz__m,.netz__s{fill:none;stroke:var(--graphit);stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s var(--fed-weich) calc(var(--d) * 1ms),stroke .3s,stroke-opacity .3s,stroke-width .3s}
.netz__m{stroke-opacity:.22;stroke-width:1.3}
.netz__s{stroke-opacity:.5;stroke-width:1.7}
.pk-los .netz__m,.pk-los .netz__s{stroke-dashoffset:0}
.netz__buehne.hat-fokus .netz__m,.netz__buehne.hat-fokus .netz__s{stroke-opacity:.1}
.netz__buehne.hat-fokus .netz__m.an{stroke-opacity:.55}
.netz__buehne.hat-fokus .netz__s.an{stroke:var(--akz);stroke-opacity:1;stroke-width:2.2}
.netz__puls{fill:var(--akz);opacity:0;transition:opacity .6s var(--fed-weich)}
.netz--oben .netz__puls{opacity:1}

.netz__k{position:absolute;z-index:1;left:calc(var(--x) / 12 * 1%);top:calc(var(--y) / 6 * 1%);
  translate:-50% -50%;display:flex;align-items:center;gap:12px;width:228px;margin:0;
  padding:12px 14px;border-radius:18px;background:var(--papier);border:1px solid var(--li);
  box-shadow:var(--sh-2);color:var(--tx);font:inherit;text-align:left;cursor:pointer;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--fed-weich) calc(var(--i) * 150ms + 150ms),
             transform .8s var(--fed) calc(var(--i) * 150ms + 150ms),
             border-color .25s var(--fed-kurz),box-shadow .25s var(--fed-kurz)}
.pk-los .netz__k{opacity:1;transform:none}
.netz--bereit .netz__k{transition-delay:0s}
.netz__k:hover,.netz__k.an{border-color:rgba(42,48,51,.45);box-shadow:var(--sh-3)}
.netz__buehne.hat-fokus .netz__k:not(.an){opacity:.5}
.netz__kt{display:grid;gap:2px;min-width:0}
.netz__kt b{font-size:.96rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.netz__kt em{font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;font-size:.72rem;
  color:var(--tx-mut);white-space:nowrap}
.netz__kurz{display:none}

.netz__hub{position:absolute;z-index:2;left:50%;top:45%;translate:-50% -50%;width:340px;padding:12px 14px 6px;
  border-radius:24px;background:var(--papier);border:1px solid var(--li);
  box-shadow:0 2px 4px rgba(14,17,19,.05),0 30px 70px rgba(14,17,19,.12);
  opacity:0;transform:translateY(10px);transition:opacity .7s var(--fed-weich) .1s,transform .8s var(--fed) .1s}
.pk-los .netz__hub{opacity:1;transform:none}
.netz__hub-kopf{display:flex;justify-content:space-between;align-items:center;margin:0 4px 9px;
  font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;color:var(--tx-mut)}
.netz__live{display:inline-flex;align-items:center;gap:6px}
.netz__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
.netz__hub .pk-g-liste{margin-top:8px}
.netz__hub .pk-g-zeile:last-child{border-bottom:0}
/* Startzustand: dein Eintrag steht an dritter Stelle … */
.netz .pk-g-du{--p:2}.netz .pk-g-s1{--p:0}.netz .pk-g-s2{--p:1}
/* … und rückt nach oben, sobald alle Speichen stehen */
.netz--oben .pk-g-du{--p:0}.netz--oben .pk-g-s1{--p:1}.netz--oben .pk-g-s2{--p:2}
.netz--oben .pk-g-du{background:rgba(76,141,255,.06);box-shadow:inset 3px 0 0 var(--akz);transition-delay:0s}
.netz__buehne.hat-fokus .netz__hub{box-shadow:0 0 0 2px var(--akz),0 30px 70px rgba(14,17,19,.12)}

.netz__info{min-height:3.2em;max-width:36rem;margin:clamp(1rem,2vw,1.5rem) auto 0;text-align:center;
  font-size:.98rem;line-height:1.55;color:var(--tx-mut)}
.netz__info b{color:var(--tx);font-weight:600}

/* --- Handy: Dock aus fünf App-Symbolen, darunter die Suche ----------------
   Bausteine und Suche stehen im normalen Raster, die Linien misst paket.js
   aus den echten Positionen. */
@media (max-width:760px){
  .netz__buehne{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:4px;row-gap:56px;
    grid-template-areas:"web seiten profil maps verz" "hub hub hub hub hub";
    aspect-ratio:auto;max-width:430px;padding-top:24px}
  .netz__svg--d{display:none}
  .netz__svg--m{display:block}
  .netz__k,.netz__k:hover,.netz__k.an{position:relative;left:auto;top:auto;translate:none;width:auto;min-width:0;
    flex-direction:column;justify-content:flex-start;gap:7px;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;text-align:center}
  .netz__k .pk-ico{width:52px;height:52px;border-radius:15px;box-shadow:var(--sh-2);
    transition:box-shadow .25s var(--fed-kurz)}
  .netz__k .pk-ico svg{width:24px;height:24px}
  .netz__k:hover .pk-ico,.netz__k.an .pk-ico{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--akz),var(--sh-3)}
  .netz__kt b,.netz__kt em{display:none}
  .netz__kurz{display:block;font-size:.72rem;font-weight:500;line-height:1.2;hyphens:manual}
  .netz__k[data-k="web"]{grid-area:web}
  .netz__k[data-k="seiten"]{grid-area:seiten}
  .netz__k[data-k="profil"]{grid-area:profil}
  .netz__k[data-k="maps"]{grid-area:maps}
  .netz__k[data-k="verz"]{grid-area:verz}
  .netz__hub{position:relative;left:auto;top:auto;translate:none;width:auto;padding:10px 10px 4px;grid-area:hub}
}

@media (prefers-reduced-motion:reduce){
  .netz__puls{display:none}
}