/* linkit.tech, dritte Fassung „Kino“. Gebaut 11.11.2026, von Grund auf neu.
   Die Seite ist eine Folge festgehaltener Szenen, die das Scrollen steuert (Klasse .kino am html-Element).
   Ohne Skript oder bei „Bewegung reduzieren“ stehen dieselben Inhalte schlicht untereinander.
   Paul, 11.11.: „dezent muss es nicht mehr sein ich brauche effekte“. Weiter ausgeschlossen: Leuchten, Verläufe, generierte Bilder. */

:root {
  --nacht: #0D1B2A;
  --hell: #F5F5F2;
  --blau: #0067A4;
  --himmel: #00B7E0;
  --weiss: #FFFFFF;

  --seite: var(--hell);
  --schrift: #000000;
  --leise: rgba(0, 0, 0, 0.66);
  --akzent: var(--blau);
  --linie: rgba(0, 0, 0, 0.2);
  --knopf: var(--blau);
  --knopf-schrift: var(--weiss);
  --knopf-ueber: #000000;
  --knopf-ueber-schrift: var(--weiss);

  --rand: clamp(1.25rem, 5vw, 5rem);
  --kopf: 3.5rem;
  --abschnitt: clamp(5rem, 11vw, 10rem);
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
  /* Rundung nach Rolle: Bilder und Fenster wenig, Blätter, die sich übereinanderschieben, mehr, Knöpfe ganz rund */
  --rund: clamp(0.625rem, 1.1vw, 1.125rem);
  --blatt: clamp(1.125rem, 2.4vw, 2rem);
}
@media (min-width: 900px) { :root { --kopf: 4.25rem; } }

.hell {
  --seite: var(--hell); --schrift: #000000; --leise: rgba(0, 0, 0, 0.66); --akzent: var(--blau); --linie: rgba(0, 0, 0, 0.2);
  --knopf: var(--blau); --knopf-schrift: var(--weiss); --knopf-ueber: #000000; --knopf-ueber-schrift: var(--weiss);
  background: var(--seite); color: var(--schrift);
}
.nacht {
  --seite: var(--nacht); --schrift: var(--hell); --leise: rgba(245, 245, 242, 0.74); --akzent: var(--himmel); --linie: rgba(245, 245, 242, 0.26);
  --knopf: var(--hell); --knopf-schrift: var(--nacht); --knopf-ueber: var(--himmel); --knopf-ueber-schrift: var(--nacht);
  background: var(--seite); color: var(--schrift);
}
.blau {
  --seite: var(--blau); --schrift: var(--weiss); --leise: rgba(255, 255, 255, 0.9); --akzent: var(--weiss); --linie: rgba(255, 255, 255, 0.42);
  --knopf: var(--weiss); --knopf-schrift: var(--blau); --knopf-ueber: var(--nacht); --knopf-ueber-schrift: var(--weiss);
  background: var(--seite); color: var(--schrift);
}
.himmel {
  --seite: var(--himmel); --schrift: var(--nacht); --leise: rgba(13, 27, 42, 0.8); --akzent: var(--nacht); --linie: rgba(13, 27, 42, 0.3);
  --knopf: var(--nacht); --knopf-schrift: var(--hell); --knopf-ueber: var(--weiss); --knopf-ueber-schrift: var(--nacht);
  background: var(--seite); color: var(--schrift);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: var(--kopf);
  scrollbar-color: #5f6b78 var(--nacht);
  accent-color: var(--blau);
}

/* Die Seite hat eine einzige Hintergrundfarbe, die beim Scrollen weich wechselt: Nachtblau, hell, Blau, Nachtblau.
   Das Skript rechnet sie aus der Scrolllage (--seite-live). Die Abschnitte selbst sind im Kino durchsichtig. */
.kino main > .laufband, .kino main > .band, .kino main > .unternehmen, .kino main > .verein { background: transparent; }
.kino main > .laufband { --schrift: var(--schrift-live, var(--hell)); --akzent: var(--akzent-live, var(--himmel)); color: var(--schrift); padding-bottom: calc(clamp(1.75rem, 4.5vw, 4rem) + 16svh); }

body {
  margin: 0;
  background: var(--seite-live, var(--nacht));
  color: #000000;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--himmel); color: var(--nacht); }

h1, h2, h3, p, ul, ol, dl, dt, dd, figure, blockquote, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.17em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); font-weight: 800; line-height: 1.15; }
p { text-wrap: pretty; }
.gross { font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.38; font-weight: 500; max-width: 38ch; }
.leise { color: var(--leise); }
.klein { font-size: 0.9375rem; }

/* Riesenschrift. Zeilen mit data-passen bekommen ihre Größe vom Skript, sodass sie ihre Spalte genau füllen. */
.riesen { font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.86; font-size: clamp(2.5rem, 9vw, 7rem); }
.riesen [data-passen] { display: inline-block; white-space: nowrap; font-size: inherit; }
/* Ohne Skript passt niemand die Zeilen ein, dann dürfen sie umbrechen */
html:not(.js) .riesen [data-passen] { white-space: normal; overflow-wrap: anywhere; }

/* Zeilen, die aus einer Maske hochfahren */
/* Oben Platz für Umlautpunkte, der Abstand wird nach außen wieder abgezogen */
.maske { display: block; overflow: hidden; padding-top: 0.24em; margin-top: -0.18em; }
.maske > span { display: inline-block; will-change: transform; }
/* Fließtext teilt das Skript in Zeilen (data-zeilen). Beschnitten wird nur senkrecht, damit am Zeilenende nichts fehlt. */
.zeile { display: block; overflow-x: visible; overflow-y: clip; padding-block: 0.1em 0.18em; margin-block: -0.1em -0.18em; }
.zeile > span { display: inline-block; white-space: nowrap; will-change: transform; }
/* Auftritte: Jedes Element mit data-rein bekommt die Klasse .da, sobald es ins Bild kommt.
   --v ist der Versatz, wenn mehrere zugleich kommen, --i die Nummer der Zeile. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rein] .maske > span { transform: translate3d(0, 135%, 0); }
  .js [data-rein].da .maske > span { transform: none; transition: transform 1.1s var(--weich) calc(var(--v, 0ms) + var(--i, 0) * 90ms); }
  .js .zeile > span { transform: translate3d(0, 130%, 0); }
  .js .da .zeile > span, .js [data-zeilen].da .zeile > span { transform: none; transition: transform 1s var(--weich) calc(var(--v, 0ms) + 80ms + var(--i, 0) * 75ms); }
  .js [data-rein="hoch"] { opacity: 0; transform: translate3d(0, 1.75rem, 0); }
  .js [data-rein="hoch"].da { opacity: 1; transform: none; transition: opacity 0.9s var(--weich) var(--v, 0ms), transform 1.1s var(--weich) var(--v, 0ms); }
  /* Zeile mit Linie: Die Linie zieht sich von links, der Inhalt kommt nach */
  .js [data-rein="linie"]::before, .js [data-rein="linie"]::after { transform: scaleX(0); }
  .js [data-rein="linie"].da::before, .js [data-rein="linie"].da::after { transform: none; transition: transform 1.3s var(--weich) var(--v, 0ms); }
  .js [data-rein="linie"] > * { opacity: 0; transform: translate3d(0, 1.1rem, 0); }
  .js [data-rein="linie"].da > * { opacity: 1; transform: none; transition: opacity 0.8s var(--weich) calc(var(--v, 0ms) + 120ms), transform 1s var(--weich) calc(var(--v, 0ms) + 120ms); }
}
main:focus, main > section:focus { outline: none; }

.sprung { position: absolute; left: var(--rand); top: -6rem; z-index: 60; background: var(--hell); color: var(--nacht); padding: 0.75rem 1rem; font-weight: 700; }
.sprung:focus { top: 0.5rem; }

.innen { width: min(100% - 2 * var(--rand), 78rem); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); }

/* Knopf: ganz rund. Beim Drüberfahren schiebt sich die zweite Farbe von unten herein. */
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.5rem 1.75rem;
  background: var(--knopf); color: var(--knopf-schrift);
  font: inherit; font-weight: 800; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color 0.35s var(--weich), color 0.35s var(--weich);
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--knopf-ueber);
  transform: translate3d(0, 102%, 0); transition: transform 0.55s var(--weich);
}
/* Ist die zweite Farbe oben angekommen, nimmt der Knopf sie auch selbst an. So stimmt der Kontrast, auch wenn die Fläche einmal fehlt. */
.knopf:hover, .knopf:focus-visible { color: var(--knopf-ueber-schrift); background-color: var(--knopf-ueber); transition: background-color 0s linear 0.5s, color 0.35s var(--weich); }
.knopf:hover::before, .knopf:focus-visible::before { transform: none; }
.knopf.schmal { min-height: 2.5rem; padding-inline: 1.2rem; font-size: 0.9375rem; }
.knopf.dick { min-height: 4rem; padding-inline: 2.4rem; font-size: 1.25rem; }
.magnet { will-change: transform; }

.phase-vorbei [data-offen] { display: none !important; }
html:not(.phase-vorbei) [data-vorbei] { display: none !important; }

/* Gezeichnetes Plus, überall dasselbe: zwei Balken */
.pl { position: relative; display: inline-block; width: 0.62em; height: 0.62em; vertical-align: baseline; margin-inline: 0.22em; }
.pl::before, .pl::after { content: ""; position: absolute; background: currentColor; }
.pl::before { left: 0; right: 0; top: calc(50% - 0.045em); height: 0.09em; }
.pl::after { top: 0; bottom: 0; left: calc(50% - 0.045em); width: 0.09em; }

/* ---------- Kopfzeile: liegt über allem und kehrt ihre Farbe gegen den Untergrund um ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--kopf);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--rand);
  color: var(--hell); transition: color 0.35s var(--weich); pointer-events: none;
}
.kopf > * { pointer-events: auto; }
/* Auf hellem Grund wird die Schrift dunkel. Die Klasse setzt das Skript. */
.kopf-dunkel .kopf { color: #000000; }
.logo { position: relative; display: block; flex: none; width: 6.9rem; height: calc(6.9rem * 232 / 765); overflow: hidden; transition: width 0.5s var(--weich); }
.logo i { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 765 / 232; background: currentColor; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.logo .wort { -webkit-mask-image: url(assets/logo-wort.png); mask-image: url(assets/logo-wort.png); }
.logo .plus { -webkit-mask-image: url(assets/logo-plus.png); mask-image: url(assets/logo-plus.png); }
.kopf .logo.kurz { width: calc(6.9rem * 232 / 765); }
.kopf-link { font-weight: 700; font-size: 0.9375rem; }
.menue-knopf { background: none; border: 0; font-weight: 800; font-size: 0.9375rem; min-height: 2.5rem; padding: 0 0.25rem; cursor: pointer; }

.menue { position: fixed; z-index: 41; top: 0; right: var(--rand); height: var(--kopf); display: flex; align-items: center; color: var(--hell); }
.menue ul { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.menue a { font-weight: 700; font-size: 0.9375rem; text-decoration: none; padding-block: 0.4rem; }
.menue a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .menue-knopf { display: none; }
  .menue { right: calc(var(--rand) + var(--knopfplatz, 0px)); transition: right 0.45s var(--weich), color 0.35s var(--weich), transform 0.7s var(--weich), opacity 0.4s var(--weich); }
  .kopf-dunkel .menue { color: #000000; }
  /* Beim Runterscrollen fährt das Menü weg, damit es nicht über großen Wörtern steht. Beim Hochscrollen und mit der Tastatur ist es wieder da. */
  .menue-weg .menue:not(:focus-within) { transform: translate3d(0, -130%, 0); opacity: 0; pointer-events: none; }
}
@media (max-width: 899px) {
  .menue {
    inset: 0; height: auto; right: 0; background: var(--nacht); color: var(--hell);
    padding: calc(var(--kopf) + 1rem) var(--rand) 2rem; align-items: flex-start; z-index: 39;
    opacity: 0; visibility: hidden; transition: opacity 0.3s var(--weich), visibility 0s linear 0.3s;
  }
  .menue.offen { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menue ul { flex-direction: column; gap: 0; width: 100%; }
  .menue a { display: block; font-size: clamp(2rem, 9vw, 3rem); font-weight: 900; text-transform: uppercase; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1; padding-block: 0.55rem; }
}

/* Bewerbungsknopf oben rechts, erst sichtbar nach dem Auftakt */
.kopf-knopf {
  position: fixed; z-index: 42; top: calc((var(--kopf) - 2.5rem) / 2); right: var(--rand);
  opacity: 0; visibility: hidden; transform: translate3d(0, -0.5rem, 0);
  transition: opacity 0.3s var(--weich), transform 0.45s var(--weich), visibility 0s linear 0.45s, background-color 0.35s var(--weich), color 0.35s var(--weich);
  --knopf: var(--hell); --knopf-schrift: var(--nacht); --knopf-ueber: var(--himmel); --knopf-ueber-schrift: var(--nacht);
}
.kopf-dunkel .kopf-knopf { --knopf: var(--blau); --knopf-schrift: var(--weiss); --knopf-ueber: #000000; --knopf-ueber-schrift: var(--weiss); }
.kopf-knopf.da { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kopf-knopf.da:hover, .kopf-knopf.da:focus-visible { transition: background-color 0s linear 0.5s, color 0.35s var(--weich); }
@media (max-width: 899px) { .kopf-knopf { right: calc(var(--rand) + 4.25rem); } }
@media (max-width: 349px) { .kopf-knopf { display: none; } }

/* ---------- Zeiger und Anzeige ---------- */
.zeiger { position: fixed; left: -1.1rem; top: -1.1rem; z-index: 70; width: 2.2rem; height: 2.2rem; pointer-events: none; color: var(--weiss); opacity: 0; transition: opacity 0.3s; will-change: transform; }
.zeiger.an { opacity: 1; }
.zeiger i { position: absolute; background: currentColor; outline: 1px solid var(--nacht); transition: transform 0.35s var(--weich); }
.zeiger .a { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.zeiger .b { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.zeiger.fest .a { transform: scaleX(1.9); }
.zeiger.fest .b { transform: scaleY(1.9); }

/* Anzeige am rechten Rand, hochkant: wie weit, wie schnell */
.anzeige {
  position: fixed; right: 0.45rem; top: 50%; z-index: 38; pointer-events: none; writing-mode: vertical-rl; transform: translate3d(0, -50%, 0);
  color: var(--hell); transition: color 0.35s var(--weich); font-weight: 700; font-size: 0.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap;
  display: none;
}
.anzeige span + span { margin-top: 1.25em; }
.kopf-dunkel .anzeige { color: #000000; }
.kino .anzeige { display: block; }
@media (max-width: 899px) { .kino .anzeige { display: none; } }

/* ---------- Szenen ---------- */
.szene { position: relative; }
.buehne { position: relative; }
.kino .szene { height: calc(var(--laenge, 2) * 100svh); }
.kino .szene > .buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* ---------- Szene 1: Auftakt ---------- */
.auftakt .buehne { display: flex; flex-direction: column; }
.titel { color: var(--hell); padding: calc(var(--kopf) + 1.5rem) var(--rand) 0; }
.titel .z { display: block; overflow: hidden; padding-top: 0.05em; }
.titel .z > span { will-change: transform; }
.plus-platz { display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.16em; vertical-align: baseline; }
html:not(.kino) .plus-platz { position: relative; }
html:not(.kino) .plus-platz::before, html:not(.kino) .plus-platz::after { content: ""; position: absolute; background: var(--himmel); }
html:not(.kino) .plus-platz::before { left: 0; right: 0; top: calc(50% - 0.05em); height: 0.1em; }
html:not(.kino) .plus-platz::after { top: 0; bottom: 0; left: calc(50% - 0.05em); width: 0.1em; }
.vorspann { padding: 1.5rem var(--rand) 2rem; max-width: 34rem; }
.vorspann .frist-kurz { margin-top: 1rem; }
.vorspann .frist-kurz strong { font-weight: 800; }
.vorspann .uhr { display: block; color: var(--leise); font-variant-numeric: tabular-nums; }
.vorspann .knopf { margin-top: 1rem; }
.buehne-foto { position: relative; }
.buehne-foto img, .klar img { width: 100%; height: auto; object-fit: cover; object-position: 62% 60%; }
.schleier, .linse, .zaehler { display: none; }
.marken { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.marken i { position: absolute; border: 2px solid var(--himmel); }
.marken i::before {
  content: "Hand"; position: absolute; left: -2px; bottom: 100%;
  background: var(--himmel); color: var(--nacht); font-style: normal; font-size: 0.75rem; font-weight: 800; line-height: 1; padding: 0.2rem 0.35rem;
}
.tafel { padding: 2rem var(--rand) 3rem; }
.tafel-zeile { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.tafel-zeile p { color: var(--leise); max-width: 26rem; }

.kino .auftakt .buehne { display: block; }
.kino .buehne-foto { position: absolute; inset: 0; }
.kino .buehne-foto img, .kino .klar img { height: 100%; }
.kino .buehne-foto .marken { display: none; }
.kino .schleier { display: block; position: absolute; inset: 0; background: var(--nacht); opacity: 0.74; }
.kino .linse { display: block; position: absolute; inset: 0; pointer-events: none; }
.arm { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; will-change: transform; }
.klar { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.klar::after { content: ""; position: absolute; inset: 0; background: var(--himmel); opacity: var(--deck, 0); }
.arm.quer { transform: translate3d(var(--qx, 0px), var(--qy, 0px), 0) scale(var(--qsx, 0.0001), var(--qsy, 0.0001)); }
.arm.quer .klar { transform: scale(var(--qix, 1), var(--qiy, 1)) translate3d(calc(var(--qx, 0px) * -1), calc(var(--qy, 0px) * -1), 0); }
.arm.hoch { transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0) scale(var(--hsx, 0.0001), var(--hsy, 0.0001)); }
.arm.hoch .klar { transform: scale(var(--hix, 1), var(--hiy, 1)) translate3d(calc(var(--hx, 0px) * -1), calc(var(--hy, 0px) * -1), 0); }
.kino .klar .marken { left: var(--bx, 0px); top: var(--by, 0px); width: var(--bw, 100%); height: var(--bh, 100%); }
.kino .klar .marken i { opacity: 0; transform: scale(1.35); transition: opacity 0.25s var(--weich), transform 0.45s var(--weich); }
.kino .klar .marken i.an { opacity: 1; transform: none; }

.kino .titel {
  position: absolute; z-index: 3; left: 0; bottom: clamp(1rem, 4svh, 2.75rem); padding: 0 0 0 var(--rand);
  width: calc(100% - var(--rand)); pointer-events: none;
}
.kino .titel .z { will-change: transform, opacity; opacity: calc(1 - var(--auf, 0) * 1.5); }
.kino .titel .z1 { transform: translate3d(calc(var(--auf, 0) * -34vw), 0, 0); }
.kino .titel .z2 { transform: translate3d(calc(var(--auf, 0) * 30vw), 0, 0); }
.kino .titel .z3 { transform: translate3d(calc(var(--auf, 0) * -22vw), calc(var(--auf, 0) * 12svh), 0); }
@media (prefers-reduced-motion: no-preference) {
  .kino.js .titel .z > span { display: inline-block; transform: translate3d(0, 110%, 0); }
  .kino.js.bereit .titel .z > span { transform: none; transition: transform 1.1s var(--weich) calc(0.15s + var(--i, 0) * 110ms); }
  .kino.js .vorspann { opacity: 0; }
  .kino.js.bereit .vorspann { opacity: var(--t-op, 1); transition: opacity 0.8s var(--weich) 0.6s; }
  .kino.js.bereit.lief .vorspann { transition: none; }
}
.kino .vorspann {
  position: absolute; z-index: 4; color: var(--hell); max-width: none; padding: 0;
  left: var(--rand); right: var(--rand); top: calc(var(--kopf) + clamp(0.5rem, 3svh, 2rem));
  opacity: var(--t-op, 1); transform: translate3d(0, var(--t-y, 0px), 0);
}
.kino .vorspann > * { max-width: 27rem; }
@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  .kino .titel { width: calc(100% - var(--rand) - min(24rem, 32vw) - 3vw); }
  .kino .vorspann { left: auto; top: auto; bottom: clamp(1.25rem, 5svh, 3.25rem); width: min(24rem, 32vw); }
}
/* Während das Skript den Platz des Plus misst, ruhen alle Verschiebungen */
.messen .titel, .messen .titel *, .messen .vorspann { transform: none !important; transition: none !important; }
.kino .zaehler {
  display: block; position: absolute; z-index: 3; right: var(--rand); top: calc(var(--kopf) + 1rem);
  color: var(--hell); font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 2.4vw, 2.25rem); line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--nacht); padding: 0.55rem 1.1rem; border-radius: 999px; opacity: var(--m-op, 0);
}
.kino .tafel {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 4.5svh, 3rem) var(--rand) clamp(1.5rem, 4svh, 2.5rem);
  border-radius: var(--blatt) var(--blatt) 0 0;
  transform: translate3d(0, calc((1 - var(--tafel, 0)) * 101%), 0); will-change: transform;
}

/* ---------- Laufband: zieht langsam von allein, das Scrollen schiebt mit. Es hält an, solange die Maus darauf liegt.
   Das Skript hängt Kopien des Stücks an und versetzt die Zeile, sodass sie endlos läuft. ---------- */
.laufband { overflow: hidden; white-space: nowrap; padding-block: clamp(1.75rem, 4.5vw, 4rem); }
.laufband p {
  display: inline-block; white-space: nowrap; font-size: clamp(3rem, 9.5vw, 9.5rem); font-weight: 900; font-stretch: 112%; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95; will-change: transform;
}
.stueck { display: inline-block; padding-right: 0.25em; }
.laufband p.rand { color: transparent; -webkit-text-stroke: 2px var(--schrift); }
.laufband .pl { color: var(--akzent); -webkit-text-stroke: 0; }

/* ---------- Szene 2: Angebot als Band, das seitwärts läuft ---------- */
.band-titel { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; color: var(--akzent); padding: var(--abschnitt) var(--rand) 0; }
.band-stand, .hinterwort, .fortschritt { display: none; }
.streifen { display: grid; gap: clamp(3.5rem, 8vw, 6rem); padding: 2.5rem var(--rand) var(--abschnitt); }
.tafelbild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.tafelbild .satz { font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem); font-weight: 500; line-height: 1.4; max-width: 27ch; }
.bilder { display: grid; gap: 1rem; }
.bilder figure { overflow: hidden; border-radius: var(--rund); }
.bilder img { width: 100%; height: 100%; object-fit: cover; }
.bilder figcaption { display: none; }

.kino .band-titel { position: absolute; z-index: 3; left: var(--rand); top: calc(var(--kopf) + 0.75rem); padding: 0; }
.kino .band-stand { display: block; position: absolute; z-index: 3; right: var(--rand); bottom: 3.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kino .hinterwort {
  display: block; position: absolute; left: 0; top: 50%; pointer-events: none; white-space: nowrap;
  font-size: 44vw; font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.8; color: rgba(0, 0, 0, 0.045);
  transform: translate3d(calc(30vw - var(--p, 0) * 190vw), -50%, 0); will-change: transform;
}
.kino .streifen {
  position: absolute; inset: 0 auto 0 0; display: flex; gap: 7vw; width: max-content; padding: 0 var(--rand);
  transform: translate3d(var(--x, 0px), 0, 0); will-change: transform;
}
.kino .tafelbild {
  flex: none; width: min(86vw, 82rem); height: 100%;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: 4vw; row-gap: clamp(1rem, 3svh, 2rem);
  padding-top: calc(var(--kopf) + clamp(2.75rem, 8svh, 5rem)); padding-bottom: clamp(6rem, 13svh, 7.5rem);
}
/* Tiefe im Band: --d sagt je Tafel, wie weit sie von der Bildmitte weg ist (-1 rechts davon, 0 Mitte, 1 links davon), --n ist der Betrag.
   Überschrift, Satz, großes und kleines Bild ziehen verschieden schnell, die Bilder wachsen zur Mitte hin auf volle Größe. */
.kino .tafelbild h3 { grid-column: 1 / -1; transform: translate3d(calc(var(--d, 0) * -7vw), 0, 0); will-change: transform; }
.kino .tafelbild .satz { align-self: end; transform: translate3d(calc(var(--d, 0) * -2.5vw), 0, 0); will-change: transform; }
.kino .bilder { position: relative; display: block; min-height: 0; }
.kino .bilder figure { position: absolute; transform: scale(calc(1 - var(--n, 0) * 0.08)); will-change: transform; }
.kino .bilder .b-gross { right: 0; top: 0; bottom: 0; width: 70%; }
.kino .bilder .b-klein { left: 0; bottom: 0; width: 40%; height: 54%; z-index: 1; transform: translate3d(calc(var(--d, 0) * 6vw), 0, 0) scale(calc(1 - var(--n, 0) * 0.08)); }
.kino .bilder .b-ganz { inset: 0; }
.kino .bilder.getrennt .b-gross { width: 62%; }
.kino .bilder.getrennt .b-klein { width: 34%; height: 46%; }
.kino .bilder img { width: 126%; max-width: none; margin-left: -13%; transform: translate3d(calc(var(--d, 0) * -7.5%), 0, 0) scale(calc(1 + var(--n, 0) * 0.14)); will-change: transform; }
.kino .fortschritt { display: block; position: absolute; z-index: 3; left: var(--rand); right: calc(var(--rand) + 4.5rem); bottom: 4.4rem; height: 2px; background: var(--linie); }
.kino .fortschritt i { position: absolute; left: 0; top: -0.75rem; width: 1.5rem; height: 1.5rem; margin-left: -0.75rem; color: var(--akzent); transform: translate3d(calc(var(--p, 0) * (100vw - 2 * var(--rand) - 4.5rem)), 0, 0); will-change: transform; }
.kino .fortschritt i::before, .kino .fortschritt i::after { content: ""; position: absolute; background: currentColor; }
.kino .fortschritt i::before { left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; }
.kino .fortschritt i::after { top: 0; bottom: 0; left: calc(50% - 1.5px); width: 3px; }
@media (max-width: 899px), (max-aspect-ratio: 11/10) {
  .kino .tafelbild { width: calc(100vw - 2 * var(--rand)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .kino .tafelbild .satz { grid-row: 3; }
  .kino .bilder { grid-row: 2; }
  .kino .streifen { gap: var(--rand); }
}

/* Fenster mit Code, immer dunkel. Die Zeilen erscheinen nacheinander, wenn die Tafel durchs Bild zieht. */
.fenster { background: var(--nacht); color: var(--hell); height: 100%; display: flex; flex-direction: column; border-radius: var(--rund); overflow: hidden; }
.fenster-kopf { padding: 0.7rem 1.1rem; font-size: 0.875rem; font-weight: 700; border-bottom: 1px solid rgba(245, 245, 242, 0.26); display: flex; justify-content: space-between; gap: 1rem; }
.fenster-kopf span + span { color: rgba(245, 245, 242, 0.74); font-weight: 500; }
.fenster pre {
  padding: 1rem 1.1rem; overflow: hidden; flex: 1; min-height: 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.6875rem, 0.5rem + 0.55vw, 0.9375rem); line-height: 1.65;
}
.fenster code span.zl { display: block; white-space: pre; }
.fenster .s { color: var(--himmel); }
.fenster .t { color: rgba(245, 245, 242, 0.62); }
.fenster .aus { flex: none; border-top: 1px solid rgba(245, 245, 242, 0.26); font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); font-weight: 800; font-family: inherit; padding-block: 0.6rem; }
.kino .fenster code span.zl, .kino .fenster .aus { opacity: 0; transform: translate3d(-0.6rem, 0, 0); transition: opacity 0.25s var(--weich), transform 0.35s var(--weich); }
.kino .fenster code span.zl.an, .kino .fenster .aus.an { opacity: 1; transform: none; }

/* ---------- Szene 3: Projekte als Stapel ---------- */
.karte { padding: var(--abschnitt) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.karte-kopf { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; }
.karte-text { display: grid; gap: 1rem; max-width: 40rem; }
.karte-text .zitat { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.karte-text .von { font-size: 0.9375rem; color: var(--leise); }
.stapel-stand { display: none; }
/* Alle drei Karten haben die helle Seitenfarbe und liegen als Blätter übereinander: Das untere weicht zurück und wird
   dunkler (--dunkel), das obere schiebt sich mit runden Ecken darüber. Der Name fährt dabei aus seiner Zeile hoch (--auf)
   und zieht über die ganze Szene langsam seitwärts (--k). */
.kino .stapel > .buehne { background: transparent; }
.kino .karte {
  position: absolute; inset: 0; padding: calc(var(--kopf) + clamp(1rem, 4svh, 2.5rem)) var(--rand) clamp(1.5rem, 5svh, 3rem);
  grid-template-rows: auto 1fr auto; align-items: center; transform-origin: 50% 0; will-change: transform;
  border-radius: var(--blatt); overflow: hidden;
}
.kino .karte::after { content: ""; position: absolute; inset: 0; background: #000000; opacity: calc(var(--dunkel, 0) * 0.2); pointer-events: none; }
.kino .karte:nth-child(1) { --dunkel: var(--e1, 0); transform: scale(calc(1 - var(--e1, 0) * 0.08)); }
/* --ruhe: der Stand der Szene, an dem das Blatt still steht. Dort sitzt der Name genau am Rand. */
.kino .karte:nth-child(2) { --dunkel: var(--e2, 0); --auf: var(--e1, 0); --ruhe: 0.325; transform: translate3d(0, calc((1 - var(--e1, 0)) * 101%), 0) scale(calc(1 - var(--e2, 0) * 0.08)); }
.kino .karte:nth-child(3) { --dunkel: var(--e3, 0); --auf: var(--e2, 0); --ruhe: 0.615; transform: translate3d(0, calc((1 - var(--e2, 0)) * 101%), 0) scale(calc(1 - var(--e3, 0) * 0.08)); }
.kino .karte:nth-child(4) { --auf: var(--e3, 0); --ruhe: 0.935; transform: translate3d(0, calc((1 - var(--e3, 0)) * 101%), 0); }
.karte .name { line-height: 1; }
.karte-text .film { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.9375rem; color: var(--leise); }
/* Erstes Blatt: eigene Projekte als drei Zeilen, großes Wort und ein Satz */
.eigen-liste li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem 4vw; align-items: center; padding-block: clamp(0.9rem, 3svh, 2.25rem); }
.eigen-liste li::before, .eigen-liste li:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); transform-origin: 0 50%; }
.eigen-liste li:last-child::after { top: auto; bottom: 0; }
/* So groß, dass „Super Mario“ und „Newsletter“ in ihrer Spalte je in eine Zeile passen */
.eigen-wort { font-size: clamp(2rem, 0.5rem + 5.4vw, 5.75rem); font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; }
.eigen-liste p { font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; line-height: 1.4; max-width: 27ch; }
@media (min-width: 900px) and (min-aspect-ratio: 11/10) { .eigen-liste li { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.kino .karte.eigen { grid-template-rows: auto 1fr; }
@media (prefers-reduced-motion: no-preference) {
  .js .karte[data-rein] .eigen-liste li::before, .js .karte[data-rein] .eigen-liste li::after { transform: scaleX(0); }
  .js .karte[data-rein].da .eigen-liste li::before, .js .karte[data-rein].da .eigen-liste li::after { transform: none; transition: transform 1.3s var(--weich) 0.1s; }
  .js .karte[data-rein].da .eigen-liste li:nth-child(2)::before { transition-delay: 0.2s; }
  .js .karte[data-rein].da .eigen-liste li:nth-child(3)::before, .js .karte[data-rein].da .eigen-liste li:nth-child(3)::after { transition-delay: 0.3s; }
}
/* Oben Platz für die Punkte von „Schöck“, beschnitten wird nur senkrecht */
.kino .karte .name { overflow-x: visible; overflow-y: clip; padding-top: 0.2em; margin-top: -0.2em; }
.kino .karte .name > span { transform: translate3d(calc((var(--ruhe, 0.5) - var(--k, 0.5)) * 8vw), calc((1 - var(--auf, 1)) * 62%), 0); will-change: transform; }
.karte-text .zitat { max-width: 30ch; }
.kino .stapel-stand { display: block; position: absolute; z-index: 3; right: var(--rand); top: calc(var(--kopf) + clamp(1rem, 4svh, 2.5rem)); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-variant-numeric: tabular-nums; color: #000000; }

/* ---------- Szene 4: Bewerbung. Ein Plus aus zwei Linien wird dick, bis alles blau ist. ---------- */
.ruf > .buehne { background: var(--blau); color: var(--weiss); }
.wisch { display: none; }
.ruf-inhalt { position: relative; padding: var(--abschnitt) var(--rand); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.ruf .frist { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem); font-weight: 700; line-height: 1.1; }
.kringel-wort { position: relative; display: inline-block; white-space: nowrap; margin-left: 0.15em; }
.kringel { position: absolute; left: -10%; top: -48%; width: 119%; height: 196%; overflow: visible; pointer-events: none; transform: rotate(-2.5deg); }
.kringel path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .kringel path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--weich) 0.2s; }
  .js .ruf.da .kringel path { stroke-dashoffset: 0; }
}
.zahlen { margin-top: 1.75rem; display: flex; gap: clamp(0.9rem, 2.2vw, 2.25rem); }
.zahlen div { display: grid; justify-items: start; }
.zahlen b { display: block; font-size: clamp(2.25rem, 1rem + 3.2vw, 4.25rem); font-weight: 900; font-stretch: 112%; line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zahlen span { font-size: 0.875rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .zahlen b.tick { animation: tick 0.4s var(--weich); }
  @keyframes tick { from { transform: translate3d(0, -28%, 0); opacity: 0.35; } to { transform: none; opacity: 1; } }
}
.ruf .knopf { margin-top: 1.75rem; }
.ruf .dazu { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.ruf .dazu .knopf { margin-top: 0; }
.schritte { margin-top: 2rem; counter-reset: schritt; display: grid; gap: 0.9rem; max-width: 30rem; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.schritte li::before { content: counter(schritt); font-weight: 900; }
.schritte strong { font-weight: 800; }
.ruf .laufband { display: none; }

.kino .ruf > .buehne { background: var(--hell); }
.kino .wisch { display: block; position: absolute; inset: 0; }
.kino .wisch i { position: absolute; inset: 0; background: var(--wisch, var(--blau)); will-change: transform; }
.kino .wisch .q { transform: scaleY(var(--w, 1)); }
.kino .wisch .h { transform: scaleX(var(--w, 1)); }
.kino .ruf-inhalt {
  position: absolute; inset: 0; padding: calc(var(--kopf) + clamp(0.75rem, 3svh, 2rem)) var(--rand) clamp(5.5rem, 15svh, 9rem);
  grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(1rem, 3svh, 2.5rem);
  opacity: var(--r-op, 1);
}
.kino .ruf .maske > span { transform: translate3d(0, calc((1 - var(--r, 1)) * 135%), 0); }
.kino .ruf .laufband { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding-block: clamp(0.75rem, 2.5svh, 1.5rem); opacity: var(--r-op, 1); }
.kino .ruf .laufband p { font-size: clamp(2.25rem, 6.5vw, 6rem); }
@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  .kino .ruf-inhalt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5vw; align-items: center; }
  .kino .ruf .zahlen { margin-top: 0; }
}
@media (max-width: 899px), (max-aspect-ratio: 11/10) {
  .kino .ruf .schritte { display: none; }
  .kino .ruf .zahlen { margin-top: 1rem; }
  .kino .ruf .knopf { margin-top: 1.25rem; }
}

/* ---------- Unternehmen: Reihen links, daneben ein Bildrahmen. Die Reihe in der Bildmitte ist aktiv, die anderen treten zurück,
   und im Rahmen schiebt sich das Bild zur aktiven Reihe wie ein Vorhang über das vorige. ---------- */
.unternehmen { position: relative; }
.unternehmen h2.riesen, .verein h2.riesen { font-size: clamp(2.5rem, 1rem + 7.2vw, 7.5rem); }
.unternehmen .gross { margin-top: 1.5rem; }
.zweispalt { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.reihe { position: relative; display: grid; gap: 0.6rem; padding: clamp(1.1rem, 2.6vw, 2.25rem) 0; }
.reihe::before, .reihe:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); transform-origin: 0 50%; }
.reihe:last-child::after { top: auto; bottom: 0; }
.reihe-wort {
  display: block; overflow-wrap: anywhere; font-size: clamp(1.75rem, 1rem + 3.4vw, 4.25rem); font-weight: 900; font-stretch: 112%; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95; transition: transform 0.7s var(--weich), opacity 0.5s var(--weich);
}
.reihe-text { display: block; color: var(--leise); max-width: 30rem; transition: transform 0.7s var(--weich), opacity 0.5s var(--weich); }
/* Das Plus markiert die aktive Reihe */
.reihe .merk {
  position: absolute; left: 0; top: clamp(1.1rem, 2.6vw, 2.25rem); margin: 0.16em 0 0; color: var(--akzent);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4.25rem); width: 0.5em; height: 0.5em;
  opacity: 0; transform: scale(0.3) rotate(-90deg); transition: transform 0.7s var(--weich), opacity 0.4s var(--weich);
}
.reihen.lebt .reihe:not(.aktiv) .reihe-wort { opacity: 0.36; }
.reihen.lebt .reihe:not(.aktiv) .reihe-text { opacity: 0.62; }
/* Wort und Text rücken um dieselbe Strecke ein: 0.82em der Wortgröße */
.reihen.lebt .reihe.aktiv .reihe-wort { transform: translate3d(0.82em, 0, 0); }
.reihen.lebt .reihe.aktiv .reihe-text { transform: translate3d(clamp(1.435rem, 0.82rem + 2.79vw, 3.485rem), 0, 0); }
.reihen.lebt .reihe.aktiv .merk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reihe[data-rein]::before, .js .reihe[data-rein]::after { transform: scaleX(0); }
  .js .reihe[data-rein].da::before, .js .reihe[data-rein].da::after { transform: none; transition: transform 1.3s var(--weich) var(--v, 0ms); }
}
.rahmen { position: relative; aspect-ratio: 3 / 2; border-radius: var(--rund); overflow: hidden; background: rgba(245, 245, 242, 0.07); }
.rahmen-bild { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.rahmen-bild:first-child, .rahmen-bild.an, .rahmen-bild.war { visibility: visible; }
.rahmen-bild.war { z-index: 1; }
.rahmen-bild.an { z-index: 2; }
.rahmen-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  /* --von: von unten (102%) beim Scrollen nach unten, von oben (-102%) beim Zurückscrollen. Das Bild zieht langsamer als sein Ausschnitt. */
  .js .rahmen-bild { visibility: visible; transform: translate3d(0, var(--von, 102%), 0); will-change: transform; }
  .js .rahmen-bild img { transform: translate3d(0, calc(var(--von, 102%) * -0.62), 0) scale(1.22); will-change: transform; }
  .js .rahmen-bild.war, .js .rahmen-bild.war img { transform: none; }
  .js .rahmen-bild.an { transform: none; transition: transform 1s var(--weich); }
  .js .rahmen-bild.an img { transform: none; transition: transform 1.35s var(--weich); }
}
@media (max-width: 899px) {
  /* Auf dem Handy bleibt der Rahmen oben stehen, die Reihen ziehen darunter durch */
  .kino .rahmen { position: sticky; top: calc(var(--kopf) + 0.25rem); z-index: 2; background: var(--nacht); }
}
@media (min-width: 900px) {
  .zweispalt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5vw; align-items: start; }
  .reihen { grid-column: 1; grid-row: 1; }
  .rahmen { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--kopf) + 1.5rem); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf) - 3rem); width: 100%; justify-self: end; }
  .reihe { padding-block: clamp(1.5rem, 3.2vw, 3rem); }
  .reihe .merk { top: clamp(1.5rem, 3.2vw, 3rem); }
}
.kontaktzeile { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ---------- Verein ---------- */
.verein .gross { margin-top: 1.5rem; }
.ressorts { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ressorts > div { position: relative; padding-block: 1.15rem; display: grid; gap: 0.25rem 2rem; transition: padding-left 0.5s var(--weich); }
.ressorts > div::before, .ressorts > div:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); transform-origin: 0 50%; }
.ressorts > div:last-child::after { top: auto; bottom: 0; }
.ressorts > div:hover { padding-left: clamp(0.5rem, 1.5vw, 1.5rem); }
.ressorts dt { font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height: 1.1; }
.ressorts dd { margin: 0; }
.ressorts .tut { color: var(--leise); }
@media (min-width: 900px) { .ressorts > div { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: baseline; } }
.verein h3 { margin-top: clamp(3.5rem, 7vw, 6rem); }
/* Zitate groß und untereinander. Beim Scrollen werden sie Wort für Wort hell. */
.stimmen { margin-top: 1.5rem; display: grid; gap: clamp(2.5rem, 6vw, 5.5rem); }
.stimmen blockquote p { font-size: clamp(1.375rem, 1rem + 1.7vw, 2.375rem); line-height: 1.3; font-weight: 700; max-width: 27em; }
@media (min-width: 900px) { .stimmen figure:nth-child(2) { justify-self: end; width: min(100%, 46rem); } }
.w { transition: opacity 0.5s var(--weich); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-woerter] .w { opacity: 0.26; }
  .js [data-woerter] .w.an { opacity: 1; }
}
.herkunft { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--leise); }
.herkunft strong { display: block; color: var(--schrift); font-weight: 800; }
.dazu-zeile { margin-top: clamp(2rem, 4vw, 3rem); color: var(--leise); }
/* Partner: ohne Skript oder bei „Bewegung reduzieren“ eine Liste, die umbricht. Mit Skript (.laeuft) ein Band über die ganze Breite. */
.partnerband { margin-top: 1.5rem; }
.partner {
  display: flex; flex-wrap: wrap; gap: 0.3em 0; font-size: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.08;
}
.partner a { text-decoration: none; transition: color 0.3s var(--weich); }
.partner a:hover { color: var(--akzent); }
.partner .pl { color: var(--akzent); margin-inline: 0.4em; }
.partnerband.laeuft { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding-block: 0.5rem; }
.partnerband.laeuft .partner-zug { display: flex; width: max-content; will-change: transform; }
.partnerband.laeuft .partner { flex: none; flex-wrap: nowrap; white-space: nowrap; padding-right: 0; }

/* ---------- Fuß: Das große Plus zeichnet sich von der Mitte aus und dreht sich mit dem Scrollen ein (--f: 0 bis 1) ---------- */
.fuss { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem) 4.5rem; }
.fuss-plus {
  position: absolute; right: -5vw; bottom: -18%; width: clamp(16rem, 42vw, 38rem); aspect-ratio: 1; pointer-events: none; --s: clamp(2px, 0.26vw, 4px);
  transform: rotate(calc((var(--f, 1) - 1) * 70deg)); will-change: transform;
}
.fuss-plus i { position: absolute; }
.fuss-plus .a { background: var(--himmel); left: 0; right: calc(50% + var(--s) / 2); top: 50%; height: var(--s); transform-origin: 100% 50%; }
.fuss-plus .b { background: var(--himmel); top: 0; bottom: calc(50% + var(--s) / 2); left: 50%; width: var(--s); transform-origin: 50% 100%; }
.fuss-plus .c { background: var(--hell); right: 0; left: calc(50% + var(--s) / 2); bottom: 50%; height: var(--s); transform-origin: 0 50%; }
.fuss-plus .d { background: var(--hell); bottom: 0; top: calc(50% + var(--s) / 2); right: 50%; width: var(--s); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .fuss[data-rein] .fuss-plus i { transition: transform 1.7s var(--weich) 0.15s; }
  .js .fuss[data-rein]:not(.da) .fuss-plus .a, .js .fuss[data-rein]:not(.da) .fuss-plus .c { transform: scaleX(0); }
  .js .fuss[data-rein]:not(.da) .fuss-plus .b, .js .fuss[data-rein]:not(.da) .fuss-plus .d { transform: scaleY(0); }
}
.fuss .innen { position: relative; }
/* Der Inhalt kommt langsamer hoch als die Seite, als läge er darunter */
.kino .fuss .innen { transform: translate3d(0, calc((1 - var(--f, 1)) * -5rem), 0); will-change: transform; }
.fuss .logo { width: 9rem; height: calc(9rem * 232 / 765); color: var(--hell); }
.fuss-spruch { margin-top: 1rem; font-weight: 700; }
.fuss-spalten { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 2rem clamp(2rem, 5vw, 5rem); }
@media (min-width: 700px) { .fuss-spalten { grid-template-columns: repeat(3, max-content); } }
.fuss-spalten li + li { margin-top: 0.35rem; }
.fuss-spalten address { font-style: normal; }
.fuss-ende { margin-top: clamp(3rem, 6vw, 5rem); font-size: 0.9375rem; color: var(--leise); }

/* ---------- Rechtstexte ---------- */
.rechtsseite { background: var(--hell); }
.rechtstext { background: var(--hell); color: #000000; padding-top: calc(var(--kopf) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: var(--abschnitt); }
.rechtstext .innen { max-width: 44rem; margin-inline: var(--rand) auto; }
.rechtstext h1 { color: var(--blau); font-weight: 900; line-height: 1; letter-spacing: -0.012em; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); }
.rechtstext h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-top: 2.75rem; }
.rechtstext h3 { font-size: 1.1875rem; margin-top: 1.75rem; }
.rechtstext h4 { font-size: 1.0625rem; font-weight: 700; margin: 1.25rem 0 0; }
.rechtstext p, .rechtstext ul { margin-top: 0.9rem; }
.rechtstext ul { list-style: disc; padding-left: 1.25rem; }
.rechtstext a { overflow-wrap: anywhere; }