/* Push: Hero-Szene mit Browser (Glocke, Erlaubnis) und Sperrbildschirm, auf dem die Messages ankommen. Takt 12 s */
.ps-szene{order:2;position:relative;width:min(100%,1080px);margin-top:clamp(36px,4.5vw,60px);padding-bottom:clamp(30px,4vw,56px);opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.ps-szene *{text-align:left}

.ps-browser{width:80%;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)}
.ps-leiste{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:linear-gradient(#2A2A2A,#1F1F1F);border-bottom:1px solid #111}
.ps-leiste i{width:11px;height:11px;border-radius:50%;background:#4A4A4A}
.ps-url{margin-left:18px;flex:0 1 46%;height:24px;border-radius:6px;background:#121212;color:#9A9A9A;font-size:12px;line-height:24px;padding:0 12px;white-space:nowrap;overflow:hidden}
.ps-seite{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0D0D0D}
.ps-seite > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.ps-zeilen{position:absolute;left:6%;bottom:12%;max-width:52%;display:flex;flex-direction:column;gap:8px}
.ps-zeilen b{font-family:var(--font-display,inherit);font-size:clamp(22px,3vw,40px);line-height:1;color:#fff;text-transform:uppercase;letter-spacing:-.01em}
.ps-zeilen span{font-size:clamp(12px,1.2vw,16px);color:#E5E5E5}
.ps-zeilen i{display:block;width:130px;height:34px;border-radius:999px;background:#fff;margin-top:8px}

/* Glocke unten rechts, wie sie das Skript auf die Seite setzt */
.ps-glocke{position:absolute;right:15%;bottom:8%;width:clamp(40px,4.4vw,56px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 10px 30px -8px rgba(224,36,107,.8);animation:ps-glocke 12s infinite}
.ps-glocke svg{width:46%;height:46%}
@keyframes ps-glocke{0%,4%{transform:none}6%{transform:scale(.88)}8%,100%{transform:none}}
.ps-glocke::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ps-ring 12s infinite}
@keyframes ps-ring{0%,5%{opacity:0;transform:scale(.9)}6%{opacity:.9;transform:scale(1)}14%,100%{opacity:0;transform:scale(1.5)}}

/* Erlaubnis-Dialog des Browsers, oben links unter der Adresszeile */
.ps-dialog{position:absolute;left:3%;top:4%;width:min(330px,46%);background:#F4F4F4;color:#1A1A1A;border-radius:10px;padding:14px 16px;box-shadow:0 20px 50px -10px rgba(0,0,0,.7);opacity:0;transform:translateY(-8px);animation:ps-dialog 12s infinite}
.ps-dialog p{margin:0 0 12px;font-size:13px;line-height:1.4;color:#1A1A1A}
.ps-dialog b{font-weight:800}
.ps-dialog div{display:flex;justify-content:flex-end;gap:8px}
.ps-dialog span{font-size:12px;font-weight:700;padding:7px 12px;border-radius:6px;background:#E2E2E2;color:#1A1A1A}
.ps-dialog .ja{background:#1A1A1A;color:#fff;animation:ps-ja 12s infinite}
@keyframes ps-dialog{0%,7%{opacity:0;transform:translateY(-8px)}10%,27%{opacity:1;transform:none}31%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes ps-ja{0%,21%{background:#1A1A1A;transform:none}23%{background:var(--accent);transform:scale(.94)}25%,100%{background:var(--accent);transform:none}}

/* Handy mit Sperrbildschirm, ragt rechts ueber den Browser */
.ps-handy{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:9/19;padding:clamp(6px,.7vw,10px);border-radius:clamp(30px,3.4vw,46px);background:linear-gradient(145deg,#3C3C3C,#151515 40%,#0C0C0C);box-shadow:0 0 0 1px #4A4A4A,inset 0 1px 0 rgba(255,255,255,.2),0 60px 120px -40px rgba(0,0,0,.95),0 30px 80px -30px rgba(224,36,107,.45)}
.ps-display{position:relative;height:100%;border-radius:clamp(24px,2.8vw,38px);overflow:hidden;background:radial-gradient(120% 70% at 30% 0%,#5B1F3A 0%,#1B1130 45%,#07070C 100%);display:flex;flex-direction:column;align-items:center;padding:14% 6% 0}
.ps-display::before{content:"";position:absolute;top:2.6%;left:50%;width:32%;height:3.6%;translate:-50% 0;border-radius:999px;background:#000}
.ps-zeit{font-size:clamp(36px,5vw,64px);font-weight:300;color:#fff;line-height:1;letter-spacing:-.02em;text-align:center!important}
.ps-datum{font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.75);margin-top:6px;text-align:center!important}
.ps-mitteilungen{width:100%;margin-top:14%;display:flex;flex-direction:column}
.ps-balken{position:absolute;bottom:2%;left:50%;width:36%;height:4px;translate:-50% 0;border-radius:4px;background:rgba(255,255,255,.7)}

/* eine Mitteilung: klappt auf, die neueste steht oben */
.ps-push{display:flex;gap:8px;align-items:flex-start;padding:0 9px;border-radius:14px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-height:0;opacity:0;margin-bottom:0;overflow:hidden}
.ps-push.p1{order:3;animation:ps-p1 12s infinite}
.ps-push.p2{order:2;animation:ps-p2 12s infinite}
.ps-push.p3{order:1;animation:ps-p3 12s infinite}
@keyframes ps-p1{0%,32%{max-height:0;opacity:0;padding-block:0;margin-bottom:0;transform:translateY(-10px) scale(.96)}36%,93%{max-height:110px;opacity:1;padding-block:9px;margin-bottom:7px;transform:none}98%,100%{max-height:0;opacity:0;padding-block:0;margin-bottom:0}}
@keyframes ps-p2{0%,48%{max-height:0;opacity:0;padding-block:0;margin-bottom:0;transform:translateY(-10px) scale(.96)}52%,93%{max-height:110px;opacity:1;padding-block:9px;margin-bottom:7px;transform:none}98%,100%{max-height:0;opacity:0;padding-block:0;margin-bottom:0}}
@keyframes ps-p3{0%,64%{max-height:0;opacity:0;padding-block:0;margin-bottom:0;transform:translateY(-10px) scale(.96)}68%,93%{max-height:110px;opacity:1;padding-block:9px;margin-bottom:7px;transform:none}98%,100%{max-height:0;opacity:0;padding-block:0;margin-bottom:0}}
.ps-icon{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
.ps-push > div,.ps-mini > div{min-width:0;flex:1}
.ps-push p,.ps-mini p{margin:0;color:#fff;line-height:1.3}
.ps-push .k,.ps-mini .k{display:flex;justify-content:space-between;gap:6px;font-size:10px;color:rgba(255,255,255,.8)}
.ps-push .k em,.ps-mini .k em{font-style:normal;white-space:nowrap}
.ps-push .t,.ps-mini .t{font-size:12px;font-weight:700;margin-top:2px}
.ps-push .x{font-size:11px;color:rgba(255,255,255,.85)}

/* Mini-Bausteine in den Splits */
.ps-code{position:absolute;left:6%;right:6%;bottom:7%;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:10px;background:rgba(14,14,14,.92);box-shadow:0 0 0 1px #333,0 20px 40px -10px rgba(0,0,0,.8);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;color:#E5E5E5;white-space:nowrap;overflow:hidden}
.ps-code .c{color:#7A7A7A}
.ps-code b{color:#FF7AA8;font-weight:600}
.ps-code i{color:#9BD3FF;font-style:normal}
.ps-code em{color:#C7F59B;font-style:normal}
.ps-mini{position:absolute;left:8%;right:8%;top:9%;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(30,30,30,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 40px -12px rgba(0,0,0,.7)}
.ps-mini .ps-icon{width:32px;height:32px;border-radius:8px;font-size:15px}
.ps-mini .k{font-size:12px}.ps-mini .t{font-size:15px}
html.ani .ps-mini{opacity:0;transform:translateY(-14px);transition:opacity .6s .3s,transform .6s .3s}
html.ani .da .ps-mini{opacity:1;transform:none}

.ps-vier{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1000px){.ps-vier{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

@media (max-width:860px){
  .ps-szene{display:flex;justify-content:center;padding-bottom:0}
  .ps-browser{display:none}
  .ps-handy{position:relative;width:min(270px,78%)}
  .ps-zeit{font-size:52px}.ps-datum{font-size:12px}
}
@media (max-width:760px){.ps-vier{grid-template-columns:1fr!important}}
@media (prefers-reduced-motion:reduce){
  .ps-szene{opacity:1;animation:none}
  .ps-glocke,.ps-glocke::after,.ps-dialog,.ps-dialog .ja{animation:none}
  .ps-push{animation:none!important;max-height:110px;opacity:1;padding-block:9px;margin-bottom:7px}
  html.ani .ps-mini{opacity:1;transform:none}
}