/* ============================================================
   REFERENZEN — DAS VERZEICHNIS

   Der erste Entwurf zeichnete einen Schnitt durch den Baugrund:
   die Gewerke als Erdschichten, in die man hinunterscrollt. Die
   Idee stimmte fachlich, aber sie hat die Seite eingefärbt — und
   diese Website lebt davon, dass die Fläche weiss bleibt. Der
   Boden ist raus. Weiss von oben bis unten.

   Was jetzt trägt, steht so schon im Design-Brief §9: die echten
   Bauwerksnamen als das Element, an das man sich erinnert. Nicht
   Kacheln mit Bildchen darin, sondern ein VERZEICHNIS — 24 Namen,
   gross gesetzt, mit Nummer, Führungspunkten und Gewerk, wie das
   Register eines technischen Werks. Fährt man eine Zeile an,
   fliegt ihre Aufnahme dem Zeiger hinterher.

   Die Bildwalze stammt aus „hover-image-reveal" von Originkit
   (originkit.dev/components/hover-image-reveal), nach reinem
   JavaScript portiert: das aktive Bild sitzt auf 0, alles darüber
   parkt bei -100 %, alles darunter bei +100 %. Dadurch schiebt
   sich beim Wandern nach unten das alte Bild nach OBEN heraus —
   die Walze verrät die Laufrichtung. Ein Überblenden könnte das
   nicht.

   Die Aufnahmen sind 167 bis 420 Pixel gross. Das Fenster ist
   deshalb ein Passepartout: das Bild sitzt darin in seiner
   ECHTEN Grösse und wird nie hochgerechnet. Kleine Aufnahmen
   bekommen einen breiteren Rand — so, wie ein kleiner Abzug
   aufgezogen wird.
   ============================================================ */

/* Hero und Abschluss kommen jetzt aus leistung.css — dieselben
   Bauteile wie auf den acht Leistungsseiten, nicht nachgebaut,
   sondern wiederverwendet. Hier steht deshalb nur noch, was es
   ausschliesslich auf dieser Seite gibt: der Gewerke-Filter und
   der Leuchttisch.

   Auch die Brotkrumen-Zeile stand hier als KOPIE. Kopien laufen
   beim nächsten Umbau auseinander — sie ist entfallen. */

/* ============================================================
   HERO-SZENE

   js/fx/bildwand.js zeichnet alle 22 Baustellenaufnahmen in
   Reihen gleicher Höhe. Das Punktraster des Vorgängers ist
   entfallen — die Bühne trägt jetzt die Sache selbst.

   Fällt die Leinwand aus oder ist `prefers-reduced-motion`
   gesetzt, bleibt die Bühne leer und der Hero besteht aus
   Schrift auf Weiss. Das ist hier vertretbar: die 22 Aufnahmen
   stehen vollständig und als echte Bilder im Verzeichnis
   darunter, jede mit Alternativtext. Ein hochgerechnetes
   Ersatzbild wäre die schlechtere Antwort.
   ============================================================ */

/* Die Wand hält Abstand vom Kopfstreifen: dort stehen Logo und
   Menü, und Fotos direkt darunter machen beides unruhig. Die
   anderen Heros dürfen bis oben laufen, weil ihre Szenen
   Zeichnungen sind und nicht mit der Wortmarke konkurrieren.
   Nach unten läuft die Wand ins Papier aus, damit die Kante zum
   Verzeichnis nicht schneidet. */
.lhero .hero-fx[data-fx="bildwand"] {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 118px,
                        #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 118px,
                        #000 calc(100% - 90px), transparent 100%);
}

/* ============================================================
   GEWERKE-FILTER

   Hier lief vorher ein Band mit allen Namen durch. Es war schön
   anzusehen und tat nichts. An derselben Stelle steht jetzt der
   Filter: dieselben vier Wörter wie auf der alten Seite, aber sie
   arbeiten — sie engen das Register darunter ein. Übersicht
   entsteht durch Weglassen, nicht durch Bewegung.
   ============================================================ */
.rfilter {
  position: sticky;
  top: var(--nav-h, 72px);
  /* 1, nicht 5. Beim Eintreten legt [data-flow]::before einen
     blauen Lichtschleier über die oberen 240 px der Platte — der
     liegt auf z-index 2. Mit z-index 5 malte die Leiste ihr
     deckendes Papier DARÜBER und war ein grellweisses Band quer
     durch den Schleier, das erst am Ende des Eintritts zur
     Umgebung passte. Unter dem Schleier bekommt sie denselben
     Ton wie alles andere.
     Über dem statischen Inhalt liegt sie trotzdem — dafür genügt
     jeder Wert ab 0 —, das Verzeichnis scrollt also weiterhin
     darunter durch. Und das Lichtband der Plattenkante (z-index 3)
     bleibt jetzt sichtbar, statt verdeckt zu werden. */
  z-index: 1;
  /* Das Polster ist NUR für den geklebten Zustand da: ohne es
     stiesse „Unsere Arbeit" oben an die Menüleiste. Das negative
     Aussenmass hebt es im Ruhezustand wieder auf, damit die Zeile
     dort genau auf den 54 px Kopfraum der Platte sitzt. */
  margin-top: -18px;
  padding-top: 18px;
  /* Über der Zeile liegen die festen 54 px Kopfraum der Platte,
     darunter dieses feste Mass. Vorher stand hier ein Wert, der je
     nach Fensterhöhe zwischen 26 und 42 px landete — die Zeile
     klebte am Verzeichnis und hatte oben doppelt so viel Luft. */
  margin-bottom: 52px;
  /* Deckendes Papier, kein Rückwärtsfilter. Vorher stand hier
     rgba(…,0.90) mit backdrop-filter: saturate(1.5) — die 10 %
     Durchlässigkeit plus die Sättigungsanhebung verfärbten alles,
     was durchschien, und die Leiste hatte ein anderes Weiss als
     der Rest der Seite. */
  background: var(--grund);
  /* EIN Strich, und der hat eine Aufgabe: er ist die Kante, auf
     der die Reiter sitzen. Vorher lief oben und unten je eine
     Linie um fünf Knöpfe, die selbst schon umrandet waren. */
  border-bottom: 1px solid var(--grey-line-2);
}

/* [data-flow] > * schiebt jedes direkte Kind beim Eintreten von
   unten herein UND blendet es beim Hinausgehen wieder aus. Der
   zweite Teil ist für ein klebendes Element falsch: die Leiste
   hängt dann noch oben am Rand und verblasst.

   Vorher stand hier schlicht `transform: none`. Damit stand die
   Leiste beim Eintreten schon an ihrem Platz, während „Unsere
   Arbeit" darüber noch 90 px tiefer lag — die Zeile wanderte
   quer durch die Leiste hindurch. Also nur der AUSGANG wird
   ausgenommen, der Eingang bleibt wie bei den Geschwistern. */
.rlt > .rfilter {
  opacity: calc(0.05 + 0.95 * var(--enter));
  transform:
    translate3d(0, calc((1 - var(--enter)) * 90px), 0)
    scale(calc(1 - (1 - var(--enter)) * 0.045));
}
/* Überschrift links, Gewerke rechts — auf einer gemeinsamen
   Schriftlinie. `baseline` und nicht `center`: die Reiter tragen
   unten 13 px Luft bis zum Strich, bei zentrierter Ausrichtung
   sässe die Überschrift dadurch zu hoch. */
.rfilter .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 48px);
}
.rfilter-titel { flex: none; }
.rfilter-reiter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(15px, 2.1vw, 30px);
}

.rfilter-b {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* Kein Innenabstand links/rechts, kein Rahmen: der Reiter ist
     das Wort selbst. Unten die Luft bis zur Kante. */
  padding: 0 0 13px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s;
}
.rfilter-b b { font-weight: 400; color: var(--text-dim); transition: color .2s; }

/* Der Reiter selbst: 3 px blau→rot, genau auf der Haarlinie —
   dasselbe Lichtband, das an jeder Abschnittsoberkante quer über
   die Seite zieht, nur auf ein Wort verkürzt. Es fährt aus, statt
   zu erscheinen: die Laufrichtung ist dieselbe wie dort. */
.rfilter-b::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-lift) 0%, var(--red) 100%);
  box-shadow: 0 0 10px rgba(11, 82, 196, 0.38);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.rfilter-b.is-an { color: var(--tinte); }
.rfilter-b.is-an b { color: var(--blue-text); }
.rfilter-b.is-an::after { transform: scaleX(1); }

.rfilter-b:hover { color: var(--tinte); }
.rfilter-b:hover b { color: var(--text-mute); }
/* Beim Anfahren nur eine graue Andeutung — sonst sähe es aus, als
   wären zwei Gewerke gewählt. */
.rfilter-b:not(.is-an):hover::after {
  background: var(--grey-line-2);
  box-shadow: none;
  transform: scaleX(1);
}
.rfilter-b:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 4px; }

/* Schmal: die Zeile bricht in zwei. Die Reiter behalten ihre
   Kante, die Überschrift rückt darüber. */
@media (max-width: 860px) {
  .rfilter .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   DER LEUCHTTISCH

   Links das Register, rechts eine mitlaufende Sicht. Die Sicht
   zeigt IMMER ein Bild — man muss nichts anfahren, nichts
   antippen. Wer scrollt, blättert damit durch die Aufnahmen; wer
   eine Zeile ansteuert, springt hin.

   Das ist der Unterschied zum vorherigen Entwurf: dort erschien
   das Bild nur unter dem Zeiger und war deshalb die meiste Zeit
   gar nicht da.
   ============================================================ */
/* Kein eigenes Polster mehr: .section aus base.css gibt den
   Rhythmus der ganzen Website vor (54/114 px). Die Referenzseite
   sass vorher mit 43/77 enger als jede andere. */
.rlt { position: relative; }
/* Der frühere .sec-head-Block ist entfallen: „Unsere Arbeit" steht
   jetzt als .rfilter-titel in der Registerzeile. */
.rlt-raster {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* --- Kopfzeile des Registers --- */
.rvz-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding-bottom: 12px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
  border-bottom: 1px solid var(--grey-line-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --- Gruppenzeile je Gewerk --- */
.rvz-gruppe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(26px, 3.6vh, 44px) 0 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.rvz-gruppe:first-of-type { margin-top: 0; }
.rvz-gruppe::before {
  /* Blau, nicht rot: der Strich gliedert, er zeigt keinen Zustand
     an. DESIGN.md §2 — „Rot ist ausschliesslich Akzent:
     Interaktion, Hervorhebung, Signal." Rot bleibt deshalb der
     angesteuerten Zeile vorbehalten. */
  content: ""; width: 22px; height: 2px; flex: none; background: var(--blue);
}
.rvz-gruppe span { color: var(--text-dim); }
.rvz-gruppe::after { content: ""; flex: 1; height: 1px; background: var(--grey-line); }

/* --- Eine Zeile --- */
.rvz-liste { list-style: none; margin: 0; padding: 0; }

.rvz-zeile {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  padding-block: clamp(6px, 0.8vh, 11px);
  border-bottom: 1px solid var(--grey-line);
  color: inherit;
  cursor: pointer;
}
.rvz-nr {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.8vw, 11px);
  letter-spacing: 0.1em;
  color: var(--text-dim);
  transition: color .2s;
}

/* Der Daumen: jedes Projekt zeigt seine Aufnahme schon in der
   Zeile. Klein, aber da — man sieht auf einen Blick, zu welchem
   Eintrag es ein Bild gibt und zu welchem nicht. */
.rvz-daum {
  display: block;
  width: 58px; height: 42px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--grey-line-2);
  background: #fff;
  transition: border-color .2s;
}
.rvz-daum img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.03);
  transition: filter .3s;
}
.rvz-daum--leer {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
}
.rvz-daum--leer i {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 7px;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dim);
}

/* Der Name in zwei Abzügen übereinander: der zweite steht eine
   Zeile tiefer und rollt beim Ansteuern nach oben ins Bild. */
.rvz-name { position: relative; display: block; overflow: hidden; min-width: 0; }
.rvz-name span {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: 0.006em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  transition: color .22s, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.rvz-name span + span {
  position: absolute; top: 100%; left: 0; width: 100%;
  color: var(--red-text);
}
.rvz-gewerk {
  font-family: var(--f-mono);
  font-size: clamp(8px, 0.7vw, 10px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color .2s;
}

/* Angesteuert. Das :not(.is-an) ist nicht Kosmetik: ohne die
   Einschränkung greift diese Regel mit ihrer höheren Spezifität
   auch auf die angesteuerte Zeile durch und dimmt genau die, die
   hervortreten soll. */
.rlt.is-aktiv .rvz-zeile:not(.is-an) .rvz-name span { color: var(--text-mute); }
.rlt.is-aktiv .rvz-zeile:not(.is-an) .rvz-daum img { filter: saturate(0.3) contrast(1) opacity(0.75); }
.rvz-zeile.is-an .rvz-name span:first-child,
.rvz-zeile.is-an .rvz-name span + span { transform: translateY(-100%); }
.rvz-zeile.is-an .rvz-nr,
.rvz-zeile.is-an .rvz-gewerk { color: var(--red-text); }
.rvz-zeile.is-an { border-bottom-color: var(--red); }
.rvz-zeile.is-an .rvz-daum { border-color: var(--red); }
.rvz-zeile.is-an .rvz-daum img { filter: saturate(1) contrast(1); }

/* Ausgefiltert */
.rvz-zeile[hidden], .rvz-gruppe[hidden] { display: none; }

/* ============================================================
   DIE SICHT — die Aufnahme steht dauerhaft
   ============================================================ */
/* Ohne JavaScript gibt es weder eine Sicht (sie wäre eine leere
   weisse Fläche) noch einen Filter (ein Knopf, der nichts tut).
   Übrig bleibt die Liste mit ihren Abzügen — vollständig lesbar. */
html:not(.js) .rlt-sicht,
html:not(.js) .rfilter { display: none; }
html:not(.js) .rlt-raster { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .rvz-daum { width: 96px; height: 70px; }

.rlt-sicht {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 74px);
}
.rlt-halter { position: relative; }

/* Die Aufziehfläche. Immer gleich groß, damit beim Wechsel nichts
   springt — die Aufnahme sitzt darin in ihrer ECHTEN Größe und
   wird nie hochgerechnet. Die größte misst 420 × 379. */
.rlt-mappe {
  position: relative;
  aspect-ratio: 460 / 404;
  max-height: 58vh;
  margin-left: auto;
  width: 100%;
  max-width: 460px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--grey-line-2);
  box-shadow: 0 18px 48px rgba(10, 14, 24, 0.13);
  overflow: hidden;
  /* Kapselt die Differenz-Mischung des Titels. Ohne isolation
     mischt er sich mit allem, was unter ihm auf der Seite liegt;
     ausserhalb der weissen Fläche würde weisse Schrift auf
     durchsichtigem Grund wieder weiss — also unsichtbar. */
  isolation: isolate;
}
.rlt-walze { position: absolute; inset: 14px; overflow: hidden; }
/* Oben angeschlagen, nicht mittig: dann beginnt jede Aufnahme an
   derselben Kante, und der Titel am Fuss liegt bei hohen Bildern
   WIRKLICH darüber — dort zeigt die Differenz-Mischung, was sie
   kann. Mittig zentriert blieb unter jedem Querformat ein leerer
   Streifen, in dem der Titel nur schwebte. */
.rlt-bild {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.rlt-bild img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }

/* Der Name liegt GROSS über der Aufnahme und blendet sich mit
   „difference" ein: weiss auf weissem Karton ergibt Schwarz, über
   einer dunklen Stelle des Fotos ergibt es Hell. Der Titel ist
   dadurch IMMER lesbar — egal, was unter ihm liegt, und ohne
   Kasten, Schleier oder Schlagschatten. Genau das kann eine feste
   Farbe nicht.

   Er wiederholt, was links im Register steht; die ganze Sicht ist
   deshalb aria-hidden. Für Hilfsmittel zählt der Text links. */
.rlt-titel {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 34px);
  line-height: 0.92;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

/* Das Schild darunter: Nummer und Gewerk in Maschinenschrift */
.rlt-schild {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 460px;
  margin: 16px 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--grey-line-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.rlt-schild .nr { color: var(--red-text); flex: none; }
.rlt-schild .gw { margin-left: auto; flex: none; color: var(--text-dim); }

/* ============================================================
   KLEINE SCHIRME — die Sicht entfällt, der Daumen wächst
   ============================================================ */
@media (max-width: 1000px) {
  .rlt-raster { grid-template-columns: minmax(0, 1fr); }
  .rlt-sicht { display: none; }
  .rvz-zeile { grid-template-columns: auto auto minmax(0, 1fr); }
  .rvz-gewerk { grid-column: 3; }
  .rvz-daum { width: 96px; height: 70px; }
  .rvz-name span { font-size: clamp(19px, 3.4vw, 32px); }
}
@media (max-width: 620px) {
  .rvz-zeile { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .rvz-daum { grid-row: 1 / span 2; width: 78px; height: 58px; }
  .rvz-nr { display: none; }
  /* Umbrechen UND kürzen zugleich ergab „Güterverkehrzent…" mit
     dem Rest in der nächsten Zeile. Wo umgebrochen wird, darf
     nicht mehr gekürzt werden. */
  .rvz-name span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* „Güterverkehrzentrum" ist als EIN Wort breiter als die
       Spalte und ragte hinaus. Die Seite ist auf de-DE gesetzt,
       also trennt der Browser korrekt; break-word fängt den Rest. */
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .rvz-name { overflow: visible; }
  .rvz-name span + span { display: none; }
  .rfilter .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rfilter .wrap::-webkit-scrollbar { display: none; }
  .rfilter-b { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .rvz-name span, .rlt-bild { transition-duration: 90ms; }
}