/* Layout: linksbündig, eine Spalte mit max. 1280px. Das Bild trägt die Seite, Farbe nur für Handlung. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --grund: #0B1F2B;
  --flaeche: #132B38;
  --linie: #24404E;
  --text: #D5D8D6;
  --hell: #EEF0EC;
  --leise: #93A4AC;
  --akzent: #C5D15A;
  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(20px, 5vw, 64px);
  --abschnitt: clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--akzent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
[hidden] { display: none !important; }

.huelle { max-width: 1280px; margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.stapel { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }

.sprung {
  position: absolute; left: -9999px; top: 0;
  background: var(--akzent); color: var(--grund); padding: 12px 16px; font-weight: 700;
}
.sprung:focus { left: 16px; top: 16px; z-index: 10; }

h1, h2, h3 {
  margin: 0;
  color: var(--hell);
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
  line-height: 0.96;
  text-wrap: balance;
}
h2 { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }
h3 { font-size: 1.625rem; font-weight: 800; font-stretch: 85%; line-height: 1.1; }
p { margin: 0; max-width: 62ch; }
.gross { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.leise { color: var(--leise); }

.knopf {
  display: inline-block;
  padding: 16px 28px;
  border: 1px solid var(--akzent);
  border-radius: 2px;
  background: var(--akzent);
  color: var(--grund);
  font-weight: 800;
  font-size: 1.0625rem;
  text-decoration: none;
}
.knopf:hover { background: var(--hell); border-color: var(--hell); color: var(--grund); }
.knopf.zweit { background: transparent; border-color: #5C727E; color: var(--hell); font-weight: 600; }
.knopf.zweit:hover { border-color: var(--akzent); color: var(--akzent); background: transparent; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px 16px; }

/* Kopf */
.kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; padding-block: 22px;
}
.marke { display: flex; flex-direction: column; text-decoration: none; }
.marke b { font-size: 1.3125rem; font-weight: 800; font-stretch: 112%; text-transform: uppercase; color: var(--hell); letter-spacing: 0.02em; }
.marke span { font-size: 0.875rem; color: var(--leise); }
.navi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 1rem; font-weight: 500; }
.navi a { text-decoration: none; padding-block: 12px; }
.navi a.knopf { padding: 12px 20px; background: transparent; color: var(--akzent); font-weight: 700; }
.navi a.knopf:hover { background: var(--akzent); color: var(--grund); }

/* Hero */
.buehne {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(74vh, 720px);
  padding: clamp(20px, 4vw, 56px);
  background: var(--flaeche);
  border-radius: 2px;
  overflow: hidden;
}
.buehne > img, .buehne > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 31, 43, 0.94), rgba(11, 31, 43, 0.55) 45%, rgba(11, 31, 43, 0.1) 80%); }
.buehne > * { position: relative; z-index: 1; }
.buehne > img, .buehne > video { z-index: 0; position: absolute; }
.platzhalter-notiz { position: absolute; top: 16px; left: 18px; font-size: 0.8125rem; color: var(--leise); z-index: 1; }
h1 { font-size: clamp(2.25rem, 6.2vw, 5.5rem); line-height: 0.95; max-width: 14em; }
h1 small {
  display: block; margin-bottom: 14px;
  font-size: clamp(1rem, 1.4vw, 1.1875rem); font-weight: 600; font-stretch: 100%;
  text-transform: none; line-height: 1.3; color: var(--text);
}
.unterbuehne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 48px; padding-top: clamp(24px, 3vw, 40px);
}
.unterbuehne p { flex: 1 1 420px; }

/* Kunden */
.kunden { border-block: 1px solid var(--linie); }
.kunden ul {
  list-style: none; margin: 0; padding: 26px 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 38px;
  font-size: 1.3125rem; font-weight: 700; font-stretch: 85%; text-transform: uppercase; color: var(--hell);
}
.kunden li:first-child { font-size: 0.9375rem; font-weight: 500; font-stretch: 100%; text-transform: none; color: var(--leise); }

/* Arbeiten */
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button {
  font: inherit; font-size: 1rem; font-weight: 600;
  min-height: 44px; padding: 8px 18px;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie); border-radius: 2px; cursor: pointer;
}
.filter button:hover { border-color: var(--leise); }
.filter button[aria-pressed="true"] { background: var(--hell); border-color: var(--hell); color: var(--grund); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 28px; list-style: none; margin: 0; padding: 0; }
.arbeit a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.arbeit .bild {
  aspect-ratio: 16 / 9; max-width: 100%;
  background: var(--flaeche); border-radius: 2px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px; font-size: 0.8125rem; color: var(--leise);
  position: relative;
}
.arbeit .bild img { width: 100%; height: 100%; object-fit: cover; margin: -14px; max-width: none; width: calc(100% + 28px); height: calc(100% + 28px); }
.arbeit h3 { font-size: 1.375rem; }
.arbeit a:hover h3 { color: var(--akzent); }
.arbeit .art { font-size: 0.9375rem; color: var(--leise); }

/* Nutzen und Leistungen */
.band { background: var(--flaeche); border-block: 1px solid var(--linie); }
.drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 36px 48px; }
.drei > div { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid #5C727E; }
.leistungen { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 48px; }
.leistungen dt { font-weight: 800; font-stretch: 85%; text-transform: uppercase; font-size: 1.25rem; color: var(--hell); margin-bottom: 6px; }
.leistungen dd { margin: 0; }

/* Über Eddy */
.eddy { display: flex; flex-wrap: wrap; gap: 44px clamp(32px, 6vw, 96px); align-items: flex-start; }
.portrait {
  flex: 1 1 340px; max-width: 440px; aspect-ratio: 4 / 5;
  background: var(--flaeche); border-radius: 2px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px; font-size: 0.8125rem; color: var(--leise);
}
.portrait:has(img) { padding: 0; }
.portrait:has(img) { display: block; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.set figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.set img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.set figcaption { font-size: 0.9375rem; color: var(--leise); }
.eddy-text { flex: 999 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.zahlen { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 22px 32px; }
.zahlen b { display: block; font-size: 3.25rem; line-height: 1; font-weight: 900; font-stretch: 80%; color: var(--hell); font-variant-numeric: tabular-nums; }
.zahlen span { font-size: 1rem; }

/* Fragen */
.fragen { display: flex; flex-direction: column; max-width: 860px; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; padding-block: 20px; font-size: 1.25rem; font-weight: 700; color: var(--hell); }
.fragen summary:hover { color: var(--akzent); }
.fragen p { padding-bottom: 22px; }

/* Kontakt */
.kontakt h2 { font-size: clamp(3rem, 10.5vw, 9rem); line-height: 0.92; }
.kontakt .stapel { gap: 26px; }

/* Fuß */
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 40px; padding-block: 36px 52px; font-size: 0.9375rem; color: var(--leise); border-top: 1px solid var(--linie); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.fuss a { text-decoration: none; padding-block: 12px; display: inline-block; }

/* Leistungen und Steckbrief */
.vier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 36px 32px; }
.vier > div { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid #5C727E; }
.steckbrief { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 32px; font-size: 1rem; }
.steckbrief dt { color: var(--leise); font-size: 0.9375rem; }
.steckbrief dd { margin: 0; color: var(--hell); }

/* Filmvorschau in den Kacheln und Player */
.arbeit .bild .clip, .arbeit .bild .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(11, 31, 43, 0.72); border: 1px solid var(--hell);
}
.play::after {
  content: ""; position: absolute; left: 19px; top: 15px;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--hell);
}
.arbeit a:hover .play, .arbeit a:focus-visible .play { background: var(--akzent); border-color: var(--akzent); }
.arbeit a:hover .play::after, .arbeit a:focus-visible .play::after { border-left-color: var(--grund); }
#kino {
  width: min(1200px, calc(100vw - 32px)); max-width: none; padding: 0;
  background: var(--grund); color: var(--text); border: 1px solid var(--linie); border-radius: 2px;
}
#kino::backdrop { background: rgba(4, 12, 17, 0.9); }
.kino-flaeche { aspect-ratio: 16 / 9; background: #000; }
.kino-flaeche video, .kino-flaeche iframe { width: 100%; height: 100%; border: 0; display: block; }
.kino-titel { padding: 16px 20px 0; font-weight: 800; font-stretch: 85%; text-transform: uppercase; color: var(--hell); max-width: none; }
.kino-angaben { padding: 4px 20px 18px; font-size: 0.9375rem; color: var(--leise); max-width: none; }
.kino-zu {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font: inherit; font-size: 0.9375rem; font-weight: 700; min-height: 44px; padding: 8px 16px;
  background: var(--grund); color: var(--hell); border: 1px solid var(--hell); border-radius: 2px; cursor: pointer;
}
.kino-zu:hover { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }

/* Startseite, zweite Fassung: Aussage links, Bild rechts, direkt darunter die Arbeiten */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-block: clamp(20px, 3vw, 44px) clamp(40px, 5vw, 72px);
}
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); max-width: none; }
.hero-bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: 82% 50%; border-radius: 2px; }
.kunden-zeile { color: var(--leise); font-size: 1rem; }
.kunden-zeile b { color: var(--hell); font-weight: 600; }
.abschnitt-eng { padding-block: 0 var(--abschnitt); }
#arbeiten h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 40px 32px; }
.karten > div { display: flex; flex-direction: column; gap: 12px; }
.karten img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; margin-bottom: 6px; }
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-bild img { aspect-ratio: 16 / 10; }
}

/* Unterseiten */
.seitenkopf { display: flex; flex-direction: column; gap: 22px; padding-block: clamp(28px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.seitenkopf h1 { font-size: clamp(2.25rem, 5.4vw, 4.75rem); max-width: 16em; }
.seitenkopf.eddy { flex-direction: row; }
.pfad { font-size: 0.9375rem; color: var(--leise); }
.pfad a { color: var(--leise); }
.textblock { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--linie); }
.leistungslinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.leistungslinks a {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; text-decoration: none;
  border: 1px solid var(--linie); border-radius: 2px;
}
.leistungslinks a:hover { border-color: var(--akzent); }
.leistungslinks b { font-size: 1.25rem; font-weight: 800; font-stretch: 85%; text-transform: uppercase; color: var(--hell); }
.leistungslinks a:hover b { color: var(--akzent); }
.leistungslinks span { font-size: 0.9375rem; color: var(--leise); }
.weg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 900px; }
.weg li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 28px; padding-block: 22px; border-top: 1px solid var(--linie); }
.weg li > b { color: var(--akzent); font-weight: 700; font-variant-numeric: tabular-nums; }
.weg div { display: flex; flex-direction: column; gap: 8px; }
.weg h3 { font-size: 1.375rem; }
.fakten { margin: 0; display: flex; flex-direction: column; max-width: 900px; }
.fakten > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px 28px; padding-block: 18px; border-top: 1px solid var(--linie); }
.fakten dt { color: var(--leise); }
.fakten dd { margin: 0; color: var(--hell); }
.fuss nav[aria-label="Leistungen"] a { color: var(--text); }
@media (max-width: 640px) {
  .weg li, .fakten > div { grid-template-columns: minmax(0, 1fr); }
}

/* Startseite, dritte Fassung: Aussage oben, darunter die hochkante Reihe vom Set */
.auftakt {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 24px clamp(28px, 5vw, 72px); align-items: end;
  padding-block: clamp(20px, 3vw, 44px) clamp(28px, 3.5vw, 48px);
}
.auftakt h1 { font-size: clamp(2rem, 4.3vw, 3.75rem); max-width: none; }
.auftakt-text { display: flex; flex-direction: column; gap: 16px; }
.set-reihe { padding-bottom: clamp(24px, 4vw, 56px); }
.set-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-bottom: 16px; }
.set-kopf h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.set-steuer { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.set-steuer a { margin-right: 8px; }
.pfeil {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid #5C727E; display: grid; place-items: center;
}
.pfeil span { width: 10px; height: 10px; border-left: 2px solid var(--hell); border-bottom: 2px solid var(--hell); transform: translateX(2px) rotate(45deg); }
.pfeil.vor span { transform: translateX(-2px) rotate(-135deg); }
.pfeil:hover { border-color: var(--akzent); }
.pfeil:hover span { border-color: var(--akzent); }
.reels {
  list-style: none; margin: 0; display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 2px max(var(--rand), calc((100vw - 1280px) / 2 + var(--rand))) 6px;
  scroll-padding-inline: max(var(--rand), calc((100vw - 1280px) / 2 + var(--rand)));
}
.reels::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 clamp(180px, 16vw, 215px); aspect-ratio: 9 / 16; scroll-snap-align: start; position: relative; border-radius: 4px; overflow: hidden; background: var(--flaeche); }
.reel figure { margin: 0; width: 100%; height: 100%; }
.reel img, .reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel figcaption {
  position: absolute; inset: auto 0 0 0; padding: 56px 14px 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--hell);
  background: linear-gradient(to top, rgba(11, 31, 43, 0.92), rgba(11, 31, 43, 0));
}
.marke-bts { font-size: 0.8125rem; font-weight: 700; padding: 3px 9px; border-radius: 2px; background: var(--hell); color: var(--grund); }
.reel-link a, .reel-folgen a {
  position: absolute; inset: 0; padding: 14px; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px;
  border: 1px solid var(--linie); border-radius: 4px;
}
.reel-link .marke-bts { position: absolute; top: 14px; left: 14px; }
.reel-link .play { position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 60px; height: 60px; }
.reel-link .play::after { left: 24px; top: 20px; border-width: 9px 0 9px 15px; }
.reel-link b, .reel-folgen b { font-size: 1.375rem; line-height: 1.1; font-weight: 800; font-stretch: 85%; text-transform: uppercase; color: var(--hell); }
.reel-link span:last-child, .reel-folgen span { font-size: 0.9375rem; color: var(--leise); }
.reel-link a:hover, .reel-folgen a:hover { border-color: var(--akzent); }
.reel-link a:hover b, .reel-folgen a:hover b { color: var(--akzent); }
.reel-folgen a { background: var(--flaeche); justify-content: center; }
#filme h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width: 820px) {
  .auftakt { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .reel { flex-basis: 62vw; }
  .pfeil { display: none; }
}

/* Startseite, vierte Fassung: Kapitel mit Nummer und Titel links, Inhalt rechts */
.kapitel {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 20px clamp(24px, 4vw, 64px);
  padding-block: clamp(44px, 6vw, 84px); border-top: 1px solid var(--linie);
}
.kapitel-kopf { display: flex; flex-direction: column; gap: 4px; align-self: start; position: sticky; top: 20px; }
.kapitel-kopf .nr { color: var(--akzent); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.kapitel-kopf h2 { font-size: 1.5rem; line-height: 1.05; }
.kapitel-inhalt { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); min-width: 0; }
.aussage { font-size: clamp(1.375rem, 2.3vw, 2rem); line-height: 1.3; color: var(--text); max-width: 34em; }
.aussage b { color: var(--hell); font-weight: 600; }
.marken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.marken a { display: inline-block; padding: 9px 14px; min-height: 44px; border: 1px solid var(--linie); border-radius: 2px; text-decoration: none; font-size: 1rem; font-weight: 600; }
.marken a:hover { border-color: var(--akzent); }
.leistungslinks i { font-style: normal; font-size: 0.9375rem; font-weight: 600; color: var(--hell); margin-top: 8px; text-decoration: underline; text-underline-offset: 3px; }
.leistungslinks a:hover i { color: var(--akzent); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px 32px; }
.schritte li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid #5C727E; }
.schritte li > b { color: var(--akzent); font-weight: 700; font-variant-numeric: tabular-nums; }
.schritte h3 { font-size: 1.375rem; }
.gruss { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; font-stretch: 80%; line-height: 0.96; }
.frage-gross { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 900; font-stretch: 80%; line-height: 0.92; }
.kontaktdaten { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 1rem; }
.kontaktdaten dt { color: var(--leise); font-size: 0.9375rem; }
.kontaktdaten dd { margin: 0; color: var(--hell); }
.kapitel .raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.kapitel .drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px 36px; }
.kapitel .leistungslinks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.kapitel .fragen { max-width: none; }
.kapitel .eddy .portrait { flex-basis: 260px; max-width: 340px; }
@media (max-width: 820px) {
  .kapitel { grid-template-columns: minmax(0, 1fr); }
  .kapitel-kopf { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
}

/* Aus dem Interface-Audit */
[id] { scroll-margin-top: 24px; }
a, button, summary { touch-action: manipulation; }
#kino { overscroll-behavior: contain; }
.marke { min-height: 44px; justify-content: center; }
.set-steuer a { display: inline-block; padding-block: 10px; }

/* Impressum und Datenschutz */
.rechtstext { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(28px, 5vw, 72px) var(--abschnitt); }
.rechtstext > * { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2.25rem, 5vw, 4rem); margin-bottom: 12px; }
.rechtstext h2 { font-size: 1.375rem; font-weight: 800; font-stretch: 85%; line-height: 1.15; margin-top: 22px; }
.hinweis { font-size: 0.9375rem; color: var(--leise); max-width: none; }

/* Filmseiten: großes Videofenster, Text und Credits, BTS-Kacheln */
.arbeit .bild { transition: transform 0.25s ease; }
.arbeit a:hover .bild, .arbeit a:focus-visible .bild { transform: scale(1.035); }
.film { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 40px); padding-block: clamp(16px, 2.5vw, 32px) var(--abschnitt); }
.filmfenster { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--flaeche); border-radius: 2px; overflow: hidden; transition: transform 0.25s ease; }
.filmfenster:hover { transform: scale(1.012); }
.filmfenster video, .filmfenster iframe, .filmfenster img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.film-start {
  position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  font: inherit; font-size: 1.125rem; font-weight: 700; color: var(--hell); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
}
.film-start .play { position: static; width: 84px; height: 84px; }
.film-start .play::after { left: 34px; top: 29px; border-width: 13px 0 13px 21px; }
.film-start:hover .play, .film-start:focus-visible .play { background: var(--akzent); border-color: var(--akzent); }
.film-start:hover .play::after, .film-start:focus-visible .play::after { border-left-color: var(--grund); }
.film-start .play { position: relative; }
.film-text { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
.film-text > div { display: flex; flex-direction: column; gap: 18px; }
.film h1 { font-size: clamp(2rem, 4.6vw, 4rem); max-width: none; }
.credits { margin: 0; display: flex; flex-direction: column; font-size: 1rem; }
.credits > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4px 20px; padding-block: 10px; border-top: 1px solid var(--linie); }
.credits dt { color: var(--leise); }
.credits dd { margin: 0; color: var(--hell); }
.film h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.bts-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.bts-kacheln li { aspect-ratio: 4 / 5; background: var(--flaeche); border-radius: 2px; overflow: hidden; }
.bts-kacheln img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.bts-kacheln li:hover img { transform: scale(1.04); }
.bts-kacheln .leer { display: flex; align-items: flex-end; padding: 14px; font-size: 0.8125rem; color: var(--leise); }
.blaettern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }
.blaettern a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: 2px; text-decoration: none; }
.blaettern a:last-child { text-align: right; }
.blaettern a:hover { border-color: var(--akzent); }
.blaettern span { font-size: 0.9375rem; color: var(--leise); }
.blaettern b { font-weight: 800; font-stretch: 85%; text-transform: uppercase; color: var(--hell); }
@media (max-width: 820px) { .film-text { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .arbeit .bild, .filmfenster, .bts-kacheln img { transition: none; }
  .arbeit a:hover .bild, .arbeit a:focus-visible .bild, .filmfenster:hover, .bts-kacheln li:hover img { transform: none; }
}
.filmfenster .film-start { z-index: 1; }
.filmfenster img + .film-start { background: linear-gradient(to top, rgba(11, 31, 43, 0.55), rgba(11, 31, 43, 0.1)); }
.arbeit .bild { position: relative; }
.arbeit .bild > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }

/* Einstieg, einspaltig: Headline über die volle Breite, darunter Satz, Leistungen und Buttons in einer Reihe */
.auftakt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.auftakt h1 { font-size: clamp(2rem, 5vw, 4.25rem); }
.auftakt-text { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.auftakt-text .gross { flex: 1 1 280px; max-width: 26em; }

/* ===== Fassung 5: ruhige Typografie, große Aussage links, Leistungen als Liste rechts, Filme als Bildwand ===== */
h1, h2, h3 { text-transform: none; font-stretch: 100%; font-weight: 800; letter-spacing: -0.018em; line-height: 1.04; }
h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.leistungslinks b, .blaettern b, .reel-link b, .reel-folgen b, .leistungen dt, .kino-titel, .kunden ul, .zahlen b, .gruss, .frage-gross { text-transform: none; font-stretch: 100%; letter-spacing: -0.01em; }
.kontakt h2 { letter-spacing: -0.025em; }

.auftakt5 {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 6vw, 96px); align-items: end;
  padding-block: clamp(28px, 5vw, 72px) clamp(36px, 5vw, 64px);
}
.auftakt5 h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.03em; max-width: none; }
.auftakt5 h1 small { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--leise); margin-bottom: 20px; }
.auftakt5-seite { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
.auftakt5-seite > p { font-size: 1.25rem; line-height: 1.45; color: var(--text); max-width: 26em; }
.leistungsliste { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 2px; }
.leistungsliste > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.leistungsliste h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.leistungsliste a { display: inline-block; padding-block: 6px; color: var(--text); text-decoration: none; }
.leistungsliste a:hover { color: var(--akzent); }
.nischen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 0.9375rem; }
.nischen a { color: var(--leise); }

.wand-abschnitt { padding-bottom: clamp(48px, 7vw, 96px); }
.wand-kopf { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 20px; border-top: 1px solid var(--linie); }
.wand-kopf h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.wand-kopf h2 span { font-size: 0.9375rem; font-weight: 500; color: var(--leise); margin-left: 6px; font-variant-numeric: tabular-nums; }
.wand-kopf .filter { gap: 6px; }
.wand-kopf .filter button { font-size: 0.9375rem; font-weight: 500; padding: 6px 12px; min-height: 40px; color: var(--text); }
.wand-kopf .filter button span { color: var(--leise); font-variant-numeric: tabular-nums; margin-left: 4px; }
.wand-kopf .filter button.nische { border-style: dashed; color: var(--leise); }
.wand-kopf .filter button[aria-pressed="true"] { border-style: solid; color: var(--grund); }
.wand-kopf .filter button[aria-pressed="true"] span { color: var(--grund); }
.raster.wand { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.wand .arbeit a { position: relative; display: block; border-radius: 3px; overflow: hidden; }
.wand .arbeit .bild { aspect-ratio: 16 / 9; border-radius: 0; padding: 0; color: transparent; font-size: 0; }
.wand .arbeit .bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 20, 28, 0.92), rgba(7, 20, 28, 0) 58%); }
.wand .arbeit h3 { position: absolute; left: 16px; right: 64px; bottom: 34px; font-size: 1.125rem; font-weight: 700; color: #fff; }
.wand .arbeit .art { position: absolute; left: 16px; right: 64px; bottom: 14px; font-size: 0.8125rem; color: rgba(238, 240, 236, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wand .arbeit .play { right: 14px; bottom: 14px; width: 40px; height: 40px; z-index: 2; }
.wand .arbeit .play::after { left: 15px; top: 12px; border-width: 7px 0 7px 11px; }
.wand .arbeit a:hover h3 { color: #fff; }
.wand .arbeit a:hover .bild, .wand .arbeit a:focus-visible .bild { transform: scale(1.04); }

.ueber5 { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(56px, 8vw, 112px); }
.ueber5 .portrait { max-width: 300px; }
.ueber5-text { display: flex; flex-direction: column; gap: 18px; }
.ueber5-text h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ueber5-text .gross { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.3; color: var(--hell); max-width: 24em; }
.ueber5-text .knopfreihe { padding-top: 10px; }
.fragen5 { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 88px); padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--linie); }
.fragen5 h2 { font-size: 1.25rem; }
.fragen5 .fragen { max-width: none; }
.fragen5 summary { font-size: 1.125rem; font-weight: 600; }
.kontakt5 { display: flex; flex-direction: column; gap: 22px; padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--linie); }
.kontakt5 h2 { font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.95; letter-spacing: -0.035em; }
@media (max-width: 860px) {
  .auftakt5, .ueber5, .fragen5 { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ueber5 .portrait { max-width: 220px; }
}

/* ===== Fassung 6: drei Videofenster neben der Aussage, Leistungen als große aufklappbare Zeilen ===== */
.auftakt6 {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 36px clamp(32px, 5vw, 80px); align-items: center;
  padding-block: clamp(28px, 4vw, 64px) clamp(48px, 6vw, 88px);
}
.auftakt6-text { display: flex; flex-direction: column; gap: 22px; }
.auftakt6 h1 { font-size: clamp(2.25rem, 4.7vw, 4.375rem); line-height: 1; letter-spacing: -0.03em; max-width: none; }
.auftakt6 h1 small { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--leise); margin-bottom: 18px; }
.auftakt6-text > p { font-size: 1.25rem; line-height: 1.45; max-width: 25em; }
.fenster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.fenster { position: relative; display: block; aspect-ratio: 3 / 5; border-radius: 4px; overflow: hidden; background: var(--flaeche); text-decoration: none; transition: transform 0.25s ease; }
.fenster:nth-child(2) { margin-top: 36px; }
.fenster:nth-child(3) { margin-top: 72px; }
.fenster img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fenster .leer { position: absolute; top: 14px; left: 14px; font-size: 0.8125rem; color: var(--leise); }
.fenster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 20, 28, 0.92), rgba(7, 20, 28, 0) 55%); }
.fenster-text { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.fenster-text b { font-size: 1rem; font-weight: 700; line-height: 1.2; color: #fff; }
.fenster-text span { font-size: 0.8125rem; color: rgba(238, 240, 236, 0.78); }
.fenster:hover, .fenster:focus-visible { transform: scale(1.03); color: inherit; }

.leistungen6 { padding-bottom: clamp(48px, 7vw, 96px); }
.leistungen6 > h2 { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--leise); padding-bottom: 14px; }
.zeilen details { border-top: 1px solid var(--linie); }
.zeilen details:last-child { border-bottom: 1px solid var(--linie); }
.zeilen summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 24px;
  padding-block: clamp(16px, 2.2vw, 28px); cursor: pointer; list-style: none;
}
.zeilen summary::-webkit-details-marker { display: none; }
.zeilen summary h3 { grid-column: 1; font-size: clamp(2rem, 5.6vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #7F929B; transition: color 0.15s ease; }
.zeilen summary:hover h3, .zeilen details[open] summary h3 { color: var(--hell); }
.zeilen .beispiele { grid-column: 1; grid-row: 2; font-size: 1rem; color: var(--leise); }
.zeilen details[open] .beispiele { display: none; }
.zeilen .anzahl { grid-column: 2; grid-row: 1; font-size: 1rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeilen .auf { grid-column: 3; grid-row: 1; position: relative; width: 22px; height: 22px; align-self: center; }
.zeilen .auf::before, .zeilen .auf::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--hell); }
.zeilen .auf::after { transform: rotate(90deg); transition: transform 0.2s ease; }
.zeilen details[open] .auf::after { transform: rotate(0deg); }
.zeilen details[open] .auf::before, .zeilen details[open] .auf::after { background: var(--akzent); }
.zeilen .filter { gap: 6px; padding-bottom: 16px; }
.zeilen .filter button { font-size: 0.9375rem; font-weight: 500; padding: 6px 14px; min-height: 40px; }
.zeilen .filter button span { color: var(--leise); margin-left: 4px; font-variant-numeric: tabular-nums; }
.zeilen .filter button[aria-pressed="true"] span { color: var(--grund); }
.zeilen .raster.wand { padding-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 860px) {
  .auftakt6 { grid-template-columns: minmax(0, 1fr); }
  .fenster:nth-child(2) { margin-top: 18px; }
  .fenster:nth-child(3) { margin-top: 36px; }
  .fenster-text b { font-size: 0.875rem; }
  .zeilen summary { grid-template-columns: minmax(0, 1fr) auto; }
  .zeilen .anzahl { display: none; }
  .zeilen .auf { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .fenster, .zeilen .auf::after, .zeilen summary h3 { transition: none; } .fenster:hover { transform: none; } }
/* Fassung 6b: Videofenster größer, Alt-Text ohne Bild ausblenden */
@media (min-width: 900px) { .auftakt6 { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; } }
.fenster img { color: transparent; font-size: 0; }
.fenster { aspect-ratio: 9 / 16; }
@media (min-width: 900px) { .auftakt6 h1 { font-size: clamp(2.25rem, 3.7vw, 3.5rem); } }

/* ===== Fassung 7: Vom Set als Feed, Text links, vier Reels rechts ===== */
.feed7 { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 36px clamp(32px, 5vw, 80px); align-items: end; padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--linie); }
.feed7-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.feed7-text h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; }
.feed7-text p { font-size: 1.125rem; line-height: 1.45; max-width: 18em; }
.feed7-konto { font-size: 1.125rem; font-weight: 700; color: var(--hell); text-decoration-color: var(--akzent); text-underline-offset: 5px; }
.feed7-konto:hover { color: var(--akzent); }
.feed7-reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.feedkarte { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: var(--flaeche); text-decoration: none; transition: transform 0.25s ease; }
.feedkarte img, .feedkarte video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.feedkarte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 20, 28, 0.9), rgba(7, 20, 28, 0) 50%); }
.feedkarte .play { position: absolute; top: 12px; right: 12px; left: auto; bottom: auto; z-index: 1; }
.feedtext { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.feedtext b { font-size: 1rem; font-weight: 700; line-height: 1.2; color: #fff; }
.feedtext span { font-size: 0.8125rem; color: rgba(238, 240, 236, 0.78); }
.feedkarte:hover, .feedkarte:focus-visible { transform: scale(1.03); }
@media (max-width: 899px) {
  .feed7 { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .feed7-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .feedkarte { transition: none; } .feedkarte:hover { transform: none; } }

/* ===== Fassung 8: Filmvorschau als Bildstreifen neben jeder Kategorie, keine Zahlen ===== */
.zeilen summary { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 4px clamp(20px, 3vw, 48px); }
.zeilen summary h3 { white-space: nowrap; }
.zeilen .auf { grid-column: 3; }
.streifen { grid-column: 2; grid-row: 1; display: block; overflow: hidden; height: clamp(64px, 7.4vw, 108px); opacity: 0.72; transition: opacity 0.2s ease;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.zeilen summary:hover .streifen { opacity: 1; }
.zeilen details[open] .streifen { visibility: hidden; }
.streifen .band { display: flex; gap: 8px; height: 100%; width: max-content; margin-left: auto; }
.streifen:not(.lauf) { -webkit-mask-image: none; mask-image: none; }
.streifen .stueck { flex: none; height: 100%; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: var(--flaeche); display: flex; align-items: flex-end; }
.streifen .stueck img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.streifen .leer i { font-style: normal; font-size: 0.75rem; line-height: 1.2; color: var(--leise); padding: 8px 10px; }
.streifen.lauf .band { margin-left: 0; animation: band-lauf calc(var(--n) * 5s) linear infinite; }
.zeilen summary:hover .streifen.lauf .band { animation-play-state: paused; }
@keyframes band-lauf { to { transform: translateX(calc(-50% - 4px)); } }
@media (max-width: 860px) {
  .zeilen summary { grid-template-columns: minmax(0, 1fr) auto; }
  .zeilen summary h3 { grid-column: 1; grid-row: 1; }
  .zeilen .auf { grid-column: 2; grid-row: 1; }
  .streifen { grid-column: 1 / -1; grid-row: 2; height: 72px; margin-top: 12px; }
  .streifen .band { margin-left: 0; }
  .zeilen details[open] .streifen { display: none; }
}
@media (prefers-reduced-motion: reduce) { .streifen.lauf .band { animation: none; } .streifen.lauf { overflow-x: auto; } }
.streifen .band { gap: 0; }
.streifen .stueck { margin-right: 8px; }
.streifen:not(.lauf) .stueck:last-child { margin-right: 0; }
@keyframes band-lauf { to { transform: translateX(-50%); } }
.streifen .band { background: none; border: 0; padding: 0; }

/* ===== Fassung 9: Technik als Kacheln, Kern groß, Rest aufklappbar ===== */
.technik9 { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--linie); }
.technik9 > h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: clamp(24px, 3vw, 40px); }
.tk-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tk { background: var(--flaeche); border-radius: 4px; padding: clamp(18px, 2vw, 26px); }
.tk h3 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--akzent); margin-bottom: 14px; }
.tk ul { list-style: none; margin: 0; padding: 0; }
.tk-kern li { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 700; line-height: 1.25; color: var(--hell); padding-block: 7px; border-top: 1px solid var(--linie); }
.tk-kern li:first-child { border-top: 0; padding-top: 0; }
.tk details { margin-top: 14px; border-top: 1px solid var(--linie); }
.tk summary { cursor: pointer; list-style: none; padding-top: 12px; font-size: 0.9375rem; color: var(--leise); display: flex; justify-content: space-between; align-items: center; }
.tk summary::-webkit-details-marker { display: none; }
.tk summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--hell); }
.tk details[open] summary::after { content: "–"; color: var(--akzent); }
.tk summary:hover { color: var(--hell); }
.tk-alles { padding-top: 10px; }
.tk-alles li { font-size: 0.9375rem; line-height: 1.4; color: var(--text); padding-block: 4px; }
@media (max-width: 899px) { .tk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tk-raster { grid-template-columns: minmax(0, 1fr); } }

/* ===== Fassung 10: Filmseiten mit Credits wie bei Björn, Gruppen, Vom Set Wand, Fenster für Filme und Fotos ===== */
.credits-reihe { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px 32px; padding-block: 4px 18px; border-bottom: 1px solid var(--linie); }
.credits-reihe div { display: flex; flex-direction: column; gap: 4px; }
.credits-reihe dt { font-size: 0.875rem; color: var(--leise); }
.credits-reihe dd { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 700; color: var(--hell); }
.alle-credits { align-self: start; border-top: 1px solid var(--linie); }
.alle-credits summary { cursor: pointer; list-style: none; padding-block: 12px; color: var(--leise); display: flex; justify-content: space-between; }
.alle-credits summary::-webkit-details-marker { display: none; }
.alle-credits summary::after { content: "+"; color: var(--hell); font-size: 1.25rem; line-height: 1; }
.alle-credits[open] summary::after { content: "–"; color: var(--akzent); }
.alle-credits summary:hover { color: var(--hell); }
.film-text p + p { margin-top: -6px; }
.gruppe, .vomset { display: flex; flex-direction: column; gap: 18px; }
.gruppe-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.kino-auf { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; width: 100%; cursor: pointer; }
.kino-auf .bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--flaeche); }
.kino-auf .bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.25s ease; }
.kino-auf .play { position: absolute; right: 12px; bottom: 12px; left: auto; top: auto; z-index: 1; }
.kino-auf b { font-size: 1.0625rem; font-weight: 700; color: var(--hell); }
.kino-auf b + span { font-size: 0.9375rem; color: var(--leise); margin-top: -4px; }
.kino-auf:hover .bild img, .kino-auf:focus-visible .bild img { transform: scale(1.04); }
.kino-auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.bts-wand { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.bts-wand li { min-width: 0; }
.bts-wand li.breit { grid-column: span 2; }
.bts-wand .kino-auf > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; transition: transform 0.25s ease; }
.bts-wand li.breit .kino-auf > img { aspect-ratio: 16 / 10; }
.bts-wand .kino-auf:hover > img { transform: scale(1.02); }
@media (max-width: 860px) { .bts-wand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kino2 { width: min(1200px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 4px; background: #000; color: var(--text); }
.kino2::backdrop { background: rgba(5, 14, 20, 0.88); }
.kino2-flaeche { display: flex; justify-content: center; align-items: center; background: #000; }
.kino2-flaeche iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.kino2-flaeche img { max-width: 100%; max-height: 82vh; width: auto; height: auto; display: block; }
.kino2-titel { padding: 12px 18px 16px; margin: 0; font-weight: 700; color: var(--hell); background: var(--grund); max-width: none; }
.kino2-zu { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 8px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; font: inherit; font-size: 0.9375rem; cursor: pointer; }
.kino2-zu:hover { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }
.filmfenster a.film-start { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .kino-auf .bild img, .bts-wand .kino-auf > img { transition: none; } }
.bts-wand .kino-auf > img { height: auto; display: block; }
.film-text { align-items: start; }

/* ===== Fassung 11: Social im Hochformat 9:16 ===== */
.film-hoch { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px); row-gap: clamp(22px, 3vw, 40px); align-items: start; }
.film-hoch > * { grid-column: 1 / -1; }
.film-hoch > .filmfenster { grid-column: 1; grid-row: 2 / span 2; }
.film-hoch > .credits-reihe { grid-column: 2; grid-row: 2; }
.film-hoch > .film-text { grid-column: 2; grid-row: 3; grid-template-columns: minmax(0, 1fr); }
.filmfenster.hoch { aspect-ratio: 9 / 16; width: 100%; max-height: 82vh; }
@media (max-width: 760px) {
  .film-hoch { grid-template-columns: minmax(0, 1fr); }
  .film-hoch > .filmfenster, .film-hoch > .credits-reihe, .film-hoch > .film-text { grid-column: 1; grid-row: auto; }
  .filmfenster.hoch { max-width: 420px; margin-inline: auto; }
}
.raster.wand.hochkant { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.arbeit.hoch .bild { aspect-ratio: 9 / 16; }
.raster.wand:not(.hochkant) .arbeit.hoch .bild { aspect-ratio: 16 / 9; }
/* Querformat-Film in einer Hochkant-Reihe: zwei Spalten breit, gleiche Höhe wie die Hochkant-Kacheln */
@media (min-width: 560px) {
  .raster.wand.hochkant .arbeit:not(.hoch) { grid-column: span 2; }
  .raster.wand.hochkant .arbeit:not(.hoch) .bild { aspect-ratio: 15 / 13; }
}
.bts-wand li.hoch { grid-row: span 2; }
.bts-wand li.hoch .bild { aspect-ratio: 9 / 16; }
.kino2.hoch { width: auto; }
.kino2.hoch .kino2-flaeche iframe { width: min(46vh, 90vw); aspect-ratio: 9 / 16; height: auto; }
.film-hoch { grid-template-rows: auto auto 1fr; }
.kino2.hoch { width: fit-content; max-width: 94vw; }
.kino2.hoch .kino2-titel { max-width: min(46vh, 90vw); }
.blaettern a { min-width: 0; } .blaettern b { overflow-wrap: anywhere; hyphens: auto; }

/* ===== Fassung 12: Kundenstimmen als Nachrichtenverlauf, verlinkte Namen in den Credits ===== */
.credits-reihe dd a, .credits dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.credits-reihe dd a:hover, .credits dd a:hover { color: var(--akzent); }
.film-hoch { grid-template-rows: auto auto auto auto 1fr; }
.film-hoch > .filmfenster { grid-row: 2 / span 4; }
.film-hoch > .stimmen { grid-column: 2; grid-row: 4; }
.stimmen { display: flex; flex-direction: column; gap: 16px; }
.stimmen h2 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--leise); }
.stimmen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stimme { max-width: 82%; }
.stimme:nth-child(odd) { align-self: flex-start; }
.stimme:nth-child(even) { align-self: flex-end; }
.stimme blockquote { margin: 0; padding: 14px 18px; background: var(--flaeche); border-radius: 18px 18px 18px 4px; }
.stimme:nth-child(even) blockquote { border-radius: 18px 18px 4px 18px; }
.stimme p { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--text); max-width: none; }
.stimme b { color: var(--hell); font-weight: 700; }
.stimme.akzent blockquote { background: var(--akzent); }
.stimme.akzent p, .stimme.akzent b { color: var(--grund); }
.stimme.gross { max-width: 100%; align-self: stretch; }
.stimme.gross blockquote { background: none; padding: 0 0 8px; border-radius: 0; }
.stimme.gross p { font-size: clamp(1.625rem, 2.8vw, 2.375rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--hell); }
.stimme.gross b { color: var(--akzent); font-weight: 800; }
.stimmen-von { margin: 4px 0 0; font-size: 0.875rem; color: var(--leise); }
@media (max-width: 760px) { .film-hoch > .stimmen { grid-column: 1; grid-row: auto; } .stimme { max-width: 92%; } }

/* ===== Fassung 13: drei Fenster in 16:9, ein großes und zwei kleine ===== */
.fenster3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fenster3 .fenster { aspect-ratio: 16 / 9; margin-top: 0 !important; }
.fenster3 .fenster:first-child { grid-column: 1 / -1; }
.fenster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--flaeche); }
.fenster3 .fenster:not(:first-child) .fenster-text b { font-size: 0.9375rem; }
.kino-auf .bild .clip, .arbeit .bild .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.arbeit .bild .play, .kino-auf .bild .play { z-index: 2; }
@media (min-width: 900px) { .auftakt6 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

/* ===== Fassung 14: BTS als Reel-Raster wie auf Instagram, neuer Über-mich-Text ===== */
.reels14 { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 22px; }
.reels14-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.reels14-kopf h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; }
.reels14-konto { color: var(--text); text-decoration-color: var(--akzent); text-underline-offset: 5px; }
.reels14-konto:hover { color: var(--akzent); }
.reels14-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.reels14-raster a { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--flaeche); }
.reels14-raster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease, opacity 0.3s ease; }
.reels14-raster a:hover img, .reels14-raster a:focus-visible img { transform: scale(1.04); opacity: 0.85; }
.reel-play { position: absolute; top: 10px; right: 10px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
@media (max-width: 760px) { .reels14-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .reels14-raster img { transition: none; } }
.ueber5-text h2 small { display: block; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--leise); margin-bottom: 14px; }
.ueber5-text h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.ueber5-text h3 { font-size: 1.125rem; margin-top: 6px; }
.ueber5-text p { max-width: 38em; }

/* ===== Fassung 15: Konzept "Zwei Welten" ===== */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --grund: #0E1A1F; --flaeche: #14262C; --linie: #22363D;
  --text: #D5DDDC; --hell: #EEF1EE; --leise: #9DB0B2; --akzent: #C9F06B;
  --schrift: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --rund: 10px;
}
body { font-family: var(--schrift); }
h1, h2, h3, .marke b, .blaettern b, .kino-titel, .leistungslinks b { font-family: var(--schrift); font-stretch: 100%; text-transform: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.035em; }
.marke b { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.knopf { border-radius: 999px; font-weight: 700; }
.knopf.zweit { border-radius: 999px; }
.filmfenster, .arbeit .bild, .kino-auf .bild, .bts-wand .kino-auf > img, .fenster, .portrait img, .tk, .stueck { border-radius: var(--rund); }
.stimme blockquote { border-radius: 18px 18px 18px 4px; }

/* Auftakt: zwei Hälften, in der Mitte die Aussage */
.welten { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: min(84svh, 780px); min-height: 520px; background: #000; }
.welt { position: relative; overflow: hidden; }
.welt video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welt.doku video { filter: saturate(0.8) contrast(1.08); }
.welt::after { content: ""; position: absolute; inset: 0; }
.welt.werbung::after { background: linear-gradient(90deg, rgba(14,26,31,.15), rgba(14,26,31,.82)); }
.welt.doku::after { background: linear-gradient(270deg, rgba(14,26,31,.15), rgba(14,26,31,.82)); }
.welt-text { position: absolute; bottom: 28px; z-index: 1; }
.werbung .welt-text { left: var(--rand); } .doku .welt-text { right: var(--rand); text-align: right; }
.welt-text small { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--akzent); }
.welt-text p { margin: 2px 0 0; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 500; color: var(--hell); max-width: none; }
.welten-mitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 2; width: min(760px, 86%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.welten-mitte h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 0.96; letter-spacing: -0.045em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); max-width: none; }
.welten-mitte h1 small { display: block; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--text); margin-bottom: 16px; text-shadow: none; }
.welten-mitte > p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text); max-width: 30em; margin: 0; }
.welten-mitte .knopfreihe { justify-content: center; }
.welten-mitte .knopf.zweit { background: rgba(14,26,31,.45); backdrop-filter: blur(6px); }

/* Kundenband */
.kundenband { border-block: 1px solid var(--linie); }
.kundenband ul { list-style: none; margin: 0 auto; padding: 22px var(--rand); max-width: 1440px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; }
.kundenband li { font-size: 1.0625rem; font-weight: 600; color: var(--leise); letter-spacing: -0.01em; }

/* Ausgewählte Arbeiten: ein großes, zwei schmale Fenster */
.auswahl { padding-block: clamp(48px, 6vw, 88px) 0; display: flex; flex-direction: column; gap: 22px; }
.auswahl > h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.auswahl .fenster3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.auswahl .fenster3 .fenster { aspect-ratio: auto; height: clamp(320px, 34vw, 520px); grid-column: auto; margin: 0 !important; }
.auswahl .fenster3 .fenster:first-child { grid-column: auto; }
.auswahl .fenster-text b { font-size: 1.0625rem; }
@media (max-width: 860px) {
  .welten { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; min-height: 0; }
  .welt { height: 34svh; min-height: 220px; }
  .welten-mitte { position: static; transform: none; width: auto; padding: 32px var(--rand) 40px; background: var(--grund); grid-row: 2; order: 2; }
  .welten { display: flex; flex-direction: column; }
  .welt.doku { order: 3; }
  .welt-text { bottom: 16px; }
  .auswahl .fenster3 { grid-template-columns: 1fr; }
  .auswahl .fenster3 .fenster { height: auto; aspect-ratio: 16 / 9; }
}
.leistungen6 { padding-top: clamp(56px, 7vw, 104px); }
.leistungen6 > h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--hell); letter-spacing: -0.035em; padding-bottom: 18px; }
.zeilen summary h3 { font-weight: 700; letter-spacing: -0.04em; }
.portrait img { object-fit: cover; aspect-ratio: 4 / 5; }
.welt-text small { font-size: clamp(0.9375rem, 1.2vw, 1.125rem); }
/* Schlagworte rahmen das Videofenster unten ein */
.welten-leiste { position: absolute; left: var(--rand); right: var(--rand); bottom: 26px; z-index: 3; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.welten-leiste a { font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 600; letter-spacing: 0.06em; color: var(--akzent); text-decoration: none; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.welten-leiste a:hover, .welten-leiste a:focus-visible { color: #fff; }
@media (max-width: 860px) {
  .welten-leiste { position: static; order: 4; justify-content: center; padding: 18px var(--rand) 22px; background: var(--grund); border-top: 1px solid var(--linie); gap: 10px 20px; }
}
/* Drei Filme als Hintergrund */
.welten { grid-template-columns: repeat(3, 1fr); }
.welt::after { background: rgba(14,26,31,.55) !important; }
.welt.eins::after { background: linear-gradient(90deg, rgba(14,26,31,.25), rgba(14,26,31,.7)) !important; }
.welt.drei::after { background: linear-gradient(270deg, rgba(14,26,31,.25), rgba(14,26,31,.7)) !important; }
.welt.zwei::after { background: rgba(14,26,31,.72) !important; }
.welt + .welt { border-left: 1px solid rgba(0,0,0,.4); }
@media (max-width: 860px) {
  .welt { height: 22svh; min-height: 150px; }
  .welt.eins { order: 1; } .welt.zwei { order: 2; } .welt.drei { order: 3; }
  .welten-mitte { order: 4; } .welten-leiste { order: 5; }
  .welt + .welt { border-left: 0; border-top: 1px solid rgba(0,0,0,.4); }
}
@media (max-width: 860px) {
  .welten { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; min-height: 0; }
  .welt { height: 78svh; min-height: 520px; grid-row: 1; }
  .welt + .welt { border-top: 0; border-left: 1px solid rgba(0,0,0,.4); }
  .welt::after { background: rgba(14,26,31,.62) !important; }
  .welten-mitte { position: absolute; left: 50%; top: 39svh; transform: translate(-50%, -50%); width: 90%; padding: 0; background: none; gap: 16px; }
  .welten-mitte h1 { font-size: clamp(2.1rem, 9.5vw, 2.75rem); }
  .welten-leiste { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) { .welten { grid-template-rows: auto auto; } }
@media (max-width: 860px) { .welten-mitte { grid-row: 1; grid-column: 1 / -1; top: 50%; } }
/* Stärkere Vignette hinter dem Auftakt-Text */
.welten-mitte { isolation: isolate; }
.welten-mitte::before { content: ""; position: absolute; inset: -22% -30%; z-index: -1; background: radial-gradient(closest-side, rgba(8,15,18,.86) 0%, rgba(8,15,18,.7) 45%, rgba(8,15,18,.35) 75%, rgba(8,15,18,0) 100%); pointer-events: none; }
.welten-mitte h1 { text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.welten-mitte > p, .welten-mitte h1 small { color: var(--hell); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.welten { overflow: hidden; }

/* ===== Fassung 16: Text über die ganze Breite, alle drei Filme gleich sichtbar ===== */
.welten-mitte::before { display: none; }
.welt::after, .welt.eins::after, .welt.zwei::after, .welt.drei::after { background: rgba(14,26,31,.18) !important; }
.welten::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8,15,18,.92) 0%, rgba(8,15,18,.78) 28%, rgba(8,15,18,.35) 55%, rgba(8,15,18,0) 75%); }
.welten-mitte { left: var(--rand); right: var(--rand); top: auto; bottom: 88px; transform: none; width: auto; text-align: left; align-items: stretch; gap: 20px; z-index: 3; }
.welten-mitte h1 { font-size: clamp(2.4rem, 5.6vw, 6rem); line-height: 0.95; max-width: none; }
.welten-mitte h1 small { margin-bottom: 14px; }
.welten-fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; }
.welten-fuss p { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--hell); text-shadow: 0 1px 12px rgba(0,0,0,.6); max-width: none; }
.welten-mitte .knopfreihe { justify-content: flex-start; }
.welten-leiste { border-top: 1px solid rgba(238,241,238,.18); padding-top: 18px; bottom: 22px; }
@media (max-width: 860px) {
  .welten-mitte { position: absolute; grid-row: 1; grid-column: 1 / -1; left: 20px; right: 20px; top: auto; bottom: 28px; transform: none; width: auto; padding: 0; }
  .welten-mitte h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .welten-fuss { flex-direction: column; align-items: flex-start; }
  .welten::after { background: linear-gradient(to top, rgba(8,15,18,.95) 0%, rgba(8,15,18,.8) 40%, rgba(8,15,18,.2) 75%, rgba(8,15,18,0) 100%); }
  .welten-leiste { border-top: 1px solid var(--linie); padding-top: 18px; position: static; z-index: 3; }
}

/* ===== Fassung 17: Kunden im Auftakt, Kategorien technisch und zurückhaltend ===== */
.welten-leiste { list-style: none; margin: 0; }
.welten-leiste li { font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 600; letter-spacing: 0.04em; color: var(--akzent); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.leistungen6 > h2 { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; color: var(--leise); padding-bottom: 12px; }
.zeilen summary { padding-block: 14px; gap: 4px 28px; }
.zeilen summary h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.zeilen summary:hover h3, .zeilen details[open] summary h3 { color: var(--akzent); }
.streifen { height: clamp(40px, 3.6vw, 54px); opacity: .85; }
.streifen .stueck { border-radius: 4px; }
.streifen .leer i { font-size: 0.6875rem; padding: 4px 6px; }
.zeilen .auf { width: 14px; height: 14px; }
.zeilen .auf::before, .zeilen .auf::after { top: 6px; height: 1.5px; }
.zeilen .filter { padding-top: 4px; }
@media (max-width: 860px) { .streifen { height: 44px; margin-top: 8px; } }
#filme > h2 { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; color: var(--leise); padding-bottom: 12px; }
.welten-leiste { padding-left: 0; }
@media (max-width: 860px) { .welten-leiste { padding: 18px var(--rand) 22px; } }

/* ===== Fassung 18: Projektliste Über mich ===== */
.projekte dd b { color: var(--hell); font-weight: 600; margin-right: 10px; }
.projekte dd a { color: var(--akzent); text-underline-offset: 4px; margin-right: 12px; white-space: nowrap; }
.projekte dd span { display: block; margin-top: 4px; color: var(--leise); font-size: 0.9375rem; }

/* ===== Fassung 18: jeder Abschnitt mit eigener Hintergrundfarbe ===== */
main > section { --bg: var(--grund); background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
#filme { --bg: #0E1A1F; }
#set { --bg: #0F333D; border-top: 0; }
#technik { --bg: #0F2140; border-top: 0; }
#technik .tk { background: #183058; }
/* Technik: Nachtblau mit Signatur-Akzent */
#technik > h2 { color: #EEF4FA; }
#technik .tk h3 { color: var(--akzent); }
#technik .tk-kern li { color: #EEF4FA; border-top-color: #26406B; }
#technik .tk details { border-top-color: #26406B; }
#technik .tk summary { color: #9DB6CC; }
#technik .tk summary:hover { color: #EEF4FA; }
#technik .tk summary::after { color: var(--akzent); }
#technik .tk details[open] summary::after { color: var(--akzent); }
#technik .tk-alles li { color: #D6E3EE; }
#eddy { --bg: #E8E6DD; color: #23302F; padding-block: clamp(56px, 7vw, 104px); }
#eddy h2, #eddy h3, #eddy .gross { color: #0E1A1F; }
#eddy h2 small { color: #5B6B6A; }
#eddy p { color: #2E3B3A; }
#eddy .knopf.zweit { color: #0E1A1F; border-color: #0E1A1F; }
#eddy .knopf { background: #0E1A1F; color: #E8E6DD; border-color: #0E1A1F; }
.fragen5 { --bg: #121F25; }
#kontakt { --bg: #C9F06B; color: #0E1A1F; padding-block: clamp(64px, 8vw, 120px); }
#kontakt h2, #kontakt .gross { color: #0E1A1F; }
#kontakt .knopf { background: #0E1A1F; color: #C9F06B; border-color: #0E1A1F; }
#kontakt .knopf.zweit { background: transparent; color: #0E1A1F; border-color: #0E1A1F; }
#eddy .knopf.zweit { background: transparent !important; color: #0E1A1F !important; border: 1px solid #0E1A1F; }

/* Headline Zeile zwei: dezent, andere Schrift, Akzentfarbe */
.welten-mitte h1 .unterzeile { display: block; margin-top: 0.35em; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 0.42em; line-height: 1.15; letter-spacing: 0.01em; color: var(--akzent); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
@media (max-width: 860px) { .welten-mitte h1 .unterzeile { font-size: 0.55em; } }

/* Dreh anfragen: direkt neben den Text statt an den rechten Rand */
.welten-fuss { justify-content: flex-start; align-items: center; gap: 20px clamp(32px, 4vw, 56px); }

/* Kundenleiste: Kunden verlinken auf ihre Projektseite */
.welten-leiste a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .2s ease, text-decoration-color .2s ease; }
.welten-leiste a:hover, .welten-leiste a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* BTS-Kacheln: runde Ecken wie App-Icons auf dem iPhone */
.reels14-raster { gap: 10px; }
.reels14-raster a { border-radius: 26px; isolation: isolate; }
@media (max-width: 760px) { .reels14-raster { gap: 8px; } .reels14-raster a { border-radius: 18px; } }
.reels14-raster .reel-play { top: 16px; right: 16px; }

/* Kontakt "Wann drehen wir?": dezenter, kompakter */
#kontakt { padding-block: clamp(44px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel knoepfe" "text knoepfe"; align-items: center; gap: 8px clamp(24px, 4vw, 56px); }
#kontakt h2 { grid-area: titel; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
#kontakt .gross { grid-area: text; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.45; margin: 0; max-width: none; }
#kontakt .knopfreihe { grid-area: knoepfe; margin: 0; }
@media (max-width: 760px) { #kontakt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "text" "knoepfe"; gap: 12px; } #kontakt .knopfreihe { margin-top: 10px; } }

/* Mobil: Hero-Text liegt fest im Videobereich, nichts überlagert die Kundenleiste */
@media (max-width: 860px) {
  .welten-mitte { position: relative; grid-row: 1; grid-column: 1 / -1; align-self: end; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: auto; margin: 96px 20px 28px; z-index: 3; }
  .welten-fuss { gap: 18px; }
  .welten-mitte .knopfreihe { width: 100%; justify-content: flex-start; }
  .welten-leiste { position: relative; left: auto; right: auto; bottom: auto; z-index: 3; }
}

/* Mobil: schlankes Menü hinter einem Button */
.menue-knopf { display: none; }
@media (max-width: 760px) {
  .mit-menue .kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 0; padding-block: 14px; }
  .mit-menue .menue-knopf { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--linie); border-radius: 999px; padding: 9px 16px; color: var(--hell); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
  .menue-striche { display: inline-flex; flex-direction: column; gap: 5px; width: 16px; }
  .menue-striche i { display: block; height: 1.5px; background: currentColor; transition: transform .2s ease; }
  .kopf.offen .menue-striche i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .kopf.offen .menue-striche i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .mit-menue .navi { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
  .mit-menue .kopf.offen .navi { display: flex; }
  .mit-menue .navi a { padding-block: 14px; border-top: 1px solid var(--linie); font-size: 1.125rem; }
}

/* Mobil: Videos fest in die drei Spalten setzen (sonst rutschen sie neben den Text in unsichtbare Spalten) und Unterzeile bündig links */
@media (max-width: 860px) {
  .welten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .welt.eins { grid-column: 1; grid-row: 1; }
  .welt.zwei { grid-column: 2; grid-row: 1; }
  .welt.drei { grid-column: 3; grid-row: 1; display: block; }
  .welten-fuss { align-items: flex-start; }
  .welten-fuss p { width: 100%; text-align: left; }
}

/* Vorschau-Streifen: langsamer Loop, auf iPhone sichtbar (Safari verschluckt animierte Inhalte unter einer Maske) */
.streifen.lauf { -webkit-mask-image: none; mask-image: none; position: relative; transform: translateZ(0); }
.streifen.lauf .band { animation-duration: calc(var(--n) * 14s); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@media (hover: none) { .zeilen summary:hover .streifen.lauf .band { animation-play-state: running; } }

/* BTS: Raster wie der Reels-Tab der Instagram-App (eng, ohne Rundung, kleiner) */
.reels14-raster { gap: 2px; max-width: 935px; }
.reels14-raster a { border-radius: 0; }
.reels14-raster .reel-play { top: 8px; right: 8px; }
.reels14-raster a:hover img, .reels14-raster a:focus-visible img { transform: none; opacity: 0.8; }
@media (max-width: 760px) {
  .reels14-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5px; margin-inline: calc(-1 * var(--rand)); }
  .reels14-raster a { border-radius: 0; }
  .reels14-raster > li:nth-child(n+10) { display: none; }
  .reels14-raster .reel-play { top: 6px; right: 6px; transform: scale(.8); transform-origin: top right; }
}

/* BTS: Kacheln wieder rund wie App-Icons */
.reels14-raster { gap: 8px; }
.reels14-raster a { border-radius: 26px; isolation: isolate; }
.reels14-raster .reel-play { top: 14px; right: 14px; }
@media (max-width: 760px) {
  .reels14-raster { gap: 6px; margin-inline: 0; }
  .reels14-raster a { border-radius: 18px; }
  .reels14-raster .reel-play { top: 10px; right: 10px; }
}

/* Technik mobil: zwei Kacheln pro Reihe, kompakter */
@media (max-width: 560px) {
  .tk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tk { padding: 14px 12px; }
  .tk h3 { font-size: 0.8125rem; margin-bottom: 10px; }
  .tk-kern li { font-size: 0.9375rem; line-height: 1.25; padding-block: 6px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .tk summary { font-size: 0.8125rem; padding-top: 10px; }
  .tk-alles li { font-size: 0.8125rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .tk-raster { align-items: stretch; }
  .tk { display: flex; flex-direction: column; }
  .tk details { margin-top: auto; }
  .tk-kern { margin-bottom: 12px !important; }
}

/* BTS mobil: nur zwei Reihen */
@media (max-width: 760px) { .reels14-raster > li:nth-child(n+7) { display: none; } }

/* ===== Filme: vier ruhige Reihen zum Wischen statt Aufklapp-Liste mit Laufband ===== */
.filme7 { padding-block: clamp(56px, 7vw, 104px); }
.filme7 > h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; color: var(--hell); margin-bottom: clamp(28px, 3.5vw, 48px); }
.reihen { display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 64px); }
.reihe { min-width: 0; }
.reihe-kopf { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.reihe-kopf h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--hell); margin: 0; }
.reihe-zahl { font-size: 0.875rem; color: var(--leise); }
.reihe-pfeile { margin-left: auto; display: flex; gap: 8px; align-self: center; }
.pfeil { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--hell); cursor: pointer; position: relative; transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
.pfeil::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-65%, -50%) rotate(45deg); }
.pfeil.zurueck::after { transform: translate(-35%, -50%) rotate(-135deg); }
.pfeil:hover:not(:disabled) { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }
.pfeil:disabled { opacity: .3; cursor: default; }
.reihe.passt .reihe-pfeile { display: none; }
.reihe .filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Schiene: native Wischen, kein Laufband */
.filme7 .schiene { list-style: none; display: flex; gap: 12px; margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filme7 .schiene::-webkit-scrollbar { display: none; }
.filme7 .schiene > .arbeit { flex: 0 0 auto; width: clamp(280px, 31vw, 440px); scroll-snap-align: start; grid-column: auto !important; }
.filme7 .schiene > .arbeit[hidden] { display: none; }
.filme7 .schiene .arbeit .bild, .filme7 .schiene .arbeit.hoch .bild { aspect-ratio: 16 / 9 !important; background: linear-gradient(135deg, #1B3036, #0F1C21); }
.filme7 .schiene.hochkant > .arbeit { width: clamp(170px, 17vw, 240px); }
.filme7 .schiene.hochkant .arbeit .bild { aspect-ratio: 9 / 16 !important; }
.filme7 .wand .arbeit a { border-radius: 14px; isolation: isolate; }
.filme7 .wand .arbeit .bild { border-radius: 14px; transform: none !important; }
.filme7 .wand .arbeit .bild > img { transition: transform .4s ease; }
.filme7 .wand .arbeit a:hover .bild > img, .filme7 .wand .arbeit a:focus-visible .bild > img { transform: scale(1.04); }
.filme7 .wand .arbeit h3 { left: 16px; right: 16px; bottom: 32px; font-size: 1.0625rem; line-height: 1.2; }
.filme7 .wand .arbeit .art { left: 16px; right: 16px; bottom: 13px; }
.filme7 .wand .arbeit .play { top: 12px; right: 12px; bottom: auto; width: 34px; height: 34px; }
.filme7 .wand .arbeit .play::after { left: 13px; top: 10px; border-width: 6px 0 6px 10px; }
.filme7 .schiene.hochkant .arbeit h3 { font-size: 0.9375rem; }
@media (max-width: 760px) {
  .reihe-pfeile { display: none; }
  .filme7 .schiene { gap: 10px; }
  .filme7 .schiene > .arbeit { width: 78vw; }
  .filme7 .schiene.hochkant > .arbeit { width: 44vw; }
  .filme7 .wand .arbeit a, .filme7 .wand .arbeit .bild { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .filme7 .wand .arbeit .bild > img { transition: none; } }
.reihe .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); }
.reihe .filter::-webkit-scrollbar { display: none; }
.reihe .filter button { flex: none; border-radius: 999px; padding: 7px 14px; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--linie); background: transparent; color: var(--text); cursor: pointer; }
.reihe .filter button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }

/* REFERENZEN-START (aus _quelle/entwurf.py, Entwurf D) */
#filme.ref { padding-block: clamp(48px, 6vw, 96px); }
#filme.ref h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.03em; margin: 0 0 18px; }
#filme .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
#filme .chips button { font: inherit; font-size: .875rem; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--linie); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
#filme .chips button i { font-style: normal; color: var(--leise); margin-left: 4px; font-weight: 500; }
#filme .chips button[aria-pressed="true"] { background: var(--hell); color: #0E1A1F; border-color: var(--hell); }
#filme .chips button[aria-pressed="true"] i { color: #0E1A1F; opacity: .6; }
#filme .k { list-style: none; position: relative; }
#filme .k a { display: block; height: 100%; text-decoration: none; color: inherit; }
#filme .rahmen { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--rund, 10px); overflow: hidden; background: var(--flaeche); isolation: isolate; }
#filme .rahmen img, #filme .rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
#filme .rahmen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,15,18,.85), rgba(8,15,18,0) 55%); z-index: 1; }
#filme .k a:hover .rahmen img, #filme .k a:hover .rahmen video { transform: scale(1.035); }
#filme .text { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
#filme .text b { font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.15; color: #fff; letter-spacing: -.01em; }
#filme .text small { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(238,241,236,.75); }
#filme .zahl { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #0E1A1F; background: var(--akzent); padding: 4px 8px; border-radius: 999px; }
#filme .k.aus { display: none; }

#filme .reihen-raster { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; }
#filme .reihen-raster::after { content: ""; flex: 9999 1 0; }
#filme .reihen-raster .k { flex: var(--r) 1 calc(var(--r) * 210px); aspect-ratio: var(--r); --d: 7px; margin-bottom: 0; }
#filme .reihen-raster .k { max-width: calc(var(--r) * 440px); }
#filme .reihen-raster.oben { flex-wrap: nowrap; margin-bottom: 14px; } #filme .reihen-raster.oben::after { display: none; }
#filme .reihen-raster.oben .k { flex: var(--r) 1 0; } #filme .reihen-raster.oben .text b { font-size: clamp(1.1rem, 1.7vw, 1.6rem); }
@media (max-width: 700px) { #filme .reihen-raster.oben { flex-wrap: wrap; } }
#filme .reihen-raster .k.stapel { margin-bottom: calc(var(--d) * var(--n, 1)); }
#filme .stapel-2 { --n: 1; } #filme .stapel-3 { --n: 2; } #filme .stapel-4 { --n: 3; }
#filme .stapel { isolation: isolate; }
#filme .stapel a { position: relative; }
#filme .stapel a::before { content: ""; position: absolute; inset: 0; border-radius: var(--rund, 10px); z-index: -1; pointer-events: none; }
#filme .stapel-2 a::before { box-shadow: 0 7px 0 -3px var(--grund), 0 7px 0 -2px #4d6670; }
#filme .stapel-3 a::before { box-shadow: 0 7px 0 -3px var(--grund), 0 7px 0 -2px #4d6670, 0 14px 0 -6px var(--grund), 0 14px 0 -5px #3a5059; }
#filme .stapel-4 a::before { box-shadow: 0 7px 0 -3px var(--grund), 0 7px 0 -2px #4d6670, 0 14px 0 -6px var(--grund), 0 14px 0 -5px #3a5059, 0 21px 0 -9px var(--grund), 0 21px 0 -8px #2c4048; }
@media (max-width: 700px) { #filme .reihen-raster .k, #filme .reihen-raster .k.top { flex-basis: 100%; } #filme .reihen-raster .k[style*="0.562"] { flex-basis: 40%; } }

#filme .oben.eins .gross .text { left: 26px; bottom: 24px; } #filme .oben.eins .gross .text b { font-size: clamp(1.4rem, 2.6vw, 2.5rem); }
#filme .oben.eins .sozial .text { left: 12px; right: 12px; bottom: 12px; } #filme .oben.eins .sozial .text b { font-size: clamp(.875rem, 1vw, 1rem); }
#filme .oben.eins .sozial .zahl { top: 10px; right: 10px; font-size: .6875rem; }
#filme .oben.zwei .text b { font-size: clamp(1.25rem, 2vw, 2rem); } #filme .oben.zwei .text { left: 22px; bottom: 20px; }
@media (max-width: 700px) { #filme .oben.eins .sozial .text small { display: none; } #filme .oben.eins .sozial .text b { font-size: .8125rem; } #filme .oben.eins .gross { flex-basis: 100%; } #filme .oben.eins .sozial { flex: 1 1 0; aspect-ratio: 9/16; } #filme .oben.zwei .k { flex-basis: 100%; } }
#filme .buehne { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(360px, 46vw, 640px); margin: 0 0 14px; padding: 0; }
#filme .buehne .k:first-child { grid-row: 1 / 3; }
#filme .buehne .k .text b { font-size: clamp(1.25rem, 2vw, 2rem); }
#filme .buehne .k:first-child .text { left: 26px; bottom: 24px; } #filme .buehne .k:first-child .text b { font-size: clamp(1.5rem, 3vw, 2.75rem); }
@media (max-width: 760px) { #filme .buehne { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } #filme .buehne .k { aspect-ratio: 16/9; } #filme .buehne .k:first-child { grid-row: auto; } }

#filme .gruppe-raster li.hoch .bild { aspect-ratio: 9 / 16; }
/* REFERENZEN-ENDE */
/* Projekttext: Zwischenüberschriften Challenge / Lösung / Ergebnis */
.abschnitt-titel { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 700; margin: 14px 0 -10px; }
.abschnitt-titel + p { margin-top: 0; }
/* Hochformat-Gruppe oben auf der Projektseite */
.filmfenster-paar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-self: start; }
.filmfenster-paar .kino-auf { width: 100%; }
.film-hoch > .filmfenster-paar { grid-column: 1; grid-row: 2 / span 4; margin: 0; }
.film-hoch:has(> .filmfenster-paar) { grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); }
@media (max-width: 860px) { .film-hoch:has(> .filmfenster-paar) { grid-template-columns: minmax(0, 1fr); } .film-hoch > .filmfenster-paar { grid-column: 1; grid-row: auto; } }
/* Making-of direkt unter dem Hauptvideo (Hochformat) */
.film-hoch > .spalte-links { grid-column: 1; grid-row: 2 / span 4; display: flex; flex-direction: column; gap: 18px; align-self: start; }
.spalte-links > .filmfenster { width: 100%; }
.making-of { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; padding: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund, 10px); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.making-of .bild { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: calc(var(--rund, 10px) - 4px); overflow: hidden; }
.making-of .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.making-of-text { display: flex; flex-direction: column; gap: 6px; }
.making-of-text small { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 700; }
.making-of-text b { font-size: clamp(1.25rem, 1.8vw, 1.625rem); color: var(--hell); letter-spacing: -.02em; }
.making-of-text span { color: var(--leise); font-size: .9375rem; }
.making-of:hover { border-color: var(--akzent); }
@media (max-width: 860px) { .film-hoch > .spalte-links { grid-column: 1; grid-row: auto; } }
/* Social Proof: Film im Einsatz beim Kunden */
.nachweis { display: flex; flex-direction: column; gap: 14px; }
.nachweis img { width: 100%; height: auto; display: block; border-radius: var(--rund, 10px); border: 1px solid var(--linie); }
.nachweis a:hover img { border-color: var(--akzent); }
.nachweis p { margin: 0; color: var(--leise); font-size: .9375rem; }
/* Porträt in Kachel-Optik wie die BTS-Kacheln */
.portrait, .portrait:has(img) { border-radius: 22px; overflow: hidden; background: none; isolation: isolate; }
.portrait img { border-radius: 22px; display: block; }
/* Kleine Zeile über Headlines: normaler Buchstabenabstand statt gestaucht */
h1 small, h2 small { letter-spacing: 0.01em !important; word-spacing: normal; font-weight: 500; font-stretch: 100%; }
/* Videofenster: schwarzer Grund statt Weiß, falls ein Player Balken zeigt */
.filmfenster, .filmfenster iframe, .kino2-flaeche, .kino2-flaeche iframe { background: #000; }
/* Leistungsseiten: Hauptüberschrift so groß wie "Referenzen" auf der Startseite */
h1#arbeiten-titel { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 8px; }
h1#arbeiten-titel small { margin-bottom: 10px; }
section#arbeiten.abschnitt { padding-top: clamp(32px, 4vw, 56px); }
/* GRUPPE-HOCH */ .gruppe-raster li.hoch .bild { aspect-ratio: 9 / 16; } .gruppe-raster:has(li.hoch) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Referenzen: Projektzahl neben der Überschrift (am Rechner dezent, mobil wie bei Björn) */
#filme.ref h2 .anzahl { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); font-weight: 500; margin-left: 12px; vertical-align: middle; }
/* Mobil: Kundenzeile kompakt und linksbündig, wenig Abstand zu den Referenzen */
@media (max-width: 760px) {
  .welten-leiste { justify-content: flex-start !important; gap: 8px 0 !important; padding: 22px 20px 26px !important; border-top: 0 !important; }
  .welten-leiste li { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .75rem !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--leise) !important; font-weight: 500 !important; text-shadow: none !important; }
  .welten-leiste li a { color: var(--leise) !important; font-weight: 500 !important; font-size: inherit !important; letter-spacing: inherit !important; }
  .welten-leiste li:not(:last-child)::after { content: "·"; color: var(--leise); opacity: .5; margin: 0 9px; }
  #filme.ref { padding-top: 30px !important; border-top: 1px solid var(--linie); }
  #filme.ref h2 { font-size: 1.75rem !important; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px !important; }
  #filme.ref h2 .anzahl { font-size: .75rem; margin-left: 0; }
}
/* Mobil: Filter in einer wischbaren Zeile */
@media (max-width: 760px) {
  #filme .chips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin: 0 -20px 20px !important; padding: 0 20px 2px; scrollbar-width: none; }
  #filme .chips::-webkit-scrollbar { display: none; }
  #filme .chips button { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-left: 20px; white-space: nowrap; }
}
/* Zahl-Schild bleibt einzeilig, auf schmalen Handys kleiner */
#filme .zahl { white-space: nowrap; }
@media (max-width: 430px) {
  #filme .sozial .zahl, #filme .oben.eins .sozial .zahl { top: 8px; right: 8px; font-size: .5625rem; letter-spacing: .05em; padding: 3px 7px; }
}
@media (max-width: 360px) {
  #filme .sozial .zahl, #filme .oben.eins .sozial .zahl { top: 6px; right: 6px; font-size: .5rem; letter-spacing: .02em; padding: 3px 6px; }
}
/* Handy: Bunny-Film im nativen Player */
.filmfenster video { object-fit: contain; background: #000; }
.kino2-flaeche video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.kino2.hoch .kino2-flaeche video { width: min(46vh, 90vw); aspect-ratio: 9 / 16; height: auto; }
.filmfenster video.vorschau { object-fit: cover; pointer-events: none; }
.filmfenster video.vorschau + .film-start { background: linear-gradient(to top, rgba(11, 31, 43, 0.55), rgba(11, 31, 43, 0.1)); }

/* ===== Schrift: Familjen Grotesk (Überschriften, Logo) + Libre Franklin (Text) ===== */
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-grotesk-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --schrift: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --titel: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif; }
body, button, input, textarea, select { font-family: var(--schrift); }
h1, h2, h3, .marke b, .blaettern b, .kino-titel, .leistungslinks b, #filme .text b, .welten-mitte h1 { font-family: var(--titel); letter-spacing: -0.02em; }
.welten-mitte h1, h2 { font-weight: 700; }
.tk h3 { font-family: var(--schrift); letter-spacing: 0; }
.welten-mitte h1 .unterzeile { font-family: var(--schrift); letter-spacing: 0.01em; }
/* Logo: Name im Sucherrahmen */
.marke b { --e: 0.42em; --d: 2px; padding: 0.3em 0.55em; line-height: 1; font-weight: 600; letter-spacing: -0.01em;
  background:
    linear-gradient(var(--akzent), var(--akzent)) left top / var(--e) var(--d) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) left top / var(--d) var(--e) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) right top / var(--e) var(--d) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) right top / var(--d) var(--e) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) left bottom / var(--e) var(--d) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) left bottom / var(--d) var(--e) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) right bottom / var(--e) var(--d) no-repeat,
    linear-gradient(var(--akzent), var(--akzent)) right bottom / var(--d) var(--e) no-repeat; }
/* Handy: Credits unter dem Film nebeneinander statt untereinander */
@media (max-width: 640px) {
  .credits-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 14px; padding-block: 2px 16px; }
  .credits-reihe:has(> div:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits-reihe:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits-reihe div { gap: 2px; min-width: 0; }
  .credits-reihe dt { font-size: 0.75rem; line-height: 1.25; }
  .credits-reihe dd { font-size: 0.9375rem; line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .credits-reihe dd a { text-underline-offset: 3px; }
}
/* Fassung 2026-10-14b */
/* VR-Bank-Kachel: Titel sitzt genau über dem eingebrannten Schriftzug „Ausbildung des Geldes“ */
#filme a[href="film-vr-bank-ludwigsburg.html"] .rahmen { container-type: inline-size; }
#filme a[href="film-vr-bank-ludwigsburg.html"] .text, #filme .oben.eins a[href="film-vr-bank-ludwigsburg.html"] .text { left: 10.3%; right: auto; bottom: 24%; top: auto; }
#filme a[href="film-vr-bank-ludwigsburg.html"] .text b, #filme .oben.eins a[href="film-vr-bank-ludwigsburg.html"] .text b { font-size: 8.5cqw; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
#filme a[href="film-vr-bank-ludwigsburg.html"] .text small { display: none; }
#filme a[href="film-vr-bank-ludwigsburg.html"] .rahmen::after { background: none; }
#filme a[href="film-vr-bank-ludwigsburg.html"] .text b, #filme .oben.eins a[href="film-vr-bank-ludwigsburg.html"] .text b { text-transform: uppercase; letter-spacing: 0.01em; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
/* Hochkant-Kacheln: keine Unterzeile „Social Media“, das Format spricht für sich */
#filme .sozial .text small { display: none; }
/* ===== Kopf-Pille (wie butterbeidiefilme.de): fest oben, schrumpft stufenlos über die ersten 400 px (--p 0 → 1) ===== */
html{scroll-padding-top:96px}
.kopf{--p:0;position:fixed;z-index:60;top:calc(16px - 8px*var(--p));left:50%;transform:translateX(-50%);box-sizing:border-box;margin:0;
  width:calc(100% - 2*var(--rand));max-width:calc(940px - 320px*var(--p));   /* startet kompakt, eingefahren 620 px */
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(28px - 10px*var(--p));
  padding:calc(8px - 3px*var(--p)) calc(8px - 3px*var(--p)) calc(8px - 3px*var(--p)) calc(20px - 6px*var(--p));
  background:rgba(11,31,43,calc(.62 + .2*var(--p)));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(238,240,236,calc(.14 - .04*var(--p)));border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,calc(.25 + .25*var(--p)));
  transition:top .15s linear,max-width .15s linear,padding .15s linear,background-color .15s linear}
.kopf .marke{min-height:0;flex:none}
.kopf .marke b{font-size:calc(1.0625rem - .125rem*var(--p))}
.kopf .navi{flex-wrap:nowrap;gap:4px calc(26px - 8px*var(--p));font-size:calc(1rem - .0625rem*var(--p))}
.kopf .navi a{padding-block:calc(10px - 3px*var(--p));white-space:nowrap}
.kopf .navi a[href$="#kontakt"],.kopf .kopf-cta{background:var(--akzent);color:var(--grund);font-weight:700;border-radius:999px;text-decoration:none;
  padding:calc(11px - 3px*var(--p)) calc(20px - 4px*var(--p));text-transform:uppercase;letter-spacing:.07em;font-size:.8125rem;line-height:1.2}
.kopf .navi a[href$="#kontakt"]:hover,.kopf .kopf-cta:hover{background:var(--hell);color:var(--grund)}
.kopf-cta{display:none}
main{padding-top:88px}
main:has(> .welten-szene:first-child){padding-top:0}
@media (max-width:760px){
  html{scroll-padding-top:80px}
  .mit-menue .kopf{flex-wrap:nowrap;width:max(284px,calc(100% - 36px - 64px*var(--p)));max-width:none;top:calc(10px - 4px*var(--p));gap:8px;row-gap:0;
    padding:calc(6px - 2px*var(--p)) calc(6px - 2px*var(--p)) calc(6px - 2px*var(--p)) calc(16px - 4px*var(--p))}
  .mit-menue .kopf .marke{margin-right:auto}
  .mit-menue .kopf .kopf-cta{display:inline-flex;align-items:center;min-height:calc(40px - 6px*var(--p));padding:0 calc(16px - 3px*var(--p));font-size:.75rem}
  .mit-menue .menue-knopf{padding:0;width:calc(42px - 6px*var(--p));height:calc(42px - 6px*var(--p));justify-content:center;border-color:rgba(238,240,236,.3)}
  .mit-menue .menue-knopf .menue-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mit-menue .navi{position:absolute;left:0;right:0;top:calc(100% + 8px);flex-basis:auto;padding:6px 18px;background:rgba(11,31,43,.97);
    border:1px solid rgba(238,240,236,.12);border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .mit-menue .navi a:first-child{border-top:0}
  .mit-menue .kopf .navi a[href$="#kontakt"]{background:none;color:inherit;font-weight:500;text-transform:none;letter-spacing:0;font-size:1.125rem;border-radius:0;padding:14px 0}
  main{padding-top:74px}
  main:has(> .welten-szene:first-child){padding-top:0}
}
/* ===== Ende Kopf-Pille ===== */
/* ===== Abschnitte (aus _quelle/entwurf_abschnitte.py, Variante C) ===== */
/* --- Commercial Craft: neues Layout --- */
#eddy{--bg:#E8E6DD;color:#23302F;padding-block:clamp(56px,7vw,104px)}
.ueber6 .ab-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(24px,4vw,56px);align-content:center}
.u6-kopf{grid-column:1/-1;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.u6-foto{flex:none;width:clamp(76px,10vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 10px 30px rgba(14,26,31,.18)}
.u6-foto img{width:100%;height:100%;object-fit:cover;display:block}
.u6-kopf h2{font-size:clamp(1.625rem,3.4vw,3rem);line-height:1.05;color:#0E1A1F;margin:0}
.u6-kopf h2 small{display:block;font-size:.4em;letter-spacing:.02em;color:#5B6B6A;margin-bottom:.5em;font-weight:600}
.u6-welten{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.u6-welt{background:#0E1A1F;color:#EEF0EC;border-radius:18px;padding:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:8px;min-height:clamp(96px,12vw,150px);justify-content:flex-end}
.u6-welt:nth-child(2){background:#2B4A3E}
.u6-welt span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);font-weight:700}
.u6-welt b{font-family:var(--titel);font-size:clamp(1.125rem,2vw,1.75rem);line-height:1.15;font-weight:600}
.u6-fakten{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.u6-fakten li{border-top:2px solid #0E1A1F;padding-top:12px;display:flex;flex-direction:column;gap:4px}
.u6-fakten b{font-family:var(--titel);font-size:clamp(1.0625rem,1.6vw,1.375rem);color:#0E1A1F;line-height:1.15}
.u6-fakten span{font-size:.9375rem;color:#4A5857;line-height:1.35}
.u6-schluss{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.u6-schluss .gross{flex:1 1 360px;margin:0;font-size:clamp(1.125rem,1.9vw,1.625rem);line-height:1.3;color:#0E1A1F}
.u6-mehr{flex-basis:100%;border-top:1px solid rgba(14,26,31,.18);padding-top:4px}
.u6-mehr summary{cursor:pointer;padding:10px 0;font-weight:600;color:#0E1A1F}
.u6-mehr p{max-width:44em;margin:0 0 12px;color:#23302F}
@media (max-width:760px){
  .u6-welten{gap:8px}.u6-welt{border-radius:14px;padding:14px;min-height:92px}
  .u6-fakten{grid-template-columns:1fr;gap:10px}.u6-fakten li{flex-direction:row;align-items:baseline;gap:10px;padding-top:9px}
  .u6-fakten b{flex:none;min-width:8.6em;font-size:1rem}.u6-fakten span{font-size:.875rem}
  .u6-schluss{gap:12px}.u6-schluss .gross{flex-basis:100%;font-size:1.125rem}
}
/* --- Commercial Craft: Foto groß (wie Entwurf ueber-A), Inhalt mittig (wie ueber-C), von Eddy gewählt --- */
#eddy .ab-stage{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,5vw,80px);row-gap:24px;align-items:center}
#eddy .u6-bild{grid-column:1;grid-row:1/span 3;align-self:center;border-radius:22px;overflow:hidden;aspect-ratio:4/5;max-height:calc(100svh - 150px);box-shadow:0 24px 60px rgba(14,26,31,.18)}
#eddy .u6-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
#eddy .u6-kopf,#eddy .u6-fakten,#eddy .u6-schluss{grid-column:2;text-align:center}
#eddy .u6-kopf{flex-direction:column;justify-content:center}
#eddy .u6-kopf h2 small{margin-inline:auto}
#eddy .u6-fakten{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
#eddy .u6-fakten li{border-top:0;padding:4px 16px;align-items:center}
#eddy .u6-fakten li+li{border-left:1px solid rgba(14,26,31,.25)}
#eddy .u6-schluss{flex-direction:column;justify-content:center}
#eddy .u6-schluss .gross{flex:none;max-width:30em}
#eddy .knopfreihe{justify-content:center}
#eddy .u6-mehr{border-top:0;width:100%;text-align:left}
#eddy .u6-mehr summary{text-align:center}
@media (max-width:760px){
 #eddy .ab-stage{grid-template-columns:1fr;row-gap:16px}
 #eddy .u6-bild,#eddy .u6-kopf,#eddy .u6-fakten,#eddy .u6-schluss{grid-column:1}
 #eddy .u6-bild{grid-row:auto;aspect-ratio:16/10;border-radius:18px;max-height:none}
 #eddy .u6-bild img{object-position:50% 22%}
 #eddy .u6-kopf h2{font-size:1.75rem}
 #eddy .u6-fakten{grid-template-columns:1fr;gap:10px}
 #eddy .u6-fakten li{flex-direction:column;gap:2px;padding:0}
 #eddy .u6-fakten li+li{border-left:0;border-top:1px solid rgba(14,26,31,.18);padding-top:10px}
 #eddy .u6-fakten b{min-width:0}
 #eddy .u6-bild{aspect-ratio:16/9}
 #eddy .knopfreihe{flex-wrap:nowrap;gap:8px}
 #eddy .knopfreihe .knopf{padding:12px 18px;font-size:.9375rem;white-space:nowrap}
}
/* --- Fragen: Karten --- */
.fragen6{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--linie)}
.f6-kopf{font-size:clamp(2.25rem,4.2vw,3.75rem);line-height:1;letter-spacing:-.03em;margin-bottom:clamp(18px,2.4vw,32px)}
.f6-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.f6-karte{background:var(--flaeche,#132a37);border-radius:18px;padding:4px 20px}
.f6-karte summary{cursor:pointer;list-style:none;padding:16px 0;font-size:1.0625rem;font-weight:600;color:var(--hell);display:flex;justify-content:space-between;gap:12px}
.f6-karte summary::-webkit-details-marker{display:none}
.f6-karte summary::after{content:"+";color:var(--akzent);font-size:1.25rem;line-height:1}
.f6-karte[open] summary::after{content:"–"}
.f6-karte p{margin:0 0 16px;color:var(--text)}
@media (max-width:760px){.f6-raster{grid-template-columns:1fr;gap:8px}.f6-karte summary{font-size:1rem;padding:14px 0}}
/* --- Bühnen --- */
.ab-sz .k-track{position:relative;height:var(--len,230vh)}
.ab-sz .ab-stage{position:sticky;top:0;min-height:100vh;min-height:100svh;box-sizing:border-box;padding-top:var(--ab-oben,96px);padding-bottom:24px;display:flex;flex-direction:column;justify-content:center}
.ab-sz.ueber6 .ab-stage{display:grid}
.ab-sz.fertig .k-track,.ab-sz.fliessend .k-track{height:auto}
.ab-sz.fertig .ab-stage,.ab-sz.fliessend .ab-stage{position:relative;min-height:0;padding-top:0;padding-bottom:0}
.ab-sz:not(.fertig):not(.fliessend){padding-block:0}
.ab-sz{overflow-x:clip;overflow-anchor:none}
.ab-it{will-change:translate,scale,rotate,opacity}
@media (max-width:760px){.ab-sz .ab-stage{--ab-oben:78px}}
@media (prefers-reduced-motion: reduce){.ab-sz .k-track{height:auto}.ab-sz .ab-stage{position:relative;min-height:0;padding:0}}
/* ===== Ende Abschnitte ===== */

/* ===== Scroll-Effekte (aus _quelle/scroll_effekte.py, nicht von Hand ändern) ===== */
html.intro .welt video{animation:iVid 1.9s cubic-bezier(.2,.7,.2,1) both,iZoom 2.6s cubic-bezier(.2,.7,.2,1) both}
html.intro .kopf{animation:iNav .9s cubic-bezier(.2,.8,.2,1) .25s both}
html.intro .welten-mitte h1 small{animation:iDeep 1s cubic-bezier(.2,.8,.2,1) .45s both}
html.intro .welten-mitte h1 .iw{display:inline-block;animation:iDeep 1.05s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.6s + var(--i)*.09s)}
html.intro .welten-mitte h1 .unterzeile{animation:iDeep 1s cubic-bezier(.2,.8,.2,1) 1.05s both}
html.intro .welten-fuss p{animation:iDeep 1s cubic-bezier(.2,.8,.2,1) 1.15s both}
html.intro .welten-fuss .knopf{animation:iPop .8s cubic-bezier(.2,.9,.25,1.25) 1.3s both}
html.intro .welten-leiste{animation:iFade 1s ease-out 1.5s both}
html.intro .seitenkopf>*{animation:iDeep 1s cubic-bezier(.2,.8,.2,1) .45s both}
html.intro main>:first-child:not(.welten-szene):not(.seitenkopf){animation:iVid 1.6s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes iVid{from{opacity:0;filter:brightness(.2)}to{opacity:1;filter:none}}
@keyframes iZoom{from{scale:1.12}to{scale:1}}
@keyframes iNav{from{opacity:0;translate:0 -26px}to{opacity:1;translate:0 0}}
@keyframes iDeep{from{opacity:0;translate:0 26px;scale:.9;filter:blur(8px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes iPop{from{opacity:0;scale:.82;filter:blur(4px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes iFade{from{opacity:0}to{opacity:1}}

.welten-szene{position:relative;background:#000;overflow-anchor:none}
.welten-szene .k-track{position:relative;height:var(--len,250vh)}
.welten-szene .welten{position:sticky;top:0;display:block;height:100vh;height:100svh;min-height:0;overflow:hidden;--auf:0px}
.welten-szene.fertig .k-track{height:auto}
.welten-szene.fertig .welten{position:relative}
.welten-szene .welt{position:absolute !important;left:0;top:0;width:100%;height:100%;min-height:0 !important;margin:0;box-sizing:border-box;will-change:transform,width,height;
  border:0 !important;box-shadow:-18px 0 44px rgba(0,0,0,.45);transform-origin:0 0}
.welten-szene .welt.eins{box-shadow:none}
html:not([data-szene="a"]):not([data-szene="b"]) .welten-szene .welt:not(.eins){box-shadow:0 -18px 44px rgba(0,0,0,.45),-18px 0 44px rgba(0,0,0,.45)}
.welten-szene .welt+.welt{border-left:1px solid rgba(0,0,0,.4) !important}
.welten-szene .welten-mitte{position:absolute !important;left:var(--rand) !important;right:var(--rand) !important;top:auto !important;
  bottom:calc(var(--fh,90px) + var(--auf)) !important;margin:0 !important;transform:none !important;width:auto !important;z-index:3}
.welten-szene .welten-leiste{position:absolute !important;left:var(--rand) !important;right:var(--rand) !important;bottom:calc(22px + var(--auf)) !important;margin:0;z-index:3}
@media (max-width:860px){
  .welten-szene .welten-mitte{left:20px !important;right:20px !important}
  .welten-szene .welten-leiste{left:0 !important;right:0 !important;bottom:var(--auf) !important;padding:14px 20px 18px !important}
}
@media (prefers-reduced-motion: reduce){.welten-szene .k-track{height:auto}.welten-szene .welten{position:relative;height:calc(100vh - var(--kh,80px));height:calc(100svh - var(--kh,80px))}}
/* ===== Ende Scroll-Effekte ===== */
/* ===== Technik (aus _quelle/entwurf_technik.py, Variante C) ===== */
/* C Kompakt */
#technik .tk-raster.tkc{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#technik .tkc .tk{padding:0}
#technik .tkc details{margin:0;border:0}
#technik .tkc summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;padding:16px 38px 16px 18px;position:relative}
#technik .tkc summary::-webkit-details-marker{display:none}
#technik .tkc summary::after{content:"+";position:absolute;top:14px;right:16px;color:var(--akzent);font-size:1.25rem;line-height:1}
#technik .tkc details[open] summary::after{content:"–"}
#technik .tkc h3{margin:0;font-size:.875rem}
#technik .tkc b{font-family:var(--titel);font-size:clamp(1.0625rem,1.6vw,1.375rem);color:#EEF4FA;line-height:1.2}
#technik .tkc small{font-size:.8125rem;color:#9DB6CC}
#technik .tkc ul{list-style:none;margin:0;padding:0 18px 16px}
#technik .tkc ul li{font-size:.875rem;line-height:1.4;color:#D6E3EE;padding:4px 0;border-top:1px solid #26406B}
@media (max-width:760px){#technik .tk-raster.tkc{grid-template-columns:1fr 1fr;gap:8px}#technik .tkc summary{padding:13px 32px 13px 14px}#technik .tkc summary::after{top:11px;right:12px}#technik .tkc b{font-size:1rem}#technik .tkc ul{padding:0 14px 14px}}
/* ===== Ende Technik ===== */

/* BTS: Überschrift fett */
#set #set-titel{font-weight:700}

/* === Equipment-Auftritt B „Scan“ (live seit 22.10.2026, aus _quelle/entwurf_equipment.py) === */
#technik .eq-ziel{transition-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){ #technik *,#technik *::before,#technik *::after{animation:none!important;transition:none!important} }

#technik.eq h2{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.65,0,.35,1)}
#technik.eq .tk-raster{position:relative}
#technik.eq .tk{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--s)*140ms + var(--z)*40ms + 120ms)}
#technik.eq .tk-raster::after{content:"";position:absolute;top:-8px;bottom:-8px;left:0;width:2px;background:var(--akzent);box-shadow:0 0 12px rgba(201,240,107,.6);opacity:0;pointer-events:none}
#technik.eq.an h2,#technik.eq.an .tk{clip-path:inset(0 0 0 0)}
#technik.eq.an .tk-raster::after{animation:eqScan 1.15s cubic-bezier(.65,0,.35,1) .12s both}
@keyframes eqScan{0%{left:0;opacity:1}90%{left:calc(100% - 2px);opacity:1}100%{left:calc(100% - 2px);opacity:0}}
#technik.eq small{font-variant-numeric:tabular-nums}
/* === Ende Equipment-Auftritt === */

/* === Überschriften A „Marker“ (live seit 22.10.2026, aus _quelle/entwurf_ueberschrift.py) === */
#filme-titel,#set-titel,#technik-titel,#fragen-titel{color:#F4F6F1;opacity:1}
mark.ue{color:inherit;background:none;font:inherit}

mark.ue{background:#C9F06B;color:#0E1A1F;padding:.02em .2em .06em;margin-left:-.2em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#filme-titel,#set-titel,#technik-titel,#fragen-titel{margin-bottom:clamp(20px,2.6vw,32px)!important;line-height:1.08}
#set .reels14-kopf{align-items:center;margin-bottom:8px}
/* === Ende Überschriften === */

/* === Referenzen-Index (live, aus _quelle/entwurf_referenzen2.py) === */
#filme.ref2{position:relative;padding:0!important;max-width:none!important;margin:0!important;background:#0E1A1F;color:#F4F6F1}
.r2-buehne{position:relative;height:100svh;min-height:540px;overflow:hidden}
.r2-bild{position:absolute;inset:0;background:#0E1A1F}
.r2-bild video,.r2-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.r2-bild .sichtbar{opacity:1}
.r2-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,17,21,.78) 0%,rgba(9,17,21,.35) 38%,rgba(9,17,21,0) 62%),linear-gradient(0deg,rgba(9,17,21,.7) 0%,rgba(9,17,21,0) 26%)}
.r2-kopf{position:absolute;z-index:3;left:clamp(16px,4vw,48px);top:clamp(86px,12vh,120px)}
.r2-kopf h2{margin:0!important;font-size:clamp(1.5rem,2.6vw,2.25rem)}
.r2-chips{position:absolute;z-index:3;left:0;right:0;bottom:clamp(18px,3.5vh,32px);display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;padding:0 16px}
.r2-chips button{font:600 .8125rem/1 "Libre Franklin",sans-serif;background:none;border:0;padding:8px 2px;color:rgba(244,246,241,.55);cursor:pointer}
.r2-chips button[aria-pressed="true"]{color:#F4F6F1;box-shadow:inset 0 -2px 0 #C9F06B}
.r2-chips button:hover{color:#F4F6F1}
.r2-liste{list-style:none;margin:0;padding:0}
.r2-liste a{display:block;text-decoration:none;color:inherit}
.r2-liste b{display:block;font:600 clamp(.9375rem,1.25vw,1.0625rem)/1.25 "Familjen Grotesk",sans-serif;letter-spacing:-.01em}
.r2-liste small{display:none;font-size:.75rem;color:#C9F06B;margin-top:2px}
.r2-liste li.aktiv small{display:block}
.r2-liste li[hidden]{display:none}
@media (prefers-reduced-motion: reduce){ .r2-bild video,.r2-bild img,.r2-liste,.r2-liste li{transition:none!important} }

.r2-buehne{overflow:visible;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;height:auto;min-height:100svh;padding:clamp(64px,10vh,110px) clamp(16px,4vw,48px) clamp(80px,12vh,120px)}
.r2-bild{position:sticky;top:clamp(96px,14vh,130px);display:block;width:100%;inset:auto;aspect-ratio:16/9;border-radius:4px;overflow:hidden;order:2;color:#F4F6F1;text-decoration:none}
.r2-bild.hoch{aspect-ratio:16/9}
.r2-bild::after{background:none}
.r2-bild .ecke{position:absolute;z-index:2;width:22px;height:22px;border:2px solid #C9F06B}
.r2-bild .ecke.o{left:12px;top:12px;border-right:0;border-bottom:0}.r2-bild .ecke.u{right:12px;bottom:12px;border-left:0;border-top:0}
.r2-bild .titel{position:absolute;z-index:2;left:16px;bottom:14px;font:600 .875rem/1.2 "Familjen Grotesk",sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.r2-links{order:1}
.r2-kopf{position:static;margin-bottom:22px}
.r2-liste li{border-top:1px solid rgba(244,246,241,.1)}
.r2-liste a{padding:9px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.r2-liste b{opacity:.5;transition:opacity .2s}
.r2-liste small{display:block;color:rgba(244,246,241,.4);white-space:nowrap}
.r2-liste li.aktiv b{opacity:1}
.r2-liste li.aktiv small{color:#C9F06B}
.r2-chips{position:static;justify-content:flex-start;margin:0 0 14px;padding:0;gap:2px 16px}
.r2-chips button{font-size:.875rem}
@media (max-width:760px){
  .r2-buehne{display:flex;flex-direction:column;align-items:stretch;padding:56px 16px 40px}
  .r2-links{display:contents}
  .r2-kopf{order:1;margin-bottom:0}
  .r2-chips{order:2;margin-bottom:16px}
  .r2-buehne>.r2-bild{order:3}
  .r2-liste{order:4}
  .r2-bild{position:sticky;top:72px;z-index:4;margin:0 0 18px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
  .r2-liste a{padding:12px 0}
}
/* === Ende Referenzen-Index === */
/* === Filter-Pillen A (live seit 22.10.2026, aus _quelle/entwurf_filter.py) === */
#filme .r2-chips{gap:8px!important;margin-bottom:18px!important}
#filme .r2-chips button{font:600 .9375rem/1 "Libre Franklin",sans-serif!important;color:#F4F6F1!important;padding:10px 14px!important;border:1px solid rgba(244,246,241,.35)!important;border-radius:999px;box-shadow:none!important;background:transparent;transition:background .2s,border-color .2s}
#filme .r2-chips button:hover{border-color:#C9F06B!important}
#filme .r2-chips button i{font-style:normal;font-weight:500;margin-left:6px;opacity:.6}
#filme .r2-chips button[aria-pressed="true"]{background:#C9F06B!important;border-color:#C9F06B!important;color:#0E1A1F!important}
#filme .r2-chips button[aria-pressed="true"] i{opacity:.7}
/* === Ende Filter-Pillen === */
/* === BTS-Story A (live seit 22.10.2026, aus _quelle/entwurf_bts3.py) === */
#set.b3{background:#0F333D;color:#F4F6F1;padding:clamp(64px,10vh,110px) 0 clamp(56px,9vh,96px)!important;max-width:none!important;margin:0!important;overflow:hidden}
.b3-kopf{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:0 clamp(16px,4vw,48px);margin-bottom:clamp(22px,3vw,36px)}
.b3-kopf h2{margin:0!important}
#set.b3 #set-titel mark{clip-path:none!important}
.b3-konto{color:#F4F6F1;font-size:.9375rem}
.b3-play{position:absolute;right:10px;top:10px;width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
@media (prefers-reduced-motion: reduce){ #set.b3 *{animation:none!important;transition:none!important} }

.b3a-buehne{position:relative;height:min(78svh,720px);min-height:460px}
.b3a-band{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.b3a-band li{position:absolute;left:50%;top:0;height:100%;aspect-ratio:9/16;transform:translateX(-50%) translateX(calc(var(--d)*62%)) scale(calc(1 - min(1,abs(var(--d)))*.22));opacity:calc(1 - min(2,abs(var(--d)))*.38);z-index:calc(10 - min(9,abs(var(--d))));transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease;filter:brightness(calc(1 - min(1,abs(var(--d)))*.45))}
.b3a-band li[data-weg]{opacity:0;pointer-events:none}
.b3a-band a{display:block;height:100%;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative}
.b3a-band img{width:100%;height:100%;object-fit:cover}
.b3a-balken{position:absolute;z-index:20;left:50%;transform:translateX(-50%);top:12px;width:calc(min(78svh,720px)*9/16 - 28px);display:flex;gap:4px}
.b3a-balken span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.b3a-balken i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.b3a-balken span.voll i{transform:scaleX(1)}
.b3a-balken span.laeuft i{animation:b3Lauf 3.6s linear both}
.b3a-buehne.halt .b3a-balken span.laeuft i{animation-play-state:paused}
@keyframes b3Lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.b3a-pfeil{position:absolute;z-index:21;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(15,51,61,.6);color:#fff;font-size:1.75rem;line-height:1;cursor:pointer}
.b3a-pfeil.zur{left:clamp(12px,4vw,48px)}.b3a-pfeil.vor{right:clamp(12px,4vw,48px)}
@media (max-width:760px){ .b3a-buehne{height:68svh;min-height:420px} .b3a-band li{transform:translateX(-50%) translateX(calc(var(--d)*78%)) scale(calc(1 - min(1,abs(var(--d)))*.2))} .b3a-pfeil{display:none} .b3a-balken{width:calc(68svh*9/16 - 28px)} }
/* === Ende BTS-Story === */
/* === Startseite-Kapitel B (live seit 22.10.2026, aus _quelle/entwurf_reduktion.py) === */
.welten-szene .welt{animation:rdWelt 1s ease both}
.welten-szene .welt.zwei{animation-delay:.45s}.welten-szene .welt.drei{animation-delay:.9s}
@keyframes rdWelt{from{opacity:0}to{opacity:1}}
#filme:not(.alle) .r2-liste li:nth-child(n+9){display:none}
.rd-alle{order:5;align-self:flex-start;margin:18px 0 0;padding:12px 18px;border-radius:999px;border:1px solid rgba(244,246,241,.35);background:none;color:#F4F6F1;font:600 .9375rem/1 "Libre Franklin",sans-serif;cursor:pointer}
.rd-alle:hover{border-color:#C9F06B}
section[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){ .welten-szene .welt{animation:none} }

.rd-arbeit{background:#0E1A1F;transition:background .5s ease;padding-top:clamp(64px,10vh,110px)}
.rd-arbeit[data-z="set"]{background:#0F333D}
.rd-tabs{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 clamp(16px,4vw,48px)}
.rd-tabs button{font:700 clamp(2.1rem,5vw,3.6rem)/1.08 "Familjen Grotesk",sans-serif;letter-spacing:-.02em;padding:.04em .2em;border:0;border-radius:4px;background:none;color:#F4F6F1;box-shadow:inset 0 0 0 2px rgba(244,246,241,.55);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.rd-tabs button:hover{box-shadow:inset 0 0 0 2px #C9F06B}
.rd-tabs button[aria-selected="true"]{background:#C9F06B;color:#0E1A1F;box-shadow:none}
.rd-tabs i{font:500 .32em/1 "Libre Franklin",sans-serif;font-style:normal;vertical-align:super;opacity:.7;margin-left:.1em}
.rd-arbeit #filme-titel,.rd-arbeit #set-titel{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
.rd-arbeit #filme{background:transparent}
.rd-arbeit .r2-buehne{padding-top:28px!important;min-height:0!important}
.rd-arbeit #set.b3{background:transparent!important;padding-top:20px!important}
.rd-arbeit .b3-kopf{justify-content:flex-start;margin-bottom:18px}
@media (max-width:760px){ .rd-arbeit .r2-buehne{padding-top:20px!important} }
.rd-mehr{background:#0E1A1F;color:#F4F6F1;padding:clamp(40px,7vh,72px) clamp(16px,4vw,48px)!important;max-width:none!important}
.rd-klapp{border-top:1px solid rgba(244,246,241,.22)}
.rd-klapp:last-child{border-bottom:1px solid rgba(244,246,241,.22)}
.rd-klapp>summary{list-style:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 18px;padding:22px 44px 22px 0;cursor:pointer;position:relative}
.rd-klapp>summary::-webkit-details-marker{display:none}
.rd-klapp>summary b{font:700 clamp(1.6rem,3.4vw,2.4rem)/1.1 "Familjen Grotesk",sans-serif}
.rd-klapp>summary span{color:rgba(244,246,241,.6);font-size:.9375rem}
.rd-klapp>summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 2rem/1 "Familjen Grotesk",sans-serif;color:#C9F06B;transition:transform .25s}
.rd-klapp[open]>summary::after{transform:translateY(-50%) rotate(45deg)}
.rd-klapp>section{padding:8px 0 28px!important;margin:0!important;max-width:none!important;border-radius:6px}
.rd-klapp #technik-titel,.rd-klapp #fragen-titel{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
/* === Ende Startseite-Kapitel === */