/* referenzen.css — Uebersicht /projects und Case-Seiten /projects/<slug>.
   Drei Richtungen teilen EIN System: gleiche Klassen (rf-*), EIN Reveal-System (site.js),
   gleiche Raender (--pad) und dieselbe Typo-Skala. Die Richtung sitzt als Klasse am <main>:
   .rf-a Index · .rf-b Buehne · .rf-c Split. Masse aus der Detroit-Vermessung (rem = 1vw @1440):
   H1 207px, Statement 64.8, Zitat 50.4, Text 14.4/21.6, Labels 10.8, Grid 626 + 144 Luecke. */

:root { --rf-col: 626px; --rf-gap: 144px; --rf-text: 576px; }

/* ── gemeinsame Bausteine ─────────────────────────────────────────── */
.rf-kicker-free { }                                        /* Merker: nie ein Label UEBER der Display-Zeile */
.rf-labels { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; }
.rf-labels .lbl { margin: 0; }

.rf-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; margin: 0 auto; max-width: 1100px; padding-top: 52px; }
.rf-meta div { min-width: 0; }
.rf-meta dt { font: 400 11px/1.4 var(--sans, 'Barlow', system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.rf-meta dd { margin: 7px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.rf-meta .rf-live { display: inline-flex; align-items: center; gap: 9px; }
.rf-meta .rf-live .ext { font-size: 13px; }

.rf-statement { max-width: var(--rf-text); margin: 0 auto; text-align: center; }
.rf-statement h2 { font-size: clamp(30px, 4.5vw, 65px); line-height: .88; }
.rf-body { max-width: var(--rf-text); margin: 0 auto; text-align: center; }
.rf-body p { margin: 0 0 18px; }
.rf-body p:last-child { margin-bottom: 0; }

/* Medien */
.rf-media { display: grid; grid-template-columns: 1fr 1fr; gap: 72px var(--rf-gap); align-items: start; }
.rf-fig { margin: 0; min-width: 0; }
.rf-fig img, .rf-fig video { display: block; width: 100%; height: auto; background: var(--mute2); }
.rf-fig figcaption { margin-top: 12px; font: 400 11px/1.5 var(--sans, 'Barlow', system-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--grey); }
.rf-fig.is-gross, .rf-fig.is-lang, .rf-fig.is-voll { grid-column: 1 / -1; }
.rf-fig.is-gross img, .rf-fig.is-gross video { max-width: 1100px; margin-inline: auto; }
.rf-fig.is-lang img { max-width: 900px; margin-inline: auto; }
.rf-fig.is-klein { max-width: 300px; }
.rf-fig.is-halb:nth-of-type(even) { justify-self: end; max-width: 92%; }
.rf-fig.is-halb:nth-of-type(odd) { max-width: 92%; margin-top: 60px; }
.rf-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; margin-inline: auto; }
.rf-trio img { width: 100%; }
.rf-fig.is-voll .rf-trio { max-width: none; }

/* Zitat + Credits */
.rf-zitat { max-width: 896px; margin: 0 auto; text-align: center; }
.rf-zitat blockquote { margin: 0; font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(24px, 3.4vw, 50px); line-height: .96; text-transform: uppercase; }
.rf-zitat .lbl { justify-content: center; margin-top: 26px; }
.rf-platzhalter { display: inline-block; margin-top: 14px; padding: 4px 10px; border: 1px solid #c2410c; color: #c2410c; font: 400 11px/1.4 var(--sans, 'Barlow', system-ui); letter-spacing: .08em; text-transform: uppercase; }

/* Fuss: die anderen Arbeiten als Karten (Leo 19.09.) + EIN Handlungs-Anker */
.rf-weiter { margin-top: 118px; }
.rf-weiter > .lbl { margin-bottom: 26px; }
.rf-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.rf-karte { display: block; }
.rf-k-bild { display: block; position: relative; overflow: clip; background: var(--mute2); }
.rf-k-bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.rf-karte:hover .rf-k-bild img { transform: scale(1.03); }
.rf-k-name { display: block; margin-top: 16px; font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(22px, 2.4vw, 38px); line-height: .96; letter-spacing: var(--tight); text-transform: uppercase; }
.rf-k-typ { display: block; margin-top: 8px; font: 400 11px/1.4 var(--sans, 'Barlow', system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }

/* Fuss: naechstes Projekt + Handlungs-Anker */
.rf-aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 54px; padding-bottom: var(--vor-fuss, 96px); }   /* Luft zum dunklen Peak = Site-Token (128 Desktop / 96 Handy seit 25.09., Waechter tools/_vor-fuss.mjs) */
/* Knopf-Familie der Marke (seit 24.09., Leo: „mach beide Buttons gleich, passend zur luvirel brand“): der Bau des
   Footer-Knopfs C „Umriss“ (Leos Wahl 22.09.) und der Kontakt-Zwillinge auf hellem Grund — 56 px hoch, Barlow 12/500
   Versalien .12em, Polster 28 wie der Footer-Knopf, Text links, Pfeil an der rechten Kante, scharfe Kanten. Ein Pfeil (→)
   fuer alle — auch fuer den Link in den neuen Tab: Leo bestellte am 23.09. denselben Pfeil fuer Google Maps
   (df-bauteil-inventar). Gefuellt = Hauptweg (Seitenende), Umriss
   (.is-leer) = Nebenweg: 1px-Rahmen als inset-Schatten (kein Border, der die Box vergroessert), beim Hover faehrt die
   Fuellung von unten hoch und die Schrift kippt auf Papier. Vorher: 48 px, 12/400, Deckkraft-Hover — ein drittes
   Knopf-Bauteil neben Footer und Kontakt (df-bauteil-inventar, 24.09.). */
.rf-btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 56px;   /* Pfeil 14 px hinter dem Wort, Gruppe mittig — auch in gestreckten Knoepfen (Leo 24.09. via Kontakt-Session: in 284-px-Knoepfen stand der Pfeil sonst 90 px weg) */
  padding: 0 28px; background: var(--ink); color: var(--paper); font: 500 12px/1 Barlow, Arial, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; transition: background .35s var(--ease), color .35s var(--ease); }
.rf-btn > span { display: inline-block; transition: transform .5s var(--ease); }
.rf-btn:hover, .rf-btn:focus-visible { background: var(--peak); }
.rf-btn:hover > span, .rf-btn:focus-visible > span { transform: translateX(6px); }
.rf-btn.is-leer { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rf-btn.is-leer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); }
.rf-btn.is-leer:hover, .rf-btn.is-leer:focus-visible { background: none; color: var(--paper); }
.rf-btn.is-leer:hover::before, .rf-btn.is-leer:focus-visible::before { transform: translateY(0); }
.rf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .rf-btn, .rf-btn > span, .rf-btn.is-leer::before { transition: none; } }

/* ── Uebersicht ───────────────────────────────────────────────────── */
/* A Index: Riesenzeilen, aktive Zeile schwarz, Bildstapel rechts (Detroit-Mechanik) */
.rf-index { position: relative; }
.rf-ix-list { position: relative; z-index: 2; max-width: 60%; }
.rf-ix-row { display: block; padding: 26px 0; border-bottom: 1px solid var(--mute); }
.rf-ix-row .rf-ix-name { font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(38px, 8.6vw, 124px); line-height: .9; letter-spacing: var(--tight); text-transform: uppercase; color: rgba(11, 11, 11, .16); transition: color .3s var(--ease); }
.rf-ix-row.is-on .rf-ix-name, .rf-ix-row:hover .rf-ix-name { color: var(--ink); }
.rf-ix-row .rf-ix-name { display: block; }
.rf-ix-row .rf-ix-kat { display: block; margin-top: 10px; font: 400 11px/1.4 var(--sans, 'Barlow', system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.rf-stapel { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.rf-stapel-w { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.rf-stapel-w.is-on { opacity: 1; }
.rf-stapel-w.is-weg, .rf-stapel-w.is-weg.is-on { opacity: 0; }   /* Liste verlassen: Stapel raeumt ab */
.rf-stapel-w img { position: absolute; right: 0; object-fit: cover; opacity: 0; transform: translateX(40px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.rf-stapel-w.is-on img { opacity: 1; transform: none; }
.rf-stapel-w img:nth-child(1) { width: 124px; aspect-ratio: 600 / 1299; top: 6%; transition-delay: .02s; }   /* Handy-Aufnahme */
.rf-stapel-w img:nth-child(2) { width: 268px; aspect-ratio: 16 / 10; top: 33%; transition-delay: .06s; }
.rf-stapel-w img:nth-child(3) { width: 352px; aspect-ratio: 16 / 10; top: 52%; transition-delay: .1s; }
.rf-stapel-w img:nth-child(4) { width: 452px; aspect-ratio: 16 / 10; top: 73%; transition-delay: .14s; }
.rf-stapel-w img:nth-child(5) { display: none; }

/* B Buehne: ein Werk je Bildschirm — Titel links, Bild rechts, beide auf einer Linie (Exo-Ape-Muster) */
.rf-stage { position: relative; }
.rf-slide { min-height: 88vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; column-gap: 60px; padding-block: 30px 34px; border-top: 1px solid var(--mute); }
.rf-slide-kopf { grid-column: 1; grid-row: 1; align-self: center; max-width: 480px; }
.rf-slide-m { grid-column: 2; grid-row: 1; align-self: center; justify-self: start; }
.rf-slide-m img, .rf-slide-m video { width: min(440px, 40vw); height: min(62vh, 550px); object-fit: cover; display: block; background: var(--mute2); }
.rf-slide-f { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 30px; }
.rf-slide-t { display: block; font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(34px, 6vw, 92px); line-height: .9; letter-spacing: var(--tight); text-transform: uppercase; }
.rf-slide-kopf .lbl { margin-top: 14px; }
.rf-slide-z { font: 400 12px/1.4 var(--sans, 'Barlow', system-ui); letter-spacing: .12em; color: var(--grey); }

/* C Split: Liste links, Vorschau rechts */
.rf-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: start; }
.rf-split-list { display: flex; flex-direction: column; }
.rf-sp-row { padding: 34px 0; border-bottom: 1px solid var(--mute); }
.rf-sp-row { display: block; }
.rf-sp-row > * { display: block; }
.rf-sp-name { font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(30px, 4.6vw, 66px); line-height: .92; letter-spacing: var(--tight); text-transform: uppercase; color: rgba(11, 11, 11, .2); transition: color .3s var(--ease); }
.rf-sp-row.is-on .rf-sp-name, .rf-sp-row:hover .rf-sp-name { color: var(--ink); }
.rf-sp-row .lbl { margin-top: 12px; }
.rf-sp-row .txt { margin-top: 12px; max-width: 460px; }
.rf-sp-bild, .rf-ix-bild { display: none; }   /* nur am Handy, wo die festen Bilder wegfallen */
.rf-sp-vor { position: sticky; top: calc(var(--navh) + 18px); }
.rf-sp-vor .rf-vorschau { position: relative; aspect-ratio: 16 / 10; background: var(--mute2); overflow: clip; }
.rf-sp-vor .rf-vorschau img, .rf-sp-vor .rf-vorschau video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.rf-sp-vor .rf-vorschau img.is-on, .rf-sp-vor .rf-vorschau video.is-on { opacity: 1; }
.rf-sp-vor .rf-sp-meta { margin-top: 18px; display: flex; justify-content: space-between; gap: 20px; }

/* ── Case-Seite: Richtungs-Varianten ──────────────────────────────── */
.rf-case.rf-kopf { padding-top: calc(var(--navh) + 34px); }   /* NICHT '.rf-case .rf-kopf': beide Klassen am selben Element */
.rf-case h1.d { font-size: clamp(46px, 13.5vw, 196px); line-height: .82; }
.rf-case .rf-auftakt { margin-top: 44px; }
.rf-case .rf-auftakt img, .rf-case .rf-auftakt video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mute2); }
.rf-case .rf-statement { margin-top: 96px; }
.rf-case .rf-body { margin-top: 60px; }
.rf-case .rf-media { margin-top: 118px; }
section.rf-zitat { margin-top: 118px; }

/* B: Medien gross, Text als Einschub, Meta als Leiste */
.rf-b .rf-meta { grid-template-columns: repeat(6, 1fr); max-width: none; }
.rf-b .rf-meta div:nth-child(n+4) { grid-column: span 2; }
.rf-b .rf-case .rf-auftakt { margin-inline: calc(var(--pad) * -1); }
.rf-b .rf-case .rf-auftakt img, .rf-b .rf-case .rf-auftakt video { aspect-ratio: 16 / 9; }
.rf-b .rf-fig.is-halb { max-width: 100%; margin-top: 0; }
.rf-b .rf-media { gap: 96px 60px; }

/* C: Case zweispaltig — links sticky Meta, rechts Medienstrom */
.rf-c .rf-case .rf-spalten, .rf-d .rf-case .rf-spalten { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 72px; margin-top: 76px; align-items: start; }
.rf-c .rf-case .rf-seite, .rf-d .rf-case .rf-seite { position: sticky; top: calc(var(--navh) + 20px); }
.rf-c .rf-case .rf-meta, .rf-d .rf-case .rf-meta { grid-template-columns: 1fr; gap: 22px; padding-top: 0; max-width: none; }
.rf-c .rf-case .rf-statement, .rf-d .rf-case .rf-statement, .rf-c .rf-case .rf-body, .rf-d .rf-case .rf-body, .rf-d .rf-case .rf-statement, .rf-d .rf-case .rf-body { max-width: none; text-align: left; margin-inline: 0; }
.rf-c .rf-case .rf-statement, .rf-d .rf-case .rf-statement { margin-top: 0; }
.rf-c .rf-case .rf-body, .rf-d .rf-case .rf-body { margin-top: 34px; }
.rf-c .rf-case .rf-media, .rf-d .rf-case .rf-media { grid-template-columns: 1fr; gap: 66px; margin-top: 66px; }
.rf-c .rf-case .rf-fig.is-halb, .rf-d .rf-case .rf-fig.is-halb { max-width: 100%; margin-top: 0; }
.rf-c .rf-case .rf-fig.is-klein, .rf-d .rf-case .rf-fig.is-klein { max-width: 260px; }

/* ── Handy ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rf-meta { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-top: 36px; }
  .rf-b .rf-meta { grid-template-columns: 1fr 1fr; }
  .rf-b .rf-meta div:nth-child(n+4) { grid-column: span 1; }
  .rf-media, .rf-c .rf-case .rf-media, .rf-d .rf-case .rf-media { grid-template-columns: 1fr; gap: 46px; }
  .rf-fig.is-halb:nth-of-type(odd), .rf-fig.is-halb:nth-of-type(even) { max-width: 100%; margin-top: 0; justify-self: stretch; }
  .rf-fig.is-klein { max-width: 62%; }
  .rf-trio { gap: 10px; }
  .rf-case .rf-statement, .rf-case .rf-body { margin-top: 62px; }
  .rf-case .rf-media, section.rf-zitat { margin-top: 74px; }
  .rf-ix-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
  .rf-ix-row .rf-ix-kat { white-space: normal; }
  /* Detroit zeigt die Bildtreppe auch am Handy (gemessen 137/176/215 px) — kleiner, aber vorhanden */
  .rf-stapel-w img:nth-child(1) { width: 68px; aspect-ratio: 600 / 1299; top: 8%; }
  .rf-stapel-w img:nth-child(2) { width: 138px; aspect-ratio: 16 / 10; top: 34%; }
  .rf-stapel-w img:nth-child(3) { width: 168px; aspect-ratio: 16 / 10; top: 58%; }
  .rf-stapel-w img:nth-child(4) { display: none; }
  .rf-index .rf-ix-list { max-width: 74%; }
  .rf-split { grid-template-columns: 1fr; gap: 26px; }
  .rf-sp-vor { position: static; }
  .rf-slide { min-height: auto; padding-block: 28px 30px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .rf-slide-kopf, .rf-slide-m, .rf-slide-f { grid-column: 1; justify-self: stretch; }
  .rf-slide-kopf { grid-row: 1; max-width: none; } .rf-slide-m { grid-row: 2; margin-top: 18px; } .rf-slide-f { grid-row: 3; margin-top: 16px; }
  .rf-slide-m img, .rf-slide-m video { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .rf-slide-m img, .rf-slide-m video { width: 100%; }
  .rf-slide-f { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Der feste Bildstapel verdeckte am Handy Labeltext (bis 55x34 px, gemessen 19.09.) —
     dort traegt stattdessen jede Zeile ihr eigenes Bild, wie in Richtung C. */
  .rf-stapel { display: none; }
  .rf-ix-list { max-width: none; }
  .rf-ix-bild { display: block; margin-top: 18px; }
  .rf-ix-bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mute2); }
  .rf-split { grid-template-columns: 1fr; gap: 0; }
  .rf-sp-vor { display: none; }                       /* statt als einzelnes Bild ans Listenende zu rutschen */
  .rf-sp-bild { display: block; margin-top: 20px; }
  .rf-sp-bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mute2); }
  .rf-sp-row .txt { max-width: none; }
  .rf-c .rf-case .rf-spalten, .rf-d .rf-case .rf-spalten { grid-template-columns: 1fr; gap: 40px; }
  .rf-c .rf-case .rf-seite, .rf-d .rf-case .rf-seite { position: static; }
  .rf-aktionen { gap: 10px; }
  .rf-btn { padding: 0 22px; }   /* Hoehe bleibt 56 (Tippziel), nur das Seitenpolster wird enger */
  .rf-karten { grid-template-columns: 1fr; gap: 34px; }
  .rf-weiter { margin-top: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .rf-stapel-w, .rf-stapel-w img, .rf-sp-vor .rf-vorschau img, .rf-sp-vor .rf-vorschau video { transition: none; }
}

/* ── D Vollbild: eine Arbeit je Bildschirm, Motiv gross ──────────────
   Leos Wahl 19.09.: das Design der Live-/projects, "noch mal verbessert" —
   echte Arbeiten statt acht erfundener, ein Satz worum es ging, Typ gross
   statt klein am Rand, ein Motiv statt eines Screenshots.
   Leo 21.09.: "mach nur den seitenhintergrund weiss" — die Seite traegt die
   normalen hellen Tokens, dunkel sind nur noch die Motive selbst. Deshalb ist
   das Bild VOLL deckend und die Abdunklung liegt allein im Verlauf: eine
   Deckkraft unter 1 mischt auf weissem Grund milchig auf statt abzudunkeln. */
.rf-voll { display: block; background: var(--paper); }
.rf-v-slide { position: relative; display: block; height: 100vh; min-height: 560px; overflow: clip; }
.rf-v-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.rf-v-slide:hover .rf-v-bild { transform: scale(1); }
/* Der Verlauf traegt die Lesbarkeit allein. Werte an der schwaechsten Stelle je Motiv gemessen
   (tools/_vollbild-sonde.mjs, Kontrast gegen die HELLSTE Stelle unter der Schrift, min 4.5:1). */
.rf-v-slide::after { content: ''; position: absolute; inset: 0; transition: background .7s var(--ease);
  background:
    radial-gradient(112% 62% at 2% 104%, rgba(8,8,8,.94) 0%, rgba(8,8,8,.72) 34%, rgba(8,8,8,.28) 62%, rgba(8,8,8,0) 84%),
    linear-gradient(180deg, rgba(8,8,8,.84) 0%, rgba(8,8,8,.26) 32%, rgba(8,8,8,.34) 56%, rgba(8,8,8,.84) 100%); }
.rf-v-slide:hover::after {
  background:
    radial-gradient(112% 62% at 2% 104%, rgba(8,8,8,.9) 0%, rgba(8,8,8,.66) 34%, rgba(8,8,8,.22) 62%, rgba(8,8,8,0) 84%),
    linear-gradient(180deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.18) 32%, rgba(8,8,8,.26) 56%, rgba(8,8,8,.8) 100%); }
.rf-v-nr, .rf-v-kopf, .rf-v-typ { position: absolute; z-index: 2; }
/* Diese vier stehen AUF dem Motiv, nicht auf dem Seitengrund — Farben fest, nicht ueber Tokens. */
.rf-v-nr { top: calc(var(--navh) + 26px); left: var(--pad); font: 400 11px/1.4 var(--sans, 'Barlow', system-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 243, 242, .66); }
.rf-v-kopf { left: var(--pad); bottom: 46px; max-width: min(52ch, 62%); }
.rf-v-name { display: block; font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(44px, 9.4vw, 148px); line-height: .88; letter-spacing: var(--tight); text-transform: uppercase; color: #f4f3f2; }
.rf-v-satz { display: block; margin-top: 16px; max-width: 46ch; font: 400 15px/1.55 var(--sans, 'Barlow', system-ui); color: rgba(244, 243, 242, .86); }
.rf-v-typ { right: var(--pad); bottom: 52px; font-family: var(--display, 'Anton', Impact, sans-serif); font-size: clamp(15px, 1.5vw, 24px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: rgba(244, 243, 242, .66); text-align: right; }

@media (max-width: 900px) {
  .rf-v-slide { height: auto; min-height: 0; padding: calc(var(--navh) + 40px) var(--pad) 40px; }
  .rf-v-bild { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; transform: none; }
  .rf-v-nr, .rf-v-kopf, .rf-v-typ { position: static; display: block; max-width: none; }
  .rf-v-slide::after { display: none; }
  .rf-v-nr { margin-bottom: 14px; }
  .rf-v-kopf { margin-top: 20px; }
  .rf-v-typ { margin-top: 14px; text-align: left; }
  /* Am Handy steht der Text UNTER dem Motiv auf dem weissen Grund, nicht darauf. */
  .rf-v-name { color: var(--ink); }
  .rf-v-satz { color: var(--ink); }
  .rf-v-nr, .rf-v-typ { color: var(--grey); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-v-bild { transition: none; transform: none; }
  .rf-v-slide:hover .rf-v-bild { transform: none; }
}

/* ── Vier Website-Ansichten je Werk (Leo 23.09.) ─────────────────────
   „unter jede Referenz … vier Screenshots davon, wie die website aussieht“ +
   „keine abstaende zwischen den verschiedenen referenzen“ + „sieht ein bisschen zu leer aus“.
   Gemeinsam fuer e und f; die Richtungen unterscheiden sich in Struktur und Zaesur.

   KANTE: ein Screenshot ist ueberwiegend weiss (Praxera 223, Hej Susi 210) und verschwaende auf
   dem weissen Seitengrund mit ihm — dokumentiert am 08.09. („Detail-Shots mit weissen Flaechen
   verschmelzen mit dem weissen Grund und untereinander → Collage statt Bildreihe“). Die Kante ist
   deshalb Funktion, nicht Zierde: 1 px, scharf, nach INNEN gelegt (outline-offset -1), damit die
   gerechnete Bildgeometrie exakt bleibt. Keine Karte, kein Radius, kein Schatten.
   Seit 24.09. (Leo): keine Beschriftung unter den Ansichten, und statt des Zoom-Hovers die Bild-Verzerrung
   am Cursor der Startseite (webgl-distort.js). Das Modul haengt EINE Canvas (position:absolute, z-index 0) an
   die Sektion und blendet das DOM-Bild aus; der Rahmen liegt deshalb als eigene Ebene DARUEBER (z-index 1,
   Grund transparent), sonst deckte die Kopie die Kante. Ein CSS-Zoom auf dem Bild wuerde die Kopie mit
   vergroessern, aber nicht mehr clippen — deshalb kein transform mehr auf dem Bild.
   Seit 12.10. (Leo) ist die Verzerrung wieder weg: die Ansichten haben gar keinen Hover-Effekt mehr; die
   Rahmen-Ebene ueber dem Bild bleibt, sie ist ohne Canvas wirkungsgleich. */
.rf-w { position: relative; display: block; }
.rf-schau { padding: 0 var(--pad); background: var(--paper); }
.rf-s-zeile { display: flex; gap: var(--pad); align-items: flex-start; }
/* flex-grow = Seitenverhaeltnis bei basis 0 ⇒ gleiche HOEHE fuer alle, Zeile fuellt die Breite exakt. */
.rf-s-fig { flex: var(--ar) 1 0; min-width: 0; display: block; }
.rf-s-rahmen { display: block; position: relative; z-index: 1; overflow: clip; background: transparent;
  outline: 1px solid rgba(0, 0, 0, .13); outline-offset: -1px; }
.rf-s-fig img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; object-position: 50% 0; }

/* e „Kontaktbogen“: Kopfzeile mit den Leistungen, darunter drei Querformate in einer buendigen Zeile
   und rechts daneben das Hochformat in EIGENER Spalte. Es haengt tiefer (ein Geraet neben Bildschirmen);
   der Raum, der dadurch links unten entsteht, traegt Umfang und Live-Link, statt leer zu bleiben —
   ein Juror meldete das leere Feld am 23.09. als harten Verstoss gegen „keine toten Loecher“.
   `space-between` setzt die Fusszeile auf die Grundlinie des Hochformats. */
.rf-s-e { padding-top: 54px; padding-bottom: 0; }
.rf-s-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 26px; }
.rf-s-rechts { display: flex; align-items: baseline; gap: 22px; }
.rf-s-koerper { display: grid; grid-template-columns: 1fr clamp(158px, 13.2vw, 232px); gap: var(--pad); align-items: stretch; }
.rf-s-links { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; min-width: 0; }
.rf-s-fuss { display: flex; align-items: baseline; gap: 22px; padding-top: 4px; }
.rf-s-hoch .rf-s-fig { width: 100%; }
.rf-s-e::after { content: ''; display: block; height: 1px; margin-top: 46px; background: rgba(0, 0, 0, .14); }
.rf-voll-e .rf-w + .rf-w { margin-top: 0; }
.rf-voll-e .rf-s-e { margin-bottom: 104px; }

/* f „Werkbank“: Fakten links (die Substanz gegen „zu leer“), rechts zwei Bildzeilen mit
   Hierarchie — die Startseite gross neben dem Handy, darunter zwei Innenseiten. Der Fuss
   schliesst den Fall sichtbar ab; das ist hier die Zaesur zwischen zwei Arbeiten. */
.rf-s-f { padding-top: 64px; padding-bottom: 0; }
/* 284 px statt 268 (24.09.): Leos Kunde-Zeile „eigene Marke von Alina & Leonard Goldberg“ misst 276 px in Barlow 15/300 —
   in 268 fiel „eigene“ weg, und ohne das Wort ist die Marke nicht mehr als Studio-eigene erkennbar (Juror B2, med). */
.rf-f-raster { display: grid; grid-template-columns: 284px 1fr; gap: 56px; align-items: start; }
.rf-f-fakten dl > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.rf-f-fakten dl > div:first-child { border-top: 0; padding-top: 0; }
.rf-f-fakten dt { font-family: Barlow, Arial, sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.rf-f-fakten dd { font-size: 15px; line-height: 1.5; font-weight: 300; color: var(--ink); }
/* Zwei Wege aus dem Block, gestapelt unter der Schiene (Leo 24.09. abends): erst „Projekt ansehen“, dann
   „Website ansehen“ — zwei GLEICHE Knoepfe (.rf-btn), beide ueber die volle Spaltenbreite (284 px, wie die
   Kontakt-Zwillinge 280), 10 px Luft dazwischen. */
.rf-f-links { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
.rf-f-links .rf-btn { width: 100%; }
.rf-f-bilder { display: grid; gap: var(--pad); min-width: 0; }
.rf-f-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .14); }
.rf-f-nr { font-family: Anton, Impact, sans-serif; font-size: clamp(30px, 3.4vw, 54px); line-height: .9;
  letter-spacing: var(--tight); color: var(--ink); }
.rf-voll-f .rf-s-f { margin-bottom: 118px; }
/* Die Buehne gibt in f etwas Hoehe ab, damit der Schau-Block schon angeschnitten ist — die Seite
   soll nicht mehr „leer“ starten. NUR ab 901 px, sonst schlaegt diese Regel (0,2,0) die
   Handy-Regel `.rf-v-slide{height:auto}` (0,1,0) weiter oben in dieser Datei. */
@media (min-width: 901px) { .rf-voll-f .rf-v-slide { height: 86vh; } }
/* Leo 12.10.: „die heros von jeder referenz soll ohne rand sein wie früher aber unten bei ‚kunde‘ und die fotos von den
   websites, dort mach größere abstände links und rechts“, dann „sind die abstände wie auf der kontakt seite? mach sie gleich.
   schreibe die headlines auf heros … und text unter der headline auch mit dem gleichem abstand von links“.
   Die Buehne bleibt randlos; Werkbank UND Name + Satz auf der Buehne stehen auf dem Rand der Kontaktseite:
   --kx = clamp(24px, 8vw, 150px), am Handy 24 (Quelle tools/_kontakt-faecher.mjs). Waechter tools/_rand-gleich.mjs
   misst beide Seiten nebeneinander — aendert sich der Kontakt-Rand, wird er hier rot. */
.rf-f { --kx: clamp(24px, 8vw, 150px); }   /* an main: auch der Abschluss (Knoepfe) liegt ausserhalb von .rf-voll-f */
.rf-voll-f .rf-s-f { padding-inline: var(--kx); }
.rf-voll-f .rf-v-kopf { left: var(--kx); }
/* Leo 13.10.: „mach die buttons ganz unten ‚Projekt anfragen → / Leistungen ansehen →‘ auch mit dem abstand von links“ */
.rf-f .rf-abschluss { padding-inline: var(--kx); }
@media (max-width: 900px) { .rf-f { --kx: 24px; } }

@media (max-width: 1100px) {
  .rf-f-raster { grid-template-columns: 1fr; gap: 30px; }
  .rf-f-fakten dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
  .rf-f-fakten dl > div { border-top: 1px solid rgba(0, 0, 0, .14); padding-top: 14px; }
  /* Einspaltig steht die Schiene ueber den Bildern: die zwei Knoepfe nebeneinander, gleich breit, nicht ueber die ganze Zeile */
  .rf-f-links, .rf-f-fakten .rf-f-links { flex-direction: row; flex-wrap: wrap; }
  .rf-f-links .rf-btn { width: auto; min-width: 232px; }
}
@media (max-width: 900px) {
  /* Vier nebeneinander waeren hier 78 px breit — darin ist keine Website mehr zu erkennen.
     Deshalb untereinander: die Querformate ueber die volle Breite, das Hochformat schmaler. */
  .rf-s-zeile { display: grid; grid-template-columns: 1fr; gap: 26px; }
  .rf-s-fig { width: 100%; }
  .rf-s-fig img { aspect-ratio: var(--ar); }
  .rf-s-fig[style*="--ar:0"] { width: 62%; }
  .rf-s-e, .rf-s-f { padding-top: 34px; }
  .rf-s-kopf { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .rf-s-rechts { flex-direction: column; gap: 8px; }
  .rf-s-e::after { margin-top: 40px; }
  .rf-voll-e .rf-s-e { margin-bottom: 64px; }
  .rf-voll-f .rf-s-f { margin-bottom: 72px; }
  .rf-f-fakten dl { grid-template-columns: 1fr; }
  .rf-f-fuss { margin-top: 30px; }
  .rf-f-links, .rf-f-fakten .rf-f-links { flex-direction: column; }   /* am Handy wieder gestapelt, volle Breite */
  .rf-f-links .rf-btn { width: 100%; min-width: 0; }
}


/* Am Handy steht das Hochformat MITTIG statt links: bei linker Ausrichtung blieben rechts daneben
   130 x 464 px leer (Jury 23.09., harter Befund). Zentriert liest es sich als Geraet, nicht als Loch. */
@media (max-width: 900px) {
  .rf-s-koerper { display: block; }
  .rf-s-hoch .rf-s-fig { width: 62%; margin-inline: auto; }
  .rf-s-hoch { margin-top: 26px; }
  .rf-s-fuss { flex-direction: column; gap: 8px; }
}

/* Bereichsgrenze, GEMESSEN statt geraten (_schau-probe 23.09.): bei 1280 px ist das Hochformat noch
   168 px breit, bei 1100 nur 127 — unter 150 px ist keine Website mehr zu erkennen. Ab da bricht die
   Zeile in ein 2x2-Raster; das Hochformat behaelt seine Rolle (steht auf der Grundlinie seiner Reihe
   und ragt nach oben heraus), nimmt aber nur die halbe Zellenbreite. */
@media (min-width: 901px) and (max-width: 1200px) {
  /* e: der Koerper wird einspaltig — die eigene Spalte fuers Hochformat waere hier nur noch 145 px
     breit (gemessen 82 px Bild, Sonde 23.09.). Die drei Querformate behalten ihre Zeile und werden
     dadurch groesser; das Hochformat steht darunter, mittig. Ein 2x2-Raster verbietet sich: drei
     Bilder in zwei Spalten lassen die vierte Zelle leer — genau das tote Feld von oben. */
  .rf-s-e .rf-s-koerper { display: block; }
  .rf-s-e .rf-s-hoch { margin-top: 26px; }
  .rf-s-e .rf-s-hoch .rf-s-fig { width: 30%; margin-inline: auto; }
  .rf-s-e .rf-s-fuss { margin-top: 22px; }
  /* f: die Bildzeilen bleiben Paare, das Hochformat teilt sich die Zelle mit der Startseite. */
  .rf-s-f .rf-s-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); align-items: start; }
  .rf-s-f .rf-s-fig { width: 100%; }
  .rf-f-z1, .rf-f-z2 { grid-template-columns: 1fr 1fr; }
  .rf-s-f .rf-s-fig[style*="--ar:0"] { width: 58%; }
}

/* Am Handy steht in der Buehne die Ordnungszahl UEBER dem Namen — ein Kicker ueber einer Display-Zeile
   und damit das erste No-Go des Geschmacksprofils (df-eyebrow-check meldet es fuer den ausgelieferten
   Stand ebenso, 4 Funde bei 390 px). In den neuen Richtungen wandert sie unter den Typ: Bild, Name,
   Satz, Typ, Nummer. Die Regel bleibt auf e/f beschraenkt, damit der ausgelieferte Stand unberuehrt ist. */
@media (max-width: 900px) {
  .rf-voll-e .rf-v-slide, .rf-voll-f .rf-v-slide { display: flex; flex-direction: column; }
  .rf-voll-e .rf-v-bild, .rf-voll-f .rf-v-bild { order: 1; }
  .rf-voll-e .rf-v-kopf, .rf-voll-f .rf-v-kopf { order: 2; margin-top: 20px; }
  .rf-voll-e .rf-v-typ, .rf-voll-f .rf-v-typ { order: 3; }
  .rf-voll-e .rf-v-nr, .rf-voll-f .rf-v-nr { order: 4; margin: 12px 0 0; }
}

/* Befunde der Jury vom 23.09. an f:
   — die Fakten-Schiene war zu einem Viertel gefuellt, darunter blieb die linke Seitenhaelfte leer:
     die drei Zeilen stehen oben, der Live-Link wandert auf die Hoehe der zweiten Bildzeile;
   — das Hochformat stand am Handy halbbreit linksbuendig, rechts daneben ein leeres Feld: zentriert;
   — die Zaehlung steht jetzt nur noch im Fuss, dafuer vollstaendig (01 / 04). */
/* Die Schiene traegt VIER Fakten (Kunde, Leistungen, Umfang, Jahr) — ein Juror nannte sie mit drei
   kurzen Zeilen „Substanz, aber zu wenig davon“. Die Links stehen direkt darunter, NICHT am
   Spaltenende: dorthin geschoben sass der Live-Link 63 px ueber der Riesenziffer der Fusszeile und las
   sich als Kicker ueber einer Display-Zeile (df-eyebrow-check, 8 Funde am 23.09. — das erste No-Go des
   Profils). Seit 24.09. (Leo) traegt die Schiene Rechtstraeger, konkrete Leistungen und den GEMESSENEN
   Umfang — die Spalte wird laenger, bleibt aber kuerzer als die Bildspalte (Sonde _fakten-capture). */
.rf-f-fakten { display: flex; flex-direction: column; align-items: start; }
.rf-f-fakten .rf-f-links { margin-top: 28px; align-self: stretch; }
.rf-f-von { font-size: .52em; color: var(--grey); }
.rf-s-f .rf-s-fig[style*="--ar:0"] { margin-inline: auto; }
@media (max-width: 900px) {
  .rf-s-f .rf-s-fig[style*="--ar:0"] { width: 62%; }
  .rf-f-fakten { display: block; }
  .rf-f-fakten .rf-f-links { margin-top: 22px; }
}

/* ── Case-Seite, Runde 24.09. abends (Leo: Texte oben, „08 Unterwegs“, Weitere Arbeiten, CTA weiter oben) ──────
   Befund: seit `f --into-site` traegt <main> rf-f, das zweispaltige Case-Layout oben galt nur fuer rf-c/rf-d — die
   Case-Seiten liefen live im Einspalten-Fallback (Statement zentriert, 7-Zellen-Raster mit „Live“ allein in Zeile 3,
   145 Woerter zentriert, 2-Spalten-Medienraster mit dem Handy-Video allein in einer 759-px-Zelle). Die Klassen
   hier haengen an .rf-case-k1 / .rf-case-k2 am <main> — unabhaengig von der Richtung der Uebersicht. */

/* Fakten wie die Werkbank-Schiene auf /projects (Label ueber dem Wert, Haarlinien zwischen den Zeilen) */
.rf-fakten { margin: 0; }
.rf-fakten > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, .14); min-width: 0; }
.rf-fakten > div:first-child { border-top: 0; padding-top: 0; }
.rf-fakten dt { font-family: Barlow, Arial, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.rf-fakten dd { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 300; color: var(--ink); }
.rf-fakten dd + dt { margin-top: 18px; }
/* Zwei Knoepfe der Marken-Familie, gestapelt, spaltenbreit (wie unter der Werkbank-Schiene) */
.rf-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
.rf-cta .rf-btn { width: 100%; }
/* Story: drei benannte Bloecke — Zwischenzeile in Anton (eine Ueberschrift, kein Kicker), Text 15/300 auf 640 px */
.rf-story { max-width: 640px; }
.rf-st + .rf-st { margin-top: 44px; }
.rf-st-h { font-size: clamp(22px, 1.5vw, 26px); line-height: .9; margin: 0 0 12px; }   /* eine Stufe unter dem Statement (42), sonst lesen sich beide als gleiche Ebene */
/* Die Zeilenmaske der Site (inset -.3em oben) liegt bei Anton 26 px / lh .98 auf 0,5 px an der Oberkante der Ö-Punkte — je nach Subpixel-Lage
   fehlten sie (Juror Desktop R2: „LOSUNG“, im DPR-2-Ausschnitt bestaetigt). Oben und unten mehr Raum; die Maske dient nur dem Reveal von unten. */
.rf-st-h .ln, .rf-statement h2 .ln, .rf-weiter-h .ln { clip-path: inset(-.6em 0 -.2em 0); }
.rf-st .txt { margin: 0; text-wrap: pretty; }   /* keine Einwort-Schlusszeilen, wo der Browser es kann */
/* Handy-Zeile: Video zwischen zwei Standbildern, EINE Hoehe (390/844 = 600/1299) */
.rf-handy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rf-handy > img, .rf-handy > video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: 50% 0; background: var(--mute2); }
/* Weitere Arbeiten: eigene Sektion — Haarlinie, Display-Ueberschrift, Motive mit Innenkante, Knopf als eigene Zeile */
.rf-weiter-neu { margin-top: 176px; }
.rf-weiter-neu::before { content: ''; display: block; height: 1px; background: rgba(0, 0, 0, .14); }
.rf-weiter-h { font-size: clamp(30px, 3.6vw, 56px); line-height: .9; margin: 40px 0 44px; }
/* EINE Stufe je Ebene: die Sektions-Ueberschrift ist so gross wie das Statement der jeweiligen Fassung (Juror Handy: „Nebenrubrik groesser als der Claim“) */
.rf-case-k1 .rf-weiter-h { font-size: clamp(30px, 2.7vw, 42px); }
.rf-case-k2 .rf-weiter-h { font-size: clamp(34px, 4.5vw, 65px); }
.rf-weiter-neu .rf-k-bild { outline: 1px solid rgba(0, 0, 0, .13); outline-offset: -1px; }
.rf-weiter-neu .rf-k-name { font-size: clamp(22px, 2vw, 32px); }   /* eine Stufe unter dem Statement (42/65) — bei 38 wogen die Karten-Namen wie der Claim */
.rf-weiter-neu .rf-aktionen { margin-top: 96px; }

/* K1 „Schiene“: stehende Spalte links, Story + Werkschau rechts */
/* Abstand als PADDING der Sektion, nicht als margin des ersten Kindes: der margin kollabiert durch die Sektionskante, und `.sec { overflow: clip }`
   schneidet dann ab, was ueber die erste Zeile ragt — in K1 fehlten die Ö-Punkte von „LÖSUNG“ (7 px ueber dem Zeilenkasten bei lh .98), weil im
   dreispaltigen Story-Grid alle drei Zwischenzeilen in der ersten Zeile stehen; jedes Statement mit Umlaut (BÜHNE) traf es ebenso. */
.rf-case.rf-k1 { padding-top: 88px; }
.rf-k1 .rf-spalten { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 72px; align-items: start; }
.rf-k1 .rf-seite { position: sticky; top: var(--rf-sticky-top, calc(var(--navh) + 44px)); }   /* 44 statt 20: mit 20 dockte die Spalte 25 px unter dem Nav-Lockup an und las sich als dessen Fortsetzung (Juror Desktop) */
.rf-k1 .rf-statement { max-width: none; margin: 0; text-align: left; }
.rf-k1 .rf-statement h2 { font-size: clamp(30px, 2.7vw, 42px); line-height: .92; }
.rf-k1 .rf-statement h2.um, .rf-k2 .rf-statement h2.um { line-height: 1.04; }   /* Umlaute UND Kommas: (0,2,1) schlug sonst .d.um. .98 liess den Komma-Ausläufer die Versalien der Folgezeile beruehren (Pixel-Scan 25.09.: 0,5 px bei 42, 0 bei 30) — 1.04 gibt ≥ 1,5 px Luft; Sonde tools/_umlaut-luft-mass.mjs */
.rf-k1 .rf-fakten { margin-top: 30px; }
/* Story dreispaltig ueber die ganze Spalte (Aufgabe | Loesung | Ergebnis): einspaltig blieb rechts ein 615×690-px-Feld leer (Juror Desktop) */
.rf-k1 .rf-story { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.rf-k1 .rf-st + .rf-st { margin-top: 0; }
.rf-k1 .rf-media { margin-top: 96px; grid-template-columns: 1fr 1fr; gap: 56px 24px; }
.rf-k1 .rf-fig.is-halb, .rf-k1 .rf-fig.is-halb:nth-of-type(odd), .rf-k1 .rf-fig.is-halb:nth-of-type(even) { max-width: 100%; margin-top: 0; justify-self: stretch; }
.rf-k1 .rf-fig.is-lang { width: 100%; max-width: 72%; margin-inline: auto; }   /* mittig wie die Innenspalte in K2 — linksbuendig blieb rechts eine 350×1220-px-Flaeche ohne Bezug (Juror Desktop R2) */
.rf-k1 .rf-fig.is-lang img { max-width: 100%; margin-inline: 0; }
.rf-k1 .rf-fig.is-gross img, .rf-k1 .rf-fig.is-gross video { max-width: 100%; margin-inline: 0; }

/* K2 „Band“: Fakten-Band mit Knoepfen unter dem Auftakt, dann Statement | Story, Werkschau volle Breite mit EINER Innenspalte */
.rf-case.rf-k2 { padding-top: 64px; }   /* wie K1: Sektionskante ueber der ersten Zeile, nicht darauf */
.rf-k2 .rf-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 284px; gap: 40px; padding-top: 34px; border-top: 1px solid rgba(0, 0, 0, .14); align-items: start; }
.rf-k2 .rf-band .rf-fakten { display: contents; }
.rf-k2 .rf-band .rf-fakten > div { border-top: 0; padding: 0; }
.rf-k2 .rf-band .rf-cta { margin-top: 0; }
.rf-k2 .rf-editorial { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 72px; margin-top: 128px; align-items: start; }   /* Story buendig an der rechten Kante; 560 px = ~75 Zeichen (640 waren ~95, Juror Desktop R2) */
.rf-k2 .rf-story { max-width: 560px; }
.rf-k2 .rf-statement { max-width: none; margin: 0; text-align: left; }
.rf-k2 .rf-statement h2 { font-size: clamp(34px, 4.5vw, 65px); line-height: .92; }
.rf-k2 .rf-media { margin-top: 96px; gap: 64px 24px; }
.rf-k2 .rf-fig.is-halb, .rf-k2 .rf-fig.is-halb:nth-of-type(odd), .rf-k2 .rf-fig.is-halb:nth-of-type(even) { max-width: 100%; margin-top: 0; justify-self: stretch; }
/* EINE Innenspalte (1100) fuer lang, gross und Handy-Zeile — am FIGURE, damit die Beschriftung an der Bildkante steht (Juror Desktop: Caption bei x=24, Bild bei 305) */
.rf-k2 .rf-fig.is-lang, .rf-k2 .rf-fig.is-gross, .rf-k2 .rf-fig.is-voll { width: 100%; max-width: 1100px; margin-inline: auto; }
.rf-k2 .rf-fig.is-lang img, .rf-k2 .rf-fig.is-gross img, .rf-k2 .rf-fig.is-gross video { max-width: 100%; margin-inline: 0; }

@media (max-width: 1200px) {
  .rf-k1 .rf-spalten { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
  .rf-k1 .rf-media { grid-template-columns: 1fr; }
  .rf-k1 .rf-fig.is-lang img { max-width: 100%; }
  .rf-k1 .rf-story { grid-template-columns: 1fr; max-width: 640px; }
  .rf-k1 .rf-st + .rf-st { margin-top: 44px; }
  .rf-k2 .rf-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .rf-k2 .rf-band .rf-cta { grid-column: 1 / -1; flex-direction: row; }
  .rf-k2 .rf-band .rf-cta .rf-btn { width: auto; min-width: 232px; }
}
@media (max-width: 900px) {
  .rf-case.rf-k1 { padding-top: 62px; }
  .rf-k1 .rf-spalten { grid-template-columns: 1fr; gap: 48px; }
  .rf-k1 .rf-seite { position: static; }
  .rf-k1 .rf-media, .rf-k2 .rf-media { grid-template-columns: 1fr; gap: 46px; margin-top: 74px; }
  .rf-case.rf-k2 { padding-top: 48px; }
  .rf-k2 .rf-band { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .rf-k2 .rf-band .rf-cta { flex-direction: column; margin-top: 8px; }
  .rf-k2 .rf-band .rf-cta .rf-btn { width: 100%; min-width: 0; }
  .rf-k2 .rf-editorial { grid-template-columns: 1fr; gap: 40px; margin-top: 96px; }   /* Site-Zaesur am Handy (Juror: 75 px lasen sich als Teil der Knopfgruppe) */
  .rf-k2 .rf-fig.is-lang img, .rf-k2 .rf-fig.is-gross img, .rf-k2 .rf-fig.is-gross video { max-width: 100%; }
  .rf-st + .rf-st { margin-top: 36px; }
  /* Handy-Zeile am Handy: Video + ein Standbild (drei nebeneinander waeren 107 px — keine Website mehr erkennbar) */
  .rf-handy { grid-template-columns: 1fr 1fr; gap: 16px; }
  .rf-handy > :nth-child(3) { display: none; }
  .rf-weiter-neu { margin-top: 112px; }
  .rf-weiter-h { margin: 32px 0 30px; }
  .rf-weiter-neu .rf-aktionen { margin-top: 64px; }
}

/* ── Luft-Faecher 25.09. (Leo: „Abstaende rechts und links und generell zwischen den Elementen groesser, luftiger“) ──
   main.rf-luft traegt die vertikale Leiter (×1,5 gegen den Stand vom 24.09.) und die Zaesur „Weitere Referenzen“ im Takt
   --rf-x = --vor-fuss (128 Desktop / 96 Handy): Haarlinie → H2 → Karten → Knopf → Fuss, ueberall derselbe Abstand an der TINTE (die Anton-H2 setzt
   ihre Tinte .286em unter die Boxkante, gemessen 28 bei margin 40 @42 px — deshalb das calc).
   l1 „Innenspalte“: der Lesekoerper (Spalten + Weitere Referenzen) rueckt um --rf-innen nach innen, Kopf/Auftakt bleiben auf dem
   24-px-Rahmen (Buehne). l2 „Rahmen“: alle rf-Sektionen auf --rf-rahmen. Sonde: tools/_case-luft-probe.mjs. */
.rf-luft { --rf-x: var(--vor-fuss, 96px); --rf-innen: 0px; --rf-rahmen: var(--pad); }   /* EIN Takt = die Site-Luft vor dem Fuss (site.css --vor-fuss: 128 Desktop / 96 Handy seit 25.09.) */
.rf-luft-l1 { --rf-innen: 96px; }
.rf-luft-l2 { --rf-rahmen: 80px; }
.rf-luft-l1 .rf-case.rf-k1, .rf-luft-l1 .rf-weiter { padding-inline: calc(var(--pad) + var(--rf-innen)); }
.rf-luft-l2 .rf-case, .rf-luft-l2 .rf-weiter { padding-inline: var(--rf-rahmen); }
.rf-luft .rf-case.rf-kopf { padding-top: calc(var(--navh) + 105px); }   /* Leo 25.09.: Wortmarke → H1-Tinte 96 (H1-Tinte liegt 6 px ueber der Box), Sonde _kopf-luft-mass.mjs --soll=96 */
.rf-luft .rf-case .rf-auftakt { margin-top: 96px; }   /* Labels → Video = derselbe Takt 96 */
.rf-luft .rf-case.rf-k1 { padding-top: 192px; }   /* Leo 25.09.: Video → „Aufgabe“ groesser, auf der Leiter (192 = letztes Medium → Haarlinie) */
.rf-luft .rf-k1 .rf-spalten { gap: 112px; }
.rf-luft .rf-k1 .rf-fakten { margin-top: 44px; }
.rf-luft .rf-fakten > div { padding: 18px 0; }
.rf-luft .rf-cta { margin-top: 40px; gap: 12px; }
.rf-luft .rf-k1 .rf-story { gap: 64px; }
.rf-luft .rf-st-h { margin-bottom: 18px; }
.rf-luft .rf-k1 .rf-media { margin-top: 144px; gap: 96px 40px; }
.rf-luft .rf-fig figcaption { margin-top: 18px; }
.rf-luft .rf-weiter-neu { margin-top: 192px; }
.rf-luft .rf-weiter-h { margin: calc(var(--rf-x) + .286em) 0 calc(var(--rf-x) + .286em); }
.rf-luft .rf-weiter-neu .rf-karten { gap: 48px; }
.rf-luft .rf-weiter-neu .rf-aktionen { margin-top: var(--rf-x); padding-bottom: var(--vor-fuss, 96px); }
@media (max-width: 1439px) {
  .rf-luft-l1 { --rf-innen: 56px; } .rf-luft-l2 { --rf-rahmen: 56px; }
  .rf-luft .rf-k1 .rf-spalten { gap: 80px; }
}
@media (max-width: 900px) {
  .rf-luft-l1 { --rf-innen: 0px; } .rf-luft-l2 { --rf-rahmen: var(--pad); }
  .rf-luft .rf-case.rf-kopf { padding-top: calc(var(--navh) + 62px); }   /* Handy: 72 = 0,75 × 96 */
  .rf-luft .rf-case .rf-auftakt { margin-top: 72px; }
  .rf-luft .rf-case.rf-k1 { padding-top: 112px; }
  .rf-luft .rf-k1 .rf-spalten { gap: 64px; }
  .rf-luft .rf-k1 .rf-st + .rf-st { margin-top: 56px; }
  .rf-luft .rf-k1 .rf-media { margin-top: 96px; gap: 64px; }
  .rf-luft .rf-weiter-neu { margin-top: 128px; }
  .rf-luft .rf-weiter-neu .rf-karten { gap: 40px; }
}

/* ── Weitere Referenzen ohne Knopf + Hover-Video (Leo 25.09.) ── */
.rf-weiter-neu.is-ohne-knopf { padding-bottom: var(--vor-fuss, 96px); }   /* Karten → Fuss = Site-Luft, der Knopf ist weg */
.rf-k-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
@media (hover: hover) and (pointer: fine) { .rf-karte.is-video .rf-k-video { opacity: 1; } }
@media not all and (hover: hover) { .rf-k-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .rf-k-video { display: none; } }
@media (max-width: 480px) { .rf-luft .rf-labels { flex-direction: column; gap: 6px; } }   /* Juror B 25.09.: zwei ungleiche Label-Zeilen (● ONLINESHOP allein) → als Spalte, wie Detroits gestapelte Labels */

/* Galerie „Weitere Referenzen“ auf den Case-Seiten (Leo 13.10.: „mach eine gallerie wo man mit pfeilen nach links und
   rechts gehn kann“): ein waagerechter Streifen mit Einrasten statt des 3er-Rasters (fuenf Karten = 3 + 2). Desktop drei
   Karten im Bild, bis 1100 zwei, am Handy eine mit angeschnittener naechster. Die Pfeile stehen rechts neben der Ueberschrift
   (gleiche Hoehe wie der Knopf der Site, 56); die Ueberschrift behaelt ihre Raender, der Takt Haarlinie → H2 → Karten
   bleibt (tools/_case-luft-probe.mjs). Der Streifen ist 4 px nach aussen gepolstert und um 4 px zurueckgezogen, damit
   Fokusrahmen nicht abgeschnitten werden — Kartenlage und Einrastkante bleiben gleich (scroll-padding).
   Selektor (0,3,0) und Platz am Dateiende: er muss das Raster (.rf-karten) und die Luft-Gaps (.rf-luft …) schlagen.
   Mechanik in referenzen.js, Waechter tools/_galerie-probe.mjs. */
.rf-weiter-kopf { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rf-gal-nav { display: flex; gap: 8px; flex: none; }
.rf-gal-nav[hidden] { display: none; }
.rf-gal-btn { width: var(--btn-h, 56px); height: var(--btn-h, 56px); display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 400 18px/1 var(--sans, 'Barlow', system-ui);
  cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .rf-gal-btn:not(:disabled):hover { background: var(--ink); color: var(--paper); } }
.rf-gal-btn:disabled { opacity: .25; cursor: default; }
.rf-gal-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rf-weiter-neu .rf-karten[data-galerie] { --gal-gap: 48px;
  display: grid; grid-template-columns: none; grid-auto-flow: column; gap: var(--gal-gap);
  grid-auto-columns: calc((100% - 2 * var(--gal-gap)) / 3);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px; margin: -4px; scroll-padding-inline: 4px; }
.rf-weiter-neu .rf-karten[data-galerie]::-webkit-scrollbar { display: none; }
.rf-weiter-neu .rf-karten[data-galerie] > .rf-karte { scroll-snap-align: start; min-width: 0; }
@media (max-width: 1439px) { .rf-weiter-neu .rf-karten[data-galerie] { --gal-gap: 40px; } }
@media (max-width: 1100px) { .rf-weiter-neu .rf-karten[data-galerie] { grid-auto-columns: calc((100% - var(--gal-gap)) / 2); } }
@media (max-width: 900px) { .rf-weiter-neu .rf-karten[data-galerie] { --gal-gap: 24px; grid-auto-columns: 82%; } }