/* WG Bausteine: Widget „hero“. Quelle: startseite-2026/v3/parts/hero.html (Medienpfade auf assets/media, seit 1.3.7 ab 1280 px zweispaltig). */
/* ================= HERO (v3) ================= */
#hero.v3-sec{padding-top:clamp(112px,11vw,152px);padding-bottom:clamp(72px,8vw,120px);overflow-x:clip}
#hero .hero-gridbg{position:absolute;left:0;right:0;top:0;height:min(1100px,100%);z-index:0;pointer-events:none}
#hero .v3-wrap{position:relative;z-index:1}
#hero .hero-head{max-width:980px;margin:0 auto;align-items:center;text-align:center}
#hero .hero-head h1{margin:0}
#hero .hero-head .v3-lead{margin:0;max-width:640px}
#hero .hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:10px}
#hero .hero-cta svg{flex:none}
#hero .hero-link{display:inline-flex;align-items:center;gap:8px;font:500 16px/1.2 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;color:var(--ink);text-decoration:none;padding:10px 2px;border-bottom:1px solid var(--line-2);transition:border-color .3s var(--ease),gap .3s var(--ease)}
#hero .hero-link:hover{border-color:var(--ink);gap:11px}
#hero .hero-link:focus-visible,#hero .hero-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Werkbank: Chips, Rahmen, schwebende Karten ---------- */
#hero .hero-stage{position:relative;margin-top:clamp(56px,6vw,84px);display:flex;flex-direction:column}
#hero .hero-chips{display:flex;justify-content:center;gap:8px;margin:0 auto 24px;padding:0;list-style:none}
#hero .hero-chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;-webkit-appearance:none;appearance:none;border:1px solid var(--line-2);background:rgba(255,255,255,.86);border-radius:999px;padding:10px 16px 11px;font:500 14px/1 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
#hero .hero-chip svg{width:15px;height:15px;flex:none}
#hero .hero-chip:hover{border-color:rgba(20,20,20,.28);color:var(--ink)}
#hero .hero-chip.is-active{background:var(--lime);border-color:rgba(20,23,12,.08);color:var(--lime-ink);box-shadow:0 8px 24px var(--glow)}
#hero .hero-chip-bar{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:rgba(20,23,12,.4);transform-origin:left center;transform:scaleX(var(--prog,0));opacity:0}
#hero .hero-chip.is-active .hero-chip-bar{opacity:1}

#hero .hero-bench{position:relative;width:100%;max-width:960px;margin:0 auto;container-type:inline-size}
#hero .hero-glow{position:absolute;left:8%;right:8%;top:14%;bottom:-8%;z-index:0}
/* Wolfgang stützt sich rechts auf die Oberkante des Rahmens: Helm, Gesicht, Tablet und Hand schauen darüber (in Ruhe 92 % der Bildhöhe).
   Die Breite folgt der Werkbank (cqw), damit er rechts neben dem letzten Chip und unter dem Link darüber bleibt: 180 px bei voller Breite,
   bei schmalerer Werkbank weniger, nie unter 112 px. Beim Scrollen hebt er sich nur um 5 % seiner Höhe, beim Laden ist er schon fast ganz zu sehen. */
#hero .hero-wolf{position:absolute;z-index:1;right:16px;top:0;width:112px;width:clamp(112px,calc(50cqw - 296px),180px);max-width:none;height:auto;transform:translateY(calc(-92% + (1 - var(--p,1)) * 5%));transition:transform .2s linear;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(20,20,20,.14))}
/* Schmale Werkbank (Tablet): Die Chips rücken nur so weit nach links, dass rechts daneben Platz für Wolfgang bleibt
   (815 px = Chipleiste 523 px + zweimal Wolfgang 112 px + zweimal Randabstand 16 px + zweimal Luft 18 px, halbiert durch die Zentrierung). */
@media (min-width:721px){#hero .hero-chips{padding-right:clamp(0px,calc(815px - 100%),150px)}}

#hero .hero-frame{position:relative;z-index:2;aspect-ratio:16/9;border-radius:var(--radius);background:#111311;overflow:hidden;isolation:isolate;color:#F3F4EE;font-size:13px;font-size:1.4cqw;
  box-shadow:0 0 0 1px rgba(194,242,28,.9),0 0 0 7px rgba(194,242,28,.07),0 0 64px rgba(194,242,28,.30),0 40px 90px rgba(20,20,20,.22),inset 0 1px 0 rgba(255,255,255,.06)}
#hero .hero-frame::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:2.4em 2.4em;background-position:center center;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%)}
#hero .hero-frame::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(194,242,28,.10),transparent 70%),radial-gradient(90% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%)}

#hero .hero-scene{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s linear .55s}
#hero .hero-scene.is-on{opacity:1;visibility:visible;transition:opacity .6s var(--ease) .12s,visibility 0s}

/* Abspiellinie mit Leuchtpunkt */
#hero .hero-drop{position:absolute;top:0;bottom:0;left:var(--x,50%);z-index:6;width:2px;margin-left:-1px;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(194,242,28,0),rgba(194,242,28,.9));box-shadow:0 0 12px rgba(194,242,28,.6)}
#hero .hero-drop::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#E9FFA0;box-shadow:0 0 0 3px rgba(194,242,28,.35),0 0 22px 6px rgba(194,242,28,.75)}
#hero .hero-drop.is-go{animation:hero3-drop 1.1s cubic-bezier(.5,0,.3,1) both}

/* ---------- Szene 1: Webseite ---------- */
#hero .w-browser{position:absolute;left:50%;top:50%;width:46em;height:31em;margin:-15.5em 0 0 -23em;border-radius:1em;background:#FAFAF7;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2em 4em rgba(0,0,0,.45)}
#hero .w-bar{position:relative;z-index:2;height:2.4em;display:flex;align-items:center;gap:.45em;padding:0 1em;background:#EEEFE9;border-bottom:1px solid rgba(20,20,20,.07)}
#hero .w-bar i{width:.62em;height:.62em;border-radius:50%;background:rgba(20,20,20,.16)}
#hero .w-url{margin:0 auto;padding:.35em 1.4em;border-radius:999px;background:#fff;font:500 .66em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;color:var(--muted);letter-spacing:.02em;transform:translateX(-1.4em)}
#hero .w-view{position:absolute;left:0;right:0;top:2.4em;bottom:0;overflow:hidden}
#hero .w-page{padding:0 2.2em;color:var(--ink);transform:translateY(-5em)}
#hero .w-nav{height:3.6em;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(20,20,20,.06)}
#hero .w-logo{display:flex;align-items:center;gap:.5em;font:800 .92em/1 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;letter-spacing:-.02em}
#hero .w-logo span{width:1.3em;height:1.3em;border-radius:.35em;background:#141414;box-shadow:inset 0 -.35em 0 var(--lime)}
#hero .w-links{display:flex;gap:1.4em;font-size:.72em;color:var(--muted)}
#hero .w-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6em;align-items:center;padding:2.4em 0 2em}
#hero .w-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.8em}
#hero .w-kicker{font:500 .6em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#hero .w-h{font:800 2.15em/1.02 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;letter-spacing:-.035em;color:var(--ink)}
#hero .w-sub{font-size:.78em;line-height:1.5;color:var(--muted);max-width:22em}
#hero .w-btn{position:relative;display:inline-flex;align-items:center;gap:.5em;margin-top:.3em;padding:.85em 1.4em;border-radius:999px;background:var(--lime);color:var(--lime-ink);font:700 .78em/1 "WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif}
#hero .w-pic{height:13.5em;border-radius:1em;overflow:hidden;background:#E6E9DD}
#hero .w-pic svg{display:block;width:100%;height:100%}
#hero .w-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
#hero .w-service{padding:1em;border-radius:.8em;background:#fff;border:1px solid rgba(20,20,20,.07);display:flex;flex-direction:column;gap:.55em}
#hero .w-service i{width:1.9em;height:1.9em;border-radius:.55em;background:#141414;display:grid;place-items:center;color:var(--lime)}
#hero .w-service i svg{width:1.1em;height:1.1em}
#hero .w-service b{font:700 .85em/1 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif}
#hero .w-service em{font-style:normal;font-size:.72em;line-height:1.35;color:var(--muted)}
#hero .w-form{margin-top:1.3em;padding:1.2em;border-radius:.8em;background:#fff;border:1px solid rgba(20,20,20,.07);display:grid;grid-template-columns:1fr 1fr;gap:.7em}
#hero .w-form b{grid-column:1/-1;font:700 .85em/1 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif}
#hero .w-field{display:flex;align-items:center;height:2.9em;padding:0 1em;border-radius:.7em;background:#F1F2EC;font-size:.68em;color:var(--faint)}
#hero .w-field--wide{grid-column:1/-1}
#hero .w-cursor{position:absolute;left:62%;top:55%;z-index:3;width:1.45em;pointer-events:none}
#hero .w-cursor svg{display:block;width:1.45em;height:auto;filter:drop-shadow(0 .3em .5em rgba(0,0,0,.35))}
#hero .w-tag{position:absolute;left:1.15em;top:1.55em}
#hero .w-ring{position:absolute;left:-1.1em;top:-1.1em;width:2.4em;height:2.4em;border-radius:50%;border:2px solid var(--lime);opacity:0}
#hero .w-note{position:absolute;left:calc(50% + 11.5em);top:calc(50% + 7.5em);z-index:4;width:19em;display:grid;grid-template-columns:2.4em 1fr;gap:.8em;align-items:center;padding:.95em 1.1em;border-radius:1em;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 1.4em 3em rgba(0,0,0,.4)}
#hero .h-ico{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--lime-ink);box-shadow:0 0 1.2em rgba(194,242,28,.55)}
#hero .h-ico svg{width:1.2em;height:1.2em}
#hero .h-txt{display:flex;flex-direction:column;gap:.3em;min-width:0}
#hero .h-txt b{font:700 .88em/1.2 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;letter-spacing:-.01em}
#hero .h-txt span{font-size:.68em;line-height:1.35;color:var(--muted)}
#hero .h-when{position:absolute;right:1.2em;top:1em;font:500 .54em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

#hero .hero-scene--web.is-on .w-browser{animation:hero3-rise .8s var(--ease) .1s both}
#hero .hero-scene--web.is-on .w-page{animation:hero3-scroll 1.3s cubic-bezier(.65,0,.35,1) .9s both}
#hero .hero-scene--web.is-on .w-cursor{animation:hero3-cursor 1.05s var(--ease) 1.85s both}
#hero .hero-scene--web.is-on .w-btn{animation:hero3-press .35s ease 2.95s both,hero3-btnlime .35s linear 3s both}
#hero .hero-scene--web.is-on .w-ring{animation:hero3-ring .7s ease-out 2.95s both}
#hero .hero-scene--web.is-on .w-note{animation:hero3-pop .6s var(--ease) 3.35s both}

/* ---------- Szene 2: Video ---------- */
#hero .hv-player{position:absolute;left:50%;top:2.2em;width:25em;height:25em;margin-left:-12.5em;border-radius:1.2em;overflow:hidden;background:#0B0C0B;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2em 4em rgba(0,0,0,.5)}
#hero .hv-video,#hero .hv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#hero .hv-player::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);pointer-events:none}
#hero .hv-cap{position:absolute;left:1.6em;right:1.6em;bottom:2.1em;z-index:2;display:flex;justify-content:center}
#hero .hv-sel{position:relative;padding:.45em .7em;border:1px solid rgba(255,255,255,.55);max-width:100%}
#hero .hv-sel>i{position:absolute;width:.5em;height:.5em;background:#fff;border:1px solid #111311}
#hero .hv-sel>i:nth-child(1){left:-.28em;top:-.28em}
#hero .hv-sel>i:nth-child(2){right:-.28em;top:-.28em}
#hero .hv-sel>i:nth-child(3){left:-.28em;bottom:-.28em}
#hero .hv-sel>i:nth-child(4){right:-.28em;bottom:-.28em}
#hero .hv-sel-tag{position:absolute;left:-1px;top:-1.75em;padding:.32em .55em;border-radius:.3em .3em .3em 0;background:var(--lime);color:var(--lime-ink);font:700 .56em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
#hero .hv-cap-text{display:block;min-height:1.04em;text-align:center;font:900 1.85em/1.04 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;letter-spacing:-.025em;color:#fff;text-shadow:0 .1em .6em rgba(0,0,0,.45)}
#hero .hv-w{display:inline-block;opacity:0;transform:translateY(.45em) scale(.9);filter:blur(6px);transition:opacity .28s ease,transform .45s cubic-bezier(.2,1.3,.3,1),filter .3s ease}
#hero .hv-w.is-on{opacity:1;transform:none;filter:none}
#hero .hv-w.is-key{color:var(--lime);text-shadow:0 0 1em rgba(194,242,28,.45)}
#hero .hv-tl{position:absolute;left:50%;top:28.6em;width:52em;margin-left:-26em;padding:.9em 1.1em;border-radius:.9em;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:3.4em 1fr;row-gap:.45em;align-items:center}
#hero .hv-lab{font:500 .56em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
#hero .hv-track{position:relative;height:2em;border-radius:.35em}
#hero .hv-track--img{background:url(../media/janno-clip-poster.jpg) left center/auto 100% repeat-x;opacity:.8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
#hero .hv-track--text{background:rgba(255,255,255,.03)}
#hero .hv-block{position:absolute;top:.3em;bottom:.3em;margin-right:.2em;border-radius:.3em;background:rgba(194,242,28,.14);box-shadow:inset 0 0 0 1px rgba(194,242,28,.45);transition:background-color .25s ease}
#hero .hv-block.is-on{background:var(--lime)}
#hero .hv-wave{position:absolute;inset:.25em 0;display:flex;align-items:center;gap:2px}
#hero .hv-wave i{flex:1;min-width:1px;border-radius:1px;background:rgba(255,255,255,.28)}
#hero .hv-wave--lit{-webkit-clip-path:inset(0 calc(100% - var(--vt,0) * 100%) 0 0);clip-path:inset(0 calc(100% - var(--vt,0) * 100%) 0 0)}
#hero .hv-wave--lit i{background:var(--lime)}
#hero .hv-head{position:absolute;top:.45em;bottom:.45em;left:calc(4.5em + (100% - 5.6em) * var(--vt,0));width:2px;margin-left:-1px;background:var(--lime);box-shadow:0 0 .8em rgba(194,242,28,.7);pointer-events:none}
#hero .hv-head::before{content:"";position:absolute;left:50%;top:-.3em;width:.8em;height:.8em;margin-left:-.4em;border-radius:50%;background:#E9FFA0;box-shadow:0 0 1em rgba(194,242,28,.9)}
#hero .hero-scene--video.is-on .hv-player{animation:hero3-rise .8s var(--ease) .1s both}
#hero .hero-scene--video.is-on .hv-tl{animation:hero3-fadeup .7s var(--ease) .35s both}

/* ---------- Szene 3: Social Media ---------- */
#hero .hs-phone{position:absolute;left:calc(50% - 19.5em);top:50%;width:17.5em;height:34em;margin-top:-17em;padding:.5em;border-radius:2.6em;background:#050605;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 2em 4em rgba(0,0,0,.5)}
#hero .hs-screen{position:relative;height:100%;border-radius:2.15em;overflow:hidden;background:#fff;color:var(--ink);display:flex;flex-direction:column}
#hero .hs-notch{width:5.6em;height:1.2em;margin:.55em auto .4em;border-radius:999px;background:#050605;flex:none}
#hero .hs-head{display:flex;align-items:center;gap:.6em;padding:.3em .9em .6em}
#hero .hs-ava{width:2.1em;height:2.1em;border-radius:50%;background:#141414;color:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--lime);flex:none}
#hero .hs-ava svg{width:1.1em;height:1.1em}
#hero .hs-name{display:flex;flex-direction:column;gap:.2em;line-height:1}
#hero .hs-name b{font:700 .78em/1 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif}
#hero .hs-name span{font-size:.6em;color:var(--muted)}
#hero .hs-img{position:relative;aspect-ratio:1/1;background:radial-gradient(70% 70% at 60% 40%,#F2F7DF 0%,#DFE6CB 60%,#CCD4B6 100%);display:grid;place-items:center;overflow:hidden;flex:none}
#hero .hs-img svg{display:block;width:100%;height:100%}
#hero .hs-actions{position:relative;display:flex;align-items:center;gap:.9em;padding:.7em .95em .4em}
#hero .hs-actions svg{width:1.3em;height:1.3em;fill:none;stroke:#141414;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#hero .hs-actions .hs-like{fill:var(--lime)}
#hero .hs-actions .hs-save{margin-left:auto}
#hero .hs-cap{padding:0 .95em;font-size:.66em;line-height:1.45;color:var(--ink-2)}
#hero .hs-cap b{font-weight:700;color:var(--ink)}
#hero .hs-hearts{position:absolute;left:.95em;top:.7em;width:1.3em;height:1.3em;pointer-events:none}
#hero .hs-hearts svg{position:absolute;inset:0;width:1.3em;height:1.3em;fill:var(--lime);stroke:none;opacity:0;filter:drop-shadow(0 0 .4em rgba(194,242,28,.8))}
#hero .hs-grid{position:absolute;left:calc(50% + 1.2em);top:50%;width:19.5em;margin-top:-11.6em;display:flex;flex-direction:column;gap:1em}
#hero .hs-mini{display:grid;grid-template-columns:4.8em 1fr;gap:1em;align-items:center;padding:.75em;border-radius:1em;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#hero .hs-thumb{position:relative;width:4.8em;height:4.8em;border-radius:.7em;overflow:hidden;background:radial-gradient(80% 80% at 50% 35%,#EEF4D8,#CBD3B3);display:grid;place-items:center}
#hero .hs-thumb img{width:100%;height:100%;object-fit:cover}
#hero .hs-thumb--cam img{object-fit:contain;width:118%;max-width:none}
#hero .hs-thumb svg{width:100%;height:100%;display:block}
#hero .hs-thumb--play::after{content:"";position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23141414'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 .2em .6em rgba(0,0,0,.3)}
#hero .hs-meta{display:flex;flex-direction:column;gap:.4em;min-width:0}
#hero .hs-meta b{font:700 .95em/1.15 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;letter-spacing:-.01em;color:#F3F4EE}
#hero .hs-meta span{display:flex;align-items:center;gap:.5em;font:500 .56em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#hero .hs-meta span::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--lime);box-shadow:0 0 .6em rgba(194,242,28,.8);flex:none}
#hero .hs-meta span.is-plan::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
#hero .hero-scene--social.is-on .hs-phone{animation:hero3-rise .8s var(--ease) .1s both}
#hero .hero-scene--social.is-on .hs-like{animation:hero3-like .6s ease .9s both}
#hero .hero-scene--social.is-on .hs-hearts svg{animation:hero3-heart 1.9s cubic-bezier(.3,.6,.4,1) both}
#hero .hero-scene--social.is-on .hs-hearts svg:nth-child(1){--dx:-1.2em;animation-delay:1s}
#hero .hero-scene--social.is-on .hs-hearts svg:nth-child(2){--dx:1em;animation-delay:1.3s}
#hero .hero-scene--social.is-on .hs-hearts svg:nth-child(3){--dx:-.4em;animation-delay:1.65s}
#hero .hero-scene--social.is-on .hs-hearts svg:nth-child(4){--dx:1.6em;animation-delay:2s}
#hero .hero-scene--social.is-on .hs-hearts svg:nth-child(5){--dx:-1.6em;animation-delay:2.4s}
#hero .hero-scene--social.is-on .hs-mini{animation:hero3-slidein .6s var(--ease) both}
#hero .hero-scene--social.is-on .hs-mini:nth-child(1){animation-delay:1s}
#hero .hero-scene--social.is-on .hs-mini:nth-child(2){animation-delay:1.6s}
#hero .hero-scene--social.is-on .hs-mini:nth-child(3){animation-delay:2.2s}

/* ---------- Szene 4: Werbeanzeigen ---------- */
#hero .ha-ad{position:absolute;left:calc(50% - 22.5em);top:50%;width:21em;margin-top:-12.4em;border-radius:1.2em;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 2em 4em rgba(0,0,0,.5)}
#hero .ha-head{display:flex;align-items:center;gap:.6em;padding:.9em 1em .6em}
#hero .ha-text{padding:0 1em .8em;font-size:.72em;line-height:1.5;color:var(--ink-2)}
#hero .ha-img{height:13.5em;background:radial-gradient(75% 80% at 55% 45%,#F2F8D8 0%,#DCE5C2 55%,#C5CFAA 100%);display:grid;place-items:end center;overflow:hidden}
#hero .ha-img img{width:auto;height:94%;display:block}
#hero .ha-cta{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.85em 1em;background:#F3F4EF}
#hero .ha-cta div{display:flex;flex-direction:column;gap:.35em;min-width:0}
#hero .ha-cta small{font:500 .52em/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
#hero .ha-cta b{font:700 .8em/1.1 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif}
#hero .ha-btn{position:relative;flex:none;padding:.7em 1.1em;border-radius:999px;background:#141414;color:#fff;font:700 .7em/1 "WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif}
#hero .ha-ring{position:absolute;left:50%;top:50%;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;border:2px solid var(--lime);opacity:0;pointer-events:none}
#hero .ha-stack{position:absolute;left:calc(50% + 1.5em);top:50%;width:20em;margin-top:-7.4em;display:flex;flex-direction:column;gap:.8em}
#hero .ha-note{position:relative;display:grid;grid-template-columns:2.4em 1fr;gap:.8em;align-items:center;padding:.9em 1em;border-radius:1em;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 1.2em 2.6em rgba(0,0,0,.35)}
#hero .hero-scene--ads.is-on .ha-ad{animation:hero3-rise .8s var(--ease) .1s both}
#hero .hero-scene--ads.is-on .ha-ring{animation:hero3-ring .7s ease-out 1s both}
#hero .hero-scene--ads.is-on .ha-btn{animation:hero3-press .35s ease 1s both}
#hero .hero-scene--ads.is-on .ha-note{animation:hero3-slidein .6s var(--ease) both}
#hero .hero-scene--ads.is-on .ha-note:nth-child(1){animation-delay:1.35s}
#hero .hero-scene--ads.is-on .ha-note:nth-child(2){animation-delay:2.05s}
#hero .hero-scene--ads.is-on .ha-note:nth-child(3){animation-delay:2.75s}

/* ---------- Schwebende Karten (nur breite Bildschirme) ---------- */
#hero .hero-float{position:absolute;z-index:3;display:none;margin:0;padding:18px 20px}
#hero .hero-float.v3-glass{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1)}
#hero .hero-float--quote{left:-120px;top:12%;width:282px;transform:translateY(calc((1 - var(--p,1)) * 90px))}
#hero .hero-float-in{display:flex;flex-direction:column;gap:12px;animation:hero3-float 7s ease-in-out infinite}
#hero .hero-stars{display:flex;gap:3px;color:var(--ink)}
#hero .hero-stars svg{width:15px;height:15px;fill:currentColor}
#hero .hero-float blockquote{margin:0;font:500 15px/1.45 "WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;color:var(--ink-2)}
#hero .hero-float figcaption{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line)}
#hero .hero-float figcaption b{font:800 15px/1.1 "WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;color:var(--ink)}
#hero .hero-float figcaption span{font:500 11px/1.2 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (min-width:1260px){#hero .hero-float{display:block}}

/* ---------- Desktop ab 1280 px: Text links, Werkbank rechts, fast über die ganze Fensterbreite ----------
   Nebeneinander ist der Rahmen schon im ersten Bildschirm zu sehen. Bis 1920 px nutzt der Hero fast die ganze Breite,
   und die Lücke zwischen Text und Werkbank wächst mit. Die H1 ist so groß, dass „Online-Marketing-“ in eine Zeile passt.
   Das Zitat hängt unten links am Rahmen, Wolfgang schaut weiter oben rechts darüber. Links hält der Text Abstand zur
   Einstellungsleiste von WG FX, die links mittig bis 76 px vom Rand sitzt. */
@media (min-width:1280px){
  #hero.v3-sec{padding-top:clamp(104px,8.4vw,136px)}
  #hero .v3-wrap{max-width:1920px;padding:0 clamp(24px,5vw,112px) 0 max(104px,min(5vw,112px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:clamp(56px,calc(8vw - 40px),160px);align-items:center}
  #hero .hero-head{max-width:none;margin:0;align-items:flex-start;text-align:left}
  #hero .hero-head > .v3-pill{align-self:flex-start}
  #hero .hero-head h1{font-size:clamp(40px,3.6vw,64px)}
  #hero .hero-cta{justify-content:flex-start}
  #hero .hero-stage{margin-top:0}
  /* Chips etwas kompakter, damit rechts daneben Platz für Wolfgang bleibt */
  #hero .hero-chips{justify-content:flex-start;gap:6px;margin:0 0 20px;padding-right:0}
  #hero .hero-chip{padding:9px 12px 10px;font-size:13.5px}
  #hero .hero-wolf{right:-14px}
  #hero .hero-bench{max-width:none}
  #hero .hero-float--quote{left:-44px;top:auto;bottom:-72px;width:236px;padding:16px 18px}
  #hero .hero-float blockquote{font-size:14px}
  /* Die Kopfzeile ist oben so breit wie der Hero, damit Logo und Button an seinen Kanten stehen */
  body:has(#hero) .v3-nav.v3-nav:not(.is-float) .v3-nav-in{max-width:1920px;padding-left:max(104px,min(5vw,112px));padding-right:clamp(24px,5vw,112px)}
}

/* ---------- Keyframes ---------- */
@keyframes hero3-rise{from{opacity:0;transform:translateY(2.4em) scale(.98)}}
@keyframes hero3-fadeup{from{opacity:0;transform:translateY(1.2em)}}
@keyframes hero3-scroll{from{transform:translateY(0)}}
@keyframes hero3-cursor{0%{opacity:0;transform:translate(15em,9em)}25%{opacity:1}}
@keyframes hero3-press{50%{transform:scale(.92)}}
@keyframes hero3-btnlime{from{background:#141414;color:#fff}}
@keyframes hero3-ring{from{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(1.7)}}
@keyframes hero3-pop{from{opacity:0;transform:translateY(1em) scale(.96)}}
@keyframes hero3-slidein{from{opacity:0;transform:translateX(1.6em) scale(.97)}}
@keyframes hero3-like{0%{fill:transparent;transform:scale(1)}45%{transform:scale(1.35)}}
@keyframes hero3-heart{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-8.5em) scale(1.15)}}
@keyframes hero3-drop{0%{opacity:0;transform:translateY(-100%)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(100%)}}
@keyframes hero3-float{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  #hero .hero-cta{flex-direction:column;gap:6px}
  #hero .hero-cta .v3-btn{max-width:100%;white-space:normal;text-align:center;justify-content:center;line-height:1.25}
  #hero .hero-link{display:none}
  #hero .hero-stage{margin-top:40px}
  #hero .hero-chips{order:0;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px 94px;padding:4px 18px 6px;scroll-padding:0 18px;position:relative;z-index:3}
  #hero .hero-chips::-webkit-scrollbar{display:none}
  #hero .hero-chip{flex:none}
  /* Handy: Die Chipleiste läuft über die ganze Breite, deshalb steht Wolfgang im vergrößerten Abstand zwischen Chips und Rahmen */
  #hero .hero-wolf{width:88px}
  #hero .hero-frame{aspect-ratio:4/5;font-size:10px;font-size:3.15cqw}
  #hero .w-browser{width:28em;height:30em;margin:-17em 0 0 -14em}
  #hero .w-page{padding:0 1.4em}
  #hero .w-links{display:none}
  #hero .w-hero{grid-template-columns:1fr;gap:1.2em;padding:1.8em 0 1.6em}
  #hero .w-h{font-size:2em}
  #hero .w-pic{height:8em;order:-1}
  #hero .w-services{grid-template-columns:repeat(3,1fr);gap:.6em}
  #hero .w-service{padding:.7em}
  #hero .w-cursor{left:70%}
  #hero .w-note{left:1.8em;right:1.8em;top:auto;bottom:1.8em;width:auto}
  #hero .hv-player{top:1.8em;width:26em;height:26em;margin-left:-13em}
  #hero .hv-tl{top:29.2em;width:28em;margin-left:-14em;padding:.7em .8em;grid-template-columns:3em 1fr}
  #hero .hv-track{height:1.8em}
  #hero .hv-head{left:calc(3.8em + (100% - 4.6em) * var(--vt,0))}
  #hero .hs-phone{left:1.4em;width:15em;height:30em;margin-top:-15em;border-radius:2.3em}
  #hero .hs-screen{border-radius:1.9em}
  #hero .hs-grid{left:17.6em;right:1.2em;width:auto;margin-top:-10.4em;gap:.8em}
  #hero .hs-mini{grid-template-columns:1fr;gap:.6em;padding:.6em}
  #hero .hs-thumb{width:100%;height:3.6em}
  #hero .hs-meta b{font-size:.84em}
  #hero .ha-ad{left:1.4em;top:1.4em;width:19em;margin-top:0}
  #hero .ha-img{height:10.5em}
  #hero .ha-stack{left:auto;right:1.2em;top:auto;bottom:1.4em;width:18em;margin-top:0;gap:.6em}
  /* Meldungen auf dem Handy lesbar halten */
  #hero .h-txt b{font-size:max(.88em,12.5px)}
  #hero .h-txt span{font-size:max(.68em,11px)}
  #hero .hs-meta b{font-size:max(.84em,12px)}
  #hero .w-field{font-size:max(.68em,9px)}}
@media (max-width:380px){#hero .hero-chip{padding:9px 13px 10px;font-size:13px}}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  #hero .hero-scene,#hero .hero-scene *,#hero .hero-float-in,#hero .hero-drop{animation:none !important;transition:none !important}
  #hero .hero-wolf,#hero .hero-float{transform:none !important;transition:none}
  #hero .hero-wolf{transform:translateY(-92%) !important}
  #hero .hero-chip-bar{display:none}
  #hero .hv-w{opacity:1;transform:none;filter:none}
}