/* partoutfilm – Stylesheet der öffentlichen Website */
/* Schriften lokal (SIL Open Font License) – keine Anfragen an Google */
@font-face{font-family:"PF Figtree";src:url("../fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"PF Newsreader";src:url("../fonts/newsreader-it.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --saal:#2a2a29;--marke:#626262;--leinwand:#f3f3f1;--papier:#fafaf9;--rauch:#a8a8a5;--licht:#e6e6e3;
  --sans:"PF Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"PF Newsreader",Georgia,"Times New Roman",serif;
  --rand:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--saal)}
.pf{
  font-family:var(--sans);font-size:1.125rem;line-height:1.6;font-weight:400;
  color:var(--saal);background:var(--papier);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.pf h1,.pf h2,.pf h3,.pf p,.pf dl,.pf dt,.pf dd{margin:0;padding:0}
.pf h1,.pf h2,.pf h3{font-family:var(--sans);color:inherit;line-height:1.1}
.pf a{color:inherit;text-decoration:none}
.pf a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.pf cite{font-style:italic}
.pf svg{display:block;width:100%;height:auto}
.pf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-wrap{width:100%;max-width:76rem;margin:0 auto;padding:0 var(--rand)}

/* Kinosaal: Kopf und Leinwand */
.pf-kopf,.pf-hero{background:var(--saal);color:var(--licht)}
.pf-kopf-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1.75rem;padding-bottom:1.75rem}
.pf .pf-logo{display:block;width:9.5rem;color:var(--licht)}
.pf-kopf nav{display:flex;gap:clamp(1rem,3vw,2.25rem);font-size:1rem}
.pf .pf-kopf nav a{color:var(--licht);padding:.25rem 0;text-underline-offset:.35em;text-decoration-thickness:1px}
.pf .pf-kopf nav a:hover{text-decoration:underline}
.pf-hero{padding-top:clamp(1.5rem,5vw,4rem);padding-bottom:clamp(4rem,9vw,7.5rem)}
.pf-leinwand{
  aspect-ratio:2.39/1;display:flex;align-items:flex-end;
  padding:clamp(1.5rem,4.5vw,3.75rem);
  background:var(--leinwand);color:var(--marke);
  box-shadow:0 3rem 9rem -3rem rgba(243,243,241,.22);
}
.pf .pf-leinwand h1{font-size:clamp(2rem,5.2vw,4.5rem);font-weight:620;letter-spacing:-.025em;line-height:1.04}
.pf-zeile{display:block;text-wrap:balance}
.pf .pf-lede{max-width:34rem;margin-top:clamp(2rem,4vw,3rem);color:var(--rauch)}

/* Leistungen */
.pf-leistungen{padding-top:clamp(4.5rem,10vw,8rem);padding-bottom:clamp(4rem,9vw,7rem)}
.pf .pf-leistungen h2{font-size:clamp(2rem,3.6vw,2.75rem);font-weight:620;letter-spacing:-.02em;margin-bottom:clamp(2rem,5vw,3.5rem)}
.pf-leistung{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem 4rem;padding:clamp(1.5rem,3vw,2.25rem) 0}
.pf .pf-leistung h3{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:560;letter-spacing:-.012em;line-height:1.2}
.pf .pf-leistung p{max-width:36rem}
.pf .pf-leistung p+p{margin-top:.9rem}

/* Abspann */
.pf-abspann{background:var(--saal);color:var(--licht);text-align:center;padding-top:clamp(5rem,11vw,9rem)}
.pf .pf-abspann h2{font-size:clamp(2rem,3.6vw,2.75rem);font-weight:620;letter-spacing:-.02em}
.pf .pf-intro{margin:1rem auto 0;max-width:30rem;color:var(--rauch);text-wrap:balance}
.pf .pf-credits{margin:clamp(3rem,7vw,5rem) auto 0;max-width:52rem}
.pf-credit{display:grid;grid-template-columns:1fr 1fr;column-gap:2.25rem;row-gap:0;text-align:left}
.pf-credit+.pf-credit{margin-top:clamp(2.25rem,5vw,3.25rem)}
.pf .pf-credit dt{grid-column:1;grid-row:1/span 20;text-align:right;color:var(--rauch);font-size:1rem;line-height:1.5;padding-top:.45rem}
.pf .pf-credit dd{grid-column:2;color:var(--licht)}
.pf .pf-credit cite{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.35}
.pf .pf-credit .pf-name{font-size:1.25rem;line-height:1.6}
.pf .pf-credit .pf-fuer{color:var(--rauch);font-size:1rem;margin-top:.35rem}

/* Endtitel und Kontakt */
.pf-ende{background:var(--saal);color:var(--licht);text-align:center;padding-top:clamp(7rem,16vw,12rem);padding-bottom:3rem}
.unterseite .pf-ende{padding-top:clamp(4rem,9vw,6rem)}
.pf-ende-logo{width:min(20rem,68vw);margin:0 auto;color:var(--licht)}
.pf .pf-ende-text{margin-top:clamp(3rem,7vw,4.5rem);color:var(--rauch)}
.pf .pf-mail{display:inline-block;margin-top:.6rem;font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--licht);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.pf .pf-mail:hover{text-decoration-thickness:2px}
.pf-recht{display:flex;justify-content:center;gap:2rem;margin-top:clamp(5rem,12vw,8rem);font-size:.9rem;color:var(--rauch)}
.pf .pf-recht a:hover{color:var(--licht)}

/* Unterseiten (Impressum, Datenschutz …) */
.pf-seite{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(4rem,9vw,7rem)}
.pf-artikel{max-width:42rem}
.pf .pf-seitentitel{font-size:clamp(2rem,4vw,3rem);font-weight:620;letter-spacing:-.02em;margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.pf-inhalt>*+*{margin-top:1.1rem}
.pf .pf-inhalt h2{font-size:1.6rem;font-weight:600;margin-top:2.5rem}
.pf .pf-inhalt h3{font-size:1.25rem;font-weight:600;margin-top:2rem}
.pf .pf-inhalt a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.pf .pf-inhalt ul,.pf .pf-inhalt ol{padding-left:1.25rem}
.pf .pf-inhalt img{max-width:100%;height:auto}

/* Einschalten der Leinwand – einmal beim Laden */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .pf-leinwand{animation:pf-projektor 1.5s linear both}
  .pf .pf-leinwand h1{animation:pf-titel .9s ease-out 1.05s both}
}
@keyframes pf-projektor{
  0%{background-color:#353534;box-shadow:none}
  9%{background-color:#d4d4d1}
  13%{background-color:#484847}
  21%{background-color:#ebebe8}
  25%{background-color:#c4c4c1}
  38%,100%{background-color:var(--leinwand);box-shadow:0 3rem 9rem -3rem rgba(243,243,241,.22)}
}
@keyframes pf-titel{from{opacity:0}to{opacity:1}}

@media (max-width:760px){
  .pf-leistung{grid-template-columns:1fr}
  .pf-leinwand{aspect-ratio:1.375/1}
}
@media (max-width:560px){
  .pf-kopf-inner{flex-direction:column;align-items:flex-start}
  .pf-credit{grid-template-columns:1fr;text-align:center}
  .pf .pf-credit dt{grid-column:1;grid-row:auto;text-align:center;padding-top:0;margin-bottom:.35rem}
  .pf .pf-credit dd{grid-column:1}
}