/* Filmclub Lünen – Website. Nachbau des bisherigen Looks (Theme Munio):
   schwarz, Poppins dünn für Text und fett für Titel, Vollbild-Video. */
@font-face { font-family:"Poppins"; font-weight:100; font-display:swap; src:url(schriften/poppins-100.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:300; font-display:swap; src:url(schriften/poppins-300.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:300; font-style:italic; font-display:swap; src:url(schriften/poppins-300-italic.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:400; font-display:swap; src:url(schriften/poppins-400.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-display:swap; src:url(schriften/poppins-600.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-display:swap; src:url(schriften/poppins-700.woff2) format("woff2"); }

:root { --schwarz:#000; --weiss:#fff; --text:#c4c4c4; --leise:#8f8f8f; --linie:#222; --rand:clamp(20px, 5vw, 80px); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Poppins",sans-serif; font-weight:300; font-size:18px; line-height:1.6; color:var(--text); background:var(--schwarz); -webkit-font-smoothing:antialiased; }
a { color:var(--weiss); text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
strong, b { font-weight:600; color:#ddd; }
::selection { background:#fff; color:#000; }

/* ── Kopf ───────────────────────────────────────────────────────── */
.kopf { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:28px var(--rand); pointer-events:none; transition:background .3s, padding .3s; }
.kopf > * { pointer-events:auto; }
.kopf.gescrollt { background:rgba(0,0,0,.85); padding-top:16px; padding-bottom:16px; }
.kopf .logo img { height:34px; width:auto; }
.menue-knopf { display:flex; align-items:center; gap:14px; background:none; border:0; color:var(--weiss); font:600 14px "Poppins",sans-serif; letter-spacing:.06em; cursor:pointer; }
.menue-knopf .striche { width:28px; height:14px; position:relative; }
.menue-knopf .striche i { position:absolute; left:0; right:0; height:2px; background:var(--weiss); transition:transform .3s, top .3s, opacity .3s; }
.menue-knopf .striche i:nth-child(1) { top:0; } .menue-knopf .striche i:nth-child(2) { top:6px; } .menue-knopf .striche i:nth-child(3) { top:12px; }
body.menue-offen .menue-knopf .striche i:nth-child(1) { top:6px; transform:rotate(45deg); }
body.menue-offen .menue-knopf .striche i:nth-child(2) { opacity:0; }
body.menue-offen .menue-knopf .striche i:nth-child(3) { top:6px; transform:rotate(-45deg); }

/* ── Menü (Vollbild) ────────────────────────────────────────────── */
/* zentriert wie ein Abspann; das bewegte Bild bleibt abgedunkelt und unscharf dahinter sichtbar */
.menue { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; text-align:center; padding:120px var(--rand) 60px; opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s; overflow-y:auto; }
body.menue-offen { overflow:hidden; }
body.menue-offen .menue { opacity:1; visibility:visible; }
.menue ul { list-style:none; margin:auto 0; }
.menue li { overflow:hidden; }
.menue a { display:inline-block; font-weight:700; font-size:clamp(34px, 6vw, 64px); line-height:1.25; color:#fff; transform:translateY(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1), color .2s; }
.menue a:hover, .menue a.aktiv { color:var(--leise); }
body.menue-offen .menue a { transform:none; }
.menue li:nth-child(2) a { transition-delay:.04s; } .menue li:nth-child(3) a { transition-delay:.08s; } .menue li:nth-child(4) a { transition-delay:.12s; }
.menue li:nth-child(5) a { transition-delay:.16s; } .menue li:nth-child(6) a { transition-delay:.2s; } .menue li:nth-child(7) a { transition-delay:.24s; }
.menue li.personal a { font-size:clamp(18px, 2.2vw, 24px); font-weight:400; margin-top:26px; color:var(--leise); }
.menue li.personal a:hover { color:#fff; }

/* ── Hintergrund (Video/Bild) ───────────────────────────────────── */
.hintergrund { position:absolute; inset:0; overflow:hidden; background:#111 center/cover no-repeat; }
.hintergrund video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hintergrund::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }

/* ── Startseite: Abspann 01–04 ──────────────────────────────────────
   Das aktive Thema steht in der Mitte. Beim Weiterrollen zieht es nach oben,
   die Buchstaben driften auseinander und verschwimmen; das nächste Thema rollt
   von unten nach (rückwärts spiegelbildlich). Die Hintergründe blenden langsam
   über. Zustände: .aktiv, .weg (+ .nach-unten), .von-oben; .still schaltet die
   Übergänge zum Zurücksetzen kurz ab (site.js). */
.start { position:relative; height:100vh; height:100svh; overflow:hidden; background:#000; }
.slide { position:absolute; inset:0; visibility:hidden; }
.slide.aktiv, .slide.weg { visibility:visible; }
.slide .hintergrund { opacity:0; transform:scale(1.06); transition:opacity 1.4s ease, transform 9s cubic-bezier(.2,.6,.3,1); }
.slide.aktiv .hintergrund { opacity:1; transform:scale(1); }
.slide.weg .hintergrund { opacity:0; transform:scale(1); }
.slide.weg { z-index:2; }                     /* das gehende Thema löst sich über dem kommenden auf */
.slide-text { position:absolute; left:50%; top:50%; width:90%; text-align:center; z-index:2;
  transform:translate(-50%, calc(-50% + 70vh)); opacity:0;
  transition:transform 1.3s cubic-bezier(.2,.8,.25,1) .15s, opacity .9s ease .15s; }
.slide.von-oben .slide-text { transform:translate(-50%, calc(-50% - 70vh)); }
.slide.aktiv .slide-text { transform:translate(-50%, -50%); opacity:1; }
.slide.weg .slide-text { transform:translate(-50%, calc(-50% - 34vh)); opacity:1;
  transition:transform 1.25s cubic-bezier(.45,.05,.55,.95), opacity 1.25s ease; }
.slide.weg.nach-unten .slide-text { transform:translate(-50%, calc(-50% + 32vh)); }
.slide-titel { display:inline-flex; align-items:flex-start; gap:12px; font-weight:700; font-size:clamp(46px, 9vw, 120px); line-height:1; color:#fff; }
/* erst steigt die Schrift als Ganzes, dann driften die Buchstaben auseinander
   (Auflösen beschleunigt zum Ende hin – ease-in) */
.slide-titel .bs { display:inline-block; will-change:transform, filter, opacity;
  transition:transform 1.05s cubic-bezier(.45,0,.7,1) var(--verz, 0s), opacity .95s cubic-bezier(.5,0,.8,.6) var(--verz, 0s), filter .95s cubic-bezier(.45,0,.8,.7) var(--verz, 0s); }
.slide.weg .slide-titel .bs { transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sk)); opacity:0; filter:blur(var(--blur)); }
.slide-unter { transition:opacity .8s ease, filter .8s ease; }
.slide.weg .slide-unter { opacity:0; filter:blur(6px); }
.slide-unter { margin-top:18px; color:#fff; font-weight:300; font-size:clamp(15px, 1.6vw, 19px); opacity:.9; }
.slide.still, .slide.still * { transition:none !important; }
.start-nav { position:absolute; left:var(--rand); bottom:30px; z-index:5; display:flex; flex-direction:column; gap:0; }
.start-nav button { background:none; border:0; color:#fff; width:52px; height:40px; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.start-nav .pfeil { --g:40px; }
.start-nav button[hidden] { display:none; }

/* ── Unterseiten: Hero + Inhalt ─────────────────────────────────────
   Das Hintergrundbild (oder Video) steht bildschirmfüllend fest; der Inhalt
   rollt wie ein Abspann darüber nach oben. Beim Scrollen dunkelt site.js das
   Bild über --dunkel sanft ab und lässt den Titel nach oben verschwimmen. */
.hero { position:relative; height:80vh; height:80svh; min-height:380px; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero .hintergrund { position:fixed; inset:0; z-index:0; }
.hero .hintergrund::after { background:#000; opacity:var(--dunkel, .4); }
main, .ende { position:relative; z-index:1; }
.inhalt { position:relative; z-index:1; }
.hero-text { position:relative; z-index:2; padding:0 var(--rand); will-change:transform, opacity, filter; }
.hero h1 { font-weight:700; font-size:clamp(40px, 8vw, 96px); line-height:1.05; color:#fff; }
.hero h1 .wort { display:inline-block; white-space:nowrap; }
.hero h1 .bs { display:inline-block; opacity:0; transform:translateY(40px); animation:buchstabe .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes buchstabe { to { opacity:1; transform:none; } }
.hero .unter { margin-top:18px; color:#fff; font-weight:300; font-size:clamp(15px, 1.8vw, 20px); }

.inhalt { max-width:1100px; margin:0 auto; padding:90px var(--rand) 100px; }
.inhalt.schmal { max-width:860px; }
.hero + .inhalt { padding-top:40px; }   /* die ersten Zeilen stehen schon im Bild (unteres Fünftel) */
.text h2 { font-weight:700; font-size:clamp(26px, 3vw, 36px); line-height:1.25; color:#fff; margin:1.6em 0 .6em; }
.text h3 { font-weight:600; font-size:22px; color:#fff; margin:1.4em 0 .5em; }
.text p { margin:0 0 1.1em; line-height:1.75; font-weight:300; }
.text ul, .text ol { margin:0 0 1.1em 1.3em; }
.text li[data-list="bullet"] { list-style-type:disc; }   /* Quill 2 schreibt Aufzählungen als <ol> */
.text a { border-bottom:1px solid #555; transition:border-color .2s; }
.text a:hover { border-color:#fff; }
.text img { margin:1.6em auto; max-height:80vh; width:auto; }
.inhalt.schmal > img { max-height:75vh; width:auto; margin-left:auto; margin-right:auto; }
.text blockquote { border-left:2px solid #fff; padding-left:20px; margin:1.4em 0; font-style:italic; font-weight:300; }

/* ── Pfeile ───────────────────────────────────────────────────────
   Ein dünner Winkel ohne Kreis. Bei Hover rückt er in Pfeilrichtung vor und fährt
   dabei den Schaft aus. Eigenständig als <span class="pfeil [oben|unten|links|diag]">;
   Knöpfe (Senden, Anmelden …) tragen ihn rechts neben dem Text per ::before (Schaft)
   und ::after (Winkel). --g = Kantenlänge des Pfeils. */
:root { --pfeil-winkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4.5 16 12l-7.5 7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pfeil { --g:24px; display:inline-block; position:relative; width:var(--g); height:var(--g); vertical-align:middle; flex:none;
  transform:rotate(var(--dreh, 0deg)); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.pfeil.oben { --dreh:-90deg; } .pfeil.unten { --dreh:90deg; } .pfeil.links { --dreh:180deg; } .pfeil.diag { --dreh:-45deg; }
.pfeil::after { content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:var(--pfeil-winkel) center/contain no-repeat; mask:var(--pfeil-winkel) center/contain no-repeat; }
.pfeil::before { content:""; position:absolute; top:50%; right:calc(var(--g) / 3); width:0; height:calc(var(--g) / 12);
  margin-top:calc(var(--g) / -24); border-radius:9px; background:currentColor; opacity:0; transition:width .35s cubic-bezier(.2,.7,.2,1), opacity .2s; }
a:hover > .pfeil, button:hover > .pfeil, a:focus-visible > .pfeil, button:focus-visible > .pfeil {
  transform:rotate(var(--dreh, 0deg)) translateX(calc(var(--g) * .2)); }
a:hover > .pfeil::before, button:hover > .pfeil::before, a:focus-visible > .pfeil::before, button:focus-visible > .pfeil::before {
  width:calc(var(--g) * .55); opacity:1; }
.knopf { --g:24px; position:relative; display:inline-flex; align-items:center; color:#fff; font-weight:600; font-size:16px; border:0; background:none; cursor:pointer; padding:8px calc(var(--g) + 12px) 8px 0; font-family:inherit; }
.knopf::after { content:""; position:absolute; right:0; top:50%; width:var(--g); height:var(--g); margin-top:calc(var(--g) / -2); background:currentColor;
  -webkit-mask:var(--pfeil-winkel) center/contain no-repeat; mask:var(--pfeil-winkel) center/contain no-repeat; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.knopf::before { content:""; position:absolute; top:50%; right:calc(var(--g) / 3); width:0; height:calc(var(--g) / 12); margin-top:calc(var(--g) / -24); border-radius:9px; background:currentColor; opacity:0;
  transition:width .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.knopf:hover::after, .knopf:hover::before, .knopf:focus-visible::after, .knopf:focus-visible::before { transform:translateX(calc(var(--g) * .2)); }
.knopf:hover::before, .knopf:focus-visible::before { width:calc(var(--g) * .55); opacity:1; }
.zurueck .pfeil, .nach-oben .pfeil { --g:20px; margin-top:-2px; }
.leiste .pfeil, .menue .pfeil { --g:.9em; }

/* ── Programm ───────────────────────────────────────────────────── */
.film-liste { list-style:none; }
.film { display:grid; grid-template-columns:minmax(0, 300px) 1fr; gap:48px; align-items:start; padding:0 0 70px; margin:0 0 70px; border-bottom:1px solid var(--linie); }
.film .cover img { width:100%; transition:transform .5s; }
.film .cover { overflow:hidden; display:block; }
.film:hover .cover img { transform:scale(1.03); }
.film .datum { color:#fff; font-weight:300; font-size:16px; letter-spacing:.03em; }
.film h2 { font-weight:700; font-size:clamp(28px, 4vw, 40px); line-height:1.2; margin:8px 0 16px; }
.film h2 a:hover { color:var(--leise); }
.film p { margin-bottom:22px; }
.trenner { font-weight:700; color:#fff; font-size:clamp(24px, 3vw, 32px); margin:20px 0 34px; }
.archiv-jahr { color:#fff; font-weight:600; font-size:15px; letter-spacing:.1em; margin:40px 0 8px; }
.archiv { list-style:none; }
.archiv li { border-bottom:1px solid var(--linie); }
.archiv a { display:flex; justify-content:space-between; gap:20px; padding:16px 0; font-weight:600; font-size:clamp(17px, 2vw, 22px); transition:color .2s, padding .3s; }
.archiv a:hover { color:var(--leise); padding-left:10px; }
.archiv .wann { font-weight:300; font-size:15px; color:var(--leise); white-space:nowrap; }
.leer { color:var(--leise); font-weight:300; }

.film-kopf { display:grid; grid-template-columns:minmax(0, 380px) 1fr; gap:56px; align-items:start; }
.film-kopf .infos { color:#fff; font-weight:300; }
.film-kopf .infos dt { font-size:13px; letter-spacing:.1em; color:var(--leise); font-weight:600; margin-top:18px; }
.film-kopf .infos dd { font-size:18px; }
.film-kopf .knopf { margin-top:28px; }
.trailer { position:relative; aspect-ratio:16/9; margin:50px 0; background:#111 center/cover no-repeat; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; text-align:center; cursor:pointer; }
.trailer::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); }
.trailer > * { position:relative; }
.trailer .play { width:80px; height:80px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; padding-left:6px; }
.trailer small { color:#ccc; font-size:13px; max-width:420px; padding:0 20px; font-weight:300; }
.trailer iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.quelle { font-size:14px; color:var(--leise); font-weight:300; }
.zurueck { display:inline-block; margin-top:60px; font-weight:600; font-size:15px; }
.zurueck:hover { color:var(--leise); }

/* ── Aktuelles ──────────────────────────────────────────────────── */
/* wie ein Abspann: eine Zeile je Beitrag, Bild und Text nebeneinander, das Bild
   abwechselnd links und rechts; jede Zeile fährt beim Hereinscrollen von unten ein */
.beitraege { display:flex; flex-direction:column; gap:clamp(56px, 9vw, 120px); }
.beitrag-karte { display:grid; grid-template-columns:minmax(0, 11fr) minmax(0, 9fr); gap:clamp(18px, 4.5vw, 64px); align-items:center; }
.beitrag-karte:nth-child(even) .bild { order:2; }
.beitrag-karte:nth-child(even) .text-teil { text-align:right; }
.beitrag-karte.ohne-bild { grid-template-columns:1fr; max-width:60%; }
.beitrag-karte.ohne-bild:nth-child(even) { margin-left:auto; }
.js .beitrag-karte { opacity:0; transform:translateY(60px); filter:blur(4px); transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.1s ease; }
.js .beitrag-karte.da { opacity:1; transform:none; filter:none; }
.beitrag-karte .bild { aspect-ratio:4/3; overflow:hidden; background:#111; }
.beitrag-karte .bild img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.beitrag-karte:hover .bild img { transform:scale(1.04); }
.beitrag-karte .datum { font-size:14px; color:var(--leise); font-weight:300; }
.beitrag-karte h2 { color:#fff; font-weight:700; font-size:24px; line-height:1.3; margin:4px 0 10px; }
.beitrag-karte p { font-size:16px; }

/* ── Formulare (Newsletter, Kontakt) ───────────────────────────── */
.formular input[type=email], .formular input[type=text], .formular textarea { width:100%; background:#111; border:1px solid #333; color:#fff; font:300 16px "Poppins",sans-serif; padding:13px 16px; outline:none; transition:border-color .2s; }
.formular input:focus, .formular textarea:focus { border-color:#fff; }
.formular label { display:block; color:#ccc; font-size:14px; font-weight:400; margin-bottom:16px; }
.formular label input, .formular label textarea { margin-top:6px; }
.formular .raster { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.formular .haken { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text); font-weight:300; }
.formular .haken input { width:18px; height:18px; margin-top:3px; accent-color:#fff; flex:none; }
.formular .honig { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.formular .klein { font-size:13px; color:var(--leise); margin-top:10px; font-weight:300; }
.formular .meldung { margin-top:12px; font-size:15px; color:#fff; min-height:1.4em; }
.formular .meldung.fehler { color:#ff8a80; }
.formular button[disabled] { opacity:.5; cursor:default; }
.nl-formular .zeile { display:flex; gap:16px; align-items:center; }
.nl-formular .zeile input { flex:1; }
.formular-titel { color:#fff; font-weight:700; font-size:clamp(24px, 3vw, 32px); margin:0 0 18px; }

/* Kontakt & Newsletter: ruhige Abschnitte, durch eine feine Linie getrennt */
.abschnitt { border-top:1px solid rgba(255,255,255,.12); margin-top:64px; padding-top:48px; scroll-margin-top:90px; }
.abschnitt-text { font-weight:300; margin:-6px 0 20px; }
.kalender-knoepfe { display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; margin-bottom:6px; }
.adresse { color:#ccc; word-break:break-all; user-select:all; }

/* Abschluss: nur „Zum Anfang ↑“ */
.ende { text-align:center; padding:10px var(--rand) 70px; }
.nach-oben { font-weight:600; font-size:14px; letter-spacing:.04em; color:#fff; opacity:.75; transition:opacity .2s; }
.nach-oben:hover { opacity:1; }

/* Menüleiste großer Bildschirme (statt Hamburger) */
.leiste { display:none; }
@media (min-width:1260px) {
  .leiste { display:flex; align-items:center; gap:clamp(20px, 2.2vw, 34px); }
  .leiste a { color:#fff; font-weight:600; font-size:14.5px; letter-spacing:.04em; position:relative; padding:6px 0; transition:color .2s; }
  .leiste a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .leiste a:hover::after, .leiste a.aktiv::after { transform:scaleX(1); }
  .leiste a.personal { font-weight:300; color:var(--text); }
  .leiste a.personal::after { display:none; }
  .leiste a.personal:hover { color:#fff; }
  .menue-knopf, .menue { display:none; }
}

@media (max-width:820px) {
  body { font-size:16.5px; }
  .kopf { padding:20px var(--rand); }
  .kopf .logo img { height:26px; }
  .menue-knopf .text { display:none; }
  .film, .film-kopf { grid-template-columns:1fr; gap:24px; }
  .film .cover { max-width:340px; }
  .film-kopf .poster { max-width:380px; }
  .inhalt { padding-top:60px; }
  .archiv a { flex-direction:column; gap:2px; }
  .nl-formular .zeile { flex-direction:column; align-items:stretch; }
  .formular .raster { grid-template-columns:1fr; }
  .beitrag-karte h2 { font-size:19px; }
  .beitrag-karte p { font-size:14.5px; }
}
@media (max-width:560px) {
  /* auch auf dem Handy nebeneinander: dann ohne Textauszug */
  .beitrag-karte { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .beitrag-karte .bild { aspect-ratio:3/4; }
  .beitrag-karte h2 { font-size:17px; }
  .beitrag-karte p { display:none; }
  .beitrag-karte.ohne-bild { grid-template-columns:1fr; max-width:none; }
}
@media (prefers-reduced-motion:reduce) {
  /* der Abspann der Startseite ist Gestaltungsprinzip und bleibt (siehe site.js) */
  body:not(.startseite) *, body:not(.startseite) *::before, body:not(.startseite) *::after { animation:none !important; transition:none !important; }
  .hero h1 .bs { opacity:1; transform:none; }
  .js .beitrag-karte { opacity:1; transform:none; filter:none; }
}