/* Startseite v2, Stand 22.09.2026: Hintergrundfilm, Terminkarten, Orte mit Bild ueber dem Text,
   feste Leiste auf dem Handy. Ergaenzt site.css, ueberschreibt nur Startseiten-Bausteine. */

/* ---------- Hero mit Film ---------- */
.hero-film{height:100svh;min-height:640px;align-items:flex-end;background:#050506}
.hero-film .bg{animation:none}
.hero-film .buehne{position:absolute;inset:0}
.hero-film video.bg{object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-film video.bg.laeuft{opacity:1}
.hero-film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-film .scrim{background:
  linear-gradient(180deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,0) 18%),
  linear-gradient(0deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.55) 24%,rgba(5,5,6,0) 52%),
  linear-gradient(90deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,0) 48%)}
.hero-film .hero-in{padding-bottom:clamp(3.2rem,6vw,5.5rem)}
.hero-film h1{font-size:clamp(2.3rem,1rem + 3.1vw,4rem);max-width:none;line-height:1.04;margin-top:1.1rem}
.hero-film h1 .l{display:block}
.hero-film .sub{font-size:clamp(1.1rem,.95rem + .55vw,1.45rem);max-width:40ch;margin:1.2rem 0 2rem}
.hero-film .btn .dauer{font-weight:400;opacity:.75;margin-left:.2rem;font-variant-numeric:tabular-nums}
.film-pause{position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(3.4rem,6vw,5.7rem);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(10,10,12,.35);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.film-pause:hover{background:rgba(255,255,255,.14)}
.film-pause svg{width:16px;height:16px;fill:currentColor}
.film-pause .an{display:none}
.film-pause[aria-pressed="true"] .an{display:block}
.film-pause[aria-pressed="true"] .aus{display:none}
.film-quelle{position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(1.3rem,2.4vw,2rem);z-index:3;font-size:.72rem;letter-spacing:.08em;color:rgba(233,229,221,.62)}

/* ---------- Einleitung ---------- */
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.intro .lead{max-width:34ch}
.fakten{display:grid;gap:0;border-top:1px solid var(--cream-line)}
.fakt{display:grid;grid-template-columns:6.5rem 1fr;gap:1.2rem;padding:1.15rem 0;border-bottom:1px solid var(--cream-line);align-items:baseline}
.fakt .n{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,1.4rem + 1.2vw,2.5rem);line-height:1;color:var(--cream-text);font-variant-numeric:tabular-nums}
.fakt .n em{font-style:normal;color:var(--wine)}
.fakt .l{color:var(--cream-muted);font-size:1rem;line-height:1.45}
.fakt .l small{display:block;font-size:.8rem;color:#8d877c;margin-top:.2rem}

/* ---------- Terminkarten ---------- */
.termine-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.termine{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.8rem,1.4vw,1.2rem);margin-top:clamp(2rem,4vw,3rem)}
.tkarte{background:#fff;border:1px solid var(--cream-line);border-radius:4px;padding:1.4rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:1rem;min-height:100%;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.tkarte:hover{border-color:#c9bfae;transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.tkarte .dat{display:flex;align-items:flex-end;gap:.7rem}
.tkarte .tag{font-family:var(--serif);font-weight:600;font-size:3.1rem;line-height:.85;color:var(--cream-text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tkarte .mw{display:flex;flex-direction:column;font-size:.8rem;line-height:1.3;color:var(--cream-muted)}
.tkarte .mw b{color:var(--cream-text);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}
.tkarte .art{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9a7d3a}
.tkarte .art.premiere{color:var(--wine)}
.tkarte h3{font-size:1.25rem;line-height:1.15;color:var(--cream-text)}
.tkarte p{font-size:.92rem;line-height:1.45;color:var(--cream-muted);margin-top:.35rem}
.tkarte .preis{font-size:.88rem;color:var(--cream-text);margin-top:auto}
.tkarte .preis small{display:block;color:var(--cream-muted);font-size:.78rem;margin-top:.15rem}
.tkarte .btn{justify-content:center;padding:.7rem 1rem;font-size:.86rem;white-space:normal;text-align:center}
.tkarte .unten{margin-top:auto;display:grid;gap:.8rem}
.termine-hinweis{margin-top:1.4rem;font-size:.9rem;color:var(--cream-muted)}

/* ---------- Orte: Bild oben, Text darunter ---------- */
.orte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3.2rem) clamp(1.2rem,2.4vw,2rem);margin-top:clamp(2.5rem,5vw,3.8rem)}
.ort{display:block;color:inherit}
.ort .bild{overflow:hidden;border-radius:3px;aspect-ratio:3/2;background:#16161a}
.ort .bild img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ort:hover .bild img{transform:scale(1.045)}
.ort .dach{display:block;margin-top:1.15rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wine-hell)}
.ort h3{margin-top:.5rem;color:#fff;font-size:clamp(1.3rem,1.1rem + .6vw,1.65rem);line-height:1.15}
.ort p{margin-top:.55rem;color:var(--muted);font-size:.98rem;line-height:1.5;max-width:38ch}
.ort .mehr{display:inline-block;margin-top:.8rem;font-size:.85rem;color:#e7e4de;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:border-color .2s}
.ort:hover .mehr{border-color:var(--wine-hell)}

/* ---------- Bild neben Text ---------- */
.seite{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.seite.links-text{grid-template-columns:1fr 1.25fr}
.seite .bild img{width:100%;border-radius:3px;aspect-ratio:3/2;object-fit:cover}
.seite .bild figcaption{margin-top:.7rem;font-size:.8rem;color:var(--faint)}
.light .seite .bild figcaption{color:#8d877c}
.presse-zitat{margin-top:1.8rem;padding-left:1.1rem;border-left:2px solid var(--wine)}
.presse-zitat .q{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1rem + .8vw,1.6rem);line-height:1.3;color:var(--cream-text)}
.presse-zitat .s{margin-top:.5rem;font-size:.88rem;color:var(--cream-muted)}

/* ---------- Filme ---------- */
.filme{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem)}
.filme .neben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.filme .film.gross{aspect-ratio:21/9}
.filme .neben .film{aspect-ratio:16/9}
.film .cap .dauer{font-size:.78rem;letter-spacing:.08em;color:#e9e5dd;border:1px solid rgba(255,255,255,.35);padding:.3rem .6rem;border-radius:2px;font-variant-numeric:tabular-nums}
.filme-hinweis{margin-top:1.3rem;color:var(--muted);font-size:.9rem;max-width:70ch}
.filme-hinweis a{color:#e7e4de;border-bottom:1px solid rgba(255,255,255,.3)}

/* ---------- Schluss ---------- */
.schluss .tel{display:block;margin-top:1.4rem;color:var(--muted);font-size:.98rem}
.schluss .tel a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}

/* ---------- feste Knoepfe ---------- */
.pille{position:fixed;left:50%;bottom:1.4rem;z-index:55;transform:translate(-50%,160%);transition:transform .45s var(--ease);
  display:inline-flex;align-items:center;gap:.6rem;background:#121215;color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.95rem;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.pille:hover{background:var(--wine);border-color:var(--wine)}
.pille.zeigen{transform:translate(-50%,0)}
.leiste{display:none}

@media (max-width:1100px){
  .termine{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .intro,.seite,.seite.links-text{grid-template-columns:1fr}
  .seite.links-text .bild{order:-1}
  .orte{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  /* Handy: Film oben, Text darunter, nie auf dem Bild */
  .hero-film{display:block;height:auto;min-height:0;padding-top:0}
  .hero-film .buehne{position:relative;height:64svh;min-height:420px;overflow:hidden}
  .hero-film .scrim{background:linear-gradient(180deg,rgba(5,5,6,.5) 0%,rgba(5,5,6,0) 22%,rgba(5,5,6,0) 70%,#050506 100%)}
  .hero-film .hero-in{padding:0 16px 2.6rem;margin-top:-1.2rem}
  .hero-film h1{font-size:1.85rem;text-shadow:none}
  .nur-gross{display:none}
  .hero-film .sub{text-shadow:none;margin-bottom:1.6rem}
  .hero-film .btns{display:grid;grid-template-columns:1fr;gap:.7rem}
  .hero-film .btns .btn{justify-content:center}
  .film-pause{bottom:14px;right:16px;width:40px;height:40px}
  .film-quelle{display:none}
  .hero-film .scrolldown{display:none}
  .termine{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;margin-inline:-16px;padding:0 16px 1rem;scrollbar-width:none}
  .termine::-webkit-scrollbar{display:none}
  .tkarte{flex:0 0 78%;scroll-snap-align:start}
  .orte{grid-template-columns:1fr;gap:2.4rem}
  .filme .neben{grid-template-columns:1fr}
  .filme .film.gross{aspect-ratio:16/9}
  .fakt{grid-template-columns:5rem 1fr}
  .pille{display:none}
  .leiste{display:grid;grid-template-columns:1.3fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#0c0c0e;border-top:1px solid var(--line);
    padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));gap:.5rem;transform:translateY(110%);transition:transform .4s var(--ease)}
  .leiste.zeigen{transform:none}
  .leiste a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;border-radius:3px;font-weight:600;font-size:.92rem;color:#fff;border:1px solid var(--line)}
  .leiste a.haupt{background:var(--wine);border-color:var(--wine)}
  .leiste svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
  footer{padding-bottom:6rem}
}
@media (prefers-reduced-motion:reduce){ .hero-film video.bg{display:none} }
html.shot .hero-film{height:100svh}

/* Korrekturen nach der Sichtprüfung 22.09.2026 */
.seite h2{font-size:clamp(2rem,1.2rem + 1.9vw,3rem);max-width:none;text-wrap:balance}
.seite h2 br{display:none}
.filme .neben .film .play{top:14px;left:14px;transform:none;width:44px;height:44px}
.filme .neben .film:hover .play{transform:scale(1.06)}
.filme .neben .film .cap .t{font-size:clamp(.98rem,.9rem + .35vw,1.15rem);max-width:none}
@media (max-width:700px){ .seite h2 br{display:inline} .seite h2{font-size:1.9rem}
  .filme .film .play{top:12px;left:12px;transform:none;width:44px;height:44px}
  .filme .film:hover .play{transform:scale(1.06)} }

/* ---------- Unterseiten (22.09.2026): Titel über dem Bild, nie darauf ---------- */
.kopf-seite{background:var(--bg);padding:clamp(7.5rem,11vw,10rem) 0 0}
.kopf-seite h1{font-size:clamp(2.4rem,1rem + 3.1vw,4.2rem);color:#fff;max-width:18ch;margin-top:1rem;line-height:1.05;text-wrap:balance}
.kopf-seite .lead{color:#d9d4c9;max-width:44ch;margin-top:1.3rem}
.kopf-bild{max-width:90rem;margin:clamp(2.5rem,5vw,4rem) auto 0;padding:0 clamp(1.4rem,5vw,3rem)}
.kopf-bild img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:3px}
.kopf-bild figcaption{margin-top:.7rem;font-size:.8rem;color:var(--faint)}
.bildreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem)}
.bildreihe figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.bildreihe figcaption{margin-top:.6rem;font-size:.82rem;line-height:1.45;color:var(--faint)}
.light .bildreihe figcaption{color:#8d877c}
.abschnitt-kopf{max-width:46rem}
.text-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
.text-spalten p{color:var(--muted);font-size:1.075rem;line-height:1.65}
.light .text-spalten p{color:var(--cream-muted)}
.text-spalten p + p{margin-top:1rem}
@media (max-width:900px){ .bildreihe{grid-template-columns:1fr 1fr} .text-spalten{grid-template-columns:1fr} }
@media (max-width:700px){
  .kopf-seite{padding-top:6.5rem}
  .kopf-seite h1{font-size:2.2rem}
  .kopf-bild{padding:0 16px}
  .kopf-bild img{aspect-ratio:4/3}
  .bildreihe{grid-template-columns:1fr}
}

/* ---------- Termine als ruhige Liste (22.09.2026, Dichte-Gate) ---------- */
.textlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;color:var(--cream-text);border-bottom:1px solid currentColor;padding-bottom:2px}
.textlink i{font-style:normal;transition:transform .25s var(--ease)}
.textlink:hover i{transform:translateX(4px)}
.tliste{list-style:none;margin-top:clamp(2.2rem,4vw,3.2rem);border-top:1px solid var(--cream-line)}
.tzeile a{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;gap:clamp(1.2rem,3vw,2.5rem);align-items:center;padding:clamp(1.3rem,2.2vw,1.8rem) 0;border-bottom:1px solid var(--cream-line);color:inherit}
.tz-dat{display:flex;flex-direction:column}
.tz-dat b{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,1.7rem + 1.2vw,2.9rem);line-height:.9;color:var(--cream-text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tz-dat span{margin-top:.45rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-muted)}
.tz-art{display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9a7d3a}
.tz-text strong{display:block;text-wrap:balance;margin-top:.35rem;font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);line-height:1.15;color:var(--cream-text)}
.tz-ort{display:block;margin-top:.3rem;font-size:.95rem;color:var(--cream-muted)}
.tz-akt{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--cream-text);white-space:nowrap}
.tz-akt.haupt{color:var(--wine)}
.tz-akt i{font-style:normal;transition:transform .25s var(--ease)}
.tzeile a:hover .tz-akt i{transform:translateX(5px)}
.tzeile a:hover strong{color:var(--wine)}
@media (max-width:700px){
  .tzeile a{grid-template-columns:4.4rem minmax(0,1fr);gap:.4rem 1rem;align-items:start}
  .tz-akt{grid-column:2;margin-top:.35rem}
  .tz-dat b{font-size:2.1rem}
}

/* ---------- Schleusen-Seite (22.09.2026): zwei Filme nebeneinander ---------- */
.filme .neben.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){ .filme .neben.zwei{grid-template-columns:1fr} }
/* Bildunterschrift: Motiv in Zeile 1, Fotograf in Zeile 2, nie mitten im Namen getrennt */
figcaption .foto{display:block}
/* Handy-Film: Fläche oben ausrichten, damit ein Rest-Beschnitt unten landet und nie am Kopf (Lucas, 22.09.2026) */
@media (max-width:700px){ .hero-film video.bg,.hero-film .poster{object-position:50% 18%} }

/* ---------- Rechtsseiten (22.09.2026): Impressum, Datenschutz, AGB ---------- */
.recht{max-width:46rem}
.recht h2{max-width:none;font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem);color:#fff;margin:2.6rem 0 .2rem;line-height:1.2;text-wrap:balance}
.recht h2:first-child{margin-top:0}
.recht h3{font-size:1.02rem;font-weight:600;color:#e7e4de;margin:1.8rem 0 0}
.recht p,.recht li{color:var(--muted);font-size:1rem;line-height:1.7;margin-top:.8rem}
.recht a{color:#e7e4de;border-bottom:1px solid rgba(255,255,255,.3)}
.recht .quelle{font-size:.86rem;color:var(--faint);margin-top:2.2rem}
.recht .pruef{margin-top:3rem;padding:1.4rem 0 0 1.4rem;border-left:2px solid var(--wine-hell)}
.recht .pruef h2{margin-top:0;font-size:1.15rem}
.recht .pruef ul{margin:.6rem 0 0 1.1rem}
.recht .pruef li{font-size:.92rem;margin-top:.5rem}
/* Überschrift mit einem sehr langen Wort (z. B. Geschäftsbedingungen): am Handy kleiner statt Trennung auf drei Zeilen */
@media (max-width:700px){ .kopf-seite h1.lang{font-size:1.9rem} }
@media (max-width:700px){ .recht h2{font-size:1.15rem} }

/* ---------- Schwarz auf allen Seiten (Lucas, 22.09.2026: "den Seitenhintergrund auf schwarz legen, sieht es mehr premium") ----------
   Zentral über die Cremefarben, damit auch Listen und Chroniken der Unterseiten mitgehen, die diese Variablen direkt nutzen.
   Rückweg: Block entfernen, Sicherung unter /root/backups/zwischenakt/v2-start.vor-schwarz-*.css */
:root{--cream:var(--bg);--cream2:#141417;--cream-text:#eceae4;--cream-muted:#9a978f;--cream-line:rgba(255,255,255,.12)}
.light{background:var(--bg);color:var(--text)}
.light h1,.light h2,.light h3{color:#fff}
.light .eyebrow{color:#b8975a}
.light .seite .bild figcaption,.light .bildreihe figcaption{color:var(--faint)}
.light .card{background:var(--panel);border-color:var(--line)}
.btn-lineink{border-color:rgba(255,255,255,.32);color:#fff}
.btn-lineink:hover{border-color:#fff}
.fakt .n em,.tz-akt.haupt,.tzeile a:hover strong,.light .prose a{color:var(--wine-hell)}
.tz-art{color:#b8975a}
.tz-dat b,.tz-text strong,.textlink,.tz-akt{color:#f2efe8}

/* Ton-Knopf neben Pause (Lucas, 22.09.2026): Film startet stumm, ein Tipp schaltet den Originalton ein */
.film-ton{position:absolute;right:calc(clamp(1.2rem,4vw,3rem) + 58px);bottom:clamp(3.4rem,6vw,5.7rem);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(10,10,12,.35);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.film-ton:hover{background:rgba(255,255,255,.14)}
.film-ton svg{width:19px;height:19px;fill:currentColor}
.film-ton .an{display:none}
.film-ton[aria-pressed="true"] .an{display:block}
.film-ton[aria-pressed="true"] .aus{display:none}
.film-ton[aria-pressed="true"]{border-color:#fff;background:rgba(255,255,255,.14)}
@media (max-width:700px){ .film-ton{bottom:14px;right:66px;width:40px;height:40px} }

/* Filme mit Original-Vorschaubild (Lucas, 22.09.2026: "die Original-Thumbnail nehmen"): Bild immer ganz in 16:9,
   Titel darunter, damit kein eingebrannter Titel beschnitten oder überdeckt wird */
.filme .unten .film,.filme .film.unten{aspect-ratio:auto;display:flex;flex-direction:column;background:#141417}
.filme .unten .film img,.filme .film.unten img{position:relative;inset:auto;height:auto;aspect-ratio:16/9}
.filme .unten .film .grad,.filme .film.unten .grad{display:none}
.filme .unten .film .cap,.filme .film.unten .cap{position:relative;background:#141417;padding:.85rem 1rem .95rem;align-items:center;flex-wrap:nowrap}
.filme .unten .film .cap .t,.filme .film.unten .cap .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Play-Knopf steht als erstes Element in der Leiste unter dem Bild, nie auf dem Titelbild
   (Handy 22.09.: er deckte "SCHLEUSEN-" ab). Titel brechen auf dem Handy um statt abgeschnitten zu werden. */
main .filme .unten .film .cap,main .filme .film.unten .cap{gap:.85rem;padding:.75rem 1rem;justify-content:flex-start}
main .filme .unten .film .cap .t,main .filme .film.unten .cap .t{flex:1;min-width:0}
main .filme .film .cap .play{position:static;flex:none;transform:none;width:34px;height:34px}
main .filme .film.gross.unten .cap{padding:.9rem 1.25rem;gap:1rem}
main .filme .film.gross.unten .cap .t{font-size:clamp(1.15rem,1rem + .7vw,1.55rem);max-width:none}
main .filme .film.gross.unten .cap .play{width:44px;height:44px}
main .filme .film:hover .cap .play{transform:scale(1.06)}
@media (max-width:700px){
  main .filme .unten .film .cap .t,main .filme .film.unten .cap .t{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;font-size:.9rem;line-height:1.25;letter-spacing:-.005em}
  main .filme .film.gross.unten .cap{padding:.75rem 1rem;gap:.85rem}
  main .filme .film.gross.unten .cap .t{font-size:.98rem}
  main .filme .film.gross.unten .cap .play{width:34px;height:34px}
  main .filme .film .cap .dauer{border:0;padding:0;color:var(--muted)}
}