/* ===========================================================
   ifeelfine. — page styles
   Brand kit extracted from the previous standalone build.
   Warm ivory ground, deep charcoal ink, nothing pure.
   =========================================================== */
:root {
  --sc-canvas:     #f6f2ee;
  --sc-surface:    #efe9e2;
  --sc-ink:        #1a1814;
  --sc-ink-soft:   #8c8680;
  --sc-accent:     #1a1814;
  --sc-accent-ink: #f6f2ee;

  --sc-hairline:        #e8e3dc;
  --sc-hairline-strong: #d8d1c7;

  --sc-font-display: "Syne", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --iff-quote:       "Lora", Georgia, serif;

  --iff-ink-inv:      #f6f2ee;
  --iff-ink-inv-soft: #a8a099;
  --iff-folio-x: calc(var(--sc-gutter) * 0.5);

  /* published by the loop at the foot of the page */
  --iff-flip: 0;
  --iff-ap-r: 0px;
  --iff-ap-x: 0px;
}

html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); }
.sc-display { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.04em; }

/* Placeholder convention. Every invented value on this page carries it,
   so nothing fabricated can pass for confirmed. */
.dummy {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.25em;
  cursor: help;
}

/* ----------------------------------------------------------
   Folio. The only chrome: a margin mark that updates, and the
   one persistent ask.
   align-items:center is load-bearing — stretched boxes put the
   three vertical runs on three different optical axes and the
   margin reads as bent.
   ---------------------------------------------------------- */
.folio {
  position: fixed; z-index: var(--sc-z-chrome);
  left: var(--iff-folio-x); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sc-5);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 55%, transparent);
  pointer-events: none;
}
/* nowrap, weil Safari bei senkrechtem Text die Breite sonst so berechnet,
   als duerfe er umbrechen: beim langen Kapitel "III · Wer wir sind"
   wurde die Spalte breiter, und die mittig ausgerichtete Leiste rutschte
   rund 25 px in den Text (25.09.2026, nur Safari). */
.folio > * { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.folio__mark {
  font-family: var(--sc-font-display); font-weight: 800;
  /* Der Namenszug laeuft offener als die Ueberschriften: bei Syne in 800
     kleben sonst "fe" und "el" aneinander. Siehe .title-page__mark. */
  font-size: var(--sc-t-sm); letter-spacing: -0.045em; text-transform: none;
  color: var(--sc-ink);
}
.folio__chapter b { font-weight: 500; color: var(--sc-ink); }
/* No border here: in vertical writing mode an inline-start border draws
   ACROSS the column and reads as a break in the margin rule. */
.folio__cta {
  pointer-events: auto; font-weight: 500; color: var(--sc-ink);
  text-decoration: underline; text-underline-offset: 0.3em;
  text-decoration-thickness: 1px; padding-block: var(--sc-2);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .folio__cta:hover { opacity: 0.55; } }
.folio__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.folio.is-inverted { color: color-mix(in oklab, var(--iff-ink-inv) 55%, transparent); }
.folio.is-inverted .folio__mark,
.folio.is-inverted .folio__chapter b,
.folio.is-inverted .folio__cta { color: var(--iff-ink-inv); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sc-ink); color: var(--sc-canvas); padding: var(--sc-3) var(--sc-4);
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
}
.skip:focus { left: var(--sc-4); top: var(--sc-4); }

.plate { padding-inline: max(var(--sc-gutter), 5.5rem); }
@media (max-width: 860px) { .plate { padding-inline: var(--sc-gutter); } }

/* A flow section straight after a pinned act inherits the viewport the
   stage needs to scroll off, then adds its own padding on top. */
.after-pin { padding-block-start: 0; }
.after-pin > .spread,
.after-pin > .plain { padding-block-start: var(--sc-5); }

/* ---------------------------------------------------------- I · Title */
.title-page { min-height: 100svh; display: grid; align-content: center; padding-block: var(--sc-9) var(--sc-8); }
.title-page__mark {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(3.2rem, 13vw, 11rem); line-height: 0.9;
  /* Wortmarke: normale bis leicht offene Laufweite statt der engen der
     Ueberschriften. Eng gestellt verschmelzen die Buchstabenpaare "fe"
     und "el", das Wort wird zum Block. */
  letter-spacing: -0.045em; margin: 0 0 var(--sc-7);
}
.title-page h1 {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: -0.035em;
  max-width: 20ch; margin: 0 0 var(--sc-5); text-wrap: balance;
}
.title-page__sub {
  font-family: var(--sc-font-text); font-weight: 300;
  font-size: var(--sc-t-base); line-height: var(--sc-leading-body);
  color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; margin: 0;
}
.title-page__rule { margin-top: var(--sc-8); border: 0; border-top: 1px solid var(--sc-hairline); max-width: 12rem; }
.title-page__meta {
  margin-top: var(--sc-4); font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
}

/* ---------------------------------------------------- II · The reel */
.peak { background: color-mix(in oklab, #1a1814 calc(var(--iff-flip) * 100%), #f6f2ee); }
.peak [data-sc-stage] { overflow: hidden; }
.peak__aperture picture { display: contents; }
.peak__aperture video, .peak__aperture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.peak__aperture {
  position: absolute; inset: 0;
  clip-path: circle(var(--iff-ap-r) at var(--iff-ap-x) 50%);
  background: #1a1814;
}

/* Der Index löst das Reel auf: erst die Überschrift, dann die Liste
   dessen, was gelaufen ist. Beide sitzen auf derselben Achse und an
   derselben Kante, damit der Wechsel als Schnitt liest und nicht als
   zweites Element daneben.

   width: fit-content, nicht volle Breite. Spannt der Block über den
   ganzen Rahmen, misst der Kontrastlauf auch das helle rechte
   Bilddrittel mit, obwohl dort gar keine Schrift steht. */
/* Kundenband unter dem Reel. Sitzt auf derselben Höhe wie die Überschrift
   und benutzt dieselbe Schrift, nur klein und leise. Es läuft seitlich
   durch; die Maske an den Rändern lässt die Namen aus- und einlaufen,
   statt sie hart abzuschneiden. Die Laufbewegung sitzt auf der inneren
   Spur, weil die Scroll-Cue-Mechanik das äußere Element selbst
   transformiert — sonst würden sich die beiden Bewegungen überschreiben. */
.peak__ticker {
  position: absolute; z-index: var(--sc-z-copy);
  left: 0; right: 0; bottom: calc(var(--sc-5) + 2.6rem);
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.peak__ticker__track {
  display: flex; width: max-content; align-items: baseline;
  gap: var(--sc-6); margin: 0; padding: 0; list-style: none;
  animation: peak-ticker 61s linear infinite;   /* 13 Namen; bei 9 waren es 42s, gleiches Tempo */
}
.peak__ticker li {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-sm); letter-spacing: -0.02em;
  color: var(--iff-ink-inv); white-space: nowrap;
}
/* Trennpunkt zwischen den Namen, damit das Band nicht als ein Wortwurm liest. */
.peak__ticker li + li::before {
  content: "·"; margin-right: var(--sc-6);
  color: var(--iff-ink-inv-soft);
}
@keyframes peak-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .peak__ticker__track { animation: none; }
}

.peak__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Eckdichte statt Band: das neue Material ist durchgehend hell, und ein
     Band über die volle Breite müsste die halbe Einstellung zudunkeln, um
     eine Ecke zu retten. Die Dichte sitzt jetzt dort, wo der Text steht,
     die rechte Bildhälfte bleibt unangetastet. */
  background: linear-gradient(to top right,
    rgba(26,24,20,0.96) 0%,
    rgba(26,24,20,0.91) 24%,
    rgba(26,24,20,0.66) 44%,
    rgba(26,24,20,0.26) 60%,
    transparent 78%);
}
.peak__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: max(var(--sc-gutter), 5.5rem); right: var(--sc-gutter);
  bottom: calc(var(--sc-5) + 2.6rem);
  max-width: 46ch; color: var(--iff-ink-inv);
}
.peak__copy h2 {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -0.045em;
  margin: 0 0 var(--sc-4); max-width: 18ch; text-wrap: balance;
}
.peak__copy p {
  font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body); color: var(--iff-ink-inv-soft);
  max-width: 46ch; margin: 0; text-wrap: pretty;
}
@media (max-width: 700px) { .peak__copy h2 { font-size: var(--sc-t-xl); } .peak__copy { bottom: var(--sc-9); } }

/* Eine Reihe gleichwertiger Verweise statt drei fetter Etiketten, die
   wie Inhalt aussahen, plus einer versteckten Wiederholung darunter.
   Wer das Impressum sucht, findet hier genau einen Ort dafür. */
.legal__links {
  display: flex; flex-wrap: wrap;
  gap: var(--sc-2) var(--sc-4);
  align-items: baseline;
}
.legal__links .linkish { padding-block: var(--sc-1); }

.rail__blurb {
  font-family: var(--sc-font-text); font-weight: 300;
  font-size: var(--sc-t-base); line-height: var(--sc-leading-body);
  color: color-mix(in oklab, var(--sc-ink) 78%, transparent);
  margin: 0 0 var(--sc-3); text-wrap: pretty;
}
.rail__blurb:last-child { margin-bottom: 0; }

/* ------------------------------------------------- III · Who we are */
.spread { display: grid; gap: var(--sc-7) var(--sc-8); grid-template-columns: minmax(0,1fr);
          padding-block: var(--sc-9); border-top: 1px solid var(--sc-hairline); }
@media (min-width: 880px) {
  .spread { grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); align-items: start; }
  .spread__text { padding-top: var(--sc-4); }
}
/* ".prose .chapter-label" dazu, weil ".prose p" sonst gewinnt: Kapitel III
   steht als einziges in einem Textblock und kam bis zum 25.09.2026 in
   Fliesstextgroesse, duenn und dunkel daher statt wie die anderen. */
.chapter-label, .prose .chapter-label {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 400;
  line-height: normal; max-width: none;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 var(--sc-5);
}
.spread h2, .plain h2 {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: -0.04em;
  margin: 0 0 var(--sc-5); max-width: 18ch; text-wrap: balance;
}
.prose p {
  font-family: var(--sc-font-text); font-weight: 300;
  font-size: var(--sc-t-base); line-height: var(--sc-leading-body);
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
  max-width: var(--sc-measure); margin: 0 0 var(--sc-4); text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.pull {
  font-family: var(--iff-quote); font-style: italic; font-weight: 400;
  font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: 0;
  color: var(--sc-ink); max-width: 32ch;
  margin: var(--sc-6) 0 0; padding-left: var(--sc-4);
  border-left: 1px solid var(--sc-hairline-strong);
}
.figure { margin: 0; overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: var(--sc-3); font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
}
/* Prose, not a table. Four ruled rows next to a ruled format list and a
   ruled FAQ made the whole chapter read as a spreadsheet. */
.facts { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-3); }
.facts li { font-family: var(--sc-font-text); font-weight: 300;
            font-size: var(--sc-t-sm); line-height: 1.6;
            color: color-mix(in oklab, var(--sc-ink) 78%, transparent); max-width: 54ch; }
.facts b { font-weight: 500; color: var(--sc-ink); }
.facts b::after { content: " · "; color: var(--sc-ink-soft); font-weight: 300; }

/* ------------------------------------------------------ IV · Works */
.rail { height: 100%; display: flex; align-items: center; gap: var(--sc-7);
        padding-inline: max(var(--sc-gutter), 5.5rem); }
.rail__lead { flex: none; width: min(26rem, 74vw); }
.rail__lead h2 { margin-bottom: var(--sc-4); }
.work { flex: none; width: min(46rem, 86vw); margin: 0; }
.work a { display: block; color: inherit; text-decoration: none; }
.work a:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 6px; }
.work__media { position: relative; overflow: hidden; background: var(--sc-surface); aspect-ratio: 1000 / 380; }
.work__media video, .work__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.work__media video { opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); }
.work__media video.is-live { opacity: 1; }
.work__label {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4);
  margin-top: var(--sc-3); padding-top: var(--sc-3);
  border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.work__label b { font-weight: 500; color: var(--sc-ink); }
.work__credits {
  margin: var(--sc-2) 0 0; font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs); line-height: 1.7; color: var(--sc-ink-soft);
}
/* The slot where a corporate case belongs. Marked as empty on purpose:
   an obvious hole is honest, an invented client is not. */
.work--empty .work__media {
  background: transparent; border: 1px dashed var(--sc-hairline-strong);
  display: grid; place-content: center; text-align: center;
  padding: var(--sc-6); gap: var(--sc-2);
}
.work--empty p {
  margin: 0; font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft); max-width: 34ch;
}
.work--empty strong {
  display: block; font-weight: 500; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink);
}

/* --------------------------------------- V · Formats, process, FAQ */
.plain { padding-block: var(--sc-9); border-top: 1px solid var(--sc-hairline); }
.formats { list-style: none; margin: var(--sc-6) 0 0; padding: 0;
           display: grid; gap: 0; }
.formats li { padding-block: var(--sc-4); border-top: 1px solid var(--sc-hairline);
              display: grid; gap: var(--sc-1) var(--sc-6); }
@media (min-width: 720px) { .formats li { grid-template-columns: 16rem minmax(0,1fr); align-items: baseline; } }
.formats h4 { margin: 0; font-family: var(--sc-font-display); font-weight: 700;
              font-size: var(--sc-t-lg); letter-spacing: -0.03em; }
.formats p { margin: 0; font-family: var(--sc-font-text); font-weight: 300;
             font-size: var(--sc-t-base); line-height: var(--sc-leading-body);
             color: color-mix(in oklab, var(--sc-ink) 78%, transparent); max-width: 54ch; }
.process { margin-top: var(--sc-5); }
.sub-h { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl);
         letter-spacing: -0.035em; margin: var(--sc-9) 0 var(--sc-2); }

.qa { border-top: 1px solid var(--sc-hairline); }
.qa summary {
  display: flex; align-items: baseline; gap: var(--sc-4);
  padding-block: var(--sc-5); cursor: pointer; list-style: none;
  font-family: var(--sc-font-text); font-weight: 400;
  font-size: var(--sc-t-lg); line-height: 1.35; letter-spacing: -0.015em;
  color: var(--sc-ink); transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { opacity: 0.55; } }
.qa__mark { flex: none; position: relative; width: 0.72em; height: 0.72em; margin-left: auto; align-self: center; }
.qa__mark::before, .qa__mark::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--sc-ink); }
.qa__mark::before { width: 100%; height: 1px; }
.qa__mark::after { width: 1px; height: 100%; transition: transform var(--sc-d-base) var(--sc-ease-out); }
.qa[open] .qa__mark::after { transform: scaleY(0); }
.qa__a { padding-bottom: var(--sc-6); margin: 0; font-family: var(--sc-font-text); font-weight: 300;
         font-size: var(--sc-t-base); line-height: var(--sc-leading-body);
         color: color-mix(in oklab, var(--sc-ink) 78%, transparent);
         max-width: var(--sc-measure); text-wrap: pretty; }
.qa__a + .qa__a { margin-top: var(--sc-3); }

/* ---------------------------------------------------- VI · Contact */
/* safe center ist hier tragend: ist der Inhalt höher als das gepinnte
   Stage, zentriert normales center in BEIDE Richtungen und schiebt die
   Oberkante aus dem Bild. Die Überschrift war oben abgeschnitten. */
/* overflow-y: auto haelt den Inhalt auf niedrigen Fenstern erreichbar,
   statt ihn am oberen Rand abzuschneiden.

   KEIN overscroll-behavior: contain. Der Kolophon ist hoeher als das
   Fenster und damit ein eigener Scroll-Bereich; contain hiess woertlich
   "gib das Scrollen nicht an die Seite weiter" und machte daraus eine
   Sackgasse. Wer die Maus darueber hatte, kam aus Kapitel VI weder hoch
   noch runter. */
.colophon { height: 100%; display: grid; align-content: safe center;
            padding-block: var(--sc-7); border-top: 1px solid var(--sc-hairline);
            overflow-y: auto; }
.colophon__ask { font-family: var(--sc-font-display); font-weight: 700;
                 font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: -0.04em;
                 max-width: 20ch; margin: 0 0 var(--sc-5); text-wrap: balance; }
.colophon__run { font-family: var(--sc-font-text); font-weight: 300;
                 font-size: var(--sc-t-lg); line-height: 1.55;
                 color: color-mix(in oklab, var(--sc-ink) 80%, transparent);
                 max-width: 46ch; margin: 0 0 var(--sc-6); text-wrap: pretty; }
.colophon__run a, .imprint a, .legal a {
  color: var(--sc-ink); text-decoration: underline;
  text-underline-offset: 0.22em; text-decoration-thickness: 1px;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.colophon__run a:hover, .imprint a:hover, .legal a:hover { opacity: 0.55; }
.imprint { display: grid; gap: var(--sc-5) var(--sc-8); padding-top: var(--sc-5);
           border-top: 1px solid var(--sc-hairline);
           font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
           line-height: 1.7; color: var(--sc-ink-soft); }
@media (min-width: 720px) { .imprint { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.imprint b { display: block; font-weight: 500; color: var(--sc-ink);
             letter-spacing: var(--sc-track-wide); text-transform: uppercase; margin-bottom: var(--sc-2); }
.legal { margin-top: var(--sc-5); padding-top: var(--sc-4);
         border-top: 1px solid var(--sc-hairline);
         font-family: var(--sc-font-text); font-size: var(--sc-t-xs); line-height: 1.8;
         color: var(--sc-ink-soft); }
.legal p { margin: 0 0 var(--sc-2); max-width: 78ch; }
.legal details { margin-top: var(--sc-2); }
.legal summary { cursor: pointer; color: var(--sc-ink); }
.legal summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.preview-note { margin-top: var(--sc-4); font-style: italic; font-family: var(--iff-quote); }

@media (max-width: 860px) {
  .folio { top: auto; bottom: var(--sc-4); left: var(--sc-4); right: var(--sc-4);
           transform: none; flex-direction: row; justify-content: space-between;
           align-items: center; gap: var(--sc-4); }
  .folio > * { writing-mode: horizontal-tb; transform: none; white-space: normal; }
  .folio__cta {
    min-height: 48px; display: inline-flex; align-items: center;
    padding-inline: var(--sc-5); background: var(--sc-ink); color: var(--sc-canvas);
    border-radius: var(--sc-r-pill); white-space: nowrap; text-decoration: none;
  }
  .folio.is-inverted .folio__cta { background: var(--iff-ink-inv); color: var(--sc-ink); }
  .title-page, .spread, .plain, .rail, .colophon { padding-bottom: var(--sc-8); }
  /* A 2.63:1 crop at 86vw is a strip on a phone. Reframe to a plate. */
  .work { width: 86vw; }
  .work__media { aspect-ratio: 4 / 5; }
  .rail { gap: var(--sc-6); }
  .rail__lead { width: 84vw; }
}
@media (max-width: 480px) { .folio__chapter { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .peak { background: #1a1814; }
  .peak__aperture picture { display: contents; }
.peak__aperture video, .peak__aperture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.peak__aperture { clip-path: none; }
  .peak__layer--back { display: none; }
  .peak__layer--front { transform: none; }
  .qa__mark::after { transition: none; }
  .work__media video { transition: none; }
  .peak__scrim {
    background: linear-gradient(to top right,
      rgba(26,24,20,0.97) 0%, rgba(26,24,20,0.93) 26%,
      rgba(26,24,20,0.74) 46%, rgba(26,24,20,0.38) 62%, transparent 80%);
  }
}

/* Alle Medienboxen sind gleich hoch; was sich unterscheidet, ist die
   Unterschrift. In einer mittig ausgerichteten Rail macht jede Zeile
   Unterschied mehr die Kachel höher und schiebt ihr Bild nach oben —
   die Reihe liest sich dann als versetzte Thumbnails.

   Früher stand hier eine Mindesthöhe. Die muss man bei jeder neuen Arbeit
   nachziehen, sobald ein Titel eine Zeile mehr umbricht, und wenn man es
   vergisst, verrutscht es still. Deshalb liegt die Unterschrift jetzt
   ausserhalb des Flusses: Die Kachel ist damit immer exakt so hoch wie
   ihr Bild, und alle Bilder sitzen auf einer Höhe — unabhängig davon,
   wie lang der Titel wird. */
.work { position: relative; }
.work figcaption {
  position: absolute; top: 100%; left: 0; right: 0;
  display: block;
}

/* Language toggle. Sits in the folio with the rest of the chrome, so the
   page still has no navigation bar. */
.folio__lang {
  pointer-events: auto; appearance: none; background: none; border: 0;
  font: inherit; font-weight: 500; letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink); cursor: pointer;
  padding: var(--sc-2) 0; opacity: 0.55;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.folio__lang:hover { opacity: 1; }
.folio__lang:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.folio.is-inverted .folio__lang { color: var(--iff-ink-inv); }
@media (max-width: 860px) {
  .folio__lang { min-height: 48px; padding-inline: var(--sc-3); opacity: 1; }
}

/* =====================================================================
   Consent-Banner. Abschnitt 4 des Briefs: „Nur notwendige" hat exakt
   dasselbe Gewicht wie „Alle akzeptieren". Kein Farbakzent, keine
   Fettung, keine Grössendifferenz auf einer der beiden Schaltflächen,
   sonst ist die Einwilligung angreifbar.
   ===================================================================== */
.cc {
  position: fixed; inset: auto 0 0 0; z-index: 120;
  display: flex; justify-content: center;
  padding: var(--sc-4); pointer-events: none;
}
.cc[hidden] { display: none; }
.cc__panel {
  pointer-events: auto; width: min(46rem, 100%);
  background: var(--sc-canvas); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: 0 2px 6px rgba(26,24,20,.10), 0 14px 40px rgba(26,24,20,.16);
  padding: var(--sc-5) var(--sc-5) var(--sc-4);
  max-height: 84svh; overflow-y: auto;
}
.cc__h {
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg);
  letter-spacing: -0.03em; margin: 0 0 var(--sc-2);
}
.cc__t {
  font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-sm);
  line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 80%, transparent);
  margin: 0 0 var(--sc-4); max-width: 62ch;
}
/* [hidden] ist nur display:none aus dem UA-Stylesheet, und jede eigene
   display-Regel schlägt es. Ohne diese Zeile steht der Einstellungsblock
   von Anfang an offen und das Banner deckt die halbe Seite ab. */
.cc__opts[hidden] { display: none; }
.cc__opts { display: grid; gap: var(--sc-3); margin: 0 0 var(--sc-4);
            padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline); }
.cc__opt { display: grid; grid-template-columns: 1.1rem minmax(0,1fr); gap: var(--sc-3);
           align-items: start; font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
           line-height: 1.55; color: color-mix(in oklab, var(--sc-ink) 78%, transparent); }
.cc__opt input { margin: .28rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--sc-ink); }
.cc__opt input:disabled { opacity: .5; }
.cc__opt input:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.cc__opt b { display: block; font-weight: 500; color: var(--sc-ink); }
.cc__row { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.cc__b {
  flex: 1 1 12rem; appearance: none; cursor: pointer;
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 400;
  letter-spacing: 0; padding: var(--sc-3) var(--sc-4); min-height: 48px;
  background: transparent; color: var(--sc-ink);
  border: 1px solid var(--sc-ink); border-radius: 0;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cc__b:hover { background: var(--sc-ink); color: var(--sc-canvas); }
}
.cc__b:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.cc__b:active { transform: translateY(1px); }
.cc__b[hidden] { display: none; }
.cc__legal { display: flex; gap: var(--sc-4); flex-wrap: wrap;
             margin: var(--sc-4) 0 0; padding-top: var(--sc-3);
             border-top: 1px solid var(--sc-hairline); }

.linkish {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--sc-ink); text-decoration: underline;
  text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}
.linkish:hover { opacity: .55; }
.linkish:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

/* Legal dialog ------------------------------------------------------- */
.legaldlg {
  width: min(52rem, 100%); max-width: 100%; height: min(88svh, 100%);
  padding: 0; border: 1px solid var(--sc-hairline-strong);
  background: var(--sc-canvas); color: var(--sc-ink);
}
.legaldlg::backdrop { background: rgba(26,24,20,.55); }
.legaldlg__bar {
  /* z-index ueber den Karten: Titel und Kategorie einer Archivkarte
     liegen selbst auf z-index 2 und standen sonst beim Scrollen mitten
     in der Kopfzeile, waehrend die Bilder korrekt dahinter verschwanden. */
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between;
  align-items: center; gap: var(--sc-4);
  padding: var(--sc-4) var(--sc-5); background: var(--sc-canvas);
  border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.03em;
}
.legaldlg__x {
  -webkit-appearance: none; appearance: none; background: none;
  border: 1px solid var(--sc-ink); border-radius: 0; cursor: pointer;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 400;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  padding: var(--sc-2) var(--sc-4); min-height: 40px; color: var(--sc-ink);
}
.legaldlg__x:hover { background: var(--sc-ink); color: var(--sc-canvas); }
.legaldlg__body { padding: var(--sc-6) var(--sc-5) var(--sc-9);
                  font-family: var(--sc-font-text); font-weight: 300;
                  font-size: var(--sc-t-sm); line-height: 1.7; }
.legaldlg__body h2 { font-family: var(--sc-font-display); font-weight: 700;
                     font-size: var(--sc-t-xl); letter-spacing: -0.035em;
                     margin: var(--sc-8) 0 var(--sc-3); }
.legaldlg__body section:first-child h2 { margin-top: 0; }
.legaldlg__body h3 { font-family: var(--sc-font-text); font-weight: 500;
                     font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide);
                     text-transform: uppercase; color: var(--sc-ink-soft);
                     margin: var(--sc-6) 0 var(--sc-2); }
.legaldlg__body p { margin: 0 0 var(--sc-3); max-width: 72ch;
                    color: color-mix(in oklab, var(--sc-ink) 80%, transparent); }
.legaldlg__body b { font-weight: 500; color: var(--sc-ink); }
.legaldlg__body a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .2em; }
.legaldlg__date { font-family: var(--iff-quote); font-style: italic; }

/* Kontaktformular ----------------------------------------------------
   Im selben Rahmen wie die Rechtstexte, nur schmaler und nicht so hoch:
   ein Formular, das bis zum Bildschirmrand reicht, wirkt wie ein Antrag. */
.kontaktdlg { width: min(40rem, 100%); height: auto; max-height: min(92svh, 100%); }
.kform { display: grid; gap: var(--sc-4); }
.kform__intro { margin: 0 0 var(--sc-2); }
.kform__grid { display: grid; gap: var(--sc-4); }
@media (min-width: 600px) { .kform__grid { grid-template-columns: 1fr 1fr; } }
.kform__f { display: grid; gap: var(--sc-2); }
.kform__l { font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
            text-transform: uppercase; color: var(--sc-ink); }
.kform__l i { font-style: normal; font-weight: 300; text-transform: none; letter-spacing: 0;
              color: var(--sc-ink-soft); margin-left: var(--sc-1); }
.kform input, .kform textarea {
  -webkit-appearance: none; appearance: none; width: 100%; border-radius: 0;
  font: inherit; font-weight: 400; font-size: var(--sc-t-base); color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  padding: var(--sc-3); min-height: 48px;
}
.kform textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.kform input::placeholder, .kform textarea::placeholder { color: var(--sc-ink-soft); opacity: 1; }
.kform input:focus-visible, .kform textarea:focus-visible {
  outline: 2px solid var(--sc-ink); outline-offset: 0; border-color: var(--sc-ink);
}
.kform__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kform__fehler { margin: 0; padding: var(--sc-3) var(--sc-4);
                 border-left: 2px solid var(--sc-ink); background: var(--sc-surface);
                 color: var(--sc-ink); font-weight: 400; }
.kform__foot { display: grid; gap: var(--sc-3); margin-top: var(--sc-2); }
.kform__send {
  -webkit-appearance: none; appearance: none; justify-self: start; cursor: pointer;
  border: 1px solid var(--sc-ink); border-radius: var(--sc-r-pill);
  background: var(--sc-ink); color: var(--sc-canvas);
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm);
  padding: var(--sc-3) var(--sc-6); min-height: 48px;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.kform__send:hover { opacity: .8; }
.kform__send:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.kform__send:disabled { opacity: .55; cursor: progress; }
.legaldlg__body .kform__hint { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: 0; }
.kform__hint .linkish { font-size: inherit; text-transform: none; letter-spacing: 0; }
.kform__danke:focus { outline: none; }
.kform__danke h2 { margin-top: 0; }

/* Der Weg zum Formular aus Kapitel VI. Gleiche Form wie der Knopf im
   Formular, damit man ihn wiedererkennt. */
.colophon__form { margin: calc(var(--sc-5) * -1) 0 var(--sc-6); }
.kbtn {
  display: inline-flex; align-items: center; min-height: 48px;
  padding-inline: var(--sc-6); border-radius: var(--sc-r-pill);
  background: var(--sc-ink); color: var(--sc-canvas); text-decoration: none;
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .kbtn:hover { opacity: .8; } }
.kbtn:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

@media (max-width: 700px) {
  .cc__b { flex: 1 1 100%; }
  .legaldlg { height: 92svh; }
}

/* Eine echte Arbeit, deren Bildmaterial noch aussteht. Bewusst anders
   als .work--empty: dort fehlt die Arbeit, hier fehlt nur das Bild. */
.work--pending .work__media {
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  display: grid; place-content: center; text-align: center;
  padding: var(--sc-6); gap: var(--sc-2);
}
.work--pending strong {
  display: block; font-weight: 500; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink);
}
.work--pending p {
  margin: 0; font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft); max-width: 34ch;
}

/* Archiv-Karte am Ende der Rail. Kein Bild: das Archiv ist ein Index,
   keine zweite Bilderstrecke. */
.work--archive .arch-card {
  width: 100%; appearance: none; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid var(--sc-ink);
  display: grid; align-content: center; gap: var(--sc-2);
  padding: var(--sc-6); aspect-ratio: 1000 / 380;
  transition: background var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.work--archive .arch-card strong {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-2xl); letter-spacing: -0.04em; line-height: 1;
}
.work--archive .arch-card span {
  font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-base);
  color: color-mix(in oklab, var(--sc-ink) 72%, transparent);
}
.work--archive .arch-card em {
  font-style: normal; font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 0.3em; margin-top: var(--sc-2);
}
@media (hover: hover) and (pointer: fine) {
  .work--archive .arch-card:hover { background: var(--sc-ink); color: var(--sc-canvas); }
  .work--archive .arch-card:hover span { color: color-mix(in oklab, var(--sc-canvas) 78%, transparent); }
}
.work--archive .arch-card:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 6px; }
@media (max-width: 860px) { .work--archive .arch-card { aspect-ratio: 4 / 5; } }

/* Die Werkliste selbst */
.arch__intro { font-family: var(--iff-quote); font-style: italic; margin-bottom: var(--sc-5); }
.arch { list-style: none; margin: 0; padding: 0; }
.arch__row {
  display: grid; gap: var(--sc-1) var(--sc-4); align-items: baseline;
  padding-block: var(--sc-3); border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
}
@media (min-width: 720px) {
  .arch__row { grid-template-columns: 4rem minmax(0,1.4fr) minmax(0,1fr) 9rem minmax(0,0.8fr); }
}
.arch__y { font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
.arch__t { font-weight: 500; color: var(--sc-ink); }
.arch__t a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.arch__c, .arch__r { color: color-mix(in oklab, var(--sc-ink) 70%, transparent); }
.arch__k { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
           text-transform: uppercase; color: var(--sc-ink-soft); }

/* Auf dem Telefon summieren sich sieben Formate, der Prozess und neun
   Fragen zu mehr Seitenhöhe, als das Budget von 14 Viewport-Höhen
   hergibt. Gekürzt wird der Weißraum, nicht der Inhalt. */
@media (max-width: 700px) {
  .plain { padding-block: var(--sc-7) var(--sc-8); }
  .spread { padding-block: var(--sc-7); }
  .sub-h { margin-top: var(--sc-7); }
  .formats li { padding-block: var(--sc-3); }
  .formats p { font-size: var(--sc-t-sm); }
  .qa summary { padding-block: var(--sc-4); font-size: var(--sc-t-base); }
  .qa__a { padding-bottom: var(--sc-5); }
  .title-page { padding-block: var(--sc-8) var(--sc-6); }
  .title-page__mark { margin-bottom: var(--sc-5); }
  .title-page__rule { margin-top: var(--sc-6); }
  .facts { margin-top: var(--sc-5); }
}

.agb__ul { margin: 0 0 var(--sc-3); padding-left: 1.2em; }
.agb__ul li { margin-bottom: var(--sc-1); color: color-mix(in oklab, var(--sc-ink) 80%, transparent); }
.legaldlg__note { font-family: var(--iff-quote); font-style: italic;
                  padding-bottom: var(--sc-4); margin-bottom: var(--sc-5);
                  border-bottom: 1px solid var(--sc-hairline); }


@media (max-width: 860px) {
  .peak__copy { max-width: none; }
  .peak__ticker__track { gap: var(--sc-5); }
  .peak__ticker li + li::before { margin-right: var(--sc-5); }
  .peak__scrim {
    background: linear-gradient(to top,
      rgba(26,24,20,0.94) 0%, rgba(26,24,20,0.86) 20%,
      rgba(26,24,20,0.58) 38%, rgba(26,24,20,0.22) 54%, transparent 70%);
  }
}

@media (max-width: 700px) {
  /* Auf dem Handy läuft dasselbe Band, nur enger gesetzt. */
  .peak__ticker { bottom: var(--sc-8); }
}

/* Fallstudie: Kachel als Auslöser ---------------------------------------
   Dieselbe Kachel wie die anderen Arbeiten, nur öffnet sie ein Overlay
   statt eines externen Links. Button-Reset spiegelt .work a. */
.work__open {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; text-decoration: none;
}
/* Seit 23.09.2026 echte Links (<a href="case/...">) statt Knoepfe, damit
   Google die Fallstudien-Seiten findet. Mit JavaScript oeffnet page.js
   weiterhin das Overlay und verhindert das Nachladen. */
.work__open:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 6px; }
.work__more {
  position: absolute; z-index: 1; left: var(--sc-4); bottom: var(--sc-4);
  padding: var(--sc-2) var(--sc-4);
  background: color-mix(in oklab, var(--sc-ink) 86%, transparent);
  color: var(--sc-canvas);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  transition: background var(--sc-d-base) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work__open:hover .work__more,
  .work__open:focus-visible .work__more { background: var(--sc-ink); }
}

/* Noch nicht veroeffentlichte Filme (MSK). Hinweis oben links auf der
   Kachel; im Overlay statt des Players die Vorschau mit Hinweis darueber. */
.work__bald {
  position: absolute; z-index: 1; left: var(--sc-4); top: var(--sc-4);
  padding: var(--sc-2) var(--sc-4);
  background: var(--sc-canvas); color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
}
.casedlg__bald {
  margin: 0 0 var(--sc-5);
  position: relative; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--sc-surface);
}
.casedlg__bald video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.casedlg__bald::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, #000 38%, transparent);
}
.casedlg__bald-text {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; text-align: center;
  color: #fff; font-family: var(--sc-font-display, var(--sc-font-text));
  font-size: clamp(1.4rem, 4vw, 2.4rem); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
}

/* Fallstudien-Overlay -------------------------------------------------
   Erbt das Gerüst von .legaldlg, bekommt aber eine eigene
   Öffnungsbewegung: Einblenden mit leichtem Aufziehen ("aufploppen"). */
.casedlg { width: min(44rem, 100%); }
.casedlg[open] { animation: casedlg-pop var(--sc-d-slow) var(--sc-ease-out) both; }
.casedlg[open]::backdrop { animation: casedlg-fade var(--sc-d-slow) var(--sc-ease-out) both; }
@keyframes casedlg-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes casedlg-fade { from { opacity: 0; } to { opacity: 1; } }

.casedlg__tag {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 var(--sc-6);
}
/* Titel eines weiteren Films derselben Kampagne. Bewusst nicht
   .casedlg__tag: direkt unter der ebenfalls versalen Ueberschrift
   stuenden sonst zwei fast gleiche Zeilen uebereinander, und man saehe
   nicht mehr, welche die Ueberschrift ist.
   Zwei Klassen, weil .legaldlg__body p sonst die Farbe gewinnt. */
.legaldlg__body .casedlg__weiter {
  font-family: var(--sc-font-text); font-weight: 500;
  font-size: var(--sc-t-sm); line-height: 1.5;
  color: var(--sc-ink); margin: 0 0 var(--sc-3);
}

/* Verweise auf weitere Arbeiten desselben Kuenstlers. Zeilen mit einer
   Haarlinie dazwischen, wie die Eckdaten-Liste — kein zweites Kachel-
   raster im Overlay, das wuerde mit dem Film darueber konkurrieren. */
.archmore { list-style: none; margin: 0 0 var(--sc-7); padding: 0; }
.archmore__b {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: baseline; gap: var(--sc-4);
  width: 100%; margin: 0; padding: var(--sc-3) 0;
  border: 0; border-radius: 0; border-top: 1px solid var(--sc-hairline);
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.archmore li:last-child .archmore__b { border-bottom: 1px solid var(--sc-hairline); }
.archmore__b > span {
  flex: 1 1 auto; font-size: var(--sc-t-sm); line-height: 1.5;
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
}
.archmore__b > em {
  flex: 0 0 auto; font-style: normal;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
}
.archmore__b:hover > span { color: var(--sc-ink); }
.archmore__b:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }

.casedlg__facts { margin: var(--sc-7) 0 var(--sc-6); }
.casedlg__facts > div {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--sc-4);
  padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline);
}
.casedlg__facts > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.casedlg__facts dt {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.casedlg__facts dd {
  margin: 0; font-size: var(--sc-t-sm);
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
}

.casedlg__credits { list-style: none; margin: 0 0 var(--sc-7); padding: 0; display: grid; gap: var(--sc-2); }
/* Rolle links, Name rechts. Frueher hielt ein inline-block mit
   min-width die Spalte — eine laengere Rolle wie "Client Produktion
   Freche Freunde" oder "Choreografie, Movement Direction & Tanz"
   sprengte sie und schob den Namen nach rechts, die Kante franste aus.
   Im Grid bricht eine lange Rolle stattdessen in ihrer eigenen Spalte
   um, die Namen bleiben auf einer Linie. Gilt auch dort, wo der Name
   ein nackter Textknoten ist — der wird zur anonymen zweiten
   Rasterzelle. */
.casedlg__credits li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 var(--sc-2);
  align-items: baseline;
  font-size: var(--sc-t-sm); line-height: 1.6;
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
}
.casedlg__credits span { color: var(--sc-ink-soft); }

/* Reine Namenslisten ohne Rollenspalte. Eine Besetzung mit 45 Namen wird
   einspaltig zur Kolonne, durch die man nur noch scrollt — deshalb hier
   Spaltensatz statt Liste. */
.casedlg__names {
  list-style: none; margin: 0 0 var(--sc-7); padding: 0;
  columns: 2; column-gap: var(--sc-6);
  font-size: var(--sc-t-sm); line-height: 1.7;
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
}
.casedlg__names li { break-inside: avoid; }
@media (max-width: 560px) { .casedlg__names { columns: 1; } }

/* Der Rahmen hat das Format des Films: page.js setzt aspect-ratio pro
   Film (16:9 ist nur der Ausgangswert). Das Video liegt mit contain
   darin — im Overlay wird nie etwas abgeschnitten, auch bei 2,39:1.
   Das Vorschaubild ist ein 16:9-Ausschnitt und liegt deshalb als
   Hintergrund mit cover im Rahmen, nicht als poster am <video>. */
.casedlg__player {
  margin: 0 0 var(--sc-5);          /* nur eine Zeile Abstand zum Text darunter */
  position: relative; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--sc-surface) center / cover no-repeat;
}
.casedlg__player video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; border: 0; background: transparent;
}

/* Grosser Abspielknopf in der Bildmitte. Die Filme starten nicht mehr von
   allein — ohne ein sichtbares Ziel sieht ein Standbild aus wie ein Bild
   und nicht wie ein Film. Der Knopf liegt ueber den nativen
   Steuerelementen, aber nur solange nichts laeuft. */
.casedlg__player .playbtn {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 5rem; height: 5rem; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-content: center; cursor: pointer;
  color: #fff;
  background: color-mix(in oklab, var(--sc-ink) 68%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform var(--sc-d-slow) var(--sc-ease-out),
              background var(--sc-d-slow) var(--sc-ease-out);
}
.casedlg__player .playbtn svg {
  width: 1.75rem; height: 1.75rem; display: block;
  margin-left: 0.2rem;              /* das Dreieck optisch mittig stellen */
  fill: currentColor;
}
.casedlg__player .playbtn:hover,
.casedlg__player .playbtn:focus-visible {
  background: var(--sc-ink); transform: scale(1.06);
}
.casedlg__player .playbtn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .casedlg__player .playbtn { transition: none; }
  .casedlg__player .playbtn:hover { transform: none; }
}

@media (max-width: 560px) {
  .casedlg__facts > div { grid-template-columns: 1fr; gap: var(--sc-1); }
  .casedlg__credits li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .casedlg[open], .casedlg[open]::backdrop { animation-duration: 1ms; }
}

/* Archiv als Kachelraster ------------------------------------------------
   Früher eine Textliste. Jetzt zwei Spalten mit Standbild, das beim
   Darüberfahren zu fünf Sekunden Film wird — dieselbe Mechanik wie in der
   Arbeiten-Rail, nur kleiner. Der Titel liegt im Bild statt darunter;
   damit er auf jedem Motiv lesbar bleibt, bringt jede Kachel unten einen
   eigenen Verlauf mit, so wie das Scrim über dem Reel. */
/* Kategoriefilter. Bewusst keine Pillen mit Rahmen: die Seite arbeitet
   sonst nirgends mit Kaesten, und sechs Kaesten ueber dem Raster wuerden
   mehr Aufmerksamkeit ziehen als die Arbeiten darunter. Stattdessen
   dieselbe versale Kleinschrift wie bei den Kategoriezeilen, das Aktive
   in vollem Ton mit Unterstrich. */
.archfilter {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5);
  margin: 0 0 var(--sc-5); padding: 0 0 var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline);
}
.archfilter__b {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font-family: var(--sc-font-text); font-weight: 400;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
  cursor: pointer;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.archfilter__b:hover { color: var(--sc-ink); }
.archfilter__b.is-on { color: var(--sc-ink); border-bottom-color: var(--sc-ink); }
.archfilter__b:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

.archgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sc-5);
}
/* Die Karte ist ein Knopf, damit sie sich mit Tastatur bedienen lässt.
   Deshalb hier derselbe Reset wie bei .work__open. */
.archcard {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; position: relative;
}
.archcard:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
.archcard__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--sc-surface);
}
.archcard__media img,
.archcard__media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.archcard__media video {
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
.archcard__media video.is-live { opacity: 1; }
.archcard__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(26, 24, 20, 0.96) 0%,
    rgba(26, 24, 20, 0.86) 16%,
    rgba(26, 24, 20, 0.58) 32%,
    rgba(26, 24, 20, 0.22) 50%,
    transparent 72%);
}
.archcard__cap {
  display: block;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--sc-4); color: var(--iff-ink-inv); pointer-events: none;
}
.archcard__cap b {
  /* Farbe muss explizit stehen: .legaldlg__body b faerbt jedes <b> im
     Dialog dunkel, und beide Regeln sind gleich spezifisch. */
  display: block; color: var(--iff-ink-inv);
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-base); letter-spacing: -0.03em; line-height: 1.15;
  text-wrap: balance;
}
.archcard__cap span {
  display: block; margin-top: var(--sc-1);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--iff-ink-inv-soft);
}
@media (prefers-reduced-motion: reduce) {
  .archcard__media video { transition: none; }
}
@media (max-width: 560px) {
  .archgrid { grid-template-columns: 1fr; gap: var(--sc-4); }
}

/* Ortsseiten (/filmproduktion-berlin, -ruhrgebiet) ---------------------
   Eine ruhige Leseseite statt der Scroll-Inszenierung. Schrift, Farben
   und die Bausteine .facts, .qa und .kbtn kommen von der Startseite. */
.ort-kopf { display: flex; justify-content: space-between; align-items: center;
            gap: var(--sc-4); padding-block: var(--sc-5);
            border-bottom: 1px solid var(--sc-hairline); }
.ort-kopf__marke { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg);
                   letter-spacing: -0.03em; color: var(--sc-ink); text-decoration: none; }
.ort-kopf__cta { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm);
                 color: var(--sc-ink); text-underline-offset: .22em; }
.ort-kopf__cta:hover, .ort-kopf__marke:hover { opacity: .55; }
.ort { max-width: 52rem; padding-block: var(--sc-6) var(--sc-9);
       font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-base); line-height: 1.65;
       color: color-mix(in oklab, var(--sc-ink) 82%, transparent); }
.ort__pfad { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-bottom: var(--sc-6); }
.ort__pfad a { color: inherit; }
.ort h1 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl);
          line-height: 1.06; letter-spacing: -0.04em; color: var(--sc-ink); margin: 0 0 var(--sc-5);
          text-wrap: balance; }
.ort h2 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl);
          letter-spacing: -0.035em; color: var(--sc-ink); margin: var(--sc-8) 0 var(--sc-4); }
.ort p { margin: 0 0 var(--sc-4); max-width: 62ch; text-wrap: pretty; }
.ort a { color: var(--sc-ink); text-underline-offset: .2em; }
.ort__lead { font-size: var(--sc-t-lg); line-height: 1.55; }
.ort__bild { margin: var(--sc-6) 0; }
.ort__bild img { display: block; width: 100%; height: auto; }
.ort__bild figcaption { margin-top: var(--sc-2); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.ort__arbeiten { list-style: none; padding: 0; margin: 0 0 var(--sc-4); }
.ort__arbeiten li { padding-block: var(--sc-3); border-top: 1px solid var(--sc-hairline); max-width: 62ch; }
.ort__arbeiten li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ort__arbeiten a { display: block; text-decoration: none; }
.ort__arbeiten a b { font-weight: 500; }
.ort__arbeiten a:hover b { text-decoration: underline; }
.ort .facts { margin-top: 0; }
.ort__kontakt { margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.ort__kontakt h2 { margin-top: 0; }
.ort__kontakt b { font-weight: 500; color: var(--sc-ink); }
.ort__kontakt .kbtn { color: var(--sc-canvas); }
.ort-fuss { padding-block: var(--sc-6) var(--sc-8); border-top: 1px solid var(--sc-hairline);
            font-family: var(--sc-font-text); font-size: var(--sc-t-xs); line-height: 1.8;
            color: var(--sc-ink-soft); }
.ort-fuss p { margin: 0 0 var(--sc-2); max-width: 78ch; }
.ort-fuss a { color: var(--sc-ink); }
.ort-fuss b { color: var(--sc-ink); font-weight: 500; }