/* Website-Widgets: Hero-Szene mit Kundenseite im Browser. Neuer Drop schiebt sich in den Feed,
   die App schaltet den Feed dunkel und zurueck, dann oeffnet sich eine Story. Takt 14 s */
.ww-szene{order:2;position:relative;width:min(100%,1080px);margin-top:clamp(36px,4.5vw,60px);padding:0 0 clamp(70px,8vw,100px) clamp(40px,7vw,90px);opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.ww-szene *{text-align:left}
.ww-browser{border-radius:12px;overflow:hidden;background:#161616;box-shadow:0 0 0 1px #3A3A3A,inset 0 1px 0 rgba(255,255,255,.12),0 60px 120px -50px rgba(0,0,0,.95),0 40px 90px -40px rgba(224,36,107,.4)}
.ww-seite{--e:1cqw;--gap:calc(var(--e)*1.6);--kb:calc((100% - 2 * var(--gap)) / 3);container-type:inline-size;position:relative;aspect-ratio:16/9;overflow:hidden;background:#F6F1EA;color:#2A2420;font-family:var(--f-body,inherit)}
@supports not (width:1cqw){.ww-seite{--e:9px}}

.ww-pushleiste{display:flex;align-items:center;justify-content:center;gap:calc(var(--e)*1.4);padding:calc(var(--e)*.9) 0;background:#B8661E;color:#fff;font-size:calc(var(--e)*1.25);font-weight:600}
.ww-pushleiste b{padding:calc(var(--e)*.35) calc(var(--e)*1.1);border-radius:999px;background:#fff;color:#B8661E;font-weight:800}
.ww-nav{display:flex;align-items:center;gap:calc(var(--e)*2.6);padding:calc(var(--e)*1.6) calc(var(--e)*4)}
.ww-nav b{font-family:Georgia,serif;font-size:calc(var(--e)*2.2);font-weight:700;margin-right:auto;letter-spacing:-.01em}
.ww-nav span{font-size:calc(var(--e)*1.25);color:#6E625A}
.ww-nav .an{color:#2A2420;font-weight:700;border-bottom:2px solid #B8661E;padding-bottom:2px}

/* der eingebaute Feed: helle Karten, im Takt kurz dunkel */
.ww-feed{margin:0 calc(var(--e)*3);padding:calc(var(--e)*2.2);border-radius:calc(var(--e)*1.2);background:#fff;box-shadow:0 calc(var(--e)*.6) calc(var(--e)*2.4) -1px rgba(60,40,20,.12);animation:ww-feed-bg 14s infinite}
.ww-feedkopf{margin:0 0 calc(var(--e)*1.4);font-size:calc(var(--e)*2);font-weight:800;letter-spacing:-.01em;animation:ww-text 14s infinite}
.ww-karten{display:flex;gap:var(--gap);overflow:hidden}
.ww-karte{flex:0 0 var(--kb);min-width:0;border-radius:calc(var(--e)*.9);overflow:hidden;background:#F4EFE8;animation:ww-karte-bg 14s infinite}
.ww-karte img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.ww-dat{display:block;margin:calc(var(--e)*1) calc(var(--e)*1.2) 0;font-size:calc(var(--e)*.95);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9A8B80}
.ww-karte p{color:#2A2420;margin:calc(var(--e)*.4) calc(var(--e)*1.2) 0;font-size:calc(var(--e)*1.4);font-weight:800;line-height:1.25;animation:ww-text 14s infinite}
.ww-karte u{display:block;margin:calc(var(--e)*.8) calc(var(--e)*1.2) calc(var(--e)*1.2);font-size:calc(var(--e)*1.1);font-weight:700;text-decoration:none;color:#B8661E}
.ww-karte.ww-neu{animation:ww-neu 14s infinite,ww-karte-bg 14s infinite}
/* die aelteste Karte macht Platz */
.ww-karte:last-child{animation:ww-raus 14s infinite,ww-karte-bg 14s infinite}
@keyframes ww-raus{0%,3%{opacity:1}8%,96%{opacity:0}100%{opacity:1}}
@keyframes ww-neu{
  0%,3%{flex-basis:0;margin-right:calc(var(--gap) * -1);opacity:0;box-shadow:inset 0 0 0 0 rgba(184,102,30,0)}
  9%{flex-basis:var(--kb);margin-right:0;opacity:1;box-shadow:inset 0 0 0 3px rgba(184,102,30,.9)}
  20%,94%{flex-basis:var(--kb);margin-right:0;opacity:1;box-shadow:inset 0 0 0 0 rgba(184,102,30,0)}
  99%,100%{flex-basis:0;margin-right:calc(var(--gap) * -1);opacity:0}}
@keyframes ww-feed-bg{0%,22%{background:#fff}26%,48%{background:#161616}52%,100%{background:#fff}}
@keyframes ww-karte-bg{0%,22%{background:#F4EFE8}26%,48%{background:#262626}52%,100%{background:#F4EFE8}}
@keyframes ww-text{0%,22%{color:#2A2420}26%,48%{color:#F2F2F2}52%,100%{color:#2A2420}}

/* Story-Kreise unten in der Mitte, dann der Viewer */
.ww-stories{position:absolute;left:50%;bottom:calc(var(--e)*2);translate:-50% 0;display:flex;align-items:center;gap:calc(var(--e)*.8);padding:calc(var(--e)*.6) calc(var(--e)*.9);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 calc(var(--e)*.8) calc(var(--e)*2.6) -2px rgba(0,0,0,.28);animation:ww-schweben 4s ease-in-out infinite}
@keyframes ww-schweben{50%{transform:translateY(calc(var(--e)*-.5))}}
.ww-kreis{width:calc(var(--e)*4.6);aspect-ratio:1;border-radius:50%;padding:2px;background:conic-gradient(from 200deg,#F9A23A,#E0246B,#8A3FFC,#F9A23A)}
.ww-kreis img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff}
.ww-kreis.k1{animation:ww-tipp 14s infinite}
@keyframes ww-tipp{0%,53%{transform:none}55%{transform:scale(.86)}57%,100%{transform:none}}
.ww-x{font-size:calc(var(--e)*1.6);color:#8A8A8A;padding:0 calc(var(--e)*.3)}
.ww-viewer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.72);opacity:0;pointer-events:none;animation:ww-viewer 14s infinite}
@keyframes ww-viewer{0%,55%{opacity:0}58%,86%{opacity:1}89%,100%{opacity:0}}
.ww-story{position:relative;height:90%;aspect-ratio:9/16;border-radius:calc(var(--e)*1.3);overflow:hidden;background:#111;box-shadow:0 calc(var(--e)*2) calc(var(--e)*5) -1px rgba(0,0,0,.6);transform:scale(.9);animation:ww-story 14s infinite}
@keyframes ww-story{0%,55%{transform:scale(.9) translateY(calc(var(--e)*2))}59%,86%{transform:none}89%,100%{transform:scale(.95)}}
.ww-story > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ww-balken{position:absolute;top:calc(var(--e)*1);left:calc(var(--e)*1);right:calc(var(--e)*1);display:flex;gap:calc(var(--e)*.4)}
.ww-balken i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.4);overflow:hidden;position:relative}
.ww-balken i:first-child::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);animation:ww-lauf 14s linear infinite}
@keyframes ww-lauf{0%,58%{transform:scaleX(0)}86%,100%{transform:scaleX(1)}}
.ww-wer{position:absolute;top:calc(var(--e)*2);left:calc(var(--e)*1.2);display:flex;align-items:center;gap:calc(var(--e)*.6);font-size:calc(var(--e)*1.1);font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ww-wer i{display:grid;place-items:center;width:calc(var(--e)*2.2);aspect-ratio:1;border-radius:50%;background:#B8661E;font-style:normal;font-size:calc(var(--e)*1)}
.ww-storytext{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:calc(var(--e)*.6);padding:calc(var(--e)*6) calc(var(--e)*1.4) calc(var(--e)*1.6);background:linear-gradient(transparent,rgba(0,0,0,.85) 45%)}
.ww-storytext b{font-size:calc(var(--e)*1.9);line-height:1.15;color:#fff}
.ww-storytext span{font-size:calc(var(--e)*1.05);color:rgba(255,255,255,.85)}
.ww-storytext em{align-self:flex-start;font-style:normal;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:calc(var(--e)*1.2);font-weight:700;color:#fff;padding:calc(var(--e)*.4) calc(var(--e)*1);border:1.5px dashed rgba(255,255,255,.8);border-radius:calc(var(--e)*.5)}

/* App-Panel links unten: der Schalter hell/dunkel des Website-Feeds */
.ww-app{position:absolute;left:0;bottom:0;width:clamp(190px,24%,250px);padding:16px 16px 14px;border-radius:14px;background:#1C1C1C;box-shadow:0 0 0 1px #333,0 30px 60px -20px rgba(0,0,0,.9);animation:ww-app 14s infinite}
@keyframes ww-app{0%,18%{box-shadow:0 0 0 1px #333,0 30px 60px -20px rgba(0,0,0,.9)}20%,24%{box-shadow:0 0 0 2px var(--accent),0 30px 60px -20px rgba(0,0,0,.9)}28%,100%{box-shadow:0 0 0 1px #333,0 30px 60px -20px rgba(0,0,0,.9)}}
.ww-app-k{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.ww-app-z{display:flex;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:13px;color:#A3A3A3}
.ww-app-z b{color:#F2F2F2;font-weight:700}
.ww-schalter{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:#0E0E0E;box-shadow:inset 0 0 0 1px #333}
.ww-schalter i{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#F2F2F2;animation:ww-knopf 14s infinite}
@keyframes ww-knopf{0%,20%{transform:none;background:#F2F2F2}24%,48%{transform:translateX(100%);background:var(--accent)}52%,100%{transform:none;background:#F2F2F2}}
.ww-schalter span{position:relative;z-index:1;text-align:center!important;font-size:13px;font-weight:700;padding:6px 0}
.ww-schalter span:nth-of-type(1){animation:ww-l1 14s infinite}
.ww-schalter span:nth-of-type(2){animation:ww-l2 14s infinite}
@keyframes ww-l1{0%,20%{color:#111}24%,48%{color:#8A8A8A}52%,100%{color:#111}}
@keyframes ww-l2{0%,20%{color:#8A8A8A}24%,48%{color:#fff}52%,100%{color:#8A8A8A}}

/* Uebersicht: sechs Karten mit kleiner Animation */
.ww-wg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.ww-wg article{display:flex;flex-direction:column;background:#161616;border-radius:12px;padding:20px 20px 22px;box-shadow:0 0 0 1px #242424}
.ww-wg h3{font-size:20px;color:#fff;margin:18px 0 8px}
.ww-wg p{font-size:15px;line-height:1.55;color:#A3A3A3;margin:0 0 16px}
.ww-wg p a{color:#F2F2F2;text-decoration:underline;text-underline-offset:3px}
.ww-wg .meta{margin-top:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:var(--accent-text)}
.wm{position:relative;height:150px;border-radius:8px;background:#1F1F1F;overflow:hidden;display:grid;place-items:center}
html.ani .ww-wg article{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
html.ani .da .ww-wg article{opacity:1;transform:none}
html.ani .da .ww-wg article:nth-child(2){transition-delay:.08s}html.ani .da .ww-wg article:nth-child(3){transition-delay:.16s}
html.ani .da .ww-wg article:nth-child(4){transition-delay:.24s}html.ani .da .ww-wg article:nth-child(5){transition-delay:.32s}html.ani .da .ww-wg article:nth-child(6){transition-delay:.4s}

.wm-st{position:absolute;inset:16px 24px}
.wm-st .z{display:flex;flex-direction:column;gap:8px}
.wm-st .z i{height:8px;border-radius:4px;background:#333}.wm-st .z i:nth-child(2){width:80%}.wm-st .z i:nth-child(3){width:60%}
.wm-st .k{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;gap:6px;padding:5px 7px;border-radius:999px;background:#2E2E2E}
.wm-st .k i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#5A5A5A 0 52%,#2E2E2E 54% 62%,transparent 64%),conic-gradient(from 200deg,#F9A23A,#E0246B,#8A3FFC,#F9A23A);animation:wm-puls 3s infinite}
.wm-st .k i:nth-child(2){animation-delay:.4s}.wm-st .k i:nth-child(3){animation-delay:.8s}
@keyframes wm-puls{0%,70%,100%{transform:none}20%{transform:scale(1.14)}}

.wm-feed{display:flex;gap:8px;width:82%}
.wm-feed i{flex:1;height:96px;border-radius:6px;background:#2A2A2A;position:relative;overflow:hidden;animation:wm-feed 6s infinite}
.wm-feed i::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;background:#3A3A3A}
.wm-feed i::after{content:"";position:absolute;left:8px;right:12px;top:62%;height:7px;border-radius:4px;background:#4A4A4A;box-shadow:0 13px 0 -1px #3A3A3A}
.wm-feed i:nth-child(2){animation-delay:2s}.wm-feed i:nth-child(3){animation-delay:4s}
@keyframes wm-feed{0%,30%,100%{box-shadow:none}8%,22%{box-shadow:0 0 0 2px var(--accent)}}

.wm-push{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:86%}
.wm-push u{text-decoration:none;font-size:13px;font-weight:700;color:#A3A3A3;padding:7px 12px;border-radius:999px;background:#2A2A2A;animation:wm-push 10s infinite}
.wm-push u:nth-child(2){animation-delay:2s}.wm-push u:nth-child(3){animation-delay:4s}.wm-push u:nth-child(4){animation-delay:6s}.wm-push u:nth-child(5){animation-delay:8s}
@keyframes wm-push{0%,20%,100%{background:#2A2A2A;color:#A3A3A3}3%,17%{background:var(--accent);color:#fff}}

.wm-wand{display:flex;gap:10px;width:84%}
.wm-wand span{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;background:#2A2A2A;animation:wm-wand 6s ease-in-out infinite}
.wm-wand span:nth-child(2){animation-delay:-3s}
.wm-wand b{font-size:12px;letter-spacing:1px;color:#F5B83D}
.wm-wand i{height:6px;border-radius:3px;background:#444}.wm-wand i:nth-of-type(2){width:70%}
.wm-wand em{align-self:flex-start;margin-top:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#3A3A3A;color:#DDD;font-style:normal;font-size:10px;font-weight:800}
@keyframes wm-wand{50%{transform:translateY(-5px)}}

.wm-gate{display:flex;flex-direction:column;align-items:center;gap:12px}
.wm-gate .feld{display:flex;align-items:center;gap:6px;padding:5px;border-radius:8px;background:#2A2A2A;box-shadow:inset 0 0 0 1px #3A3A3A}
.wm-gate u{text-decoration:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;font-weight:700;color:#F2F2F2;width:7ch;overflow:hidden;white-space:nowrap;padding-left:6px;animation:wm-tippen 6s steps(6) infinite}
@keyframes wm-tippen{0%,8%{width:0}40%,100%{width:7ch}}
.wm-gate b{font-size:12px;color:#fff;padding:6px 10px;border-radius:6px;background:var(--accent)}
.wm-gate .auf{font-size:14px;font-weight:800;color:#C7F59B;opacity:0;animation:wm-auf 6s infinite}
@keyframes wm-auf{0%,48%{opacity:0;transform:translateY(-6px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}

.wm-link code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;color:#C9C9C9}
.wm-link b{color:#FF7AA8;font-weight:600}

.ww-bild{margin:44px auto 0;max-width:980px}
.ww-bild img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px #2A2A2A,0 40px 80px -40px rgba(0,0,0,.9)}
.ww-bild figcaption{margin-top:12px;font-size:14px;color:#A3A3A3;text-align:center}
.ww-hinweis{margin:24px auto 0;max-width:760px;font-size:15px;color:#A3A3A3;text-align:center}

/* Einbau-Code dunkel */
.ww-code{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.ww-code .schnipsel{min-width:0;background:#161616;border-radius:12px;padding:22px;box-shadow:0 0 0 1px #242424}
.ww-code .schnipsel:last-child:nth-child(odd){grid-column:1/-1}
.ww-code h3{font-size:18px;color:#fff;margin:0 0 6px}
.ww-code p{font-size:14px;line-height:1.55;color:#A3A3A3;margin:0 0 14px}
.ww-code pre{margin:0;padding:14px 16px;border-radius:8px;background:#0B0B0B;box-shadow:inset 0 0 0 1px #262626;white-space:pre-wrap;overflow-wrap:anywhere}
.ww-code pre code{display:block;padding:0;background:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;color:#E5E5E5;white-space:pre-wrap;overflow-wrap:anywhere}
.ww-code .a{color:#9BD3FF}.ww-code .w{color:#C7F59B}
#einbau .lead code,.ww-code p code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;padding:1px 5px;border-radius:4px;background:#242424;color:#F2F2F2}

/* Wirkung: Text links, Beispielkarte rechts */
.ww-wirkung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.ww-wirkung .sec-head{text-align:left;margin:0}
.ww-wirkung .sec-head,.ww-wirkung .sec-head .mono,.ww-wirkung .sec-head h2,.ww-wirkung .sec-head p{text-align:left!important;margin-left:0!important;justify-content:flex-start!important}
.ww-wirkung .ww-hinweis{text-align:left;margin:18px 0 0}
.ww-wk{background:#161616;border-radius:14px;padding:26px;box-shadow:0 0 0 1px #242424,0 40px 80px -40px rgba(224,36,107,.3)}
.ww-wk .mono{display:block;margin-bottom:18px}
.ww-wk .z{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;color:#D4D4D4}
.ww-wk b{height:10px;border-radius:5px;background:#262626;overflow:hidden}
.ww-wk i{display:block;height:100%;width:var(--w);border-radius:5px;background:linear-gradient(90deg,var(--accent),#FF7AA8)}
.ww-wk em{font-style:normal;font-weight:800;color:#fff;text-align:right}
.ww-wk .fuss{margin:16px 0 0;font-size:13px;color:#8A8A8A}
html.ani .ww-wk i{width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
html.ani .da .ww-wk i{width:var(--w)}
html.ani .da .ww-wk .z:nth-of-type(3) i{transition-delay:.12s}html.ani .da .ww-wk .z:nth-of-type(4) i{transition-delay:.24s}html.ani .da .ww-wk .z:nth-of-type(5) i{transition-delay:.36s}

@media (max-width:1000px){.ww-wg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .ww-szene{padding:0;display:flex;flex-direction:column;align-items:center}
  .ww-browser{width:100%}
  .ww-seite{--e:2cqw;--kb:calc((100% - var(--gap)) / 2);aspect-ratio:auto;padding-bottom:calc(var(--e)*12)}
  .ww-nav span:not(.an){display:none}
  .ww-pushleiste{font-size:calc(var(--e)*1.4)}
  .ww-feed{margin:0 calc(var(--e)*2.2);padding:calc(var(--e)*1.8)}
  .ww-app{position:relative;left:auto;bottom:auto;width:min(300px,86%);margin-top:16px}
  .ww-code,.ww-wirkung{grid-template-columns:1fr}
  .ww-code .schnipsel:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:620px){.ww-wg{grid-template-columns:1fr}.ww-wk .z{grid-template-columns:110px minmax(0,1fr) 40px}}
@media (prefers-reduced-motion:reduce){
  .ww-szene{opacity:1;animation:none}
  .ww-szene *,.wm *{animation:none!important}
  .ww-karte.ww-neu{flex-basis:var(--kb);margin-right:0;opacity:1}
  html.ani .ww-wg article{opacity:1;transform:none}
  html.ani .ww-wk i{width:var(--w)}
  .wm-gate .auf{opacity:1}
}