:root {
  --bg: #fbfbf9; --fg: #1b1b1a; --muted: #6d6d68; --line: #e4e3de; --card: #ffffff;
  --accent: #6366f1; --chip: #efeee9; --past: #b9b8b2; --orig: #1f5f8b;
  --blk-s: 60%; --blk-l: 92%; --blk-edge: 42%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212; --fg: #ecebe6; --muted: #9a9993; --line: #2a2a28; --card: #1a1a19;
    --accent: #7c5cf6; --chip: #262624; --past: #55554f; --orig: #7cc0ef;
    --blk-s: 28%; --blk-l: 21%; --blk-edge: 62%; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121212; --fg: #ecebe6; --muted: #9a9993; --line: #2a2a28; --card: #1a1a19;
  --accent: #7c5cf6; --chip: #262624; --past: #55554f; --orig: #7cc0ef;
  --blk-s: 28%; --blk-l: 21%; --blk-edge: 62%; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main, header.top, footer { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

header.top { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand-h { margin: 0; font-size: inherit; }
.brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); }
button.icon { background: none; border: 1px solid var(--line); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; line-height: 1; }
button.icon svg { width: 16px; height: 16px; }
button.icon:disabled { opacity: .3; cursor: default; }
button.link { background: none; border: 0; padding: 0; text-decoration: underline; color: var(--muted); cursor: pointer; }

h1 { font-size: 2rem; letter-spacing: -0.02em; margin: 28px 0 12px; }

/* ---------- Startseite: Kinosaal-Foto + Glaskarte in Gold (Entwurf F7) ---------- */
.start header.top, .start footer { display: none; }
.start main { max-width: none; padding: 0; position: relative; z-index: 2; }
.start body { background: #140406; color: #fff4ec; }
.start-bg { display: none; }
.start .start-bg { display: block; }
.start-bg .photo { position: fixed; inset: -20px; z-index: 0;
  background: url(/img/redlights.jpg) center 30% / cover no-repeat; opacity: .9; filter: brightness(.75); }
.start-bg .tint { position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(20,4,6,.25), transparent 30%, transparent 70%, rgba(20,4,6,.7)); }
.setup { --gold-a: #f7dc94; --gold-b: #d6a03f;
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; }
.setup .start-card { display: grid; gap: 18px; padding: 30px 24px; border-radius: 28px; width: min(100%, 440px);
  background: rgba(26, 6, 9, .55); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(247, 220, 148, .28); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); color: #fff4ec; }
.setup .q { margin: 0; font-size: clamp(1.6rem, 5.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
.setup .addr-row { position: relative; display: flex; align-items: center; background: rgba(255, 240, 230, .08); border-radius: 999px; padding-left: 18px; }
.setup .addr-row input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1.05rem; padding: 14px 0; color: inherit; }
.setup .addr-row input::placeholder { color: rgba(255, 235, 220, .55); }
.setup .gps { position: static; transform: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: none; color: var(--gold-a); cursor: pointer; }
.setup .gps svg { width: 22px; height: 22px; }
.setup .modes { display: flex; gap: 8px; width: 100%; border: 0; border-radius: 0; overflow: visible; }
.setup .modes button { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border: 0; border-radius: 18px;
  background: rgba(255, 240, 230, .07); color: rgba(255, 240, 230, .82); font-weight: 600; font-size: .85rem; cursor: pointer; transition: transform .15s; }
.setup .modes button + button { border-left: 0; }
.setup .modes button svg { width: 22px; height: 22px; }
.setup .modes button[aria-checked="true"] { background: linear-gradient(135deg, var(--gold-a), var(--gold-b)); color: #2a1504; transform: translateY(-1px); }
.setup .range { display: grid; gap: 10px; }
.setup .range-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setup .range output { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.setup .more { border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; background: rgba(255, 240, 230, .12); color: #fff4ec; }
.setup input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border-radius: 99px; margin: 0;
  background: linear-gradient(90deg, var(--gold-a), var(--gold-b)) 0 / var(--p, 50%) 100% no-repeat, rgba(255, 240, 230, .14); }
.setup input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff8f0; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); cursor: grab; }
.setup input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff8f0; border: 0; }
.setup input[type=range]:focus { outline: none; }
.setup input[type=range]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.setup .msg { margin: 0; color: #ffc2b0; font-size: .9rem; }
.setup .msg:empty { display: none; }
.setup .primary { padding: 16px; border: 0; border-radius: 999px; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  background: linear-gradient(90deg, var(--gold-a), var(--gold-b)); color: #2a1504; box-shadow: 0 10px 30px rgba(247, 220, 148, .3); }
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: max-content; }
.seg button { background: var(--card); border: 0; padding: 8px 14px; cursor: pointer; }
.seg.small button { padding: 5px 10px; font-size: .9rem; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--fg); color: var(--bg); }

/* ---------- Ergebnis-Kopf ---------- */
.summary { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.summary:hover { border-color: var(--fg); }
.summary .back { width: 18px; height: 18px; flex: none; color: var(--muted); }
.summary #sum-text { flex: 1; min-width: 0; }
.summary .edit-label { flex: none; font-size: .85rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--fg); color: var(--bg); }
h1 a { color: inherit; text-decoration: none; }
.lang { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; }
.lang select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }
a.cname { text-decoration: none; }
a.cname:hover { color: var(--accent); }
.cinema-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; background: var(--card); }
.cinema-box summary { cursor: pointer; color: var(--muted); }
.cinema-list { list-style: none; margin: 8px 0 4px; padding: 0; columns: 2 340px; column-gap: 28px; }
.cinema-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; break-inside: avoid; border-top: 1px solid var(--line); }
.cinema-list label { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.cinema-list .cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinema-list .ca { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinema-list .cm { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.route { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.route:hover { color: var(--accent); border-color: currentColor; }
.route svg { width: 15px; height: 15px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 4px 0 10px; }
.toolbar .sort { margin-left: auto; }
.sort { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; }
.sort select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }

.tag { display: inline-block; font-size: .68rem; line-height: 1.5; padding: 0 4px; border-radius: 4px; background: var(--chip); margin-left: 4px; font-weight: 600; vertical-align: 1px; }
.tag.orig { background: var(--orig); color: var(--bg); }
.ratings { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .8rem; font-weight: 600; margin-top: 4px; }
.ratings a { text-decoration: none; }
.ratings a:hover { text-decoration: underline; }

/* ---------- Tage: Tabs + wischbare Tagesseiten ---------- */
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  background: var(--bg); padding: 10px 0; margin: 0 -16px; padding-inline: 16px; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-width: 64px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font-weight: 600; line-height: 1.2; text-align: center; }
.tabs button small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tabs button[aria-selected="true"] small { color: inherit; opacity: .75; }

.carousel { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; transition: height .2s; margin: 0 -16px; }
.carousel::-webkit-scrollbar { display: none; }
.dp { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 16px 8px; }
.dp-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 8px; color: var(--muted); font-size: .9rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.card { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.poster { width: 128px; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: var(--chip); display: block; }
.ci { min-width: 0; }
.ci h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.ci .ot { font-size: .82rem; font-style: italic; }
.ci .meta { font-size: .82rem; margin-top: 2px; }
.cin { margin-top: 10px; }
.cname { display: block; width: fit-content; max-width: 100%; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.times { display: flex; flex-wrap: wrap; gap: 6px; }
.t { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
.t:hover { border-color: var(--fg); }
.t .tag { margin-left: 2px; }
.t.past { opacity: .4; }
.legend { margin: 18px 0 0; }
#empty { padding: 24px 0; }

@media (max-width: 560px) {
  .card { grid-template-columns: 96px 1fr; gap: 12px; padding: 10px; }
  .poster { width: 96px; }
  h1 { font-size: 1.6rem; margin-top: 20px; }
}

footer { padding-top: 32px; padding-bottom: 40px; }

/* ---------- Kinoseite ---------- */
.kino { max-width: 900px; }
.backlink { display: inline-block; margin-top: 18px; text-decoration: none; color: var(--muted); font-weight: 600; }
.backlink:hover { color: var(--fg); }
.kino h1 { margin: 8px 0 4px; }
.kino h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.kino-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.btn { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; font-weight: 600; font-size: .92rem; }
.btn:hover { border-color: var(--fg); }
.route-box { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 12px; }
.route-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.route-sum { font-size: .95rem; }
.map { height: min(52vh, 460px); border-radius: 10px; overflow: hidden; background: var(--chip); z-index: 0; }
.steps { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: .92rem; }
.steps li { padding-left: 4px; }
.steps li small { margin-left: 8px; }
.pday { font-size: 1rem; margin: 18px 0 6px; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plist li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plist .pt { font-weight: 600; min-width: 200px; flex: 1; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.7) invert(1) contrast(.9) hue-rotate(180deg) saturate(.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(.7) invert(1) contrast(.9) hue-rotate(180deg) saturate(.5); } }

/* ---------- Pill-Leiste + Auswahlblätter (Muster aus der Watchlist-App) ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -16px 6px; padding: 2px 16px 8px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; cursor: pointer; font: inherit; font-weight: 500; font-size: .85rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); white-space: nowrap; }
.chip:hover { border-color: var(--fg); }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-count { background: #2a2a2a; border-color: #2a2a2a; color: #fff; font-weight: 600; cursor: default; }
.chip-count.on { cursor: pointer; background: var(--accent); border-color: var(--accent); }
.chip-search { font-weight: 600; }
.chip-reset { color: var(--muted); border-style: dashed; }
dialog.sheet { margin: auto auto 0; width: min(100%, 560px); max-width: 100%; max-height: 80dvh; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: var(--bg); color: var(--fg); box-shadow: 0 -10px 40px rgba(0,0,0,.25); overflow: auto; }
dialog.sheet[open] { animation: sheet-up .22s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } }
dialog.sheet::backdrop { background: rgba(0,0,0,.7); }
.sheet-handle { width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; }
.sheet-head h2 { margin: 0; font-size: 1.1rem; }
.sheet-body { padding: 4px 16px 8px; display: grid; gap: 14px; }
.sheet-done { display: block; width: calc(100% - 32px); margin: 4px 16px 0; padding: 13px; border: 0; border-radius: 12px; background: var(--fg); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; }
.opts { display: grid; }
.opt { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.opt span { flex: 1; }
.opt input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.rg { display: grid; gap: 6px; }
.rg span { display: flex; justify-content: space-between; }
.rg input[type=range] { width: 100%; accent-color: var(--accent); }
.sheet .cinema-list { columns: 1; margin: 0; }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 18px; } }

/* ---------- Filmkarten im Hero-Stil der Watchlist ---------- */
.card { position: relative; overflow: hidden; display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 14px; border-radius: 18px; border: 1px solid rgba(0,0,0,.15); background: #2a2a2c; color: #fff; box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); cursor: pointer; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card .card-bg, .fd-hero .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.5) saturate(1.1); transform: scale(1.2); z-index: 0; pointer-events: none; }
.card .poster { position: relative; z-index: 1; width: 128px; height: 100%; min-height: 192px; align-self: stretch; object-fit: cover; object-position: center top; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); background: rgba(255,255,255,.08); }
.card .ci { position: relative; z-index: 1; }
.card .ftitle { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.card .muted, .card .meta, .card .ot { color: rgba(255,255,255,.78); }
.card .cname { color: #fff; }
.card .cname small { color: rgba(255,255,255,.7); }
.card .t, .film-dlg .t { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.card .t:hover, .film-dlg .t:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.card .tag:not(.orig) { background: rgba(255,255,255,.2); color: #fff; }
.card .tag.orig { background: #7cc0ef; color: #0b1a26; }
@media (max-width: 560px) {
  .card { grid-template-columns: 96px 1fr; gap: 12px; padding: 12px; }
  .card .poster { width: 96px; min-height: 144px; }
}

/* Bewertungs-Pille ("two pills" aus der Watchlist) */
.ratings.two { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; font-size: .72rem; }
.ratings.two .one { display: inline-flex; align-items: center; height: 24px; padding: 0 10px 0 9px; gap: 7px; border-radius: 999px; white-space: nowrap; line-height: 1; font-weight: 600;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); color: #fff; }
.ratings.two .sep { width: 1px; height: 12px; background: rgba(255,255,255,.3); flex: none; }
.ratings.two .rating { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: inherit; }
.ratings.two .rating b { font-size: inherit; }
.logo-imdb { background: #f5c518; color: #000; font-weight: 800; font-size: .54rem; letter-spacing: -.02em; padding: 1px 3px; border-radius: 3px; line-height: 1.2; }
.logo-tmdb { background: #01b4e4; color: #fff; font-weight: 800; font-size: .54rem; padding: 1px 3px; border-radius: 3px; line-height: 1.2; }
.logo-rt { width: 15px; height: 15px; margin-left: -2px; }
.logo-mc-mark { width: 15px; height: 15px; }

/* ---------- Film-Detail ---------- */
dialog.film-dlg { width: min(100%, 720px); max-width: 100%; max-height: 92dvh; padding: 0; border: 0; border-radius: 20px; background: var(--bg); color: var(--fg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
dialog.film-dlg::backdrop { background: rgba(0,0,0,.7); }
.film-body { max-height: 92dvh; overflow: auto; }
.fd-hero { position: relative; overflow: hidden; background: #2a2a2c; color: #fff; }
.fd-player { position: relative; z-index: 1; aspect-ratio: 16/9; background: #000; }
.fd-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fd-top { position: relative; z-index: 1; display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px; }
.fd-top .poster { width: 140px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.fd-info h2 { margin: 0; font-size: 1.4rem; line-height: 1.2; padding-right: 36px; }
.fd-info .ot { font-style: italic; color: rgba(255,255,255,.75); font-size: .9rem; }
.fd-info .meta { color: rgba(255,255,255,.8); font-size: .85rem; margin-top: 3px; }
.fd-actions { margin-top: 12px; }
.fd-trailer { padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; color: #111; font: inherit; font-weight: 700; cursor: pointer; }
.fd-trailer:disabled { opacity: .7; }
.fd-text { padding: 6px 18px 22px; }
.fd-text h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.fd-day h4 { margin: 14px 0 4px; font-size: .9rem; color: var(--muted); }
.film-dlg .t { background: var(--card); border-color: var(--line); color: var(--fg); }
.film-dlg .t:hover { border-color: var(--fg); background: var(--card); }
@media (max-width: 560px) {
  dialog.film-dlg { margin: auto auto 0; border-radius: 18px 18px 0 0; }
  .fd-top { grid-template-columns: 100px 1fr; gap: 12px; padding: 14px; }
  .fd-top .poster { width: 100px; }
  .fd-info h2 { font-size: 1.15rem; }
}

/* ---------- Suche, Kino-Pill, Kino-Blatt, Genres, rote Regler ---------- */
.qbox { position: relative; margin: 2px 0 8px; }
.qbox svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.qbox input { width: 100%; padding: 11px 14px 11px 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font: inherit; outline: none; }
.qbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.chip-kinos { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-kinos svg { width: 15px; height: 15px; }
/* Regler überall in der Hauptfarbe (Rot), mit gefüllter Spur */
input[type=range]:not(#max) { appearance: none; -webkit-appearance: none; height: 8px; border-radius: 99px; background: linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, var(--chip); accent-color: var(--accent); }
input[type=range]:not(#max)::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 1px 6px rgba(0,0,0,.35); cursor: grab; }
input[type=range]:not(#max)::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
input[type=range]:not(#max)::-moz-range-progress { background: var(--accent); height: 8px; border-radius: 99px; }
.reach { display: grid; gap: 12px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.reach-from { font-size: .92rem; }
.reach-mode { display: flex; width: 100%; }
.reach-mode button { flex: 1; padding: 8px 4px; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--muted); }
.cl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl li { display: flex; align-items: center; gap: 8px; }
.cl-row { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; min-width: 0; transition: border-color .15s, background .15s; }
.cl-row:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.cl-row input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; margin: 0; cursor: pointer; }
.cl-row input:checked { background: var(--accent); border-color: var(--accent); }
.cl-row input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.cl-txt { flex: 1; display: grid; min-width: 0; }
.cl-txt .cn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-txt .ca { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row .cm { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.genre-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.gchip input { position: absolute; opacity: 0; pointer-events: none; }
.gchip span { display: inline-block; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: .9rem; }
.gchip span small { color: var(--muted); margin-left: 3px; }
.gchip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.gchip input:checked + span small { color: rgba(255,255,255,.8); }
.gchip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.cname .loc { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; }
.mi { width: 18px; height: 18px; vertical-align: -4px; }
.reach-mode button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.qbox { margin-top: 10px; }

.brand .city { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: .8em; letter-spacing: 0; }

/* Startseite: Ecken wie Entwurf B2 (Niklas 2026-10-10), ohne Ticket-Kerben */
.setup .addr-row { border-radius: 8px; }
.setup .modes button { border-radius: 6px; }
.setup .primary { border-radius: 6px; padding: 18px; }
.setup .more { border-radius: 6px; }
.setup input[type=range] { height: 6px; border-radius: 2px; }

/* Startseite zarter (Niklas 2026-10-10): kleinere Karte, Schrift und Felder, mehr Rand */
.setup { padding: max(40px, 8vh) 28px; }
.setup .start-card { width: min(100%, 360px); gap: 14px; padding: 22px 20px; border-radius: 20px; }
.setup .q { font-size: clamp(1.2rem, 4.6vw, 1.5rem); line-height: 1.2; }
.setup .addr-row { padding-left: 14px; }
.setup .addr-row input { font-size: 1rem; padding: 10px 0; } /* 16px: verhindert Auto-Zoom auf iOS */
.setup .gps { width: 40px; height: 40px; }
.setup .gps svg, .setup .modes button svg { width: 18px; height: 18px; }
.setup .modes { gap: 6px; }
.setup .modes button { padding: 9px 4px; font-size: .8rem; gap: 3px; }
.setup .range { gap: 8px; }
.setup .range output { font-size: 1.8rem; }
.setup .more { padding: 4px 10px; font-size: .8rem; }
.setup .primary { padding: 13px; font-size: .95rem; }

/* ---------- Barrierefreiheit ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--fg); color: var(--bg); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:where(a, button, input, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.setup :where(a, button, input):focus-visible { outline-color: #f7dc94; }
.card :where(a, button):focus-visible, .film-dlg :where(a, button):focus-visible { outline-color: #fff; }
.ftitle { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.fopen { all: unset; cursor: pointer; text-align: left; color: inherit; font: inherit; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fopen:hover { text-decoration: underline; text-underline-offset: 3px; }
.fopen:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 3px; }
.logo-tmdb { background: #0d253f; color: #90cea1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .chip.on, .tabs button[aria-selected="true"], .cl-row input:checked { forced-color-adjust: none; outline: 2px solid CanvasText; }
}
.start .skip { display: none; }

/* Startseite: kleinere Elemente, aber mehr Luft dazwischen (Niklas 2026-10-10) */
.setup .start-card { gap: 24px; padding: 34px 28px 30px; width: min(100%, 380px); }
.setup .q { margin-bottom: 4px; }
.setup .modes { gap: 10px; }
.setup .range { gap: 12px; }
.setup .primary { margin-top: 6px; }
.setup .addr-row { margin-bottom: 4px; } /* gleicher Abstand unter dem Feld wie zur Frage darüber */

/* Ladezustand Startkarte */
.setup.busy .start-card > *:not(.primary) { opacity: .45; transition: opacity .2s; }
.setup .primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.setup .primary:disabled { cursor: progress; }
.setup.busy .primary { background-size: 200% 100%; background-image: linear-gradient(90deg, var(--gold-a), var(--gold-b), var(--gold-a)); animation: shimmer 1.4s linear infinite; }
.reel { width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Cover nicht strecken (Niklas 2026-10-10): festes 2:3-Format, oben ausgerichtet; ist die Karte höher, bleibt darunter Platz */
.card .poster { height: auto; min-height: 0; aspect-ratio: 2 / 3; align-self: start; object-position: center; }

/* ---------- Trailer-Player wie in der Watchlist (Ambilight, Play-Overlay, Fortschrittsleiste) ---------- */
:root { --play-size: 56px; --play-bg-alpha: .41; --play-blur: 1px; --play-icon-alpha: .84; --play-border-alpha: .32; --play-shadow-alpha: .38; --amb-blur: 13px; --amb-sat: 1; --amb-bright: .9; --amb-overscan: 2; }
.film-dlg .player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.player-ambient { position: absolute; inset: calc(var(--amb-overscan) * -1%); width: calc(100% + var(--amb-overscan) * 2%); height: calc(100% + var(--amb-overscan) * 2%); filter: blur(var(--amb-blur)) saturate(var(--amb-sat)) brightness(var(--amb-bright)); }
.player-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
.player-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, #2b2f3a, #111); }
.play-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--play-size); height: var(--play-size); border-radius: 50%; border: 1px solid rgba(255,255,255,var(--play-border-alpha)); background: rgba(17,17,17,var(--play-bg-alpha)); color: rgba(255,255,255,var(--play-icon-alpha)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,var(--play-shadow-alpha)); backdrop-filter: blur(var(--play-blur)); -webkit-backdrop-filter: blur(var(--play-blur)); transition: transform .15s, background .15s; z-index: 2; padding: 0; }
.play-overlay:hover { background: rgba(17,17,17,.61); transform: translate(-50%, -50%) scale(1.06); }
.play-overlay svg { width: 26px; height: 26px; fill: currentColor; display: block; }
.play-overlay.loading svg { animation: spin 1s linear infinite; opacity: .6; }
.player-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); z-index: 2; }
.player-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 3%; min-width: 8px; border-radius: 2px; background: #fff; }
.player-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.player.playing .play-overlay, .player.playing .player-bar, .player.playing .player-ambient, .player.playing .player-poster { display: none; }
.film-dlg .fd-info { padding: 16px 18px 0; }
.film-dlg .fd-info h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; padding-right: 0; }
.film-dlg .fd-info .ot { font-style: italic; color: var(--muted); font-size: .9rem; }
.film-dlg .fd-info .meta { color: var(--muted); font-size: .85rem; margin-top: 3px; }
/* Bewertungs-Pille im Dialog auf hellem/dunklem Grund lesbar */
.film-dlg .ratings.two .one { background: var(--card); border-color: var(--line); box-shadow: none; color: var(--fg); }
.film-dlg .ratings.two .sep { background: var(--line); }

.home-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4); }
.map .mapboxgl-popup-content { color: #111; }

/* Kino-Blatt: ganze Zeile inkl. Standort-Symbol ist der Kasten; Regler gut greifbar */
.cl li.cl-item { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; border-radius: 14px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s, background .15s; }
.cl li.cl-item.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.cl li.cl-item .cl-row, .cl li.cl-item .cl-row:has(input:checked) { border: 0; background: none; border-radius: 14px; }
.cl li.cl-item .route { border: 0; width: 40px; height: 40px; }
.sheet input[type=range] { height: 32px; background-clip: content-box; padding: 12px 0; box-sizing: border-box; touch-action: pan-y; cursor: pointer; }
.sheet input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
.sheet input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
.sheet .rg { padding: 4px 0; }

/* Regler: schmale Spur, große unsichtbare Anfassfläche (WebKit/Blink über die Track-Pseudo-Elemente) */
input[type=range]:not(#max) { height: 32px; padding: 0; background: transparent; }
input[type=range]:not(#max)::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, var(--chip); }
input[type=range]:not(#max)::-webkit-slider-thumb { margin-top: -10px; width: 28px; height: 28px; }
input[type=range]:not(#max)::-moz-range-track { height: 8px; border-radius: 99px; background: var(--chip); }
input[type=range]:not(#max)::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--accent); }
.sheet input[type=range] { padding: 0; background: transparent; }

/* Filme-Pill klappt die Filter aus */
.chip-films { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.chip-films svg:first-child { width: 15px; height: 15px; }
.chip-films .chev { width: 14px; height: 14px; transition: transform .2s; }
.chip-films[aria-expanded="true"] .chev { transform: rotate(180deg); }
.chip-films.active { border-color: var(--accent); }
.chip-films .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.filter-group { display: inline-flex; gap: 8px; }
.filter-group[hidden] { display: none !important; }
.filter-group.open > * { animation: chip-in .22s ease-out both; }
.filter-group.open > *:nth-child(2) { animation-delay: .03s; } .filter-group.open > *:nth-child(3) { animation-delay: .06s; }
.filter-group.open > *:nth-child(4) { animation-delay: .09s; } .filter-group.open > *:nth-child(5) { animation-delay: .12s; } .filter-group.open > *:nth-child(6) { animation-delay: .15s; }
@keyframes chip-in { from { opacity: 0; transform: translateX(-12px); } }

/* Film-Detail: eigene Kopfleiste, X an der Stelle des Hell/Dunkel-Schalters */
dialog.film-dlg { display: none; flex-direction: column; }
dialog.film-dlg[open] { display: flex; }
.fd-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 6; }
.fd-bar-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-bar .icon svg { width: 16px; height: 16px; }
.film-body { flex: 1; min-height: 0; max-height: none; outline: none; }
dialog.film-dlg { max-height: 92dvh; }
@media (max-width: 560px) {
  dialog.film-dlg { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .fd-bar { height: 56px; padding: 0 16px; }
}

.fd-text .plot { margin: 12px 0 2px; line-height: 1.5; }
.fd-text .plot.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-more { font-weight: 600; margin-bottom: 6px; }

/* ---------- Kinoseite: schlichte Karte, Programm darunter ---------- */
.kino .map { height: min(36vh, 300px); }
/* OSM-Ersatz stilisiert: Graustufen, weniger Kontrast */
.kino .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.06); }
:root[data-theme="dark"] .kino .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.8) brightness(.75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kino .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.8) brightness(.75); } }
.route-box .route-head { margin-bottom: 8px; }
.kprog h2 { margin: 28px 0 10px; }
.kdays { position: static; margin: 0 -16px 12px; border-bottom: 0; padding-top: 0; }
.kfilms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.kfilm { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.kposter { width: 72px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: var(--chip); }
.kinfo { min-width: 0; }
.kinfo h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.kinfo .meta { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.kinfo .times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kinfo .ratings.two .one { background: var(--bg); border-color: var(--line); box-shadow: none; color: var(--fg); }
.kinfo .ratings.two .sep { background: var(--line); }

/* Film-Detail (Korrektur Niklas): Sheet von unten bis unter die Kopfzeile, ohne eigene Titelleiste;
   nur das X schwebt in der Kopfzeile an der Stelle des Hell/Dunkel-Schalters. */
.fd-bar { display: none !important; }
dialog.film-dlg { overflow: visible; }
dialog.film-dlg::backdrop { background: rgba(0,0,0,.7); }
.film-body { max-height: inherit; overflow: auto; border-radius: inherit; }
.fd-x { position: fixed; top: 11px; right: max(16px, calc((100vw - 1240px) / 2 + 16px)); z-index: 10;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.fd-x svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  dialog.film-dlg { margin: 56px 0 0; width: 100vw; max-width: 100vw; height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); border-radius: 18px 18px 0 0; }
  dialog.film-dlg[open] { animation: sheet-in .28s cubic-bezier(.2,.8,.2,1); }
  .film-body { max-height: calc(100dvh - 56px); }
}
@media (min-width: 561px) { dialog.film-dlg { margin-top: 72px; max-height: calc(100dvh - 96px); } .film-body { max-height: calc(100dvh - 96px); } }
@keyframes sheet-in { from { transform: translateY(100%); } }

/* Nur programmatisch fokussierbare Container (tabindex="-1": Ergebnisliste, Detailinhalt) nie mit Fokusrahmen —
   sonst zeichnet Chrome/iOS beim Antippen leerer Flächen einen roten Rahmen um ganze Bereiche. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none !important; }
section:focus, main:focus, dialog:focus, .film-body:focus { outline: none !important; }
* { -webkit-tap-highlight-color: transparent; }

/* X im Film-Detail deckt den Hell/Dunkel-Schalter vollständig ab (höhere Spezifität als button.icon) */
dialog.film-dlg button.fd-x { background: var(--bg); width: 38px; height: 38px; top: 9px; right: max(14px, calc((100vw - 1240px) / 2 + 14px)); border: 1px solid var(--line); box-shadow: 0 0 0 4px var(--bg), 0 2px 10px rgba(0,0,0,.25); }

/* ===== Startseite schwarz-weiß wie die Ergebnisseite (Niklas 2026-10-10, Basis Entwurf SW1) ===== */
.start body { background: var(--bg); color: var(--fg); }
.start-bg { display: none !important; }
.setup .start-card { background: var(--card); border: 1px solid var(--line); box-shadow: 0 20px 60px -30px rgba(0,0,0,.35); color: var(--fg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.start-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: -10px; }
.start-brand span { font-weight: 500; color: var(--muted); font-size: .85em; margin-left: 4px; }
.setup .q { color: var(--fg); }
.setup .addr-row { background: var(--bg); border: 1px solid var(--line); }
.setup .addr-row input::placeholder { color: var(--muted); }
.setup .gps { color: var(--muted); }
.setup .modes button { background: var(--bg); border: 1px solid var(--line); color: var(--fg); }
.setup .modes button[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: none; }
.setup .range output { color: var(--fg); }
.setup .more { background: var(--bg); border: 1px solid var(--line); color: var(--fg); }
.setup input[type=range] { height: 28px; background: transparent; }
.setup input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(var(--fg), var(--fg)) 0 / var(--p, 50%) 100% no-repeat, var(--chip); }
.setup input[type=range]::-webkit-slider-thumb { margin-top: -9px; width: 24px; height: 24px; background: var(--fg); border: 3px solid var(--card); box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.setup input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--chip); }
.setup input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--fg); }
.setup input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: var(--fg); border: 3px solid var(--card); }
.setup :where(a, button, input):focus-visible { outline-color: var(--accent); }
.setup .msg { color: var(--accent); }
/* Cover-Mosaik-Knopf mit Rand */
.setup .primary.go { position: relative; overflow: hidden; isolation: isolate; height: 56px; padding: 0; border-radius: 14px; color: #fff; background: #111;
  border: 2px solid var(--fg); box-shadow: inset 0 0 0 2px var(--card); }
.setup .go .mosaic { position: absolute; inset: 0; display: flex; gap: 2px; z-index: -2; animation: pan 40s linear infinite; }
.setup .go .mosaic img { height: 100%; aspect-ratio: 2 / 3; object-fit: cover; flex: none; }
.setup .go::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.45), rgba(0,0,0,.72)); }
.setup .go .go-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.setup.busy .primary.go { animation: none; background-image: none; }
@keyframes pan { to { transform: translateX(-50%); } }

/* Verkehrsmittel-Dropdown neben der Minutenzahl */
.setup .range-head { justify-content: flex-start; gap: 10px; }
.setup .range-head .more { margin-left: auto; }
.mode-dd { position: relative; }
.mode-btn { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 6px 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); cursor: pointer; }
.mode-btn svg { width: 22px; height: 22px; }
.mode-btn .caret { width: 15px; height: 15px; color: var(--muted); transition: transform .15s; }
.mode-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mode-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; list-style: none; margin: 0; padding: 4px; min-width: 170px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.mode-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.mode-list li svg { width: 20px; height: 20px; }
.mode-list li:hover, .mode-list li:focus { background: var(--chip); outline: none; }
.mode-list li[aria-selected="true"] { font-weight: 700; }
.mode-list li[aria-selected="true"]::after { content: "✓"; margin-left: auto; }
.start-brand { font-size: clamp(1.7rem, 7vw, 2.1rem); letter-spacing: -.03em; margin-bottom: -4px; line-height: 1.1; }
.start-brand span { font-size: .6em; }
.mode-btn .mode-txt { font-weight: 600; font-size: .95rem; margin: 0 2px 0 6px; }
.mode-btn { padding: 0 8px 0 10px; }
.setup .range output { font-size: 1.35rem; }
.setup .range-head { gap: 8px; }
.setup .mit { color: var(--muted); font-weight: 500; }

/* Regler-Griff am Anschlag: wächst auf doppelte Größe, zeigt „+?“ und ist der „Mehr Zeit“-Knopf */
:root { --plus-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctext x='20' y='33' text-anchor='middle' font-family='system-ui,-apple-system,sans-serif' font-weight='800' font-size='26' fill='%23ffffff'%3E+%3C/text%3E%3Ctext x='33' y='23' text-anchor='middle' font-family='system-ui,-apple-system,sans-serif' font-weight='800' font-size='16' fill='%23ffffff'%3E%3F%3C/text%3E%3C/svg%3E"); }
:root[data-theme="dark"] { --plus-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctext x='20' y='33' text-anchor='middle' font-family='system-ui,-apple-system,sans-serif' font-weight='800' font-size='26' fill='%231a1a19'%3E+%3C/text%3E%3Ctext x='33' y='23' text-anchor='middle' font-family='system-ui,-apple-system,sans-serif' font-weight='800' font-size='16' fill='%231a1a19'%3E%3F%3C/text%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --plus-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ctext x='20' y='33' text-anchor='middle' font-family='system-ui,-apple-system,sans-serif' font-weight='800' font-size='26' fill='%231a1a19'%3E+%3C/text%3E%3Ctext x='33' y='23' text-anchor='middle' font-family='system-ui,-apple-system,sans-serif' font-weight='800' font-size='16' fill='%231a1a19'%3E%3F%3C/text%3E%3C/svg%3E"); } }
.setup input[type=range]::-webkit-slider-thumb { transition: width .28s cubic-bezier(.3,1.6,.5,1), height .28s cubic-bezier(.3,1.6,.5,1), margin-top .28s cubic-bezier(.3,1.6,.5,1); }
.setup input[type=range].at-max::-webkit-slider-thumb { width: 48px; height: 48px; margin-top: -21px; background: var(--fg) var(--plus-img) center / 100% no-repeat; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.setup input[type=range].at-max::-moz-range-thumb { width: 42px; height: 42px; background: var(--fg) var(--plus-img) center / 100% no-repeat; cursor: pointer; }
.setup input[type=range].at-max { height: 52px; }
.setup .more { display: none !important; }

/* Mehr-Zeit-Knopf liegt genau über dem vergrößerten Griff am rechten Ende */
.range-wrap { position: relative; }
.more-thumb { position: absolute; right: -12px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 0; padding: 0;
  background: var(--fg); color: var(--card); font: 800 1.35rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; touch-action: none;
  box-shadow: 0 0 0 3px var(--card), 0 2px 12px rgba(0,0,0,.35); display: grid; place-items: center; animation: thumb-pop .32s cubic-bezier(.3,1.6,.5,1); }
.more-thumb sup { font-size: .55em; vertical-align: .9em; margin-left: 1px; }
.more-thumb[hidden] { display: none; }
@keyframes thumb-pop { from { transform: scale(.5); } }
/* der echte Griff darunter bleibt klein, damit nichts doppelt erscheint */
.setup input[type=range].at-max::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; background: var(--fg); }
.setup input[type=range].at-max::-moz-range-thumb { width: 20px; height: 20px; background: var(--fg); }
.setup input[type=range].at-max { height: 28px; }

/* Filmkarten-Hintergrund blasser (Niklas 2026-10-10): weniger Sättigung, gedämpfter */
.card .card-bg { filter: blur(18px) brightness(.45) saturate(.45); opacity: .55; }

/* Uhrzeit-Filter: prominent, immer ausgeklappt (Niklas 2026-10-11) */
.timebar { margin: 4px 0 10px; padding: 10px 14px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tb-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; }
.tb-head span { color: var(--muted); font-weight: 600; }
.tb-head b { font-variant-numeric: tabular-nums; }
.dual { position: relative; height: 34px; }
.dual::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; background: var(--chip); }
.dual-fill { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; background: var(--accent); margin-left: 12px; margin-right: 12px; }
.dual input[type=range] { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; background: transparent !important; pointer-events: none; appearance: none; -webkit-appearance: none; }
.dual input[type=range]::-webkit-slider-runnable-track { background: transparent !important; height: 34px; }
.dual input[type=range]::-moz-range-track { background: transparent; }
.dual input[type=range]::-moz-range-progress { background: transparent; }
.dual input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 1px 6px rgba(0,0,0,.35); cursor: grab; }
.dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); cursor: grab; }

/* Abstände Ergebnisseite ×1,5 (Niklas 2026-10-11) */
.tabs { padding-top: 15px; padding-bottom: 15px; }
.qbox { margin-top: 18px; margin-bottom: 0; }
.timebar { margin: 14px 0 0; }
.chips { margin-top: 8px; padding-top: 6px; }
.carousel { margin-top: 6px; }
.dp-head:empty { display: none; }
/* Zeitfenster: roter Bereich ist greifbar und verschiebbar */
.dual-fill { cursor: grab; touch-action: none; z-index: 1; }
.dual-fill::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.dual-fill.drag { cursor: grabbing; }
.dual input[type=range] { z-index: 2; }
/* Kein Wischen zwischen Tagen mehr (nur über die Tages-Buttons) */
.carousel { overflow-x: hidden; touch-action: pan-y; scroll-snap-type: none; }
/* Logo: "cinenowKöln" ohne Abstand, gleiche Größe und Schrift, Stadt in Grau */
.brand .city, .start-brand span { margin-left: 0; font-size: 1em; font-weight: inherit; letter-spacing: inherit; color: var(--muted); }

/* Mehrfachauswahl als Pills mit Haken (Fassung, Sprache, Genre) */
.pick-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: .92rem; font-weight: 500; }
.pick span small { color: var(--muted); }
.pick .ck { width: 15px; height: 15px; margin-left: -4px; display: none; }
.pick input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 600; }
.pick input:checked + span .ck { display: block; }
.pick input:checked + span small { color: inherit; opacity: .7; }
.pick input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.sheet-body:focus { outline: none; }

/* Kino-Schnellansicht */
.cq-addr { margin: -6px 0 0; font-size: .9rem; }
.minimap { position: relative; display: block; height: 128px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--chip); text-decoration: none; color: inherit; isolation: isolate; }
.mm-tiles { position: absolute; left: 0; top: 0; width: 1280px; height: 768px; filter: grayscale(1) contrast(.85) brightness(1.06); }
:root[data-theme="dark"] .mm-tiles { filter: grayscale(1) invert(1) contrast(.8) brightness(.75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mm-tiles { filter: grayscale(1) invert(1) contrast(.8) brightness(.75); } }
.mm-tiles img { position: absolute; width: 256px; height: 256px; }
.mm-pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -30px 0 0 -15px; color: var(--accent); filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.mm-pin svg { width: 30px; height: 30px; fill: var(--accent); stroke: #fff; }
.mm-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: .92rem; }
.mm-bar .mi { width: 17px; height: 17px; vertical-align: -3px; }
.mm-credit { position: absolute; right: 6px; top: 4px; font-size: .62rem; color: var(--muted); background: var(--card); padding: 0 4px; border-radius: 4px; opacity: .85; }
.minimap:hover .mm-bar { opacity: .92; }
.cq-web { display: inline-block; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; justify-self: start; }
.cq-h { margin: 6px 0 -4px; font-size: 1rem; }
.cq-day { display: grid; gap: 6px; }
.cq-day > span:first-child { color: var(--muted); font-size: .85rem; font-weight: 600; }
.cq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cq-list li { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cq-t { font-weight: 600; }
.cq-more { color: var(--muted); font-size: .9rem; }
.sheet .t { border: 1px solid var(--line); background: var(--card); }

/* Suche: eigenes X zum Leeren (iOS zeigt das native nicht), 2 px weniger Abstand */
.qbox { margin-top: 16px; }
.qbox input { padding-right: 44px; }
.qbox input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.q-clear { position: absolute; right: 6px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; background: var(--chip); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.q-clear svg { width: 14px; height: 14px; }
.q-clear[hidden] { display: none; }
/* Logo: Kleinbuchstaben von "cinenow" so hoch wie das große K von "Köln" (x-Höhe/Versalhöhe ≈ 0,72) */
header.top .brand { font-size: 1.6rem; }
.brand .city, .start-brand span { font-size: .735em; }
.start-brand { font-size: clamp(2rem, 8.4vw, 2.5rem); }

/* Uhrzeit: nur Griffe ziehbar */
.dual-fill { cursor: default; pointer-events: none; }
/* Blätter ohne Zieh-Balken */
.sheet-handle { display: none; }
.sheet-head { padding-top: 14px; }
/* Kino-Blatt im Stil der Startseite */
.reach { gap: 16px; padding: 16px; }
.reach-from { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .95rem; }
.edit-btn { flex: none; width: 34px; height: 34px; }
.edit-btn svg { width: 16px; height: 16px; }
.reach-row { display: flex; align-items: center; gap: 8px; }
.reach-row > b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.reach-row .mit { color: var(--muted); font-weight: 500; }
.sheet .mode-list { left: auto; right: 0; }
.cl-head { margin: 16px 0 16px; font-size: .9rem; color: var(--muted); font-weight: 600; }
.sheet .reach + #kl .cl-head { margin-top: 18px; }
/* Fahrzeit-Regler wie auf der Startseite (Schriftfarbe statt Rot) */
input.fg-range::-webkit-slider-runnable-track { background: linear-gradient(var(--fg), var(--fg)) 0 / var(--p, 0%) 100% no-repeat, var(--chip) !important; height: 6px !important; }
input.fg-range::-webkit-slider-thumb { background: var(--fg) !important; border-color: var(--card) !important; width: 24px !important; height: 24px !important; margin-top: -9px !important; }
input.fg-range::-moz-range-progress { background: var(--fg) !important; }
input.fg-range::-moz-range-thumb { background: var(--fg) !important; }
.cl-head, .sheet .reach + #kl .cl-head { margin: 4px 0 18px; } /* oben: 14 px Blatt-Abstand + 4 = 18, unten 18 */
/* Startknopf: festes, vorab geladenes Cover-Bild statt nachgeladener, laufender Poster */
.setup .go .mosaic { animation: none; background: #111 url(/img/mosaic.webp) left center / auto 100% repeat-x; }
/* Zeitregler: Füllung beginnt/endet genau an den Reglermitten (siehe paintTimebar) */
.dual-fill { margin-left: 0; margin-right: 0; }
.dual::before { left: 13px; right: 13px; }

/* Wortmarke (Entwurf Z1, Pfade aus Bricolage Grotesque 800, gebaut mit dem Logo-Generator) */
.logo { height: .822em; width: auto; vertical-align: 0; overflow: visible; }   /* cinenow-Wortmarke (tools/logo/gen-now.cjs) */
.brand .city, .start-brand span { margin-left: .14em; }

/* Kopfzeile: größeres Logo links, Ort mit Standort-Symbol rechts (Klick = Standort ändern) */
header.top { height: 68px; }
header.top .brand { font-size: calc(40px / .971); display: inline-flex; align-items: center; } /* Logo genau so hoch wie der Standort-Knopf */
header.top .brand .logo { vertical-align: 0; }
.where { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--fg); font: inherit; font-weight: 650; font-size: .98rem; text-decoration: none; cursor: pointer; }
.where svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.where:hover { border-color: var(--muted); }
.where:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.where:not(:has(.city))::after { content: 'Standort'; content: attr(data-empty); }   /* Text übersetzbar (data-empty, i18n.js) */
.where .city { margin: 0; font-size: 1em; font-weight: inherit; color: inherit; letter-spacing: 0; }
@media (max-width: 420px) { .where { padding: 0 11px 0 9px; font-size: .92rem; } }

/* Startkarte: gleiches Muster wie die Kopfzeile */
.start-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(40px / .971) !important; line-height: 1; margin-bottom: 0 !important; }
.start-brand .logo { vertical-align: 0; }
.start-brand .where { font-size: .98rem; letter-spacing: 0; }
.start-brand .where .city { font-size: 1em; margin: 0; color: inherit; font-weight: inherit; }

/* Kopf und Tageleiste (festgelegt mit dem Kopf-Editor, Niklas 2026-10-12): Logo 2 px tiefer, Tage als getöntes Band */
header.top .brand { transform: translateY(2px); }
.tabs { background: color-mix(in srgb, var(--fg) 3.5%, var(--bg)); border-top: 1px solid var(--line); }

/* Suchfeld mit denselben Ecken wie die Uhrzeit-Box */
.qbox input { border-radius: 14px; }

/* Filter-Pills bleiben beim Scrollen unter der Tageleiste stehen (Suche und Uhrzeit scrollen weg) */
.chips { position: sticky; top: var(--tabs-h, 66px); z-index: 4; background: var(--bg); }
.chips.stuck { box-shadow: 0 1px 0 var(--line); }

/* Programmseite beim Scrollen: Tage + Filter-Pills bleiben oben. Kopf, Suche und Uhrzeit scrollen weg und kommen bei
   schnellem Hochwischen gemeinsam zurück (wie x.com). --hdr = Höhe des eingeblendeten Kopfs (0, wenn zu). */
:root:has(#qt) { --hdr: 0px; }
:root.qt-open:has(#qt) { --hdr: var(--head-h, 68px); }
:root:has(#qt) header.top { position: sticky; top: calc(var(--hdr) - var(--head-h, 68px)); z-index: 6; background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); transition: top .22s ease; }
.tabs { top: var(--hdr, 0px); transition: top .22s ease; }
.qt { position: sticky; top: calc(var(--hdr, 0px) + var(--tabs-h, 66px) - var(--qt-h, 140px)); z-index: 4; background: var(--bg);
  margin: 0 -16px; padding: 16px 16px 8px; transition: top .22s ease; }
.qt .qbox { margin-top: 0; }
.qt .timebar { margin-top: 14px; }
.qt + .chips { margin-top: 0; top: calc(var(--hdr, 0px) + var(--tabs-h, 66px)); transition: top .22s ease; }
.qt-open .qt { top: calc(var(--hdr) + var(--tabs-h, 66px)); box-shadow: 0 1px 0 var(--line); }
.qt-open .qt + .chips { top: calc(var(--hdr) + var(--tabs-h, 66px) + var(--qt-h, 140px)); }
@media (prefers-reduced-motion: reduce) { :root:has(#qt) header.top, .tabs, .qt, .qt + .chips { transition: none; } }

/* Standort-Chip in der festen Filterleiste: nur, solange der Kopf weggescrollt ist */
/* Standort-Knopf schiebt sich von links herein, sobald der Kopf weggescrollt ist (statt aufzublitzen) */
.chip-where { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 0; height: 34px; align-self: center; flex: none;
  margin-left: -8px; border-width: 0; opacity: 0; overflow: hidden; transform: translateX(-12px); pointer-events: none; visibility: hidden;
  transition: width .26s cubic-bezier(.2,.8,.2,1), margin-left .26s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s, border-width 0s .26s, visibility 0s .26s; }
.chip-where svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.chips.stuck .chip-where { width: 34px; margin-left: 0; border-width: 1px; opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: width .26s cubic-bezier(.2,.8,.2,1), margin-left .26s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s .06s; }
.qt-open .chips .chip-where { width: 0; margin-left: -8px; border-width: 0; opacity: 0; transform: translateX(-12px); pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .chip-where, .chips.stuck .chip-where { transition: none; } }

/* Lange Ortsnamen: Knopf darf schrumpfen, Name einzeilig mit „…“, auf dem Handy kleinere Schrift */
header.top .brand { flex: none; }
header.top .where { flex: 0 1 auto; min-width: 0; margin-left: 12px; }
.where .city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 480px) { header.top .where { font-size: .86rem; padding: 0 12px 0 9px; gap: 5px; } .where svg { width: 16px; height: 16px; } }
.where .city.two { white-space: normal; font-size: 12px; line-height: 1.12; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: left; }

/* Uhrzeit: ungefiltert gedämpft ("alle · …"), gefiltert kräftig */
.tb-head b { color: var(--muted); font-weight: 600; }
.tb-head b.on { color: var(--fg); font-weight: 700; }

/* Film-Detail als eigene Seite (wie die Watchlist): ganzer Bildschirm, oben nur ein schwarzer Balken mit Zurück-Pfeil */
dialog.film-dlg { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow: hidden; box-shadow: none; }
dialog.film-dlg[open] { animation: page-in .24s cubic-bezier(.2,.8,.2,1); }
@keyframes page-in { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.film-dlg[open] { animation: none; } }
.fd-nav { flex: none; display: flex; align-items: center; height: 52px; padding: env(safe-area-inset-top, 0px) 6px 0; box-sizing: content-box; background: var(--bg); color: var(--fg); }
.fd-back { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.fd-back svg { width: 24px; height: 24px; }
.fd-back:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.fd-back:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
dialog.film-dlg .film-body { flex: 1; min-height: 0; max-height: none; overflow: auto; border-radius: 0; }
.film-body > * { max-width: 760px; margin-inline: auto; }

/* Kino-Ansicht als eigene Seite (wie die Filmansicht): ganzer Bildschirm, schwarzer Balken mit Zurück-Pfeil */
.sheet-nav { display: none; }
dialog.sheet.page { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 0; flex-direction: column; overflow: hidden; }
dialog.sheet.page[open] { display: flex; animation: page-in .24s cubic-bezier(.2,.8,.2,1); }
dialog.sheet.page .sheet-nav { display: flex; }
dialog.sheet.page #sheet-close, dialog.sheet.page .sheet-done { display: none; }
dialog.sheet.page .sheet-head, dialog.sheet.page .sheet-body { width: 100%; max-width: 760px; margin-inline: auto; box-sizing: border-box; }
dialog.sheet.page .sheet-head { padding: 18px 16px 2px; }
dialog.sheet.page .sheet-head h2 { font-size: 1.35rem; }
dialog.sheet.page .sheet-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); align-content: start; }
@media (prefers-reduced-motion: reduce) { dialog.sheet.page[open] { animation: none; } }
/* volle Kino-Seite (kino.html): Balken oben fest */
.kino-nav { position: sticky; top: 0; z-index: 6; }

/* Kino: Programm eingeklappt, Knopf zum Aufklappen */
.cq-prog-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--fg); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left; }
.cq-prog-btn:hover { border-color: var(--fg); }
.cq-prog-btn .chev { width: 20px; height: 20px; flex: none; transition: transform .2s; }
.cq-prog-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.kprog .cq-prog-btn { margin-top: 24px; }
.kprog #prog-box { margin-top: 12px; }
.cq-prog { display: grid; gap: 12px; }
.cq-prog .cq-tabs { top: -4px; }
.cq-prog .dp { padding: 0; }

/* Filmkarten im Kino-Programm: Zeiten wie auf der Übersicht */
.sheet .card .t { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.sheet .card .t:hover { background: rgba(255,255,255,.22); border-color: #fff; }

/* Angeklickter Film in der Kino-Ansicht: Karte mit Cover */
.cq-film { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cq-film:not(:has(.cq-poster)) { grid-template-columns: 1fr; }
.cq-poster { padding: 0; border: 0; background: none; cursor: pointer; align-self: start; }
.cq-poster img { display: block; width: 96px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.cq-fi { min-width: 0; display: grid; gap: 10px; align-content: start; }
.cq-ft { padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 800; font-size: 1.15rem; line-height: 1.2; text-align: left; cursor: pointer; }
.cq-ft:hover { text-decoration: underline; }
.cq-fi .small { margin-top: -6px; }

/* Kino-Seite: Inhalt mittig, Hintergrund und Tage-Band trotzdem über die volle Breite */
dialog.sheet.page { --gut: max(16px, calc((100vw - 728px) / 2)); }
dialog.sheet.page .sheet-head, dialog.sheet.page .sheet-body { max-width: none; padding-inline: var(--gut); }
dialog.sheet.page .cq-tabs { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
dialog.sheet.page .sheet-body > :not(.cq-prog), dialog.sheet.page .cq-prog > :not(.cq-tabs) { max-width: 728px; }
/* Kino-Seite scrollt als Ganzes; nur der schwarze Balken (und das Tage-Band darunter) bleiben stehen */
dialog.sheet.page[open] { display: block; overflow-y: auto; }
dialog.sheet.page .sheet-nav { position: sticky; top: 0; z-index: 7; }
dialog.sheet.page .sheet-body { overflow: visible; }
dialog.sheet.page .cq-tabs { top: calc(52px + env(safe-area-inset-top, 0px)); }

/* Filmansicht: Tage als Buttons über den Vorstellungen */
.fd-tabs { margin: 4px -18px 4px; padding-inline: 18px; top: 0 !important; }
.fd-day .cin:first-child { margin-top: 8px; }

/* Adressvorschläge */
.addr-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: 320px; overflow: auto; }
.addr-list li { display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left; }
.addr-list li b { font-weight: 650; font-size: .98rem; }
.addr-list li span { color: var(--muted); font-size: .85rem; }
.addr-list li:hover, .addr-list li[aria-selected="true"] { background: var(--chip); }

/* Karte in der Kino-Ansicht: Kacheln exakt in Pixeln, Route darüber (nicht invertiert) */
.mm-tiles { width: auto !important; height: auto !important; inset: 0; }
.mm-route-wrap { position: absolute; inset: 0; color: var(--accent); pointer-events: none; }
.mm-route { position: absolute; left: 0; top: 0; }
dialog.sheet.page .minimap { height: 210px; }

/* Rechtliche Links unter der Startkarte (Fußzeile ist im Startmodus ausgeblendet) */
.start-legal { margin: 14px 0 0; text-align: center; font-size: .78rem; color: var(--muted); }
.start-legal a { color: var(--muted); }
.map-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 16px; text-align: center; font-size: .9rem; color: var(--muted); background: var(--chip); }
.map-consent button { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
/* Hinweis statt Trailer, solange externe Inhalte nicht erlaubt sind */
.trailer-consent { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; background: rgba(0,0,0,.78); color: #fff; font-size: .92rem; }
.trailer-consent p { margin: 0; max-width: 34em; }
.trailer-consent button { font: inherit; font-weight: 650; padding: 9px 16px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.trailer-consent a { color: #fff; margin-left: 10px; font-size: .85rem; }

/* Bewertungen als Text (Quelle klein, Wert fett) statt fremder Logos */
.ratings .rsrc { font-size: .72em; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.t .pr { margin-left: 5px; font-size: .7rem; font-weight: 500; opacity: .7; }
.price-note { margin: 8px 0 0; font-size: .72rem; }
.admission { margin: 4px 0 0; font-weight: 600; font-size: .95rem; }
.admission .small { font-weight: 400; font-size: .78rem; }
#admission { font-weight: 500; font-size: .9rem; color: var(--muted); }
#admission b { color: var(--fg); font-weight: 650; }
#admission small { font-size: .78rem; }
/* Desktop: drei Filme nebeneinander (2026-10-15) */
main, header.top, footer { max-width: 1400px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }

/* Ortsabfrage als Popup über dem Programm (2026-10-15) */
html.start-pop #setup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; overflow: auto;
  background: rgba(0, 0, 0, .7); }   /* nur abdunkeln, kein Blur (ruhiger bei vielen Plakaten) */
html.start-pop #setup[hidden] { display: none; }
html.start-pop #setup .start-card { position: relative; border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
html.start-pop body { overflow: hidden; }
.setup-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chip); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.setup-close[hidden] { display: none; }
.setup-close svg { width: 16px; height: 16px; }
/* Ganzer Ort | Umkreis */
.scope { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); }
.scope button { flex: 1; padding: 9px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.scope button[aria-checked="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.scope button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#radius-box { display: grid; grid-template-rows: 0fr; margin-top: -18px; opacity: 0; transition: grid-template-rows .32s cubic-bezier(.2,.8,.2,1), margin-top .32s cubic-bezier(.2,.8,.2,1), opacity .2s; }
#radius-box.open { grid-template-rows: 1fr; margin-top: 0; opacity: 1; transition: grid-template-rows .32s cubic-bezier(.2,.8,.2,1), margin-top .32s cubic-bezier(.2,.8,.2,1), opacity .25s .08s; }
#radius-box .rb-in { min-height: 0; overflow: hidden; display: grid; gap: 18px; }
#radius-box.done .rb-in { overflow: visible; }
@media (prefers-reduced-motion: reduce) { #radius-box, #radius-box.open { transition: none; } }
.reach .scope { margin-bottom: 4px; }

/* Kinoliste: Pfeil-Knopf zur Kinoseite (2026-10-15) */
.cl-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 2px; border-radius: 999px; background: var(--chip); color: var(--fg); text-decoration: none; }
.cl-go svg { width: 16px; height: 16px; }
.cl-go:hover, .cl-go:focus-visible { background: var(--accent); color: #fff; }

/* Sprachumschalter: dezenter Textlink im Kopf zwischen Logo und Standort (Variante A, Niklas 2026-10-15) */
.hdr-r { display: flex; align-items: center; gap: 14px; }
.lang-switch { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-decoration: none; padding: 6px 2px; }
.lang-switch:hover, .lang-switch:focus-visible { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
/* Zurücksetzen je Filter-Blatt */
.sheet-reset-row { display: flex; justify-content: flex-end; margin: -6px 0 2px; }
.sheet-reset { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.sheet-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.sheet-reset:disabled { color: var(--muted); opacity: .5; cursor: default; text-decoration: none; }

/* Platzhalter ohne Cover (2026-10-17) */
.poster.none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; box-sizing: border-box; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 28%, var(--chip)), var(--chip)); color: var(--fg); }
.poster.none svg { width: 30px; height: 30px; opacity: .55; flex: none; }
.poster.none span { font-size: .78rem; font-weight: 700; line-height: 1.25; opacity: .8; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
/* Schneller Start (2026-10-17): Tagesseiten und Filmkarten außerhalb des Bildschirms erst zeichnen, wenn sie sichtbar werden */
/* (2026-10-18) nicht mehr bei einzelnen Karten: iOS zeichnete sie beim Zurückscrollen kurz leer. Tagesseiten nur, solange
   sie nicht sichtbar oder benachbart sind (.near = sichtbarer Tag ± 1, gesetzt in warmPanels) */
.dp:not(.near) { content-visibility: auto; contain-intrinsic-size: auto 100vw auto 2000px; }

/* Löschen-X in Eingabefeldern (Suche, Standort) – 2026-10-17: Icon sitzt exakt mittig, gleiche Optik überall */
.x-clear { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; opacity: .75; transition: opacity .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.x-clear:hover, .x-clear:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 22%, transparent); }
.x-clear[hidden] { display: none; }
.x-clear svg, .qbox .x-clear svg { position: static; inset: auto; transform: none; width: 12px; height: 12px; color: inherit; pointer-events: none; }
.qbox .q-clear { position: absolute; right: 10px; top: 50%; margin-top: -14px; width: 28px; height: 28px; color: var(--fg); }
.setup .addr-row .x-clear { margin-right: 2px; color: inherit; }

/* Kopf der Filter-Blätter: Titel · Zurücksetzen · X (Abstand = ein X-Kreis) */
.sheet-head h2 { flex: 1; min-width: 0; }
.sheet-head .sheet-reset { margin-right: 34px; padding: 6px 2px; }
/* Runde X-Knöpfe: Symbol exakt in der Mitte */
.x-btn { padding: 0; display: grid; place-items: center; line-height: 0; }
.x-btn svg, .x-clear svg { display: block; margin: 0; }
button.icon.x-btn svg { width: 14px; height: 14px; }

/* Lade-Gerüst beim direkten Aufruf einer Stadtseite, bis die ersten Filmkarten stehen (2026-10-17) */
.boot { padding: 8px 16px 0; display: grid; gap: 14px; }
.boot[hidden] { display: none; }
.sk-tabs { display: flex; gap: 8px; overflow: hidden; }
.sk-tabs i { flex: none; width: 74px; height: 56px; border-radius: 14px; }
.sk-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.sk-poster { aspect-ratio: 2 / 3; border-radius: 10px; }
.sk-lines { display: grid; align-content: start; gap: 10px; padding-top: 4px; }
.sk-lines i { display: block; height: 14px; border-radius: 7px; }
.sk-lines i:first-child { height: 20px; }
.sk-lines .sk-pill { width: 60%; height: 26px; border-radius: 99px; margin-top: 6px; }
.sk-lines .sk-time { width: 64px; height: 38px; border-radius: 10px; margin-top: 6px; }
.sk-tabs i, .sk-poster, .sk-lines i {
  background: linear-gradient(100deg, var(--chip) 30%, color-mix(in srgb, var(--accent) 30%, var(--chip)) 50%, var(--chip) 70%) 0 0 / 300% 100%;
  animation: sk-sweep 1.3s ease-in-out infinite; }
.sk-card:nth-child(3) * { animation-delay: .12s; } .sk-card:nth-child(4) * { animation-delay: .24s; }
@keyframes sk-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (min-width: 700px) { .boot { max-width: 760px; margin: 0 auto; } .sk-card { grid-template-columns: 128px 1fr; } }
@media (prefers-reduced-motion: reduce) { .sk-tabs i, .sk-poster, .sk-lines i { animation: none; } }

/* „Filmprogramm anzeigen“ beim Laden: Cover rasen vorbei, Lichtstreifen läuft über den Knopf */
.setup.busy .go .mosaic { animation-duration: 5s; }
.setup .go::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%) 0 0 / 250% 100%; }
.setup.busy .go::before { opacity: 1; animation: go-sweep 1.1s ease-in-out infinite; }
.setup.busy .go .go-label { animation: go-pulse 1.1s ease-in-out infinite; }
@keyframes go-sweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes go-pulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .setup.busy .go .mosaic, .setup.busy .go::before, .setup.busy .go .go-label { animation: none; } }
/* Kopf (Niklas 2026-10-17): EN mittig zwischen Logo und Standort; EN und Standort auf die Mitte der Kleinbuchstaben
   des Logos ausgerichtet (x-Höhe 247–822 von 822 Einheiten → Mitte bei 65 % der Logohöhe statt 50 %) */
header.top .hdr-r { display: contents; }
header.top .lang-switch { flex: 1 1 auto; text-align: center; padding: 6px 4px; line-height: 1; }
header.top .lang-switch, header.top .where { position: relative; top: var(--xh-shift, 0px); }
header.top .where { margin-left: 0; }
header.top { --xh-shift: 4px; }   /* gemessen: Mitte EN/Standort-Knopf = Mitte der x-Höhe des Logos */
@media (min-width: 700px) { header.top .lang-switch { flex: none; margin: 0 18px 0 auto; } }   /* breit: EN neben dem Standort statt mitten im Kopf */
/* Standort-Knopf mit gleichem Abstand nach oben und unten (zum Tagesstreifen); Logo rückt dafür mit hoch,
   die Ausrichtung auf die Kleinbuchstaben bleibt */
header.top { --xh-shift: 0px; }
header.top .brand { transform: translateY(-2px); }
/* Weicher Übergang unter der klebenden Pill-Leiste (Niklas 2026-10-17): Karten tauchen auf ~8 px ins Schwarz ab
   statt an einer harten Kante abgeschnitten zu werden – ein „Schatten“ in Hintergrundfarbe, also keine Linie, kein Dunkel.
   (box-shadow statt ::after, weil die Leiste waagerecht scrollt und ein Kindelement abschneiden würde) */
.chips { transition: box-shadow .15s; }
.chips.stuck { box-shadow: 0 6px 5px -1px var(--bg); }

/* „Standort präzisieren“ statt Stift-Symbol im Kinos-Blatt (Niklas 2026-10-17) */
.reach-from { gap: 12px; }
.reach-edit { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.reach-edit:hover, .reach-edit:focus-visible { border-color: var(--accent); color: var(--accent); }
/* Filter-Blätter (Niklas 2026-10-17): Abstand Zurücksetzen↔X halbiert, Kopf 4 px weiter von den ersten Elementen */
.sheet-head .sheet-reset { margin-right: 17px; }
dialog.sheet:not(.page) .sheet-head { padding-bottom: 8px; }

/* Blätter: ein Häkchen-Knopf statt X + „Fertig“ (Filter wirken sofort, Schließen = Übernehmen) – Niklas 2026-10-17 */
dialog.sheet:not(.page) .sheet-done { display: none; }
.ok-btn svg { width: 16px !important; height: 16px !important; }   /* Optik wie der frühere X-Knopf (Rand, ohne Farbe) */
.sheet-head .sheet-reset { margin-right: 17px; }   /* halber Kreis (34 px) */

/* Auswahl-Pills in den Filter-Blättern flacher, damit mehr Genres auf einen Blick passen (Niklas 2026-10-17) */
.pick-grid { gap: 7px; }
.pick span { padding: 6px 12px; font-size: .9rem; line-height: 1.3; }
/* Auswahl-Pills: Platz für den Haken von Anfang an (links und rechts gleich, Text bleibt mittig) –
   beim Markieren ändert sich die Breite nicht mehr, nichts rutscht in die nächste Zeile (Niklas 2026-10-17) */
.pick span { position: relative; padding: 6px 25px; justify-content: center; }
.pick .ck { display: block !important; position: absolute; left: 8px; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.pick input:checked + span .ck { opacity: 1; transform: none; }
.pick input:checked + span { font-weight: 500; }   /* gleiche Schriftstärke → gleiche Breite beim Markieren */
.pick span { padding: 6px 22px; } .pick .ck { left: 7px; }

/* „Alle zurücksetzen“: gedrückt halten, Pill füllt sich lila */
.chip-reset { position: relative; overflow: hidden; isolation: isolate; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.chip-reset .hold-fill { position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease-out; }
.chip-reset.holding .hold-fill { transform: scaleX(1); transition: transform .9s linear; }
.chip-reset.done .hold-fill { transform: scaleX(1); transition: none; }
.chip-reset.holding, .chip-reset.done { color: var(--fg); border-style: solid; border-color: var(--accent); }
.chip-reset.done { color: #fff; }
.chip-reset .hold-txt { position: relative; }
@media (prefers-reduced-motion: reduce) { .chip-reset.holding .hold-fill { transition-timing-function: steps(4); } }
/* Abstände der klebenden Leisten (Niklas 2026-10-17): oben an der Tagesleiste verschwindet die Randlinie unter der
   Browserleiste → 2 px mehr oben, damit es gleich wirkt; Pill-Leiste: unten 2 px weniger, oben gleich viel (≈ 8 px sichtbar mit Verlauf) */
.tabs { padding-top: 17px; }
.chips { padding-top: 8px; padding-bottom: 6px; }
/* Filmseite: Abstand Überschrift→Tagesstreifen und Tagesstreifen→erstes Kino verdoppelt (Niklas 2026-10-17) */
.fd-tabs { margin-top: 10px; margin-bottom: 8px; }
.fd-day .cin:first-child { margin-top: 16px; }
.fd-tabs { margin-top: 12px; }
/* Filter-/Kinos-Blatt offen: Seite dahinter scrollt nicht mit (Niklas 2026-10-17) */
:root:has(dialog.sheet[open]:not(.page)) { overflow: hidden; }
dialog.sheet { overscroll-behavior: contain; }

.chip-reset.hint .hold-txt { visibility: hidden; }
.chip-reset.hint::after { content: attr(data-hint-text); position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; }

/* Standort-Knopf links vor dem Eingabefeld (Niklas 2026-10-17) */
.setup .addr-row { padding-left: 2px; padding-right: 8px; }
.setup .addr-row .gps { margin-right: 2px; }

/* Kino-Status in der Kinoliste (2026-10-17): rot = geschlossen, ⚠ = Programm nicht verfügbar (Grund zum Aufklappen) */
.st { white-space: nowrap; }
.st-closed { color: #ef4444; font-weight: 700; }
.st-warn { color: #f59e0b; font-weight: 600; }
.st-pause { color: var(--muted); }
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-right: 5px; vertical-align: 1px; }
.st-warn-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.cl-why-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted);
  display: grid; place-items: center; padding: 0; font: 800 .85rem/1 inherit; cursor: pointer; margin-right: 4px; }
.cl-why-btn .st-warn-ic { margin: 0; width: 16px; height: 16px; }
.cl-why-btn.st-closed { color: #ef4444; border-color: color-mix(in srgb, #ef4444 50%, transparent); }
.cl-why-btn.st-warn { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 50%, transparent); }
.cl-why { flex-basis: 100%; margin: 6px 0 2px; padding: 8px 12px; border-radius: 10px; font-size: .86rem; line-height: 1.4;
  background: color-mix(in srgb, currentColor 8%, transparent); color: var(--fg); }
.cl-why.st-closed { border-left: 3px solid #ef4444; } .cl-why.st-warn { border-left: 3px solid #f59e0b; }
.cl-item:has(.st-closed) .cn:not(.temp) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, #ef4444 60%, transparent); }
.cl li.cl-item { flex-wrap: wrap; } .cl li.cl-item .cl-why { margin: 0 8px 10px 44px; }
.kstat { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, currentColor 8%, transparent); line-height: 1.45; } .kstat.st-closed { border-left: 3px solid #ef4444; } .kstat.st-warn { border-left: 3px solid #f59e0b; } .kstat a { font-weight: 600; }

/* Sprachauswahl im Kopf: aktuelle Sprache + Liste (2026-10-17) */
.lang-dd { position: relative; }
header.top .lang-dd { flex: 1 1 auto; display: flex; justify-content: center; position: relative; top: var(--xh-shift, 0px); }
@media (min-width: 700px) { header.top .lang-dd { flex: none; margin: 0 18px 0 auto; } }
.lang-btn { display: inline-flex; align-items: center; gap: 2px; padding: 6px 4px 6px 6px; border: 0; background: none; color: var(--muted); font: 600 .82rem/1 inherit; letter-spacing: .04em; cursor: pointer; }
.lang-btn svg { width: 14px; height: 14px; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--fg); }
.lang-list { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 30; margin: 0; padding: 4px; list-style: none; min-width: 130px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.lang-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.lang-list li:hover, .lang-list li:focus { background: var(--chip); outline: none; }
.lang-list li[aria-selected="true"] { font-weight: 700; }
.lang-list li[aria-selected="true"]::after { content: ' ✓'; color: var(--accent); }
.kino-nav .lang-list, .fd-nav .lang-list { left: auto; right: 0; transform: none; }
/* Sprachauswahl offen: Kopf über Tagesstreifen/Pills legen */
header.top:has(.lang-list:not([hidden])), .fd-nav:has(.lang-list:not([hidden])) { z-index: 60 !important; position: relative; }
:root:has(#qt) header.top:has(.lang-list:not([hidden])) { position: sticky; }
:root:has(#qt) header.top:has(.lang-list:not([hidden])) { clip-path: inset(0 -100vmax -400px); }   /* Zuschnitt nach unten aufheben, solange die Sprachliste offen ist */
:root:has(#qt) header.top:has(.lang-list:not([hidden])) { box-shadow: -100vmax 0 0 var(--bg), 100vmax 0 0 var(--bg); }   /* Hintergrund nur seitlich verlängern, nicht über die Seite */
/* Umschalter „Ganzer Ort | Umkreis wählen“ immer einzeilig (schmale Handys: Schrift etwas kleiner) */
.scope button { white-space: nowrap; font-size: clamp(.82rem, 3.9vw, 1rem); padding-inline: 8px; }

/* Standortfeld: langer Text endet mit … vor dem X (2026-10-18) */
#addr { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 8px; }
/* Fahrzeit-Regler in unserem Lila wie die übrigen Regler */
.setup #max::-webkit-slider-runnable-track { background: linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 50%) 100% no-repeat, var(--chip); }
.setup #max:not(.at-max)::-webkit-slider-thumb { background: var(--accent); }
.setup #max::-moz-range-progress { background: var(--accent); }
.setup #max:not(.at-max)::-moz-range-thumb { background: var(--accent); }
/* Minuten antippen → Auswahlrad: unsichtbare Auswahlliste über der Zahl */
.max-pick { position: relative; display: inline-block; }
.max-pick output { text-decoration: underline dotted color-mix(in srgb, var(--fg) 40%, transparent); text-underline-offset: 6px; text-decoration-thickness: 2px; cursor: pointer; }
.max-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; }

/* Gast bei der Vorstellung (2026-10-18): Tag mit Mikrofon, Hinweis beim Antippen */
.tag.guest { background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px 0 3px; vertical-align: 0; }
.card .tag.guest { background: var(--accent); color: #fff; }
.tag.guest .gi { width: 11px; height: 11px; flex: none; }
.guest-pop { position: absolute; z-index: 1000; max-width: min(320px, calc(100vw - 24px)); display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--card); color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow: 0 8px 28px rgba(0,0,0,.4); font-size: .9rem; line-height: 1.35; animation: gpop .16s ease-out; }
.guest-pop .gi { width: 16px; height: 16px; flex: none; color: var(--accent); margin-top: 1px; }
@keyframes gpop { from { opacity: 0; transform: translateY(-4px); } }
.pick-h { font-size: .95rem; margin: 22px 0 10px; }
/* Kinoseite: einfache Kachelkarte statt Vektorkarte (2026-10-18) */
.map .kino-mm { height: 100%; border: 0; border-radius: 0; }
.kino-mm .mm-credit a { color: inherit; }
/* Ort ohne Kino: Vorführung „Umkreis wählen“ (2026-10-18) */
.setup .start-card { position: relative; }
.tour-pop { position: relative; z-index: 5; padding: 12px 14px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: tour-in .35s cubic-bezier(.3,1.4,.5,1) both; }
.tour-pop::after { content: ''; position: absolute; right: 24%; top: -7px; width: 14px; height: 14px; background: var(--accent); transform: rotate(45deg); border-radius: 3px 0 0 0; }
.tour-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 42px; height: 42px; pointer-events: none; transition: transform .45s cubic-bezier(.45,.05,.25,1), opacity .3s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.tour-cursor svg { width: 42px; height: 42px; transform-origin: 20% 12%; }
.tour-cursor::before { content: ''; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.6); transform: scale(0); opacity: 0; }
.tour-cursor.click svg { animation: tour-press .42s cubic-bezier(.3,.7,.3,1); }
.tour-cursor.click::before { animation: tour-ripple .5s ease-out; }
.tour-cursor.gone, .tour-pop.gone, .tour-arrow.gone { opacity: 0; transition: opacity .35s; }
.tour-arrow { position: absolute; z-index: 5; display: flex; flex-direction: row; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; font-size: .85rem; pointer-events: none; animation: tour-in .3s ease both, tour-bob 1s ease-in-out .3s infinite; }
.tour-arrow span { padding: 3px 10px; font-size: .8rem; border-radius: 999px; background: var(--accent); color: #fff; white-space: nowrap; }
.tour-arrow svg { width: 26px; height: 26px; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes tour-press { 35% { transform: scale(.62); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes tour-ripple { 0% { transform: scale(0); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes tour-bob { 50% { transform: translateY(-5px); } }
/* Pflichtangaben nach „kein Kino“: Fahrzeit + Verkehrsmittel noch nicht gewählt (2026-10-18) */
.setup #max.unset:not(.at-max)::-webkit-slider-thumb { background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: need-pulse 1.6s ease-out infinite; }
.setup #max.unset:not(.at-max)::-moz-range-thumb { background: var(--accent); border: 3px solid var(--card); }
.setup .missing { animation: need-shake .45s ease; }
.setup .mode-btn.missing, .setup .range-wrap.missing { outline: 2px solid #ff6b6b; outline-offset: 4px; border-radius: 12px; }
.setup .max-pick.missing output { color: #ff6b6b; }
@keyframes need-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes need-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.setup .range-head .max-pick, .setup .range-head .mit { white-space: nowrap; }
.setup .mode-btn .mode-any { display: inline-flex; gap: 3px; opacity: .55; }
.setup .mode-btn .mode-any svg { width: 20px; height: 20px; }
.setup .mode-btn.unset .mode-txt { margin-left: 2px; }
.setup .msg.need { color: #ff8a80; font-weight: 600; }
/* Verkehrsmittel-Symbol im Dropdown-Knopf lila (2026-10-18) */
.mode-btn > svg:first-child { color: var(--accent); }
/* Hinweis-Pfeil auf das Verkehrsmittel (Vorführung „kein Kino“) */
.tour-mode { position: absolute; z-index: 5; width: 20px; height: 20px; color: var(--accent); pointer-events: none; animation: tour-fade .3s ease both; }
@keyframes tour-fade { from { opacity: 0; } }
.tour-mode svg { width: 20px; height: 20px; animation: tour-bob-down 1s ease-in-out .3s infinite; }
.tour-mode.gone { opacity: 0; transition: opacity .35s; }
@keyframes tour-bob-down { 50% { transform: translateY(4px); } }
/* Info-Knopf + ausklappbarer Hinweis zu den Fahrzeiten */
.tt-btn { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.tt-btn svg { width: 22px; height: 22px; }
.tt-btn[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tt-panel { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--chip); color: var(--fg); font-size: .85rem; line-height: 1.4; animation: tour-in .25s ease both; }
/* Regler im Kinos-Blatt lila wie die übrigen */
input.fg-range::-webkit-slider-runnable-track { background: linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, var(--chip) !important; }
input.fg-range::-webkit-slider-thumb { background: var(--accent) !important; }
input.fg-range::-moz-range-progress { background: var(--accent) !important; }
input.fg-range::-moz-range-thumb { background: var(--accent) !important; }
/* Anzeigetafel: Kinozahl rollt */
.odo { display: inline-flex; vertical-align: bottom; }
.odo.rolling { height: 1.25em; overflow: hidden; line-height: 1.25em; }
.odo-d { display: inline-block; height: 1.25em; overflow: hidden; }
.odo-s { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.2,.9,.25,1.05); }
.odo-s span { height: 1.25em; line-height: 1.25em; text-align: center; font-variant-numeric: tabular-nums; }
/* Tagesstreifen auf breiten Bildschirmen bis an den Rand (Niklas 2026-10-18): Hintergrund per Schatten, Linien per border-image
   seitlich verlängert — beides nur „Tinte“, erzeugt keinen waagrechten Bildlauf */
.tabs { --tabs-bg: color-mix(in srgb, var(--fg) 3.5%, var(--bg)); box-shadow: 0 0 0 100vmax var(--tabs-bg); clip-path: inset(0 -100vmax);
  border-image: linear-gradient(var(--line), var(--line)) 1 / 1px 0 / 0 100vmax; }
.cl-head .cl-count { white-space: nowrap; }
/* Kinos-Blatt: neu erreichbare Kinos blenden oben nacheinander ein (2026-10-18) */
@keyframes cl-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
/* kurzer Schimmer auf der ganzen Karte; Füllmodus nur „backwards“, danach gilt wieder der normale Stil (iOS ließ ihn sonst stehen) */
/* Variante 5 „Aufziehen“ (Niklas 2026-10-18): Zeile wächst in der Höhe auf, Inhalt blendet ein */
/* leichter als „Aufziehen“ (max-height löste bei jedem Bild ein Layout aus): nur Deckkraft + Verschiebung, läuft auf der GPU */
.cl li.cl-item.cl-new { animation: cl-grow .28s ease-out backwards; }
@keyframes cl-grow { from { opacity: 0; transform: translateY(-8px); } }
@keyframes cl-hl { 0%, 35% { box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--accent) 12%, transparent); } 100% { box-shadow: inset 0 0 0 200px transparent; } }

/* etwas mehr Luft zwischen Frage und Fahrzeit-Zeile (Platz für den Hinweis-Pfeil über dem Verkehrsmittel) */
.setup .range-head { margin-top: 8px; }
.tt-btn[hidden] { display: none; }
/* Ort ohne Kino: Schalter „Ganzer Ort / Umkreis“ entfällt, die Blase steht an seiner Stelle (2026-10-18) */
.start-card.no-scope .scope { display: none; }
.start-card.no-scope .tour-pop::after { display: none; }
/* Adressliste: gewählter Eintrag mit Haken (2026-10-18) */
.addr-list li.cur { position: relative; padding-right: 36px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.addr-list li.cur::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* Platzhalter „Verkehrsmittel“ (Pflichtangabe noch offen) */
.setup .mode-btn.unset .mode-txt { color: var(--muted); }
/* Zeile „5 min mit dem [Verkehrsmittel] (i)“ darf umbrechen statt die Karte zu verbreitern */
.setup .range-head { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
.setup .start-card > * { min-width: 0; }
.setup .range-head.need-mode .mit { display: none; }
/* Info-Knopf schmaler, damit „25 min mit dem Fahrrad (i)“ in eine Zeile passt */
.setup .range-head .tt-btn { width: 26px; height: 26px; margin-left: -2px; }
.setup .range-head .tt-btn svg { width: 20px; height: 20px; }
/* Info-Knopf am Ende der Frage (passt dort immer; hinter dem Verkehrsmittel brach die Zeile um) */
.setup .q .tt-btn { display: inline-grid; width: 28px; height: 28px; vertical-align: -3px; margin-left: 0; }
.setup .q .tt-btn svg { width: 22px; height: 22px; }
.setup .q .tt-btn[hidden] { display: none; }
/* sehr schmale Handys (iPhone SE): „mit dem“ weglassen, damit Zeit und Verkehrsmittel in einer Zeile bleiben */
@media (max-width: 360px) { .setup .range-head .mit { display: none; } }
/* Info-Knopf wieder hinter dem Verkehrsmittel (Niklas 2026-10-18) — Zeile knapp gemessen: Lücken 6 px, Knopf 24 px */
.setup .range-head { gap: 6px; }
.setup .range-head .tt-btn { width: 24px; height: 24px; margin-left: 0; }
.setup .range-head .tt-btn svg { width: 20px; height: 20px; }
@media (max-width: 360px) { .setup .range-head .mode-btn { padding: 0 6px 0 8px; } }
/* Kinos-Blatt: „Ganz <Ort>“ bei einem Ort ohne Kino (2026-10-18) */
.scope-hint { margin: 10px 2px 0; color: var(--accent); font-size: .9rem; line-height: 1.4; }
/* ---- 2026-10-19 (Niklas) ---- */
/* Schalter: gewählte Seite lila, damit klar ist, was gilt */
.scope button[aria-checked="true"] { background: var(--accent); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Kinos-Blatt, Standort als Variante G: Hinweis + Pill mit „Ändern“ innen */
.reach-from { display: grid; justify-content: start; gap: 6px; }
.reach-from .g-hint { font-size: .85rem; color: var(--muted); }
.reach-from .g-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 42px; padding: 4px 6px 4px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.reach-from .g-chip > svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.reach-from .g-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reach-from .g-chip .edit { flex: none; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--chip); font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.reach-from .g-chip .edit svg { width: 13px; height: 13px; }
.reach-from .g-chip:hover .edit, .reach-from .g-chip:focus-visible .edit { color: var(--accent); }
/* Pflichtangaben: lila statt rot, Rahmen direkt am Knopf, Hinweis lila */
.setup .mode-btn.missing { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.setup .range-wrap.missing { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 99px; }
.setup .max-pick.missing output { color: var(--accent); }
.setup .msg.need { color: var(--accent); }
.setup .range-head .mode-dd { margin-left: 4px; }   /* etwas Abstand zu „45 min“, damit Rahmen und Wackeln nichts überlappen */
/* leere Ansicht: Knopf */
#empty .empty-btn { margin-top: 14px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
/* Abstände im Startdialog gleichmäßig (Niklas 2026-10-19): leerer Hinweis-Absatz nimmt keinen Platz ein;
   Zeile „45 min mit dem …“ mittig zwischen Frage und Regler */
.setup .msg:empty { display: none; }
.setup .range-head { margin-top: 3px; }
.setup .range { gap: 14px; }
/* eingeklappter Umkreis-Bereich ohne Platz (Schalter mittig zwischen Feld und Knopf); Hinweis mittig zwischen Regler und Knopf */
#radius-box:not(.open) { display: none; }
#radius-box { transition-property: grid-template-rows, margin-top, opacity, display; transition-behavior: allow-discrete; }
@starting-style { #radius-box.open { grid-template-rows: 0fr; margin-top: -18px; opacity: 0; } }
.setup #addr-msg { margin: -6px 0 6px; }
/* Kinos-Blatt: Hinweis „kein Kino“ gleich weit vom Schalter wie von der Fahrzeit-Zeile */
.scope-hint { margin-top: -4px; }
.reach-from { grid-template-columns: minmax(0, 1fr); }
.reach-from .g-chip { width: fit-content; max-width: 100%; min-width: 0; }
.reach, .reach > * { min-width: 0; }
/* Kinos-Blatt: jeder Abstand einzeln einstellbar (Niklas 2026-10-19; Einstell-Panel mit ?abstaende, siehe app.js tuneSheet) */
:root { --k-pad: 16px; --k-hint: 6px; --k-pill: 16px; --k-switch: 20px; --k-note: 16px; --k-row: 5px; --k-head-top: 6px; --k-head-bottom: 18px; --k-item: 8px; }
.sheet .reach { gap: 0; padding: var(--k-pad); }
.sheet .reach-from { gap: var(--k-hint); }
.sheet .reach > .scope { margin: var(--k-pill) 0 0; }
.sheet .reach > .scope + .reach-row { margin-top: var(--k-switch); }
.sheet .reach > .scope + .scope-hint { margin-top: var(--k-note); }
.sheet .reach > .scope-hint + .reach-row { margin-top: var(--k-note); }
.sheet .reach > #r-max { margin-top: var(--k-row); }
.sheet .reach + #kl .cl-head { margin: var(--k-head-top) 0 var(--k-head-bottom); }
.sheet #kl .cl { gap: var(--k-item); }
/* Einstell-Panel */
.tune { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; max-height: 46vh; overflow: auto; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--accent); box-shadow: 0 10px 40px rgba(0,0,0,.5); font-size: .82rem; }
.tune h4 { margin: 0 0 6px; font-size: .85rem; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tune label { display: grid; grid-template-columns: 1fr 120px 42px; gap: 8px; align-items: center; margin: 4px 0; }
.tune output { text-align: right; font-variant-numeric: tabular-nums; }
.tune button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 5px 10px; background: var(--accent); color: #fff; cursor: pointer; }
.tune.min label, .tune.min .tune-out { display: none; }
.tune-out { width: 100%; margin-top: 6px; font: .75rem ui-monospace, monospace; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
/* weitere Punkte 2026-10-19 */
#empty { text-align: center; }
.setup .range-wrap.missing { outline: 0; }
.setup #max.missing { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 99px; }
.scope { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* Schalter: eine gleitende lila Markierung statt gefärbter Knöpfe (folgt beim Wischen dem Finger, Niklas 2026-10-19) */
.scope { position: relative; isolation: isolate; --pos: 0; }
.scope:has(> [role=radio]:last-child[aria-checked="true"]) { --pos: 1; }
.scope::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 999px;
  background: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateX(calc(var(--pos) * (100% + 4px))); transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
.scope:not(:has([aria-checked="true"]))::before { opacity: 0; }
.scope.dragging::before { transition: none; }
.scope button[aria-checked="true"] { background: none; box-shadow: none; color: #fff; transition: color .2s; }
.scope button { position: relative; }
@media (prefers-reduced-motion: reduce) { .scope::before { transition: none; } }
.scope.dragging button { color: var(--muted); }
.scope.dragging button.lit { color: #fff; }
/* Mindestbewertung: „egal“ und Regler etwas eingerückt, damit der ×-Knopf die äußerste rechte Kante bildet (Niklas 2026-10-19) */
.sheet .rg { padding-right: 12px; }
/* Suche ohne Treffer am Ausgangstag: weitere Tage mit Treffern lila umrandet, ein Lichtpunkt läuft zweimal um den Kasten (Niklas 2026-10-19) */
@property --qa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tabs button.q-hit { position: relative; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tabs button.q-hit.q-run::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--qa), transparent 0 72%, color-mix(in srgb, #fff 85%, var(--accent)) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: q-run 1.4s linear 1 forwards; opacity: 1; }
@keyframes q-run { to { --qa: 360deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tabs button.q-hit.q-run::after { display: none; } }
/* Such-Pill (nur bei aktiver Suche): runde Pill mit Lupe, lila wie aktive Filter-Akzente */
.chip-search { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex: none; align-self: center;
  animation: chip-pop .25s cubic-bezier(.3, 1.4, .5, 1) both; }
.chip-search svg { width: 17px; height: 17px; color: var(--accent); }
.chip-search.on { background: var(--card); border-color: var(--accent); }
@keyframes chip-pop { from { transform: scale(.6); opacity: 0; } }
/* Kein Treffer am gewählten Tag: Hinweis mit Knopf zum nächsten Tag mit Treffern (Niklas 2026-10-20) */
.q-none { text-align: center; padding: 18px 12px 8px; }
.q-none p { margin: 0 0 8px; }
.q-none .q-next { font: inherit; font-weight: 700; padding: 6px 14px; margin-left: 4px; border-radius: 999px; border: 1.5px solid var(--accent); background: none; color: var(--fg); cursor: pointer; }
.q-none .q-next:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* Auswahl der Navi-App („Route planen“, public/route.js) – unten als Blatt, auf großen Schirmen mittig */
.navpick { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: flex-end; justify-content: center; }
.navpick-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: np-fade .18s ease both; }
.navpick-card { position: relative; width: min(420px, 100%); margin: 0 8px 10px; padding: 14px 12px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: np-up .22s cubic-bezier(.3, 1.2, .5, 1) both; }
.navpick-h { margin: 2px 8px 8px; font-weight: 800; }
.navpick-o { display: flex; justify-content: space-between; align-items: center; padding: 13px 12px; border-radius: 12px; color: var(--fg); text-decoration: none; font-weight: 600; }
.navpick-o + .navpick-o { border-top: 1px solid var(--line); }
.navpick-o:hover, .navpick-o:focus-visible { background: var(--chip); }
.navpick-o span { color: var(--muted); }
.navpick-x { width: 100%; margin-top: 6px; padding: 12px; border-radius: 12px; border: 0; background: var(--chip); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 700px) { .navpick { align-items: center; } }
@keyframes np-fade { from { opacity: 0; } }
@keyframes np-up { from { transform: translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .navpick-bg, .navpick-card { animation: none; } }
/* Trailer-Kopf (Niklas 2026-10-20, Vorschau S7/O50): Szenenbild im Querformat, dunkler Verlauf unten,
   halbtransparenter lila Knopf (50 %) und „Trailer abspielen“ – ohne Puls (Niklas: „too much“) */
.player-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailer-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 30px 16px 12px; border: 0; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45) 45%, rgba(0,0,0,.78)); color: #fff; font: inherit; font-weight: 800; font-size: 1rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.film-dlg .player:not(.has-backdrop) .trailer-strip { padding-top: 40px; }
.trailer-strip .ts-btn { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 50%, transparent); }
.trailer-strip .ts-btn svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.trailer-strip:hover .ts-btn { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.trailer-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.trailer-strip.loading .ts-btn svg { animation: spin 1s linear infinite; opacity: .6; }
.player.playing .trailer-strip, .player.playing .player-backdrop { display: none; }
/* Fehler melden (public/report.js) */
.report-line { margin: 22px 0 8px; text-align: center; color: var(--muted); font-size: .88rem; }
.linkbtn { font: inherit; color: var(--fg); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.report .navpick-h small { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.rp-kinds { border: 0; margin: 0; padding: 0 4px; display: grid; gap: 2px; }
.rp-k { display: flex; gap: 10px; align-items: center; padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.rp-k:hover { background: var(--chip); }
.rp-k input { accent-color: var(--accent); width: 18px; height: 18px; }
.rp-tl { display: block; margin: 10px 8px 6px; font-weight: 700; font-size: .9rem; }
.report textarea { width: calc(100% - 16px); margin: 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
.rp-note { margin: 8px 8px 0; font-size: .8rem; color: var(--muted); }
.rp-msg { margin: 6px 8px 0; font-size: .85rem; color: #ef4444; min-height: 1em; }
.rp-msg:empty { display: none; }
.rp-row { display: flex; gap: 8px; margin-top: 10px; }
.rp-row .navpick-x { margin: 0; width: auto; flex: 1; }
.rp-send { flex: 1; padding: 12px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.rp-send:disabled { opacity: .6; }
/* ---------- Kinoseite neu (Niklas 2026-10-20, K14/K14b + R2): Karte hinter dem Kopf, Reiter Programm/Preise/Info ---------- */
.khead { position: relative; overflow: hidden; margin: 0 -16px; min-height: 330px; display: flex; align-items: flex-end; background: #1d1f24; }
.khead-map { position: absolute; inset: 0; }
.khead-map .minimap { position: absolute; inset: 0; border-radius: 0; height: auto; }
.khead-map .mm-tiles { position: absolute; inset: 0; filter: saturate(.35) brightness(.7); }
.khead-map .mm-pin { color: var(--accent); width: 34px; height: 34px; margin: -34px 0 0 -17px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.khead-map .mm-pin svg { width: 100%; height: 100%; }
.khead-map .mm-route { color: var(--accent); }
.khead-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.3) 40%, var(--bg) 100%); pointer-events: none; }
.khead-in { position: relative; z-index: 1; padding: 120px 16px 14px; width: 100%; }
.khead h1 { margin: 0; font-size: 1.75rem; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.khead-addr { margin: 4px 0 0; color: #d6d6d6; font-size: .95rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.khead-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; font-size: .9rem; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(17,17,17,.5); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hbtn { white-space: nowrap; line-height: 1.2; }
.hbtn svg, .hbtn .ic { width: 16px; height: 16px; flex: none; border: 0; padding: 0; margin: 0; background: none; }
.hbtn.hbtn-route { border: 1.5px solid var(--accent); }
.hbtn:hover { background: rgba(17,17,17,.7); }
.khead-credit { position: absolute; right: 8px; top: 8px; z-index: 1; }
.kino .ktabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 6px 0 12px; }
.kino .ktabs button { font: inherit; font-weight: 700; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.kino .ktabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.kino .plist { margin: 4px 0 10px; display: grid; grid-template-columns: 1fr auto; }
.kino .plist dt, .kino .plist dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kino .plist dd { text-align: right; font-weight: 800; }
.kino .kv2 { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 6px 0 10px; }
.kino .kv2 dt { color: var(--muted); } .kino .kv2 dd { margin: 0; }
/* Programm kompakt: kleines Cover, Titel, Laufzeit/FSK, Zeiten */
.kino .kfilm { padding: 12px 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; }
.kino .kfilm .kposter { width: 56px; min-width: 56px; height: auto; aspect-ratio: 2 / 3; border-radius: 6px; }
.kino .kfilm h3 { font-size: 1rem; margin: 0; }
.kino .kfilm .times { margin-top: 8px; }
.kino .kfilms { display: block; }
.kino .kfilm { grid-template-columns: 56px 1fr; gap: 12px; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.kino .map { height: auto; }
/* Kino-Schnellansicht im Stil der Kinoseite (cq-mode): Name steht im Karten-Kopf statt im Blatt-Titel */
dialog.sheet.cq-mode #sheet-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sheet-body .cq-head { margin: -4px -16px 0; min-height: 300px; }
.cq-head .cq-name { margin: 0; font-size: 1.6rem; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.cq-head .khead-in { padding-top: 110px; }
.sheet-body .ktabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 0; }
.sheet-body .ktabs button { font: inherit; font-weight: 700; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.sheet-body .ktabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.sheet-body .plist { margin: 0 0 6px; display: grid; grid-template-columns: 1fr auto; }
.sheet-body .plist dt, .sheet-body .plist dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sheet-body .plist dd { text-align: right; font-weight: 800; }
.sheet-body .kv2 { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0 0 6px; }
.sheet-body .kv2 dt { color: var(--muted); } .sheet-body .kv2 dd { margin: 0; }
.sheet-body .kfilms { display: block; }
.sheet-body .kfilm { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sheet-body .kfilm .kposter { width: 56px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: var(--chip); display: block; }
.sheet-body .kfilm h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.sheet-body .kfilm .meta { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.sheet-body .kfilm .times { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-body .kfilm .fopen { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.sheet-body .kfilm .kp { display: block; }
.cq-this .cq-label { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cq-this .kfilm { border-bottom: 0; }
.cq-this .cq-day { margin-top: 8px; } .cq-this .cq-day > span { font-size: .85rem; color: var(--muted); }
.cq-this .cq-day .times { margin-top: 4px; }
.cq-head .khead-map .minimap { position: absolute; inset: 0; height: auto !important; min-height: 0; border-radius: 0; margin: 0; aspect-ratio: auto; }
dialog.sheet.cq-mode .sheet-head { display: none; }
.cq-head .mm-pin { color: var(--accent); width: 34px; height: 34px; margin: -34px 0 0 -17px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.cq-head .mm-pin svg { width: 100%; height: 100%; }
.cq-head .mm-tiles { position: absolute; inset: 0; filter: saturate(.35) brightness(.7); }
.cq-head .mm-route { color: var(--accent); }
.sheet-body #cq-prog .kfilm { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 12px 0; }
.sheet-body .cq-this .kfilm { padding: 12px; }
/* Gleiche sichtbare Abstände (Niklas 2026-10-20): Film-Karte → Text „Programm“ = Reiter-Linie → Tage-Leiste = 16px */
.sheet-body .cq-this + .ktabs { margin-top: -8px; }
.sheet-body .ktabs + #cq-prog { margin-top: 2px; }
/* Rechtliches im Sprach-Menü (zusätzlich zur Fußzeile) */
.lang-list .ll-h { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 2px; cursor: default; pointer-events: none; }
.lang-list .ll-sep { height: 1px; background: var(--line); margin: 6px 8px; padding: 0; pointer-events: none; }
.lang-list .ll-a { display: block; color: var(--fg); text-decoration: none; padding: 2px 0; white-space: nowrap; }
/* Fußzeile (Impressum, Datenschutz, Cookie-Einstellungen) erst unter dem Bildschirmrand: Inhalt füllt mindestens den Bildschirm */
body > main { min-height: calc(100dvh - 40px); }
body > footer { padding-top: 48px; }
footer .about { max-width: 640px; margin: 0 0 12px; line-height: 1.5; }
/* Zwischenschritt vor der Buchung (public/booking-note.js): mittige Karte im Stil der Startkarte */
dialog.bknote { width: min(calc(100% - 32px), 420px); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: none; color: var(--fg); overflow: visible; }
dialog.bknote::backdrop { background: rgba(0,0,0,.7); }
dialog.bknote[open] .bk-card { animation: bk-in .2s cubic-bezier(.3, 1.2, .5, 1) both; }
@keyframes bk-in { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { dialog.bknote[open] .bk-card { animation: none; } }
.bknote .bk-card { position: relative; display: grid; gap: 16px; padding: 28px 22px 18px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); max-height: calc(100dvh - 32px); overflow: auto; }
.bknote .bk-h { margin: 0 44px 0 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.bknote .bk-txt { margin: 0; line-height: 1.45; color: var(--muted); }
.bknote .bk-show { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--chip); }
.bknote .bk-show dt { color: var(--muted); } .bknote .bk-show dd { margin: 0; font-weight: 700; }
.bknote .bk-go { display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; margin-top: 4px; }
.bknote .bk-go:hover, .bknote .bk-go:focus-visible { filter: brightness(1.1); }
.bknote .bk-host { margin: -8px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.bknote .bk-cancel { justify-self: center; padding: 8px 16px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.bknote .bk-cancel:hover { color: var(--fg); }
/* UK: ⓘ-Menü nur mit Rechtlichem */
.uk-menu .lang-btn { display: inline-flex; align-items: center; gap: 4px; }
.uk-menu .lang-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.uk-menu .lang-btn svg { width: 20px; height: 20px; }
.uk-menu .lang-list { min-width: 200px; }