/* ============================================================
   Naturfarben — static site styles
   Faithful to the original: ONE bright, fixed full-page wool
   background (P1012226) kept vivid; text sits on a semi-transparent
   dark panel for readability (as the original does); olive-green
   header/footer bands; film sections = text + image carousel.
   System fonts (GDPR-clean).
   ============================================================ */

:root {
	--olive:#586528; --olive-deep:#475120;
	--accent:#e08043; --accent-deep:#c2652a; --accent-link:#f3c892;
	--aubergine:#b86fac;

	--ink:#f6f0e6; --ink-soft:rgba(246,240,230,.9); --ink-dim:rgba(246,240,230,.68);
	--panel:rgba(22,17,11,.58);          /* content panel behind text */
	--panel-line:rgba(255,255,255,.12);
	--inner:rgba(0,0,0,.26);             /* order / stream boxes inside the panel */
	--inner-line:rgba(255,255,255,.18);
	--card:#fffdf9;

	--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--font-display:var(--font-sans);   /* sans-serif everywhere */
	--fw-body:500;                     /* slightly bolder body text for readability */

	--fs-sm:.9rem; --fs-base:1.02rem; --fs-md:1.1rem; --fs-lg:1.3rem;
	--fs-xl:1.65rem; --fs-2xl:2.1rem; --fs-3xl:2.9rem;

	--sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
	--radius:12px; --radius-lg:18px;
	--maxw:1120px;
	--shadow:0 10px 30px rgba(0,0,0,.3);
	--shadow-lg:0 20px 55px rgba(0,0,0,.45);
	--tr:.2s ease;
	--tshadow:0 1px 10px rgba(0,0,0,.6);
}
body[data-accent="purple"]{ --accent:#c279b6; --accent-deep:#9a5490; --accent-link:#e7b7df; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
	margin:0; font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.66;
	color:var(--ink);
	background:#2b271f;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh;
}
/* per-page backgrounds, kept bright (as the original) — each page its own */
body[data-bg="home"]{ background:linear-gradient(90deg,#924f0a 0%,#3c0c50 100%) fixed; }
body[data-bg="wool"]{ background:#2b271f url("../img/hero.jpg") left top / cover no-repeat fixed; }
body[data-bg="purpur"]{ background:#3a2440 url("../img/purpur_bg.jpg") center center / cover no-repeat fixed; }
/* content panel tuned per background (darker on wool, lighter on purpur) */
body[data-bg="wool"] .page-wrap{ background:rgba(0,0,0,.56); }
body[data-bg="purpur"] .page-wrap{ background:rgba(0,0,0,.34); }
/* home has no panel — text floats on the gradient, with a soft shadow */
body[data-bg="home"] .prose p, body[data-bg="home"] .lead p, body[data-bg="home"] .film-line{ text-shadow:var(--tshadow); }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-link); text-underline-offset:2px; }
a:hover{ color:#fff; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.18; color:#fff; letter-spacing:-.01em; }
p{ margin:0 0 var(--sp-4); }
/* bolder, well-spaced body copy for readability on the busy backgrounds */
.lead, .lead p, .prose p, .film__text p, .film-line, .cta-note, .imprint p, .funders__label{ font-weight:var(--fw-body); }
.lead, .lead p, .prose p, .film__text p{ line-height:1.7; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); }
.skip-link{ position:absolute; left:-999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:.6rem 1rem; }
.skip-link:focus{ left:0; }

/* ---------- content panel (the "background behind the text") ---------- */
.page-wrap{
	max-width:1080px; margin:var(--sp-6) auto var(--sp-8); padding:var(--sp-7) var(--sp-7);
	background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--radius-lg);
	box-shadow:var(--shadow-lg);
}
.block{ margin-bottom:var(--sp-6); }
.block:last-child{ margin-bottom:0; }
@media (max-width:760px){ .page-wrap{ margin:var(--sp-4) var(--sp-3) var(--sp-6); padding:var(--sp-5) var(--sp-4); } }
/* home: content sits directly on the gradient in a centred column */
.home-main{ max-width:1080px; margin:0 auto; padding:0 var(--sp-5) var(--sp-8); }
.home-block{ margin-top:var(--sp-7); }

/* ---------- header / footer bands (olive) ---------- */
.site-head{ position:sticky; top:0; z-index:40;
	background:color-mix(in srgb, var(--olive) 94%, transparent);
	backdrop-filter:saturate(130%) blur(8px); border-bottom:1px solid rgba(0,0,0,.25); }
.site-head__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5);
	display:flex; align-items:center; gap:var(--sp-5); min-height:60px; }
.brand{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#fff;
	text-decoration:none; white-space:nowrap; text-shadow:var(--tshadow); }
.brand b{ color:#f3d9a7; font-weight:700; }
.brand__tag{ font-size:var(--fs-sm); font-weight:600; color:rgba(255,255,255,.82); white-space:nowrap;
	padding-left:var(--sp-4); border-left:1px solid rgba(255,255,255,.32); }
@media (max-width:820px){ .brand__tag{ display:none; } }
.nav{ margin-left:auto; }
.nav__list{ list-style:none; display:flex; gap:var(--sp-5); margin:0; padding:0; }
.nav__link{ color:rgba(255,255,255,.88); text-decoration:none; font-size:var(--fs-sm); font-weight:600;
	padding:.35rem 0; border-bottom:2px solid transparent; transition:var(--tr); white-space:nowrap; }
.nav__link:hover{ color:#fff; }
.nav__link[aria-current="page"]{ color:#fff; border-bottom-color:#f3d9a7; }
.lang{ display:flex; gap:.4rem; align-items:center; font-size:var(--fs-sm); }
.lang__link{ color:rgba(255,255,255,.7); text-decoration:none; font-weight:700; padding:.15rem .35rem; border-radius:5px; }
.lang__link[aria-current="true"]{ color:#3a3a1e; background:#f3d9a7; }
.lang__sep{ color:rgba(255,255,255,.4); }
.nav__toggle{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; color:#fff; padding:.4rem; }
.nav__toggle svg{ width:26px; height:26px; }
@media (max-width:760px){
	.nav__toggle{ display:inline-flex; }
	.nav{ position:fixed; inset:60px 0 auto 0; margin:0; background:var(--olive-deep);
		transform:translateY(calc(-100% - 72px)); transition:transform .25s ease; box-shadow:var(--shadow); pointer-events:none; }
	.nav[data-open="true"]{ transform:translateY(0); pointer-events:auto; }
	.nav__list{ flex-direction:column; gap:0; padding:var(--sp-3) var(--sp-5); }
	.nav__link{ padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.14); width:100%; }
	.nav__link[aria-current="page"]{ border-bottom-color:rgba(255,255,255,.14); }
}
.site-foot{ background:var(--olive); color:rgba(255,255,255,.9); padding:var(--sp-5) 0; }
.site-foot__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5);
	display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); align-items:center; justify-content:space-between; }
.site-foot a{ color:#fff; text-decoration:none; } .site-foot a:hover{ text-decoration:underline; }
.foot__nav{ display:flex; gap:var(--sp-5); flex-wrap:wrap; font-size:var(--fs-sm); margin:0; align-items:center; }
.foot__copy{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); margin:0; }

/* ---------- hero (home) — title on the bright wool, above the panel ---------- */
.hero{ text-align:center; padding:var(--sp-8) var(--sp-5) var(--sp-6); }
.hero__title{ font-size:clamp(2rem,5vw,var(--fs-3xl)); margin:0 0 .5rem; color:#fff; text-shadow:var(--tshadow); }
.hero__sub{ font-family:var(--font-sans); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.35rem);
	margin:0; color:#fff; text-shadow:var(--tshadow); }

/* ---------- page / section titles ---------- */
.page-head__title{ font-size:clamp(1.8rem,4.5vw,var(--fs-2xl)); margin:0 0 var(--sp-6); color:#fff;
	letter-spacing:.02em; text-transform:uppercase; text-align:center; }
.sec-title{ font-size:var(--fs-xl); margin:0 0 var(--sp-5); text-align:center; color:#fff; }
.sec-title::after{ content:""; display:block; width:56px; height:3px; border-radius:2px; background:var(--accent); margin:var(--sp-3) auto 0; }

/* ---------- prose (left-aligned, as the original) ---------- */
.prose, .lead{ color:var(--ink); }
.prose p, .lead p{ color:var(--ink); }
.lead{ font-size:var(--fs-md); }
.lead--spaced p{ margin-bottom:var(--sp-5); }

/* ---------- trailer ---------- */
.trailer{ max-width:860px; margin:0 auto; }
.trailer__frame{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#000; aspect-ratio:16/9; }
.trailer__frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.trailer__cap{ text-align:center; color:var(--ink-dim); font-size:var(--fs-sm); margin-top:var(--sp-3); }

/* ---------- film subsection: text + carousel side by side ---------- */
.film{ margin-bottom:var(--sp-7); }
.film:last-child{ margin-bottom:0; }
/* headline (film title) + subtitle (section heading) sit inside the text column, above the text */
.film__head{ margin:0 0 var(--sp-4); }
.film__title{ font-size:var(--fs-lg); margin:0; color:#fff; line-height:1.15; }
.film__subtitle{ margin:var(--sp-1) 0 0; color:var(--accent); font-weight:700;
	font-size:var(--fs-sm); letter-spacing:.02em; }
.film__grid{ display:grid; gap:var(--sp-5); align-items:start; }
.film__text p{ color:var(--ink); margin-bottom:var(--sp-4); }
.film__text p:last-child{ margin-bottom:0; }
/* side-by-side from tablet up: the headline + text block defines the height and the
   gallery scales to fill it exactly (image taken out of flow so it never adds height) */
@media (min-width:800px){
	.film__grid{ grid-template-columns:1.05fr .95fr; align-items:stretch; }
	.film__text{ font-size:1.1rem; align-self:start; }
	.film__text p{ line-height:1.8; }
	.film__grid .carousel{ position:relative; height:100%; min-height:380px; }
	.film__grid .carousel__viewport{ position:absolute; inset:0; height:auto; }
	.film__grid .carousel__track{ height:100%; }
	.film__grid .carousel__slide{ height:100%; display:flex; }
	.film__grid .carousel__slide img{ aspect-ratio:auto; min-height:0; width:100%; height:100%;
		object-fit:cover; object-position:center 32%; }
	.film__grid .carousel__dots{ position:absolute; left:0; right:0; bottom:10px; margin:0; z-index:2; }
	/* flipped film: carousel on the left, text on the right (DOM order stays text→carousel) */
	.film__grid.film--flip{ grid-template-columns:.95fr 1.05fr; }
	.film__grid.film--flip > .film__text{ grid-column:2; }
	.film__grid.film--flip > .carousel{ grid-column:1; grid-row:1; }
}

/* ---------- carousel ---------- */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); background:#15110b; }
.carousel__track{ display:flex; transition:transform .5s ease; }
.carousel__slide{ margin:0; min-width:100%; }
.carousel__slide img{ width:100%; aspect-ratio:2/3; object-fit:cover; cursor:zoom-in; display:block; }
.carousel__btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0;
	border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center; transition:var(--tr); }
.carousel__btn:hover{ background:rgba(0,0,0,.7); }
.carousel__prev{ left:10px; } .carousel__next{ right:10px; }
.carousel__dots{ display:flex; gap:7px; justify-content:center; margin-top:var(--sp-3); }
.carousel__dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
	background:rgba(255,255,255,.35); transition:var(--tr); }
.carousel__dot[aria-current="true"]{ background:var(--accent); }

/* ---------- covers (home) ---------- */
.covers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--sp-6); max-width:720px; margin:0 auto; }
.cover-card{ display:block; text-decoration:none; color:var(--ink); text-align:center; transition:var(--tr); }
.cover-card__img{ width:100%; max-width:300px; margin:0 auto var(--sp-4); border-radius:8px; box-shadow:var(--shadow); transition:transform var(--tr); }
.cover-card:hover .cover-card__img{ transform:translateY(-5px) scale(1.01); }
.film-line{ margin:0 0 var(--sp-2); font-size:var(--fs-sm); color:var(--ink); }
.film-line b{ color:#fff; font-weight:700; }
.cover-card__more{ margin:var(--sp-3) 0 0; font-weight:700; color:var(--accent-link); font-size:var(--fs-sm); }
.cover-card:hover .cover-card__more{ color:#fff; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans); font-weight:700;
	font-size:var(--fs-sm); text-decoration:none; cursor:pointer; padding:.75rem 1.4rem; border-radius:999px;
	border:2px solid transparent; transition:var(--tr); }
.btn--accent{ background:var(--accent); color:#3a2410; } .btn--accent:hover{ background:var(--accent-deep); color:#fff; transform:translateY(-2px); }
.btn--stream{ background:var(--accent-deep); color:#fff; } .btn--stream:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }
.btn--ghost{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); } .btn--ghost:hover{ background:#fff; color:var(--olive-deep); }
.btn--lg{ padding:1.05rem 2.4rem; font-size:1.12rem; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.btn__icon{ width:1.3em; height:1.3em; flex:none; }
.btn--lg:hover{ box-shadow:0 12px 28px rgba(0,0,0,.45); }

/* ---------- order / stream boxes (prominent CTAs) ---------- */
.panels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--sp-5); }
.order-card{ background:var(--inner); border:1.5px solid var(--inner-line); border-radius:var(--radius-lg);
	padding:var(--sp-6); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.order-card .cta-note{ margin:0; color:#fff; font-weight:600; font-size:var(--fs-md); }
.order-card--buy{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.order-card--stream{ border-color:color-mix(in srgb, var(--accent-deep) 60%, transparent); }

/* ---------- legal pages ---------- */
.legal{ max-width:760px; margin:0 auto; }
.legal__sec{ margin-bottom:var(--sp-6); }
.legal__sec:last-child{ margin-bottom:0; }
.legal h2{ font-size:var(--fs-lg); color:#fff; text-align:left; margin:0 0 var(--sp-3); }
.legal p{ color:var(--ink); font-weight:var(--fw-body); margin:0 0 var(--sp-3); line-height:1.65; }
.legal p:last-child{ margin-bottom:0; }
.legal ul{ margin:0 0 var(--sp-3); padding-left:var(--sp-5); color:var(--ink); font-weight:var(--fw-body); }
.legal li{ margin-bottom:var(--sp-2); line-height:1.6; }

/* ---------- funders ---------- */
.funders__label{ font-size:var(--fs-sm); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin:0 0 var(--sp-5); }
.funders__row{ display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:center; align-items:center; }
.funder{ background:var(--card); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow); }
.funder img{ max-height:64px; width:auto; }

/* ---------- impressum ---------- */
.imprint{ text-align:center; }
.imprint p{ margin-bottom:var(--sp-4); color:var(--ink); }
.imprint strong{ color:#fff; }

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; background:rgba(15,11,7,.92); padding:var(--sp-5); cursor:zoom-out; }
.lightbox[data-open="true"]{ display:flex; }
.lightbox img{ max-width:94vw; max-height:90vh; width:auto; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-lg); cursor:default; }
.lightbox__close{ position:absolute; top:var(--sp-4); right:var(--sp-5); background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; opacity:.85; } .lightbox__close:hover{ opacity:1; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:0; color:#fff; font-size:2rem; width:52px; height:52px; border-radius:50%; cursor:pointer; opacity:.85; } .lightbox__nav:hover{ opacity:1; background:rgba(0,0,0,.65); }
.lightbox__prev{ left:var(--sp-4); } .lightbox__next{ right:var(--sp-4); }
@media (max-width:760px){ .lightbox__nav{ width:44px; height:44px; font-size:1.6rem; } }

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto!important; transition:none!important; } }