/* ============================================================
   cd_referenzen — Referenzausgabe
   ============================================================
   Sechs Darstellungen: Mosaik, Karten, Schieber, Einzelfall,
   Filterraster, Weitere Projekte. Gemeinsam ist ihnen die
   Kachel — sie unterscheiden sich in Spaltenzahl, Grundfarbe
   und darin, wie viel Text mitkommt.

   Alle Werte aus tokens.css. Kein Hex-Wert, kein !important.
   Im Raster steht ueberall minmax(0, 1fr): "1fr" allein meint
   minmax(auto, 1fr) und laesst ein langes Wort oder ein breites
   Bild die Spalte aufsprengen.
   ============================================================ */

/* ------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------ */
.cd-referenzen__titel {
  margin-block-end: var(--cd-a4);
}

.cd-referenzen__beitext {
  color: var(--cd-text-2);
  font-size: var(--cd-gr-gross);
}

.cd-referenzen__kopfknopf {
  display: flex;
  justify-content: flex-end;
}
.cd-referenzen__kopfknopf .cd-knopf {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cd-referenzen__kopfknopf { justify-content: flex-start; }

}

/* Steht in der Kopfzeile nur die versteckte Ueberschrift und sonst
   nichts, faellt ihr Platz weg. Die Ueberschrift bleibt im
   Quelltext — aber ein leerer Streifen mit 48 px Luft darueber
   waere sichtbarer Unsinn. */
.cd-referenzen__kopf:not(:has(.cd-referenzen__kopfknopf)):has(.cd-kopfzeile__text > .cd-nurlesen:only-child) {
  margin-block-end: 0;
}

/* ------------------------------------------------------------
   Bausteine, die mehrere Darstellungen teilen
   ------------------------------------------------------------ */

/* Der Bildkasten haelt sein Verhaeltnis, damit die Kacheln einer
   Reihe auf gleicher Hoehe brechen. aspect-ratio ohne inline-size
   erzeugt eine Mindestbreite und schiebt schmale Ansichten ueber
   den Rand — deshalb steht die Breite ausdruecklich dabei. */
/* position: relative fuer die Marke des Projekts, die darin liegt.
   Frueher stand das nur an der ruhigen Kachel — die Marke gibt es
   aber in beiden Fassungen. */
.cd-referenzen__bild {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cd-flaeche-3);
}

/* Links oben. Rechts oben sitzt die Fallstudien-Marke; ueber dem
   Schleier, damit beide beim Zeigen stehen bleiben. */
.cd-referenzen__projektmarke {
  position: absolute;
  inset-block-start: var(--cd-a3);
  inset-inline-start: var(--cd-a3);
  z-index: 1;
  margin-inline-start: 0;
}
.cd-referenzen__bild--flach { aspect-ratio: 16 / 9; }

.cd-referenzen__bild img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .5s var(--cd-kurve);
}

.cd-referenzen__text {
  display: flex;
  flex-direction: column;
  gap: var(--cd-a3);
  padding: var(--cd-a5) var(--cd-a5) var(--cd-a6);
  flex: 1;
}

.cd-referenzen__teaser {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  flex: 1;
}

.cd-referenzen__fusszeile {
  margin-block-start: var(--cd-a4);
  padding-block-start: var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a4);
}

.cd-referenzen__weiter {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-rot);
}

/* Weisse Plakette mit dem Kundenlogo. Sie wird ueber die untere
   Bildkante gezogen und liegt deshalb im Textblock, nicht im
   Bildkasten — sonst schnitte dessen overflow sie ab. */
/* DIE PLAKETTE MUSS POSITIONIERT SEIN.
   Sie wird mit einem negativen Abstand nach oben ueber das Bild
   gezogen. Solange beide unpositioniert waren, entschied die
   Reihenfolge im Dokument — der Text kommt nach dem Bild und lag
   damit oben.

   Seit der Bildkasten position:relative traegt (fuer die Marke des
   Projekts, die darin liegt), gewinnt ER: Ein positioniertes
   Element wird ueber unpositionierten Inhalt gemalt, ganz ohne
   z-index. Sichtbar war davon nur noch der unterste Streifen der
   Plakette.

   Das ist keine z-index-Frage, sondern die Malreihenfolge. Die
   Plakette braucht deshalb selbst eine Position. */
.cd-referenzen__plakette {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 132px;
  block-size: 52px;
  margin-block-start: -52px;
  margin-block-end: var(--cd-a4);
  padding: 10px 14px;
  background: var(--cd-weiss);
  box-shadow: var(--cd-schatten-karte);
}
.cd-referenzen__plakette img {
  max-block-size: 100%;
  inline-size: auto;
  object-fit: contain;
}

/* Der Grund der Plakette folgt dem Logo
   ------------------------------------------------------------
   Gesetzt von cd:logogrund in Partials/Referenzen/Marke.html —
   gemessen oder von Hand am Datensatz gewaehlt. Dieselben drei
   Fassungen wie an der Zitatkarte, damit ein Logo an beiden
   Stellen gleich behandelt wird.

   --weiss wiederholt nur die Vorgabe von oben und steht trotzdem
   da: Die Klasse steht im Quelltext, also gehoert sie ins
   Stylesheet. */
.cd-referenzen__plakette--weiss { background: var(--cd-weiss); }

/* Der Kartenschatten MUSS mitgeschrieben werden — box-shadow
   ersetzt, es ergaenzt nicht. Ohne ihn verloere die dunkle
   Fassung die Kante zur Kachel. Der Innenstrich haelt sie
   ausserdem dort ablesbar, wo die Kachel selbst dunkel ist
   (Darstellung „ueber"). Ein border statt dessen verboete sich:
   block-size ist mit 52px fest, und border-box naehme die zwei
   Pixel innen vom Logo ab. */
.cd-referenzen__plakette--dunkel {
  background: var(--cd-dunkel);
  box-shadow: var(--cd-schatten-karte), inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* Ohne Kasten steht das Logo frei auf der Kachel. Die Breite folgt
   dann dem Bild — 132px unsichtbarer Kasten um ein 90px-Logo
   schoeben es aus der Flucht. Die HOEHE bleibt: an ihr haengt der
   negative Aussenabstand, der die Plakette in die Bildkante zieht. */
.cd-referenzen__plakette--ohne {
  background: none;
  box-shadow: none;
  padding-inline: 0;
  inline-size: auto;
}
.cd-referenzen__plakette--wort {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--cd-dunkel);
}

/* ------------------------------------------------------------
   Karten und Schieber
   ------------------------------------------------------------ */
.cd-referenzen__karte {
  display: flex;
  flex-direction: column;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-2);
  color: var(--cd-tinte);
  transition: border-color var(--cd-zeit) ease,
              box-shadow var(--cd-zeit) ease,
              transform var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__karte--verweis:hover {
  color: var(--cd-tinte);
  border-color: var(--cd-rot);
  box-shadow: var(--cd-schatten-karte);
  transform: translateY(-4px);
}
.cd-referenzen__karte--verweis:hover .cd-referenzen__bild img {
  transform: scale(1.04);
}

.cd-referenzen__karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--cd-a6);
}

/* Die Spur ist ein echter Bildlaufbereich mit Rastpunkten — kein
   nachgebauter Schieber. Sie laeuft mit Finger, Rad und Tastatur
   und braucht dafuer kein Skript. Weil sie den Fokus annehmen
   kann, ist sie auch ohne Zeigergeraet erreichbar (WCAG 2.1.1). */
.cd-referenzen__spur {
  display: flex;
  gap: var(--cd-a6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--cd-a1) var(--cd-a2);

  /* Die Bildlaufleiste ist ausgeblendet, seit es Pfeile, Zaehler und
     Fortschrittsmarke gibt: zwei Anzeigen fuer dieselbe Stelle sind
     eine zu viel, und die graue Systemleiste stand quer im Bild.
     Geschoben werden kann weiter — mit Finger, Rollrad und Tastatur. */
  scrollbar-width: none;
}
.cd-referenzen__spur::-webkit-scrollbar { display: none; }

/* Die Spur nimmt den Fokus an und braucht deshalb eine sichtbare
   Fokusanzeige (WCAG 2.4.7). */
.cd-referenzen__spur:focus-visible {
  outline: 2px solid var(--cd-rot);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cd-referenzen__spur { scroll-behavior: auto; }
}

/* Die Folie ist nur die Huelle fuer den Rastpunkt — die Karte selbst
   soll die volle Hoehe fuellen, damit die Fusszeilen aller Karten auf
   einer Linie liegen. */
.cd-referenzen__folie {
  flex: 0 0 min(396px, 84%);
  scroll-snap-align: start;
  display: flex;
}

/* Wie viele Karten ganz zu sehen sind
   ------------------------------------------------------------
   Die feste Breite oben ergibt bei jeder Fensterbreite eine
   angeschnittene Karte. Als Hinweis „es geht weiter" ist das
   gewollt; gemessen bei 1440 px stand dort aber ein Satz, der
   mitten im Wort abbrach, und ein Verweis, von dem „CASE-STUDY
   LESE" uebrig blieb.

   Traegt das Element eine Zahl (Feld „Karten je Ansicht"), teilt
   sich die Spur exakt in so viele ganze Karten. Die Fugen werden
   dabei abgezogen — sonst waeren N Karten zusammen breiter als
   die Spur und die letzte rutschte doch wieder heraus.

   Die Vorgaben in var(…, N) greifen nur, wenn eine Breite gesetzt
   ist und die anderen nicht: Wer nur den Schreibtisch einstellt,
   bekommt am Handy eine ganze Karte statt eines Bruchteils. */
.cd-referenzen__spur--gezaehlt > .cd-referenzen__folie {
  --cd-ref-je: var(--cd-ref-je-m, 1);
  flex: 0 0 calc((100% - (var(--cd-ref-je) - 1) * var(--cd-a6)) / var(--cd-ref-je));
}
@media (min-width: 700px) {
  .cd-referenzen__spur--gezaehlt > .cd-referenzen__folie {
    --cd-ref-je: var(--cd-ref-je-t, var(--cd-ref-je-m, 2));
  }
}
@media (min-width: 1100px) {
  .cd-referenzen__spur--gezaehlt > .cd-referenzen__folie {
    --cd-ref-je: var(--cd-ref-je-d, var(--cd-ref-je-t, 3));
  }
}
.cd-referenzen__folie > .cd-referenzen__karte {
  flex: 1 1 auto;
}

/* ------------------------------------------------------------
   Bedienung des Schiebers
   ------------------------------------------------------------
   Aufbau und Bedienung wie im Zitate-Schieber — gleiche Knopfform,
   gleiche Fortschrittsmarke, gleicher Anhalte-Knopf. Zwei Schieber,
   die sich verschieden bedienen lassen, waeren zwei Bedienungen zum
   Lernen. Nur die Farben sind andere: diese Bahn steht auf hellem
   Grund.
   ------------------------------------------------------------ */
.cd-referenzen__kopfrechts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--cd-a4);
}
.cd-referenzen__bedienung {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.cd-referenzen__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  background: transparent;
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-knopf);
  color: var(--cd-tinte);
  cursor: pointer;
  transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease,
              color var(--cd-zeit) ease;
}
.cd-referenzen__pfeil:hover:not([disabled]) {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}

/* Am Rand wird der Pfeil abgeblendet UND abgeschaltet. Nur abblenden
   hinterliesse ein Ziel, das den Fokus bekommt und nichts tut. */
.cd-referenzen__pfeil[disabled] {
  opacity: .35;
  cursor: default;
}

.cd-referenzen__pfeilbild {
  inline-size: 17px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Anhalte-Knopf: zwei Balken, angehalten ein Dreieck. Er erscheint
   nur mit Selbstlauf — dann aber zwingend (WCAG 2.2.2). */
.cd-referenzen__haltezeichen {
  position: relative;
  inline-size: 12px;
  block-size: 13px;
}
.cd-referenzen__haltezeichen::before,
.cd-referenzen__haltezeichen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 4px;
  background: currentColor;
}
.cd-referenzen__haltezeichen::before { inset-inline-start: 0; }
.cd-referenzen__haltezeichen::after { inset-inline-end: 0; }
.cd-referenzen__halt[aria-pressed="true"] .cd-referenzen__haltezeichen::before {
  inline-size: 0;
  inset-block: 0;
  border-block: 6.5px solid transparent;
  border-inline-start: 11px solid currentColor;
}
.cd-referenzen__halt[aria-pressed="true"] .cd-referenzen__haltezeichen::after { display: none; }

.cd-referenzen__fortschritt {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-start: var(--cd-a3);
}

/* Beide Bloecke tragen `hidden` im Markup und werden erst vom
   Skript freigegeben. Das `display: none` fuer [hidden] kommt aus
   dem Browser-Stylesheet und verliert gegen die zwei
   `display: flex` darueber — ohne diese Zeile stuenden Pfeile und
   Linie auch bei einer einzigen Kachel da. Aufgefallen ist es in
   der Zitate-Bahn; hier steht dieselbe Falle, nur bisher ohne
   Gelegenheit sie zu zeigen. */
.cd-referenzen__bedienung[hidden],
.cd-referenzen__fortschritt[hidden] { display: none; }
.cd-referenzen__linie {
  flex: 1 1 auto;
  position: relative;
  block-size: 2px;
  overflow: hidden;
  background: var(--cd-linie-2);
}

/* Die Marke WANDERT, sie waechst nicht: sie zeigt die Stelle in der
   Reihe, nicht den gesehenen Anteil. */
.cd-referenzen__balken {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 25%;
  background: var(--cd-rot);
  transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__zaehler {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  color: var(--cd-text-3);
}

/* ------------------------------------------------------------
   Mosaik
   ------------------------------------------------------------
   Zwoelf Spalten, die erste Kachel nimmt acht davon und zwei
   Reihen. Die Fugen entstehen aus dem durchscheinenden Grund,
   nicht aus Raendern — so bleibt die Flaeche geschlossen.
   ------------------------------------------------------------ */
.cd-referenzen__mosaik {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  background: var(--cd-linie);
  border: 1px solid var(--cd-linie);
}

.cd-referenzen__stein {
  position: relative;
  grid-column: span 4;
  min-block-size: 279px;
  display: block;
  overflow: hidden;
  background: var(--cd-dunkel);
  color: var(--cd-weiss);
  transition: box-shadow var(--cd-zeit) ease;
}
.cd-referenzen__stein--gross {
  grid-column: span 8;
  grid-row: span 2;
  min-block-size: 560px;
}
a.cd-referenzen__stein:hover {
  color: var(--cd-weiss);
  box-shadow: inset 0 0 0 3px var(--cd-rot);
}

.cd-referenzen__steinbild {
  position: absolute;
  inset: 0;
}
.cd-referenzen__steinbild img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Der Verlauf traegt den Text. Ohne ihn steht weisse Schrift auf
   einem beliebig hellen Bild — 1.4.3 ist dann Zufall. */
.cd-referenzen__steinschleier {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 72%;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--cd-tinte) 0%, transparent) 0%,
              color-mix(in srgb, var(--cd-tinte) 62%, transparent) 42%,
              color-mix(in srgb, var(--cd-tinte) 94%, transparent) 100%);
}

.cd-referenzen__steintext {
  position: relative;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--cd-a3);
  padding: var(--cd-a6) var(--cd-a6) var(--cd-a7);
}

.cd-referenzen__marke {
  align-self: flex-start;
  padding: 6px 11px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cd-referenzen__steintitel {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-h3);
  line-height: var(--cd-zeile-kopf);
  letter-spacing: -.028em;
  color: var(--cd-weiss);
}
.cd-referenzen__stein--gross .cd-referenzen__steintitel {
  font-size: var(--cd-gr-h2);
}
.cd-referenzen__stein .cd-nummer { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Filterraster
   ------------------------------------------------------------ */
/* Das fieldset bleibt ein Block: Ein <legend> nehmen Browser aus
   dem Fluss ihres fieldset heraus — als Flexkind laege es quer im
   Layout. Die Wahl liegt deshalb in einer eigenen Zeile darunter. */
.cd-referenzen__filter {
  margin: 0 0 var(--cd-a6);
  padding: var(--cd-a5) var(--cd-a6);
  border: 0;
  background: var(--cd-flaeche-2);
}
.cd-referenzen__filterlegende {
  padding: 0;
  margin-block-end: var(--cd-a4);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-referenzen__filterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cd-a3) var(--cd-a6);
}

/* Die Zahl neben der Rubrik. Sie traegt aria-hidden — vorgelesen
   wird die Trefferzahl nach der Wahl, nicht sechsmal vorher. */
.cd-referenzen__filterzahl {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  color: var(--cd-text-3);
}
.cd-referenzen__filterzahl:empty { display: none; }
.cd-referenzen__filterknopf:has(.cd-referenzen__filterwahl:checked) .cd-referenzen__filterzahl {
  color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Eingeklappte Filterleiste
   ------------------------------------------------------------
   details und summary statt Knopf mit aria-expanded: Auf- und
   Zuklappen macht der Browser, also auch ohne Skript. Ein Filter
   hinter einer Tuer, die nur ein Skript oeffnet, waere eine
   Sackgasse.
   ------------------------------------------------------------ */
/* Der Aufklapper steht mittig wie im Entwurf. Das details selbst
   ist ein Block; zentriert wird deshalb sein Inhalt, und das
   summary bleibt inline. */
.cd-referenzen__klappe {
  margin-block-end: var(--cd-a6);
  text-align: center;
}
.cd-referenzen__klappe .cd-referenzen__filter { text-align: start; }

.cd-referenzen__klappknopf {
  display: inline-block;
  /* Die Listenmarke des summary muss weg — einmal ueber list-style
     und einmal ueber das alte WebKit-Pseudoelement fuer Safari. */
  list-style: none;
  padding: 11px var(--cd-a5);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-knopf);
  background: var(--cd-weiss);
  cursor: pointer;
  font-size: var(--cd-gr-klein);
  color: var(--cd-tinte);
  transition: border-color var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-referenzen__klappknopf::-webkit-details-marker { display: none; }

/* Das Flexlayout haengt am inneren Span und nicht am summary:
   aeltere Engines verlieren die Aufklapp-Mechanik, wenn man dem
   summary selbst display:flex gibt. */
.cd-referenzen__klappinnen {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a3);
}
.cd-referenzen__klappknopf:hover { border-color: var(--cd-rot); color: var(--cd-rot); }
.cd-referenzen__klappknopf:focus-visible {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
}

/* Zwei Striche, die sich beim Aufklappen zum Minus legen — dasselbe
   Zeichen wie im Akkordeon, damit dieselbe Geste dasselbe Bild
   ergibt. */
.cd-referenzen__klappzeichen {
  position: relative;
  inline-size: 12px;
  block-size: 12px;
}
.cd-referenzen__klappzeichen::before,
.cd-referenzen__klappzeichen::after {
  content: "";
  position: absolute;
  inset-block-start: 5px;
  inset-inline: 0;
  block-size: 2px;
  background: var(--cd-rot);
  transition: transform var(--cd-klapp, var(--cd-zeit)) var(--cd-kurve);
}
.cd-referenzen__klappzeichen::after { transform: rotate(90deg); }
.cd-referenzen__klappe[open] .cd-referenzen__klappzeichen::after { transform: rotate(0deg); }

.cd-referenzen__klappe .cd-referenzen__filter { margin-block-start: var(--cd-a4); }

/* ------------------------------------------------------------
   Nachladen
   ------------------------------------------------------------ */
/* Ohne diese Zeile bleibt eine verborgene Kachel sichtbar: die
   Kachel setzt display auf flex, und das schlaegt das
   hidden-Attribut. */
.cd-referenzen__kachel[hidden] { display: none; }

/* Verbergen nur dort, wo Skripte laufen — sonst gaebe es keinen
   Knopf, der sie wieder hervorholt. Die Marke selbst raeumt das
   Skript beim Start weg und uebernimmt mit hidden. */
@media (scripting: enabled) {
  .cd-referenzen__kachel--spaeter { display: none; }
}

/* Der Knopf steht deutlich abgerueckt unter dem Raster. Er gehoert
   nicht mehr zur letzten Kachelreihe, sondern ist eine eigene
   Handlung — bei zu wenig Abstand liest er sich wie die Fussnote
   der Kachel darueber. */
.cd-referenzen__mehrzeile {
  display: flex;
  justify-content: center;
  margin-block-start: calc(var(--cd-a7) + var(--cd-a5));
}

/* Der Abstand faellt nur weg, wenn in der Zeile GAR NICHTS steht.
   Vorher stand hier :has(> [hidden]) — das traf schon zu, sobald
   EIN Kind verborgen war. Seit der Hinweis "Alle Projekte werden
   angezeigt" als zweites Kind danebensteht und beim Laden verborgen
   ist, war der Abstand damit immer weg. */
.cd-referenzen__mehrzeile:not(:has(> :not([hidden]))) { margin-block-start: 0; }

/* GEFUELLT UND IN DER HAUSFARBE, nicht als Umriss.

   Der weisse Umrissknopf stand zwischen weissen Kacheln auf
   hellem Grund und las sich wie eine weitere, leere Kachel. Er
   ist an dieser Stelle aber die einzige Handlung — und eine
   Liste, die sich fortsetzen laesst, soll das auch aussehen.

   Der Text nennt jetzt die Zahl der noch fehlenden Projekte
   (das Skript setzt ihn). Damit beantwortet der Knopf die
   Frage, die den Klick ausloest: lohnt sich das noch?
   ------------------------------------------------------------ */
.cd-referenzen__mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a3);
  padding: 15px var(--cd-a7, 40px);
  border: 1px solid var(--cd-rot);
  border-radius: var(--cd-r-knopf);
  background: var(--cd-rot);
  cursor: pointer;
  font-size: var(--cd-gr-klein);
  font-weight: 600;
  color: var(--cd-weiss);
  transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
/* Beim Zeigen dunkler statt heller: Ein hellerer Knopf verliert
   gegen den weissen Grund an Kontrast, und 4.5:1 muss auch im
   Hoverzustand stehen. */
.cd-referenzen__mehr:hover {
  background: var(--cd-rot-tief);
  border-color: var(--cd-rot-tief);
}
.cd-referenzen__mehr:focus-visible {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
}
.cd-referenzen__mehr[hidden] { display: none; }

/* Ein Pfeil nach unten aus zwei Strichen — kein Schriftzeichen,
   damit er nicht im zugaenglichen Namen des Knopfes landet. */
.cd-referenzen__mehrpfeil {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Das Ziel des Fokus nach dem Nachladen. Es bekommt tabindex="-1"
   und braucht deshalb einen sichtbaren Ring — sonst weiss niemand
   wohin er gesprungen ist. */
.cd-referenzen__kachel:focus-visible {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
}
/* Ohne den Versatz schiebt die feste Kopfleiste sich beim Sprung
   ueber die gerade fokussierte Kachel (WCAG 2.4.11). */
.cd-referenzen__kachel { scroll-margin-block-start: calc(var(--cd-kopf-gesamt) + 16px); }

/* Der Satz, der an die Stelle des Knopfes tritt, wenn alles zu
   sehen ist. */
/* Der Hinweis steht IN derselben Zeile wie der Knopf und tritt an
   seine Stelle — der Abstand kommt deshalb von der Zeile und nicht
   noch einmal von hier. */
.cd-referenzen__alle {
  text-align: center;
  margin-block-start: 0;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-referenzen__alle[hidden] { display: none; }

/* Auswahl als Radioknopf: Damit gilt die Tastaturbedienung des
   Browsers (Pfeiltasten innerhalb der Gruppe) und der Zustand
   wird angesagt. Der Knopf selbst ist nur fuer Vorleseprogramme
   sichtbar, die Beschriftung traegt das Bild. */
.cd-referenzen__filterknopf {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--cd-a2);
  padding-block-end: 7px;
  border-block-end: 3px solid transparent;
  cursor: pointer;
  font-size: var(--cd-gr-text);
  color: var(--cd-text-2);
  transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-referenzen__filterknopf:hover { color: var(--cd-tinte); }

.cd-referenzen__filterknopf:has(.cd-referenzen__filterwahl:checked) {
  border-block-end-color: var(--cd-rot);
  color: var(--cd-tinte);
  font-weight: 600;
}

/* Der Fokusring gehoert sichtbar an die Beschriftung — der
   Knopf selbst ist weggeblendet (WCAG 2.4.7). */
.cd-referenzen__filterknopf:has(.cd-referenzen__filterwahl:focus-visible) {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
}

/* auto-FILL und nicht auto-FIT.

   Die beiden unterscheiden sich nur, wenn Spuren leer bleiben:
   auto-fit laesst sie in sich zusammenfallen, und die uebrigen
   Kacheln ziehen sich ueber die ganze Breite. Beim Filterraster
   ist genau das der Regelfall — eine Kategorie mit einem einzigen
   Projekt sprang von 384 auf 1200 Pixel, gemessen an der
   Kategorie WordPress. Dieselbe Kachel war je nach Filter dreimal
   so breit, mit dreimal so grossem Bild.

   auto-fill haelt die Spuren offen: Die einzelne Kachel bleibt
   384 Pixel breit und steht links, wo sie auch ungefiltert stuende.

   NUR HIER. Die anderen Raster dieser Datei (karten, weitere,
   galerie) haben eine von der Redaktion gesetzte Kachelzahl, und
   zwei von ihnen benutzen die Fuge als sichtbare Naht — eine
   offene Spur waere dort ein grauer Block.
   ------------------------------------------------------------ */
.cd-referenzen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--cd-a5);
}

.cd-referenzen__kachel {
  display: flex;
  flex-direction: column;
  background: var(--cd-flaeche-2);
  transition: background var(--cd-zeit) ease;
}
.cd-referenzen__kachel:hover { background: var(--cd-flaeche-3); }
.cd-referenzen__kachel:hover .cd-referenzen__bild img { transform: scale(1.05); }

.cd-referenzen__kachelknopf {
  align-self: flex-start;
  margin-block-start: var(--cd-a4);
}

/* ------------------------------------------------------------
   Ruhige Kachel
   ------------------------------------------------------------
   Auf der Kachel stehen nur Zeichen Rubrik und Name. Dadurch sind
   alle Kacheln gleich hoch — vorher wuchs jede so weit wie ihr
   Beitext, und eine Reihe aus drei Kacheln stand auf drei Hoehen.

   Die Beschreibung liegt ueber dem Bild und kommt beim Zeigen. Sie
   ist NICHT vor Vorleseprogrammen versteckt: sie waere sonst genau
   fuer die weg, die am wenigsten mit der Maus darueberfahren.
   ------------------------------------------------------------ */
.cd-referenzen__kachel--ruhig {
  /* Bezugspunkt fuer den aufgespannten Verweis weiter unten. */
  position: relative;
}

.cd-referenzen__kachel--ruhig .cd-referenzen__bild { position: relative; }

.cd-referenzen__schleier {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--cd-a2);
  padding: var(--cd-a5);
  /* Von unten nach oben dunkler: oben bleibt das Bild erkennbar,
     unten traegt es den Text. Ein flaechiger Schleier verdeckte das
     Bild vollstaendig und der Wechsel waere ein Bildtausch. */
  background: linear-gradient(to top, rgba(13, 26, 33, .94), rgba(13, 26, 33, .72) 55%, rgba(13, 26, 33, .18));
  color: var(--cd-weiss);
  opacity: 0;
  transition: opacity var(--cd-zeit) var(--cd-kurve);
}

/* focus-within und nicht nur hover: mit der Tastatur gibt es kein
   Ueberfahren. Der Verweis liegt in derselben Kachel, also greift
   es, sobald er den Fokus bekommt. */
.cd-referenzen__kachel--ruhig:hover .cd-referenzen__schleier,
.cd-referenzen__kachel--ruhig:focus-within .cd-referenzen__schleier {
  opacity: 1;
}

.cd-referenzen__schleierMeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-auf-dunkel-2);
}

.cd-referenzen__schleierText {
  font-size: var(--cd-gr-klein);
  line-height: var(--cd-zeile-text);
  color: var(--cd-weiss);
}

/* Die Fallstudien-Marke sitzt auf dem Bild und nicht im Text: sie
   sagt etwas ueber das Ziel und nicht ueber das Projekt. Ueber dem
   Schleier, damit sie beim Zeigen stehen bleibt. */
.cd-referenzen__fallmarke {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 1;
  padding: 7px 12px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Knapper als die volle Fassung — hier stehen nur zwei Zeilen.
   Die Abstaende der beiden Bauteile werden dabei ausdruecklich
   zurueckgesetzt: Zeichen und Kicker bringen fuer die volle Fassung
   eigene Abstaende mit, und zusammen mit dem gap des Textblocks
   stuenden sie hier doppelt. */
.cd-referenzen__kachel--ruhig .cd-referenzen__text {
  gap: var(--cd-a2);
  padding: 22px var(--cd-a5) var(--cd-a5);
}
.cd-referenzen__kachel--ruhig .cd-referenzen__plakette,
.cd-referenzen__kachel--ruhig .cd-kicker {
  margin-block-end: 0;
}

/* Der Grundton des Entwurfs. Der Wechsel beim Zeigen faellt weg —
   der Schleier ueber dem Bild sagt bereits deutlich genug dass die
   Kachel anspricht. */
.cd-referenzen__kachel--ruhig { background: var(--cd-flaeche-3); }
.cd-referenzen__kachel--ruhig:hover { background: var(--cd-flaeche-3); }

/* Der Verweis liegt auf dem Namen und spannt sich ueber die ganze
   Kachel. Ein zweiter Verweis darf hier nicht dazukommen: zwei
   aufgespannte Flaechen lieferten sich einen Wettlauf, und im
   Tabulator staende dasselbe Ziel zweimal. */
.cd-referenzen__kachelziel { color: inherit; }
.cd-referenzen__kachelziel::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Unter der Fallstudien-Marke, damit deren Farbe sichtbar bleibt,
     aber ueber allem anderen der Kachel. */
  z-index: 0;
}
.cd-referenzen__kachel--ruhig:hover .cd-referenzen__kachelziel { color: var(--cd-rot); }
.cd-referenzen__kachelziel:focus-visible { outline: none; }
.cd-referenzen__kachel--ruhig:focus-within {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
}

/* Die Auswahl blendet aus, was nicht passt. Fehlt :has(), bleibt
   alles stehen — ein Filter darf nie mehr verbergen, als er
   verspricht.

   HIER LAG EIN FEHLER: geprueft wurde nur data-kategorie, in der
   Liste standen aber auch Werte aus data-system. "TYPO3" fand
   deshalb nie etwas und leerte das Raster.

   Jetzt wird gegen BEIDE Felder geprueft. Das geht, weil die beiden
   Wertevorraete ueberschneidungsfrei sind: typo3/wordpress/
   shopware/woocommerce/eigen gegen website/shop/portal/marketing.
   Eine Kachel faellt weg, wenn WEDER das eine noch das andere Feld
   passt — daher die zwei :not() hintereinander.

   Eine Regel je Wert, weil ein Stylesheet den gewaehlten Wert nicht
   in einen Selektor einsetzen kann. Wer eine Rubrik ergaenzt, muss
   hier eine Zeile ergaenzen; die Vorlage zeigt sie sonst an, ohne
   dass sie ohne Skript wirkt. */
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="typo3"]:checked)
  .cd-referenzen__kachel:not([data-system="typo3"]):not([data-kategorie="typo3"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="wordpress"]:checked)
  .cd-referenzen__kachel:not([data-system="wordpress"]):not([data-kategorie="wordpress"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="shopware"]:checked)
  .cd-referenzen__kachel:not([data-system="shopware"]):not([data-kategorie="shopware"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="woocommerce"]:checked)
  .cd-referenzen__kachel:not([data-system="woocommerce"]):not([data-kategorie="woocommerce"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="eigen"]:checked)
  .cd-referenzen__kachel:not([data-system="eigen"]):not([data-kategorie="eigen"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="website"]:checked)
  .cd-referenzen__kachel:not([data-system="website"]):not([data-kategorie="website"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="shop"]:checked)
  .cd-referenzen__kachel:not([data-system="shop"]):not([data-kategorie="shop"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="portal"]:checked)
  .cd-referenzen__kachel:not([data-system="portal"]):not([data-kategorie="portal"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="marketing"]:checked)
  .cd-referenzen__kachel:not([data-system="marketing"]):not([data-kategorie="marketing"]) {
  display: none;
}

/* ------------------------------------------------------------
   Weitere Projekte
   ------------------------------------------------------------ */
.cd-referenzen__weitere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 2px;
  background: var(--cd-linie-2);
  border: 1px solid var(--cd-linie-2);
}

.cd-referenzen__kurz {
  display: flex;
  flex-direction: column;
  background: var(--cd-weiss);
  color: var(--cd-tinte);
  transition: background var(--cd-zeit) ease;
}
.cd-referenzen__kurz--verweis:hover {
  background: var(--cd-flaeche-1);
  color: var(--cd-tinte);
}
.cd-referenzen__kurz--verweis:hover .cd-referenzen__bild img { transform: scale(1.06); }

.cd-referenzen__kurztitel {
  font-size: var(--cd-gr-h4);
}

/* ------------------------------------------------------------
   Einzelfall
   ------------------------------------------------------------ */
.cd-referenzen__fall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--cd-linie-2);
}

.cd-referenzen__fallbild {
  min-block-size: 460px;
  overflow: hidden;
  background: var(--cd-dunkel);
}
.cd-referenzen__fallbild img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.cd-referenzen__falltext {
  display: flex;
  flex-direction: column;
  gap: var(--cd-a5);
  padding: var(--cd-a7) var(--cd-a7) var(--cd-a7);
}

.cd-referenzen__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-3);
  max-inline-size: none;
}
.cd-referenzen__art { color: var(--cd-rot); }

.cd-referenzen__falltitel { font-size: var(--cd-gr-h2); }
.cd-referenzen__fliesstext { color: var(--cd-text-2); }

.cd-referenzen__schlagworte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-referenzen__fallknopf { margin-block-start: auto; max-inline-size: none; }

/* ------------------------------------------------------------
   Schmale Ansichten
   ------------------------------------------------------------
   900 px ist der Punkt, an dem im ganzen Haus die Bahnen
   einspaltig werden. Das Mosaik faellt frueher: Vier von zwoelf
   Spalten sind darunter keine Kachel mehr, sondern ein Streifen.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cd-referenzen__stein,
  .cd-referenzen__stein--gross {
    grid-column: span 6;
    grid-row: auto;
    min-block-size: 320px;
  }
}

@media (max-width: 900px) {
  .cd-referenzen__fall { grid-template-columns: minmax(0, 1fr); }
  .cd-referenzen__fallbild { min-block-size: 260px; }
  .cd-referenzen__falltext { padding: var(--cd-a6) var(--cd-a5); }

  .cd-referenzen__stein,
  .cd-referenzen__stein--gross {
    grid-column: span 12;
    min-block-size: 280px;
  }
  .cd-referenzen__steintext { padding: var(--cd-a5); }

  .cd-referenzen__filter { padding: var(--cd-a4); }
  .cd-referenzen__filterzeile { gap: var(--cd-a3) var(--cd-a5); }
}

/* Bewegung nur, wo sie erwuenscht ist. Das Heranfahren der Bilder
   ist Schmuck und faellt als Erstes weg. */
@media (prefers-reduced-motion: reduce) {
  .cd-referenzen__bild img,
  .cd-referenzen__karte,
  .cd-referenzen__kachel,
  .cd-referenzen__kurz {
    transition: none;
  }
  .cd-referenzen__karte--verweis:hover { transform: none; }
  .cd-referenzen__karte--verweis:hover .cd-referenzen__bild img,
  .cd-referenzen__kachel:hover .cd-referenzen__bild img,
  .cd-referenzen__kurz--verweis:hover .cd-referenzen__bild img { transform: none; }
  .cd-referenzen__spur { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   Einspaltiger Kopf: alles an dieselbe Kante
   ------------------------------------------------------------
   Steht bewusst am DATEIENDE. Der erste Versuch lag oben bei der
   uebrigen Kopfregel und blieb wirkungslos: die Grundregel von
   .cd-referenzen__kopfrechts mit align-items: flex-end steht
   weiter unten in derselben Datei, und bei gleicher Staerke
   entscheidet die Reihenfolge — eine Media-Query aendert daran
   nichts.

   Sichtbar war das daran, dass "Alle Referenzen ansehen" am Handy
   rechts klebte, waehrend die Ueberschrift links begann.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .cd-referenzen__kopfrechts {
    align-items: flex-start;
    inline-size: 100%;
  }
  .cd-referenzen__bedienung { justify-content: flex-start; }
}


/* ============================================================
   Galerie — Aufbau, Bildformat, Spalten, Fuge, Plakette
   ============================================================
   Sechs Stellschrauben aus dem Reiter "Galerie" am Element. Sie
   gelten QUER zu den acht Darstellungen: dieselbe Darstellung
   steht dadurch schmal oder breit, dicht oder luftig, mit Text
   unter dem Bild oder darauf.

   WARUM DIESER BLOCK GANZ AM ENDE STEHT: Er ueberschreibt
   Grundregeln aus derselben Datei — die Fuge der Karten
   (Zeile 189), das Verhaeltnis des Bildkastens (Zeile 59), die
   Ausrichtung der Plakette (Zeile 139). Bei gleicher
   Spezifitaet gewinnt die spaetere Regel. Weiter oben eingefuegt
   waere jede dieser Zeilen wirkungslos — und zwar STILL: Das
   Stylesheet enthielte die Regel, die Seite zeigte sie nicht.
   Genau daran ist der Knopf der Referenzbahn schon einmal
   haengengeblieben.

   Kein !important. Alle Regeln hier tragen ein Datenattribut an
   der Bahn und liegen damit ohnehin ueber den Grundregeln.
   ============================================================ */

/* ------------------------------------------------------------
   1. Fuge zwischen den Kacheln   (cd_ref_fuge)
   ------------------------------------------------------------
   Eine Variable an der Bahn, sechs Raster lesen sie. Der
   Rueckfallwert je Raster ist der bisherige Abstand — ein
   leeres Feld aendert also nichts.
   ------------------------------------------------------------ */
.cd-referenzen[data-reffuge="eng"]  { --cd-ref-fuge: var(--cd-a3); }
.cd-referenzen[data-reffuge="weit"] { --cd-ref-fuge: var(--cd-a8); }
.cd-referenzen[data-reffuge="naht"] { --cd-ref-fuge: 0px; }

.cd-referenzen__karten  { gap: var(--cd-ref-fuge, var(--cd-a6)); }
.cd-referenzen__raster  { gap: var(--cd-ref-fuge, var(--cd-a5)); }
.cd-referenzen__weitere { gap: var(--cd-ref-fuge, var(--cd-a6)); }
.cd-referenzen__spur    { gap: var(--cd-ref-fuge, var(--cd-a6)); }
.cd-referenzen__mosaik,
.cd-referenzen__galerie { gap: var(--cd-ref-fuge, 2px); }

/* Ohne Fuge verliert das Mosaik seine Trennlinien — dann soll
   auch der durchscheinende Grund weg, sonst bleibt ein grauer
   Rahmen um eine geschlossene Flaeche. */
.cd-referenzen[data-reffuge="naht"] .cd-referenzen__mosaik,
.cd-referenzen[data-reffuge="naht"] .cd-referenzen__galerie {
  background: none;
  border: 0;
}

/* ------------------------------------------------------------
   2. Spaltenzahl   (cd_spalten_m / _t / cd_spalten)
   ------------------------------------------------------------
   Ohne Angabe bleibt es bei repeat(auto-fit, minmax(...)): Das
   Raster richtet sich nach der Kachelbreite und braucht keine
   Zahl. Erst data-spalten schaltet auf feste Spalten um.

   minmax(0, 1fr) und NICHT minmax(300px, 1fr): Bei vier Spalten
   zu je 300 px waere das Raster 1.200 px breit und liefe in
   einem 1.180-px-Behaelter ueber den Rand. "1fr" allein waere
   dasselbe wie minmax(auto, 1fr) und wuerde von einem breiten
   Bild aufgesprengt.

   Die Kette der Rueckfaelle geht von unten nach oben: Wer nur
   die Rechnerspalten setzt, bekommt am Tablet dieselbe Zahl —
   nicht wieder auto-fit.
   ------------------------------------------------------------ */
.cd-referenzen[data-spalten] .cd-referenzen__karten,
.cd-referenzen[data-spalten] .cd-referenzen__galerie,
.cd-referenzen[data-spalten] .cd-referenzen__weitere,
.cd-referenzen[data-spalten] .cd-referenzen__raster {
  grid-template-columns: repeat(var(--cd-sp-m, 1), minmax(0, 1fr));
}
@media (min-width: 601px) {
  .cd-referenzen[data-spalten] .cd-referenzen__karten,
  .cd-referenzen[data-spalten] .cd-referenzen__galerie,
  .cd-referenzen[data-spalten] .cd-referenzen__weitere,
  .cd-referenzen[data-spalten] .cd-referenzen__raster {
    grid-template-columns: repeat(var(--cd-sp-t, var(--cd-sp-d, 2)), minmax(0, 1fr));
  }
}
@media (min-width: 901px) {
  .cd-referenzen[data-spalten] .cd-referenzen__karten,
  .cd-referenzen[data-spalten] .cd-referenzen__galerie,
  .cd-referenzen[data-spalten] .cd-referenzen__weitere,
  .cd-referenzen[data-spalten] .cd-referenzen__raster {
    grid-template-columns: repeat(var(--cd-sp-d, var(--cd-sp-t, 3)), minmax(0, 1fr));
  }
}

/* Das Mosaik rechnet in zwoelfteln und nicht in Spalten: seine
   erste Kachel nimmt acht davon. Eine Spaltenzahl bedeutet hier
   also, wie viele KLEINE Kacheln nebeneinander stehen. */
@media (min-width: 901px) {
  .cd-referenzen[data-spalten] .cd-referenzen__mosaik > .cd-referenzen__stein {
    grid-column: span calc(12 / var(--cd-sp-d, 3));
  }
  .cd-referenzen[data-spalten] .cd-referenzen__mosaik > .cd-referenzen__stein--gross {
    grid-column: span calc(12 - 12 / var(--cd-sp-d, 3));
  }
}

/* ------------------------------------------------------------
   3. Bildformat   (cd_ref_format)
   ------------------------------------------------------------
   Das Verhaeltnis sitzt am KASTEN und nie am img: Am Bild waere
   es eine zweite Groessenangabe neben block-size:100% und die
   beiden widersprechen sich. Und aspect-ratio ohne inline-size
   erzeugt eine Mindestbreite — die steht am Kasten oben bereits.

   16:10 ist das Format der Bildschirmaufnahmen: Der ganze Satz
   *-desktop.png liegt in 1440 x 900 vor, also genau 16:10 und
   damit ganz ohne Beschnitt.
   ------------------------------------------------------------ */
.cd-referenzen[data-refformat="16-10"] .cd-referenzen__bild { aspect-ratio: 16 / 10; }
.cd-referenzen[data-refformat="16-9"]  .cd-referenzen__bild { aspect-ratio: 16 / 9; }
.cd-referenzen[data-refformat="3-2"]   .cd-referenzen__bild { aspect-ratio: 3 / 2; }
.cd-referenzen[data-refformat="1-1"]   .cd-referenzen__bild { aspect-ratio: 1 / 1; }

/* "ohne festes Format": Das Bild bestimmt die Hoehe. Dann muss
   auch block-size:100% weg — sonst rechnet es gegen einen
   Kasten ohne Hoehe und das Bild verschwindet. */
.cd-referenzen[data-refformat="frei"] .cd-referenzen__bild {
  aspect-ratio: auto;
  min-block-size: 0;
}
.cd-referenzen[data-refformat="frei"] .cd-referenzen__bild img {
  block-size: auto;
}

/* Die Steine von Mosaik und Galerie tragen keine Bildkaesten,
   sondern eine Mindesthoehe — ihr Bild liegt absolut darin. Das
   Format greift deshalb am Stein selbst. */
.cd-referenzen[data-refformat="16-10"] .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 16 / 10; min-block-size: 0; }
.cd-referenzen[data-refformat="16-9"]  .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 16 / 9;  min-block-size: 0; }
.cd-referenzen[data-refformat="3-2"]   .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 3 / 2;   min-block-size: 0; }
.cd-referenzen[data-refformat="1-1"]   .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 1 / 1;   min-block-size: 0; }

/* ------------------------------------------------------------
   4. Bildausschnitt   (cd_ref_schnitt)
   ------------------------------------------------------------
   "fuellend, oben" ist die Vorgabe und richtig fuer
   Bildschirmaufnahmen: Der Kopf einer Website sagt mehr als ihr
   Fuss. Fuer Fotos ist die Mitte richtig — dort liegt das Motiv.

   "vollstaendig" zeigt das ganze Bild und laesst Rand. Der Rand
   bekommt Weiss und nicht die Flaeche der Kachel: Eine
   Bildschirmaufnahme hat fast immer einen weissen Grund, und ein
   grauer Rahmen darum sieht aus wie ein Fehler.
   ------------------------------------------------------------ */
.cd-referenzen[data-refschnitt="mitte"] .cd-referenzen__bild img,
.cd-referenzen[data-refschnitt="mitte"] .cd-referenzen__steinbild img,
.cd-referenzen[data-refschnitt="mitte"] .cd-referenzen__fallbild img {
  object-position: center center;
}

.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__bild,
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__fallbild {
  background: var(--cd-weiss);
}
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__bild img,
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__steinbild img,
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__fallbild img {
  object-fit: contain;
  object-position: center center;
}

/* ------------------------------------------------------------
   5. Aufbau der Kachel   (cd_ref_kachel)
   ------------------------------------------------------------ */

/* --- knapp: nur Bild und Name ------------------------------ */
/* Verborgen und nicht weggelassen: Was hier faellt, ist im
   Datensatz gepflegt und steht auf der Detailseite weiterhin.
   Eine Kachel ist eine Ansicht, kein Bestand. */
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__teaser,
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__fusszeile,
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__kachelknopf,
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__zeilenteaser {
  display: none;
}

/* --- neben: Bild links, Text rechts ------------------------ */
/* Erst ab 601 px. Darunter waere die Bildspalte 130 px breit und
   das Bild darin nicht mehr zu erkennen — am Handy bleibt es
   deshalb beim Stapel. */
@media (min-width: 601px) {
  .cd-referenzen[data-refkachel="neben"] .cd-referenzen__karte,
  .cd-referenzen[data-refkachel="neben"] .cd-referenzen__kachel,
  .cd-referenzen[data-refkachel="neben"] .cd-referenzen__kurz {
    flex-direction: row;
    align-items: stretch;
  }
  /* Die Bildspalte gibt ihr Verhaeltnis auf und nimmt die Hoehe
     der Zeile: Zwei Groessenangaben an derselben Box — ein
     Verhaeltnis und eine gestreckte Hoehe — widersprechen sich,
     und der Browser entscheidet dann selbst welche gilt. */
  .cd-referenzen[data-refkachel="neben"] .cd-referenzen__bild {
    flex: 0 0 42%;
    aspect-ratio: auto;
    align-self: stretch;
    min-block-size: 100%;
  }
  .cd-referenzen[data-refkachel="neben"] .cd-referenzen__text {
    flex: 1 1 auto;
    min-inline-size: 0;
  }
  /* Die Plakette haengt an der unteren Bildkante. Steht das Bild
     links, gibt es diese Kante nicht mehr — dann rueckt sie an
     den oberen Rand des Textes. */
  .cd-referenzen[data-refkachel="neben"] .cd-referenzen__plakette {
    position: static;
    margin: 0 0 var(--cd-a3);
  }
}

/* --- ueber: Text auf dem Bild ------------------------------ */
/* Der Text liegt auf einem Verlauf und nicht auf einer Flaeche:
   Der Verlauf beginnt am unteren Rand voll deckend und laeuft
   nach oben aus. Voll deckend deshalb, weil der Kontrast des
   Textes gegen die dunkle Farbe messbar sein muss und nicht
   gegen das Bild dahinter (WCAG 1.4.3).

   92 Prozent und nicht 100: die letzten Prozent nehmen dem Bild
   nichts und geben dem Rand die Tiefe. */
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__karte,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kachel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kurz {
  position: relative;
  overflow: hidden;
  background: var(--cd-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__text {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--cd-a7) var(--cd-a5) var(--cd-a5);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--cd-dunkel) 92%, transparent) 0%,
    color-mix(in srgb, var(--cd-dunkel) 78%, transparent) 55%,
    transparent 100%
  );
  color: var(--cd-weiss);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kartentitel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kacheltitel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kurztitel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kacheltitel a {
  color: var(--cd-weiss);
}
/* Rot traegt auf Anthrazit nicht — dafuer gibt es die zweite
   Fassung. Dieselbe Regel wie in jeder dunklen Bahn im Haus. */
.cd-referenzen[data-refkachel="ueber"] .cd-kicker,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__weiter {
  color: var(--cd-rot-auf-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__teaser,
.cd-referenzen[data-refkachel="ueber"] .cd-nummer {
  color: var(--cd-text-auf-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__fusszeile {
  border-block-start-color: var(--cd-linie-auf-dunkel);
}
/* Die Plakette liegt sonst ueber der unteren Bildkante — hier
   liegt dort der Text. Sie wandert nach oben. */
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__plakette {
  position: absolute;
  inset-block-start: var(--cd-a4);
  inset-inline-start: var(--cd-a4);
  margin: 0;
}
/* Der Bildkasten fuellt die ganze Kachel, sonst stuende der Text
   unter dem Bild statt darauf. */
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__bild {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__karte,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kachel {
  min-block-size: 340px;
}

/* ------------------------------------------------------------
   6. Plakette   (cd_ref_plakette)
   ------------------------------------------------------------
   HIER LAG EIN FEHLER, DEN NIEMAND ALS FEHLER SAH:
   Die Plakette stand im Textfluss und trug margin-block-end.
   Eine Kachel MIT Logo begann ihren Text damit 16 px tiefer als
   eine ohne — gemessen auf der Startseite: Kicker bei y=630
   gegen y=602. In einer Reihe aus sechs Kacheln standen die
   Ueberschriften auf zwei verschiedenen Linien, je nachdem ob
   ein Kunde ein Logo geliefert hat.

   Absolut positioniert nimmt sie keine Hoehe mehr ein: Alle
   Kacheln beginnen gleich, mit Logo wie ohne.

   z-index bleibt: Der Bildkasten ist positioniert (fuer die
   Projektmarke darin) und wuerde sonst ueber die Plakette
   gemalt — das ist Malreihenfolge, keine z-index-Frage.
   ------------------------------------------------------------ */
.cd-referenzen__text { position: relative; }

.cd-referenzen__plakette {
  position: absolute;
  inset-block-start: -52px;
  inset-inline-start: var(--cd-a5);
  margin: 0;
}

/* "Platz freihalten": Die Plakette steht wieder im Fluss — und
   wo keine ist, haelt ein leerer Kasten denselben Platz. Damit
   ueberdeckt sie nie einen Bildinhalt, und gleich hoch bleiben
   die Kacheln trotzdem.

   :has am Textblock und nicht an der Kachel: Nur der Textblock
   weiss, ob eine Plakette in IHM liegt. An der Kachel traefe die
   Abfrage auch die Projektmarke im Bildkasten. */
.cd-referenzen[data-refplakette="platz"] .cd-referenzen__plakette {
  position: static;
  margin-block-start: -52px;
  margin-block-end: var(--cd-a4);
}
.cd-referenzen[data-refplakette="platz"] .cd-referenzen__text:not(:has(> .cd-referenzen__plakette))::before {
  content: "";
  display: block;
  block-size: 52px;
  margin-block-start: -52px;
  margin-block-end: var(--cd-a4);
}

.cd-referenzen[data-refplakette="ohne"] .cd-referenzen__plakette { display: none; }

/* ------------------------------------------------------------
   7. Galerie — gleich grosse Bilder mit Text darauf
   ------------------------------------------------------------
   Baut auf demselben Stein wie das Mosaik, nur ohne den grossen
   ersten. Deshalb steht hier auch nur, was sich unterscheidet:
   das Raster und die Hoehe.
   ------------------------------------------------------------ */
.cd-referenzen__galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  background: var(--cd-linie);
  border: 1px solid var(--cd-linie);
}
/* span 4 kommt vom Mosaikstein und meint dort ein Zwoelftelraster.
   Hier zaehlt das Raster in ganzen Spalten — span 4 waere vier
   davon. */
.cd-referenzen__galerie > .cd-referenzen__stein {
  grid-column: auto;
  aspect-ratio: 4 / 3;
  min-block-size: 0;
}

/* ------------------------------------------------------------
   8. Liste — Zeilen mit Bild links
   ------------------------------------------------------------
   Rund ein Drittel der Hoehe einer Kachelreihe. Die Darstellung
   fuer Uebersichten mit vielen Projekten — und die einzige, die
   am Handy ohne jedes Schieben auskommt.
   ------------------------------------------------------------ */
.cd-referenzen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cd-ref-fuge, 0px);
}
.cd-referenzen__zeilenpunkt { border-block-start: 1px solid var(--cd-linie); }
.cd-referenzen__zeilenpunkt:last-child { border-block-end: 1px solid var(--cd-linie); }

.cd-referenzen__zeile {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cd-a5);
  padding-block: var(--cd-a4);
  padding-inline: var(--cd-a3);
  color: inherit;
  text-decoration: none;
  transition: background var(--cd-zeit) var(--cd-kurve);
}
a.cd-referenzen__zeile--verweis:hover { background: var(--cd-flaeche-2); }
a.cd-referenzen__zeile--verweis:hover .cd-referenzen__zeilentitel { color: var(--cd-rot); }
a.cd-referenzen__zeile--verweis:focus-visible {
  outline: 3px solid var(--cd-rot);
  outline-offset: -3px;
}

.cd-referenzen__zeilenbild {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--cd-linie);
}
.cd-referenzen__zeilentext {
  display: flex;
  flex-direction: column;
  gap: var(--cd-a2);
}
.cd-referenzen__zeilentitel {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h4);
  line-height: var(--cd-zeile-kopf);
  margin: 0;
  transition: color var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__zeilenteaser {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  margin: 0;
}
.cd-referenzen__zeilenmeta { margin: 0; }
.cd-referenzen__zeilenpfeil {
  color: var(--cd-rot);
  font-size: var(--cd-gr-h4);
  padding-inline: var(--cd-a3);
}

/* Am Handy schrumpft die Bildspalte auf ein Vorschaubild. Der
   Pfeil bleibt: Er ist die einzige sichtbare Zusage, dass die
   Zeile irgendwohin fuehrt. */
@media (max-width: 700px) {
  .cd-referenzen__zeile {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--cd-a4);
  }
  .cd-referenzen__zeilenpfeil { padding-inline: 0; }
}
@media (max-width: 420px) {
  .cd-referenzen__zeilenteaser { display: none; }
}

/* ------------------------------------------------------------
   Hinweis „KI-generiert" in der Referenzuebersicht
   ------------------------------------------------------------
   Das Bauteil selbst steht in komponenten.css. Hier steht nur,
   WO es in dieser Bahn sitzt — die Antwort faellt je Fassung
   anders aus, weil die Kaesten anders gebaut sind.
   ------------------------------------------------------------ */

/* Der Stein traegt seinen Text unten und ueber die volle Flaeche.
   Die Marke geht deshalb nach OBEN RECHTS: unten links stuende sie
   im Titel, oben links sitzt bei den Kacheln die Projektmarke. */
.cd-referenzen__stein .cd-kihinweis--marke {
  inset-block: var(--cd-a3) auto;
  inset-inline: auto var(--cd-a3);
}

/* Das grosse Einzelbild hatte bisher keinen Bezugsrahmen — ohne den
   suchte sich die Marke den naechsten positionierten Vorfahren und
   landete irgendwo in der Bahn. */
.cd-referenzen__fallbild {
  position: relative;
}

/* Die Marke sitzt in den Kacheln unten RECHTS und nicht wie sonst
   unten links: unten links ragt die Kundenplakette in das Bild
   hinein, und oben links steht die Projektmarke.

   Vorgeschichte, damit es niemand zurueckdreht: Der Hinweis stand
   zuerst als Zeile UNTER dem Bild. Sie war unsichtbar, weil die
   Plakette positioniert ist und deshalb nach ihr gemalt wird — das
   Element hatte volle Hoehe und richtige Farbe und lag trotzdem
   unter einem weissen Kasten. Auf dem Bild stellt sich die Frage
   nicht mehr. */
.cd-referenzen__bild > .cd-kihinweis--marke,
.cd-referenzen__zeilenbild > .cd-kihinweis--marke {
  inset-inline: auto var(--cd-a3);
  inset-block-end: var(--cd-a3);
}

/* ------------------------------------------------------------
   Die Plakette im Bildblock
   ------------------------------------------------------------
   Wo Bild und Text NEBENEINANDER liegen (Zeile, Einzelfall),
   sitzt die Plakette IM Bildblock statt im Textblock: Der
   negative Aussenabstand, der sie sonst in die untere Bildkante
   zieht, schob sie dort nach oben aus der Karte heraus — gemessen
   am 02.09.2026: 89 px links neben dem Bild und 733 px darueber,
   also unsichtbar.

   DIESER BLOCK STEHT AM ENDE DER DATEI, und das ist kein Zufall:
   Weiter oben setzt `.cd-referenzen__plakette` fuer das
   Filterraster `inset-block-start: -52px`. Beide Regeln wiegen
   gleich viel (eine Klasse) — es gewinnt also die spaetere. Stand
   dieser Block vorn, waeren `top` UND `bottom` gesetzt, und bei
   absoluter Lage gewinnt dann `top`: die Plakette sass 52 px
   ueber dem Bild und wurde vom overflow des Bildkastens
   abgeschnitten. Genau so ist es zuerst passiert.
   ------------------------------------------------------------ */
.cd-referenzen__bild,
.cd-referenzen__fallbild { position: relative; }

.cd-referenzen__plakette--imBild {
  position: absolute;
  inset-block-start: auto;
  /* Nur halb ueberstehen: Der Bildkasten schneidet ab
     (overflow: hidden), und eine Plakette, die zur Haelfte
     abgeschnitten ist, sieht aus wie ein Fehler. Sie sitzt
     deshalb VOLLSTAENDIG im Bild, buendig ueber der Unterkante. */
  inset-block-end: var(--cd-a4);
  inset-inline-start: var(--cd-a4);
  margin-block-start: 0;
  z-index: 2;
}

/* Das Logo IM Bildblock ist KEIN Projektbild.
   ------------------------------------------------------------
   `.cd-referenzen__bild img` (Zeile 78) und
   `.cd-referenzen__fallbild img` (Zeile 1010) setzen
   inline-size: 100%, block-size: 100% und object-fit: cover —
   gedacht fuer das Projektbild, das seinen Kasten fuellen soll.
   Sie wiegen genau so viel wie `.cd-referenzen__plakette img`
   (eine Klasse und ein Element), stehen aber SPAETER und gewinnen
   deshalb.

   Seit die Plakette im Bildblock sitzt, traf das auch das Logo:
   gemessen auf /leistungen/webseite-erstellen-lassen 104 x 32 px
   bei 210 x 105 px Eigenmass — statt 3,25 : 1 zu strecken schnitt
   `cover` oben und unten ab. Das sah nach einem kaputten Logo aus
   und war eine Regel, die zwei Zeilen zu weit reichte.

   Zwei Klassen und ein Element (0,2,1) schlagen beide. Der
   Uebergang faellt mit heraus: Eine Schwenkbewegung auf der Kachel
   vergroessert das Projektbild — das Logo soll dabei stehen
   bleiben. */
.cd-referenzen__plakette--imBild img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  transform: none;
  transition: none;
}


/* ============================================================
   9. Am Handy als Liste   (Feld „Auf dem Handy", leer = Vorgabe)
   ============================================================
   Bis 699 px steht jedes Projekt als ZEILE: Vorschaubild links,
   daneben Rubrik, Name und Weiterweg. Die Schiebespur gibt es nur
   noch auf ausdruecklichen Wunsch („als Schieber"); „als Kacheln"
   stapelt die Kacheln in voller Groesse.

   Anlass, gemessen am 10.09.2026 bei 390 px: Auf /referenzen stand
   von sechs Projekten immer genau EINES im Bild — eine Kachel von
   301 x 561 px, die anderen fuenf hinter einer Wischgeste. Auf
   /leistungen/typo3-website dasselbe mit dem Schieber, 553 px fuer
   ein Projekt.

   ES BLEIBT DASSELBE MARKUP. Rubrikfilter, Nachladen und der Fokus
   nach dem Nachladen greifen an .cd-referenzen__kachel an. Eine
   zweite, eigene Liste im Quelltext muesste jede dieser Funktionen
   ein zweites Mal bekommen und liefe beim ersten Umbau
   auseinander. Also wechselt allein die Darstellung — wie bei der
   Schiebespur auch.

   Erfasst sind alle Darstellungen mit mehreren Projekten:
   Filterraster, Karten, Schieber, Galerie, Mosaik und Weitere
   Projekte. „Liste" ist es ohnehin (Abschnitt 8 und der Nachtrag
   unten), der Einzelfall zeigt nur ein Projekt.

   699 px und nicht die Bedienart: Es geht um Platz — dieselbe
   Schwelle wie die Schiebespur in cd_mobilspur.css.

   WARUM JEDE REGEL MIT .cd-bahn.cd-referenzen[data-refmobil]
   BEGINNT: Der Block muss drei Gruppen ueberstimmen — die
   Galerie-Stellschrauben (data-spalten, data-refkachel,
   data-refformat; bis (0,4,0)), die mitte-Fassung der Schiebespur
   (0,3,0) aus cd_mobilspur.css, die NACH dieser Datei laedt, und
   die Grundregeln der vier Kachelarten. Mit dem Teil dahinter sind
   es (0,4,0) — genug gegen die Spur unabhaengig von der
   Ladereihenfolge, und bei Gleichstand innerhalb dieser Datei
   gewinnt der Block, weil er am Ende steht. Die Stellschrauben
   bleiben am Rechner wirksam; die Zeile hat ihr eigenes Mass.
   ============================================================ */
@media (max-width: 699px) {

  /* Die Farben der Zeile als eigene Groessen: Auf dunklem und
     rotem Grund werden nur diese vier umgestellt (weiter unten),
     statt jede Regel ein zweites Mal zu schreiben. */
  .cd-referenzen[data-refmobil="liste"] {
    /* 104 und nicht die 96 der Darstellung „Liste": Unter dem Bild
       steht „KI-generiert", und das braucht bei 11,5 px rund 88 px
       Breite. */
    --cd-ref-zeilenbild: 104px;
    --cd-ref-zl-titel: var(--cd-tinte);
    --cd-ref-zl-linie: var(--cd-linie);
    --cd-ref-zl-akzent: var(--cd-rot);
    --cd-ref-zl-leise: var(--cd-text-3);
    --cd-ref-zl-text: var(--cd-text-2);
    --cd-ref-zl-ring: var(--cd-rot);
  }
  /* Der Titel steht AUSDRUECKLICH weiss und erbt nicht. Erste
     Fassung: color:inherit — gemessen stand der Name auf dunklem
     Grund dann in #A9BEC8, dem Fliesstextgrau der Bahn, weil die
     Zeilenregel (0,4,0) die Hausregel .cd-auf-dunkel h3 (0,1,1,
     komponenten.css:531) ueberstimmte. */
  .cd-referenzen.cd-auf-dunkel[data-refmobil="liste"] {
    --cd-ref-zl-titel: var(--cd-weiss);
    --cd-ref-zl-linie: var(--cd-linie-auf-dunkel);
    --cd-ref-zl-akzent: var(--cd-rot-auf-dunkel);
    --cd-ref-zl-leise: var(--cd-text-auf-dunkel-2);
    --cd-ref-zl-text: var(--cd-text-auf-dunkel);
    --cd-ref-zl-ring: var(--cd-weiss);
  }
  /* Rot auf Rot traegt nichts — auf dem roten Grund wird der
     Akzent weiss. */
  .cd-referenzen.cd-auf-rot[data-refmobil="liste"] {
    --cd-ref-zl-titel: var(--cd-weiss);
    --cd-ref-zl-linie: var(--cd-linie-auf-dunkel);
    --cd-ref-zl-akzent: var(--cd-weiss);
    --cd-ref-zl-leise: var(--cd-weiss);
    --cd-ref-zl-text: var(--cd-weiss);
    --cd-ref-zl-ring: var(--cd-weiss);
  }

  /* --- Die Behaelter werden zur Liste ----------------------- */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__raster,
    .cd-referenzen__karten,
    .cd-referenzen__spur,
    .cd-referenzen__galerie,
    .cd-referenzen__mosaik,
    .cd-referenzen__weitere
  ) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    scroll-padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    background: none;
    border: 0;
    /* Die Linie unter der letzten Zeile haengt am Behaelter und
       nicht an :last-child. Im Filterraster ist die letzte Kachel
       im Quelltext oft gar nicht zu sehen (Rubrik, Nachladen) —
       ihre Schlusslinie verschwaende mit ihr. */
    border-block-end: 1px solid var(--cd-ref-zl-linie);
  }

  /* Die Folie des Schiebers ist nur noch eine Huelle. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__folie {
    display: block;
    scroll-snap-align: none;
  }

  /* --- Eine Zeile ------------------------------------------- */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kachel,
    .cd-referenzen__karte,
    .cd-referenzen__kurz,
    .cd-referenzen__stein
  ) {
    /* Bezugsrahmen fuer den Verweis, der sich ueber die ganze Zeile
       spannt (Abschnitt „Weiterweg"). */
    position: relative;
    display: grid;
    grid-template-columns: var(--cd-ref-zeilenbild) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--cd-a4);
    row-gap: 0;
    grid-column: auto;
    grid-row: auto;
    min-block-size: 0;
    aspect-ratio: auto;
    padding: var(--cd-a4) 0;
    overflow: visible;
    background: none;
    border: 0;
    border-block-start: 1px solid var(--cd-ref-zl-linie);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    color: inherit;
  }

  /* [hidden] UND DIE NACHLADEMARKE MUESSEN HIER NOCH EINMAL STEHEN.
     Die Zeilenregel darueber setzt display:grid mit (0,4,0) — mehr
     als .cd-referenzen__kachel[hidden] (0,2,0) und mehr als die
     Marke --spaeter (0,1,0). Ohne diese Zeilen stuende jede
     nachzuladende Kachel sofort da, und „Weitere laden" haette
     nichts mehr zu laden. Der Rubrikfilter traegt (0,7,0) und
     gewinnt von selbst. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachel[hidden] {
    display: none;
  }
  @media (scripting: enabled) {
    .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachel--spaeter {
      display: none;
    }
  }

  /* --- Das Vorschaubild ------------------------------------- */
  /* Der Kasten schneidet NICHT mehr ab, das Bild tut es selbst:
     Unter dem Bild steht „KI-generiert" als Zeile, und die laege
     sonst ausserhalb eines Kastens mit overflow:hidden. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kachel,
    .cd-referenzen__karte,
    .cd-referenzen__kurz
  ) > .cd-referenzen__bild {
    position: relative;
    inset: auto;
    inline-size: 100%;
    min-block-size: 0;
    aspect-ratio: auto;
    flex: none;
    overflow: visible;
    background: none;
  }

  /* 3:2, weil die Vorschaubilder genau so vorliegen (760 x 507) —
     die Zeile schneidet also nichts ab.

     Nur das DIREKTE Kind: Im Bildkasten der Darstellung „Liste"
     liegt auch das Logo als img, und ein Verhaeltnis mit Rahmen
     darauf zerschnitte es. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kachel,
    .cd-referenzen__karte,
    .cd-referenzen__kurz
  ) > .cd-referenzen__bild > img,
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__steinbild > img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--cd-ref-zl-linie);
    background: var(--cd-flaeche-3);
    /* Die Schwenkbewegung beim Zeigen vergroessert das Bild ueber
       seinen Rand — ohne abschneidenden Kasten ragte sie in die
       Nachbarzeile. */
    transform: none;
    transition: none;
  }

  /* Ohne Bild bleibt der Platz als Flaeche stehen. Sonst begaenne
     der Name dieser einen Zeile weiter links als in allen anderen. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kachel,
    .cd-referenzen__karte,
    .cd-referenzen__kurz
  ) > .cd-referenzen__bild:not(:has(> img)) {
    aspect-ratio: 3 / 2;
    background: var(--cd-flaeche-3);
  }

  /* Der Stein traegt sein Bild absolut und fuellend — auf der Zeile
     steht es im Fluss, in der ersten Spalte. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__steinbild {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__steintext {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* „KI-generiert" als ZEILE unter dem Bild statt als Marke darauf.
     Die Marke waere auf 104 px so breit wie das Bild selbst und
     deckte ein Viertel davon zu. Dieselbe Abwaegung, die das
     Partial Bauteile/KiHinweis zwischen „marke" und
     „unterschrift" trifft — hier entscheidet sie die Breite.

     Die Schriftgroesse bleibt bei 11,5 px (komponenten.css begruendet
     sie: der Hinweis ist die Angabe selbst und muss gelesen werden).
     Nur die Sperrung geht von .08 auf .04em zurueck, damit er in die
     Spalte passt. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__bild,
    .cd-referenzen__stein
  ) > .cd-kihinweis--marke {
    position: static;
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-block-start: var(--cd-a1);
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    letter-spacing: .04em;
    color: var(--cd-ref-zl-leise);
  }

  /* Was auf 104 px nicht mehr lesbar waere, faellt weg.

     Die LOGO-PLAKETTE: Der Name steht als Text daneben — die
     Titel der Referenzen SIND die Kundennamen. Ein Logo von 30 px
     Hoehe neben einem Bild von 69 px waere eine dritte Bildflaeche
     in einer Zeile, die ruhig sein soll. Sie traegt aria-hidden;
     es geht dabei also nichts verloren, was vorgelesen wuerde.

     Die Marken auf dem Bild (Projekt, Fallstudie) und der Verlauf
     des Steins gehoeren zu einem grossen Bild. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__plakette,
    .cd-referenzen__projektmarke,
    .cd-referenzen__fallmarke,
    .cd-referenzen__steinschleier
  ) {
    display: none;
  }

  /* Die Beschreibung der ruhigen Kachel liegt am Rechner verborgen
     ueber dem Bild und erscheint beim Zeigen. Auf 104 px haette sie
     keinen Platz — sie bleibt aber fuer Vorleseprogramme lesbar, so
     wie am Rechner auch. Deshalb abgeschnitten und nicht
     display:none. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__schleier {
    inset: auto;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* --- Der Textblock ---------------------------------------- */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__text,
    .cd-referenzen__steintext
  ) {
    /* NICHT positioniert: Sonst waere der Textblock der
       Bezugsrahmen fuer den aufgespannten Verweis, und nur die
       rechte Haelfte der Zeile naehme den Finger an. */
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cd-a1);
    flex: none;
    block-size: auto;
    min-inline-size: 0;
    padding: 0;
    background: none;
    color: inherit;
  }

  /* Der Platzhalter der Plakette („Platz freihalten") faellt mit
     der Plakette weg. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__text::before {
    content: none;
  }

  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__text,
    .cd-referenzen__steintext
  ) > .cd-kicker {
    margin: 0;
  }

  /* Der Stein traegt die Rubrik als rotes Schild. Auf der Zeile
     wird daraus dieselbe Rubrikzeile wie in jeder anderen Kachel. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__marke {
    align-self: auto;
    padding: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--cd-ref-zl-akzent);
  }

  /* Ein Mass fuer alle vier Titel — dasselbe wie in der
     Darstellung „Liste". Die Farbe kommt aus --cd-ref-zl-titel
     (oben): Tinte auf hellem, Weiss auf dunklem und rotem Grund.
     Der Steintitel braucht sie ohnehin — er ist am Rechner weiss
     auf dem Bild und staende sonst weiss auf Weiss. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kacheltitel,
    .cd-referenzen__kartentitel,
    .cd-referenzen__kurztitel,
    .cd-referenzen__steintitel
  ) {
    margin: 0;
    font-family: var(--cd-schrift-display);
    font-size: var(--cd-gr-h4);
    font-weight: 600;
    line-height: var(--cd-zeile-kopf);
    letter-spacing: -.018em;
    color: var(--cd-ref-zl-titel);
    transition: color var(--cd-zeit) var(--cd-kurve);
  }
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelziel {
    color: inherit;
  }

  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__teaser {
    flex: none;
    margin: 0;
    font-size: var(--cd-gr-klein);
    color: var(--cd-ref-zl-text);
  }

  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__text,
    .cd-referenzen__steintext
  ) .cd-nummer {
    color: var(--cd-ref-zl-leise);
  }

  /* Die Fusszeile der Karte (System · Jahr und „Case-Study lesen")
     verliert Linie und Abstand. Umbrechen ist erlaubt: Beides
     zusammen braucht rund 245 px, die Textspalte hat bei 390 px
     238. Ohne Umbruch liefe der Verweis aus der Zeile. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__fusszeile {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 var(--cd-a3);
    margin: 0;
    padding: 0;
    border: 0;
  }
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__weiter {
    color: var(--cd-ref-zl-akzent);
  }

  /* --- Der Weiterweg ---------------------------------------- */
  /* Der rote Knopf der vollen Kachel wird zur Verweiszeile — dieselbe
     Gestalt wie „Case-Study lesen" auf der Karte. Ein gefuellter
     Knopf je Zeile waere bei sechs Zeilen sechsmal die lauteste
     Stelle der Seite.

     Sein ::after spannt sich ueber die ganze Zeile: Getippt wird
     auf Bild, Name oder Verweis, nicht auf elf Pixel Versalien.
     Der Verweis selbst bleibt EINER — ein zweiter um die Zeile
     boete im Tabulator dasselbe Ziel ein zweites Mal an. Dasselbe
     Muster wie der Name in der ruhigen Kachel. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelknopf {
    align-self: flex-start;
    gap: var(--cd-a2);
    min-block-size: 0;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--cd-schrift-mono);
    font-size: var(--cd-gr-mikro);
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--cd-ref-zl-akzent);
    transform: none;
  }
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelknopf:hover {
    background: none;
    color: var(--cd-ref-zl-akzent);
    transform: none;
  }
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelknopf::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Der Fokusring gehoert an die Zeile und nicht an die elf Pixel
     hohe Verweiszeile — das Ziel ist die ganze Flaeche. Nach innen
     versetzt, weil die Zeilen ohne Fuge aneinanderstossen: Nach
     aussen laege der Ring halb auf der Nachbarzeile. */
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kachelknopf,
    .cd-referenzen__kachelziel
  ):focus-visible {
    outline: none;
  }
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachel:has(:is(.cd-referenzen__kachelknopf, .cd-referenzen__kachelziel):focus-visible),
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    a.cd-referenzen__karte,
    a.cd-referenzen__kurz,
    a.cd-referenzen__stein
  ):focus-visible {
    outline: 3px solid var(--cd-ref-zl-ring);
    outline-offset: -3px;
  }
}

/* Beim Zeigen faerbt sich der Name — nur wo es ein Zeigen gibt.
   Am Finger bliebe die Farbe nach dem Tippen stehen. */
@media (max-width: 699px) and (hover: hover) {
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kachel:has(.cd-referenzen__kachelknopf, .cd-referenzen__kachelziel),
    a.cd-referenzen__karte,
    a.cd-referenzen__kurz,
    a.cd-referenzen__stein
  ):hover :is(
    .cd-referenzen__kacheltitel,
    .cd-referenzen__kartentitel,
    .cd-referenzen__kurztitel,
    .cd-referenzen__steintitel
  ) {
    color: var(--cd-ref-zl-akzent);
  }
}

/* Die Beschreibung braucht Platz, den das schmalste Handy nicht
   hat — dieselbe Grenze wie in der Darstellung „Liste". */
@media (max-width: 420px) {
  .cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__teaser {
    display: none;
  }
}

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
    .cd-referenzen__kacheltitel,
    .cd-referenzen__kartentitel,
    .cd-referenzen__kurztitel,
    .cd-referenzen__steintitel
  ) {
    transition: none;
  }
}

/* ------------------------------------------------------------
   „Als Kacheln untereinander" auch fuer den Schieber
   ------------------------------------------------------------
   Die Raster stapeln bei data-mobilspur="nie" von selbst
   (cd_mobilspur.css). Der Schieber ist kein Raster, sondern eine
   Spur mit fester Kartenbreite — ohne diese Regel bliebe er am
   Handy ein Schieber, obwohl am Element „als Kacheln" steht.
   ------------------------------------------------------------ */
@media (max-width: 699px) {
  .cd-bahn.cd-referenzen[data-mobilspur="nie"] .cd-referenzen__spur {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-ref-fuge, var(--cd-a5));
    overflow: visible;
    scroll-snap-type: none;
  }
  .cd-bahn.cd-referenzen[data-mobilspur="nie"] .cd-referenzen__folie {
    scroll-snap-align: none;
  }
}

/* ------------------------------------------------------------
   Nachtrag zur Darstellung „Liste": dasselbe Vorschaubild
   ------------------------------------------------------------
   Die Zeile aus Abschnitt 8 hatte am Handy 96 px Bildbreite — und
   darin lagen zwei Dinge, die fuer ein 200-px-Bild gebaut sind:
   die Logo-Plakette (132 x 52 px, abgeschnitten vom Bildkasten)
   und die Marke „KI-generiert" (rund 115 px). Beide ragten ueber
   ein Bild, das kleiner war als sie selbst.

   Jetzt dieselbe Loesung wie in Abschnitt 9, damit eine Liste am
   Handy gleich aussieht, egal aus welcher Darstellung sie kommt.
   Ohne data-refmobil: Die Darstellung „Liste" ist auf jeder Breite
   eine Liste, das Feld „Auf dem Handy" aendert an ihr nichts.

   .cd-bahn.cd-referenzen VORNEWEG, sonst verloere der Bildkasten:
   .cd-referenzen[data-refformat] .cd-referenzen__bild setzt ein
   Verhaeltnis mit (0,3,0). Stuende das am Kasten und 3:2 am Bild
   darin, ragte die Unterschrift aus einem zu kurzen Kasten in die
   naechste Zeile.
   ------------------------------------------------------------ */
@media (max-width: 699px) {
  .cd-referenzen__liste {
    --cd-ref-zeilenbild: 104px;
  }
  .cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeile {
    grid-template-columns: var(--cd-ref-zeilenbild) minmax(0, 1fr) auto;
  }
  .cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild {
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    background: none;
  }
  .cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild > img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--cd-linie);
    background: var(--cd-flaeche-3);
    transform: none;
  }
  .cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild > .cd-referenzen__plakette--imBild {
    display: none;
  }
  /* Der Kicker bringt 20 px Abstand nach unten mit (komponenten.css)
     — gedacht fuer ein Abschnittsschild ueber einer Schlagzeile. In
     der Zeile stand der Name dadurch abgesetzt von seiner eigenen
     Rubrik, und die Zeile war 153 statt rund 120 px hoch. */
  .cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilentext > .cd-kicker {
    margin: 0;
  }
  .cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild > .cd-kihinweis--marke {
    position: static;
    display: block;
    margin-block-start: var(--cd-a1);
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    letter-spacing: .04em;
    color: var(--cd-text-3);
  }
  .cd-bahn.cd-referenzen.cd-auf-dunkel .cd-referenzen__liste .cd-referenzen__zeilenbild > .cd-kihinweis--marke {
    color: var(--cd-text-auf-dunkel-2);
  }
}