/* ===== Apollo Kino — base.css (ported verbatim from design_files/shared/base.css) ===== */ /* Visually-hidden: für Screenreader + SEO sichtbar, optisch entfernt (z. B. Startseiten-H1) */ .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Tastatur-Fokus: sichtbarer goldener Ring (nur bei Tastaturnavigation, nicht bei Maus) */ :focus-visible{outline:2px solid #F7C948;outline-offset:2px;border-radius:4px} /* Skip-to-Content: für Tastatur-Nutzer; erscheint nur bei Fokus */ .skip-link{position:fixed;left:10px;top:-80px;z-index:3000;background:#F7C948;color:#241200;padding:10px 16px;border-radius:8px;font-family:var(--font-display),sans-serif;font-weight:700;text-decoration:none;transition:top .16s ease} .skip-link:focus{top:10px} /* Poster als (füllt relativen Container, deckt ihn ab) */ .poster-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0} /* ============================================================ Apollo Kino — Base CSS für Engine-Konzepte (03–10) Layoutet alle .ap-* Klassen. Themebar über CSS-Variablen. Default = clean/hell. Jedes Konzept überschreibt nur Variablen + Charakter. ============================================================ */ :root{ /* brand constants */ --burgundy:#7B002C; --burgundy-deep:#56001F; --burgundy-ink:#2A0010; --red:#8E0014; --red-bright:#C20022; --yellow:#F7C948; --o:#F06019; --g:#A5CA3E; --m:#A91B89; --y:#FCB118; --ink:#141012; --paper:#FFFFFF; --paper-warm:#F6F1EC; --font-display:'Quicksand',sans-serif; --font-body:'Montserrat',sans-serif; --font-script:'Caveat',cursive; --ease:cubic-bezier(.2,.6,.2,1); /* themeable contract (defaults: clean light) */ --bg:#FFFFFF; --bg2:#FAF7F5; --fg:#141012; --fg-soft:#5C5358; --fg-dim:#8A8189; --line:#ECE6E8; --hair:#F0EBED; --surface:#FFFFFF; --surface2:#F7F3F4; --accent:#7B002C; --accent-fg:#FFFFFF; --accent2:#8E0014; --pop:#F7C948; --time-bg:#8E0014; --time-bg-h:#C20022; --time-fg:#fff; --rcard:20px; --rchip:999px; --rposter:10px; --rpanel:18px; --nav-bg:rgba(255,255,255,.86); --nav-fg:#141012; --maxw:1200px; --hero-title:clamp(40px,7vw,84px); --shadow-card:0 18px 40px rgba(86,0,31,.10); --shadow-poster:0 22px 48px rgba(86,0,31,.20); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--fg);background:var(--bg); -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--accent-fg)} .ap-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)} /* text roles */ .ap-eyebrow{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:11px} .ap-eyebrow::before{content:"";width:26px;height:2px;background:currentColor} .ap-kicker{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--pop)} .ap-hsec{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(28px,4.4vw,46px);line-height:1.02;color:var(--fg)} .ap-h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(40px,7vw,84px);line-height:.9;color:var(--fg);margin:14px 0} .ap-sub{color:var(--fg-soft);font-size:clamp(15px,1.7vw,18px);max-width:62ch;text-wrap:pretty} .ap-ix{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--accent)} /* buttons */ .ap-btn{font-family:var(--font-display);font-weight:700;font-size:14px;padding:11px 20px;border-radius:var(--rchip); cursor:pointer;border:1.5px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:all .16s var(--ease);white-space:nowrap} .ap-btn .ar{transition:transform .16s var(--ease)} .ap-btn:hover .ar{transform:translateX(3px)} .ap-btn-primary{background:var(--accent);color:var(--accent-fg)} .ap-btn-primary:hover{filter:brightness(.92)} .ap-btn-ghost{border-color:var(--line);color:var(--fg);background:var(--surface)} .ap-btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .ap-btn-accent{background:var(--pop);color:var(--burgundy-ink)} .ap-btn-accent:hover{filter:brightness(.95)} /* nav shell */ .ap-nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .ap-navinner{display:flex;align-items:center;gap:18px;padding:15px clamp(18px,4vw,40px);max-width:var(--maxw);margin:0 auto} .ap-navinner>a:first-child{flex-shrink:0} .ap-navlogo{height:30px;width:auto;flex-shrink:0} .ap-navlinks{display:flex;align-items:center;gap:2px;margin-left:10px} .ap-navlinks a,.ap-navlinks .ap-nitrigger{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--nav-fg);padding:9px 12px;border-radius:var(--rchip);position:relative;transition:all .16s var(--ease)} .ap-navlinks a:hover,.ap-navlinks .ap-nitrigger:hover{color:var(--accent)} .ap-navlinks a.active,.ap-navlinks .ap-nitrigger.active{color:var(--accent)} .ap-ni{position:relative;display:flex;align-items:center} .ap-ni>a,.ap-ni>.ap-nitrigger{display:flex;align-items:center;gap:4px} .ap-nitrigger{cursor:default;user-select:none;-webkit-user-select:none} .ap-ni-chev{width:13px;height:13px;flex:none;transition:transform .18s var(--ease);stroke:currentColor} .ap-ni:hover .ap-ni-chev{transform:rotate(180deg)} .ap-drop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(14,10,12,.94);backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--line);border-radius:14px;padding:7px;width:220px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:70;white-space:nowrap} .ap-drop::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px} .ap-ni:hover .ap-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .ap-drop a{padding:10px 11px;border-radius:8px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);opacity:.9} .ap-drop a+a{margin-top:6px} .ap-drop a:hover{background:var(--surface);border-color:var(--line);opacity:1} .ap-drop a.active{opacity:1;background:rgba(123,0,44,.14);border-color:rgba(123,0,44,.5);color:var(--accent)} .ap-drop--wide{width:250px} .ap-drop--right{left:auto;right:0;transform:translateY(-4px)} .ap-ni:hover .ap-drop--right{transform:translateY(0)} .ap-dh{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);padding:5px 9px 8px} .ap-dh svg{width:13px;height:13px;flex:none;stroke:currentColor} .ap-dhrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 9px;border-radius:7px;font-size:12.5px} .ap-dhrow .d{color:var(--fg-soft);font-weight:500;white-space:nowrap} .ap-dhrow .t{color:var(--fg);font-weight:600;white-space:nowrap} .ap-dhrow.zu .t{opacity:.5;font-weight:500} .ap-dhrow.now{background:rgba(123,0,44,.22)} .ap-dhrow.now .d,.ap-dhrow.now .t{color:#e0607a;opacity:1} .ap-dhrow.now.op{background:rgba(63,185,80,.16)} .ap-dhrow.now.op .d,.ap-dhrow.now.op .t{color:#5fd06e;opacity:1} .ap-ddiv{border:none;border-top:1px solid var(--line);margin:8px 4px} .ap-drop-chev{width:12px;height:12px;flex:none;opacity:.25;stroke:currentColor} .ap-drop a:hover .ap-drop-chev,.ap-drop a.active .ap-drop-chev{opacity:1;color:var(--accent)} .ap-drawer-head{display:block;font-family:var(--font-display);font-weight:700;font-size:27px;color:var(--fg);padding:13px 2px;border-bottom:1px solid var(--line)} .ap-drawer-sub{font-size:20px!important;padding-left:18px!important;opacity:.8} .ap-drawer-sub::before{content:'';display:inline-block;width:14px;height:1.5px;background:var(--accent);margin-right:10px;vertical-align:middle} /* Öffnungszeiten im mobilen Drawer – als Unterpunkt von „Info", eingerueckt wie .ap-drawer-sub. Bewusst kompakt (13px statt der 20px der Menuepunkte): die drei Zeilen sind Nachschlage-Info und sollen das Menue nicht aufblaehen. */ .ap-drawer-hours{padding:8px 0;border-bottom:1px solid var(--line)} /* Linke Kante buendig mit den Menue-Ueberschriften (.ap-drawer-head, 2px). Rechts mehr Luft, sonst laeuft die Uhrzeit unter den Scrollbalken. */ .ap-drawer-hours .ap-dhrow{font-size:13px;padding:5px 14px 5px 2px;opacity:.8} .ap-drawer-hours .ap-dhrow.now{opacity:1} .ap-navcta{margin-left:auto;display:flex;align-items:center;gap:10px} .ap-burger{display:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;width:44px;height:44px;cursor:pointer;color:var(--nav-fg)} .ap-burger svg{width:22px;height:22px;display:block;margin:auto;stroke:currentColor} .ap-drawer{position:fixed;inset:0;z-index:80;background:var(--bg);display:none;flex-direction:column;padding:20px clamp(18px,5vw,36px)} .ap-drawer.open{display:flex} .ap-drawertop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .ap-drawertop img{height:28px;width:auto} .ap-drawerx{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:44px;height:44px;cursor:pointer;font-size:20px;color:var(--fg)} .ap-drawer nav{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:24px} .ap-drawer nav a{font-family:var(--font-display);font-weight:700;font-size:27px;color:var(--fg);padding:13px 2px;border-bottom:1px solid var(--line)} .ap-drawer nav a.active{color:var(--accent)} .ap-drawer>.ap-btn{margin-top:16px;justify-content:center;font-size:16px;padding:15px} /* notice */ .ap-notice{background:var(--ink);color:#fff;position:relative;z-index:55} /* Farb-Varianten: Schwarz (info, neutral dunkel), Weiß (warning), Weinrot (closed) */ .ap-notice.info .dot{background:var(--pop)} .ap-notice.warning{background:#fff;color:#1a1010} .ap-notice.warning b,.ap-notice.warning .t{color:#1a1010} .ap-notice.warning .more{color:var(--burgundy)} .ap-notice.warning .dot{background:var(--burgundy)} .ap-notice.closed{background:var(--burgundy)} .ap-notice.closed .dot{background:#fff} /* Gelb (attention): dunkler Text für Kontrast */ .ap-notice.yellow{background:#f5c518;color:#1a1010} .ap-notice.yellow b,.ap-notice.yellow .t{color:#1a1010} .ap-notice.yellow .more{color:#1a1010} .ap-notice.yellow .notice-bang{background:#1a1010;color:#f5c518} .ap-notice.warning .notice-bang{background:var(--burgundy);color:#fff} /* Hinweis-Banner: wichtige Mitteilung, hat Vorrang vor dem Ticker. */ .ap-notice.ap-hinweis{display:block} .ap-hinweis .inner{min-height:44px} .ap-hinweis .tick-rot{flex:1;min-width:0;display:flex;align-items:center} .ap-hinweis .tick-item{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0} .ap-hinweis b{font-family:var(--font-display);font-weight:700;font-size:14px;white-space:nowrap;flex:none} .ap-hinweis .t{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Ausrufezeichen-Badge vor dem Text */ .ap-notice .notice-bang{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:15px;line-height:22px;text-align:center} .ap-hinweis .more{margin-left:auto;white-space:nowrap;font-weight:700;font-family:var(--font-display);font-size:13.5px;color:#fff} .ap-notice .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:13px;padding:11px clamp(18px,4vw,40px)} .ap-notice .dot{width:8px;height:8px;border-radius:50%;background:var(--pop);flex:none;animation:ap-pulse 2s var(--ease) infinite} @keyframes ap-pulse{0%,100%{opacity:1}50%{opacity:.3}} .ap-notice b{font-family:var(--font-display);font-weight:700;font-size:14px} .ap-notice .t{opacity:.78;font-size:13.5px} .ap-notice .more{margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--pop);white-space:nowrap} .ap-notice .close{background:none;border:none;color:#fff;opacity:.7;cursor:pointer;font-size:20px;line-height:1;padding:2px 6px} @media(max-width:680px){.ap-notice .more{display:none}} /* Mobil: Hinweis-Banner zeigt Titel und Text im Wechsel (rotierend) */ .ap-hinweis .nseg{transition:opacity .45s ease} @media(max-width:680px){ .ap-hinweis .tick-rot[data-notice-rotate]{position:relative;height:22px} .ap-hinweis [data-notice-rotate] .tick-item{display:block} .ap-hinweis [data-notice-rotate] .nseg{position:absolute;left:0;right:0;top:0;height:22px;line-height:22px;white-space:nowrap;overflow:hidden;opacity:0} .ap-hinweis [data-notice-rotate] .nseg.is-on{opacity:1} } /* poster */ .ap-poster{position:relative;border-radius:var(--rposter);overflow:hidden;aspect-ratio:2/3;box-shadow:var(--shadow-poster)} .ap-poster img,.ap-poster .re-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ap-poster .art{position:absolute;inset:0} .ap-poster .art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 12px)} .ap-poster .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6))} .ap-poster .plak{position:absolute;top:10px;left:11px;font-family:var(--font-display);font-weight:700;font-size:9.5px;letter-spacing:.22em;color:rgba(255,255,255,.7)} .ap-poster .ttl{position:absolute;left:12px;right:12px;bottom:11px;font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(15px,2.2vw,20px);line-height:1.02;letter-spacing:-.01em} .ap-poster .fmt{position:absolute;top:9px;right:9px;display:flex;gap:5px} .ap-badge{font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.03em;padding:4px 8px;border-radius:6px} .ap-badge.b3d{background:var(--burgundy);color:#fff} .ap-badge.b2d{background:rgba(255,255,255,.85);color:var(--ink)} .ap-pmini{border-radius:8px;overflow:hidden;aspect-ratio:2/3;position:relative} /* TMDB real posters */ .ap-pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease);z-index:0} .has-poster .ap-pimg{opacity:1} .has-poster .plak,.has-poster .ttl{display:none} .has-poster .veil{opacity:.35} /* chips */ .ap-metachip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:12px;padding:7px 12px;min-width:46px} .ap-metachip b{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1} .ap-metachip small{font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-top:3px} .ap-tag{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--rchip);border:1px solid var(--line);color:var(--fg-soft);background:var(--surface)} .ap-tag.acc{border-color:var(--accent);color:var(--accent)} .ap-time{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--time-fg);background:var(--time-bg);border-radius:9px;padding:8px 12px;display:inline-flex;align-items:center;gap:5px;transition:all .16s var(--ease);cursor:pointer} .ap-time:hover{background:var(--time-bg-h)} .ap-time small{font-weight:600;font-size:10px;opacity:.8} /* hero (stacked default) */ .ap-hero{padding:clamp(32px,5vw,64px) 0 clamp(36px,5vw,56px)} .ap-herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);align-items:center} .ap-wrap>.ap-herogrid,.ap-hero .ap-herogrid{max-width:var(--maxw)} .ap-herotitle{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:var(--hero-title);line-height:.92;color:var(--fg);margin:16px 0;text-wrap:balance} .ap-metarow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0} .ap-blurb{color:var(--fg-soft);font-size:clamp(15px,1.7vw,18px);max-width:50ch;text-wrap:pretty} .ap-times{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .ap-ctarow{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px} .ap-heroposter{position:relative} .ap-heroposter .ap-poster{max-width:360px;margin-left:auto} .ap-glow{position:absolute;width:120%;height:120%;left:-10%;top:-10%;z-index:-1;background:radial-gradient(circle,rgba(194,0,34,.16),transparent 62%);filter:blur(8px)} /* centered */ .ap-hero-centered .ap-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px} .ap-hero-centered .ap-heroposter .ap-poster{max-width:300px;margin:8px auto 0} .ap-hero-centered .ap-blurb{max-width:54ch} /* split */ .ap-hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,62vh,640px)} .ap-splitL{padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:640px;margin-left:auto;width:100%} .ap-splitR{position:relative;overflow:hidden} .ap-splitR .art{position:absolute;inset:0} .ap-splitveil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.4))} .ap-splitcap{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between} .ap-splitcap .plak{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.8)} /* blocks + section heads */ .ap-blk{padding:clamp(34px,5vw,60px) 0} .ap-blk:nth-of-type(even){background:var(--bg2)} .ap-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px} .ap-sechead .ap-hsec{margin-top:6px} /* film grid / cards */ .ap-filmgrid{display:grid;gap:24px 20px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .ap-filmcard{display:flex;flex-direction:column;gap:12px;transition:transform .18s var(--ease)} .ap-filmcard:hover{transform:translateY(-5px)} .ap-filmcard .info h4{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em} .ap-filmcard .info .gl{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);margin-top:4px} .ap-filmcard .info .gl.start{color:var(--accent)} .ap-filmcard .info .mini{color:var(--fg-soft);font-size:13.5px;margin-top:6px;text-wrap:pretty} .ap-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .ap-gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rpanel);padding:26px;transition:all .18s var(--ease)} .ap-gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line)} .ap-gcard h3{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;margin-bottom:8px;color:var(--fg)} .ap-gcard p{color:var(--fg-soft);font-size:14.5px;text-wrap:pretty} .ap-gcard .ic,.ap-ic{width:46px;height:46px;border-radius:13px;background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .ap-ic svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ap-gcard .when{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .ap-gcard .when .d{font-family:var(--font-display);font-weight:700;color:var(--accent);font-size:14px} .ap-gcard .evtime{margin-top:16px;color:var(--fg-dim);font-family:var(--font-display);font-weight:700;font-size:14px} .ap-evcard{position:relative;overflow:hidden;border-left:4px solid var(--accent)} /* band */ .ap-band{background:var(--accent);color:var(--accent-fg);border-radius:22px;padding:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between} .ap-band h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;margin-top:8px} .ap-band p{color:rgba(255,255,255,.85);max-width:46ch;margin-top:8px} .ap-band .ap-kicker{color:var(--pop)} /* program rows */ .ap-progrow{display:grid;grid-template-columns:54px 116px 1fr auto;gap:22px;align-items:start;padding:26px 0;border-top:1px solid var(--line)} .ap-progrow .ap-pn{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--accent);line-height:1;letter-spacing:-.02em} .ap-progrow .ap-pbody h3{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,3vw,30px);letter-spacing:-.02em;line-height:1;color:var(--fg)} .ap-progrow .ap-pbody .ap-metarow{margin:12px 0} .ap-progrow .ap-pbody .pl{color:var(--fg-soft);font-size:14.5px;max-width:52ch;text-wrap:pretty} .ap-progrow .ap-pbody .credit{color:var(--fg-dim);font-size:12.5px;margin-top:8px;font-weight:600} .ap-pdays{display:flex;flex-direction:column;gap:9px} .ap-dayline{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ap-dayline .dname{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--fg-dim);width:28px} @media(max-width:820px){.ap-progrow{grid-template-columns:36px 88px 1fr;gap:16px}.ap-pdays{grid-column:2/-1}} @media(max-width:540px){.ap-progrow{grid-template-columns:1fr;gap:14px}.ap-progrow .ap-pmini{max-width:120px}} /* gallery */ .ap-gallery{columns:3;column-gap:16px} .ap-gi{break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer} .ap-gi.tall{aspect-ratio:3/4}.ap-gi.wide{aspect-ratio:16/9} .ap-gi .art2{position:absolute;inset:0;transition:transform .35s var(--ease)} .ap-gi:hover .art2{transform:scale(1.06)} .ap-gi .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))} .ap-gi .lab{position:absolute;left:13px;bottom:11px;font-family:var(--font-display);font-weight:700;color:#fff;font-size:16px;z-index:2} @media(max-width:860px){.ap-gallery{columns:2}} @media(max-width:520px){.ap-gallery{columns:1}} /* info */ .ap-infogrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,4vw,40px);align-items:start} .ap-col{display:flex;flex-direction:column;gap:20px} .ap-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--rpanel);padding:clamp(22px,3vw,32px)} .ap-panel h3{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.01em;margin-bottom:18px;color:var(--fg)} .ap-hrow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px} .ap-hrow:last-child{border:none}.ap-hrow .day{font-weight:600} .ap-hrow .t{font-family:var(--font-display);font-weight:700;color:var(--accent)} .ap-hrow.closed .day,.ap-hrow.closed .t{color:var(--fg-dim)} .ap-prow{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair)} .ap-prow b{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--fg)} .ap-prow .lbl{color:var(--fg-soft)}.ap-prow .p{font-family:var(--font-display);font-weight:700;color:var(--accent);font-size:17px} .ap-note{color:var(--fg-dim);font-size:13px;margin-top:14px;line-height:1.55} .ap-note.big{font-size:14.5px;color:var(--fg-soft);margin-top:10px} .ap-lead{color:var(--fg);font-size:15px;margin-bottom:14px;text-wrap:pretty} .ap-lead.soft{color:var(--fg-soft)} .ap-perks{list-style:none;display:flex;flex-direction:column;gap:11px} .ap-perks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--fg)} .ap-perks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none} .ap-contact{display:flex;gap:12px;align-items:center;padding:10px 0;font-size:15px;color:var(--fg-soft)} .ap-contact svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .ap-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px} .ap-facts .f{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center} .ap-facts .f b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.4vw,24px);color:var(--accent)} .ap-facts .f small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)} .ap-news{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .ap-news input{flex:1;min-width:200px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-family:var(--font-body);font-size:15px;color:var(--fg)} .ap-news input:focus{outline:none;border-color:var(--accent)} .ap-ok{color:var(--g);font-family:var(--font-display);font-weight:700;font-size:14px;margin-top:10px;display:none} .ap-legal{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:14px} /* footer */ .ap-footer{background:var(--accent);color:#fff;margin-top:40px;padding:clamp(44px,6vw,68px) 0 34px} .ap-ftgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} .ap-ftlogo{height:30px;width:auto;margin-bottom:16px} .ap-footer p{color:rgba(255,255,255,.82);font-size:14px;max-width:34ch} .ap-footer h5{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px} .ap-footer ul{list-style:none;display:flex;flex-direction:column;gap:9px} .ap-footer ul a{color:rgba(255,255,255,.82);font-size:14px} .ap-footer ul a:hover{color:var(--pop)} .ap-socials{display:flex;gap:10px;margin-top:18px} .ap-socials a{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:all .16s var(--ease)} .ap-socials a:hover{border-color:var(--pop);background:rgba(255,255,255,.08)} .ap-socials svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ap-ftbottom{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6);font-size:13px} .ap-ftbottom a{color:rgba(255,255,255,.6)}.ap-ftbottom a:hover{color:#fff} .ap-ftbottom .sep{margin-left:auto} /* page head */ .ap-pagehead{padding:clamp(30px,5vw,52px) 0 clamp(16px,3vw,26px)} /* reveal */ .ap-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .ap-reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.ap-reveal{opacity:1;transform:none}.ap-notice .dot{animation:none}} /* back-to-concepts pill */ .ap-back{position:fixed;left:14px;bottom:14px;z-index:90;font-family:var(--font-display);font-weight:700;font-size:12.5px; color:var(--accent);background:var(--surface);border:1px solid var(--line);padding:9px 14px;border-radius:999px;box-shadow:var(--shadow-card)} /* responsive */ @media(max-width:1000px){ .ap-navcta .ap-btn-ghost{display:none} } @media(max-width:880px){ .ap-navlinks{display:none} .ap-burger{display:flex} .ap-herogrid{grid-template-columns:1fr} .ap-heroposter{order:-1}.ap-heroposter .ap-poster{max-width:260px;margin:0 auto} .ap-hero-split{grid-template-columns:1fr}.ap-splitR{min-height:300px} .ap-infogrid{grid-template-columns:1fr} .ap-ftgrid{grid-template-columns:1fr 1fr} } @media(max-width:540px){ .ap-facts{grid-template-columns:repeat(2,1fr)} .ap-ftgrid{grid-template-columns:1fr} .ap-navcta .ap-btn-ghost{display:none} } @media(max-width:760px){ /* Mobil: roten Tickets-Button entfernen, Apollo-Logo mittig (Burger bleibt rechts). */ .ap-navcta .ap-btn-primary{display:none} .ap-navinner{position:relative} .ap-navinner > a:first-child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .ap-navlogo{height:23px} } /* ===== Apollo Kino — mosaik theme.css (ported verbatim from design_files/concepts/mosaik/theme.css) ===== */ /* Konzept 07 — Poster-Mosaik · die Poster-Wand als Held */ :root{ --bg:#0E0A0C; --bg2:#130E11; --fg:#F4ECEF; --fg-soft:rgba(244,236,239,.66); --fg-dim:rgba(244,236,239,.64); --line:rgba(255,255,255,.13); --hair:rgba(255,255,255,.08); --surface:rgba(255,255,255,.05); --surface2:rgba(255,255,255,.08); --accent:#7B002C; --accent-fg:#FFFFFF; --pop:#F7C948; --time-bg:#8E0014; --time-bg-h:#C20022; --time-fg:#fff; --nav-bg:rgba(14,10,12,.7); --nav-fg:#F4ECEF; --maxw:1280px; --hero-title:clamp(30px,4vw,52px); --shadow-poster:0 22px 50px rgba(0,0,0,.55); --shadow-card:0 18px 40px rgba(0,0,0,.4); } .ap-metachip{background:rgba(255,255,255,.08);border:1px solid var(--line)} .ap-notice{display:none} .ap-poster{box-shadow:var(--shadow-poster),0 0 0 1px rgba(255,255,255,.06)} .ap-blk:nth-of-type(even){background:var(--bg2)} .ap-footer{background:#1B0009} .ap-footer{margin-top:0} /* Liquid-Glass: "Kino exklusiv mieten"-Band (wie Newsletter) */ .ap-band.mz-glass{position:relative;overflow:hidden;color:#fff; background:linear-gradient(135deg,rgba(123,0,44,.66),rgba(86,0,31,.52) 52%,rgba(123,0,44,.42)); -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3); border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 1px rgba(0,0,0,.25)} .ap-band.mz-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.2),transparent 40%);opacity:.7} .ap-band.mz-glass > *{position:relative;z-index:1} .ap-band.mz-glass .ap-btn-accent{background:var(--pop);color:#241200} .ap-band.mz-glass .ap-btn-accent:hover{background:#fff} /* Newsletter-Block (Demnächst-Seite) */ .re-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Angebote · Bunte Spielkarten (Konzept 01) */ .ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ag-card{position:relative;overflow:hidden;border-radius:20px;padding:24px;color:#fff;min-height:200px;display:flex;flex-direction:column; box-shadow:0 16px 40px rgba(0,0,0,.36);transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .ag-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.46)} .ag-card::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.13)} .ag-card::before{content:"";position:absolute;left:-20px;bottom:-40px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.07)} .ag-card>*{position:relative;z-index:1} .ag-ic{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;margin-bottom:auto} .ag-ic i{width:28px;height:28px} .ag-ic svg{width:28px;height:28px;stroke:#fff;stroke-width:2} .ag-card h3{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:18px 0 8px;color:#fff} .ag-card p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.9);margin:0} @media(max-width:860px){.ag-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ag-grid{grid-template-columns:1fr}} /* Galerie · verfeinerte Masonry (Konzept 01) */ .mg{columns:4;column-gap:16px} .mg-item{position:relative;overflow:hidden;border-radius:14px;break-inside:avoid;margin-bottom:16px;display:block; box-shadow:0 12px 30px rgba(0,0,0,.34);transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .mg-item:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.46)} .mg-item .art{position:absolute;inset:0} .mg-item .art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px)} .mg-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,4,6,.72))} .mg-lab{position:absolute;left:15px;bottom:13px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)} .mg-item .art,.mg-scrim{border-radius:14px} .mg-h1{height:180px}.mg-h2{height:250px}.mg-h3{height:210px} @media(max-width:980px){.mg{columns:3}} @media(max-width:680px){.mg{columns:2}} @media(max-width:420px){.mg{columns:1}} /* Info · Sticky-Schnellzugriff + Inhalt (Konzept 04) */ .iz4{display:grid;grid-template-columns:236px 1fr;gap:clamp(20px,3vw,40px);align-items:start} .iz4-rail{position:sticky;top:84px} .iz4-railcard{border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:20px;background:linear-gradient(150deg,var(--accent),#56001F);color:#fff} .iz4-railkick{display:block;font-family:var(--font-body);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#F4ECDD;margin-bottom:12px} .iz4-nav{display:flex;flex-direction:column;gap:2px} .iz4-jump{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:rgba(255,255,255,.72);background:none;border:none;text-align:left;padding:9px 11px;border-radius:9px;cursor:pointer;transition:background .14s,color .14s} .iz4-jump:hover{color:#fff;background:rgba(255,255,255,.1)} .iz4-jump.on{color:#fff;background:rgba(255,255,255,.14);font-weight:700} .iz4-tickets{margin-top:14px;width:100%;justify-content:center;background:#fff;color:#2A0010} .iz4-content{display:flex;flex-direction:column;gap:16px;min-width:0} .iz4-sec{scroll-margin-top:90px;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.6vw,30px);background:rgba(255,255,255,.03)} .iz4-title{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;color:#fff;margin:0 0 16px} .iz4-lead{font-size:16px;line-height:1.62;color:var(--fg);margin:0 0 12px} .iz4-lead.sm{font-size:15px} .iz4-p{font-size:14px;line-height:1.65;color:var(--fg);margin:0 0 11px;max-width:70ch} .iz4-two{display:grid;grid-template-columns:1fr 1fr;gap:16px} .iz4-list{margin-top:2px} .iz4-subtitle{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--pop);margin:22px 0 4px} .iz4-row{display:flex;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px solid var(--hair,rgba(255,255,255,.08));font-size:14.5px} .iz4-row:last-child{border-bottom:none} .iz4-row .iz4-k{color:var(--fg)} .iz4-row .iz4-k.strong{color:#fff;font-weight:600} .iz4-row .iz4-k.muted{color:var(--fg);font-size:13.5px} .iz4-row .iz4-v{color:#fff;font-family:var(--font-display);font-weight:700;white-space:nowrap} .iz4-row.is-closed .iz4-v{color:var(--fg-dim);font-weight:600} #iz-about .iz4-k::first-letter{text-transform:uppercase} .iz4-note{font-size:12.5px;line-height:1.55;color:var(--fg);margin:12px 0 0;max-width:64ch} .iz4-facts{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:20px} .iz4-facts b{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--pop);display:block;line-height:1} .iz4-facts small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim)} .iz4-bonus{background:linear-gradient(150deg,rgba(123,0,44,.5),rgba(86,0,31,.36));border-color:rgba(255,255,255,.16)} .iz4-perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px} .iz4-perks li{position:relative;padding-left:20px;font-size:14.5px;color:var(--fg)} .iz4-perks li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--red-bright,#C20022)} .iz4-contact{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px} .iz4-contact .iz4-cl{display:block;font-family:var(--font-body);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:3px} .iz4-contact > div{font-size:14.5px;color:var(--fg)} .iz4-contact a{color:var(--fg)}.iz4-contact a:hover{color:#fff} .iz4-news{display:flex;gap:8px;max-width:440px} .iz4-news input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:#fff;font-family:var(--font-body);font-size:14px} .iz4 .ap-ok{display:none;margin-top:12px;color:var(--pop);font-weight:600;font-size:14px} .iz4-legallinks{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:14px} .iz4-legallinks a{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--fg-dim);border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none} .iz4-legallinks a:hover{color:#fff;border-color:rgba(255,255,255,.3)} /* ===== Eintrittspreise (ez-) ===== */ .ez-intro{font-size:16px;line-height:1.65;color:var(--fg);max-width:none;margin:0 0 24px} .ez-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start} .ez-lift{transition:transform .35s var(--ease),border-color .35s} .ez-lift:hover{transform:translateY(-3px);border-color:rgba(224,96,122,.45)} .ez-price{display:inline-block;font-variant-numeric:tabular-nums;transition:transform .25s var(--ease)} .ez-price.ez-pulse{transform:scale(1.1)} .iz4-row .iz4-v.ez-acc{color:#e0607a} .ez-grid .iz4-subtitle{color:#e0607a} .ez-tlist{margin-top:6px} .ez-trow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)} .ez-trow:last-child{border-bottom:none} .ez-tlabel{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff} .ez-tnote{font-size:12.5px;color:var(--fg-dim);margin-top:3px} .ez-bigprice{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.01em;color:#fff;white-space:nowrap} .ez-bigprice.ez-acc{color:#e0607a} .ez-kkcard img{display:block;width:100%;max-width:300px;height:auto;border-radius:12px;box-shadow:0 18px 42px rgba(0,0,0,.5);transform:rotate(-1.4deg);transition:transform .4s var(--ease)} .ez-kkcard:hover img{transform:rotate(0) translateY(-3px)} .ez-noteic{color:#e0607a;font-size:9px;vertical-align:2px;margin-right:5px} .ez-sech{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:#fff;margin:34px 0 14px} .ez-faqs{display:flex;flex-direction:column;gap:8px} .ez-faq{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 18px;transition:border-color .25s} .ez-faq:hover{border-color:rgba(224,96,122,.4)} .ez-faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;background:none;border:none;text-align:left;color:var(--fg);font-family:var(--font-display);font-weight:600;font-size:15px;padding:16px 0;cursor:pointer} .ez-faq-q .ez-chev{color:#e0607a;flex:none;transition:transform .3s var(--ease)} .ez-faq.open .ez-faq-q .ez-chev{transform:rotate(180deg)} .ez-faq-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)} .ez-faq.open .ez-faq-wrap{grid-template-rows:1fr} .ez-faq-inner{overflow:hidden;min-height:0} .ez-faq-a{font-size:14px;line-height:1.62;color:var(--fg);margin:0;padding:0 0 16px;max-width:none} .ez-know{display:grid;grid-template-columns:1.4fr .85fr;gap:clamp(20px,3vw,40px);align-items:center;margin-top:32px;padding:clamp(22px,3vw,32px);border-radius:16px;border:1px solid rgba(224,96,122,.28);background:linear-gradient(150deg,rgba(123,0,44,.34),rgba(123,0,44,.10))} .ez-know h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;color:#fff;margin:8px 0 10px} .ez-know p{font-size:14.5px;line-height:1.65;color:var(--fg);max-width:none;margin:0 0 18px} .ez-kkcard{display:flex;justify-content:center} .ez-kkcard .fs-card-img{transform:rotate(-1.4deg);transition:transform .4s var(--ease)} .ez-kkcard:hover .fs-card-img{transform:rotate(0) translateY(-3px)} @media(max-width:760px){.ez-grid{grid-template-columns:1fr}.ez-know{grid-template-columns:1fr}.ez-know-text{order:2}.ez-kkcard{order:1}} /* Seite Öffnungszeiten. Kein Status-Banner: den Öffnungsstatus zeigt schon die Pille in der Kopfzeile, doppelt wirkt unruhig. */ .oz-week{margin-top:4px} .oz-row{display:flex;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:1px solid var(--hair,rgba(255,255,255,.08));font-size:15px} .oz-row:last-child{border-bottom:none} .oz-row .oz-day{color:var(--fg)} .oz-row .oz-time{color:#fff;font-family:var(--font-display);font-weight:700;white-space:nowrap} .oz-row.zu .oz-time{color:var(--fg-dim);font-weight:600} /* Heutiger Tag: eigene Zeile hervorheben, damit man ihn ohne Suchen findet. Grün wie die "Geöffnet"-Pille im Kopf – Rot würde nach geschlossen aussehen. */ .oz-row.now .oz-day{color:#fff;font-weight:600} .oz-row.now .oz-time{color:#3FB950} /* Ist der heutige Tag ein Ruhetag, bleibt es gedimmt: grünes "Geschlossen" wäre irreführend. Muss nach .now stehen, sonst gewinnt die Reihenfolge. */ .oz-row.now.zu .oz-time{color:var(--fg-dim)} /* .iz4-v ist sonst nowrap (dort stehen Preise). Hier sind es ganze Sätze ("30 Minuten vor der ersten Vorstellung") – die müssen umbrechen, sonst schiebt die Zeile das Layout auf Mobil über den Bildschirmrand. */ .oz-facts .iz4-row{gap:12px} .oz-facts .iz4-v{white-space:normal;text-align:right} @media(max-width:520px){ /* Bei sehr schmalen Geräten Label über Wert stapeln – nebeneinander bleiben sonst zwei Wörter je Zeile übrig. */ .oz-facts .iz4-row{flex-direction:column;align-items:flex-start;gap:2px} .oz-facts .iz4-v{text-align:left} } /* Nav: heutige Öffnungszeiten (statt Gutschein-Button) */ .ap-navhours{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--rchip);border:1.5px solid var(--line)} .ap-navhours.is-open{background:rgba(63,185,80,.14);border-color:rgba(63,185,80,.5)} .ap-navhours.is-closed{background:rgba(194,74,74,.14);border-color:rgba(194,74,74,.5)} .ap-navhours .nh-dot{width:8px;height:8px;border-radius:50%;flex:none} .ap-navhours.is-open .nh-dot{background:#3FB950;box-shadow:0 0 10px rgba(63,185,80,.8)} .ap-navhours.is-closed .nh-dot{background:#C24A4A;box-shadow:0 0 10px rgba(194,74,74,.7)} .ap-navhours .nh-time{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;white-space:nowrap} .ap-navhours.is-open .nh-time b{color:#3FB950} .ap-navhours.is-closed .nh-time b{color:#E08A8A} @media(max-width:760px){.ap-navhours{display:none}} /* Mobile-only gestapelter Öffnungs-Badge (oben links, Idee 3) */ .ap-navhours-m{display:none} @media(max-width:760px){ .ap-navhours-m{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;z-index:2} .ap-navhours-m .nh-dot{width:9px;height:9px;border-radius:50%;flex:none} .ap-navhours-m.is-open .nh-dot{background:#3FB950;box-shadow:0 0 9px rgba(63,185,80,.85)} .ap-navhours-m.is-closed .nh-dot{background:#C24A4A;box-shadow:0 0 9px rgba(194,74,74,.75)} .ap-navhours-m .nh-stack{display:flex;flex-direction:column;line-height:1.05} .ap-navhours-m .nh-w{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:#fff} .ap-navhours-m.is-open .nh-w{color:#5fd06e} .ap-navhours-m.is-closed .nh-w{color:#e08a8a} .ap-navhours-m .nh-s{font-size:9.5px;color:#fff;font-weight:600;letter-spacing:.04em} } @media(max-width:820px){.iz4{grid-template-columns:1fr}.iz4-rail{position:static}.iz4-nav{flex-direction:row;flex-wrap:wrap}.iz4-jump{font-size:13px;padding:7px 11px}.iz4-tickets{width:auto}.iz4-two,.iz4-perks,.iz4-contact{grid-template-columns:1fr}} /* Info · Zentrierte Lese-Spalte (Konzept 05) */ .iz{max-width:720px;margin:0 auto;padding:0 clamp(18px,4vw,24px);text-align:center} .iz-sec{padding:34px 0;border-top:1px solid rgba(255,255,255,.08)} .iz-sec:first-child{border-top:none;padding-top:6px} .iz-kick{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pop);margin:0 0 12px} .iz-title{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:#fff;margin:0 0 18px} .iz-lead{font-size:17px;line-height:1.6;color:var(--fg);max-width:60ch;margin:0 auto 14px} .iz-lead.sm{font-size:15.5px} .iz-p{font-size:14.5px;line-height:1.65;color:var(--fg-dim);max-width:62ch;margin:0 auto 12px} .iz-list{max-width:460px;margin:0 auto} .iz-row{display:flex;justify-content:space-between;gap:18px;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;text-align:left} .iz-row:last-child{border-bottom:none} .iz-row .iz-k{color:var(--fg)} .iz-row .iz-k.strong{color:#fff;font-weight:600} .iz-row .iz-k.muted{color:var(--fg);font-size:14px} .iz-row .iz-v{color:#fff;font-family:var(--font-display);font-weight:700;white-space:nowrap} .iz-row.is-closed .iz-v{color:var(--fg-dim);font-weight:600} .iz-note{font-size:13px;line-height:1.55;color:var(--fg-dim);max-width:60ch;margin:12px auto 0} .iz-perks{list-style:none;margin:0 auto 20px;padding:0;max-width:520px;display:flex;flex-direction:column;gap:10px;text-align:left} .iz-perks li{position:relative;padding-left:22px;font-size:15px;color:var(--fg)} .iz-perks li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--red-bright,#C20022)} .iz-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:22px} .iz-facts div{display:flex;flex-direction:column;gap:2px} .iz-facts b{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--pop);letter-spacing:-.01em} .iz-facts small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim)} .iz-contact{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:0 auto} .iz-contact > div{font-size:15px;color:var(--fg)} .iz-contact .iz-cl{display:block;font-family:var(--font-body);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:3px} .iz-contact a{color:var(--fg)} .iz-contact a:hover{color:#fff} .iz-news{display:flex;gap:8px;max-width:420px;margin:0 auto} .iz-news input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:#fff;font-family:var(--font-body);font-size:14px} .iz .ap-ok{display:none;margin-top:12px;color:var(--pop);font-weight:600;font-size:14px} .iz-legal .iz-legallinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:16px} .iz-legal .iz-legallinks a{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--fg-dim);border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none} .iz-legal .iz-legallinks a:hover{color:#fff;border-color:rgba(255,255,255,.3)} /* Aktuelles Programm · Zwei-Spalten Karten + 5-Tage-Raster (Konzept 02) */ .pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .pg-card{position:relative;display:grid;grid-template-columns:84px 1fr;gap:18px;overflow:hidden;border-radius:16px;padding:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 38%,transparent),rgba(255,255,255,.04) 60%); -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4); transition:transform .18s var(--ease),border-color .18s,box-shadow .18s} .pg-card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,.22),transparent 40%);opacity:.8} .pg-card>*{position:relative;z-index:1} .pg-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.32);box-shadow:0 24px 50px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.5)} .pg-poster{position:relative;overflow:hidden;aspect-ratio:2/3;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.4)} .pg-poster .art{position:absolute;inset:0} .pg-poster::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 12px)} .pg-poster.has-poster::after{display:none} .pg-poster .ap-pimg{z-index:1} .pg-body h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:#fff;margin:0;line-height:1.06} .pg-meta{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-dim);margin:7px 0 14px} .pg-sched{display:grid;grid-template-columns:repeat(7,1fr);gap:7px} @media(max-width:560px){.pg-sched{grid-template-columns:repeat(4,1fr);row-gap:12px}} .pg-sd{text-align:center} .pg-dl{font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--pop);display:block} .pg-dd{font-size:9px;color:#fff;display:block;margin-top:1px} .pg-dt{display:flex;flex-direction:column;gap:5px;margin-top:8px} .pg-tt{font-family:var(--font-display);font-weight:700;font-size:12px;color:#fff;background:var(--red-deep,#8E0014);border-radius:7px;padding:5px 0;text-align:center;transition:background .14s} .pg-tt:hover{background:var(--red-bright,#C20022)} .pg-no{color:rgba(244,236,239,.22);font-size:12px;font-weight:700} @media(max-width:760px){.pg-grid{grid-template-columns:1fr}} /* Demnächst-Karte · Akzentlinie (Konzept 03) */ .ap-filmcard .info.mz-dninfo{margin-top:12px;padding-left:12px;border-left:2px solid var(--red-bright)} .ap-filmcard .info.mz-dninfo .s{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--burgundy);padding:3px 9px;border-radius:999px} .ap-filmcard .info.mz-dninfo h4{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:5px 0 0;color:#fff;line-height:1.05} .mz-news{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,48px);align-items:center; background:linear-gradient(135deg,rgba(123,0,44,.66),rgba(86,0,31,.52) 52%,rgba(123,0,44,.42)); -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3); border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:clamp(28px,4vw,44px); box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 1px rgba(0,0,0,.25)} .mz-news::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.2),transparent 40%);opacity:.7} .mz-news > *{position:relative;z-index:1} .mz-news-text .ap-kicker{color:#F4ECDD} .mz-news-text h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,34px);color:#fff;letter-spacing:-.02em;margin:8px 0 10px} .mz-news-text p{color:rgba(255,255,255,.85);max-width:46ch;text-wrap:pretty;margin:0} .mz-news-form{display:flex;gap:10px;flex-wrap:wrap} .mz-news-form input{flex:1;min-width:200px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);border-radius:12px;padding:14px 16px;color:#fff;font-family:var(--font-body);font-size:15px} .mz-news-form input::placeholder{color:rgba(255,255,255,.62)} .mz-news-form .ap-btn-accent{background:var(--pop);color:#241200;white-space:nowrap} .mz-news-form .ap-btn-accent:hover{background:#fff} @media(max-width:720px){.mz-news{grid-template-columns:1fr}} /* Footer · Konzept 03 (Zentriert minimal) */ .ap-footer.mz-foot{position:relative;background:#1B0009;margin-top:0;padding:clamp(40px,5vw,56px) clamp(24px,4vw,52px) 28px;display:flex;flex-direction:column;align-items:center;text-align:center} .mz-foot-reel{position:absolute;top:0;left:0;right:0;padding:0} .mz-foot .ap-ftlogo{height:30px;margin:0 0 22px} .mzf-nav{display:flex;gap:8px 26px;justify-content:center;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;margin-bottom:18px} .mzf-nav a{color:rgba(255,255,255,.82);font-size:15px} .mzf-nav a:hover{color:#fff} .mz-foot .ap-socials{justify-content:center} .mz-foot .mzf-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:center;color:var(--fg);font-size:12.5px;margin-top:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;width:100%;max-width:760px} .mz-foot .mzf-bottom a{color:var(--fg)} .mz-foot .mzf-bottom a:hover{opacity:.8} .mz-foot .mzf-bottom > span{order:2;flex-basis:100%;text-align:center;font-size:11px;color:var(--fg);margin-top:4px} .mz-foot .mzf-bottom > a{order:1} .ap-pagehead .ap-h1{font-size:clamp(28px,4.4vw,46px)} /* mosaic hero — zwei seitlich scrollende Plakat-Reihen, eins sticht heraus */ .mosaic-hero{padding:0} .mosaic-wall{--tw:clamp(86px,9.5vw,116px);position:relative;display:flex;flex-direction:column;gap:8px;padding:8px;overflow:hidden} .mosaic-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;z-index:3; background:linear-gradient(180deg,transparent,var(--bg))} .mw-row{overflow:hidden} .mw-track{display:flex;gap:8px;width:max-content} .mosaic-tile{position:relative;flex:0 0 var(--tw);height:calc(var(--tw)*1.5);border-radius:8px;overflow:hidden;filter:brightness(.6) saturate(.95);box-shadow:inset 0 0 0 0 rgba(255,255,255,0);transition:filter .3s ease,box-shadow .3s ease} .mosaic-tile.glow{filter:brightness(1.18) saturate(1.1);box-shadow:inset 0 0 0 3px rgba(255,255,255,.92)} .mosaic-tile .art{position:absolute;inset:0} .mosaic-tile .art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 11px)} @media(prefers-reduced-motion:no-preference){ .mw-row.r1 .mw-track{animation:mw-left 330s linear infinite} .mw-row.r2 .mw-track{animation:mw-right 300s linear infinite} /* Aufleuchten: per JS (mosaicGlow) -> immer nur EINE Kachel zufällig hell, über beide Reihen zusammen. Kein deterministischer CSS-Stagger mehr. */ } @keyframes mw-left{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes mw-right{from{transform:translateX(-50%)}to{transform:translateX(0)}} .mosaic-feature{padding:clamp(24px,4vw,42px) 0 0} .mosaic-feature .ap-herotitle{margin:12px 0 16px} /* Hero-Intro-Overlay (Kino-Name + Tagline mittig auf der Plakat-Wand) */ .mosaic-hero{position:relative} .mosaic-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,rgba(14,10,12,.72),rgba(14,10,12,.3) 60%,transparent)} .mosaic-intro{position:absolute;z-index:4;left:0;right:0;top:50%;transform:translateY(-54%);text-align:center;pointer-events:none} .mosaic-intro .ap-eyebrow{justify-content:center;color:var(--pop)} .mosaic-logo{height:clamp(46px,7vw,88px);width:auto;margin:0 auto;display:block;filter:drop-shadow(0 6px 30px rgba(0,0,0,.55))} /* Marquee-Lichter-Trennlinie (Konzept 01) zwischen Hero-Karussell und "Heute läuft" */ .reel-divider{display:block;padding:0} .marquee-strip{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,20px);width:100%; height:18px;background:#0A0507;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden} .marquee-strip i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--pop);box-shadow:0 0 8px rgba(247,201,72,.85)} .marquee-strip i:nth-child(even){background:#fff;box-shadow:0 0 8px rgba(255,255,255,.75)} @media(prefers-reduced-motion:no-preference){ .marquee-strip i{animation:marquee-blink 1.4s steps(1,end) infinite} .marquee-strip i:nth-child(2n){animation-delay:.7s} .marquee-strip i:nth-child(3n){animation-delay:.35s} } @keyframes marquee-blink{0%,49%{opacity:1}50%,100%{opacity:.35}} .mosaic-claim{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4vw,52px);letter-spacing:-.02em;color:#fff;margin:14px 0 0;line-height:1;text-shadow:0 6px 40px rgba(0,0,0,.6)} /* Hero-Overlay · Suchleiste / Schnellstart */ .mosaic-search{position:absolute;z-index:4;left:0;right:0;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px} .mosaic-search .ms-q{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.6vw,28px);color:#fff;letter-spacing:-.01em;text-shadow:0 4px 22px rgba(0,0,0,.65)} .ms-bar{display:flex;align-items:center;gap:10px;width:min(560px,100%);padding:7px 7px 7px 20px; background:rgba(12,8,10,.55);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.22);border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.28)} .ms-bar svg{width:18px;height:18px;color:rgba(244,236,239,.7);flex:none} .ms-bar input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-family:var(--font-body);font-size:15px} .ms-bar input::placeholder{color:rgba(244,236,239,.55)} .ms-go{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;background:var(--accent);border:none;border-radius:999px;padding:10px 18px;cursor:pointer;white-space:nowrap;transition:background .14s} .ms-go:hover{background:var(--red-bright,#C20022)} .ms-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .ms-chips a{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;text-decoration:none;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);transition:background .14s,border-color .14s} .ms-chips a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.36)} @media(max-width:560px){.ms-q{font-size:19px}.ms-bar .ms-go{padding:10px 14px}} .mosaic-wall{margin-top:0} /* Event-Werbung im Hero: Featured + Terminliste */ .mx-events{display:block;padding-top:0} .mx-evhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .mx-evhead .mx-eyebrow{display:inline-flex;margin-bottom:0} /* Bento · Magazin */ .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:158px;gap:14px} .bento-cell{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);padding:18px; display:flex;flex-direction:column;justify-content:flex-end;color:#fff;transition:transform .16s var(--ease)} .bento-cell:hover{transform:translateY(-3px)} .bento-cell::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px);pointer-events:none} .bento-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.62));pointer-events:none} .bento-cell > *{position:relative;z-index:1} .bento-cell.feat{grid-column:span 2;grid-row:span 2} .bento-tag{position:absolute;top:16px;left:16px;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.3)} .bento-when{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;color:#fff;opacity:.95;margin-bottom:6px} .bento-cell h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:17px;line-height:1.06;margin:0;color:#fff} .bento-cell.feat h3{font-size:clamp(24px,2.6vw,32px)} .bento-cell p{color:rgba(255,255,255,.85);font-size:13.5px;margin:7px 0 0;display:none;max-width:44ch;text-wrap:pretty} .bento-cell.feat p{display:block} .bento-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%} /* Verlauf über dem Bild: unten steht die Schrift, dort muss es dunkel genug sein. Helle Motive (gelbe Kampagnengrafiken) verschluckten den Text sonst. Oben nur ein Hauch, damit das Motiv nicht flach wird. */ .bento-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 32%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.94) 86%,rgba(0,0,0,.96) 100%)} /* Mobil ist die Kachel deutlich flacher, der Text beginnt schon bei gut der halben Höhe – der Verlauf muss entsprechend früher dunkel werden. */ @media(max-width:760px){ .bento-veil{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.9) 60%,rgba(0,0,0,.96) 100%)} } .bento-cell.has-img::before,.bento-cell.has-img::after{display:none} /* Größere Boxen (Suchergebnisse) */ .bento.bento-lg{grid-auto-rows:230px;gap:16px} .bento-lg .bento-cell{padding:22px;border-radius:18px} .bento-lg .bento-tag{top:18px;left:18px;font-size:11px;padding:4px 11px} .bento-lg .bento-when{font-size:13px;margin-bottom:6px} .bento-lg .bento-cell h3{font-size:21px} .bento-lg .bento-cell.feat h3{font-size:clamp(28px,3vw,40px)} .bento-lg .bento-cell p{font-size:14px;margin-top:9px} @media(max-width:860px){.bento.bento-lg{grid-auto-rows:200px}} @media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr)}.bento-cell.feat{grid-column:span 2}} @media(max-width:520px){.bento,.bento.bento-lg{grid-template-columns:1fr;grid-auto-rows:auto}.bento-cell{min-height:200px}.bento-cell.feat{grid-column:span 1;grid-row:auto;min-height:300px}} @media(max-width:600px){.mosaic-wall{--tw:clamp(100px,32vw,140px)}} .ap-navlinks a{font-weight:700} /* Veranstaltungen · Poster-Split Bänder */ .mv-list{display:flex;flex-direction:column;gap:16px} /* Start-Hero · Mini-Bänder (gleiche Optik wie Veranstaltungsseite) */ .mx-list{gap:10px} .mx-list li a.mx-mini{display:grid;grid-template-columns:58px 1fr;gap:0;border:1px solid var(--line);border-radius:12px; overflow:hidden;background:var(--surface);padding:0;transition:transform .16s var(--ease),border-color .16s} .mx-list li a.mx-mini:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.24);padding-left:0} .mxm-poster{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff; padding:8px 0;text-align:center;font-family:var(--font-display);line-height:1} .mxm-poster::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 10px)} .mxm-poster .cal-m{position:relative;z-index:1;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9} .mxm-poster .cal-d{position:relative;z-index:1;font-size:22px;font-weight:700;margin-top:2px} .mxm-poster .cal-solo{position:relative;z-index:1;font-size:9px;font-weight:700;padding:0 4px;line-height:1.15} .mxm-body{display:flex;align-items:center;gap:10px;padding:10px 14px;min-width:0} .mxm-body .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mv-band{display:grid;grid-template-columns:320px 1fr;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);min-height:164px;transition:transform .16s var(--ease),border-color .16s} .mv-band:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24)} .mv-band:nth-child(even){grid-template-columns:1fr 320px} .mv-band:nth-child(even) .mv-poster{order:2} .mv-poster{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:22px;color:#fff} .mv-poster::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 12px);pointer-events:none} .mv-ptag{align-self:flex-start;position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.3);color:#fff;border:1px solid rgba(255,255,255,.3);padding:4px 11px;border-radius:999px} .mv-pdate{position:relative;z-index:1} .mv-pday{display:block;font-family:var(--font-display);font-weight:700;font-size:52px;line-height:.9;letter-spacing:-.03em} .mv-pmon{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;opacity:.92;margin-top:4px} .mv-detail{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px} .mv-detail h3{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.01em;color:#fff;margin:0} .mv-detail p{color:var(--fg-soft);font-size:14.5px;margin:0;max-width:56ch;text-wrap:pretty} .mv-time{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--fg)} @media(max-width:760px){.mv-band,.mv-band:nth-child(even){grid-template-columns:1fr}.mv-band:nth-child(even) .mv-poster{order:0}.mv-poster{min-height:130px}} .ap-sechead .ap-ix{display:none} .ap-ftbottom,.ap-ftbottom a{color:rgba(255,255,255,.82)} .fs-card-img .punch.free{box-shadow:none} .fs-stamp.in .fs-card-img .punch.free{animation:fs-freein .5s var(--ease) 1.5s forwards} .ap-btn .btn-ico{width:16px;height:16px;flex:none} .ap-tag.acc{background:rgba(194,0,34,.18);color:#FF6B82;border-color:rgba(255,107,130,.55);border-radius:999px} .mx-list .ap-tag{font-size:9.5px;padding:3px 8px;letter-spacing:.04em} .mx-list .mx-cal{flex:none;width:46px;border-radius:8px;overflow:hidden;background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.4);text-align:center;font-family:var(--font-display);line-height:1} .mx-list .mx-cal .cal-m{display:block;background:var(--red-bright);color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 0} .mx-list .mx-cal .cal-d{display:block;color:#1a1113;font-size:22px;font-weight:700;padding:5px 0 7px} .mx-list .mx-cal .cal-solo{font-size:10px;line-height:1.1;padding:6px 4px} .ap-eyebrow{color:var(--nav-fg)} .ap-eyebrow::before{background:var(--accent)} /* ===== Galerie-Struktur: Top-Nav + dichtes Poster-Raster ===== */ /* Wochen-Filmliste (zweispaltig, Zeilen statt Kachelwand) */ .fl-list{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} /* Heute im Programm · Schwebendes Plakat (Glas, Konzept E) */ .hp-card{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:12px 12px 16px;overflow:hidden; background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 46%,rgba(255,255,255,.02)); -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 1px rgba(0,0,0,.3); transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s} .hp-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2; background:linear-gradient(150deg,rgba(255,255,255,.26),transparent 38%);opacity:.8} .hp-card > *{position:relative;z-index:1} .hp-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34); box-shadow:0 24px 54px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 1px rgba(0,0,0,.3)} .hp-ph{position:relative;display:block;aspect-ratio:2/3;border-radius:13px;overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.5)} .hp-ph .art{position:absolute;inset:0} .hp-ph .art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 12px)} .hp-ph .ap-pimg{z-index:1} .hp-fmt{position:absolute;top:0;left:14px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:11px; letter-spacing:.06em;color:#fff;padding:6px 13px 7px;border-radius:0 0 11px 11px; border:1px solid rgba(255,255,255,.24);border-top:none; box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)} .hp-fmt.is3d{background:linear-gradient(135deg,var(--red-bright,#C20022),var(--accent,#7B002C))} .hp-fmt.is2d{background:linear-gradient(135deg,rgba(20,16,18,.96),rgba(10,5,7,.92));border-color:rgba(255,255,255,.18)} .hp-b{padding:13px 4px 0;display:flex;flex-direction:column;flex:1} .hp-b .fl-times{gap:8px;margin-top:auto;padding-top:11px} .hp-b h4{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;line-height:1.07;margin:0} .hp-b .fl-times{gap:8px} .hp-b .fl-times .ap-time{font-size:15px;padding:9px 14px;border-radius:11px} .hp-meta{font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(244,236,239,.62);margin:6px 0 11px} @media(max-width:1200px){.fl-list{grid-template-columns:repeat(4,1fr)}} @media(max-width:860px){.fl-list{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.fl-list{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){.fl-list{grid-template-columns:1fr}} /* „Heute im Programm" (nur Startseite): Mobil Poster-Hero (Backdrop) statt Karten-Liste. Scoped auf .fl-today, damit z. B. die Suche ihre .fl-list mobil weiter zeigt. */ .fl-hero{display:none} @media(max-width:600px){ .fl-today .fl-list{display:none} /* isolation: eigener Stacking-Context, damit die karten-internen z-index (Überlappung) NICHT über den Sticky-Header (z 60) steigen. */ .fl-today .fl-hero{display:flex;flex-direction:column;position:relative;z-index:1;isolation:isolate} } /* FSK-Farbbadges (global) */ .fsk{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:11px;border-radius:6px;padding:3px 8px;line-height:1.2;flex:none} .fsk-0{background:#fff;color:#1a1010}.fsk-6{background:#f5c518;color:#1a1010}.fsk-12{background:#2e7d32;color:#fff} .fsk-16{background:#1565c0;color:#fff}.fsk-18{background:#c62828;color:#fff}.fsk-x{background:rgba(255,255,255,.14);color:#cbb9c1} /* Poster-Hero-Karte */ .flh-card{position:relative;border-radius:18px;overflow:hidden;min-height:248px;display:flex;flex-direction:column;justify-content:flex-end;margin-top:-34px; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 64px),transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 64px),transparent 100%)} .flh-card:first-child{margin-top:0} /* Letzte Karte: keine darüberliegende -> kein langer Fade-Leerraum nötig. Kompakt halten (kein Mask-Ausblenden, weniger Bodenraum), damit sie so kurz wirkt wie die anderen (deren Unterkante vom Overlap verdeckt ist). */ .flh-card:last-child{min-height:210px;-webkit-mask-image:none;mask-image:none} .flh-card:last-child .flh-bd{padding-bottom:16px} .flh-bg{position:absolute;inset:0} .flh-vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,4,6,.12),transparent 26%,rgba(8,4,6,.8) 70%,rgba(8,4,6,.96))} .flh-go{position:absolute;inset:0;z-index:1} .flh-top{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none} .flh-fmt{font-family:var(--font-display);font-weight:700;font-size:11px;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .flh-bd{position:relative;z-index:2;padding:14px 14px 72px;pointer-events:none} .flh-bd h4{font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff;margin:0 0 4px;line-height:1.02;text-shadow:0 2px 14px rgba(0,0,0,.6)} .flh-meta{font-size:12px;color:rgba(255,255,255,.82);margin-bottom:11px;text-shadow:0 1px 8px rgba(0,0,0,.6)} .flh-times{display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto} .flh-tc{position:relative;z-index:3;font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border-radius:999px;padding:8px 14px;text-decoration:none} .flh-tc:active{background:rgba(247,201,72,.3)} .flh-none{font-size:13px;color:rgba(255,255,255,.78)} .fl-row{position:relative;display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:center; background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,rgba(255,255,255,.02)); -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6); border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:14px;overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 1px rgba(0,0,0,.25); transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s,background .18s} .fl-row::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,.22),transparent 38%);opacity:.7} .fl-row:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.32); background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 42%,rgba(255,255,255,.03)); box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 1px rgba(0,0,0,.25)} .fl-row > *{position:relative;z-index:1} .fl-poster{display:block} .fl-poster .ap-pmini{width:74px;border-radius:7px} .fl-body h4{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:#fff;line-height:1.05} .fl-meta{font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);margin:5px 0 10px} .fl-times{display:flex;flex-wrap:wrap;gap:6px} .fl-times .ap-time{font-size:13px;padding:6px 10px} .fl-noshow{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--fg-dim);font-style:italic} @media(max-width:760px){.fl-row{grid-template-columns:74px 1fr}} /* compact, centered footer (vom Raster-Konzept abweichend) */ .ap-footer .ap-ftgrid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px} .ap-footer .ap-ftgrid h5{display:none} .ap-footer .ap-ftgrid .ap-ftlogo{margin:0 auto 16px} .ap-footer .ap-ftgrid > div:first-child{display:flex;flex-direction:column;align-items:center} .ap-footer .ap-ftgrid > div:nth-child(4){display:none} .ap-footer .ap-ftgrid ul{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 18px} .ap-footer .ap-socials{justify-content:center} .ap-ftbottom{justify-content:center;text-align:center} .ap-ftbottom .sep{margin-left:0} /* Eintrittskarten "Mehr als Kino" (aus Konzept Filmstreifen übernommen) */ .fs-tickets{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .fs-ticket{display:grid;grid-template-columns:54px 18px 1fr;background:#F4ECDD;color:#241712;border-radius:12px; overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4);transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .fs-ticket:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.5)} .tk-stub{background:linear-gradient(180deg,#8E0014,#56001F);color:#fff;display:flex;flex-direction:column; align-items:center;justify-content:space-between;padding:14px 0} .tk-admit{writing-mode:vertical-rl;transform:rotate(180deg);font-family:ui-monospace,Menlo,"Courier New",monospace; font-size:11px;letter-spacing:.32em;font-weight:700} .tk-no{writing-mode:vertical-rl;font-family:ui-monospace,Menlo,"Courier New",monospace;font-size:10px; letter-spacing:.14em;color:rgba(255,255,255,.7)} .tk-perf{position:relative;background:#F4ECDD} .tk-perf::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;transform:translateX(-50%); border-left:2px dashed rgba(36,23,18,.32)} .tk-perf::after{content:"";position:absolute;left:50%;top:-9px;width:18px;height:18px;transform:translateX(-50%); border-radius:50%;background:var(--bg);box-shadow:0 calc(100% + 9px) 0 var(--bg)} .tk-body{padding:20px 22px 20px 16px;display:flex;flex-direction:column;gap:8px} .tk-tag{align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.05em; text-transform:uppercase;color:#8E0014;background:rgba(142,0,20,.1);padding:4px 10px;border-radius:999px} .tk-body h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.1;color:#241712} .tk-body p{color:#5c4a3f;font-size:13.5px;flex:1;text-wrap:pretty} .tk-date{font-family:ui-monospace,Menlo,"Courier New",monospace;font-size:12px;font-weight:700;color:#8E0014; padding-top:10px;border-top:1.5px dashed rgba(36,23,18,.24)} @media(max-width:600px){.fs-tickets{grid-template-columns:1fr}} /* Bonus als Treue-Stempelkarte (aus Konzept Filmstreifen übernommen) */ .fs-stamp{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(24px,4vw,48px);align-items:center; background:linear-gradient(120deg,#2A0010,#56001F);border-radius:18px;padding:clamp(28px,4vw,44px)} .fs-stamp-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.4vw,46px);line-height:1.02;color:#fff;letter-spacing:-.02em;margin:8px 0 10px;text-wrap:balance} .fs-stamp-head p{color:var(--fg);max-width:42ch;text-wrap:pretty;margin-bottom:20px} .fs-stamp-head .ap-kicker{color:#F4ECDD} .fs-card{background:#F4ECDD;border-radius:14px;padding:clamp(18px,2.5vw,24px);box-shadow:0 22px 50px rgba(0,0,0,.4);transform:rotate(-1.4deg)} .fs-card-img{background:#F4ECDD;padding:clamp(10px,1.2vw,12px);border-radius:13px;overflow:visible;box-shadow:0 12px 28px rgba(0,0,0,.28);max-width:272px;margin:0 auto} .fs-card-img img{display:block;width:100%;height:auto;border-radius:8px} .fs-card-img .fs-punches{margin-top:11px;gap:7px} .fs-card-img .punch.free b{font-size:15px} .fs-card-img .punch.free small{font-size:5.5px;letter-spacing:.06em} .fs-card-img .punch.done svg{width:48%;height:48%} .fs-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .fc-brand{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.14em;color:#56001F} .fc-no{font-family:ui-monospace,Menlo,"Courier New",monospace;font-size:11px;font-weight:700;color:#9b8472} .fs-punches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px} .punch{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column} .punch.done{border:2px dashed rgba(86,0,31,.3);color:#8E0014;background:rgba(142,0,20,.06)} .punch.done svg{width:55%;height:55%} .punch.free{background:linear-gradient(160deg,#7B002C,#56001F);color:#fff;box-shadow:0 6px 16px rgba(123,0,44,.5)} .punch.free b{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1} .punch.free small{font-family:var(--font-display);font-weight:700;font-size:8px;letter-spacing:.1em} .fs-stamp .ap-btn-accent{background:var(--fg);color:#2A0010} .fs-stamp .ap-btn-accent:hover{background:#fff} @media(max-width:720px){.fs-stamp{grid-template-columns:1fr}} /* Stempelkarten-Animation */ @media(prefers-reduced-motion:no-preference){ .fs-card{animation:fs-float 5.5s ease-in-out infinite} @keyframes fs-float{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-9px)}} .fs-stamp .punch.done{opacity:0} .fs-stamp.in .punch.done{animation:fs-stampin .44s var(--ease) forwards} .fs-stamp.in .punch.done:nth-child(1){animation-delay:.30s} .fs-stamp.in .punch.done:nth-child(2){animation-delay:.40s} .fs-stamp.in .punch.done:nth-child(3){animation-delay:.50s} .fs-stamp.in .punch.done:nth-child(4){animation-delay:.60s} .fs-stamp.in .punch.done:nth-child(5){animation-delay:.70s} .fs-stamp.in .punch.done:nth-child(6){animation-delay:.80s} .fs-stamp.in .punch.done:nth-child(7){animation-delay:.90s} .fs-stamp.in .punch.done:nth-child(8){animation-delay:1.0s} .fs-stamp.in .punch.done:nth-child(9){animation-delay:1.1s} .fs-stamp.in .punch.done:nth-child(10){animation-delay:1.2s} @keyframes fs-stampin{0%{opacity:0;transform:scale(.35) rotate(-20deg)}55%{opacity:1;transform:scale(1.18) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}} .fs-stamp .punch.free{opacity:0} .fs-stamp.in .punch.free{animation:fs-freein .5s var(--ease) 1.5s forwards, fs-freepulse 2.2s ease-in-out 2.2s infinite} @keyframes fs-freein{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{opacity:1;transform:scale(1.16) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes fs-freepulse{0%,100%{box-shadow:0 6px 16px rgba(194,0,34,.45)}50%{box-shadow:0 8px 32px rgba(194,0,34,.92)}} } /* Rechtsseiten (Impressum/Datenschutz/AGB) */ .legal-prose{max-width:760px;color:var(--fg);font-size:16px} .legal-toc{margin:0 0 40px;padding:18px 22px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04)} .legal-toc-h{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:12px} .legal-toc ol{margin:0;padding-left:20px;display:grid;gap:7px} .legal-toc li{line-height:1.45} .legal-toc a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s} .legal-toc a:hover{border-bottom-color:rgba(244,236,239,.55)} .legal-prose h2{font-family:var(--font-display);font-weight:700;color:var(--fg);font-size:clamp(20px,2.6vw,26px);line-height:1.2;margin:40px 0 12px;scroll-margin-top:96px} .legal-prose h3{font-family:var(--font-display);font-weight:600;color:var(--fg);font-size:clamp(18px,2vw,21px);line-height:1.25;letter-spacing:.01em;margin:34px 0 12px} .legal-prose h2:first-child,.legal-prose h3:first-child{margin-top:0} .legal-prose p{line-height:1.75;margin:0 0 16px;color:var(--fg);text-wrap:pretty} .legal-prose ul{margin:0 0 16px;padding-left:22px;list-style:disc} .legal-prose li{line-height:1.75;margin:0 0 8px} .legal-prose a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,236,239,.45)} .legal-prose a:hover{opacity:.85} /* ===== Hero-Suche: Ergebnisseite ===== */ .sx-bar{display:flex;align-items:center;gap:10px;margin-top:18px;max-width:620px; background:var(--surface);border:1px solid var(--line);border-radius:var(--rchip,999px); padding:10px 12px 10px 16px} .sx-bar svg{width:20px;height:20px;color:var(--fg-dim);flex:none} .sx-bar input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--fg); font:500 16px/1.2 Montserrat,sans-serif} .sx-bar input::placeholder{color:var(--fg-dim)} .sx-bar .ms-go{flex:none} .sx-hint{color:var(--fg-soft);margin:24px 0;max-width:680px;line-height:1.6} .sx-empty{margin:32px 0 48px;max-width:680px} .sx-empty h3{font:700 24px/1.1 Quicksand,sans-serif;color:var(--fg);margin:0 0 8px} .sx-empty p{color:var(--fg-soft);line-height:1.6} .sx-empty a{color:var(--pop)} .sx-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} .sx-offer{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--rcard,20px); color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .16s var(--ease,cubic-bezier(.2,.6,.2,1))} .sx-offer:hover{transform:translateY(-4px)} .sx-offer-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:14px; background:rgba(255,255,255,.14)} .sx-offer-ic i,.sx-offer-ic svg{width:24px;height:24px} .sx-offer h4{font:700 19px/1.15 Quicksand,sans-serif;margin:4px 0 0} .sx-offer p{font:400 14px/1.5 Montserrat,sans-serif;color:rgba(255,255,255,.85);margin:0} @media(max-width:860px){.sx-offers{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.sx-offers{grid-template-columns:1fr}} /* ---------- Rotierendes Feature-Feld (Bento) ---------- */ .ap-rotator{padding:0} .ap-rotator::before,.ap-rotator::after{display:none} /* Slide hat KEIN Padding -> Bild full-bleed; Text sitzt im gepolsterten .rot-body */ .rot-slide{position:absolute;inset:0;padding:0;opacity:0;transition:opacity .8s ease;pointer-events:none} .rot-slide.is-active{opacity:1;pointer-events:auto} .rot-slide .bento-img,.rot-slide .bento-veil{inset:0;width:100%;height:100%} .rot-slide::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px);pointer-events:none} .rot-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.62));pointer-events:none} .rot-slide.has-img::before,.rot-slide.has-img::after{display:none} .rot-slide .bento-tag{z-index:2} .rot-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px} .bento-lg .rot-body{padding:22px} .rot-dots{position:absolute;bottom:16px;right:18px;z-index:2;display:flex;gap:7px} .rot-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s} .rot-dots span.on{background:#fff} /* "Heute im Programm" – kein Film mehr heute */ .fl-emptyday{color:var(--muted,#9a8f93);font-size:15px;padding:8px 2px} .fl-emptyday a{color:var(--burgundy,#7B002C);font-weight:600} /* Oben: rotierender Event-Ticker (ersetzt das alte Hinweis-Banner im Frontend) */ .ap-ticker{display:block;background:var(--burgundy);color:#fff} .ap-ticker .inner{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 clamp(18px,4vw,40px)} /* "Nächste Events:" – statisches Label, bleibt stehen während die Events rotieren. */ .ap-ticker .tick-label{font-family:var(--font-display);font-weight:700;font-size:14px;white-space:nowrap;flex:none;opacity:.92} /* Rotations-Container: nimmt restliche Breite, Slides liegen absolut darin. */ .ap-ticker .tick-rot{position:relative;flex:1;min-width:0;height:1.5em} .ap-ticker .tick-item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap;opacity:0;transition:opacity .6s ease;pointer-events:none} .ap-ticker .tick-item.is-active{opacity:1;pointer-events:auto} .ap-ticker b{font-family:var(--font-display);font-weight:700;font-size:14px;white-space:nowrap;flex:none} .ap-ticker .t{opacity:.82;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;min-width:0} /* Desktop: tick-line transparent (b/.t bleiben Flex-Kinder). Mobil: Marquee. */ .ap-ticker .tick-line{display:contents} @media(max-width:680px){ .ap-ticker .tick-rot{overflow:hidden} .ap-ticker .tick-item{display:block} .ap-ticker .tick-line{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;will-change:transform} .ap-ticker .tick-line .t{overflow:visible;text-overflow:clip;min-width:auto} } /* ── Veranstaltung – Detailseite (Artikel) ─────────────────────────── */ .ev-back{display:inline-flex;align-items:center;gap:7px;color:var(--fg-soft);font-size:14px; text-decoration:none;margin-bottom:6px;transition:color .15s} .ev-back:hover{color:var(--fg)} .ev-back .ar{font-style:normal} .ev-when{color:var(--pop);font-weight:600} .ev-detail{max-width:820px} .ev-hero{margin:6px 0 28px;border-radius:18px;overflow:hidden;background:var(--card); box-shadow:0 18px 50px rgba(0,0,0,.45)} .ev-hero img{display:block;width:100%;height:auto} /* Artikeltext (Rich-Editor-Ausgabe) */ .ev-article{color:var(--fg-soft);font-size:17px;line-height:1.75;max-width:72ch} .ev-article > :first-child{margin-top:0} .ev-article p{margin:0 0 18px} .ev-article h2{font-family:var(--font-display);font-weight:700;color:var(--fg); font-size:clamp(22px,3vw,30px);line-height:1.18;margin:38px 0 14px} .ev-article h3{font-family:var(--font-display);font-weight:600;color:var(--fg); font-size:clamp(18px,2.2vw,22px);line-height:1.25;margin:30px 0 10px} .ev-article ul,.ev-article ol{margin:0 0 18px;padding-left:24px} .ev-article ul{list-style:disc} .ev-article ol{list-style:decimal} .ev-article li{margin:0 0 8px;line-height:1.7} .ev-article a{color:var(--pop);text-decoration:underline;text-underline-offset:2px} .ev-article a:hover{opacity:.85} .ev-article strong{color:var(--fg);font-weight:700} .ev-article em{font-style:italic} .ev-article blockquote{margin:22px 0;padding:6px 0 6px 18px;border-left:3px solid var(--accent); color:var(--fg);font-style:italic} .ev-article img{max-width:100%;height:auto;border-radius:12px;margin:12px 0} .ev-article hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:28px 0} .ev-empty{color:var(--fg-soft);opacity:.7} .ev-more{margin-top:48px} .ev-more-h{font-family:var(--font-display);font-weight:700;color:var(--fg); font-size:clamp(20px,2.6vw,26px);margin:0 0 18px} /* Textfarbe aus dem Rich-Editor (setzt --color/--dark-color statt color) */ .ev-article .color{color:var(--dark-color,var(--color))} /* ===== Pinnwand ===== Dunkles Brett im Ton der übrigen Seiten, darauf helle Papierfotos mit Klebeband. Kopfzeile erbt die Seitenfarben, nur das Brett bringt eigene. Zwei Träger: die Übersichtsseite (.pinw, volle Sektion) und die Startseite (.pinw-plate, eine Platte im Seitenraster). */ .pinw,.pinw-plate{position:relative;background:#1B1416; background-image: repeating-linear-gradient(52deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px), repeating-linear-gradient(-52deg,rgba(255,255,255,.028) 0 2px,transparent 2px 7px), radial-gradient(circle at 30% 4%,rgba(247,201,72,.07),transparent 58%)} .pinw{padding:0 0 clamp(46px,6vw,74px)} /* Startseite: Platte mit Rand, oben genug Luft für das Klebeband. */ .pinw-plate{border-radius:18px;border:1px solid rgba(255,255,255,.07); padding:clamp(32px,4vw,46px) clamp(18px,3vw,38px) clamp(28px,3.4vw,40px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 48px rgba(0,0,0,.4)} .pinw-plate .pinw-board{margin-top:0;gap:clamp(22px,2.8vw,40px)} .pinw-board{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,52px); margin-top:clamp(18px,2.6vw,30px)} .pinw-ph{position:relative;display:block;background:#FCFAF5;padding:11px 11px 0; box-shadow:0 16px 34px rgba(0,0,0,.55)} /* Leichte Schieflage, alle sechs Winkel wiederholen sich – funktioniert bei jeder Anzahl. */ .pinw-board>*:nth-child(6n+1){transform:rotate(-2.4deg)} .pinw-board>*:nth-child(6n+2){transform:rotate(1.6deg)} .pinw-board>*:nth-child(6n+3){transform:rotate(-1.1deg)} .pinw-board>*:nth-child(6n+4){transform:rotate(2.1deg)} .pinw-board>*:nth-child(6n+5){transform:rotate(-1.8deg)} .pinw-board>*:nth-child(6n){transform:rotate(1.2deg)} @media(prefers-reduced-motion:no-preference){ .pinw-ph{transition:transform .25s var(--ease),box-shadow .25s var(--ease)} } .pinw-board .pinw-ph:hover,.pinw-board .pinw-ph:focus-visible{transform:rotate(0) scale(1.025); box-shadow:0 26px 52px rgba(0,0,0,.65);z-index:3} /* Klebestreifen oben mittig, Winkel wechselt Foto für Foto */ .pinw-tape{position:absolute;top:-13px;left:50%;width:96px;height:27px; transform:translateX(-50%) rotate(-3deg);background:rgba(240,228,190,.6); box-shadow:0 2px 5px rgba(0,0,0,.4); border-left:2px dashed rgba(120,100,72,.22);border-right:2px dashed rgba(120,100,72,.22)} .pinw-board>*:nth-child(2n) .pinw-tape{transform:translateX(-50%) rotate(4deg)} .pinw-im{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#2A0010} .pinw-im img{width:100%;height:100%;object-fit:cover} .pinw-bd{padding:13px 4px 16px} .pinw-date{display:inline-block;font-family:var(--font-script);font-size:24px;line-height:1.05; color:#B3341C;transform:rotate(-1.4deg)} .pinw-ph h3{font-family:var(--font-display);font-weight:700;font-size:17.5px;line-height:1.14; letter-spacing:-.01em;color:#241F1B;margin-top:6px} .pinw-meta{display:block;font-size:13px;line-height:1.5;color:#6B5D4E;margin-top:6px} .pinw-tag{display:block;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:#8A7A66;margin-top:8px} /* Auf dem hellen Brett war das Glas-Band blass – hier deckendes Weinrot mit Verlauf, wie der Newsletter-Block auf der Vorschau-Seite. */ .pinw .ap-band.mz-glass{background:linear-gradient(135deg,#7B002C,#56001F 52%,#7B002C); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)} @media(max-width:860px){.pinw-board{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){ .pinw-board{grid-template-columns:1fr;gap:36px} .pinw-tape{width:84px} } /* Startseite zeigt genau drei Fotos – die bleiben bis zum Smartphone in einer Reihe, sonst stünde eins allein unter den anderen beiden. */ @media(max-width:860px){.pinw-plate .pinw-board{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){ .pinw-plate .pinw-board{grid-template-columns:1fr;gap:34px} } /* Schmale Fotos hängen flacher – gerade dürfen sie nicht sein, aber die Desktop-Winkel würden über den Rand des Bretts ragen. */ @media(max-width:680px){ .pinw-board>*:nth-child(6n+1){transform:rotate(-1.6deg)} .pinw-board>*:nth-child(6n+2){transform:rotate(1.2deg)} .pinw-board>*:nth-child(6n+3){transform:rotate(-.9deg)} .pinw-board>*:nth-child(6n+4){transform:rotate(1.5deg)} .pinw-board>*:nth-child(6n+5){transform:rotate(-1.3deg)} .pinw-board>*:nth-child(6n){transform:rotate(.9deg)} } /* ===== Presse-Seite ===== */ .prs-contact{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:var(--rpanel);padding:clamp(20px,3vw,30px);margin-top:6px} .prs-ckick{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:#fff;background:var(--accent);border:1px solid rgba(255,255,255,.14); padding:5px 12px;border-radius:999px} .prs-contact h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,26px);margin:12px 0 6px;color:var(--fg)} .prs-cdetails{display:flex;flex-direction:column;gap:2px;color:var(--fg-soft);font-size:14.5px} .prs-cactions{display:flex;gap:12px;flex-wrap:wrap} .prs-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.8vw,30px);letter-spacing:-.01em;color:var(--fg);margin:44px 0 6px} .prs-h2-sm{font-size:clamp(19px,2.2vw,23px);margin:0 0 14px} .prs-intro{color:var(--fg-soft);font-size:15px;max-width:none;margin-bottom:20px} .prs-sub{max-width:none} /* Logos */ .prs-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .prs-logo{background:var(--surface);border:1px solid var(--line);border-radius:var(--rpanel);overflow:hidden;transition:border-color .18s,transform .18s} .prs-logo:hover{border-color:var(--pop);transform:translateY(-3px)} .prs-logobox{display:flex;align-items:center;justify-content:center;padding:34px 26px;min-height:140px; width:100%;border:0;cursor:pointer;font:inherit} .prs-logobox img{max-width:74%;max-height:78px;height:auto;object-fit:contain;pointer-events:none} .prs-logobox.tone-dark{background:#120D0F} .prs-logobox.tone-light{background:#F4ECEF} .prs-logobox.tone-mid{background:linear-gradient(135deg,#F6F1F3,#E7DCE0)} .prs-logometa{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--line)} .prs-logometa strong{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--fg)} .prs-logometa span{display:block;color:var(--fg-dim);font-size:12px;margin-top:2px} .prs-dl{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center; background:var(--accent);color:#fff;border:0;cursor:pointer;transition:transform .16s var(--ease),background .16s} .prs-dl:hover{transform:translateY(-2px);background:var(--accent2)} /* Pressefotos */ .prs-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .prs-photo{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--rpanel);overflow:hidden; transition:border-color .18s,transform .18s} .prs-photo:hover{border-color:var(--pop);transform:translateY(-3px)} .prs-pimg{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;width:100%; border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit;color:inherit} .prs-pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .prs-photo:hover .prs-pimg img{transform:scale(1.05)} .prs-dl-over{position:absolute;right:12px;bottom:12px;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.4); pointer-events:none} /* Pressefoto-Download-Modal */ .prs-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px} .prs-modal[hidden]{display:none} .prs-modal-backdrop{position:absolute;inset:0;background:rgba(6,4,5,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .prs-modal-card{position:relative;z-index:1;max-width:760px;width:100%;max-height:88vh;overflow:auto; background:var(--bg2);border:1px solid var(--line);border-radius:var(--rpanel);box-shadow:var(--shadow-poster)} .prs-modal-x{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;border-radius:11px;cursor:pointer; background:rgba(14,10,12,.6);border:1px solid var(--line);color:#fff;font-size:24px;line-height:1} .prs-modal-x:hover{border-color:var(--pop);color:var(--pop)} .prs-modal-imgwrap{background:#0a0709} .prs-modal-imgwrap img{display:block;width:100%;max-height:60vh;object-fit:contain} /* Logo-Vorschau: Schachbrett-Hintergrund, damit weiße/schwarze Logos sichtbar sind */ .prs-modal-imgwrap.is-logo{background: repeating-conic-gradient(#cfc7ca 0 25%, #e9e3e5 0 50%) 0 0/26px 26px} .prs-modal-imgwrap.is-logo img{max-height:46vh;padding:34px} .prs-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px} .prs-modal-meta strong{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--fg)} .prs-modal-meta span{display:block;color:var(--fg-dim);font-size:12.5px;margin-top:2px} .prs-modal-formats{display:flex;gap:10px;flex-wrap:wrap} .prs-fmt{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:13.5px; color:#fff;background:var(--accent);border:0;border-radius:999px;padding:10px 18px;cursor:pointer; transition:transform .16s var(--ease),background .16s} .prs-fmt:hover{transform:translateY(-2px);background:var(--accent2)} .prs-fmt svg{flex:0 0 auto} .prs-modal-hint{padding:0 20px 16px;color:var(--fg-soft);font-size:13px} .prs-modal-hint[hidden]{display:none} .prs-photo figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px} .prs-photo figcaption strong{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--fg)} .prs-photo figcaption span{color:var(--fg-soft);font-size:13px;line-height:1.45} .prs-credit{color:var(--fg-dim)!important;font-size:11.5px!important;margin-top:3px} /* Steckbrief + Pressetext */ .prs-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;margin-top:44px} .prs-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rpanel);padding:clamp(20px,2.6vw,28px)} .prs-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px} .prs-fact{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:14px 14px;text-align:center} .prs-fk{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,22px);color:var(--pop);line-height:1} .prs-fv{display:block;color:var(--fg-soft);font-size:12.5px;margin-top:5px} .prs-dl-list{display:flex;flex-direction:column;gap:0} .prs-dl-list>div{display:flex;justify-content:space-between;gap:16px;padding:11px 2px;border-top:1px solid var(--hair)} .prs-dl-list dt{color:var(--fg-dim);font-size:13px} .prs-dl-list dd{color:var(--fg);font-size:13.5px;font-weight:600;text-align:right;margin:0} .prs-texthead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .prs-hint{font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--fg-dim);letter-spacing:0;text-transform:none} .prs-copy{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--fg);background:var(--surface2); border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .16s var(--ease)} .prs-copy:hover{border-color:var(--pop);color:var(--pop)} .prs-copy.is-done{background:var(--pop);color:#241200;border-color:var(--pop)} .prs-boiler{color:var(--fg);font-size:15.5px;line-height:1.62;margin-bottom:12px} .prs-boiler-p{color:var(--fg-soft);font-size:14px;line-height:1.6;margin-bottom:8px} .prs-mailbtn{display:inline-flex;align-items:center;gap:9px} .prs-usage{margin-top:30px;width:100%;display:flex;align-items:flex-start;gap:12px; color:var(--fg-soft);font-size:13.5px;line-height:1.6; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .prs-usage p{margin:0} .prs-usage-ic{flex:0 0 auto;color:var(--pop);margin-top:1px} @media(max-width:860px){ .prs-logos{grid-template-columns:repeat(3,1fr)} .prs-photos{grid-template-columns:repeat(2,1fr)} .prs-split{grid-template-columns:1fr} } @media(max-width:560px){ .prs-logos{grid-template-columns:1fr} .prs-photos{grid-template-columns:1fr} .prs-contact{flex-direction:column;align-items:flex-start} .prs-facts{grid-template-columns:repeat(2,1fr)} } /* ===== Wunschkino-Voting (/vorschau) ===== */ .wk{margin-top:22px} .wk-searchwrap{position:relative;max-width:560px;margin-bottom:34px} .wk-search{width:100%;font-family:var(--font-body);font-size:16px;color:var(--fg);background:var(--bg2); border:1.5px solid var(--line);border-radius:var(--rchip);padding:15px 20px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} .wk-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(123,0,44,.10)} .wk-search::placeholder{color:var(--fg-dim)} .wk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .wk-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg2);border:1px solid var(--line); border-radius:16px;box-shadow:var(--shadow-card),0 0 0 1px rgba(0,0,0,.25);padding:6px;z-index:30;max-height:380px;overflow-y:auto} .wk-opt{display:flex;gap:12px;align-items:center;padding:8px;border-radius:11px;cursor:pointer;transition:background .12s var(--ease)} .wk-opt:hover,.wk-opt[aria-selected="true"]{background:var(--surface2)} .wk-opt img,.wk-opt .wk-opt-noimg{width:42px;height:63px;border-radius:7px;object-fit:cover;flex:0 0 auto;background:var(--surface2); display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--fg-dim);text-align:center;padding:3px} .wk-opt-t{font-weight:600;font-size:14.5px;color:var(--fg);line-height:1.25} .wk-opt-y{font-size:12.5px;color:var(--fg-dim)} /* Treffer, der schon im Programm läuft: gedimmt + Hinweis-Badge */ .wk-opt.is-inprog{opacity:.6} .wk-opt-prog{display:inline-block;margin-top:3px;font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#e0607a} .wk-msg{margin-top:10px;font-size:14px;color:var(--fg-soft)} .wk-msg.ok{color:var(--accent);font-weight:600} .wk-board{display:flex;flex-direction:column} .wk-empty{color:var(--fg-soft);font-size:15px;padding:14px 0} .wk-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--hair)} .wk-row:first-child{border-top:none} .wk-rank{width:28px;flex:0 0 auto;text-align:center;font-family:var(--font-display);font-weight:700;font-size:19px; color:var(--fg-dim);font-variant-numeric:tabular-nums;transition:color .3s} .wk-row.wk-first .wk-rank{color:var(--pop);text-shadow:0 0 16px rgba(247,201,72,.5)} .wk-poster{position:relative;width:48px;height:70px;flex:0 0 auto;border-radius:9px;overflow:hidden; background:var(--surface2);box-shadow:var(--shadow-card)} .wk-poster img{width:100%;height:100%;object-fit:cover} .wk-noposter{display:flex;align-items:flex-end;justify-content:center;height:100%;padding:5px;text-align:center; font-family:var(--font-display);font-weight:700;font-size:9.5px;line-height:1.1;color:var(--fg-soft)} .wk-body{flex:1;min-width:0} .wk-head{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:9px} .wk-title{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--fg);line-height:1.2} .wk-year{font-size:12.5px;color:var(--fg-dim)} .wk-meter{display:flex;align-items:center;gap:14px} .wk-bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden} .wk-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7B002C,#e0607a);width:0;transition:width .55s var(--ease)} .wk-count{font-size:13.5px;font-weight:700;font-family:var(--font-display);width:36px;text-align:right; font-variant-numeric:tabular-nums;color:var(--fg)} .wk-vote{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-width:120px; font-family:var(--font-display);font-weight:700;font-size:13.5px;color:#e0607a;background:transparent; border:1.5px solid rgba(224,96,122,.5);border-radius:var(--rchip);padding:8px 16px;cursor:pointer;transition:all .15s var(--ease)} .wk-vote:hover{border-color:#e0607a} .wk-flame{transition:transform .15s var(--ease)} .wk-vote:hover .wk-flame{transform:scale(1.14)} .wk-vote[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 18px rgba(123,0,44,.5)} .wk-vote.wk-bump{animation:wkbump .34s var(--ease)} @keyframes wkbump{40%{transform:scale(1.13)}100%{transform:scale(1)}} @media (max-width:560px){ .wk-row{gap:11px} .wk-rank{width:20px;font-size:16px} .wk-poster{width:40px;height:58px} .wk-vote{padding:8px 12px;min-width:0} .wk-vote .wk-vlabel{display:none} } /* ===== WhatsApp Floating-Button (Liquid Glass, grün + Hover-Label) ===== */ .wa-fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:900;display:inline-flex;align-items:center; height:60px;padding:0;border-radius:32px;text-decoration:none;color:#fff;isolation:isolate; /* Durchscheinendes Grün + Tiefen-Verlauf */ background:linear-gradient(140deg,rgba(45,224,112,.78) 0%,rgba(37,211,102,.62) 45%,rgba(18,140,70,.66) 100%); -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%); /* Glaskante hell + Tiefenschatten + innere Lichtkante oben / Schatten unten */ border:1px solid rgba(255,255,255,.32); box-shadow:0 8px 28px rgba(0,0,0,.30),0 2px 8px rgba(16,120,60,.35), inset 0 1px 1px rgba(255,255,255,.55),inset 0 -8px 14px rgba(8,80,40,.30); overflow:hidden;transition:box-shadow .25s ease,transform .2s ease,border-color .25s ease;will-change:transform} /* Glanz-Sheen über der oberen Hälfte = Glas-Reflex */ .wa-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 60%)} .wa-fab:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5); box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 1px 1px rgba(255,255,255,.7),inset 0 -8px 14px rgba(8,80,40,.30)} .wa-fab:active{transform:translateY(0)} .wa-fab__icon{flex:0 0 auto;width:60px;height:60px;display:flex;align-items:center;justify-content:center; position:relative;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,40,18,.45))} /* Puls-Ring zum Blickfang */ .wa-fab__icon::before{content:"";position:absolute;inset:8px;border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:waPulse 2.4s ease-out infinite} @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* Label fährt beim Hover aus */ .wa-fab__label{position:relative;z-index:2;max-width:0;opacity:0;white-space:nowrap;font-family:var(--font-display);font-weight:700; font-size:15px;line-height:1;padding-left:0;text-shadow:0 1px 2px rgba(0,40,18,.4); transition:max-width .3s ease,opacity .25s ease,padding-left .3s ease} .wa-fab:hover .wa-fab__label,.wa-fab:focus-visible .wa-fab__label{max-width:160px;opacity:1;padding-left:18px} @media (prefers-reduced-motion:reduce){ .wa-fab__icon::before,.wa-fab__label{animation:none} .wa-fab,.wa-fab__label{transition:none} } /* Auto-Ausklapp: Label fährt beim Laden kurz aus, klappt dann wieder ein */ @keyframes waReveal{ 0%,7% {max-width:0;opacity:0;padding-left:0} 15%,52% {max-width:180px;opacity:1;padding-left:18px} 66%,100%{max-width:0;opacity:0;padding-left:0} } @media (max-width:640px){ .wa-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));height:54px} .wa-fab__icon{width:54px;height:54px} /* Mobil: einmaliges Auto-Ausklappen beim Laden (~3 s sichtbar), danach kompakter Kreis */ .wa-fab__label{animation:waReveal 5.5s ease .5s 1} /* Tap/Focus klappt erneut aus */ .wa-fab:focus-visible .wa-fab__label{max-width:150px;opacity:1;padding-left:16px} } /* ===== Vergangene Vorstellungen: ausgegraut + „Vorbei" (Startseite „Heute") ===== */ .fl-times{align-items:flex-start} .apt-stack{display:inline-flex;flex-direction:column;align-items:center;gap:3px} .apt-over{font-family:var(--font-display);font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,236,239,.34)} .ap-time--past{background:rgba(255,255,255,.06);color:rgba(244,236,239,.4);text-decoration:line-through;cursor:default;pointer-events:none} .ap-time--past:hover{background:rgba(255,255,255,.06)} /* Mobil-Hero */ .flh-times{align-items:flex-start} .apt-over--hero{color:rgba(255,255,255,.62)} .flh-tc--past{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.46);text-decoration:line-through;pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none} /* ===== Vorschau-Filmgrid: Mobil 2 Spalten (Plakate sonst riesig) ===== */ @media(max-width:600px){ .ap-filmgrid{grid-template-columns:1fr 1fr;gap:18px 12px} .ap-filmcard .info.mz-dninfo{padding-left:9px} .ap-filmcard .info.mz-dninfo h4{font-size:14px} .ap-filmcard .info.mz-dninfo .s{font-size:9.5px;padding:2px 7px} } /* ===== Vorstellungs-Raster (Programm + Veranstaltung mit Film) ===== Markup: resources/views/partials/showtimes-grid.blade.php. Steht hier statt im Seiten-