/* Gerade laeuft (Paket 1017-0110, A-20261017-01) - nur die freigegebenen Varianten aus dem Prototyp. Generiert aus referenz/proto-basis.css. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.js-open,.js-listen{cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.band) button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.band{position:relative;overflow:hidden;color:#fff;background:#5a1f29;transition:height .5s var(--ease),opacity .4s;height:68px}
html[data-off] .band{height:0;opacity:0}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(38,9,15,.62),rgba(38,9,15,.18) 62%,rgba(38,9,15,.4))}
@keyframes bin{from{opacity:0;transform:translateY(10px);filter:blur(5px)}}
@keyframes live{to{box-shadow:0 0 0 9px rgba(255,143,160,0)}}
.bv2{align-items:center;gap:0}
.b2-chip{flex:none;position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;height:30px;margin-left:16px;padding:0 11px;border-radius:15px;font:800 11px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28)}
.b2-run{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 88%,transparent)}
.b2-track{display:inline-flex;white-space:nowrap;animation:run 16s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}
.b2-item{display:inline-flex;align-items:baseline;gap:10px;padding:0 6px 0 18px;font:500 15px Manrope,sans-serif}
.b2-item em{font:italic 500 29px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.01em}
.b2-item .j-sub{opacity:.82}
.b2-item .dot{opacity:.55;font-size:11px;margin-left:10px}
.band.thin{height:42px}
.dim{position:fixed;inset:0;z-index:40;background:rgba(20,8,12,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .4s}
.dim.show{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:600px;margin:0 auto;height:min(92vh,820px);border-radius:32px 32px 0 0;overflow:hidden;transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.9,.15,1);background:#2c0d13;color:#fff;display:flex;flex-direction:column}
.sheet.show{transform:none}
.sh-scroll{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain}
.sh-hero{position:relative;height:250px;flex:none}
.sh-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 2.2s var(--ease)}
.sheet.show .sh-hero video{transform:scale(1)}
.sh-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#2c0d13)}
.sh-grab{position:absolute;left:50%;top:9px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(255,255,255,.45);z-index:3}
.sh-close{position:absolute;right:14px;top:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font:500 24px/1 Manrope,sans-serif;cursor:pointer}
.sh-card{position:relative;z-index:2;margin:-118px 16px 0;padding:20px 20px 18px;border-radius:26px;background:rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:12px}
.sh-hist{padding:26px 20px calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
.sh-hist h4{margin:0 0 6px 2px;font:400 30px/1 Sacramento,cursive;color:#f1b7c0}
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hist button{width:100%;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 8px;border:0;border-radius:18px;background:transparent;color:#fff;text-align:left;cursor:pointer;transition:background .25s}
.hist button:hover,.hist button:active{background:rgba(255,255,255,.07)}
.hist img{flex:none;width:48px;height:48px;border-radius:12px;object-fit:cover}
.h-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.h-tx b{font:800 15px/1.2 Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-tx span{font:500 13px Manrope,sans-serif;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-when{flex:none;font:700 11.5px Manrope,sans-serif;opacity:.55}
.h-pl{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.h-pod{display:inline-block;font:800 9.5px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.16);margin-right:6px;vertical-align:1px}
.sh-foot{margin:14px 0 0;text-align:center;font:600 12px Manrope,sans-serif;opacity:.5}
.sheet .stg{opacity:0;transform:translateY(16px)}
.sheet.show .stg{opacity:1;transform:none;transition:opacity .7s ease,transform .8s var(--ease)}
.np-toast{pointer-events:none;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,20px);opacity:0;padding:12px 16px;border-radius:16px;background:#1b0a0e;color:#fff;font:700 13.5px Manrope,sans-serif;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:opacity .35s,transform .45s var(--ease);max-width:calc(100% - 32px);text-align:center}
.np-toast.show{opacity:1;transform:translate(-50%,0)}
.sh-card{min-height:330px}
.pl-title{margin:0;font:800 30px/1.05 Manrope,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.pl-title .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(6px);animation:chIn .7s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes chIn{to{opacity:1;transform:none;filter:none}}
.pl-sub{margin:-4px 0 0;font:500 15px Manrope,sans-serif;opacity:.78}
.pl-live{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:13px;font:800 10.5px Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.pl-live i{width:7px;height:7px;border-radius:50%;background:#ff8fa0;animation:live 1.8s ease-out infinite}
.pp{position:relative;width:72px;height:72px;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:#7d2433;cursor:pointer;box-shadow:0 16px 34px -12px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.34,1.7,.5,1),box-shadow .3s;overflow:hidden;-webkit-tap-highlight-color:transparent}
.pp svg{width:30px;height:30px;position:relative;z-index:1}
.pp path{fill:currentColor}
.pp:active{transform:scale(.86)}
.pp:focus-visible{outline:2px solid #fff;outline-offset:4px}
.pp .rip{position:absolute;border-radius:50%;background:rgba(158,58,73,.25);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
.pp-glow::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);animation:invite 2.2s ease-out infinite}
@keyframes invite{from{transform:scale(.85);opacity:.9}to{transform:scale(1.35);opacity:0}}
.pp-wrap{position:relative;display:grid;place-items:center}
.pl-state{min-height:22px;text-align:center;font:700 13px Manrope,sans-serif;opacity:.85;display:flex;align-items:center;justify-content:center;gap:8px}
.sync{position:relative;width:22px;height:10px;display:none}
.sync i{position:absolute;top:1px;width:8px;height:8px;border-radius:50%;background:#fff;animation:syncL 2.4s ease-in-out infinite}
.sync i+i{background:#ff8fa0;animation-name:syncR;mix-blend-mode:screen}
@keyframes syncL{0%,100%{left:0}45%,55%{left:7px}}
@keyframes syncR{0%,100%{left:14px}45%,55%{left:7px}}
.ctrl{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:4px}
.ghost{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.7,.5,1),background .25s}
.ghost:active{transform:scale(.85)}
.ghost:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ghost.liked{background:#ff8fa0;border-color:#ff8fa0;color:#3b1219}
.ghost.liked svg{animation:heart .6s cubic-bezier(.34,1.8,.5,1)}
@keyframes heart{30%{transform:scale(1.45)}}
.burst{position:absolute;pointer-events:none;width:6px;height:6px;border-radius:50%;background:#ff8fa0;animation:burst .7s ease-out forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.pv{display:none;flex-direction:column;gap:12px}
canvas.eqc{display:block;width:100%;height:100%}
html:not([data-band="1"]) #band{display:none}
html[data-off] .np-any{display:none!important}
.b2-chip .eqc{width:22px;height:14px}
.hh-av-paar .avatar{position:relative;isolation:isolate;overflow:visible!important}
.viz{position:relative;height:96px;margin:6px -4px 0;cursor:pointer;touch-action:none}
.viz canvas{width:100%;height:100%;display:block}
canvas.eqc{color:#fff}
.sheet{height:min(78vh,700px)}
.viz{height:auto;aspect-ratio:21/9;margin:2px -20px 0;overflow:hidden;cursor:pointer}
.sh-card{background:#36121a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.viz{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.viz{aspect-ratio:auto!important;height:64px;margin:4px -6px 0!important}
.tw{display:flex;flex-direction:column;gap:9px;margin-top:2px;position:relative}
.t-row{display:flex;justify-content:space-between;align-items:baseline}
.tdig{display:inline-flex;font:700 13px/1 Manrope,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff}
.tdig.mut{color:rgba(255,255,255,.55)}
.tdig span{display:inline-block}
.tdig span.fl{animation:dig .45s cubic-bezier(.2,.9,.2,1)}
@keyframes dig{from{transform:translateY(55%);opacity:0;filter:blur(2px)}}
.bub{position:absolute;bottom:calc(100% + 10px);transform:translate(-50%,6px) scale(.8);padding:5px 9px;border-radius:10px;background:#fff;color:#7d2433;font:800 12px Manrope,sans-serif;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.34,1.7,.5,1);white-space:nowrap}
.bub::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:#fff;transform:rotate(45deg);border-radius:1px}
.tw.drag .bub{opacity:1;transform:translate(-50%,0) scale(1)}
.js-seek{cursor:pointer;touch-action:none}
.js-seek:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:8px}
.t2-big{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:2px}
.t2-big .tdig{font:800 42px/1 Manrope,sans-serif;letter-spacing:-.03em}
.t2-of{font:600 15px Manrope,sans-serif;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.t2-track{position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.18);margin:12px 4px 2px}
.t2-track i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(255,190,200,.9);transition:width 1s linear}
.t2-track b{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;transition:left 1s linear,transform .3s cubic-bezier(.34,1.7,.5,1)}
.tw.drag .t2-track b{transform:scale(2)}
.tw.drag .t2-track i,.tw.drag .t2-track b{transition-property:transform}
.viz{height:70px!important;margin:6px 0 0!important;-webkit-mask-image:none!important;mask-image:none!important;overflow:visible!important}
.viz canvas{display:block;width:100%;height:100%}
canvas.eqc{display:block;flex:none;color:#fff}
.b2-chip canvas.eqc{width:18px;height:13px}
.viz{height:84px!important}
.hh-av-paar .avatar{position:relative;overflow:visible!important}
.hh-av-paar .avatar img{transition:box-shadow .12s linear;border-radius:50%}
.av-badge{position:absolute;right:-5px;bottom:-4px;z-index:3;width:22px;height:22px;border-radius:50%;place-items:center;background:var(--accent);box-shadow:0 0 0 2.5px var(--bg),0 4px 10px -3px rgba(158,58,73,.6);animation:badgeIn .6s cubic-bezier(.34,1.7,.5,1) both}
.av-badge canvas{width:12px;height:12px;display:block}
@keyframes badgeIn{from{transform:scale(0)}}
.sh-card .viz{margin-top:10px!important}
.hh-av-paar .avatar{z-index:2}
.av-badge canvas{color:#fff}
.ld{position:relative;display:inline-grid;place-items:center;width:10px;height:10px;flex:none}
.ld .d{width:7px;height:7px;border-radius:50%;background:#ff3b52;box-shadow:0 0 0 0 rgba(255,59,82,.6);animation:ldp 1.6s ease-out infinite;transition:transform .35s cubic-bezier(.34,1.7,.5,1),opacity .2s}
@keyframes ldp{to{box-shadow:0 0 0 6px rgba(255,59,82,0)}}
.ld .n{position:absolute;inset:-4px -3px;display:grid;place-items:center;font:800 12px/1 Manrope,sans-serif;font-style:normal;color:#ff3b52;opacity:0;transform:scale(.2) rotate(-30deg)}
.ld.note .d{transform:scale(0);opacity:0}
.ld.note .n{animation:ldn 1.7s cubic-bezier(.34,1.6,.5,1) forwards}
@keyframes ldn{0%{opacity:0;transform:scale(.2) rotate(-30deg)}22%{opacity:1;transform:scale(1.15) rotate(8deg)}38%{transform:scale(1) rotate(-10deg) translateY(-1px)}54%{transform:scale(1) rotate(10deg)}70%{transform:scale(1) rotate(-6deg)}86%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.3) translateY(-6px)}}
.pl-live{height:22px!important;padding:0 9px 0 7px!important;gap:6px!important;font:800 9.5px/1 Manrope,sans-serif!important;letter-spacing:.12em!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important}
.pl-live>i{display:none}
.pl-live .ld .n{color:#ff8fa0}
html[data-band="t4"]:not([data-off]) .av-badge{display:grid}
.chat-head .status .tg{align-items:center;gap:6px;white-space:nowrap;max-width:62vw;overflow:hidden}
.chat-head .status .tg strong{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.chat-head .status .tg2{color:var(--accent);font:600 13.5px/1.2 Manrope,sans-serif}
.ld .d,.ld .n{display:block!important}
.ld .n{display:grid!important}
.t2-big{justify-content:center!important;gap:0!important}
.t2-big .tdig{font:800 44px/1 Manrope,sans-serif!important;letter-spacing:-.03em;justify-content:center;min-width:3.2ch;text-align:center}
.t2-track{margin:14px 0 0!important}
.t2-ends{display:flex;justify-content:space-between;margin-top:7px;font:700 11.5px/1 Manrope,sans-serif;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.sh-card .tw.t2+.ctrl{margin-top:10px}
#band.band-in{animation:bandIn .9s cubic-bezier(.2,.9,.2,1) both}
@keyframes bandIn{from{height:0;opacity:0}to{height:68px;opacity:1}}
#band.band-in .bv2{animation:bin .9s .25s cubic-bezier(.2,.8,.2,1) both}
#band.band-out{animation:bandOut .65s cubic-bezier(.6,0,.4,1) both}
@keyframes bandOut{0%{height:68px;opacity:1}100%{height:0;opacity:0;filter:blur(4px)}}
html[data-band="t4"] .tg2{animation:tagIn .7s cubic-bezier(.2,.9,.2,1) both}
@keyframes tagIn{from{opacity:0;transform:translateY(-8px);filter:blur(3px)}}
.hint-note{position:absolute;z-index:8;display:flex;align-items:flex-start;gap:4px;padding:0;border:0;background:none;cursor:pointer;color:var(--accent);opacity:0;pointer-events:none;transition:opacity .6s ease}
.hint-note.show{opacity:1;pointer-events:auto}
.hint-note.hide{opacity:0!important;pointer-events:none}
.hint-note svg{flex:none;width:34px;height:38px;overflow:visible;margin-top:-6px}
.hint-note svg path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80}
.hint-note.show svg path{animation:drawA .8s cubic-bezier(.5,0,.3,1) forwards}
.hint-note.show svg path+path{animation-delay:.6s}
@keyframes drawA{to{stroke-dashoffset:0}}
.hint-note span{font:400 25px/1.05 Sacramento,cursive;white-space:nowrap;padding-top:14px;
 -webkit-mask-image:linear-gradient(90deg,#000 0 45%,transparent 55% 100%);mask-image:linear-gradient(90deg,#000 0 45%,transparent 55% 100%);
 -webkit-mask-size:230% 100%;mask-size:230% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.hint-note.show span{animation:writeN 2.2s linear .7s forwards}
@keyframes writeN{to{-webkit-mask-position:0 0;mask-position:0 0}}
.hint-note.show{animation:noteFloat 4s ease-in-out 3s infinite}
@keyframes noteFloat{50%{transform:translateY(-2px)}}
.hint-note span{white-space:normal;max-width:205px;font-size:23px;line-height:1;text-align:left}

/* Nur die Teile von "Gerade laeuft" ruhig stellen - nicht die ganze Seite (Prototyp hatte "*{animation:none}") */
@media (prefers-reduced-motion:reduce){#band,#band *,.hint-note,.hint-note *,.ld,.ld *,.av-badge,.tg2,.sheet,.sheet *,.dim,.np-toast{animation:none!important;transition:none!important}}
/* Tag + Plakette (Variante t4): Punkt und Text statt "Gerade da"; Punkt als <span>, nicht <i> (.status i ist ausgeblendet) */
html[data-band="t4"]:not([data-off]) .chat-head .status>i,
html[data-band="t4"]:not([data-off]) .chat-head .status>span:not(.tg){display:none!important}
html:not([data-band]) .np-any{display:none!important}
.chat-head{position:relative}
.sheet[hidden],.dim[hidden]{display:none}
.tg{display:none}
html[data-band="t4"]:not([data-off]) .tg2{display:inline-flex}
#player .pv{display:flex}
/* Hinweis: der Verlauf rueckt weich nach unten, damit nichts verdeckt wird (nur im Gespraech, nicht auf der Startseite) */
#conv-log{transition:padding-top .6s cubic-bezier(.2,.9,.2,1)}
html.note-on #conv-log{padding-top:78px!important}
/* Auf der echten Seite ist der Kopf schmaler (Stories-Knopf): "Gerade laeuft" bleibt immer ganz, nur der Titel wird gekuerzt */
.chat-head .status .tg2{min-width:0}
.chat-head .status .tg2 .j-live{flex:none}
.chat-head .status .tg2 strong{min-width:0;white-space:nowrap}
/* Handy: neben Stories und Glocke ist kein Platz fuer den Titel - dort steht nur "Gerade laeuft", der Titel kommt im Band und im Player */
@media (max-width:520px){.chat-head .status .tg2 .tg-sep,.chat-head .status .tg2 .j-title{display:none}}