/* ==========================================================================
   bt-medienproduktion — Design system
   ========================================================================== */

:root {
	--header-h: 186px;
	color-scheme: light;

	/* Brand palette — confident teal */
	--c-accent: #00b5b5;
	--c-accent-soft: rgba(0, 181, 181, 0.14);
	--c-accent-strong: #008686;
	--c-accent-deep: #005959;

	/* Warm secondary accents that play with teal */
	--c-warm: #ff8d3a;
	--c-coral: #e85d4d;

	--c-ink: #14232b;
	--c-ink-soft: #3d4f5a;
	--c-muted: #717a82;
	--c-line: #e4e6e8;
	--c-bg: #ffffff;
	--c-bg-alt: #f4f7f7;
	--c-bg-warm: #fbf6ee;
	--c-bg-mint: #e9f6f5;

	/* Surfaces that must not simply follow --c-ink when the theme flips.
	   The footer is a dark slab in both themes; text on a teal fill needs a
	   contrast partner (white fails on the brightened dark teal). */
	--c-footer-bg: var(--c-ink);
	--c-on-accent: #fff;
	--c-btn-ghost-fg: var(--c-accent-strong);
	--c-expired-bg: #fbeceb;

	/* Film grain. Off on light — over white it reads as dirt rather than as
	   emulsion. Raise to ~0.02 if you want the texture here too. */
	--grain-opacity: 0;

	/* Hover glow, tinted by the film's own colour. Restrained on light, where
	   a strong colour wash around a cover looks like a rendering error. */
	--glow-ring: 26%;
	--glow-tint: 12%;

	/* Film-themed accent colours (used for tags / film page highlights) */
	--film-zuck: #830f02;
	--film-essenheim: #5a4632;
	--film-frauvater: #2074a5;
	--film-june: #e9bb59;
	--film-deutsch: #ff6c04;
	--film-emine: #d9a614;
	--film-purpur: #663366;
	--film-kadir: #2a2a2a;
	--film-teppich: #c93b3f;
	--film-katharina: #0404c4;
	--film-farben: #c06020;

	/* Typography — original site font (Verdana) for body and display alike */
	--font-sans: Verdana, Arial, Helvetica, sans-serif;
	--font-display: Verdana, Arial, Helvetica, sans-serif;

	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 0.9375rem;
	--fs-md: 1.0625rem;
	--fs-lg: 1.25rem;
	--fs-xl: 1.625rem;
	--fs-2xl: 2.125rem;
	--fs-3xl: 2.75rem;

	--lh-tight: 1.2;
	--lh-normal: 1.55;
	--lh-loose: 1.75;

	/* Spacing scale — tightened to sit closer to the original dense layout */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.625rem;
	--sp-4: 0.875rem;
	--sp-5: 1.125rem;
	--sp-6: 1.5rem;
	--sp-7: 2rem;
	--sp-8: 2.75rem;
	--sp-9: 4rem;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

	--container-max: 1180px;
	--container-pad: clamp(1rem, 4vw, 2.5rem);

	--transition-fast: 150ms ease;
	--transition: 250ms ease;
}

/* ==========================================================================
   Dark theme

   Two selectors carry the same declarations, and they cannot be merged: a
   media query cannot be combined with an attribute selector in one rule.

     1. @media (prefers-color-scheme: dark) — the default when the visitor has
        expressed no preference. `:not([data-theme="light"])` lets an explicit
        light choice override the OS.
     2. :root[data-theme="dark"] — an explicit dark choice, which must also
        win on a machine set to light.

   Keep the two blocks in sync. Notes on the values: --c-ink is now LIGHT, so
   it can never be used as a background; the film colours are lifted in
   luminance because the originals (kadir #2a2a2a, katharina #0404c4) vanish
   against the dark ground; and white on the brightened teal reaches only
   1.9:1, hence --c-on-accent.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--c-accent: #17c9c1;
		--c-accent-soft: rgba(23, 201, 193, 0.15);
		--c-accent-strong: #16b8b1;
		--c-accent-deep: #0d8b86;

		--c-ink: #eaefec;
		--c-ink-soft: #b7c4bf;
		--c-muted: #8a9994;
		--c-line: rgba(255, 255, 255, 0.12);
		--c-bg: #0e1719;
		--c-bg-alt: #16211f;
		--c-bg-warm: #1a2422;
		--c-bg-mint: #12302e;

		--c-footer-bg: #0a1011;
		--c-on-accent: #06100f;
		--c-btn-ghost-fg: var(--c-accent);
		--c-expired-bg: rgba(232, 93, 77, 0.12);

		--grain-opacity: 0.035;
		--glow-ring: 45%;
		--glow-tint: 22%;

		--film-zuck: #d9411f;
		--film-essenheim: #b58f66;
		--film-frauvater: #4aa8e0;
		--film-june: #e9bb59;
		--film-deutsch: #ff8c33;
		--film-emine: #e8b62a;
		--film-purpur: #b06fb0;
		--film-kadir: #b9c2c0;
		--film-teppich: #e35a5e;
		--film-katharina: #6b7bff;
		--film-farben: #e08a4a;

		/* Low-alpha shadows vanish against #0e1719 */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
		--shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--c-accent: #17c9c1;
	--c-accent-soft: rgba(23, 201, 193, 0.15);
	--c-accent-strong: #16b8b1;
	--c-accent-deep: #0d8b86;

	--c-ink: #eaefec;
	--c-ink-soft: #b7c4bf;
	--c-muted: #8a9994;
	--c-line: rgba(255, 255, 255, 0.12);
	--c-bg: #0e1719;
	--c-bg-alt: #16211f;
	--c-bg-warm: #1a2422;
	--c-bg-mint: #12302e;

	--c-footer-bg: #0a1011;
	--c-on-accent: #06100f;
	--c-btn-ghost-fg: var(--c-accent);
	--c-expired-bg: rgba(232, 93, 77, 0.12);

	--grain-opacity: 0.035;
	--glow-ring: 45%;
	--glow-tint: 22%;

	--film-zuck: #d9411f;
	--film-essenheim: #b58f66;
	--film-frauvater: #4aa8e0;
	--film-june: #e9bb59;
	--film-deutsch: #ff8c33;
	--film-emine: #e8b62a;
	--film-purpur: #b06fb0;
	--film-kadir: #b9c2c0;
	--film-teppich: #e35a5e;
	--film-katharina: #6b7bff;
	--film-farben: #e08a4a;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--c-ink);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--c-accent-strong);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

button {
	font: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	line-height: 1.08;
	margin: 0 0 var(--sp-4);
	color: var(--c-ink);
	font-weight: 600;
	letter-spacing: normal;
}

h1 {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
}
h2 {
	font-size: clamp(1.3rem, 3vw, 1.75rem);
}
h3 {
	font-size: var(--fs-lg);
	letter-spacing: normal;
}
h4 {
	font-size: var(--fs-md);
}

p {
	margin: 0 0 var(--sp-4);
}

p:last-child {
	margin-bottom: 0;
}

hr {
	border: none;
	border-top: 1px solid var(--c-line);
	margin: var(--sp-6) 0;
}

::selection {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

/* Accessibility */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-accent);
	color: var(--c-on-accent);
	border-radius: var(--radius-sm);
}
.skip-link:focus {
	left: var(--sp-4);
	top: var(--sp-4);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

main {
	min-height: 50vh;
}

section {
	padding-block: var(--sp-4);
}

@media (min-width: 768px) {
	section {
		padding-block: var(--sp-5);
	}
}

.section--warm {
	background: var(--c-bg-warm);
}

.section--mint {
	background: var(--c-bg-mint);
}

.section--alt {
	background: var(--c-bg-alt);
}

/* ==========================================================================
   Header / Top banner ("balken")

   The balken_*.jpg / .gif images already contain the bt logo and the
   "barbara trottnow medienproduktion" wordmark. They sit inside a brand
   teal stripe that runs full-width — the image stays compact and the
   teal extends to the viewport edges so the banner area reads as one
   continuous, intentional band.

   Per page, the surrounding stripe colour can be overridden via the
   --banner-bg custom property (set inline on the .banner element).
   ========================================================================== */

/* The coloured stripe closes the whole header — it runs *below* the menu bar,
   not between the banner image and the nav. `--banner-stripe` is therefore set
   inline on .site-header (custom properties only inherit downwards).
   Note: the balken_*.jpg/gif images carry their own baked-in colour bar in
   their bottom pixel rows; that one belongs to the image and stays put. */
/* --header-h is what the sticky header occupies; anything else that sticks has
   to clear it (see .order__summary). */
.site-header {
	--header-h: 186px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-bg);
	border-bottom: 4px solid var(--banner-stripe, var(--c-accent));
}

.banner {
	display: block;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--sp-3) var(--container-pad) 0;
	line-height: 0;
}

.banner__inner {
	display: block;
}

.banner__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 140px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: var(--sp-3);
}

/* Top utility row: nav + language */
/* Asymmetric on purpose. Above: nothing, so the menu sits close under the banner
   image instead of floating free of it - the links' own padding is gap enough.
   Below: room for the active link's underline, which hangs 2px past the link box
   and would otherwise bleed into the stripe on the header's bottom edge. */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: 0;
	padding-bottom: var(--sp-3);
}

/* ==========================================================================
   Primary navigation
   ========================================================================== */

.nav {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

.nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--sp-5);
}

.nav__link {
	color: var(--c-ink-soft);
	font-weight: 600;
	font-size: var(--fs-sm);
	letter-spacing: 0.01em;
	padding: var(--sp-2) 0;
	position: relative;
}

.nav__link:hover {
	color: var(--c-accent-strong);
	text-decoration: none;
}

.nav__link[aria-current="page"] {
	color: var(--c-accent-strong);
}

.nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--c-accent);
}

/* Language switcher */
.lang {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
}

.lang__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 28px;
	padding-inline: 6px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	border: 1px solid var(--c-line);
	background: var(--c-bg);
}

.lang__link:hover {
	color: var(--c-accent-strong);
	border-color: var(--c-accent);
	text-decoration: none;
}

.lang__link[aria-current="true"] {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

/* Mobile menu */
.nav__toggle {
	display: none;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 0;
	color: var(--c-ink);
}

.nav__toggle svg {
	width: 22px;
	height: 22px;
	margin: auto;
}

@media (max-width: 768px) {
	.nav__toggle {
		display: grid;
		place-items: center;
	}

	.nav__list {
		position: fixed;
		inset: 0 0 0 30%;
		background: var(--c-bg);
		flex-direction: column;
		padding: var(--sp-7) var(--sp-5);
		gap: var(--sp-4);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform var(--transition);
		z-index: 100;
	}

	.nav__list[data-open="true"] {
		transform: translateX(0);
	}

	.nav__link {
		font-size: var(--fs-md);
	}
}

/* ==========================================================================
   Hero (home)
   ========================================================================== */

.hero {
	padding-block: var(--sp-4) var(--sp-5);
}

.hero__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 768px) {
	.hero__grid {
		grid-template-columns: 1fr 0.85fr;
		gap: var(--sp-8);
	}
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent-strong);
	margin-bottom: var(--sp-3);
}

.hero__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--c-accent);
	display: inline-block;
}

/* Capped at 2.125rem so "Farben so bunt wie die Natur" holds one line: the text
   column stops growing at 571px (container max-width), and 34.5px is the largest
   size that still fits it. */
.hero__title {
	font-size: clamp(1.75rem, 4.2vw, 2.125rem);
	margin-bottom: var(--sp-3);
	letter-spacing: normal;
	line-height: 1.08;
}

/* Large text (>=28px, 600 weight), so the 3:1 bar applies — madder clears it
   on both the light and the dark ground. */
.hero__title em {
	font-style: normal;
	color: var(--story-accent, var(--c-accent-strong));
}

/* No measure cap here: the lead runs the full width of the headline above it,
   so the two share a right edge. */
.hero__lead {
	font-size: var(--fs-base);
	color: var(--c-ink-soft);
	margin-bottom: var(--sp-4);
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

/* One row per film in the series: title as a small pill, then a one-line
   summary. The pills keep their natural width, but the column is max-content -
   as wide as the longest title - so the summaries still line up. Below 560px
   the summary drops under its pill instead of being squeezed. */
.hero__films {
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.hero__films li {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--sp-3);
	align-items: baseline;
}

.hero__films .btn {
	justify-self: start;
	padding: 5px 14px;
	font-size: var(--fs-xs);
	border-width: 1px;
}

.hero__film-desc {
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--c-ink-soft);
}

@media (max-width: 560px) {
	.hero__films li {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* Photo-led hero. `--story-accent` is set inline on .hero, mirroring the
   --film-color idiom, so a future front story brings its own colour. */
/* Narrower rather than cropped: at 320px the 2:3 frame is ~480px tall, close
   enough to the text column that centring no longer leaves dead gaps — and the
   photograph keeps its full frame (the 4:5 crop cut the base off the cauldron). */
/* The hero photo is the landscape cinema shot, so the frame takes the image's
   own ratio rather than cropping it into the 2:3 portrait the Färberin used. */
.hero__figure {
	margin: 0;
	max-width: 560px;
	margin-inline: auto;
}

.hero__figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	transition: transform var(--transition);
}

.hero__figure:hover img {
	transform: translateY(-3px);
}

.hero__caption {
	margin-top: var(--sp-3);
	padding-left: var(--sp-3);
	border-left: 2px solid var(--story-accent, var(--c-accent));
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-muted);
}

/* The DVD cover keeps a place, demoted below the buttons. flex-basis:100%
   forces it onto its own line inside the wrapping .hero__actions, so it reads
   as a deliberate footnote rather than a thumbnail floating beside a button. */
/* Whole catalogue at a glance: every cover in one row, left to right. The DVD
   artwork carries each title, so the strip needs no captions - the title rides
   in the alt text. Covers vary in ratio (Kaptan June is tall), so a fixed 5:7
   frame keeps the row even.

   A grid rather than a flex row: it never scrolls sideways. The column counts
   are divisors of 12 (the catalogue size) so the covers always wrap into full
   rows - auto-fit would leave orphans, e.g. 11 + 1 at ~1024px. */
.cover-strip {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1080px) {
	.cover-strip { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 640px) {
	.cover-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 380px) {
	.cover-strip { grid-template-columns: repeat(3, 1fr); }
}

.cover-strip__item img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}

.cover-strip__item a {
	display: block;
	border-radius: var(--radius-sm);
}

.cover-strip__item a:hover img {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.hero__chip {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0;
	flex-basis: 100%;
	max-width: 360px;
	margin-top: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

/* Both DVD covers sit together, so the chip reads as one release, not two. */
.hero__chip-covers {
	display: flex;
	gap: var(--sp-2);
	flex-shrink: 0;
}

.hero__chip img {
	width: 52px;
	height: auto;
	border-radius: 2px;
	box-shadow: var(--shadow-sm);
}

.hero__chip figcaption {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.hero__figure img { transition: none; }
	.hero__figure:hover img { transform: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 12px 22px;
	font-size: var(--fs-sm);
	font-weight: 600;
	border-radius: 999px;
	border: 1.5px solid var(--c-accent);
	background: var(--c-accent);
	color: var(--c-on-accent);
	transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
	cursor: pointer;
	text-decoration: none;
	letter-spacing: 0.01em;
}

.btn:hover {
	background: var(--c-accent-strong);
	border-color: var(--c-accent-strong);
	color: var(--c-on-accent);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 134, 134, 0.25);
}

.btn--ghost {
	background: transparent;
	color: var(--c-btn-ghost-fg);
	border-color: var(--c-accent);
}

.btn--ghost:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
	border-color: var(--c-accent);
}

.btn--full {
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Film cards / grid
   ========================================================================== */

.section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-4);
	gap: var(--sp-4);
	flex-wrap: wrap;
}

/* Subline under a section heading, e.g. what the film catalogue actually is.
   No measure cap: it is one line of copy and reads better unbroken - there is
   room for it beside the button. */
.section-title__sub {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.section-title h2 {
	margin: 0;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	letter-spacing: normal;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.section-title h2::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-accent);
	flex: 0 0 auto;
}

.film-grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.film-card {
	background: transparent;
	border-radius: var(--radius-sm);
	overflow: visible;
	border: 0;
	transition: transform var(--transition);
	display: flex;
	flex-direction: column;
	--card-accent: var(--c-accent);
}

.film-card:hover {
	transform: translateY(-4px);
	text-decoration: none;
}

.film-card[data-film="farben-natur"]  { --card-accent: var(--film-farben); }
.film-card[data-film="purpur-neu"]    { --card-accent: var(--film-purpur); }
.film-card[data-film="frau-vater"]    { --card-accent: var(--film-frauvater); }
.film-card[data-film="visiting"]      { --card-accent: var(--film-essenheim); }
.film-card[data-film="zuck"]          { --card-accent: var(--film-zuck); }
.film-card[data-film="june"]          { --card-accent: var(--film-june); }
.film-card[data-film="deutsch"]       { --card-accent: var(--film-deutsch); }
.film-card[data-film="emine"]         { --card-accent: var(--film-emine); }
.film-card[data-film="purpur"]        { --card-accent: var(--film-purpur); }
.film-card[data-film="kadir"]         { --card-accent: var(--film-kadir); }
.film-card[data-film="teppich"]       { --card-accent: var(--film-teppich); }
.film-card[data-film="katharina"]     { --card-accent: var(--film-katharina); }

.film-card a {
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.film-card a:hover {
	text-decoration: none;
}

/* 5:7 matches the DVD artwork (429x600); every other cover sits within 0.679-0.730
   of it, so filling the frame crops only a few percent off an edge. */
.film-card__media {
	aspect-ratio: 5 / 7;
	background: var(--c-bg-warm);
	overflow: hidden;
	position: relative;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	margin-bottom: var(--sp-3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: box-shadow var(--transition), transform var(--transition);
}

.film-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--card-accent);
	transform: scaleX(0.15);
	transform-origin: left center;
	transition: transform 350ms ease;
}

.film-card:hover .film-card__media {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.film-card:hover .film-card__media::after {
	transform: scaleX(1);
}

/* Fill the frame rather than fit inside it. With width:auto the eight older
   covers (186px wide in the source, against 429px for the DVDs) rendered at
   their native size and never grew to the card, so the grid showed covers at
   two different sizes. */
/* Pinned to the frame rather than sized with height:100% - the parent's height
   comes from aspect-ratio, which a percentage height does not resolve against,
   so the image fell back to its natural ratio. */
.film-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.film-card:hover .film-card__media img {
	transform: scale(1.04);
}

.film-card__body {
	padding: 0 var(--sp-1);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.film-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 600;
	margin: 0;
	color: var(--c-ink);
	line-height: 1.15;
	letter-spacing: normal;
}

/* The subtitle sits inside the title, not under it - it is part of the title.
   Kept a touch lighter so the film's name still leads. */
.film-card__sep,
.stream-card__sep {
	color: var(--c-muted);
	font-weight: 400;
}

.film-card__sub,
.stream-card__sub {
	font-weight: 400;
	color: var(--c-ink-soft);
}

.film-card__meta {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin: 0;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.film-card__meta::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--card-accent);
	flex: 0 0 auto;
}

.film-card__desc {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	margin: var(--sp-1) 0 0;
	line-height: 1.5;
}

/* ==========================================================================
   Film detail page
   ========================================================================== */

.film {
	padding-block: var(--sp-7);
}

.film__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

@media (min-width: 900px) {
	.film__grid {
		grid-template-columns: 280px 1fr;
		gap: var(--sp-7);
	}
}

.film__aside {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.film__cover {
	width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	background: var(--c-bg-warm);
	display: grid;
	place-items: center;
	margin: 0;
}

.film__cover img {
	width: 100%;
	max-width: 280px;
	height: auto;
	display: block;
	object-fit: contain;
}

.film__meta {
	background: var(--c-bg-alt);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.film__meta dt {
	font-weight: 600;
	color: var(--c-ink);
	margin-top: var(--sp-3);
}

.film__meta dt:first-child {
	margin-top: 0;
}

.film__meta dd {
	margin: 0;
}

.film__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.film__main h1 {
	margin-bottom: var(--sp-4);
	line-height: 1.1;
}

.film__main h1 .film__title-rest {
	display: inline;
	font-size: 0.55em;
	font-weight: 400;
	color: var(--c-ink-soft);
	letter-spacing: normal;
	margin-left: 0.4em;
	white-space: normal;
}

/* Subtitle standing on its own line under the h1 (films with `subtitle_below`),
   like the sub-line on the Farben page — not part of the title, no separator. */
.film__subtitle {
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	font-weight: 500;
	color: var(--c-ink-soft);
	margin: calc(var(--sp-2) * -1) 0 var(--sp-5);
}

.film__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-ink);
	margin-bottom: var(--sp-5);
	font-weight: 500;
}

.film__body p {
	margin-bottom: var(--sp-4);
	color: var(--c-ink-soft);
}

.film__body a {
	color: var(--c-accent-strong);
	font-weight: 500;
}

/* Inline images that float beside the running text — mirrors the original
   per-page layouts where images flanked the prose. Stack on mobile.
   Shared by the film pages and the Über-uns prose. */
.film__body .figure-right,
.film__body .figure-left,
.bio__body .figure-right,
.bio__body .figure-left {
	margin: 0 0 var(--sp-4);
	max-width: 100%;
}

.film__body .figure-right img,
.film__body .figure-left img,
.film__body .figure-full img,
.bio__body .figure-right img,
.bio__body .figure-left img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.film__body .figure-full {
	clear: both;
	margin: var(--sp-4) 0;
}

@media (min-width: 700px) {
	.film__body .figure-right,
	.bio__body .figure-right {
		float: right;
		clear: both;
		width: 38%;
		margin: 0 0 var(--sp-4) var(--sp-5);
	}

	.film__body .figure-left,
	.bio__body .figure-left {
		float: left;
		clear: both;
		width: 38%;
		margin: 0 var(--sp-5) var(--sp-4) 0;
	}

	/* Half-column variant for images that should lead their passage. */
	.film__body .figure-right.figure--wide,
	.film__body .figure-left.figure--wide {
		width: 50%;
	}

	/* A touch narrower than the default float, for denser image sets. */
	.film__body .figure-right.figure--small,
	.film__body .figure-left.figure--small {
		width: 30%;
	}

	/* Quarter-column: a small inline figure that the text flows generously around. */
	.film__body .figure-right.figure--quarter,
	.film__body .figure-left.figure--quarter {
		width: 25%;
	}

	/* Two-thirds column: a dominant figure that leaves only a narrow text gutter. */
	.film__body .figure-right.figure--twothirds,
	.film__body .figure-left.figure--twothirds {
		width: 66.6667%;
	}

	/* On a series page each image belongs to one film's paragraph. Left at full
	   height the first image overhangs its text and pushes the second one past
	   its own paragraph, so paired figures are capped to roughly the height of
	   the prose beside them. */
	.film__body .figure--paired img {
		max-height: 300px;
		object-fit: cover;
	}
}

.film__body::after,
.bio__body::after {
	content: "";
	display: block;
	clear: both;
}

.bio__body figcaption,
.bio__photo figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
	color: var(--c-muted);
}

/* Image gallery within film article */
.gallery {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	margin: var(--sp-6) 0;
}

.gallery__item {
	cursor: zoom-in;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--c-bg-alt);
	transition: transform var(--transition);
	border: 0;
	padding: 0;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform var(--transition);
}

.gallery__item:hover img {
	transform: scale(1.05);
}

/* Epilogue — a labelled closing note set apart from the running text, kin to
   the sponsor strip below it. */
.epilog {
	background: var(--c-bg-alt);
	padding: var(--sp-5);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	margin-top: var(--sp-6);
	border-left: 3px solid var(--c-accent);
}

.epilog__title {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	margin: 0 0 var(--sp-2);
}

.epilog p {
	margin: 0;
}

/* Sponsor strip */
.sponsor {
	background: var(--c-bg-alt);
	padding: var(--sp-5);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	margin-top: var(--sp-6);
	border-left: 3px solid var(--c-accent);
}

/* ==========================================================================
   News list (home page)
   ========================================================================== */

.news-list {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.news-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* DVD showcase — bigger covers, panel layout used in the Naturfarben section */
.showcase {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.showcase {
		grid-template-columns: 1fr 1fr;
	}
}

.showcase__item {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--sp-4);
	align-items: stretch;
	padding: var(--sp-4);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	transition: transform var(--transition), box-shadow var(--transition);
	position: relative;
	overflow: hidden;
}

.showcase__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--c-accent);
}

.showcase__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(20, 35, 43, 0.10);
}

.showcase__cover {
	background: var(--c-bg-warm);
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 2 / 3;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

.showcase__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.showcase__item:hover .showcase__cover img {
	transform: scale(1.04);
}

.showcase__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	justify-content: center;
}

.showcase__label {
	display: inline-flex;
	align-self: flex-start;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-on-accent);
	background: var(--c-accent-strong);
	padding: 3px 10px;
	border-radius: 999px;
}

.showcase__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 600;
	margin: 0;
	letter-spacing: normal;
	line-height: 1.1;
}

.showcase__meta {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.showcase__desc {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	margin: 0;
	line-height: 1.5;
}

.news {
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	position: relative;
	font-size: var(--fs-sm);
}

.news p {
	margin-bottom: var(--sp-3);
}

.news:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 35, 43, 0.08);
	border-color: var(--c-accent);
}

.news--accent {
	background: var(--c-bg-mint);
	border-color: var(--c-accent);
}

.news__label {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--sp-3);
	padding: 4px 10px;
	background: var(--c-bg-alt);
	border-radius: 999px;
}

.news--accent .news__label {
	color: var(--c-on-accent);
	background: var(--c-accent-strong);
}

.news h3 {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-md);
	letter-spacing: normal;
}

.news__label {
	margin-bottom: var(--sp-2);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 200;
	padding: var(--sp-5);
}

.lightbox[data-open="true"] {
	display: flex;
}

.lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	box-shadow: var(--shadow-lg);
}

.lightbox__close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.5rem;
}

.lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Order form
   ========================================================================== */

/* Catalogue on the left, a running summary that follows you down the page on
   the right. Below ~950px the summary drops underneath the catalogue. */
.order__layout {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	margin-bottom: var(--sp-7);
}

@media (min-width: 950px) {
	.order__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
}

/* Licence notice on the order page: the DVDs sold here cover private use only. */
.order-notice {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--radius-sm);
	background: var(--c-bg-alt);
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-ink-soft);
	max-width: 70ch;
}

.order-notice strong {
	color: var(--c-ink);
}

.order-group {
	margin-bottom: var(--sp-7);
}

.order-group__title {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	padding-bottom: var(--sp-2);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-line);
}

.order-group__note {
	font-size: var(--fs-sm);
	color: var(--c-muted);
	margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
}

.order-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.order-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

.order-item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: var(--sp-2) var(--sp-4);
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.order-item:hover {
	border-color: var(--c-accent);
}

.order-item.is-selected {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 1px var(--c-accent), var(--shadow-md);
}

/* align-self:start stops the cover from stretching to the card's full height —
   otherwise the box keeps its background below the image and reads as a gap. */
.order-item__cover {
	grid-row: 1 / span 2;
	align-self: start;
	width: 72px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-bg-warm);
	box-shadow: var(--shadow-md);
}

.order-item__cover img {
	display: block;
	width: 100%;
	height: auto;
}

.order-item__main {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
}

/* Name, separator and subtitle read as one line; the NEU badge is the other
   flex item beside it. */
.order-item__name {
	min-width: 0;
}

.order-item__sep,
.order-item__sub {
	font-weight: 400;
	color: var(--c-ink-soft);
}

.order-item__title {
	font-weight: 600;
	margin: 0;
	font-size: var(--fs-sm);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.order-item__badge {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--c-accent);
	color: #fff;
}

.order-item__lang {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin: 0;
}

.order-item__price {
	font-weight: 700;
	color: var(--c-accent-strong);
	font-size: var(--fs-md);
	margin: 0;
}

.order-item__request {
	font-weight: 500;
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* Quantity stepper */
.qty {
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--c-bg);
}

.qty__btn {
	width: 2rem;
	border: 0;
	background: var(--c-bg-alt);
	color: var(--c-ink);
	font-size: var(--fs-md);
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.qty__btn:hover:not(:disabled) {
	background: var(--c-accent);
	color: #fff;
}

.qty__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.qty__input {
	width: 2.75rem;
	padding: var(--sp-2) 0;
	border: 0;
	border-inline: 1px solid var(--c-line);
	background: var(--c-bg);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Order summary */
.order__summary {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-bg-alt);
	padding: var(--sp-5);
	transition: border-color var(--transition-fast);
}

.order__summary.is-active {
	border-color: var(--c-accent);
}

@media (min-width: 950px) {
	.order__summary {
		position: sticky;
		/* Clear the sticky header, or the panel slides under it and is cut off. */
		top: calc(var(--header-h) + var(--sp-5));
		max-height: calc(100vh - var(--header-h) - var(--sp-5) * 2);
		overflow-y: auto;
	}
}

.order__summary-title {
	font-size: var(--fs-md);
	margin: 0 0 var(--sp-4);
}

.summary__lines {
	list-style: none;
	margin: 0 0 var(--sp-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.summary__empty {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.summary__line {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
}

.summary__line-title {
	color: var(--c-ink-soft);
}

.summary__line-amount {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}

.summary__totals {
	margin: 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.summary__row dt,
.summary__row dd {
	margin: 0;
}

.summary__row dd {
	font-variant-numeric: tabular-nums;
}

.summary__row--total {
	padding-top: var(--sp-2);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--c-ink);
}

.summary__row--total dd {
	color: var(--c-accent-strong);
}

.summary__note {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
	line-height: var(--lh-loose);
}

.form__title {
	font-size: var(--fs-md);
	margin: 0 0 var(--sp-4);
}

.form__field--wide {
	grid-column: 1 / -1;
}

.form {
	background: var(--c-bg-alt);
	padding: var(--sp-5);
	border-radius: var(--radius-md);
}

.form__row {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
	margin-bottom: var(--sp-4);
}

@media (min-width: 600px) {
	.form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.form__field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.form__field label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
}

.form__field input,
.form__field textarea {
	font: inherit;
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	transition: border-color var(--transition-fast);
}

.form__field input:focus,
.form__field textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.form__notice {
	font-size: var(--fs-sm);
	color: var(--c-muted);
	margin-bottom: var(--sp-5);
}

/* Rent page: shown while the (optional) email field is empty — the anonymous
   rental loses its access link when the window closes. Amber in both themes. */
.form__notice--warn {
	color: #cf8a1d;
}

.form__actions {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--c-footer-bg);
	color: rgba(255, 255, 255, 0.7);
	padding-block: var(--sp-6);
	margin-top: var(--sp-7);
	font-size: var(--fs-sm);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
	color: var(--c-accent);
}

.footer__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 980px) {
	.footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	}
}

.footer__brand {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #fff;
	margin-bottom: var(--sp-2);
	letter-spacing: 0.01em;
}

.footer__copy {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.4);
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
	justify-content: space-between;
}

.footer__legal {
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.footer__nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	font-size: var(--fs-xs);
}

.footer__heading {
	font-weight: 600;
	color: #fff;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Press / Material page
   ========================================================================== */

.press-section {
	margin-bottom: var(--sp-7);
}

.press-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.press-item {
	text-align: center;
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
}

.press-item img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--c-bg-alt);
	padding: var(--sp-2);
	border-radius: var(--radius-sm);
	border: 1px solid var(--c-line);
	margin-bottom: var(--sp-2);
	transition: transform var(--transition);
}

.press-item:hover img {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.press-item__label {
	font-weight: 600;
	color: var(--c-ink);
	display: block;
}

/* ==========================================================================
   About / Internal page
   ========================================================================== */

/* The portrait used to anchor a 240px grid column, which left a tall empty
   gutter running down the page beside the text. It now floats into the prose
   like the production stills, so the column of text is continuous. */
.bio {
	display: block;
}

.bio::after {
	content: "";
	display: block;
	clear: both;
}

.bio__photo {
	margin: 0 0 var(--sp-5);
}

.bio__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

@media (min-width: 700px) {
	.bio__photo {
		float: left;
		width: 240px;
		margin: 0 var(--sp-6) var(--sp-4) 0;
	}
}

.bio__body p {
	color: var(--c-ink-soft);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
}

/* "On set" — the stills that don't fit beside the prose */
.onset {
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.onset__title,
.funders__title {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	margin: 0 0 var(--sp-4);
}

.onset__grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.onset__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.onset__item {
	margin: 0;
}

.onset__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.onset__item figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
	color: var(--c-muted);
}

.onset__item .figure__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.onset__item .figure__zoom img {
	transition: transform var(--transition);
}

.onset__item .figure__zoom:hover img {
	transform: scale(1.03);
}

/* Funders / broadcasters logo bar from the old site. The artwork is a JPEG on
   white, so it sits on its own light card — otherwise it burns a white hole in
   the dark theme. */
.funders {
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.funders__logos {
	display: block;
	max-width: 420px;
	width: 100%;
	height: auto;
	padding: var(--sp-4);
	border-radius: var(--radius-md);
	background: #fff;
}

.filmography {
	margin-top: var(--sp-7);
	border-top: 1px solid var(--c-line);
	padding-top: var(--sp-5);
}

.filmography__item {
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--c-line);
	display: grid;
	gap: var(--sp-2);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.filmography__item {
		grid-template-columns: 80px 1fr;
		gap: var(--sp-5);
	}
}

.filmography__year {
	font-weight: 700;
	color: var(--c-accent-strong);
	font-variant-numeric: tabular-nums;
}

/* Subtitle rides in the title, in a normal weight - as on the film pages. */
.filmography__sep,
.filmography__sub {
	font-weight: 400;
	color: var(--c-ink-soft);
}

.filmography__title {
	font-weight: 600;
	color: var(--c-ink);
}

.filmography__desc {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	margin-top: var(--sp-1);
}

/* ==========================================================================
   Imprint
   ========================================================================== */

.imprint {
	padding-block: var(--sp-7);
}

.imprint__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	margin-top: var(--sp-6);
	align-items: start;
}

@media (min-width: 800px) {
	.imprint__grid {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--sp-7);
	}
}

.imprint__card {
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-bg-alt);
}

/* The h2s used the global display size and had no top margin, so each one ran
   straight into the paragraph above it. Section labels, not headlines. */
.imprint__card-title,
.imprint__section h2 {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	margin: 0 0 var(--sp-4);
}

.imprint address {
	font-style: normal;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-ink);
}

.imprint__contact {
	margin: var(--sp-4) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
}

.imprint__contact dt {
	color: var(--c-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.imprint__contact dd {
	margin: 0;
}

.imprint__section + .imprint__section {
	margin-top: var(--sp-6);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.imprint__section p {
	margin: 0;
	color: var(--c-ink-soft);
	line-height: var(--lh-loose);
}

.imprint__actions {
	margin-top: var(--sp-6);
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center {
	text-align: center;
}

.mt-0 {
	margin-top: 0;
}
.mt-5 {
	margin-top: var(--sp-5);
}

.lead {
	font-size: var(--fs-md);
	color: var(--c-ink-soft);
	max-width: 65ch;
}

.tag {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--c-accent-soft);
	color: var(--c-accent-strong);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   VoD — rent panel (film page), checkout & watch pages
   ========================================================================== */

.rent-panel {
	background: var(--c-bg-mint);
	border: 1px solid var(--c-accent);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	margin-bottom: var(--sp-2);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	align-items: flex-start;
}

/* A series page gives each film its own section: title, prose and its own still,
   side by side. Floats could not hold this - a tall image overhangs its
   paragraph and shunts the next film out of line. */
.film__part {
	display: grid;
	gap: var(--sp-5);
	align-items: start;
	margin-bottom: var(--sp-6);
}

/* Every still gets the same 2:3 frame, so the two films line up at the same
   height. `contain` means nothing is ever cropped - a still that is not 2:3
   simply sits within the frame. The frame's height sets the height of the
   section, and the prose beside it is written to run about as long. */
.film__part-figure {
	margin: 0;
	aspect-ratio: 2 / 3;
}

.film__part-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.film__part-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-md);
	line-height: 1.2;
	color: var(--film-color, var(--c-accent-strong));
}

.film__part-body p {
	margin: 0;
}

.film__part-note {
	clear: both;
	margin: var(--sp-5) 0 0;
}

@media (min-width: 700px) {
	/* Prose takes the wide column, the still the narrow one. The figure comes
	   first in the markup, so `order` puts it on the correct side. */
	.film__part--media-right {
		grid-template-columns: 1fr 38%;
	}

	.film__part--media-right .film__part-figure {
		order: 2;
	}

	/* Stills alternate sides down the page. */
	.film__part--media-left {
		grid-template-columns: 38% 1fr;
	}
}

/* A series shows one panel per film, so each panel names which film it rents. */
.rent-panel__film {
	margin: var(--sp-2) 0 0;
	font-weight: 700;
	font-size: var(--fs-sm);
	line-height: 1.25;
}

.rent-panel__label {
	display: inline-flex;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-on-accent);
	background: var(--c-accent-strong);
	padding: 3px 10px;
	border-radius: 999px;
}

.rent-panel__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
}

.rent-panel__price strong {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--c-ink);
	line-height: 1;
}

.rent-panel__price span {
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.rent-panel__note {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

/* Checkout (rent.html) */
.checkout {
	max-width: 640px;
	margin-inline: auto;
	padding-block: var(--sp-6);
}

.checkout__card {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--sp-4);
	align-items: start;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	background: var(--c-bg);
	margin-bottom: var(--sp-5);
}

.checkout__cover {
	background: var(--c-bg-warm);
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 2 / 3;
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-sm);
}

.checkout__cover img { width: 100%; height: 100%; object-fit: contain; }

.checkout__terms {
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.checkout__terms li::before { content: "✓ "; color: var(--c-accent-strong); font-weight: 700; }

.checkout__price {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	color: var(--c-ink);
	line-height: 1;
	margin: var(--sp-3) 0 0;
}

.pay-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.pay-badge {
	font-size: var(--fs-xs);
	font-weight: 600;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 4px 9px;
	color: var(--c-ink-soft);
	background: var(--c-bg-alt);
}

.checkout__trust {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	text-align: center;
	margin-top: var(--sp-4);
}

/* Watch (watch.html) */
.watch {
	max-width: 980px;
	margin-inline: auto;
	padding-block: var(--sp-5);
}

.rental-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
	background: var(--c-bg-mint);
	border: 1px solid var(--c-accent);
	border-radius: var(--radius-md);
	padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.rental-bar__count { font-weight: 700; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
.rental-bar--expired { background: var(--c-expired-bg); border-color: var(--c-coral); }
.rental-bar--expired .rental-bar__count { color: var(--c-coral); }

.player-shell {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 16 / 9;
}

.player-shell media-player,
.player-shell .player-embed,
.player-shell video { width: 100%; height: 100%; display: block; }

.player-shell .player-embed { border: 0; }

.watch__title { margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.watch__note { font-size: var(--fs-sm); color: var(--c-muted); }

/* Woven figures: zoomable button wrapper inside floated figures */
.film__body .figure__zoom,
.bio__body .figure__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.film__body .figure__zoom img,
.bio__body .figure__zoom img {
	transition: transform var(--transition);
}

.film__body .figure__zoom:hover img,
.bio__body .figure__zoom:hover img {
	transform: scale(1.03);
}

/* --- Story card covers ---------------------------------------------------
   .showcase__cover sets aspect-ratio 2/3, but the item's align-items:stretch
   also gives it a definite height — so the width was being computed FROM the
   ratio (256 * 2/3 = 171px) and overflowed its 110px grid track, sliding under
   the body text. Let the track own the width instead. */
.showcase__cover {
	aspect-ratio: auto;
	width: 100%;
	min-width: 0;
	height: 100%;
}

/* A 110px-wide slice of a photograph is a poor crop; stack the card instead. */
@media (max-width: 560px) {
	.showcase__item {
		grid-template-columns: 1fr;
	}

	.showcase__cover {
		align-self: start;
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/* Text is flush left, so the photo goes flush right — centred in its column it
   stopped short of the container edge and read as an accident. Must come after
   the .hero__figure base rule, which sets margin-inline:auto (source order). */
@media (min-width: 768px) {
	.hero__figure {
		margin-inline: auto 0;
	}
}

/* ==========================================================================
   Topbar end — language switcher + theme toggle
   ========================================================================== */

.topbar__end {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

/* The icon shown is the theme you would switch *to*, so the moon reads
   "go dark". aria-pressed is written by the toggle script, which means the
   icon follows the real theme whether it came from the OS or from storage. */
.theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	color: var(--c-ink-soft);
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
	color: var(--c-accent-strong);
	border-color: var(--c-accent);
}

.theme-toggle svg {
	width: 16px;
	height: 16px;
}

.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
.theme-toggle[aria-pressed="true"] .theme-toggle__sun { display: block; }
.theme-toggle[aria-pressed="true"] .theme-toggle__moon { display: none; }

/* ==========================================================================
   Section rule — separates the blocks on the home page
   ========================================================================== */

.section-rule {
	max-width: var(--container-max);
	margin: var(--sp-4) auto;
	padding-inline: var(--container-pad);
	border: 0;
	border-top: 1px solid var(--c-line);
}

/* ==========================================================================
   Page head — title + lead on interior pages
   ========================================================================== */

/* No measure cap: the intro runs the full width of the container, like the
   heading above it. Used only by the three stream pages. */
.page-head {
	max-width: none;
}

.page-head__lead {
	font-size: var(--fs-md);
	color: var(--c-ink-soft);
	line-height: var(--lh-loose);
}

/* ==========================================================================
   Release band — the two Naturfarben DVDs, clamped as one series

   A single "NEU" band runs across both covers so they read as one release
   rather than two unrelated cards.
   ========================================================================== */

.release {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-bg-alt);
	margin-bottom: var(--sp-8);
}

/* Centred, not baseline-aligned: the flag is a pill and the note is a smaller
   size, so matching their text baselines left all three visibly off-centre
   against each other. */
.release__band {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	padding: var(--sp-4) var(--sp-6);
	background: var(--release-accent, var(--c-accent));
	color: var(--c-on-accent);
}

.release__flag {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--c-on-accent);
	color: var(--release-accent, var(--c-accent));
}

.release__title {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-tight);
}

.release__note {
	margin: 0;
	margin-left: auto;
	font-size: var(--fs-sm);
	opacity: 0.85;
}

.release__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-6);
	padding: var(--sp-6);
}

.release__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--sp-5);
	align-items: start;
	color: inherit;
}

.release__item:hover { text-decoration: none; }

.release__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

.release__name {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-md);
	line-height: var(--lh-tight);
}

.release__item:hover .release__name { color: var(--c-accent-strong); }

.release__meta {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.release__desc {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

/* Closing row of the release card: points at the Naturfarben project site. */
.release__more {
	margin: 0;
	padding: var(--sp-4) var(--sp-6);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.release__more a {
	white-space: nowrap;
	font-weight: 600;
	color: var(--release-accent, var(--c-accent));
}

.release__more a::after {
	content: " →";
}

@media (max-width: 768px) {
	.release__grid { grid-template-columns: 1fr; }
	.release__note { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 480px) {
	.release__item { grid-template-columns: 90px 1fr; gap: var(--sp-4); }
}

/* ==========================================================================
   Stream page
   ========================================================================== */

.stream-count {
	margin-top: var(--sp-4);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent-strong);
}

.stream-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: var(--sp-6);
}

.stream-card {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: var(--sp-5);
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	box-shadow: var(--shadow-sm);
}

/* A fixed track width plus height:auto — never aspect-ratio on a stretched
   grid item, which would compute its width from the ratio and overflow. */
.stream-card__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.stream-card__badge {
	display: inline-block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-strong);
}

.stream-card__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-md);
	line-height: var(--lh-tight);
}

.stream-card__title a { color: inherit; }

.stream-card__meta {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.stream-card__desc {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.stream-card__price {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-md);
}

.stream-card__price span {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

/* A series tile lists its films separately, each with its own price and rent
   button, because each one rents on its own. */
.stream-parts {
	list-style: none;
	margin: 0 0 var(--sp-2);
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.stream-part {
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: var(--c-bg-alt);
}

.stream-part__title {
	margin: 0;
	font-weight: 700;
	font-size: var(--fs-sm);
}

.stream-part__meta {
	margin: 2px 0 var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
}

.stream-part__price {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-base);
}

.stream-part__price span {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.stream-card__note {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.stream-foot {
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

@media (max-width: 620px) {
	.stream-grid { grid-template-columns: 1fr; }
	.stream-card { grid-template-columns: 110px 1fr; gap: var(--sp-4); }
}

/* ==========================================================================
   Trailer — self-hosted, never an embed from Vimeo or YouTube
   ========================================================================== */

.trailer {
	margin: var(--sp-6) 0;
}

.trailer__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	background: #000;
	box-shadow: var(--shadow-md);
}

.trailer__caption {
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

/* ==========================================================================
   Streaming promo — home page
   ========================================================================== */

.stream-promo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-5);
	padding: var(--sp-6) var(--sp-7);
	border-radius: var(--radius-lg);
	background: var(--c-bg-mint);
	border: 1px solid var(--c-line);
}

.stream-promo__label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent-strong);
}

.stream-promo__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xl);
	line-height: var(--lh-tight);
}

.stream-promo__text {
	margin: 0;
	max-width: 56ch;
	color: var(--c-ink-soft);
}

.stream-promo__actions {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

/* ==========================================================================
   Cinematic layer

   Ported from the standalone `cinematic/` build. Everything here is driven by
   theme tokens rather than duplicated per theme, so the same rules serve light
   and dark: the grain fades to nothing on light (--grain-opacity: 0) and the
   hover glow is tuned down (--glow-ring / --glow-tint).
   ========================================================================== */

/* --- Film grain -----------------------------------------------------------
   A single fixed, non-interactive overlay. Sits above page content but below
   the sticky header (50), mobile nav (100) and lightbox (200). */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	opacity: var(--grain-opacity);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
	body::after { display: none; }
}

/* --- Hover glow, tinted by the film's own colour --------------------------
   Replaces the flat black drop shadow: each cover lifts in its own hue. */
.film-card:hover .film-card__media {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent) var(--glow-ring), transparent),
	            0 12px 36px color-mix(in srgb, var(--card-accent) var(--glow-tint), transparent);
}

.film__cover {
	transition: box-shadow var(--transition);
}

.film__cover:hover {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) var(--glow-ring), transparent),
	            0 10px 34px color-mix(in srgb, var(--c-accent) var(--glow-tint), transparent);
}

/* --- Per-film colour on film pages ----------------------------------------
   `--film-color` is set inline on <body class="page--film">, mirroring the
   --story-accent idiom on the home page hero.

   Every mix blends toward --c-ink rather than toward a fixed white or black,
   so the same declaration darkens the film colour on light and lightens it on
   dark — no second rule set. */
.page--film .tag {
	background: color-mix(in srgb, var(--film-color) 18%, transparent);
	color: color-mix(in srgb, var(--film-color) 80%, var(--c-ink));
	border: 1px solid color-mix(in srgb, var(--film-color) 35%, transparent);
}

/* Tint band behind the title, fading out to the right. The band's top padding
   would otherwise run under the .tag badge sitting directly above it, so the
   badge gets a bottom margin to clear it. */
.page--film .film__main .tag {
	margin-bottom: var(--sp-2);
}

.page--film .film__main h1 {
	position: relative;
	padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
	margin-left: calc(var(--sp-4) * -1);
	border-left: 3px solid var(--film-color);
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--film-color) 14%, transparent) 0%,
		transparent 70%
	);
}

.page--film .film__title-sep {
	color: var(--film-color);
}

/* Nothing after the hyphen is bold: the film's name leads, the subtitle follows
   in a normal weight. */
.film__title-sep,
.film__title-sub {
	font-weight: 400;
}

.page--film .film__meta {
	border-left: 3px solid color-mix(in srgb, var(--film-color) 55%, transparent);
}

.page--film .film__meta dt {
	color: color-mix(in srgb, var(--film-color) 60%, var(--c-ink));
}

.page--film .film__cover:hover {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--film-color) var(--glow-ring), transparent),
	            0 12px 40px color-mix(in srgb, var(--film-color) var(--glow-tint), transparent);
}

.page--film .rental-bar__count {
	color: var(--film-color);
}

/* Fallback for engines without color-mix(): plain film colour, still legible. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.page--film .tag {
		background: transparent;
		color: var(--film-color);
		border-color: var(--film-color);
	}
	.page--film .film__main h1 { background: none; }
	.page--film .film__meta dt { color: var(--c-ink); }
}

/* --- Numbered filmography ------------------------------------------------- */
.filmography {
	counter-reset: film-n;
}

.filmography__item {
	counter-increment: film-n;
	position: relative;
	padding-left: 3.25rem;
}

/* position:absolute keeps this out of the item's grid flow. */
.filmography__item::before {
	content: counter(film-n, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: var(--sp-4);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1;
	color: var(--c-line);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	transition: color var(--transition-fast);
}

.filmography__item:hover::before {
	color: var(--c-accent);
}

.filmography__year {
	letter-spacing: 0.02em;
}

/* --- Visible focus ring, both themes -------------------------------------- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Home page: tighter line spacing
   The client asked for a more compact front page. Scoped to .page--home so
   the long-form reading pages keep the roomier defaults.
   ========================================================================== */
.page--home {
	--lh-normal: 1.45;
	--lh-loose: 1.55;
}

.page--home .hero__lead {
	line-height: 1.45;
	margin-bottom: var(--sp-3);
}

.page--home .news p {
	line-height: 1.45;
	margin-bottom: var(--sp-2);
}

.page--home .stream-promo__text {
	line-height: 1.45;
}