/* ============================================================
   CINEKIX® — cinekix.com · Thema „Einladung" (v4)
   Warm, hell, die Filme im Zentrum. CINEKIX als Gastgeber.
   Leinwand: warmes Tageslicht-Weiß. Tinte: warmes Schwarzbraun.
   Markenblau #323a66 für Wege (Links, Akzente),
   Gold #c9a23e sparsam als Licht auf dem Bild.
   Keine externen Ressourcen, keine Cookies, kein Tracking,
   kein JavaScript. Systemschriften: Georgia + Systemsans.
   ============================================================ */

/* ============================================================
   Lato — selbstgehostet, keine Google-Fonts-CDN-Anfrage,
   DSGVO-konform. Deckt lateinische Zeichen inkl. ä ö ü ß ab.
   ============================================================ */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --papier: #faf7f0;
  --tinte: #26241f;
  --blau: #323a66;
  --gold: #c9a23e;
  --grau: #6d6a61;
  --linie: #26241f;
  --linie-fein: rgba(38,36,31,0.18);
  --mass: 74rem;
  --display: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ui: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Darkmodus (15.08.2026) ----------
   Dieselben Markenfarben, invertiert und gegen WCAG AA geprüft
   (mind. 4,5:1 für Fließtext) — nicht nur optisch umgefärbt. */
:root[data-theme="dunkel"] {
  --papier: #1c1a17;
  --tinte: #eeeae2;
  --blau: #8891c7;
  --gold: #d9b869;
  --grau: #a8a49a;
  --linie: #eeeae2;
  --linie-fein: rgba(238,234,226,0.18);
}
:root[data-theme="dunkel"] { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blau); text-underline-offset: 3px; }
a:hover { color: var(--tinte); }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--tinte); color: var(--papier);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 0; color: var(--papier); }

.wrap { max-width: var(--mass); margin: 0 auto; padding: 0 1.4rem; }

/* ---------- Kopf ---------- */

header.site { border-bottom: 1px solid var(--linie); background: var(--papier); }
.kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap;
}
.marke {
  font-family: var(--display); font-size: 1.35rem;
  color: var(--tinte); text-decoration: none; letter-spacing: 0.01em;
}
.marke .r { color: #7a611f; font-size: 0.7em; vertical-align: super; } /* dunkleres Gold für ausreichenden Kontrast (WCAG AA) auf hellem Grund, 15.08.2026 */

nav.haupt { display: flex; align-items: center; gap: 1.6rem; }
nav.haupt ul { display: flex; gap: 1.4rem; list-style: none; flex-wrap: wrap; }
nav.haupt .nav-sekundaer { display: none; }
nav.haupt a {
  font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none; color: var(--tinte); padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
nav.haupt a:hover, nav.haupt a[aria-current="page"] {
  color: var(--blau); border-bottom-color: var(--blau);
}

/* ---------- Mobiles Menü: reiner CSS-Checkbox-Trick, kein JavaScript ---------- */

.menu-schalter { display: none; }
.menu-knopf { display: none; }

@media (max-width: 44rem) {
  .kopf { position: relative; }
  .menu-knopf {
    display: flex; flex-direction: column; gap: 0.32rem; justify-content: center;
    width: 2.2rem; height: 2.2rem; cursor: pointer; border: none; background: none;
  }
  .menu-knopf span { display: block; width: 100%; height: 2px; background: var(--tinte); transition: transform 0.2s ease, opacity 0.2s ease; }

  nav.haupt {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    z-index: 40;
  }
  nav.haupt ul { flex-direction: column; gap: 0; padding: 0.5rem 1.4rem 1.25rem; }
  nav.haupt li { border-top: 1px solid var(--linie-fein); }
  nav.haupt li:first-child { border-top: none; }
  nav.haupt a { display: block; padding: 0.85rem 0; }

  .menu-schalter:checked ~ nav.haupt { display: block; }
  .menu-schalter:checked ~ .menu-knopf span:nth-child(1) { transform: translateY(0.42rem) rotate(45deg); }
  .menu-schalter:checked ~ .menu-knopf span:nth-child(2) { opacity: 0; }
  .menu-schalter:checked ~ .menu-knopf span:nth-child(3) { transform: translateY(-0.42rem) rotate(-45deg); }
}

/* ---------- Filmbühne: das Bild zuerst ---------- */

.buehne { border-bottom: 1px solid var(--linie); }
.buehne figure { position: relative; overflow: hidden; min-height: 60svh; background: var(--tinte); }
.buehne img { width: 100%; aspect-ratio: 16 / 9; max-height: 78svh; object-fit: cover; }
.buehne figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.25rem, 4vw, 2.5rem) 1.4rem;
  background: linear-gradient(transparent, rgba(20,18,14,0.72));
  color: #faf7f0;
}
.buehne figcaption .innen { max-width: var(--mass); margin: 0 auto; }
.buehne .akt {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.22em;
  color: #e6c96f;
}
.buehne h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.02; margin-top: 0.4rem;
}
.buehne h2 a { color: #faf7f0; text-decoration: none; }
.buehne h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.buehne .meta { margin-top: 0.5rem; font-size: 0.98rem; color: rgba(250,247,240,0.85); }

/* ---------- Begrüßung ---------- */

.gruss { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.gruss h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.15; max-width: 24ch;
}
.gruss h2 em { font-style: italic; color: var(--blau); }
.gruss p { margin-top: 1.25rem; color: var(--grau); max-width: 54ch; }

/* ---------- Weitere Filme ---------- */

.weitere { border-bottom: 1px solid var(--linie); padding: clamp(2rem, 5vw, 3.5rem) 0; }
.weitere h2 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--blau); margin-bottom: 1.25rem;
}
.weitere ul { list-style: none; }
.weitere li {
  padding: 1rem 0; border-top: 1px solid var(--linie-fein);
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline;
}
.weitere li:last-child { border-bottom: 1px solid var(--linie-fein); }
.weitere .titel { font-family: var(--display); font-size: 1.35rem; }
.weitere .titel a { color: var(--tinte); text-decoration: none; }
.weitere .titel a:hover { color: var(--blau); }
.weitere .info { color: var(--grau); font-size: 0.95rem; }

/* ---------- Zuschauerlab-Satz ---------- */

.lab { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.lab p {
  font-family: var(--display); font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  line-height: 1.4; max-width: 40ch;
}
.lab p em { font-style: italic; color: var(--blau); }
.lab .mehr { margin-top: 1rem; font-family: var(--ui); font-size: 1rem; }

/* ---------- Leise Presse-Zeile ---------- */

.presse-leise { border-bottom: 1px solid var(--linie); padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.presse-leise p {
  font-family: var(--display); font-style: italic;
  color: var(--grau); font-size: 1rem; max-width: 70ch;
}

/* ---------- Kontakt ---------- */

.kontakt { padding: clamp(2.75rem, 7vw, 4.5rem) 0; }
.kontakt p.satz {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem); line-height: 1.25; max-width: 26ch;
}
.kontakt .wege {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap;
  gap: 0.5rem 2rem; font-size: 1rem; color: var(--grau);
}

/* ---------- Fuß ---------- */

footer.site {
  border-top: 1px solid var(--linie);
  padding: 1.5rem 0 2.5rem; font-size: 0.88rem; color: var(--grau);
}
footer.site .zeilen { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
footer.site a { color: var(--grau); }
footer.site a:hover { color: var(--tinte); }

/* ============================================================
   Unterseiten
   ============================================================ */

.schau-intro { padding: clamp(3rem, 8vw, 5.5rem) 0; border-bottom: 1px solid var(--linie); }
.schau-intro h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1.08; max-width: 20ch;
}
.schau-intro p { margin-top: 1.3rem; color: var(--grau); max-width: 56ch; }

.manifest { padding: clamp(2.5rem, 6vw, 4.25rem) 0; border-bottom: 1px solid var(--linie); }
.manifest h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 2.5rem); line-height: 1.15; max-width: 26ch;
}
.manifest p { margin-top: 1.1rem; max-width: 62ch; }
.manifest p.kern {
  font-family: var(--display); font-style: italic;
  font-size: 1.25rem; color: var(--blau);
}


.highlight { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4.25rem) 0; }
.highlight .eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--blau); }
.highlight h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.2rem); margin-top: 0.55rem; line-height: 1.08;
}
.highlight .meta { margin-top: 0.45rem; color: var(--grau); font-size: 0.95rem; }
.highlight .ergebnis { margin-top: 1.2rem; max-width: 60ch; }
.highlight blockquote {
  margin-top: 1.5rem; font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem); line-height: 1.4; max-width: 38ch;
  border-left: 3px solid var(--gold); padding-left: 1.2rem;
}
.highlight cite { display: block; margin-top: 0.5rem; font-family: var(--ui); font-style: normal; font-size: 0.9rem; color: var(--grau); }
.highlight .medien { margin-top: 1.5rem; font-family: var(--display); font-style: italic; color: var(--grau); font-size: 0.98rem; }


/* ---------- Formular ---------- */

.formular { max-width: 40rem; }
.formular .feld { margin-top: 1.5rem; }
.formular label {
  display: block; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 0.4rem; color: var(--grau);
}
.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
  width: 100%; border: 1px solid var(--linie);
  padding: 0.8rem 0.95rem; font-family: var(--ui); font-size: 1rem;
  background: #fff; color: var(--tinte); border-radius: 0;
}
.formular input:focus, .formular textarea:focus { border-color: var(--blau); }
.formular textarea { min-height: 9rem; resize: vertical; }
.formular .einwilligung { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; color: var(--grau); }
.formular .einwilligung input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }
.formular .pflicht { font-size: 0.85rem; color: var(--grau); margin-top: 0.75rem; }
.formular button {
  margin-top: 1.75rem; border: 1px solid var(--tinte);
  background: var(--tinte); color: var(--papier);
  font-family: var(--ui); font-size: 1rem;
  letter-spacing: 0.05em; padding: 0.9rem 2.2rem; cursor: pointer;
}
.formular button:hover { background: var(--blau); border-color: var(--blau); }

/* ---------- Rechtstexte ---------- */

.recht { padding: clamp(2.25rem, 6vw, 4rem) 0; }
.recht h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.8vw, 3.2rem); }
.recht h2 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin-top: 2.25rem; }
.recht p, .recht ul { margin-top: 0.8rem; max-width: 66ch; }
.recht ul { padding-left: 1.25rem; }
.recht .todo {
  border: 1px solid var(--linie-fein); border-left: 4px solid var(--gold);
  padding: 0.9rem 1.1rem; margin-top: 1.25rem;
  font-size: 0.95rem; color: var(--grau); max-width: 66ch;
}

/* ---------- Lösungen (System + Lab, prominent auf Startseite) ---------- */


/* ---------- Säulen (Filme / BoxKIx / Veedelskino, gleichrangig) ---------- */


/* ---------- Marken-Auftritte (BoxKIx, Veedelskino) ---------- */

.marken-hero {
  border-bottom: 1px solid var(--linie);
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.25rem, 6vw, 4rem);
}
.marken-hero .eyebrow {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--blau);
}
.marken-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; margin-top: 0.6rem; max-width: 14ch;
}
.marken-hero p.sub { margin-top: 1.3rem; color: var(--grau); max-width: 52ch; font-size: 1.05rem; }
.marken-hero .cta { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.marken-hero .knopf {
  display: inline-block; border: 1px solid var(--tinte);
  padding: 0.75rem 1.6rem; text-decoration: none; color: var(--tinte);
  font-size: 0.95rem; letter-spacing: 0.03em;
}
.marken-hero .knopf.aktiv { background: var(--tinte); color: var(--papier); }
.marken-hero .knopf:hover { background: var(--blau); color: var(--papier); border-color: var(--blau); }

.merkmale { border-bottom: 1px solid var(--linie); }
.merkmale .liste { display: grid; grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .merkmale .liste { grid-template-columns: 1fr 1fr; }
  .merkmale .punkt:nth-child(odd) { border-right: 1px solid var(--linie); }
}
.merkmale .punkt { padding: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--linie); }
.merkmale .punkt h2 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.merkmale .punkt p { margin-top: 0.7rem; color: var(--grau); font-size: 0.97rem; }

.hinweisbox {
  border: 1px solid var(--linie-fein); border-left: 4px solid var(--blau);
  padding: 1rem 1.25rem; margin: 0; max-width: 60ch; font-size: 0.95rem; color: var(--grau);
}


/* ---------- Haus-Struktur (arbeit.html) ---------- */

.haus { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4.25rem) 0; }
.haus h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; max-width: 18ch;
}
.haus p { margin-top: 1.1rem; color: var(--grau); max-width: 58ch; }

.bereiche .liste { display: grid; grid-template-columns: 1fr; }
@media (min-width: 54rem) {
  .bereiche .liste { grid-template-columns: 1fr 1fr 1fr; }
  .bereiche .bereich + .bereich { border-left: 1px solid var(--linie); }
}
.bereich { padding: clamp(2.25rem, 5vw, 3rem) 1.75rem; border-top: 1px solid var(--linie); }
@media (min-width: 54rem) { .bereich { border-top: none; } }
.bereich .marken-eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blau); }
.bereich h2 { font-family: var(--display); font-weight: 400; font-size: 1.55rem; margin-top: 0.5rem; }
.bereich > p { margin-top: 0.85rem; color: var(--grau); font-size: 0.97rem; }
.bereich ul { margin-top: 1.1rem; padding-left: 1.1rem; }
.bereich li { color: var(--grau); font-size: 0.93rem; margin-top: 0.3rem; }
.bereich .mehr { display: inline-block; margin-top: 1.1rem; color: var(--blau); font-size: 0.92rem; }

/* ---------- Team ---------- */

.person {
  border-top: 1px solid var(--linie);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  display: grid; grid-template-columns: 1fr; gap: 1.75rem;
}
@media (min-width: 48rem) {
  .person { grid-template-columns: 16rem 1fr; gap: 3rem; align-items: start; }
}
.person img { width: 100%; max-width: 100%; height: auto; border: 1px solid var(--linie); aspect-ratio: 1; object-fit: cover; }
.person h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; }
.person .gruesst { margin-top: 0.6rem; color: var(--grau); }
.person h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--blau); margin-top: 1.5rem;
}
.person dl { margin-top: 0.6rem; }
.person dt { font-weight: 600; margin-top: 0.7rem; }
.person dd { color: var(--grau); margin-top: 0.15rem; }
.person p.frei { margin-top: 0.7rem; color: var(--grau); }

/* ---------- Team-Aufmacherbild ---------- */

.team-bild { border-bottom: 1px solid var(--linie); }
.team-bild figure { max-width: 26rem; margin: 0 auto; padding: 2rem 1.4rem 0; }
.team-bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border: 1px solid var(--linie); }
.team-bild figcaption {
  padding: 0.9rem 0 2rem; font-size: 0.9rem; color: var(--grau);
  font-family: var(--display); font-style: italic; text-align: center;
}

/* ============================================================
   v5 — mehr Filmcharakter: größere Typo, Filmkorn auf den Bühnen,
   sanftes Aufblenden beim Scrollen (progressive enhancement).
   ============================================================ */

/* Filmkorn: sehr leichtes SVG-Rauschen über den Kinostills, gibt
   den Fotos Textur statt Hochglanz. Kein externes Bild, <1KB. */
.buehne figure::after {
  content: "";
  position: absolute; inset: -20px; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: kornflimmern 0.34s steps(3) infinite;
}
@keyframes kornflimmern {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-8px, 5px); }
  66% { transform: translate(6px, -7px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .buehne figure::after { animation: none; } }
.buehne figure { position: relative; overflow: hidden; min-height: 60svh; background: var(--tinte); }

/* Größere, kräftigere Filmtitel */
.buehne h2 { font-size: clamp(2.4rem, 7.5vw, 5.2rem); letter-spacing: -0.015em; }
.buehne .akt { letter-spacing: 0.28em; font-weight: 600; }
.buehne figcaption { background: linear-gradient(transparent 20%, rgba(20,18,14,0.82)); padding-top: clamp(3rem, 10vw, 6rem); }

/* Sanftes Aufblenden beim Scrollen — nur ein Hauch, kein Effekt-Theater.
   Fällt bei fehlendem Support/reduced-motion einfach weg, Inhalt steht sofort. */
@supports (animation-timeline: view()) {
  .buehne, .highlight, .person {
    animation: v5-auf linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@keyframes v5-auf {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .buehne, .highlight, .person { animation: none !important; }
}

/* Bühnen dichter aneinander, wie Filmrollen — kein Weißraum zwischen ihnen nötig */
.buehne + .buehne { border-top: none; }

/* Presse-Zitate: größer, mit Farbkante wie ein Filmriss */
.stimmen blockquote, .highlight blockquote {
  border-left: 4px solid var(--gold);
  padding-left: 1.4rem;
}

/* Eyebrow-Zeilen kräftiger, wie Vorspann-Kapitel */
.highlight .eyebrow, .bereich .marken-eyebrow {
  font-weight: 700;
}

/* ---------- Generisches Herobild (über CMS hochladbar) ---------- */

.seiten-hero-bild { border-bottom: 1px solid var(--linie); }
.seiten-hero-bild img {
  width: 100%; max-height: 56svh; object-fit: cover; display: block;
}

/* Sanftes Ausblenden der Herobilder beim Wegscrollen nach oben —
   reines CSS, keine Bibliothek. Fällt ohne Unterstützung oder bei
   Bewegungsempfindlichkeit einfach weg: Bild bleibt sichtbar und
   scrollt normal aus dem Bild, wie jeder andere Inhalt. */
@supports (animation-timeline: view()) {
  .seiten-hero-bild, .start-hero .bild-wrap {
    animation: hero-ausblenden ease-out both;
    animation-timeline: view();
    animation-range: exit 0% exit 90%;
  }
}
@keyframes hero-ausblenden {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .seiten-hero-bild, .start-hero .bild-wrap { animation: none !important; }
}

/* ---------- Kleiner Hinweistext unter Hero-CTAs ---------- */
.hero-hinweis { margin-top: 1rem; font-size: 0.9rem; color: var(--grau); }

/* ============================================================
   v6 — dezent mehr Kino: Filmkorn auf allen Herobildern, sanfte
   Vignette, breiterer sanfter Aufblende-Rhythmus, kleine
   Cue-Mark-Animation auf Links. Bewusst zurückhaltend gehalten.
   ============================================================ */

/* Filmkorn + leichte Vignette auf jedem Herobild, nicht nur den
   Filmbühnen — konsistentes "auf Film gedreht"-Gefühl site-weit. */
.seiten-hero-bild, .team-bild figure { position: relative; overflow: hidden; }

.seiten-hero-bild::after,
.team-bild figure::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.seiten-hero-bild::before,
.team-bild figure::before,
.buehne figure::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 8vw rgba(20,18,14,0.16);
}

/* Breiterer, sehr sanfter Aufblende-Rhythmus beim Scrollen —
   ergänzt die schon bestehenden Bühnen/Presse/Person-Animationen
   um die übrigen Content-Blöcke. Bleibt bei reduced-motion aus. */
@supports (animation-timeline: view()) {
  .manifest, .bereich, .punkt, .marken-hero, .haus, .schau-intro,
  .lab, .weitere li {
    animation: v5-auf linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .manifest, .bereich, .punkt, .marken-hero, .haus, .schau-intro,
  .lab, .weitere li {
    animation: none !important;
  }
}

/* Kleine "Cue-Mark"-Unterstreichung: zieht sich beim Hover ein,
   statt einfach nur die Farbe zu wechseln — dezente Filmschnitt-
   Anmutung (wie eine Einblendemarke), ohne aufdringlich zu sein. */
main a:not(.knopf):not(.marke):not(nav a):not(.zugang):not(.cta-knopf) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease, color 0.2s ease;
  padding-bottom: 1px;
}
main a:not(.knopf):not(.marke):not(nav a):not(.zugang):not(.cta-knopf):hover {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  main a:not(.knopf):not(.marke):not(nav a):not(.zugang):not(.cta-knopf) { transition: none; }
}

/* ---------- Beispiel-Karten (arbeit.php) ---------- */

.beispiele { border-bottom: 1px solid var(--linie); padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.beispiele h2 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blau); margin-bottom: 1.5rem;
}
.beispiele .zwei { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 44rem) { .beispiele .zwei { grid-template-columns: 1fr 1fr; } }
.beispiele .karte { border: 1px solid var(--linie-fein); padding: 1.5rem; }
.beispiele .karte .art { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grau); }
.beispiele .karte h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin-top: 0.4rem; }
.beispiele .karte p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--grau); }
.beispiele .karte a.mehr { display: inline-block; margin-top: 0.8rem; font-size: 0.92rem; }

/* ---------- Startseiten-Hero: Bild + Headline + CTA ---------- */

.start-hero { border-bottom: 1px solid var(--linie); position: relative; overflow: hidden; }
.start-hero .bild-wrap { position: relative; }
.start-hero img { width: 100%; max-height: 78svh; object-fit: cover; display: block; }
.start-hero .text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 5vw, 3rem) 1.4rem;
  background: linear-gradient(transparent, rgba(20,18,14,0.78));
}
.start-hero .text .innen { max-width: var(--mass); margin: 0 auto; }
.start-hero h1 {
  font-family: var(--display); font-weight: 400; color: #faf7f0;
  font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.05; max-width: 18ch;
}
.start-hero p.sub { margin-top: 0.9rem; color: rgba(250,247,240,0.9); max-width: 52ch; font-size: 1.05rem; }
.start-hero .cta { margin-top: 1.5rem; }
.start-hero .cta a {
  display: inline-block; background: #faf7f0; color: var(--tinte);
  padding: 0.8rem 1.75rem; font-size: 0.95rem; text-decoration: none;
  border: 1px solid #faf7f0;
}
.start-hero .cta a:hover { background: transparent; color: #faf7f0; }

/* ---------- Deutliche CTA-Buttons in jeder Kontaktzeile ---------- */

.kontakt .cta-knopf {
  display: inline-block; margin-top: 1.25rem; background: var(--tinte); color: var(--papier);
  padding: 0.8rem 1.75rem; text-decoration: none; font-size: 0.95rem; border: 1px solid var(--tinte);
}
.kontakt .cta-knopf:hover { background: var(--blau); border-color: var(--blau); color: var(--papier); }

/* ---------- Eingebettetes Kurzformular auf der Startseite ---------- */

.start-formular { border-top: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.start-formular .innen { max-width: 32rem; }
.start-formular h2 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; margin-bottom: 1.5rem; }

/* ---------- Kleine Bildunterschrift unter Herobildern ---------- */
.bild-caption {
  font-size: 0.82rem; color: var(--grau); padding: 0.5rem 1.4rem 0;
  max-width: var(--mass); margin: 0 auto;
}

.beitrag .bild-caption { padding: 0.5rem 0 0; max-width: 100%; margin: 0; }

/* ---------- Türen: Besucher sortieren sich selbst ein ---------- */

.tueren { border-bottom: 1px solid var(--linie); }
.tueren .kopf { padding: clamp(2rem, 5vw, 3rem) 1.4rem 0; max-width: var(--mass); margin: 0 auto; }
.tueren .kopf p { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--blau); }

.tueren .raster { display: grid; grid-template-columns: 1fr; }
@media (min-width: 54rem) { .tueren .raster { grid-template-columns: repeat(4, 1fr); } }

.tuer {
  position: relative; display: block; text-decoration: none; color: var(--tinte);
  border-top: 1px solid var(--linie); padding: clamp(2rem, 6vw, 3rem) 1.6rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
@media (min-width: 54rem) {
  .tuer { border-top: none; padding: clamp(2.5rem, 5vw, 3.5rem) 1.75rem; min-height: 16rem; display: flex; flex-direction: column; justify-content: flex-end; }
  .tuer + .tuer { border-left: 1px solid var(--linie); }
}
.tuer:hover { background: var(--tinte); color: var(--papier); }
.tuer .fuer { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.65; }
.tuer h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: 0.5rem; line-height: 1.15; }
.tuer p.satz { margin-top: 0.7rem; font-size: 0.92rem; opacity: 0.85; }
.tuer .pfeil { margin-top: 1.1rem; font-size: 0.88rem; }

/* ---------- Beiträge (Aktuelles): mit oder ohne Bild ---------- */

.beitrag { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.beitrag .eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blau); }
.beitrag h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 3rem); margin-top: 0.5rem; line-height: 1.1; }
.beitrag h2 a { color: var(--tinte); text-decoration: none; }
.beitrag h2 a:hover { color: var(--blau); }
.beitrag .meta { margin-top: 0.4rem; color: var(--grau); font-size: 0.95rem; }
.beitrag .text { margin-top: 1.1rem; max-width: 100%; }
.beitrag .bild { margin-top: 1.5rem; }
.beitrag .bild img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--linie); }
.beitrag .mehr { display: inline-block; margin-top: 1.1rem; font-size: 0.95rem; }

/* ---------- Explain: die eine Antwort + drei Worte ---------- */

.explain { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.explain .satz {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.3; max-width: 28ch;
}
.explain .drei-worte {
  margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
}
.explain .drei-worte span {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blau);
}

/* ---------- Attitude: wie wir denken + Veedelskino-Beweis ---------- */

.attitude { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.attitude h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.3rem); max-width: 22ch; }
.attitude p { margin-top: 1.1rem; max-width: 62ch; }
.attitude .beweis { color: var(--blau); font-size: 1.02rem; }

/* ---------- Zwei ruhige Einstiege im Hero (statt einem CTA) ---------- */

.start-hero .zwei-wege { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.start-hero .zwei-wege a {
  display: inline-block; padding: 0.8rem 1.75rem; font-size: 0.95rem; text-decoration: none;
  border: 1px solid #faf7f0;
}
.start-hero .zwei-wege a:first-child { background: #faf7f0; color: var(--tinte); }
.start-hero .zwei-wege a:first-child:hover { background: transparent; color: #faf7f0; }
.start-hero .zwei-wege a:last-child { background: transparent; color: #faf7f0; }
.start-hero .zwei-wege a:last-child:hover { background: rgba(250,247,240,0.15); }

/* ---------- Zwei gleichwertige Zugänge (BoxKIx: Für Kinos / Für Presse) ---------- */

.zwei-zugaenge {
  margin-top: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 34rem) { .zwei-zugaenge { grid-template-columns: 1fr 1fr; } }
.zugang {
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--linie); padding: 1.1rem 1.3rem;
  text-decoration: none; color: var(--tinte); transition: background-color 0.2s ease, color 0.2s ease;
}
.zugang:hover { background: var(--tinte); color: var(--papier); }
.zugang .fuer {
  display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blau);
}
.zugang:hover .fuer { color: var(--gold); }
.zugang .was { display: block; margin-top: 0.35rem; font-size: 1.02rem; }

/* ============================================================
   FKM-Stil: konsequent umgesetzt (13.08.2026)
   Bewusster Bruch mit dem bisherigen harten Kantenstil, auf
   ausdrücklichen Wunsch. Pillenform, Kreis-Pfeile, gestapelte
   Großbuchstaben-Headline, Farbband, Fußzeilen-Spalten.
   ============================================================ */

/* Pillenform endgültig zurückgenommen (14.08.2026) — auf
   ausdrücklichen Wunsch: keine Rundungen an Buttons, nirgendwo. */
.knopf, .cta-knopf, .zugang, .start-hero .zwei-wege a,
.formular button, .med-karte button, .bt-eintrag button,
button, a.knopf {
  border-radius: 0 !important;
}

/* Kreis-Pfeile für Slider (schwarzer Kreis, weißer Pfeil) */

/* Gestapelte Großbuchstaben-Headline (wie "Film / Kunst / Messe") */
.stapel-headline {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: 0.92; letter-spacing: -0.01em;
  font-size: clamp(3.2rem, 11vw, 7.5rem);
}
.stapel-headline span { display: block; }

/* Farbakzent, zurückgenommen von der vollflächigen Fläche (13.08.2026) —
   "Farbe nur an 1-2 Stellen, nie flächig". Blau jetzt nur noch als
   schmaler linker Rand + Akzentfarbe für die Überschrift. */
.farbband {
  border-left: 3px solid var(--blau); padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
}
.farbband h2 { color: var(--blau); }
.farbband .knopf-reihe { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.farbband .knopf-reihe a {
  text-decoration: underline; text-underline-offset: 4px; color: var(--tinte);
  font-size: 0.95rem;
}
.farbband .knopf-reihe a:hover { color: var(--blau); }
/* Karten brauchen jetzt keine Sonderbehandlung mehr — Hintergrund ist
   wieder Papierweiß statt vollflächigem Blau. */

/* Slider-Leiste: horizontal scrollbar, per Kreis-Pfeil steuerbar */

/* Fußzeilen-Spalten (statt einer Zeile) */
footer.site .spalten {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding: 1rem 0;
}
@media (min-width: 44rem) { footer.site .spalten { grid-template-columns: repeat(4, auto); justify-content: start; gap: 3rem; } }
footer.site .spalte-liste { list-style: none; }
footer.site .spalte-liste li { margin-top: 0.5rem; }
footer.site .spalte-liste li:first-child { margin-top: 0; }

/* Partner-Logoleiste */
.partner-leiste { border-top: 1px solid var(--linie); padding: 2rem 0; }
.partner-leiste p.label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grau); margin-bottom: 1rem; }
.partner-leiste .logos { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.partner-leiste .logos img { max-height: 2.2rem; width: auto; filter: grayscale(1); opacity: 0.75; }

/* ---------- Beitrags-Karten für den Slider ---------- */


/* ---------- Überschriften site-weit fett, wie FKM (überschreibt bewusst alle einzelnen 400er) ---------- */
h1, h2, h3,
.gruss h2, .attitude h2, .beitrag h2, .tuer h2, .bereich h2, .person h2,
.merkmale .punkt h2, .recht h1, .recht h2, .beispiele .karte h3,
.start-formular h2, .stapel-headline {
  font-weight: 700 !important;
}

/* ============================================================
   Landesverräter-Stil: Zahlen-Kacheln, Presse-Zitat-Block,
   wiederholte Markentypografie (13.08.2026)
   ============================================================ */

/* Wiederholter Markenschriftzug als Hintergrundband */
.marken-band {
  overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--linie);
  padding: 0.75rem 0;
}
.marken-band .lauf {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 6rem); color: var(--linie); text-transform: uppercase;
  animation: marken-lauf 28s linear infinite;
}
.marken-band .lauf span { margin-right: 2.5rem; }
@keyframes marken-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marken-band .lauf { animation: none; } }

/* Zahlen-Kacheln mit Hochzähl-Effekt */
.zahlen { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.zahlen .raster {
  display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.75rem 1.25rem;
}
@media (min-width: 34rem) { .zahlen .raster { grid-template-columns: repeat(3, 1fr); } }
.zahlen .kachel { border-top: 1px solid var(--linie-fein); padding-top: 0.9rem; }
.zahlen .stat-zahl {
  display: block; font-family: var(--display); font-weight: 700; color: var(--blau);
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1;
}
.zahlen .stat-label { display: block; margin-top: 0.4rem; font-size: 0.92rem; color: var(--grau); }

/* Presse-Zitat-Block (mehrere Belege nebeneinander) */
.kritik { border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.kritik h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-bottom: 1.75rem; }
.kritik .raster { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 44rem) { .kritik .raster { grid-template-columns: 1fr 1fr; } }
.kritik blockquote {
  border-left: 3px solid var(--gold); padding-left: 1.1rem;
  font-family: var(--display); font-style: italic; font-size: 1.1rem; line-height: 1.4;
}
.kritik cite { display: block; margin-top: 0.5rem; font-family: var(--ui); font-style: normal; font-size: 0.88rem; color: var(--grau); }

/* ============================================================
   Landesverräter-Standard, in CINEKIX-Farben (Blau/Papier, Lato):
   Hover-Anheben statt Zoom, Wisch-Enthüllung, Fullscreen-Menü,
   Live-Countdown (13.08.2026)
   ============================================================ */

/* Hover per Anheben + Schatten — nie per Zoom mit Beschnitt */
.buehne figure { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.buehne:hover figure { transform: translateY(-6px); box-shadow: 0 1.5rem 2.5rem rgba(20,18,14,0.18); }
@media (prefers-reduced-motion: reduce) { .buehne figure { transition: none; } .buehne:hover figure { transform: none; } }

/* Wisch-Enthüllung für Balken-Überschriften: Text schiebt sich
   von unten nach oben ins Bild, sobald die Sektion sichtbar wird. */
.wisch { overflow: hidden; display: inline-block; }
.wisch .wisch-innen {
  display: inline-block; transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.sichtbar .wisch .wisch-innen, .wisch.sichtbar .wisch-innen { transform: none; }
@media (prefers-reduced-motion: reduce) { .wisch .wisch-innen { transform: none; transition: none; } }

/* Fullscreen-Mobilmenü statt Dropdown, in CINEKIX-Farben —
   zwei Ebenen: riesige Hauptnavigation zentriert, winzige
   Pillen für Nebensächliches unten (wie FKM). */
@media (max-width: 44rem) {
  .menu-schalter:checked ~ nav.haupt {
    display: flex; flex-direction: column; position: fixed; inset: 0;
    align-items: center; justify-content: center; gap: 0;
    background: var(--papier); border-bottom: none; padding: 2rem 1.4rem;
  }
  .menu-schalter:checked ~ nav.haupt ul { flex-direction: column; gap: 0; padding: 0; text-align: center; }
  .menu-schalter:checked ~ nav.haupt li { border-top: none; }
  .menu-schalter:checked ~ nav.haupt .nav-primaer a {
    font-size: clamp(1.8rem, 7vw, 2.6rem); font-family: var(--display); font-weight: 700; padding: 0.5rem 0;
  }
  .menu-schalter:checked ~ nav.haupt .nav-sekundaer {
    display: flex; border-left: none; padding-left: 0; margin-top: 2rem;
    flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  }
  .menu-schalter:checked ~ nav.haupt .nav-sekundaer a {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid var(--linie); padding: 0.4rem 0.9rem; display: inline-block;
  }
}

/* Live-Countdown auf den Filmbühnen */
.buehne .countdown {
  display: flex; gap: 1.25rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(250,247,240,0.3);
}
.buehne .countdown .zelle { text-align: left; }
.buehne .countdown .zahl { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; }
.buehne .countdown .label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }

/* ---------- Veedelskino als eigene Welt, nicht als Randnotiz ---------- */
.veedelskino-welt {
  border-bottom: 1px solid var(--linie); padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.veedelskino-welt .eyebrow {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blau);
}
.veedelskino-welt h2 {
  font-family: var(--display); font-weight: 700; margin-top: 0.5rem;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.98;
}
.veedelskino-welt p:not(.eyebrow) { margin-top: 1.1rem; max-width: 52ch; font-size: 1.1rem; }
.veedelskino-welt .mehr { margin-top: 1.25rem; font-size: 1rem; }

/* ============================================================
   Schnittprinzip: die Seite wird wie ein Film geschnitten,
   nicht wie eine Unternehmenswebsite gebaut. Echter Rhythmus
   aus riesig/klein/Bild/Luft statt gleichförmiger Module.
   (13.08.2026, Ablösung des FKM-Kachel-Ansatzes)
   ============================================================ */

.schnitt { border-bottom: 1px solid var(--linie); }

/* Fast leer: viel Weißraum, riesige Typografie als einziger Inhalt */
.schnitt-leer { padding: clamp(2rem, 5vw, 3.25rem) 0; }
.riesig {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.01em;
  font-size: clamp(2rem, 6vw, 3.6rem);
  overflow-wrap: break-word; /* lange, zusammengesetzte deutsche Wörter (z. B.
    "Datenschutzerklärung") sonst ohne Leerzeichen zum Umbrechen -> Überlauf
    auf schmalen Bildschirmen. (15.08.2026) */
}
.riesig-satz {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem); line-height: 1.2; max-width: 22ch;
}
.schnitt-satz { margin-top: 0.9rem; font-size: 1.02rem; max-width: 48ch; color: var(--grau); }

/* Bild: randabfallend, keine Textüberlagerung — das Bild ist die Aussage */
.schnitt-bild { border-bottom: none; }
.schnitt-bild img { width: 100%; max-height: 58svh; object-fit: cover; display: block; }

/* Klein: knappe Informationszeile, viel kleiner als die Nachbarn */
.schnitt-klein { padding: clamp(0.75rem, 2vw, 1.25rem) 0; }
.status-zeile { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grau); }
.status-zeile .countdown { color: var(--blau); margin-left: 0.5rem; }

/* Titel wird selbst zum Bild: eigene, große Einstellung, anklickbar */
.schnitt-titel { padding: clamp(1rem, 3vw, 2rem) 0; }
.titel-link { display: block; text-decoration: none; color: var(--tinte); padding: 0 1.4rem; }
.titel-link .riesig { transition: color 0.2s ease; }
.titel-link:hover .riesig { color: var(--blau); }
.titel-link .pfeil-hinweis {
  display: inline-block; margin-top: 1rem; font-size: 0.9rem; color: var(--blau);
  border-bottom: 1px solid transparent;
}
.titel-link:hover .pfeil-hinweis { border-bottom-color: var(--blau); }

/* Zahlen-Reihe: knapp, klein, nebeneinander */
.zahlen-reihe { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.zahlen-reihe > div { min-width: 8rem; }
.zahlen-reihe .stat-zahl { display: block; font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--blau); }
.zahlen-reihe .stat-label { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--grau); }

/* Beleg-Zitate: klein, ohne Karten-Rahmen */
.schnitt-klein .beleg {
  display: inline-block; max-width: 32ch; margin-right: 3rem; margin-top: 0.5rem;
  font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1.35;
}
.schnitt-klein .beleg cite { display: block; margin-top: 0.4rem; font-family: var(--ui); font-style: normal; font-size: 0.82rem; color: var(--grau); }

/* Veedelskino: eigene Welt, dunklerer Ton als Kontrast */
.schnitt-veedelskino { background: var(--tinte); color: var(--papier); padding: clamp(4rem, 10vw, 7rem) 0; }
.schnitt-veedelskino .eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.schnitt-veedelskino .riesig { color: var(--papier); margin-top: 0.5rem; }
.schnitt-veedelskino .schnitt-satz { color: rgba(250,247,240,0.85); }
.schnitt-veedelskino .mehr a { color: var(--papier); }

.wege-klein { margin-top: 1rem; font-size: 0.95rem; }

/* ============================================================
   Die fehlenden ~20% Bewegung zum Schnittprinzip: sparsam,
   nur wo es Bedeutung trägt, nie Effekt um des Effekts willen.
   (13.08.2026, Nachtrag zum Schnittprinzip)
   ============================================================ */

/* 1. Jede Schnitt-Sektion blendet sanft ein, wenn sie ins Bild scrollt */
@supports (animation-timeline: view()) {
  .schnitt {
    animation: schnitt-auf linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@keyframes schnitt-auf {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .schnitt { animation: none !important; } }

/* Sicherheitsnetz: die jeweils letzte Schnitt-Sektion einer Seite
   (meist Kontakt/Formular) darf niemals dauerhaft unsichtbar
   bleiben — ihre Eintritts-Animation kann am Seitenende nicht
   immer vollständig durchlaufen, egal auf welcher Seite. */
main .schnitt:last-of-type { animation: none; opacity: 1; transform: none; }

/* 2. Bilder wachsen ganz leicht ein statt hart zu erscheinen */
@supports (animation-timeline: view()) {
  .schnitt-bild img, .schnitt-bild picture img {
    animation: bild-einwachsen 1.1s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
@keyframes bild-einwachsen {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .schnitt-bild img { animation: none !important; } }

/* 3. Spürbarerer Hover auf die riesigen Filmtitel: Farbe + leichte
   Verschiebung, nicht nur ein Hauch von Blau wie vorher */
.titel-link .riesig {
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}
.titel-link:hover .riesig { color: var(--blau); transform: translateX(0.6rem); }
.titel-link .pfeil-hinweis {
  display: inline-block; margin-top: 1rem; font-size: 0.9rem; color: var(--blau);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.titel-link:hover .pfeil-hinweis { border-bottom-color: var(--blau); }
@media (prefers-reduced-motion: reduce) {
  .titel-link .riesig { transition: none; }
  .titel-link:hover .riesig { transform: none; }
}

/* ============================================================
   Echte Vollflächen-Farbe als eigene "Einstellung" im Rhythmus
   — nicht Dekoration, sondern ein Farbwechsel als Schnitt.
   Sparsam: 1-2 Stellen pro Seite, nie durchgehend.
   (13.08.2026, Nachtrag "mehr Farbe")
   ============================================================ */

.vollfarbe { background: var(--blau); color: var(--papier); border-bottom: none; }
.vollfarbe .riesig-satz, .vollfarbe .riesig { color: var(--papier); }
.vollfarbe .schnitt-satz { color: rgba(250,247,240,0.85); }
.vollfarbe .status-zeile { color: rgba(250,247,240,0.7); }
.vollfarbe a { color: var(--papier); }
.vollfarbe .mehr a, .vollfarbe .wege-klein a { color: var(--gold); }
.vollfarbe .knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.vollfarbe .knopf-reihe a {
  display: inline-block; background: var(--papier); color: var(--tinte) !important;
  padding: 0.75rem 1.6rem; text-decoration: none; font-size: 0.9rem;
  border-radius: 0; border: 1px solid var(--papier);
}
.vollfarbe .knopf-reihe a:hover { background: transparent; color: var(--papier) !important; }

/* Gold-Variante für Zitate/Kernsätze — wärmer, seltener eingesetzt */
.vollgold { background: var(--gold); color: var(--tinte); border-bottom: none; }
.vollgold .riesig-satz, .vollgold .riesig { color: var(--tinte); }
.vollgold .schnitt-satz { color: rgba(38,36,31,0.9); } /* von 0.75 auf 0.9 erhöht für ausreichenden Kontrast (WCAG AA), 15.08.2026 */

/* ============================================================
   NEUES DESIGNSYSTEM nach FKM-Prototyp-Vorlage — Farben und
   Schrift bleiben CINEKIX (Papier/Tinte/Blau/Gold, Lato statt
   Playfair/Inter), Struktur und Komponenten übernommen.
   (14.08.2026)
   ============================================================ */

:root {
  --tint-bg: #f1ebdd;
  --line-2: rgba(38,36,31,0.12);
  --line-2-strong: rgba(38,36,31,0.28);
  --measure: 44rem;
  --radius2: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --s1: .3rem; --s2: .5rem; --s3: .8rem; --s4: 1.25rem; --s5: 1.9rem; --s6: 2.75rem; --s7: 3.75rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}
:root[data-theme="dunkel"] {
  --tint-bg: #26241f;
  --line-2: rgba(238,234,226,0.12);
  --line-2-strong: rgba(238,234,226,0.28);
}

.v2 { font-family: var(--ui); }
.v2 .wrap2 { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.v2 .eyebrow2 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--grau); }
.v2 .rule2 { height: 1px; background: var(--line-2); border: 0; }

/* ---------- Kopfzeile ---------- */
.v2 .head2 {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: clamp(1rem,2vw,1.6rem) var(--gutter);
  background: var(--papier); border-bottom: 1px solid var(--line-2);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease);
}
.v2 .head2[data-scrolled="true"] {
  background: var(--papier); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.v2 .head2__aktionen { display: flex; align-items: center; gap: var(--s2); }
.v2 .theme-umschalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--linie-fein); background: transparent;
  cursor: pointer; border-radius: 0; padding: 0;
}
.v2 .theme-umschalter svg {
  width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--tinte); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Sonne zeigen im Hellmodus (aktueller Zustand hell -> Klick würde dunkel machen),
   Mond zeigen im Dunkelmodus. */
.v2 .theme-umschalter__mond { fill: var(--tinte); display: none; }
.v2 .theme-umschalter__sonne { display: block; }
:root[data-theme="dunkel"] .v2 .theme-umschalter__sonne { display: none; }
:root[data-theme="dunkel"] .v2 .theme-umschalter__mond { display: block; }
.v2 .brand2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem,1.6vw,1.5rem);
  letter-spacing: .01em; line-height: 1; display: inline-flex; align-items: flex-start; gap: .15em;
  color: var(--tinte); text-decoration: none;
}
.v2 .brand2 sup { font-family: var(--ui); font-size: .42em; font-weight: 500; position: relative; top: .15em; }

.v2 .menu-toggle2 {
  background: transparent; border: 1px solid var(--line-2-strong); color: var(--tinte);
  border-radius: 0; padding: .9rem 1.6rem; cursor: pointer;
  font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  font-family: var(--ui);
}
.v2 .menu-toggle2:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

.v2 .nav-overlay2 {
  position: fixed; inset: 0; z-index: 150; background: var(--papier);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1rem,2vw,1.6rem) var(--gutter) var(--s4);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s var(--ease);
  overflow-y: auto; /* Menü scrollbar machen, statt Einträge unsichtbar über den Rand ragen zu lassen (15.08.2026) */
}
.v2 .nav-overlay2[data-open="true"] { opacity: 1; visibility: visible; }
.v2 .nav-overlay2__top { display: flex; align-items: center; justify-content: space-between; }
.v2 .nav-overlay2__mitte { align-self: center; width: 100%; }
.v2 .nav-primary2 { display: grid; gap: .2em; padding-block: var(--s4); }
.v2 .nav-primary2 a {
  font-family: var(--display); font-size: clamp(2rem,7vw,4.5rem); line-height: 1.05; font-weight: 700;
  display: inline-block; color: var(--tinte); text-decoration: none;
  transition: color .2s var(--ease), transform .3s var(--ease);
}
.v2 .nav-primary2 a:hover { color: var(--blau); transform: translateX(.4rem); }
.v2 .nav-overlay2__cta { margin-block: var(--s3); }
.v2 .nav-overlay2__cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--tinte); color: var(--papier); text-decoration: none; font-weight: 700;
  font-family: var(--ui); font-size: 1.05rem; padding: 0.85rem 1.6rem; border: 1px solid var(--tinte);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.v2 .nav-overlay2__cta-btn:hover { background: var(--blau); border-color: var(--blau); }
.v2 .nav-secondary2 {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; border-top: 1px solid var(--line-2); padding-top: var(--s3);
}
.v2 .nav-secondary2 a { font-size: .9rem; color: var(--grau); text-decoration: none; transition: color .2s var(--ease); }
.v2 .nav-secondary2 a:hover { color: var(--tinte); }

/* ---------- Hero ---------- */
.v2 .hero2 { padding-top: calc(var(--s7) + 1.5rem); }
.v2 .hero2__art { width: 100%; aspect-ratio: 4/3; max-height: 76svh; overflow: hidden; }
.v2 .hero2__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2 .hero2__inner {
  max-width: 60rem; padding: var(--s4) var(--gutter) var(--s5);
  background: var(--papier);
}
.v2 .hero2__title {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem,7.5vw,5.2rem);
  line-height: .95; letter-spacing: -.015em; color: var(--tinte);
}
.v2 .hero2__title em { font-style: italic; font-weight: 400; color: var(--blau); }
.v2 .hero2__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--line-2-strong); color: var(--grau); font-size: .92rem;
}

/* ---------- Abschnitte ---------- */
.v2 .section2 { padding-block: clamp(1.75rem,5vw,var(--s6)); border-bottom: 1px solid var(--line-2); }
.v2 .section2--tint { background: var(--tint-bg); border-bottom: none; }
.v2 .section2--flush { padding-bottom: 0; }
.v2 .section2__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding-bottom: var(--s2); margin-bottom: var(--s4); border-bottom: 1px solid var(--line-2);
}
.v2 .section2__title {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem,3.6vw,2.6rem);
  line-height: 1.05; letter-spacing: -.01em; color: var(--tinte);
}
.v2 .link-more2 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--line-2-strong); padding-bottom: .2rem; color: var(--tinte); text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.v2 .link-more2:hover { color: var(--blau); border-color: var(--blau); }

.v2 .statement2 {
  font-family: var(--display); font-size: clamp(1.3rem,3vw,2.1rem); line-height: 1.3; font-weight: 400;
  max-width: var(--measure); color: var(--tinte);
}
.v2 .statement2 strong { font-weight: 700; color: var(--blau); }

/* ---------- Karussell ---------- */
.v2 .rail2 { position: relative; }
.v2 .rail2__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 20rem); gap: var(--s2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--s2); list-style: none;
}
.v2 .rail2__track::-webkit-scrollbar { display: none; }
.v2 .rail2__track > * { scroll-snap-align: start; }
@media (min-width: 48rem) { .v2 .rail2__track { grid-auto-columns: 22rem; } }
.v2 .rail2__nav { display: flex; gap: .5rem; margin-top: var(--s2); }
.v2 .rail2__btn {
  width: 2.75rem; height: 2.75rem; border-radius: 0;
  border: 1px solid var(--line-2-strong); background: transparent; color: var(--tinte);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.v2 .rail2__btn:hover:not(:disabled) { background: var(--tinte); color: var(--papier); }
.v2 .rail2__btn:disabled { opacity: .3; cursor: default; }
.v2 .rail2__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- Karten ---------- */
.v2 .card2 { display: flex; flex-direction: column; gap: var(--s2); height: 100%; text-decoration: none; color: var(--tinte); }
.v2 .card2__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--tint-bg); border-radius: var(--radius2); }
.v2 .card2--film .card2__media { aspect-ratio: 2/3; }
.v2 .card2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.v2 .card2:hover .card2__media img { transform: scale(1.04); }
.v2 .card2__body { display: flex; flex-direction: column; gap: .4rem; }
.v2 .card2__title {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 3rem;
}
.v2 .card2__text {
  color: var(--grau); font-size: .92rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.v2 .card2__meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }

/* ---------- Leistungen ---------- */
.v2 .grid-work2 { display: grid; gap: 1px; background: var(--line-2); border-block: 1px solid var(--line-2); list-style: none; }
@media (min-width: 44rem) { .v2 .grid-work2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 72rem) { .v2 .grid-work2 { grid-template-columns: repeat(4,1fr); } }
.v2 .work2 { background: var(--papier); padding: var(--s3) var(--s3) var(--s4); display: flex; flex-direction: column; gap: .75rem; transition: background .3s var(--ease); }
.v2 .work2:hover { background: var(--tint-bg); }
.v2 .work2__no { font-family: var(--display); font-size: .95rem; color: var(--blau); font-weight: 700; }
.v2 .work2__title { font-family: var(--display); font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: var(--tinte); }
.v2 .work2__text { color: var(--grau); font-size: .95rem; }

/* ---------- Feature (Veedelskino) ---------- */
.v2 .feature2 { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 60rem) { .v2 .feature2 { grid-template-columns: 1.1fr .9fr; gap: var(--s5); } }
.v2 .feature2__media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius2); background: var(--tint-bg); }
.v2 .feature2__media img { width: 100%; height: 100%; object-fit: cover; }
.v2 .feature2__body { display: flex; flex-direction: column; gap: var(--s2); max-width: var(--measure); }
.v2 .feature2__title { font-family: var(--display); font-size: clamp(1.7rem,4vw,2.6rem); font-weight: 700; line-height: 1.08; color: var(--tinte); }

/* ---------- Partner ---------- */
.v2 .partners2 { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; list-style: none; }
.v2 .partners2 li { font-family: var(--display); font-size: 1.05rem; color: var(--grau); padding: .5rem 0; border-bottom: 1px solid transparent; }
.v2 .partners2.rail2__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
  flex-wrap: nowrap; gap: var(--s4);
}
.v2 .partners2.rail2__track li { white-space: nowrap; }

/* ---------- Fußzeile ---------- */
.v2 .foot2 { background: var(--tint-bg); border-top: 1px solid var(--line-2); padding-block: var(--s5) var(--s3); }
.v2 .foot2__grid { display: grid; gap: var(--s4); }
@media (min-width: 52rem) { .v2 .foot2__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.v2 .foot2 h2 { font-family: var(--display); font-size: clamp(1.5rem,3.2vw,2.2rem); font-weight: 700; line-height: 1.1; margin-bottom: var(--s2); color: var(--tinte); }
.v2 .foot2 address { font-style: normal; color: var(--grau); line-height: 1.9; }
.v2 .foot2 address a { color: var(--tinte); border-bottom: 1px solid var(--line-2-strong); }
.v2 .foot2__list { list-style: none; }
.v2 .foot2__list li { margin-bottom: .5rem; }
.v2 .foot2__list a { color: var(--grau); font-size: .95rem; text-decoration: none; }
.v2 .foot2__list a:hover { color: var(--tinte); }
.v2 .foot2__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between;
  margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--line-2);
  font-size: .8rem; color: var(--grau);
}

/* ---------- Einblenden beim Scrollen ---------- */
.v2 [data-reveal2] { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.v2 [data-reveal2].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v2 [data-reveal2] { opacity: 1; transform: none; } }

/* ---------- Schnittprinzip-Ergänzung (14.08.2026):
   fast leerer Zwischenruf, riesiger Filme-Titel, asymmetrisches
   Veedelskino-Feature ---------- */

.v2 .zwischenruf2 {
  padding-block: clamp(2rem, 6vw, 3.5rem); border-bottom: 1px solid var(--line-2);
  text-align: center;
}
.v2 .zwischenruf2 p {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.2rem, 7vw, 4.8rem); line-height: 1.02; letter-spacing: -.01em;
  color: var(--tinte); max-width: 20ch; margin-inline: auto;
}

.v2 .section2__title--riesig {
  font-size: clamp(3rem, 10vw, 7rem) !important; line-height: .92 !important;
  text-transform: uppercase; letter-spacing: -.015em;
}

/* Veedelskino asymmetrisch statt gleichmäßig geteilt */
@media (min-width: 60rem) {
  .v2 .feature2--asym { grid-template-columns: 1.7fr .8fr; }
}

/* "Was wir machen" jetzt horizontal statt starres Raster —
   dasselbe Rail-Prinzip wie Aktuelles/Filme, strukturell konsequent. */
.v2 .grid-work2--rail { list-style: none; }
.v2 .grid-work2--rail .work2 {
  background: var(--papier); border: 1px solid var(--line-2);
  padding: var(--s3); display: flex; flex-direction: column; gap: .6rem;
  transition: background .3s var(--ease);
}
.v2 .grid-work2--rail .work2:hover { background: var(--tint-bg); }

/* ---------- Veedelskino: Sponsoring-Pakete (14.08.2026) ---------- */
.v2 .veedel-pakete2 { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 44rem) { .v2 .veedel-pakete2 { grid-template-columns: 1fr 1fr; } }
.v2 .veedel-paket2 { border: 1px solid var(--line-2-strong); padding: var(--s3); }
.v2 .veedel-paket2 h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--tinte); }
.v2 .veedel-paket2__preis { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--blau); margin-top: .3rem; }
.v2 .veedel-paket2 p:last-child { color: var(--grau); font-size: .92rem; margin-top: .5rem; }

/* ---------- Konkretes Arbeitsbeispiel (14.08.2026) ---------- */
.v2 .case2__grid { display: grid; gap: var(--s3); margin-top: var(--s3); }
@media (min-width: 52rem) { .v2 .case2__grid { grid-template-columns: repeat(3,1fr); } }
.v2 .case2__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--blau); margin-bottom: .35rem; }
.v2 .case2__grid p:last-child { color: var(--grau); font-size: .95rem; }

/* Nur für Screenreader — visuell unsichtbar, aber im Zugänglichkeitsbaum vorhanden.
   Fehlte bisher komplett, obwohl im HTML schon verwendet (Bug, 14.08.2026 behoben). */
.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;
}

/* ---------- Hero: CTA-Button + Beweis-Satz direkt im ersten Bildschirm
   (14.08.2026, nach B2B-Conversion-Recherche) ---------- */
.v2 .hero2__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.v2 .hero2__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tinte); color: var(--papier);
  padding: .18rem 1.6rem 1.2rem; text-decoration: none; font-weight: 700;
  font-size: .95rem; line-height: 1; border: 1px solid var(--tinte); border-radius: 0;
  min-height: 2.75rem; /* mind. 44px Tipp-Ziel auf Mobil (WCAG), 15.08.2026 */
  transition: background .2s var(--ease), color .2s var(--ease);
}
.v2 .hero2__cta:hover { background: transparent; color: var(--tinte); }
.v2 .hero2__proof { font-size: .88rem; color: var(--grau); margin: 0; }

/* ---------- Team-Teaser auf der Startseite (14.08.2026) ---------- */
.v2 .team-teaser2 { display: grid; gap: var(--s3); margin-top: var(--s3); }
@media (min-width: 34rem) { .v2 .team-teaser2 { grid-template-columns: 1fr 1fr; } }
.v2 .team-teaser2__karte { text-decoration: none; color: var(--tinte); display: block; }
.v2 .team-teaser2__bild { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius2); background: var(--tint-bg); }
.v2 .team-teaser2__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.v2 .team-teaser2__karte:hover .team-teaser2__bild img { transform: scale(1.03); }
.v2 .team-teaser2__name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin-top: .6rem; }
.v2 .team-teaser2__rolle { color: var(--grau); font-size: .9rem; margin-top: .1rem; }

/* ---------- Inline-Editing (14.08.2026) ---------- */
.inline-edit-hinweis {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--blau); color: var(--papier); text-align: center;
  padding: .6rem 1rem; font-family: var(--ui); font-size: .85rem;
}
[contenteditable="true"].inline-editierbar {
  outline: 1px dashed rgba(50,58,102,0.4); outline-offset: 2px; cursor: text;
}
[contenteditable="true"].inline-editierbar:focus { outline: 2px solid var(--blau); background: rgba(50,58,102,0.08); }
/* Leere Felder brauchen eine garantierte Mindestfläche zum Draufklicken,
   sonst gibt es nichts, worauf man klicken könnte (Henne-Ei-Problem).
   (15.08.2026) */
[contenteditable="true"].inline-editierbar--leer {
  min-height: 1.5em; min-width: 6rem; display: inline-block;
  background: rgba(201,162,62,0.12); outline-color: var(--gold);
}
[contenteditable="true"].inline-editierbar--leer::before {
  content: 'Text eingeben …'; color: var(--grau); opacity: 0.75; pointer-events: none;
}
.inline-edit-gruppe {
  position: relative; border: 2px solid var(--gold); padding: 1.5rem 1rem 1rem; margin: 1.5rem 0;
}
.inline-edit-gruppe__marke {
  position: absolute; top: -0.85rem; left: 0.75rem; background: var(--gold); color: var(--tinte);
  font-family: var(--ui); font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.2rem 0.6rem; pointer-events: none;
}
.inline-status {
  display: inline-block; margin-left: .5rem; font-size: .78rem; font-family: var(--ui);
}
.inline-status--speichert { color: var(--grau); }
.inline-status--ok { color: #2e7d32; }
.inline-status--fehler { color: #b3261e; }

/* ---------- Hero zentriert, nur Button (14.08.2026) ---------- */
.v2 .hero2__inner--zentriert {
  margin-inline: auto; text-align: center; max-width: 48rem;
  display: flex; flex-direction: column; align-items: center;
}
.v2 .hero2__inner--zentriert .hero2__action { margin-top: var(--s3); }

/* ---------- Hero überlagert: Titel + Button mittig im Bild, gleichmäßig
   abgedunkelt statt Verlauf — Lesbarkeit unabhängig vom Bildinhalt.
   (14.08.2026, Korrektur zu Punkt 94/98) ---------- */
.v2 .hero2--overlay {
  position: relative; min-height: 70svh; display: grid; overflow: hidden;
  padding-top: 0;
}
.v2 .hero2--overlay .hero2__art { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
.v2 .hero2--overlay .hero2__art img { width: 100%; height: 100%; object-fit: cover; }
.v2 .hero2__scrim { position: absolute; inset: 0; background: rgba(20,18,14,.55); }
.v2 .hero2__inner--ueberlagert {
  position: relative; z-index: 1; grid-row: 1; grid-column: 1;
  place-self: center; background: none; padding: var(--gutter);
}
.v2 .hero2--overlay { grid-template-rows: 1fr; grid-template-columns: 1fr; }
.v2 .hero2__inner--ueberlagert .eyebrow2 { color: rgba(250,247,240,.85); }
.v2 .hero2__inner--ueberlagert .hero2__title { color: var(--papier); }

/* ---------- Referenzen-Liste (14.08.2026) ---------- */
.referenzen-liste { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .referenzen-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .referenzen-liste { grid-template-columns: 1fr 1fr 1fr; } }
.referenz-eintrag { border-top: 1px solid var(--linie-fein); padding-top: 0.9rem; }
.referenz-titel { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.referenz-meta { color: var(--grau); font-size: 0.82rem; margin-top: 0.3rem; line-height: 1.5; }
.referenz-text { margin-top: 0.5rem; font-size: 0.92rem; color: var(--tinte); }

/* Referenz-Bilder (14.08.2026) */
.referenz-bild { aspect-ratio: 2/3; overflow: hidden; margin-bottom: 0.6rem; background: var(--papier); }
.referenz-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aktuelles-Seite: Texte gehen wieder über die volle Breite,
   statt der sonst website-weiten 48ch-Lesbarkeits-Beschränkung. (14.08.2026) */
#seite-aktuelles .schnitt-satz { max-width: none; }

/* Unterseiten mit dem einheitlichen v2-Kopfbereich: der ist fixiert,
   daher braucht der Inhalt oben Platz, sonst wird der Anfang verdeckt.
   (Die Startseite regelt das über ihren eigenen Hero.) (15.08.2026) */
body.v2 main#inhalt { padding-top: calc(var(--s7) + 1.5rem); }

/* ---------- Partner-Seite (15.08.2026) ---------- */
.partner-liste { display: grid; gap: 2rem; }
@media (min-width: 44rem) { .partner-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .partner-liste { grid-template-columns: 1fr 1fr 1fr; } }
.partner-eintrag { border-top: 1px solid var(--linie-fein); padding-top: 1.25rem; display: flex; flex-direction: column; }
.partner-logo { height: 4.5rem; width: 100%; margin-bottom: 1rem; }
:root[data-theme="dunkel"] .partner-logo {
  background: #fff; padding: 0.6rem 1rem; width: auto; max-width: 100%;
  height: calc(4.5rem + 1.2rem); box-sizing: border-box; display: inline-flex; align-items: center;
}
/* Logos mit unveränderlichem hellem Hintergrund (Punkt 119/121) bekommen im
   Dunkelmodus eine bewusst gestaltete weiße "Karte" statt als zufälliger
   heller Fleck zu wirken. (15.08.2026) */
.partner-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.partner-eintrag:not(:has(.partner-logo)) .partner-name { margin-top: calc(4.5rem + 1rem); }
.partner-name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin-bottom: 0.5rem; }
.partner-tagline { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau); font-weight: 700; margin-bottom: 0.75rem; }
.partner-text { color: var(--grau); font-size: 0.98rem; }
.partner-text p { margin-bottom: 0.9rem; }
.partner-text p:last-child { margin-bottom: 0; }

/* Kategorie-Label über dem Bild im Aktuelles-Karussell (15.08.2026,
   als eigene Zeile über dem Bild, nur Text, kein Hintergrund-Balken) */
.v2 .card2__kategorie {
  display: block; margin-bottom: 0.4rem;
  color: var(--blau);
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}

/* ============================================================
   Blog "JAWS IN SPACE" — Kinomarketing-Geschichte (15.08.2026)
   Bewusst verspielter als der Rest der Seite: die illustrierten
   Poster dürfen laut sein, der Rest bleibt diszipliniert.
   ============================================================ */

.blog-hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .blog-hero { grid-template-columns: 15rem 1fr; } }
.blog-hero__bild { max-width: 15rem; margin: 0 auto; transform: rotate(-2deg); }
.blog-hero__bild img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); }
.blog-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; }
.blog-hero .schnitt-satz { max-width: 60ch; }

.blog-liste { margin-top: 3rem; display: flex; flex-direction: column; }
.blog-karte {
  display: grid; gap: 1.75rem; align-items: center;
  padding: 2.5rem 0; border-top: 1px solid var(--linie-fein);
  text-decoration: none; color: inherit;
}
.blog-liste li:last-child .blog-karte { border-bottom: 1px solid var(--linie-fein); }
@media (min-width: 40rem) { .blog-karte { grid-template-columns: 11rem 1fr; } }
.blog-karte__bild { position: relative; transition: transform 0.25s ease; }
.blog-karte:hover .blog-karte__bild { transform: rotate(-2deg) scale(1.03); }
.blog-karte__bild img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); }
.blog-karte__kicker {
  font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: var(--gold); display: block; margin-bottom: 0.3rem;
}
.blog-karte__titel { font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; margin-bottom: 0.6rem; }
.blog-karte__intro { color: var(--grau); font-size: 0.98rem; max-width: 58ch; }
.blog-karte__mehr { display: inline-block; margin-top: 0.7rem; font-weight: 700; color: var(--blau); }

/* Artikelseite */
.blog-artikel { display: grid; gap: 3rem; }
@media (min-width: 62rem) { .blog-artikel { grid-template-columns: 1fr 20rem; align-items: start; } }
.blog-artikel__kicker {
  font-family: var(--display); font-weight: 700; font-size: 3.5rem; line-height: 1;
  color: var(--gold); display: block; margin-bottom: 0.5rem;
}
.blog-artikel__titel { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; margin-bottom: 1.2rem; }
.blog-artikel__intro { font-size: 1.15rem; color: var(--tinte); max-width: 62ch; margin-bottom: 2rem; }
.blog-inhalt { max-width: 66ch; }
.blog-inhalt p { margin-top: 1.2rem; line-height: 1.7; }
.blog-inhalt h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  margin-top: 2.75rem; margin-bottom: 0.25rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-fein);
}
.blog-inhalt blockquote {
  position: relative; margin: 2.25rem 0; padding: 0.2rem 0 0.2rem 2.2rem;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.3;
  color: var(--blau); border-left: 3px solid var(--gold);
}

.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 6rem; }
.blog-sidebar__bild { transform: rotate(1.5deg); }
.blog-sidebar__bild img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); }
.blog-video { aspect-ratio: 16/9; background: var(--tinte); overflow: hidden; position: relative; }
.blog-video iframe { width: 100%; height: 100%; display: block; border: 0; }
/* Zwei-Klick-Lösung für YouTube-Videos: erst nach Klick wird eine Verbindung
   zu YouTube aufgebaut — passend zum Versprechen in der Datenschutzerklärung.
   (15.08.2026) */
.blog-video__vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-video__start {
  position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem; background: rgba(20,18,15,0.55);
  border: none; cursor: pointer; color: #fff; font-family: var(--ui); text-align: center; padding: 1rem;
}
.blog-video__play {
  width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--tinte); border-radius: 50%; font-size: 1.2rem;
  padding-left: 0.2rem;
}
.blog-video__start span:not(.blog-video__play) { font-weight: 700; }
.blog-video__hinweis { font-weight: 400 !important; font-size: 0.78rem; opacity: 0.85; max-width: 22rem; }
.blog-video__meta { font-size: 0.8rem; color: var(--grau); margin-top: 0.4rem; }

.blog-nav-artikel {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.blog-nav-artikel a { font-weight: 700; color: var(--blau); }

@media (max-width: 61.9rem) {
  /* Auf Mobil Cover + Video VOR den Artikeltext stellen (order: -1), damit
     sie den Artikel eröffnen statt erst nach dem langen Text zu erscheinen.
     Sidebar dort horizontal: Cover links, Video rechts. (15.08.2026) */
  .blog-sidebar { position: static; order: -1; margin-top: 0; flex-direction: row; align-items: flex-start; }
  .blog-sidebar__bild { flex: 0 0 38%; transform: none; }
  .blog-sidebar > div { flex: 1; }
}
@media (max-width: 40rem) {
  /* Ganz schmal: wieder untereinander, sonst wird das Video zu winzig */
  .blog-sidebar { flex-direction: column; }
  .blog-sidebar__bild { flex: none; max-width: 14rem; }
}

/* Blog-Teaser auf der Startseite (15.08.2026) */
.blog-teaser2 { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 44rem) { .blog-teaser2 { grid-template-columns: 12rem 1fr; } }
.blog-teaser2__bild { display: block; max-width: 12rem; margin: 0 auto; transform: rotate(-2deg); transition: transform 0.25s ease; }
.blog-teaser2__bild:hover { transform: rotate(-2deg) scale(1.03); }
.blog-teaser2__bild img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); }

/* "… mehr Filme"-Abschlusskachel im Filme-Karussell (15.08.2026) */
.v2 .card2--mehr .card2__media--mehr {
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-bg); aspect-ratio: 16/9;
}
.v2 .card2--mehr .card2__media--mehr span {
  font-family: var(--display); font-weight: 700; font-size: 2.5rem; color: var(--blau);
}

/* Mobil: größere Tipp-Flächen für eng gestapelte Links (WCAG-Empfehlung
   mind. 44px), ohne die Desktop-Optik zu verändern. (15.08.2026) */
@media (max-width: 44rem) {
  .foot2__list a, .spalte-liste a, .foot2__contact a, .wege-klein a, .foot2 address a, .zurueck-link {
    display: inline-block; padding: 0.5rem 0; min-height: 2.75rem; line-height: 1.75rem;
  }
  .link-more2 { display: inline-block; padding: 0.95rem 0; min-height: 2.75rem; box-sizing: border-box; }
  .brand2 { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* Mobil: die kleinsten Meta-Labels leicht anheben für bessere Lesbarkeit
   auf kleinen Bildschirmen (Desktop unverändert). (15.08.2026) */
@media (max-width: 44rem) {
  .v2 .eyebrow2, .v2 .card2__kategorie, .v2 .card2__meta, .v2 .link-more2, .v2 .foot2__bottom span {
    font-size: max(0.82rem, 13px);
  }
}

/* Sanfter Übergang beim Umschalten (aber nicht bei prefers-reduced-motion) */
html { transition: background-color 0.25s ease; }
body, .head2, .nav-overlay2 { transition: background-color 0.25s ease, color 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  html, body, .head2, .nav-overlay2 { transition: none; }
}

/* Suchfeld auf Referenzen/Blog (15.08.2026) */
.referenzen-suchfeld, .blog-suchfeld {
  width: 100%; max-width: 28rem; padding: 0.8rem 1rem; font-family: var(--ui);
  font-size: 1rem; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte);
  border-radius: 0;
}
.referenzen-suchfeld:focus, .blog-suchfeld:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Brotkrümelnavigation auf dem Blog-Artikel (15.08.2026) */
.breadcrumb2 { font-size: 0.85rem; color: var(--grau); margin-bottom: 1.5rem; }
.breadcrumb2 a { color: var(--grau); }
.breadcrumb2 [aria-current="page"] { color: var(--tinte); }

/* Kontakt-CTA im Blog — der Blog hatte bislang keinen Weg zur Anfrage,
   obwohl er den meisten organischen Fremd-Traffic anzieht. (15.08.2026) */
.blog-cta {
  margin: 3rem 0; padding: 2rem; background: var(--tint-bg); border-left: 3px solid var(--gold);
}
.blog-cta__titel { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin-bottom: 0.5rem; }
.blog-cta__text { color: var(--tinte); max-width: 50ch; margin-bottom: 1.2rem; }

/* Presseerfolg-Vitrine Born to Fake (15.08.2026) */
.presse-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem; }
.presse-kennzahl { display: flex; flex-direction: column; }
.presse-kennzahl__zahl { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); color: var(--blau); line-height: 1; }
.presse-kennzahl__label { color: var(--grau); font-size: 0.85rem; margin-top: 0.3rem; }

.presse-zitate { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.presse-zitat { border-left: 3px solid var(--gold); padding-left: 1.2rem; }
.presse-zitat p { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--tinte); }
.presse-zitat cite { display: block; margin-top: 0.5rem; font-style: normal; color: var(--grau); font-size: 0.85rem; }

.presse-bewertungen { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-fein); }
.presse-bewertung { display: flex; flex-direction: column; }
.presse-bewertung__wert { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--gold); }
.presse-bewertung__quelle { color: var(--grau); font-size: 0.8rem; }

.presse-medien-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.presse-medien-gruppe h3 { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.presse-medien-gruppe p { color: var(--tinte); font-size: 0.92rem; line-height: 1.6; }

/* "Auch besprochen von"-Mastkopf — Namensnennung als Vertrauenssignal,
   unabhängig vom genauen Tenor der jeweiligen Kritik. (15.08.2026) */
.presse-mastkopf { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-fein); }
.presse-mastkopf__label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grau); margin-bottom: 0.4rem; }
.presse-mastkopf__namen { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--tinte); line-height: 1.5; }

/* Presseecho mit ehrlicher Tonalitäts-Kennzeichnung — bewusst nicht nur
   positive Stimmen, sondern die tatsächliche Bandbreite. (15.08.2026) */
.presse-echo { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.presse-echo__eintrag { border: 1px solid var(--linie-fein); padding: 1.1rem 1.2rem; }
.presse-echo__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.presse-echo__medium { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.presse-echo__ton {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.5rem;
  border: 1px solid currentColor; white-space: nowrap;
}
.presse-echo__ton--sehr-positiv { color: #2e7d32; }
.presse-echo__ton--positiv { color: var(--blau); }
.presse-echo__ton--wohlwollend-mit-einw-nden { color: var(--gold); }
.presse-echo__ton--gemischt { color: #a15c07; }
.presse-echo__ton--gemischt-bis-kritisch { color: #a1320a; }
.presse-echo__text { color: var(--tinte); font-size: 0.95rem; line-height: 1.55; }

/* Rechtstexte (Impressum, Datenschutz) — lesbare Breite, klare Struktur.
   (15.08.2026) */
.recht-text { max-width: 42rem; padding-block: clamp(2rem, 6vw, 4rem); }
.recht-text h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  margin-top: 2.25rem; margin-bottom: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie-fein);
}
.recht-text h2:first-of-type { margin-top: 2.5rem; border-top: none; padding-top: 0; }
.recht-text p { line-height: 1.65; color: var(--tinte); }
.recht-text a { color: var(--blau); }

/* Referenzen: nur Filme mit eigenständigem, unabhängigem Link (nicht zu
   UCM.ONE, dokumentiert schwierige frühere Kundenbeziehung) sind klickbar.
   Restliche Karten bleiben bewusst reine Übersicht, kein toter Link-Look.
   (15.08.2026) */
.referenz-eintrag--link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.referenz-eintrag--link:hover .referenz-titel { color: var(--blau); }
.referenz-mehr { display: inline-block; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--blau); }