/* Drop-Widgets (29.10.2026): jede Drop-Kachel ein kleines, echtes Mini-Interface. Standard: Widget-Inhalt auf dem Foto (.sc-frei),
   ?drops=anim: nur Widgets ohne Foto (.sc-nurani).
   Masse in em, Schrift setzt die Kachel; Bewegung nur ueber transform/opacity */
.sc-nurani .sc-bild-q img{display:none}
.sc-nurani .sc-bild-q{font-size:10px}
@media (max-width:620px){.sc-nurani .sc-bild-q{font-size:7.9px}}
.w{position:absolute;left:1.2em;right:1.2em;top:1.2em;bottom:3.9em;background:#fff;color:#16171A;border-radius:1em;padding:1em;overflow:hidden;box-shadow:0 1em 2.4em rgba(0,0,0,.45);font-family:var(--f-body);font-size:1em;line-height:1.25;text-align:left;display:flex;flex-direction:column;gap:.55em}
.w *{box-sizing:border-box}
.w .k{font:700 .78em var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#E0246B}
.sc-cover .w b{font-size:1.15em;font-weight:800;letter-spacing:-.01em;color:#16171A;white-space:normal;overflow:visible;line-height:1.2;max-width:none}
.sc-cover .w-tv b,.sc-cover .w-tv .folie{color:#fff}
.w small{font-size:.85em;color:#6B7077}
.w .z{display:block;height:.55em;border-radius:.3em;background:#ECEAE6;width:var(--w,100%);flex:none}
.w .reihe{display:flex;align-items:center;gap:.6em}
.w .av{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:linear-gradient(135deg,#FF5A8A,#E0246B)}
.w .knopf{align-self:flex-start;background:#E0246B;color:#fff;font-weight:800;font-size:.9em;padding:.45em .9em;border-radius:999px;animation:w-puls 2.4s ease-in-out infinite}
.w .ok{flex:none;width:1.4em;height:1.4em;border-radius:50%;border:.15em solid #D8D5D0;position:relative}
.w .ok::after{content:"";position:absolute;left:.32em;top:.12em;width:.35em;height:.65em;border:solid #fff;border-width:0 .16em .16em 0;transform:rotate(45deg)}
@keyframes w-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes w-tipp{0%{transform:scaleX(0)}45%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes w-rein{0%{opacity:0;transform:translateY(.8em)}12%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes w-plopp{0%,10%{transform:scale(0);opacity:0}22%{transform:scale(1.2);opacity:1}30%,88%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes w-hak{0%,8%{background:transparent;border-color:#D8D5D0}16%,90%{background:#1E8A5A;border-color:#1E8A5A}100%{background:transparent;border-color:#D8D5D0}}
@keyframes w-pink{0%,8%{background:#F1EFEC;color:#16171A}16%,90%{background:#E0246B;color:#fff}100%{background:#F1EFEC;color:#16171A}}
.w .tipp{transform-origin:left;animation:w-tipp 5s ease-in-out infinite}
.w .tipp:nth-of-type(2){animation-delay:.25s}.w .tipp:nth-of-type(3){animation-delay:.5s}.w .tipp:nth-of-type(4){animation-delay:.75s}
.w .nach{animation:w-rein 5s ease-out infinite}
.w .ploppt{animation:w-plopp 5s ease-out infinite}
.w .hak{animation:w-hak 5s ease-out infinite}
.w .d1{animation-delay:.4s!important}.w .d2{animation-delay:.8s!important}.w .d3{animation-delay:1.2s!important}.w .d4{animation-delay:1.6s!important}.w .d5{animation-delay:2s!important}

/* Bild-Flaechen ohne Foto */
.w .bild{border-radius:.6em;background:linear-gradient(135deg,#34405E,#A6B6E3);flex:1;min-height:0;position:relative;overflow:hidden}
.w .bild.p{background:linear-gradient(135deg,#9C2F4F,#F2A3BB)}
.w .bild.o{background:linear-gradient(135deg,#B8661E,#FFC58A)}
.w .bild.g{background:linear-gradient(135deg,#0E7C74,#8FD6CC)}

/* Instagram-Post mit Herz */
.w-insta .bild{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.05em;letter-spacing:.06em}
.w-insta .herz{position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;background:#fff;clip-path:path('M13 23s-9-5.6-9-12.2A5.1 5.1 0 0 1 13 7.6a5.1 5.1 0 0 1 9 3.2C22 17.4 13 23 13 23z');animation:w-plopp 3s ease-out infinite;transform-origin:center}
.w-insta .unten{display:flex;justify-content:space-between;font-size:.85em;font-weight:700}

/* Sterne */
.w-sterne .gross{font-size:2.6em;font-weight:900;letter-spacing:-.04em;line-height:1}
.w-sterne .st{display:flex;gap:.25em}
.w-sterne .st i{width:1.6em;height:1.6em;background:#D8D5D0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:w-stern 5s ease-out infinite}
@keyframes w-stern{0%,8%{background:#D8D5D0;transform:scale(1)}14%{background:#F5B301;transform:scale(1.25)}20%,88%{background:#F5B301;transform:scale(1)}100%{background:#D8D5D0}}

/* Liste mit Haken (Regeln, Verteiler, Portale) */
.w .zeile{display:flex;align-items:center;gap:.6em;font-size:.95em;font-weight:600}
.w .zeile span{flex:1}

/* Schalter (Jobportale) */
.w .sch{flex:none;width:2.4em;height:1.35em;border-radius:1em;background:#D8D5D0;position:relative;animation:w-schbg 5s ease-out infinite}
.w .sch::after{content:"";position:absolute;left:.18em;top:.18em;width:1em;height:1em;border-radius:50%;background:#fff;animation:w-schk 5s ease-out infinite;animation-delay:inherit}
@keyframes w-schbg{0%,8%{background:#D8D5D0}16%,90%{background:#1E8A5A}100%{background:#D8D5D0}}
@keyframes w-schk{0%,8%{transform:none}16%,90%{transform:translateX(1.05em)}100%{transform:none}}

/* Chips */
.w .chips{display:flex;flex-wrap:wrap;gap:.4em}
.w .chips span{font-size:.85em;font-weight:700;padding:.35em .7em;border-radius:999px;background:#F1EFEC}
.w .chips.an span{animation:w-pink 5s ease-out infinite}

/* Balken (Reichweite, AIDA, Plan) */
.w-chart .bars{flex:1;display:flex;align-items:flex-end;gap:.5em;padding-top:.4em}
.w-chart .bars i{flex:1;border-radius:.35em .35em 0 0;background:#F2A3BB;height:var(--h);transform-origin:bottom;animation:w-wachs 5s ease-out infinite}
.w-chart .bars i:last-child{background:#E0246B}
@keyframes w-wachs{0%{transform:scaleY(.1)}40%,88%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:.4}}
.w-chart .plus{font-size:1.6em;font-weight:900;color:#1E8A5A;line-height:1}
.w-aida .stufe{align-self:center;height:1.7em;border-radius:.4em;background:#F1EFEC;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9em;animation:w-pink 5s ease-out infinite}
.w-gantt .kopf{display:grid;grid-template-columns:repeat(6,1fr);font:700 .75em var(--f-mono);color:#6B7077}
.w-gantt .spur{position:relative;height:1.1em;background:#F6F5F2;border-radius:.3em}
.w-gantt .spur i{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:.3em;background:#E0246B;transform-origin:left;animation:w-tipp 5s ease-in-out infinite}
.w-gantt .spur:nth-child(odd) i{background:#F2A3BB}

/* Raster: Kalender, Wochenplan, 4P, UGC */
.w-kal .gitter{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}
.w-kal .gitter i{border-radius:.25em;background:#F6F5F2;position:relative}
.w-kal .gitter i.p::after{content:"";position:absolute;left:50%;top:50%;width:.6em;height:.6em;margin:-.3em;border-radius:50%;background:#E0246B;animation:w-plopp 5s ease-out infinite;animation-delay:inherit}
.w-woche .spalten{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:.35em}
.w-woche .spalten > span{display:flex;flex-direction:column;gap:.3em;font:700 .72em var(--f-mono);color:#6B7077;text-align:center}
.w-woche .spalten i{height:2.2em;border-radius:.35em;background:#F2A3BB;animation:w-rein 5s ease-out infinite}
.w-woche .spalten i.p{background:#E0246B}
.w-4p .gitter{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.45em}
.w-4p .gitter span{border-radius:.5em;background:#F1EFEC;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95em;animation:w-pink 5s ease-out infinite}
.w-ugc .gitter{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.35em}
.w-ugc .gitter span{border-radius:.45em;position:relative}
.w-ugc .gitter span .ok{position:absolute;right:.3em;bottom:.3em;border-color:#fff;animation:w-hak 5s ease-out infinite;animation-delay:inherit}

/* Browser, Telefon, Bildschirm */
.w .leiste{display:flex;gap:.3em;padding-bottom:.2em}
.w .leiste i{width:.55em;height:.55em;border-radius:50%;background:#D8D5D0}
.w-webzitat .spur{flex:1;display:flex;gap:.6em;overflow:hidden}
.w-webzitat .karte{flex:none;width:100%;background:#F6F5F2;border-radius:.6em;padding:.7em;display:flex;flex-direction:column;gap:.45em;animation:w-schieb 6s ease-in-out infinite}
@keyframes w-schieb{0%,40%{transform:none}50%,90%{transform:translateX(calc(-100% - .6em))}100%{transform:none}}
.w-bio{align-items:center}
.w-bio .av{width:2.6em;height:2.6em}
.w-bio .lnk{width:88%;height:1.7em;border-radius:999px;background:#F1EFEC;flex:none;animation:w-rein 5s ease-out infinite}
.w-bio .lnk.p{background:#E0246B}
.w-tv{background:#16171A;border:.45em solid #2A2C31;padding:.6em}
.w-tv .folie{position:absolute;inset:.6em;border-radius:.4em;display:flex;flex-direction:column;justify-content:flex-end;padding:.7em;color:#fff;font-weight:800;animation:w-folie 6s ease-in-out infinite}
.w-tv .folie.b{animation-delay:-3s}
@keyframes w-folie{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
.w-tv .qr{position:absolute;right:1em;top:1em;width:2.4em;height:2.4em;border-radius:.25em;background:repeating-linear-gradient(90deg,#fff 0 .3em,#16171A .3em .5em),#fff;z-index:2}
.w-qr{align-items:center;justify-content:center}
.w-qr .code{position:relative;width:5.4em;height:5.4em;background:conic-gradient(#16171A 25%,#fff 0 50%,#16171A 0 75%,#fff 0) 0 0/1.35em 1.35em;border:.4em solid #fff;outline:.15em solid #16171A;border-radius:.3em}
.w-qr .scan{position:absolute;left:-.4em;right:-.4em;top:0;height:.25em;background:#E0246B;box-shadow:0 0 .8em #E0246B;animation:w-scan 2.2s ease-in-out infinite alternate}
@keyframes w-scan{to{transform:translateY(4.6em)}}

/* Blasen (KI, Kundenstimme) */
.w .blase{background:#F1EFEC;border-radius:.9em .9em .9em .2em;padding:.6em .7em;display:flex;flex-direction:column;gap:.35em}
.w .blase.r{align-self:flex-end;border-radius:.9em .9em .2em .9em;background:#16171A;color:#fff;font-size:.9em;font-weight:600}
.w .blase.p{background:#FCE1EB}
.w .blase.p .z{background:#F2A3BB}

/* Gewinner mit Konfetti */
.w-gewinner{align-items:center;justify-content:center;text-align:center}
.w-gewinner .av{width:3em;height:3em}
.w-gewinner .konf{position:absolute;top:-1em;width:.55em;height:.8em;border-radius:.1em;animation:w-konf 2.8s linear infinite}
@keyframes w-konf{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(14em) rotate(540deg)}}

/* Newsroom und Portal */
.w-nr{padding:0}
.w-nr .kopf{background:#E0246B;color:#fff;font-weight:800;padding:.7em 1em;font-size:.95em}
.w-nr .karten{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;padding:0 .8em .8em}
.w-nr .karten span{border-radius:.5em;background:#F1EFEC;display:flex;flex-direction:column;justify-content:flex-end;gap:.3em;padding:.4em;animation:w-plopp 5s ease-out infinite}
.w-nr .karten span::before{content:"";flex:1;border-radius:.35em;background:linear-gradient(135deg,#34405E,#A6B6E3)}
.w-nr .karten span:nth-child(2)::before{background:linear-gradient(135deg,#9C2F4F,#F2A3BB)}
.w-nr .karten span:nth-child(3)::before{background:linear-gradient(135deg,#0E7C74,#8FD6CC)}
.w-portal .eintrag{display:flex;gap:.6em;align-items:center;padding:.4em;border-radius:.5em;background:#F6F5F2}
.w-portal .eintrag.neu{background:#FCE1EB;animation:w-rein 5s ease-out infinite}
.w-portal .sq{flex:none;width:2.2em;height:2.2em;border-radius:.4em;background:linear-gradient(135deg,#34405E,#A6B6E3)}
.w-portal .eintrag.neu .sq{background:linear-gradient(135deg,#9C2F4F,#F2A3BB)}
.w-portal .eintrag > span{flex:1;display:flex;flex-direction:column;gap:.3em;min-width:0}
.w-portal em{font-style:normal;font-size:.72em;font-weight:800;color:#fff;background:#E0246B;border-radius:.3em;padding:.1em .35em;align-self:flex-start}

/* Event-Anmeldung */
.w-anm .datum{flex:none;width:3em;border-radius:.5em;background:#E0246B;color:#fff;text-align:center;font:800 .75em/1.1 var(--f-body);padding:.35em 0}
.w-anm .datum strong{display:block;font-size:1.7em}
.w-anm .avs{display:flex}
.w-anm .avs i{width:1.9em;height:1.9em;border-radius:50%;border:.18em solid #fff;margin-left:-.5em;animation:w-plopp 5s ease-out infinite}
.w-anm .avs i:first-child{margin-left:0}
.w-anm .platz{height:.7em;border-radius:.4em;background:#F1EFEC;overflow:hidden}
.w-anm .platz i{display:block;height:100%;width:85%;background:#E0246B;transform-origin:left;animation:w-tipp 5s ease-in-out infinite}

/* Mail mit Signatur */
.w-mail .sig{margin-top:auto;border-top:.12em solid #ECEAE6;padding-top:.5em;display:flex;flex-direction:column;gap:.4em}
.w-mail .banner{height:2em;border-radius:.4em;background:linear-gradient(90deg,#E0246B,#FF7A59);color:#fff;font-weight:800;font-size:.85em;display:flex;align-items:center;padding:0 .7em;animation:w-rein 5s ease-out infinite}

@media (prefers-reduced-motion:reduce){.sc-nurani .w *,.sc-nurani .w *::after,.sc-nurani .w *::before{animation:none!important}}

/* Dark Mode (29.10.2026): Widgets dunkel wie die Seite, Flaechen aus Weiss mit wenig Deckkraft, Pink bleibt Akzent.
   Der QR-Code bleibt hell, sonst waere er kein QR-Code */
.w{background:#232325;color:#F2F3F5;border:1px solid rgba(255,255,255,.09);box-shadow:0 1em 2.4em rgba(0,0,0,.55)}
.sc-cover .w b{color:#fff}
.w small{color:#9AA0A6}
.w .k{color:#FF5C93}
.w .z{background:rgba(255,255,255,.12)}
.w .ok{border-color:rgba(255,255,255,.25)}
@keyframes w-hak{0%,8%{background:transparent;border-color:rgba(255,255,255,.25)}16%,90%{background:#22A06B;border-color:#22A06B}100%{background:transparent;border-color:rgba(255,255,255,.25)}}
@keyframes w-pink{0%,8%{background:rgba(255,255,255,.08);color:#F2F3F5}16%,90%{background:#E0246B;color:#fff}100%{background:rgba(255,255,255,.08);color:#F2F3F5}}
@keyframes w-schbg{0%,8%{background:rgba(255,255,255,.18)}16%,90%{background:#22A06B}100%{background:rgba(255,255,255,.18)}}
@keyframes w-stern{0%,8%{background:rgba(255,255,255,.18);transform:scale(1)}14%{background:#F5B301;transform:scale(1.25)}20%,88%{background:#F5B301;transform:scale(1)}100%{background:rgba(255,255,255,.18)}}
.w .chips span,.w-aida .stufe,.w-4p .gitter span{background:rgba(255,255,255,.08);color:#F2F3F5}
.w .sch{background:rgba(255,255,255,.18)}
.w-sterne .st i{background:rgba(255,255,255,.18)}
.w .blase{background:rgba(255,255,255,.08)}
.w .blase.r{background:#E0246B;color:#fff}
.w .blase.p{background:rgba(224,36,107,.18)}
.w .blase.p .z{background:rgba(255,92,147,.45)}
.w-portal .eintrag{background:rgba(255,255,255,.06)}
.w-portal .eintrag.neu{background:rgba(224,36,107,.2)}
.w-nr .karten span{background:rgba(255,255,255,.07)}
.w-kal .gitter i,.w-gantt .spur{background:rgba(255,255,255,.07)}
.w-gantt .kopf,.w-woche .spalten > span{color:#9AA0A6}
.w-webzitat .karte{background:rgba(255,255,255,.07)}
.w-bio .lnk{background:rgba(255,255,255,.1)}
.w-bio .lnk.p{background:#E0246B}
.w .leiste i{background:rgba(255,255,255,.22)}
.w-anm .avs i{border-color:#232325}
.w-anm .platz{background:rgba(255,255,255,.1)}
.w-mail .sig{border-top-color:rgba(255,255,255,.12)}
.w-tv{background:#111;border-color:#2E2F33}
.w .gevent-datum,.w [style*="background:#FCE1EB"]{background:rgba(224,36,107,.22)!important;color:#FF7BA6!important}
.sc-cover .w b[style*="#1a3fb0"]{color:#9DB6FF!important}
.w-ugc .gitter span .ok{border-color:#fff}
.w-qr .code{outline-color:rgba(255,255,255,.3)}

/* Ohne Hintergrund (29.10.2026): das Widget ist die Kachel, kein Schein und kein Rahmen dahinter; unten Platz fuers Etikett */
.sc-nurani .sc-anim{background:none!important;border:0!important}
.sc-nurani .sc-bild-q{border-radius:6px}
.sc-nurani .w{left:0;right:0;top:0;bottom:0;border-radius:6px;padding:1.3em 1.3em 3.6em;box-shadow:none}
.sc-nurani .w-nr{padding:0 0 3.6em}
.sc-nurani .w-tv{border-width:.6em}
.sc-nurani .w-tv .folie{bottom:3.2em}

/* Standard (Widgets + Fotos): nur der Inhalt des Widgets liegt auf dem Foto, ohne Karte dahinter.
   Dunkler Verlauf auf dem Foto haelt Schrift und Bausteine lesbar */
.sc-frei .sc-bild-q{font-size:9px}
@media (max-width:620px){.sc-frei .sc-bild-q{font-size:7.2px}}
.sc-frei .sc-anim::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.38) 55%,rgba(0,0,0,.7))}
.sc-frei .w{left:1.4em;right:1.4em;top:1.4em;bottom:4.2em;padding:0;background:none;border:0;box-shadow:none;z-index:1;overflow:visible;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.sc-frei .w-nr .karten{padding:0}
.sc-frei .w-nr .kopf{border-radius:.5em;margin-bottom:.5em}
.sc-frei .w .z{background:rgba(255,255,255,.42)}
.sc-frei .w small{color:rgba(255,255,255,.78)}
.sc-frei .w .blase{background:rgba(18,18,20,.6)}
.sc-frei .w .blase.p{background:rgba(224,36,107,.45)}
.sc-frei .w-portal .eintrag,.sc-frei .w-webzitat .karte,.sc-frei .w-nr .karten span{background:rgba(18,18,20,.55)}
.sc-frei .w-portal .eintrag.neu{background:rgba(224,36,107,.45)}
.sc-frei .w .chips span,.sc-frei .w-aida .stufe,.sc-frei .w-4p .gitter span{background:rgba(18,18,20,.55)}
.sc-frei .w-kal .gitter i,.sc-frei .w-gantt .spur{background:rgba(255,255,255,.16)}
.sc-frei .w-bio .lnk{background:rgba(255,255,255,.28)}
.sc-frei .w-bio .lnk.p{background:#E0246B}
.sc-frei .w-tv{padding:.6em;background:#111;border:.45em solid #2E2F33;border-radius:.6em}
.sc-frei .w-anm .avs i{border-color:rgba(0,0,0,.4)}
.sc-frei .sc-cover:hover .w{transform:translateY(-.3em);transition:transform .3s ease}
.sc-frei .sc-tag,.sc-frei .sc-play{z-index:2}