/* Filmwerk – Variante A „Kino-Foyer“, Filter-Ansicht mit der Filterleiste aus B. Gold auf Schwarz.
   Alle Maße in rem → A+ (100/115/130/150 %) wächst mit. Tippflächen ≥ 44 pt (--tap). */
:root{
  --bg:#070706; --bg2:#0e0d0b; --sf:#151411; --sf2:#1d1b17; --sf3:#26231d; --line:#2b271f;
  --gold:#d4b063; --gold2:#efd89a; --gold-dim:#8a7542; --gold-soft:rgba(212,176,99,.14);
  --tx:#f2ecdf; --mu:#a89f8c; --mu2:#7a7262;
  --ok:#8fc59a; --warn:#e2a84a; --rot:#d26b5a;
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --tap:max(44px,2.75rem); --rand:1rem;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip} /* clip statt hidden: kein eigener Scroll-Bereich, sonst klebt die Filterleiste nicht */
html[data-tg="115"]{font-size:115%} html[data-tg="130"]{font-size:130%} html[data-tg="150"]{font-size:150%}
body{background:var(--bg);color:var(--tx);font:400 1rem/1.4 var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:clip;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold);text-decoration:none;-webkit-tap-highlight-color:transparent}
svg{display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vis{position:absolute;left:-9999px}

#app{max-width:1360px;margin:0 auto;padding:0 var(--rand) 7rem}
@media (min-width:760px){:root{--rand:1.6rem}}

/* ---------- Kopf ---------- */
.marke{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:3.6rem;padding:.6rem 0 .1rem}
.marke .logo{font:600 min(1.35rem,6.2vw)/1 var(--serif);color:var(--gold2);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem;white-space:nowrap;min-height:var(--tap)}
.marke .logo i{display:block;width:2.2rem;height:1px;background:var(--gold)}
.marke .mitte{flex:1;color:var(--mu);font-size:.85rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.personen{display:flex;gap:.3rem;background:rgba(21,20,17,.8);border:1px solid var(--line);border-radius:999px;padding:.2rem}
.personen button{width:max(44px,min(2.75rem,11.5vw));height:max(44px,min(2.75rem,11.5vw));min-width:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:.4rem;font-weight:700;color:var(--mu);font-size:.95rem}
.personen button.on{background:var(--gold);color:#1a1405}
.personen button span{display:none}
@media (min-width:760px){.personen button{width:auto;padding:0 .9rem}.personen button span{display:inline}.personen button b{display:none}}
.stand{color:var(--mu2);font-size:.8rem;min-height:1.6rem;line-height:1.5}
.stand .punkt{width:.45rem;height:.45rem;border-radius:50%;background:var(--ok);display:inline-block;margin-right:.45rem;vertical-align:.1em}
.stand .punkt.alt{background:var(--warn)}
.stand.oben{margin:.1rem 0 .3rem}
@media (max-width:759px){.marke .mitte{display:none}}
@media (max-width:420px){.marke .logo i{display:none}}

/* ---------- Bausteine ---------- */
.bad{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .55rem;border-radius:6px;background:rgba(0,0,0,.6);color:var(--gold2);border:1px solid rgba(212,176,99,.35);white-space:nowrap}
.bad.frei{color:#d8f0dc;border-color:rgba(143,197,154,.45)}
.bad.abo{color:#e8e2d2;border-color:rgba(255,255,255,.22)}
.bad.werbung{color:#e6dcff;border-color:rgba(190,170,255,.35)}
.bad.bald{color:#ffd9a6;border-color:rgba(226,168,74,.5)}
.bad.rot{color:#ffc9bf;border-color:rgba(210,107,90,.6)}
.bad.bsp{color:#1a1405;background:var(--warn);border-color:var(--warn)}
.poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 10px 30px rgba(0,0,0,.45);isolation:isolate}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.poster.quer img{object-position:center 22%}
.poster::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78) 100%);z-index:1;pointer-events:none}
.poster.mitbild::before{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 22%,transparent 60%,rgba(0,0,0,.55) 100%)}
.poster::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);z-index:3;pointer-events:none}
.poster .pt{position:absolute;left:.7rem;right:.7rem;bottom:.65rem;z-index:2;font:600 1.05rem/1.12 var(--serif);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.poster .pt small{display:block;font:500 .7rem/1.3 var(--sans);color:rgba(255,255,255,.75);margin-top:.25rem;letter-spacing:.04em}
.poster.mitbild .pt{display:none}
.poster.quer .pt{display:-webkit-box}
.poster .pq{position:absolute;top:.5rem;left:.5rem;z-index:2;max-width:calc(100% - 3.2rem);overflow:hidden;text-overflow:ellipsis;display:block}
.poster .pf{position:absolute;top:.45rem;right:.45rem;z-index:2;width:1.9rem;height:1.9rem;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.poster .pf svg{width:1.05rem;height:1.05rem}
.poster .mono{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;font:700 7rem/1 var(--serif);color:rgba(255,255,255,.08);letter-spacing:-.04em;transform:translateY(-8%)}
.poster .bald{position:absolute;left:0;right:0;bottom:0;z-index:4;background:linear-gradient(90deg,rgba(226,168,74,.96),rgba(226,168,74,.8));color:#1d1300;font:700 .72rem/1 var(--sans);padding:.38rem .6rem;letter-spacing:.03em;display:flex;justify-content:space-between;gap:.3rem}
.poster .bald.rot{background:linear-gradient(90deg,rgba(210,107,90,.97),rgba(210,107,90,.82));color:#200704}
.poster.hatbald .pt{bottom:2.1rem}
.poster .gs{position:absolute;bottom:.5rem;right:.5rem;z-index:4;background:rgba(0,0,0,.65);color:var(--ok);font:700 .72rem var(--sans);padding:.2rem .45rem;border-radius:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tap);padding:0 1.15rem;border-radius:999px;font-weight:700;font-size:1rem;border:1px solid var(--line);background:var(--sf2);color:var(--tx);white-space:nowrap}
.btn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn svg[fill="currentColor"]{fill:currentColor;stroke:none}
.btn.gold{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.btn.line{background:rgba(0,0,0,.25);border-color:var(--gold-dim);color:var(--gold2)}
.btn.rund{width:var(--tap);padding:0;border-radius:50%}
.btn.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold2)}
.btn.klein{min-height:2.4rem;font-size:.9rem;padding:0 .9rem}
.btn[disabled]{opacity:.45}
.chips{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:.15rem var(--rand) .5rem;margin:0 calc(-1 * var(--rand));-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:var(--tap);padding:0 1rem;border-radius:999px;background:var(--sf);border:1px solid var(--line);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--tx);white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.chip.on{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.chip small{font-weight:500;opacity:.7}
.chip.aus{opacity:.45;text-decoration:line-through}
.chips.wrap{flex-wrap:wrap;overflow:visible;margin:0;padding:0 0 .6rem}
.h2{font:600 1.15rem/1.2 var(--serif);color:var(--gold2);letter-spacing:.01em;display:flex;align-items:baseline;gap:.4rem .6rem;margin:1.5rem 0 .7rem;flex-wrap:wrap}
.h2 small{font:500 .85rem var(--sans);color:var(--mu);letter-spacing:0}
.h2 .mehr{margin-left:auto;font:600 .9rem var(--sans);color:var(--gold);min-height:var(--tap);display:inline-flex;align-items:center;padding:0 .2rem}
.fuss{color:var(--mu2);font-size:.8rem;margin-top:2.5rem;line-height:1.5;border-top:1px solid var(--line);padding-top:.9rem}
.fuss a{color:var(--mu)}
.leer{color:var(--mu);padding:1.6rem 0;text-align:center;line-height:1.5}
.karte-leer{border:1px dashed var(--gold-dim);border-radius:14px;padding:1rem 1.1rem;color:var(--mu);line-height:1.5;background:rgba(212,176,99,.04)}
.karte-leer b{color:var(--gold2);display:block;margin-bottom:.2rem;font-family:var(--serif);font-weight:600;font-size:1.05rem}
.hinweis{background:var(--gold-soft);border:1px solid rgba(212,176,99,.3);border-radius:12px;padding:.75rem .95rem;color:#e8dfc8;font-size:.92rem;line-height:1.45;margin:.6rem 0 1rem}
.hinweis b{color:var(--gold2)}
.hinweis .knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.hinweis .knoepfe .btn{white-space:normal;text-align:left;justify-content:flex-start;max-width:100%;min-height:var(--tap);line-height:1.2;padding:.45rem 1rem;font-size:.95rem;display:inline-block}
.hinweis .knoepfe .btn b{color:var(--gold);white-space:nowrap}
.hero h1 a{color:inherit;display:block;min-height:var(--tap)}
.hinweis.warn{background:rgba(226,168,74,.12);border-color:rgba(226,168,74,.4)}

/* ---------- Gold-Pille unten ---------- */
.pille{position:fixed;left:50%;transform:translateX(-50%);bottom:max(.9rem,env(safe-area-inset-bottom));display:flex;gap:.3rem;background:rgba(14,13,11,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(212,176,99,.35);border-radius:999px;padding:.3rem;z-index:40;box-shadow:0 12px 40px rgba(0,0,0,.6);max-width:calc(100vw - 1rem)}
.pille button{min-width:var(--tap);min-height:var(--tap);padding:0 .9rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--mu);white-space:nowrap}
.pille button svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pille button.on{background:var(--gold);color:#1a1405}
@media (max-width:600px){.pille button{padding:0 .7rem}.pille button:not(.on) span{display:none}}
@media (max-width:600px){html[data-tg="130"] .pille button span,html[data-tg="150"] .pille button span{display:none}html[data-tg="130"] .pille button,html[data-tg="150"] .pille button{padding:0 .55rem}}

/* ---------- Start: Stimmung + Hero + Reihen ---------- */
.stimm{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--rand));padding:.2rem var(--rand) .4rem}
.stimm::-webkit-scrollbar{display:none}
.stimm button{flex:none;min-height:var(--tap);padding:0 1rem;border-radius:14px;background:var(--sf);border:1px solid var(--line);display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--tx);white-space:nowrap}
.stimm button span{font-size:1.2rem}
.stimm button.on{border-color:var(--gold);background:var(--gold-soft);color:var(--gold2)}
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:30rem;display:flex;align-items:flex-end;margin-top:.6rem;isolation:isolate;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#100e0b}
.hero .bgp{position:absolute;inset:0;z-index:0}
.hero .bgp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero .bgp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,6,.35) 0%,rgba(7,7,6,.5) 35%,rgba(7,7,6,.88) 62%,rgba(7,7,6,.98) 100%)}
.hero .bgp .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 16rem/1 var(--serif);color:rgba(255,255,255,.07);letter-spacing:-.05em;transform:translateY(-14%)}
.hero .inh{position:relative;z-index:1;padding:4.2rem 1.3rem 1.4rem;width:100%}
.hero .ueber{font:600 .78rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.hero .ueber i{display:block;width:1.6rem;height:1px;background:var(--gold)}
/* Titel nie mitten im Wort trennen: Größe nach längstem Wort (w-kurz/-lang/-sehrlang), JS titelEinpassen() verkleinert notfalls weiter */
.hero h1{font:600 min(2.5rem,9vw)/1.06 var(--serif);color:#fff;letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.5);overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
.hero h1.w-kurz{font-size:min(2.5rem,10vw)}
.hero h1.w-lang{font-size:min(2.5rem,8.2vw)}
.hero h1.w-sehrlang{font-size:min(2.5rem,7.4vw)}
.hero .meta{color:#d8d0bf;margin:.6rem 0 .5rem;font-size:.95rem;display:flex;flex-wrap:wrap;gap:.3rem .7rem}
.hero .meta b{color:var(--gold2)}
.hero .warum{color:#d3cab7;font-size:.95rem;line-height:1.5;max-width:46rem;border-left:2px solid var(--gold-dim);padding-left:.8rem;margin:.7rem 0 1rem}
.hero .akt{display:flex;gap:.6rem;flex-wrap:wrap}
.hero .bald-h{display:inline-flex;margin-bottom:.8rem}
.hero .pos{position:absolute;top:.35rem;left:.55rem;z-index:2;display:flex}
.hero .pos button{width:2.4rem;height:var(--tap);display:flex;align-items:center;justify-content:center}
.hero .pos i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.4);display:block;transition:.2s}
.hero .pos button.on i{background:var(--gold);width:1.4rem;border-radius:4px}
.hero .naechst{position:absolute;top:.35rem;right:.5rem;z-index:2}
.hero .leer{position:relative;z-index:1;padding:2rem 1.3rem;text-align:left}
.reihe{display:flex;gap:.8rem;overflow-x:auto;scrollbar-width:none;padding:.2rem var(--rand) .9rem;margin:0 calc(-1 * var(--rand));scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.reihe::-webkit-scrollbar{display:none}
.k{display:block;text-align:left;-webkit-touch-callout:none}
.reihe .k{flex:none;width:8.6rem;scroll-snap-align:start}
.reihe .k.gross{width:11rem}
.k .u{margin-top:.45rem;font-size:.85rem;color:var(--mu);line-height:1.3;padding:0 .15rem}
.k .u b{display:block;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reihe .karte-leer{flex:none;width:min(22rem,80vw);align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.reihen-block{position:relative}
.reihe-kopf{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:14px;border:1px solid transparent;transition:background .2s,border-color .2s}
.reihe-kopf .griff{display:none;margin-left:auto;color:var(--gold);font-size:1.2rem;letter-spacing:-.1em}
.reihen.ordnen .reihe,.reihen.ordnen .h2 .mehr,.reihen.ordnen .reihe-kopf small{display:none}
.reihen.ordnen .reihe-kopf{background:var(--sf);border-color:var(--line);padding:0 1rem;margin:.45rem 0;min-height:3.4rem;align-items:center}
.reihen.ordnen .reihe-kopf .griff{display:block}
.ordnen-hinweis{display:none;color:var(--gold2);font-size:.9rem;margin:.6rem 0}
.reihen.ordnen .ordnen-hinweis{display:block}
.hebt{position:relative;z-index:30;box-shadow:0 18px 40px rgba(0,0,0,.7),0 0 0 2px var(--gold)!important;border-color:var(--gold)!important;transition:none!important}
.schiebt{transition:transform .18s ease}
body.zieht,body.zieht *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing}
@media (min-width:760px){
  .hero{min-height:34rem}
  .hero .inh{padding:4.5rem 2.2rem 2rem;max-width:62rem}
  .hero h1,.hero h1.w-kurz,.hero h1.w-lang,.hero h1.w-sehrlang{font-size:3.6rem}
  .reihe .k{width:10.5rem}
  .reihe .k.gross{width:13rem}
}
@media (min-width:1100px){.reihe .k{width:11.5rem}.reihe .k.gross{width:14rem}.hero{min-height:36rem}}

/* ---------- Filter (Leiste aus B, verschwindet beim Runterscrollen) ---------- */
.such{display:flex;align-items:center;gap:.5rem;min-height:var(--tap);background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:0 .3rem 0 .8rem;color:var(--mu);margin:.4rem 0 .4rem}
.such svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.such input{flex:1;min-width:0;background:none;border:0;outline:none;min-height:var(--tap);font-size:1rem;color:var(--tx)}
.such input::placeholder{color:var(--mu2)}
.such button{width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--gold)}
.such button.hoert{background:var(--gold);color:#1a1405}
.filterz{position:sticky;top:0;background:linear-gradient(180deg,var(--bg) 88%,rgba(7,7,6,0));z-index:20;padding:.5rem var(--rand) .25rem;margin:0 calc(-1 * var(--rand));transition:transform .28s ease;padding-top:max(.5rem,env(safe-area-inset-top))}
.filterz.weg{transform:translateY(-110%)}
.fz{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.fz .lab{flex:none;font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mu2);width:3.8rem}
.fz .chips{flex:1;margin:0;padding:.1rem 0 .1rem;margin-right:calc(-1 * var(--rand));padding-right:var(--rand)}
.fz .chip{font-size:.9rem;padding:0 .85rem;border-radius:9px}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:.6rem;color:var(--mu);font-size:.88rem;margin:.2rem 0 .3rem;flex-wrap:nowrap}
.zeile .anz{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.zeile .sort{white-space:nowrap}
.zeile b{color:var(--tx)}
.zeile .sort{display:inline-flex;align-items:center;gap:.3rem;color:var(--gold);font-weight:600;min-height:var(--tap);padding:0 .2rem}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.2rem,42vw),1fr));gap:1rem .8rem}
.raster .k .u b{font-size:.95rem}
.raster .k .u .q{display:inline-flex;align-items:center;gap:.35rem;margin-top:.15rem}
.raster .k .u .q i{width:.5rem;height:.5rem;border-radius:2px;display:inline-block}
.raster .poster{border-radius:9px}
.mehr-laden{display:flex;justify-content:center;margin:1.4rem 0}
@media (min-width:760px){.raster{gap:1.2rem 1rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}.stand.oben{display:none}.fz .lab{width:4.4rem}}

/* ---------- Detailkarte ---------- */
.zur{display:inline-flex;align-items:center;gap:.3rem;color:var(--gold);font-weight:600;min-height:var(--tap);margin:.3rem 0 .4rem;padding-right:.6rem}
.zur svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.det{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
.det > div{min-width:0}
.det .akt .btn,.hero .akt .btn{white-space:normal;text-align:center;line-height:1.2;max-width:100%}
.det .bigposter{max-width:220px;margin:0 auto;width:100%}
.det .bigposter.quer{max-width:none}
.det .bigposter.quer .poster{aspect-ratio:16/9}
.det h1{font:600 min(2rem,8vw)/1.1 var(--serif);color:var(--tx);letter-spacing:-.005em;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
.det h1.w-kurz{font-size:min(2rem,9vw)}
.det h1.w-lang{font-size:min(2rem,7.8vw)}
.det h1.w-sehrlang{font-size:min(2rem,7vw)}
.det .meta{color:var(--mu);font-size:.95rem;margin:.4rem 0 .8rem;display:flex;flex-wrap:wrap;gap:.35rem .7rem;align-items:center}
.det .meta b{color:var(--gold2);font-weight:700}
.det .akt{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1.1rem}
.det p.text{color:#d9d2c3;line-height:1.55}
.wo{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--sf)}
.wo .z{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);min-height:3.6rem}
.wo .z:last-child{border-bottom:0}
.wo .q{width:2.5rem;height:2.5rem;border-radius:9px;display:flex;align-items:center;justify-content:center;font:800 .68rem var(--sans);letter-spacing:.02em;flex:none;color:#fff;text-transform:uppercase}
.wo .n{flex:1;min-width:0}
.wo .n b{display:block;font-weight:700}
.wo .n small{display:block;color:var(--mu);font-size:.85rem;margin-top:.1rem}
.wo .n small.bald{color:var(--warn)}
.wo .n small.rot{color:var(--rot)}
.wo .go{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:.3rem;min-height:var(--tap);padding:0 .3rem;white-space:nowrap}
.wo .go svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.passt{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0}
.passt span{font-size:.85rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);color:var(--mu)}
.passt span.ok{color:var(--ok);border-color:rgba(143,197,154,.4)}
.passt span.nein{color:var(--rot);border-color:rgba(210,107,90,.4)}
.quelle-klein{color:var(--mu2);font-size:.8rem;margin-top:.5rem}
.quelle-klein a{color:var(--mu)}
@media (min-width:760px){
  .det{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:2rem}
  .det .bigposter{max-width:300px}
  .det .bigposter.quer{max-width:300px}
  .det .bigposter.quer .poster{aspect-ratio:2/3}
  .det h1,.det h1.w-kurz,.det h1.w-lang,.det h1.w-sehrlang{font-size:2.6rem}
}
@media (min-width:1100px){.det{grid-template-columns:340px minmax(0,1fr)}.det .bigposter,.det .bigposter.quer{max-width:340px}}

/* ---------- Favoriten / Listen ---------- */
.favgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,42vw),1fr));gap:1rem .8rem;margin-bottom:.5rem}
.liste{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--sf)}
.liste .z{display:flex;align-items:center;gap:.8rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);min-height:4rem;width:100%;text-align:left}
.liste .z:last-child{border-bottom:0}
.liste .z .mini{width:2.8rem;flex:none}
.liste .z .mini .poster{border-radius:5px;box-shadow:none}
.liste .z .mini .poster .pt,.liste .z .mini .poster .pq,.liste .z .mini .poster .pf,.liste .z .mini .poster .bald,.liste .z .mini .poster .gs{display:none}
.liste .z .mini .poster .mono{font-size:2rem}
.liste .z .n{flex:1;min-width:0}
.liste .z .n b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liste .z .n small{display:block;color:var(--mu);font-size:.85rem}
.liste .z .sterne{color:var(--gold);white-space:nowrap;letter-spacing:.05em}
.liste .z .st{font-size:.8rem;font-weight:700;padding:.3rem .55rem;border-radius:6px;border:1px solid var(--line);color:var(--mu);white-space:nowrap}
.liste .z .st.weg{color:var(--rot);border-color:rgba(210,107,90,.4)}
details.klapp summary{list-style:none;cursor:pointer;min-height:var(--tap);display:flex;align-items:center}
details.klapp summary::-webkit-details-marker{display:none}

/* ---------- Vorlieben ---------- */
.sw{display:flex;align-items:center;gap:.9rem;min-height:3.3rem;padding:.45rem 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.sw:last-child{border-bottom:0}
.sw .l{flex:1;font-weight:600;min-width:0}
.sw .l small{display:block;color:var(--mu);font-weight:500;font-size:.85rem;margin-top:.1rem}
.tog{width:3.3rem;height:2rem;border-radius:999px;background:var(--sf3);position:relative;flex:none;border:1px solid var(--line)}
.tog::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#8d8572;transition:.2s}
.tog.on{background:var(--gold);border-color:var(--gold)}
.tog.on::after{left:1.5rem;background:#1a1405}
.seg{display:flex;background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:.2rem;gap:.2rem;flex-wrap:wrap}
.seg button{flex:1 1 auto;min-height:var(--tap);border-radius:9px;font-weight:600;color:var(--mu);text-align:center;padding:0 .5rem;white-space:nowrap}
.seg button.on{background:var(--gold);color:#1a1405}
.block{border:1px solid var(--line);border-radius:14px;padding:.3rem 1rem .5rem;margin-bottom:1rem;background:var(--sf)}
.block .bt{font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:.9rem 0 .5rem}
.block .knoepfe{display:flex;gap:.6rem;flex-wrap:wrap;padding:.4rem 0 .5rem}
.spalten{display:grid;gap:0 1.2rem}
@media (min-width:900px){.spalten{grid-template-columns:1fr 1fr;align-items:start}}
.tmdb-logo{display:block;width:10rem;height:auto;margin:.3rem 0}

/* ---------- Blatt, Schleier, Meldung ---------- */
.schleier{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;animation:auf .2s}
.blatt{position:fixed;left:0;right:0;bottom:0;background:var(--sf);border-radius:22px 22px 0 0;padding:1rem 1.2rem max(1.4rem,env(safe-area-inset-bottom));z-index:60;border-top:1px solid var(--gold-dim);max-width:640px;margin:0 auto;box-shadow:0 -20px 60px rgba(0,0,0,.6);max-height:88vh;overflow-y:auto;animation:hoch .25s ease}
.blatt h3{font:600 1.25rem/1.2 var(--serif);color:var(--gold2);margin:.3rem 0 .8rem;padding-right:3rem}
.blatt .zu{position:absolute;top:.6rem;right:.7rem}
.blatt p{line-height:1.5;color:#ddd5c4;margin:.4rem 0}
.blatt ol{padding-left:1.3rem;line-height:1.55;color:#ddd5c4}
.blatt ol li{margin:.35rem 0}
.ag{display:flex;align-items:center;gap:.6rem;margin:.6rem 0;flex-wrap:wrap}
.ag > span{font-weight:600;min-width:3.6rem}
.ag .seg{flex:1}
.noten{display:flex;gap:.2rem;margin:.4rem 0 .8rem}
.noten button{width:var(--tap);height:var(--tap);font-size:1.8rem;color:var(--mu2);display:flex;align-items:center;justify-content:center}
.noten button.on{color:var(--gold)}
.feld{width:100%;min-height:var(--tap);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;color:var(--tx);font-size:1rem}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(.9rem,env(safe-area-inset-bottom)) + 4.6rem);z-index:70;display:flex;align-items:center;gap:.8rem;background:#2a261e;border:1px solid var(--gold-dim);color:var(--tx);padding:.35rem .4rem .35rem 1rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-weight:600;max-width:calc(100vw - 2rem);opacity:0;pointer-events:none;transition:opacity .2s;min-height:var(--tap)}
#toast.zeigen{opacity:1;pointer-events:auto}
#toast:not(:has(button)){padding-right:1rem}
#toast button{color:#1a1405;background:var(--gold);border-radius:999px;min-height:2.4rem;padding:0 .9rem;font-weight:700;white-space:nowrap}
@keyframes auf{from{opacity:0}}
@keyframes hoch{from{transform:translateY(30px);opacity:0}}

/* ---------- Anmeldung ---------- */
.anmelden{min-height:90vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.anmelden form{width:min(26rem,100%);text-align:center}
.anmelden .logo{font:600 1.8rem/1 var(--serif);color:var(--gold2);letter-spacing:.18em;text-transform:uppercase;margin:1rem 0 .5rem}
.anmelden p{color:var(--mu);margin:.3rem 0 1.4rem;line-height:1.5}
.anmelden .feld{text-align:center;margin-bottom:.8rem}
.anmelden .btn{width:100%}
.anmelden .fehler{color:var(--rot);min-height:1.5rem;margin-top:.7rem}
.laden{color:var(--mu);text-align:center;padding:5rem 0}

/* Schmale Geräte: Filterleiste kompakt (Chips sprechen für sich) */
@media (max-width:600px){.fz .lab{display:none}.fz .chips{margin-left:calc(-1 * var(--rand));padding-left:var(--rand)}}

/* Unterzeile langer Titel (titelTeile) */
.hero .utitel,.det .utitel{font:500 1.05rem/1.35 var(--serif);color:var(--gold);opacity:.9;margin:.35rem 0 .2rem;text-shadow:0 2px 12px rgba(0,0,0,.5);overflow-wrap:anywhere}

/* v4: keine Doppeltipp-Verzögerung, Tipps reagieren sofort */
a,button,.chip,[data-a]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}