/* ============================================================
   cd_referenzdetail — ein Projekt auf eigener Seite
   ============================================================
   ACHT FASSUNGEN, EIN MARKUP. Die Bausteine stehen in der Vorlage
   immer in derselben Reihenfolge; was hier steht, ordnet sie an.

   Aufbau dieser Datei:
     1. Bausteine — gilt fuer alle Fassungen
     2. Die acht Fassungen, jede in einem Block

   Die Seite traegt ihre Ueberschrift als h1: Der Projektname IST
   die Ueberschrift. Die Huellenseite unterdrueckt ihre eigene.
   ============================================================ */

/* ============================================================
   1. BAUSTEINE
   ============================================================ */

/* --- Buehne und Kopf ---------------------------------------- */
/* Der Kopf ist bei den meisten Fassungen ein gewoehnlicher Block.
   Nur die Buehnenfassungen legen ein Bild dahinter — dann braucht
   er einen Bezugspunkt. Er steht deshalb immer auf relative. */
.cd-referenzdetail__buehne {
  position: relative;
  display: block;
}

.cd-referenzdetail__kopf { position: relative; }

.cd-referenzdetail__rueckweg { margin-block-end: var(--cd-a6); }

.cd-referenzdetail__rueckwegLink {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a3);
  min-block-size: 24px;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-2);
  transition: color var(--cd-zeit) ease;
}
.cd-referenzdetail__rueckwegLink:hover { color: var(--cd-rot); }

/* Ein Pfeil nach links aus zwei Kanten — kein Schriftzeichen, damit
   er nicht im vorgelesenen Namen des Verweises landet. */
.cd-referenzdetail__rueckwegPfeil {
  inline-size: 8px;
  block-size: 8px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}

.cd-referenzdetail__kopftext { max-inline-size: 52rem; }
.cd-referenzdetail__titel { margin-block: var(--cd-a3) var(--cd-a5); }
.cd-referenzdetail__teaser {
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-2);
  max-inline-size: 44rem;
}

/* Der Sitz des Kunden. Eine Stufe leiser als der Anrisstext: Er ist
   eine Einordnung und nicht die Aussage der Seite. Der Ortsname
   selbst steht als <strong> und traegt die Textfarbe des Titels —
   sonst verschwindet gerade das Wort, dessentwegen der Satz da ist. */
.cd-referenzdetail__sitz {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  max-inline-size: 44rem;
}

.cd-referenzdetail__sitz strong {
  font-weight: 600;
  color: var(--cd-tinte);
}

/* Auf dunklem Grund gilt dasselbe Paar wie beim Anrisstext. Ohne
   diese Zeile stuende der Ortsname in der dunklen Buehne in der
   hellen Textfarbe und waere praktisch unlesbar. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__sitz { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__sitz strong { color: var(--cd-text-auf-dunkel); }

/* --- Eckwertband -------------------------------------------- */
/* Die Paare stehen in eigenen div: dt und dd wuerden als Flexkinder
   einzeln umbrechen und Bezeichnung und Wert lagen in verschiedenen
   Zeilen. */
/* Ein RASTER mit gleichen Spalten, keine Flexzeile.
   In der Flexzeile nahm jeder Wert seine natuerliche Breite:
   „TYPO3-Relaunch" ist dreimal so breit wie „2023", also standen
   die Bezeichnungen darueber in unregelmaessigen Abstaenden und
   rechts blieb eine grosse Luecke. Gleiche Spalten teilen die
   Breite auf, statt sie zu verbrauchen.

   auto-fit statt einer festen Zahl: Ein Projekt ohne Jahresangabe
   hat drei Werte statt vier und soll trotzdem die Zeile fuellen. */
.cd-referenzdetail__eckwerte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--cd-a5) 0;
}

/* Eine Haarlinie zwischen den Werten macht die Aufteilung sichtbar.
   Sie gehoert zum Bauteil und nicht zu einer Fassung — die
   Berichtsfassung hatte sie frueher als einzige, obwohl der Nutzen
   ueberall derselbe ist. */
.cd-referenzdetail__eckwert {
  padding-inline: var(--cd-a5);
  border-inline-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__eckwert:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.cd-referenzdetail__eckwert dt {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-3);
  margin-block-end: 4px;
}
.cd-referenzdetail__eckwert dd {
  margin: 0;
  font-size: var(--cd-gr-gross);
  font-weight: 500;
  color: var(--cd-tinte);
}

/* --- Bilder -------------------------------------------------- */
.cd-referenzdetail__bild,
.cd-referenzdetail__kopfbild,
.cd-referenzdetail__kapitelbild {
  margin: 0;
  background: var(--cd-flaeche-3);
}
.cd-referenzdetail__bild img,
.cd-referenzdetail__kopfbild img,
.cd-referenzdetail__kapitelbild img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}
.cd-referenzdetail__bild { margin-block-end: var(--cd-a8); }

/* --- Spalten ------------------------------------------------- */
/* minmax(0, …) statt blossem fr: 1fr meint minmax(auto, 1fr) und
   waechst mit einem langen Wort ueber die Spalte hinaus. */
.cd-referenzdetail__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--cd-a8);
  align-items: start;
}

.cd-referenzdetail__text {
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-2);
}
.cd-referenzdetail__fliess p + p { margin-block-start: var(--cd-a4); }

/* --- Kapitel ------------------------------------------------- */
/* Eine geordnete Liste ohne Zahlen: Die Reihenfolge ist Teil der
   Aussage (Ausgangslage, Umsetzung, Ergebnis), die Ziffern selbst
   braucht nur die Zeitleisten-Fassung. */
.cd-referenzdetail__kapitel {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cd-kapitel;
}
.cd-referenzdetail__kapitelpunkt {
  counter-increment: cd-kapitel;
  margin-block-end: var(--cd-a8);
}
.cd-referenzdetail__kapitelpunkt:last-child { margin-block-end: 0; }
.cd-referenzdetail__kapiteltitel {
  margin-block: var(--cd-a3) var(--cd-a4);
  color: var(--cd-tinte);
}
.cd-referenzdetail__kapitelfliess p + p { margin-block-start: var(--cd-a4); }

/* Aufzaehlungen im Kapiteltext.
   Der Grundstil des Hauses nimmt Listen die Marke — das ist fuer
   Navigationen und Kachelreihen richtig, fuer eine Leistungsliste
   im Fliesstext aber falsch: Ohne Marke stehen dort untereinander
   Zeilen, die wie abgerissene Absaetze aussehen.

   Ein roter Strich statt eines Punktes: Er nimmt die Sprache der
   Kicker auf und traegt dieselbe Farbe wie die Merkmale im
   uebrigen Haus. */
.cd-referenzdetail__kapitelfliess ul {
  list-style: none;
  padding: 0;
  margin-block-start: var(--cd-a4);
  display: grid;
  gap: var(--cd-a3);
}
.cd-referenzdetail__kapitelfliess ul li {
  position: relative;
  padding-inline-start: var(--cd-a6);
}
.cd-referenzdetail__kapitelfliess ul li::before {
  content: "";
  position: absolute;
  inset-block-start: .72em;
  inset-inline-start: 0;
  inline-size: 14px;
  block-size: 2px;
  background: var(--cd-rot);
}

/* Nummerierte Listen behalten ihre Ziffern — dort ist die
   Reihenfolge die Aussage. */
.cd-referenzdetail__kapitelfliess ol {
  padding-inline-start: var(--cd-a6);
  margin-block-start: var(--cd-a4);
  display: grid;
  gap: var(--cd-a3);
}
/* Der Kapiteltitel ist eine Zwischenueberschrift im Lesetext und
   keine Bahnueberschrift. Ungebremst kam er als h2 mit --cd-gr-h2
   daher und war damit so gross wie die Ueberschrift einer ganzen
   Bahn — im Fliesstext eine Rangstufe zu viel. 24 px ist das Mass,
   das cd_artikeltext fuer dieselbe Aufgabe fuehrt. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapiteltitel {
  font-size: var(--cd-gr-h3);
  line-height: 1.25;
  letter-spacing: -.018em;
}

/* Zeilenlaenge im Lesetext. Der Deckel aus basis.css rechnet in ch
   der GRUNDschrift und greift in dieser Spalte nicht: gemessen
   liefen die Absaetze bis 87 Zeichen, WCAG 1.4.8 nennt 80. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess p {
  max-inline-size: 40rem;
}

.cd-referenzdetail__kapitelbild { margin-block-start: var(--cd-a5); }

.cd-referenzdetail__schlagworte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
  margin-block-start: var(--cd-a7);
}

/* --- Nebenspalte --------------------------------------------- */
.cd-referenzdetail__seite {
  padding: var(--cd-a6);
  background: var(--cd-flaeche-2);
}

/* Das Logo steht auf weisser Flaeche — die meisten Kundenlogos sind
   fuer weissen Grund gezeichnet und verschwinden sonst. */
.cd-referenzdetail__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Die Plakette folgt dem Logo statt der Spalte.
     Vorher lief sie ueber die ganze Nebenspalte (372,9 px) und war
     je nach Zeichnung zu 40 bis 91 Prozent leer — PolyGate stand
     mit 31,8 px Tinte in einem 373 px breiten weissen Balken.
     Die HOEHE bleibt fest: an ihr haengt die Zeile, in der das
     Logo mit dem Kundennamen darunter zusammensteht. */
  inline-size: fit-content;
  block-size: 72px;
  padding: var(--cd-a3) var(--cd-a4);
  background: var(--cd-weiss);
  border-radius: var(--cd-r-feld);
  margin-block-end: var(--cd-a5);
}
.cd-referenzdetail__logo img {
  /* min() und nicht das eine oder das andere:
     100% allein liesse eine SVG ohne Eigenmasse im fit-content-
     Kasten zu 0 x 0 fallen (der Prozentwert bezieht sich dann auf
     eine Breite, die es noch gar nicht gibt). 15rem allein liess
     das Logo in der SCHMALEN Faktenbox unter 1024 px aus seinem
     104 px breiten Kasten laufen — gemessen 135 px Bild in 104 px
     Plakette. Beides zusammen deckt beide Faelle. */
  max-inline-size: min(15rem, 100%);
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
/* Vektoren duerfen die Hoehe ausschoepfen — sie werden dabei nicht
   unscharf. Rasterlogos bleiben bei ihrem Eigenmass: eine feste
   Hoehe wuerde das 119 x 34 px grosse Vahrenkamp-Logo auf das
   Doppelte ziehen. Zugleich ist das die Regel, ohne die eine SVG
   ohne Eigenmasse im fit-content-Kasten auf 0 x 0 faellt — siehe
   dieselbe Falle beim Logo unter dem Zitat. */
.cd-referenzdetail__logo img[src$=".svg"] { block-size: 100%; }

/* Der Kasten folgt dem Logo — gesetzt von cd:logogrund in der
   Vorlage. --weiss ist die Vorgabe von oben und steht trotzdem da,
   weil die Klasse im Quelltext auftaucht. Beim dunklen Kasten haelt
   ein Innenstrich die Kante zur getoenten Seitenspalte; ein border
   verboete sich, weil block-size mit 72px fest ist. */
.cd-referenzdetail__logo--weiss { background: var(--cd-weiss); }
.cd-referenzdetail__logo--dunkel {
  background: var(--cd-dunkel);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.cd-referenzdetail__logo--ohne {
  background: none;
  box-shadow: none;
  padding-inline: 0;
}

.cd-referenzdetail__kunde {
  font-weight: 600;
  color: var(--cd-tinte);
  margin-block-end: var(--cd-a5);
}

.cd-referenzdetail__daten { margin-block-end: var(--cd-a6); }
.cd-referenzdetail__datum {
  display: flex;
  justify-content: space-between;
  gap: var(--cd-a4);
  padding-block: var(--cd-a3);
  border-block-end: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__datum:last-child { border-block-end: 0; }
.cd-referenzdetail__datum dt {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
}
.cd-referenzdetail__datum dd {
  margin: 0;
  font-size: var(--cd-gr-klein);
  font-weight: 600;
  color: var(--cd-tinte);
  text-align: end;
}
.cd-referenzdetail__adresse { margin: 0; }

/* Der Umriss des Knopfes muss den Knopf zeigen
   ------------------------------------------------------------
   --cd-linie auf dem getoenten Grund der Nebenspalte ergibt
   gemessen 1,17 : 1 (#DDE4E8 auf #F2F5F7). Der Knopf war damit
   allein an seiner Beschriftung zu erkennen; auf dem Bildschirm
   schwebte "Website ansehen" frei in der Flaeche. WCAG 1.4.11
   verlangt 3 : 1 fuer das, was ein Bedienelement sichtbar macht.

   Bewusst NUR hier und nicht an .cd-knopf--linie: Auf weissem
   Grund steht derselbe Rahmen im ganzen Haus, das Nachziehen dort
   waere ein sichtbarer Eingriff in die Gestaltung aller Seiten.
   In der Nebenspalte ist der Grund getoent, der Rahmen also noch
   schwaecher — und daneben steht der rote Knopf, gegen den der
   umrissene sonst gar nicht als Knopf durchkommt. */
.cd-referenzdetail__seite .cd-knopf--linie {
  border-color: var(--cd-text-3);
}
.cd-referenzdetail__seite .cd-knopf--linie:hover,
.cd-referenzdetail__seite .cd-knopf--linie:focus-visible {
  border-color: var(--cd-dunkel);
}


/* ============================================================
   2. DIE ACHT FASSUNGEN
   ============================================================ */

/* --- standard ------------------------------------------------
   Kopf in der Inhaltsspalte, breites Bild, Text mit Nebenspalte.
   Das Eckwertband ist hier kein Band, sondern eine Zeile unter dem
   Kopf — abgesetzt durch eine Haarlinie. */
.cd-referenzdetail--standard .cd-referenzdetail__kopf,
.cd-referenzdetail--bericht .cd-referenzdetail__kopf,
.cd-referenzdetail--galerie .cd-referenzdetail__kopf,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kopf,
.cd-referenzdetail--wechsel .cd-referenzdetail__kopf {
  padding-block-end: var(--cd-a6);
}

.cd-referenzdetail--standard .cd-referenzdetail__band .cd-bahn__inhalt,
.cd-referenzdetail--wechsel .cd-referenzdetail__band .cd-bahn__inhalt {
  padding-block: var(--cd-a5) var(--cd-a7);
  border-block-start: 1px solid var(--cd-linie-2);
}

/* Die Nebenspalte bleibt beim Blaettern stehen, solange der Text
   laeuft. Der Abstand nach oben haelt die feste Kopfleiste fern
   (WCAG 2.4.11).

   DIE ABFRAGE GEHOERT HIERHER UND NICHT AN DIE STELLE, DIE SIE
   ZURUECKNIMMT. Vorher stand hier nur `position: sticky` und weiter
   unten in `@media (max-width: 1023px)` ein `.cd-referenzdetail__seite
   { position: static; }`. Diese Ruecknahme hat NIE gegriffen: Sie
   trug EINE Klasse, die Regel hier trug ZWEI. Spezifitaet schlaegt
   Medienabfrage — die Faktenbox klebte bis 320 px hinunter.

   Gemessen bei 390 px auf /referenzen/projekt/kmk-…: Die 550 px hohe
   Box hing 108 px unter der Oberkante fest und lief bis 1131 px in
   die Erzaehlung hinein. Sie ist deckend und `position: sticky`
   eroeffnet einen Stapelzusammenhang — der Text lief also UNTER ihr
   durch und war nicht lesbar. Auf einem 844 px hohen Schirm blieben
   fuer die Erzaehlung 186 px.

   Stehenbleiben ergibt nur neben einer laufenden Spalte Sinn. Die
   gibt es erst ab 1024 px, also steht die Regel auch erst dort.

   DIE SCHWELLE IST 1024 UND NICHT MEHR 1100. Gemessen an
   /referenzen/projekt/kmk-… : Bei 1024 px stehen dem Rumpf 960 px
   zur Verfuegung; das Raster 1,6fr/1fr mit 64 px Fuge macht daraus
   551 px Text und 345 px Box. 551 px sind bei 18 px Schrift rund
   58 Zeichen je Zeile — im lesbaren Bereich. Darunter wuerde die
   Textspalte unter 45 Zeichen fallen, und dann ist das
   Nebeneinander kein Gewinn mehr, sondern eine Zumutung.

   Die Zahl steht in DIESER Datei an zehn Stellen und meint ueberall
   dasselbe: die eine Schwelle des Bauteils. Wer sie aendert, aendert
   alle zehn — sonst faellt die Erzaehlung bei einer anderen Breite
   auseinander als das Technikband darunter. */
@media (min-width: 1024px) {
  .cd-referenzdetail--standard .cd-referenzdetail__seite,
  .cd-referenzdetail--fallstudie .cd-referenzdetail__seite,
  .cd-referenzdetail--kompakt .cd-referenzdetail__seite {
    position: sticky;
    inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
  }
}

/* --- fallstudie ---------------------------------------------
   Nach der Vorlage: dunkle Buehne mit dem Bild dahinter, darunter
   ein dunkles Eckwertband, dann die Erzaehlung mit klebender
   Faktenspalte.

   Der Verlauf ueber dem Bild ist kein Schmuck: Ohne ihn steht
   weisse Schrift auf einer unbekannten Aufnahme, und der Kontrast
   ist Zufall (WCAG 1.4.3). */
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne,
.cd-referenzdetail--magazin .cd-referenzdetail__buehne {
  overflow: hidden;
  isolation: isolate;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne { background: var(--cd-tinte); }
.cd-referenzdetail--magazin .cd-referenzdetail__buehne { background: var(--cd-flaeche-3); }

.cd-referenzdetail__buehnenbild {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne::before,
.cd-referenzdetail--magazin .cd-referenzdetail__buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne::before {
  background: linear-gradient(105deg, rgba(13, 26, 33, .94) 0%, rgba(13, 26, 33, .78) 45%, rgba(13, 26, 33, .45) 100%);
}
.cd-referenzdetail--magazin .cd-referenzdetail__buehne::before {
  background: linear-gradient(105deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .82) 48%, rgba(255, 255, 255, .5) 100%);
}

.cd-referenzdetail--fallstudie .cd-referenzdetail__kopf,
.cd-referenzdetail--magazin .cd-referenzdetail__kopf {
  padding-block: var(--cd-a7) var(--cd-a9);
  min-block-size: 22rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cd-referenzdetail--fallstudie .cd-referenzdetail__titel { color: var(--cd-weiss); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__teaser { color: var(--cd-text-auf-dunkel); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__kicker { color: var(--cd-rot-auf-dunkel); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__rueckwegLink { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__rueckwegLink:hover { color: var(--cd-weiss); }

/* Das dunkle Band. Eine Stufe heller als die Buehne, damit die
   Kante sichtbar bleibt, ohne eine Linie zu brauchen. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__band {
  background: var(--cd-dunkel);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__band .cd-bahn__inhalt {
  padding-block: var(--cd-a6);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwert {
  border-inline-start-color: var(--cd-linie-auf-dunkel);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwert dt { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwert dd { color: var(--cd-weiss); }

.cd-referenzdetail--fallstudie .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a9); }

/* --- bericht -------------------------------------------------
   Kennzahlenband auf getoentem Grund, danach eine schmale
   Lesespalte. Keine Nebenspalte daneben — sie rutscht unter den
   Text und wird zur Fusskarte. */
.cd-referenzdetail--bericht .cd-referenzdetail__band { background: var(--cd-flaeche-2); }
.cd-referenzdetail--bericht .cd-referenzdetail__band .cd-bahn__inhalt {
  padding-block: var(--cd-a6);
}

.cd-referenzdetail--bericht .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--bericht .cd-referenzdetail__spalten,
.cd-referenzdetail--galerie .cd-referenzdetail__spalten,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__spalten,
.cd-referenzdetail--wechsel .cd-referenzdetail__spalten {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a8);
}
.cd-referenzdetail--bericht .cd-referenzdetail__text {
  max-inline-size: 46rem;
  margin-inline: auto;
}
.cd-referenzdetail--bericht .cd-referenzdetail__seite,
.cd-referenzdetail--galerie .cd-referenzdetail__seite,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__seite,
.cd-referenzdetail--wechsel .cd-referenzdetail__seite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--cd-a5) var(--cd-a7);
  align-items: start;
}
.cd-referenzdetail--bericht .cd-referenzdetail__logo,
.cd-referenzdetail--galerie .cd-referenzdetail__logo,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__logo,
.cd-referenzdetail--wechsel .cd-referenzdetail__logo {
  margin-block-end: 0;
}

/* --- wechsel -------------------------------------------------
   Jedes Kapitel zweispaltig, Bild und Text tauschen die Seiten.
   Der Wechsel laeuft ueber :nth-child(even) und nicht ueber eine
   Klasse am Element: die Reihenfolge entsteht erst im Browser, und
   eine Klasse muesste die Vorlage mitzaehlen. */
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cd-a8);
  align-items: center;
  margin-block-end: var(--cd-a9);
}
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelbild { margin-block-start: 0; }
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt:nth-child(even) .cd-referenzdetail__kapiteltext { order: 2; }

/* --- magazin -------------------------------------------------
   Heller Aufmacher ueber die Breite, danach zwei Lesespalten.

   columns und nicht grid: Der Text soll UMBRECHEN und in die
   naechste Spalte laufen, nicht in Bloecke zerfallen. Ein Kapitel
   darf dabei nicht mitten in der Ueberschrift reissen. */
.cd-referenzdetail--magazin .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--magazin .cd-referenzdetail__spalten {
  grid-template-columns: minmax(0, 1fr);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapitel {
  columns: 2;
  column-gap: var(--cd-a8);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapitelpunkt {
  break-inside: avoid-column;
  margin-block-end: var(--cd-a7);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapiteltitel {
  break-after: avoid-column;
}
.cd-referenzdetail--magazin .cd-referenzdetail__seite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--cd-a5) var(--cd-a7);
  align-items: start;
}
.cd-referenzdetail--magazin .cd-referenzdetail__logo { margin-block-end: 0; }

/* --- kompakt -------------------------------------------------
   Kopf zweispaltig: Text links, Bild rechts. Danach das Band und
   ein kurzer Text mit Nebenspalte. Fuer Projekte, die keine lange
   Erzaehlung haben. */
.cd-referenzdetail--kompakt .cd-referenzdetail__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cd-a8);
  align-items: center;
  padding-block: var(--cd-a7) var(--cd-a8);
}
/* Der Rueckweg gehoert ueber beide Spalten und nicht in die erste. */
.cd-referenzdetail--kompakt .cd-referenzdetail__rueckweg {
  grid-column: 1 / -1;
  margin-block-end: 0;
}
.cd-referenzdetail--kompakt .cd-referenzdetail__band { background: var(--cd-flaeche-2); }
.cd-referenzdetail--kompakt .cd-referenzdetail__band .cd-bahn__inhalt {
  padding-block: var(--cd-a6);
}
.cd-referenzdetail--kompakt .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }

/* --- galerie -------------------------------------------------
   Die Kapitelbilder bilden eine Reihe vor dem Text. Drei Spalten,
   die letzte Reihe laeuft nicht aus: auto-fit mit minmax fuellt
   auf, was da ist. */
.cd-referenzdetail--galerie .cd-referenzdetail__galerie {
  list-style: none;
  margin: 0 0 var(--cd-a8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--cd-a4);
}
.cd-referenzdetail--galerie .cd-referenzdetail__galeriestueck figure {
  margin: 0;
  background: var(--cd-flaeche-3);
}
.cd-referenzdetail--galerie .cd-referenzdetail__galeriestueck img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.cd-referenzdetail--galerie .cd-referenzdetail__galeriestueck figcaption {
  padding: var(--cd-a3) var(--cd-a4);
  background: var(--cd-flaeche-2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-2);
}
.cd-referenzdetail--galerie .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a7); }
.cd-referenzdetail--galerie .cd-referenzdetail__text { max-inline-size: 46rem; }

/* --- zeitleiste ---------------------------------------------
   Die Kapitel als nummerierte Schritte an einer Linie. Die Ziffer
   kommt aus dem Zaehler und steht nicht im Markup: Sie ist reine
   Darstellung, und ein Vorleseprogramm zaehlt die Punkte einer
   geordneten Liste selbst.

   Die Linie ist ein Rahmen am Listenpunkt und kein eigenes
   Element — so endet sie automatisch am letzten Kapitel. */
.cd-referenzdetail--zeitleiste .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--zeitleiste .cd-referenzdetail__text { max-inline-size: 52rem; }
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapitelpunkt {
  position: relative;
  padding-inline-start: var(--cd-a8);
  padding-block-end: var(--cd-a8);
  margin-block-end: 0;
  border-inline-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapitelpunkt:last-child {
  border-inline-start-color: transparent;
  padding-block-end: 0;
}
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapitelpunkt::before {
  content: counter(cd-kapitel);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-rot);
  color: var(--cd-rot);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  font-weight: 600;
}
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapiteltitel { margin-block-start: 0; }


/* ============================================================
   Schmalere Fenster
   ============================================================
   Unter 1024 px faellt jede Zweispaltigkeit weg. Stehenbleiben
   ergibt nur neben einer laufenden Spalte Sinn — untereinander
   waere es ein Kasten, der den Text verfolgt.
   ============================================================ */
@media (max-width: 1023px) {
  .cd-referenzdetail__spalten,
  .cd-referenzdetail--kompakt .cd-referenzdetail__kopf,
  .cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a7);
  }
  /* Hier stand `.cd-referenzdetail__seite { position: static; }`.
     Die Zeile war wirkungslos — eine Klasse gegen zwei. Das
     Stehenbleiben ist jetzt oben in `@media (min-width: 1024px)`
     eingefasst und braucht keine Ruecknahme mehr. */
  .cd-referenzdetail--magazin .cd-referenzdetail__kapitel { columns: 1; }
  .cd-referenzdetail--bericht .cd-referenzdetail__text { max-inline-size: none; }
  /* Der Wechsel der Seiten faellt mit der Zweispaltigkeit weg —
     sonst stuende bei jedem zweiten Kapitel das Bild vor dem Text,
     zu dem es gehoert. */
  .cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt:nth-child(even) .cd-referenzdetail__kapiteltext {
    order: 0;
  }
  .cd-referenzdetail--fallstudie .cd-referenzdetail__kopf,
  .cd-referenzdetail--magazin .cd-referenzdetail__kopf {
    min-block-size: 16rem;
    padding-block: var(--cd-a6) var(--cd-a7);
  }
  .cd-referenzdetail--bericht .cd-referenzdetail__eckwert {
    flex-basis: 100%;
    padding-inline: 0;
    border-inline-start: 0;
  }
}


/* ============================================================
   3. DIE BAENDER AM FUSS DER FALLSTUDIE
   ============================================================
   Technik, weitere Projekte und Abschluss. Sie stossen auf Stoss
   aneinander wie in der Vorlage — der Rhythmus entsteht aus
   Innenabstaenden und dem Farbwechsel, nicht aus Aussenabstaenden.
   ============================================================ */

/* --- Faktenbox: Kopfzeile und Handlungskarte ---------------- */
/* Die Kopfzeile sitzt buendig in der Box und nicht darin: Die
   negativen Abstaende ziehen sie ueber den Innenabstand der Box
   hinaus. Ein eigener Rahmen waere die Alternative, haette aber
   eine doppelte Linie zur Boxkante ergeben. */
.cd-referenzdetail__faktentitel {
  margin: calc(var(--cd-a6) * -1) calc(var(--cd-a6) * -1) var(--cd-a5);
  padding: var(--cd-a4) var(--cd-a6);
  background: var(--cd-tinte);
  color: var(--cd-weiss);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cd-referenzdetail__faktentitel strong { font-weight: 600; }

/* Abgesetzt statt angehaengt: Die Karte ist eine Handlung und
   keine weitere Angabe — die Linie trennt beides. */
.cd-referenzdetail__nebenaktion {
  margin-block-start: var(--cd-a6);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__nebenaktionTitel {
  font-weight: 600;
  color: var(--cd-tinte);
  margin-block-end: var(--cd-a4);
}

/* --- Leistungsliste als Kachelraster ------------------------
   In der Vorlage steht sie als Raster mit haarfeinen Fugen. Die
   Fuge entsteht aus dem GRUND des Rasters und nicht aus Rahmen —
   so gibt es an den Kreuzungen keine doppelte Linie. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul {
  display: grid;
  /* ZWEI SPALTEN FEST statt auto-fit — und das ist der Punkt dieser
     Regel, nicht die Zahl:
     Die Fugen entstehen aus dem GRUND des Rasters. Wo keine Kachel
     liegt, bleibt der Grund stehen — bei sieben Eintraegen also ein
     graues Rechteck unten rechts. Gemessen auf burghardt-energy:
     1 leere Zelle bei 1440/1280/1100/700/560 px, bei 900 px (dort
     rechnete auto-fit drei Spalten) sogar zwei.
     Gegen ein Loch hilft nur, die letzte Kachel die Reihe fuellen
     zu lassen — und dafuer muss die Spaltenzahl BEKANNT sein.
     auto-fit weiss sie nur der Browser. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--cd-linie-2);
  padding: 2px;
}
/* Die letzte Kachel fuellt die Reihe, wenn sie allein darin steht.
   Bei zwei Spalten heisst das: ungerade Stelle. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* Unter 601 px passen keine zwei Kacheln nebeneinander: 2 x 15rem
   plus Fuge braucht 482 px, die Bahn gibt dort weniger her. */
@media (max-width: 600px) {
  .cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul li {
  display: flex;
  align-items: center;
  min-block-size: 56px;
  margin: 0;
  padding: var(--cd-a3) var(--cd-a4) var(--cd-a3) var(--cd-a6);
  background: var(--cd-weiss);
  font-size: var(--cd-gr-klein);
  color: var(--cd-tinte);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul li::before {
  inset-block-start: 50%;
  inset-inline-start: var(--cd-a4);
  transform: translateY(-50%);
  inline-size: 10px;
}

/* --- Technikband -------------------------------------------- */
.cd-referenzdetail__technik {
  background: var(--cd-flaeche-2);
  border-block-start: 1px solid var(--cd-linie-2);
  margin-block-start: var(--cd-a9);
}
.cd-referenzdetail__technikRaster {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: var(--cd-a8);
  align-items: start;
  padding-block: var(--cd-a8);
}
.cd-referenzdetail__technikTitel { margin-block-start: var(--cd-a3); }
.cd-referenzdetail__technikListe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cd-referenzdetail__technikListe li {
  display: inline-flex;
  align-items: center;
  min-block-size: 43px;
  padding-inline: var(--cd-a5);
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-knopf);
  font-size: var(--cd-gr-klein);
  color: var(--cd-tinte);
}

/* --- Weitere Projekte --------------------------------------- */
.cd-referenzdetail__weitere { background: var(--cd-weiss); }
.cd-referenzdetail__weitere > .cd-bahn__inhalt { padding-block: var(--cd-a8); }

.cd-referenzdetail__weitereKopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a5);
  margin-block-end: var(--cd-a7);
}
.cd-referenzdetail__weitereTitel { margin: 0; }

.cd-referenzdetail__weitereListe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--cd-a4);
}
.cd-referenzdetail__weiteresStueck article {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--cd-flaeche-2);
}
.cd-referenzdetail__weiteresBild {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cd-flaeche-3);
}
.cd-referenzdetail__weiteresBild img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .5s var(--cd-kurve);
}
.cd-referenzdetail__weiteresStueck article:hover .cd-referenzdetail__weiteresBild img {
  transform: scale(1.05);
}
.cd-referenzdetail__weiteresText {
  padding: var(--cd-a4) var(--cd-a5) var(--cd-a5);
  display: grid;
  gap: var(--cd-a2);
}
.cd-referenzdetail__weiteresTitel { margin: 0; font-size: var(--cd-gr-h4); }

/* Der Verweis liegt auf dem Namen und spannt sich ueber die ganze
   Karte. Ein zweiter Verweis darf nicht dazukommen: zwei
   aufgespannte Flaechen lieferten sich einen Wettlauf, und im
   Tabulator staende dasselbe Ziel zweimal. */
.cd-referenzdetail__weiteresZiel { color: inherit; }
.cd-referenzdetail__weiteresZiel::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cd-referenzdetail__weiteresStueck article:hover .cd-referenzdetail__weiteresZiel { color: var(--cd-rot); }
.cd-referenzdetail__weiteresZiel:focus-visible { outline: none; }
.cd-referenzdetail__weiteresStueck article:focus-within {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
}

/* --- Abschlussband ------------------------------------------
   Die rote Oberkante trennt den Fall vom Angebot darunter. Sie ist
   ein border und kein eigenes Element — so kann sie nicht
   verrutschen. */
/* Unten eine Haarlinie: Darunter beginnt die Fusszeile in einem
   zweiten, nur wenig dunkleren Ton. Ohne Kante lesen sich die
   beiden als EIN Block mit einem Farbfehler statt als zwei
   Bereiche. Oben trennt der rote Balken, unten die Linie. */
.cd-referenzdetail__abschluss {
  background: var(--cd-dunkel);
  border-block-start: 4px solid var(--cd-rot);
  border-block-end: 1px solid var(--cd-linie-auf-dunkel);
  color: var(--cd-text-auf-dunkel);
}
.cd-referenzdetail__abschlussRaster {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: var(--cd-a8);
  align-items: center;
  padding-block: var(--cd-a8);
}
.cd-referenzdetail__abschlussTitel { color: var(--cd-weiss); }
.cd-referenzdetail__abschlussText {
  margin-block-start: var(--cd-a4);
  max-inline-size: 34rem;
}
.cd-referenzdetail__abschlussKnoepfe {
  display: grid;
  gap: 14px;
}

/* Form und Hoehe kommen aus .cd-grossknopf. Hier steht nur, was
   dieser Ort anders macht: die Fuellung.

   Der Telefonknopf traegt die Nummer als TEXT und nicht als Grafik —
   sie muss kopierbar und vorlesbar bleiben. */
.cd-referenzdetail__anruf {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}
.cd-referenzdetail__anruf:hover {
  background: var(--cd-rot-tief);
  border-color: var(--cd-rot-tief);
  color: var(--cd-weiss);
}
.cd-referenzdetail__anruf .cd-symbol { inline-size: 20px; block-size: 20px; }

/* Gefuellt fuehrt, umrandet begleitet — dieselbe Rangfolge wie im
   Handlungsband. */
.cd-referenzdetail__abschlussZweit {
  background: transparent;
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-weiss);
}
.cd-referenzdetail__abschlussZweit:hover {
  border-color: var(--cd-weiss);
  background: color-mix(in srgb, var(--cd-weiss) 8%, transparent);
  color: var(--cd-weiss);
}

@media (max-width: 1023px) {
  .cd-referenzdetail__technikRaster,
  .cd-referenzdetail__abschlussRaster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a6);
  }
}


/* Zeichen fuer "oeffnet in einem neuen Fenster": ein Kasten mit
   Pfeil daraus, gezeichnet aus Rahmenkanten. Kein Schriftzeichen —
   ein Zeichen aus dem Privatnutzungsbereich landete sonst im
   vorgelesenen Namen des Verweises. Die Ansage steht als Text
   daneben (cd-nurlesen). */
.cd-referenzdetail__externZeichen {
  position: relative;
  inline-size: 12px;
  block-size: 12px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-block-start-color: transparent;
  border-inline-end-color: transparent;
}
.cd-referenzdetail__externZeichen::before,
.cd-referenzdetail__externZeichen::after {
  content: "";
  position: absolute;
}
/* Der Pfeilschaft */
.cd-referenzdetail__externZeichen::before {
  inset-block-start: -1px;
  inset-inline-end: -3px;
  inline-size: 10px;
  block-size: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}
/* Die Spitze */
.cd-referenzdetail__externZeichen::after {
  inset-block-start: -4px;
  inset-inline-end: -4px;
  inline-size: 6px;
  block-size: 6px;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
}


/* --- Zwei Nachbesserungen an der Fallstudie ----------------- */

/* Die Schlagworte stehen bei dieser Fassung schon als eigenes
   Technikband. Im Text ein zweites Mal waeren sie dieselbe Angabe
   an zwei Stellen — und die zweite lernt niemandem etwas. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__schlagworte { display: none; }

/* Das Abschlussband stoesst an die Fusszeile. Die Bahn bringt
   unten ihre uebliche Luft mit; unter einem randlosen dunklen Band
   ergaebe das einen weissen Streifen zwischen zwei dunklen
   Flaechen — der sieht aus wie ein Fehler und ist einer. */
.cd-bahn.cd-referenzdetail--fallstudie { padding-block-end: 0; }

/* ZWEI KLASSEN und nicht eine: Diese Datei wird von bahnen.css ganz
   oben eingebunden, der gemeinsame Bahnenrhythmus steht dort weiter
   unten. Bei gleichem Gewicht gewinnt die spaetere Regel — mit
   einer Klasse blieb der Abstand stehen. Derselbe Stolperstein wie
   beim Seitenkopf. */


/* --- Brotkrume, Abzeichen und Bandknopf --------------------- */

/* Die Brotkrume steht auf der dunklen Buehne. Die Trenner kommen
   aus ::before und nicht aus dem Text: Ein Schraegstrich im Markup
   wuerde mitgelesen ("Startseite Schraegstrich Referenzen"). */
/* DIE BROTKRUME IST DIESELBE WIE UEBERALL.

   Sie trug frueher eine eigene Fassung: senkrechter Strich statt
   Schraegstrich als Trenner, engere Sperrung, fest helle Schrift
   fuer einen dunklen Kopf. Auf einer Seite, die man aus einer
   Suchmaschine heraus betritt, sah der Pfad damit anders aus als
   auf jeder anderen Seite — und auf einem hellen Kopf stand die
   helle Schrift ohne Kontrast da.

   Jetzt traegt das nav zusaetzlich cd-hero__krume und bekommt
   Typografie, Trenner und Farblogik von dort. Hier steht nur noch,
   was diese Bahn eigenes braucht.

   Die eigene Klasse bleibt am Element: Die Fassung mit Fotokopf
   legt der Krume weiter unten eine dunkle Platte unter, damit sie
   ueber dem Bild lesbar bleibt.
   ------------------------------------------------------------ */

.cd-referenzdetail__abzeichenzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a4);
  margin-block-end: var(--cd-a5);
}
.cd-referenzdetail__abzeichen {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  border-radius: var(--cd-r-knopf);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cd-referenzdetail__abzeichenwert {
  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);
}

/* Die Buehne der Fallstudie ist hoeher als bei den uebrigen
   Fassungen: Sie traegt Brotkrume, Abzeichenzeile, Schlagzeile und
   Anreisser und soll den ersten Bildschirm fuellen. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__kopf { min-block-size: 30rem; }

/* Das Band wird zur Zeile: Werte links, Handlung rechts. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__band .cd-bahn__inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a5);
}
/* Die Werteliste nimmt den freien Platz, der Knopf nur seinen
   eigenen. Ohne das erste Drittel draengten sich die vier Werte
   links zusammen und rechts stand eine Luecke. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwerte { flex: 1 1 34rem; }
.cd-referenzdetail__bandknopf { flex: 0 0 auto; }


/* --- Galerieband -------------------------------------------- */
.cd-referenzdetail__galerieband {
  background: var(--cd-flaeche-2);
  border-block-start: 1px solid var(--cd-linie-2);
  margin-block-start: var(--cd-a9);
}
.cd-referenzdetail__galerieband > .cd-bahn__inhalt { padding-block: var(--cd-a8); }
.cd-referenzdetail__galeriekopf { margin-block-end: var(--cd-a7); }
.cd-referenzdetail__galerietitel { margin-block-start: var(--cd-a3); }

.cd-referenzdetail__galeriereihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 2px;
  background: var(--cd-linie-2);
}
.cd-referenzdetail__galeriereihe figure { margin: 0; background: var(--cd-weiss); }
.cd-referenzdetail__galeriereihe img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
}
.cd-referenzdetail__galeriereihe figcaption {
  padding: var(--cd-a4) var(--cd-a5);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-2);
}
.cd-referenzdetail__galerieoeffner {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: var(--cd-a2);
}
.cd-referenzdetail__galerieoeffner:focus-visible {
  outline: 2px solid var(--cd-rot);
}
.cd-referenzdetail__galeriehinweis {
  position: absolute;
  inset-inline-end: var(--cd-a4);
  inset-block-end: var(--cd-a4);
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  min-block-size: 2.75rem;
  padding-inline-start: var(--cd-a4);
  background: color-mix(in srgb, var(--cd-dunkel) 90%, transparent);
  color: var(--cd-weiss);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(var(--cd-a2));
  transition: opacity .2s ease, transform .2s ease;
}
.cd-referenzdetail__galerieplus {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background: var(--cd-rot);
  font-family: var(--cd-schrift-mono);
  font-size: 1.35rem;
}
.cd-referenzdetail__galerieoeffner:hover .cd-referenzdetail__galeriehinweis,
.cd-referenzdetail__galerieoeffner:focus-visible .cd-referenzdetail__galeriehinweis {
  opacity: 1;
  transform: none;
}

/* --- Rueckfragen -------------------------------------------- */
/* Anmoderation schmal, Akkordeon breit — wie in der Vorlage. Die
   Frage ist der Inhalt, die Ueberschrift nur die Einordnung. */
.cd-referenzdetail__fragen {
  background: var(--cd-weiss);
  border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__fragenRaster {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: var(--cd-a8);
  align-items: start;
  padding-block: var(--cd-a8);
}
.cd-referenzdetail__fragenTitel { margin-block-start: var(--cd-a3); }

/* Die erste Zeile bekommt eine Linie oben, damit die Reihe oben
   und unten gleich abschliesst — der Punkt selbst bringt nur eine
   Linie unten mit. */
.cd-referenzdetail__fragenListe { border-block-start: 1px solid var(--cd-linie-2); }

@media (max-width: 1023px) {
  .cd-referenzdetail__fragenRaster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a6);
  }
}


/* --- Galerie mit Geraeterahmen ------------------------------
   Die Reihe traegt jetzt Rahmen statt randloser Bilder. Der graue
   Fugengrund faellt damit weg — zwischen zwei Geraeten braucht es
   keine Trennlinie, die Gehaeuse trennen selbst. */
.cd-referenzdetail__galeriereihe {
  background: none;
  gap: var(--cd-a6);
  align-items: end;
}
.cd-referenzdetail__galeriereihe figure { background: none; }
.cd-referenzdetail__galeriereihe img { aspect-ratio: auto; }
.cd-referenzdetail__galeriereihe figcaption {
  padding-inline: 0;
  padding-block: var(--cd-a4) 0;
  text-align: center;
}

/* Die drei Geraete sollen als FAMILIE lesbar sein: verschieden
   gross, aber ungefaehr gleich hoch — so wie sie nebeneinander auf
   einem Tisch laegen.

   Die Breiten stehen in PROZENT der Spalte und nicht in rem. Mit
   festen Obergrenzen allein waere das Verhaeltnis nur bei einer
   Spaltenbreite richtig: Schrumpft die Spalte, schrumpft der
   Laptop, waehrend Tablet und Handy an ihrer Grenze haengen
   bleiben — und dann ist das Handy hoeher als der Laptop. Die
   Grenzen bleiben trotzdem stehen, damit in einer sehr breiten
   Spalte kein Handy in Plakatgroesse entsteht.

   Gerechnet mit einer Spalte von 400 px:
     Laptop  400 breit -> 250 Scheibe + Leiste + Sockel ~ 292 hoch
     Tablet  248 breit -> 3:4         + Randbahn       ~ 310 hoch
     Handy   152 breit -> 9:19,5                       ~ 296 hoch

   ZENTRIERT WIRD UEBER margin, NICHT ueber justify-items: In einem
   Raster mit justify-items:center wird das Kind auf seine
   Inhaltsbreite geschrumpft. Die Geraete leiten ihre Breite aber
   aus inline-size:100% ab und ihre Hoehe aus aspect-ratio — das
   ist zirkulaer, und das Tablet fiel dadurch auf Mindestbreite
   zusammen. */
.cd-referenzdetail__galeriestueck--tablet .cd-geraet {
  inline-size: 62%;
  max-inline-size: 15rem;
  margin-inline: auto;
}
.cd-referenzdetail__galeriestueck--iphone .cd-geraet,
.cd-referenzdetail__galeriestueck--galaxy .cd-geraet {
  inline-size: 38%;
  max-inline-size: 9.5rem;
  margin-inline: auto;
}

/* Ein fertiges Foto-Mockup bringt Geraet, Perspektive und Schatten
   bereits mit. Es braucht nur eine feine Kante gegen sehr helle
   Flaechen; Roh-Screenshots bleiben in ihrer Geraetezeichnung. */
.cd-referenzdetail__galeriestueck--mockup img {
  border: 1px solid color-mix(in srgb, var(--cd-linie-2) 72%, transparent);
}

/* --- Backend-Fassung: Editorial ------------------------------
   Das Aufmacherbild steht bewusst allein. Danach laeuft die
   Erzaehlung paarweise weiter wie eine gedruckte Projektstrecke. */
@media (min-width: 900px) {
  .cd-referenzdetail__galerieband--editorial .cd-referenzdetail__galeriereihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .cd-referenzdetail__galerieband--editorial .cd-referenzdetail__galeriestueck:first-of-type {
    grid-column: 1 / -1;
  }
}

/* --- Backend-Fassung: Raster -------------------------------- */
.cd-referenzdetail__galerieband--raster .cd-referenzdetail__galeriereihe {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}

/* --- Backend-Fassung: Slider --------------------------------
   Ohne Skript bleibt die Spur per Finger, Rollrad und Tastatur
   erreichbar. Das Skript schaltet nur die Bedienung darunter frei. */
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriereihe {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--cd-rot) var(--cd-linie-2);
  align-items: start;
  gap: var(--cd-a5);
  padding-block-end: var(--cd-a3);
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck {
  flex: 0 0 100%;
  min-inline-size: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck--tablet .cd-geraet {
  inline-size: min(72%, 46rem);
  max-inline-size: 46rem;
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck--iphone .cd-geraet,
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck--galaxy .cd-geraet {
  inline-size: min(48%, 20rem);
  max-inline-size: 20rem;
}
.cd-referenzdetail__galeriebedienung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a5);
  margin-block-start: var(--cd-a5);
}
.cd-referenzdetail__galeriebedienung[hidden],
.cd-referenzdetail__galeriefortschritt[hidden],
.cd-referenzdetail__galeriepunkte[hidden] { display: none; }
.cd-referenzdetail__galeriepunkte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
}
.cd-referenzdetail__galeriepunkte .cd-spurpunkt {
  position: relative;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cd-referenzdetail__galeriepunkte .cd-spurpunkt::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: var(--cd-linie-3);
  transform: translate(-50%, -50%);
}
.cd-referenzdetail__galeriepunkte .cd-spurpunkt[aria-current]::before {
  background: var(--cd-rot);
  transform: translate(-50%, -50%) scale(1.45);
}
.cd-referenzdetail__galeriesteuerung {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  margin-inline-start: auto;
}
.cd-referenzdetail__galeriepfeil {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 1px solid var(--cd-linie-3);
  background: var(--cd-weiss);
  color: var(--cd-text);
  font-size: 1.25rem;
  cursor: pointer;
}
.cd-referenzdetail__galeriepfeil:hover,
.cd-referenzdetail__galeriepfeil:focus-visible {
  border-color: var(--cd-rot);
  background: var(--cd-rot);
  color: var(--cd-weiss);
}
.cd-referenzdetail__galeriepfeil:disabled {
  opacity: .35;
  cursor: default;
}
.cd-referenzdetail__galeriezaehler,
.cd-referenzdetail__lightboxzaehler {
  margin: 0;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
}
.cd-referenzdetail__galeriefortschritt {
  block-size: 2px;
  margin-block-start: var(--cd-a4);
  background: var(--cd-linie-2);
  overflow: hidden;
}
.cd-referenzdetail__galeriefortschritt > span {
  display: block;
  block-size: 100%;
  background: var(--cd-rot);
  transform-origin: left center;
  transition: transform .25s ease;
}

/* --- Lightbox ------------------------------------------------
   Ein echtes dialog-Element liefert Fokusfalle, Escape und den
   inerten Seitenhintergrund. Die dunkle Buehne ist bewusst neutral:
   Hier soll ausschliesslich das Projektbild wirken. */
html.cd-galerie-offen { overflow: hidden; }
.cd-referenzdetail__lightbox {
  inline-size: min(96vw, 100rem);
  max-inline-size: none;
  max-block-size: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cd-weiss);
  overflow: visible;
}
.cd-referenzdetail__lightbox::backdrop {
  background: color-mix(in srgb, #05070a 92%, transparent);
  backdrop-filter: blur(6px);
}
.cd-referenzdetail__lightboxkasten {
  border: 1px solid color-mix(in srgb, var(--cd-weiss) 18%, transparent);
  background: #0a0d12;
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, .48);
}
.cd-referenzdetail__lightboxkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 4rem;
  padding-inline: var(--cd-a5);
  border-block-end: 1px solid rgba(255, 255, 255, .14);
}
.cd-referenzdetail__lightboxkopf form { margin: 0; }
.cd-referenzdetail__lightboxschliessen {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  padding: var(--cd-a3) 0 var(--cd-a3) var(--cd-a3);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cd-referenzdetail__lightboxschliessen span { font-size: 1.6rem; line-height: 1; }
.cd-referenzdetail__lightboxbuehne {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 4rem;
  align-items: center;
  min-block-size: min(78vh, 56rem);
}
.cd-referenzdetail__lightboxfigur {
  min-inline-size: 0;
  margin: 0;
  padding: var(--cd-a5);
}
.cd-referenzdetail__lightboxfigur img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 72vh;
  margin-inline: auto;
  object-fit: contain;
}
.cd-referenzdetail__lightboxfigur figcaption {
  min-block-size: 2rem;
  padding-block-start: var(--cd-a4);
  color: color-mix(in srgb, var(--cd-weiss) 72%, transparent);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.cd-referenzdetail__lightboxpfeil {
  align-self: stretch;
  border: 0;
  background: transparent;
  color: var(--cd-weiss);
  font-size: 1.65rem;
  cursor: pointer;
}
.cd-referenzdetail__lightboxpfeil:hover,
.cd-referenzdetail__lightboxpfeil:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: var(--cd-rot-auf-dunkel);
}

@media (max-width: 699px) {
  .cd-referenzdetail__galeriehinweis > span:first-child { display: none; }
  .cd-referenzdetail__galeriehinweis {
    opacity: 1;
    transform: none;
    inset-inline-end: var(--cd-a3);
    inset-block-end: var(--cd-a3);
    padding: 0;
  }
  .cd-referenzdetail__galeriebedienung {
    align-items: flex-end;
    flex-direction: column;
  }
  .cd-referenzdetail__galeriepunkte { align-self: flex-start; }
  .cd-referenzdetail__lightbox {
    inline-size: 100vw;
    max-block-size: 100vh;
    margin: 0;
  }
  .cd-referenzdetail__lightboxkasten { min-block-size: 100vh; }
  .cd-referenzdetail__lightboxbuehne {
    position: relative;
    display: block;
    min-block-size: calc(100vh - 4rem);
    padding-block: var(--cd-a5) 4.5rem;
  }
  .cd-referenzdetail__lightboxfigur { padding: var(--cd-a3); }
  .cd-referenzdetail__lightboxfigur img { max-block-size: 72vh; }
  .cd-referenzdetail__lightboxpfeil {
    position: absolute;
    inset-block-end: var(--cd-a3);
    inline-size: calc(50% - var(--cd-a4));
    block-size: 3.25rem;
    border: 1px solid rgba(255, 255, 255, .18);
  }
  .cd-referenzdetail__lightboxpfeil--zurueck { inset-inline-start: var(--cd-a3); }
  .cd-referenzdetail__lightboxpfeil--vor { inset-inline-end: var(--cd-a3); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-referenzdetail__galeriehinweis,
  .cd-referenzdetail__galeriefortschritt > span { transition: none; }
}

/* Die Reihe stellt drei verschieden hohe Geraete nebeneinander. Sie
   stehen auf einer gemeinsamen Grundlinie und haengen nicht an der
   Oberkante — so wirkt es wie ein Regal und nicht wie ein Raster. */
.cd-referenzdetail__galeriereihe { align-items: end; }


/* --- Eckwerte auf schmalen Schirmen -------------------------
   Untereinander gestellt trennt eine SENKRECHTE Linie nichts mehr.
   Die Einrueckung faellt mit ihr weg, sonst stuenden die Werte
   ohne Grund eingerueckt. */
@media (max-width: 700px) {
  .cd-referenzdetail__eckwerte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cd-a5) var(--cd-a6);
  }
  .cd-referenzdetail__eckwert {
    padding-inline: 0;
    border-inline-start: 0;
  }
}


/* ============================================================
   Kundenzitat
   ============================================================
   Ein getoentes Band zwischen Erzaehlung und Bildern. Es hebt sich
   vom weissen Lesebereich ab, ohne die Wucht des dunklen
   Abschlussbands zu haben — davon gibt es unten schon eines, und
   zwei dunkle Flaechen auf einer Seite nehmen beiden die Wirkung.

   Das Anfuehrungszeichen ist gezeichnete Zier und steht deshalb in
   einem eigenen, ausgeblendeten Element: Im vorgelesenen Text hat
   es nichts zu suchen, und die Bauform blockquote sagt einem
   Vorleseprogramm ohnehin schon, dass hier zitiert wird.
   ============================================================ */
.cd-referenzdetail__stimme {
  background: var(--cd-flaeche-2);
  border-block-start: 1px solid var(--cd-linie-2);
}
/* EINE Spalte, nicht zwei.
   ------------------------------------------------------------
   Das Zeichen stand vorher in einer eigenen Rasterspalte links
   neben dem Zitat. Gemessen schob es den Zitattext auf x=199,
   waehrend der Fliesstext der Fallstudie darueber bei x=120
   beginnt — 79 px Versatz mitten in der Seite, ohne dass etwas
   dafuer spraeche. In den Rand haengen laesst es sich hier nicht:
   links vom Inhalt liegen nur 40 px Rinne, das Zeichen ist
   doppelt so breit. Also steht es UEBER dem Zitat, und alles
   fluchtet wieder. */
.cd-referenzdetail__stimmeRaster {
  padding-block: var(--cd-a8);
}

/* Das Anfuehrungszeichen
   ------------------------------------------------------------
   FALLE, die hier steckte: Das deutsche OEFFNENDE Zeichen ist
   U+201E (222) — zwei Kommas UNTEN auf der Grundlinie. Ein
   `margin-block-start: -.42em` zog es auf die Hoehe der ersten
   Textzeile; dort sahen die zwei Kommas aus wie das SCHLIESSENDE
   Zeichen (U+201C). Das Zitat begann also optisch mit seinem
   Schlusszeichen.

   Jetzt sitzt es ueber dem Text, wo die tiefe Lage des Glyphs
   richtig wirkt: die Kommas stehen dicht ueber der ersten Zeile
   und oeffnen sie. Der negative Zug nimmt nur noch die LEERE
   ueber dem Glyph heraus, die der em-Kasten mitfuehrt — er
   verschiebt das Zeichen nicht mehr gegen seine eigene Lage. */
.cd-referenzdetail__stimmeZeichen {
  display: block;
  font-family: var(--cd-schrift-display);
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
  color: var(--cd-rot);
  /* Der Wert ist GEMESSEN, nicht gerechnet: Das Glyph liegt tief
     im em-Kasten, ueber ihm stehen bei 84 px rund 40 px Leere.
     Mit -.22em blieben ueber dem sichtbaren Zeichen 85 px Luft,
     unter der Nennung 64 — der Kasten sass sichtbar zu tief.
     -.47em bringt beide Seiten auf 64. Wer die Schriftgroesse
     aendert, muss hier nachmessen. */
  margin-block-start: -.47em;
  margin-block-end: var(--cd-a2);
}

.cd-referenzdetail__stimmeStueck { margin: 0; }

.cd-referenzdetail__zitat {
  margin: 0;
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h3);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--cd-tinte);
  max-inline-size: 46rem;
}
.cd-referenzdetail__zitat p { margin: 0; }
.cd-referenzdetail__zitat p + p { margin-block-start: var(--cd-a4); }

/* Die Nennung nimmt die Breite des Zitats, nicht die der Bahn.
   Gemessen lief ihre Trennlinie 1121 px weit, das Zitat darueber
   736 px — die Linie zeigte also 385 px ins Leere und band die
   Nennung optisch an nichts an. */
.cd-referenzdetail__stimmeWer {
  display: flex;
  align-items: center;
  gap: var(--cd-a5);
  max-inline-size: 46rem;
  margin-block-start: var(--cd-a6);
  padding-block-start: var(--cd-a6);
  border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__stimmeLogo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.cd-referenzdetail__stimmeLogo img {
  display: block;
  max-block-size: 32px;
  inline-size: auto;
}
/* Eine SVG, die nur eine viewBox traegt und keine eigenen Masse,
   rendert in einem schrumpfenden Flex-Kasten mit inline-size:auto
   zu 0 x 0 — unsichtbar, ohne dass im Stylesheet etwas auffaellt.
   Gemessen: logo-burghardt-energy.svg stand hier mit 0 x 0 px bei
   300 x 71 px Eigenmass; das Kundenlogo unter dem Zitat fehlte auf
   jeder Fallstudie, deren Logo eine solche Datei ist.
   max-block-size reicht NICHT: Daraus folgt kein bestimmtes Mass,
   aus dem eine Breite entstehen koennte — eine feste block-size
   schon, die Breite ergibt sich dann aus dem Verhaeltnis der
   viewBox. Rasterlogos bleiben aussen vor: Sie bringen eigene
   Masse mit, und eine feste Hoehe wuerde sie hochrechnen. */
.cd-referenzdetail__stimmeLogo img[src$=".svg"] {
  block-size: 32px;
  max-inline-size: 12rem;
}

/* Hier gab es bisher gar keinen Kasten — das Logo stand frei auf der
   getoenten Flaeche. Fuer die uebliche dunkle Zeichnung ist das
   richtig und bleibt es (--weiss und --ohne aendern nichts). Nur ein
   HELL gezeichnetes Logo bekommt eine Flaeche; ohne sie waere es
   dort ebenso verschwunden wie in der Zitatkarte, nur ohne
   sichtbares Rechteck. */
.cd-referenzdetail__stimmeLogo--weiss,
.cd-referenzdetail__stimmeLogo--ohne { background: none; }
.cd-referenzdetail__stimmeLogo--dunkel {
  background: var(--cd-dunkel);
  border-radius: var(--cd-r-feld);
  padding: 8px 12px;
}

/* cite steht in vielen Browsern kursiv — hier ist es ein Name und
   kein Werktitel. */
.cd-referenzdetail__stimmePerson {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--cd-tinte);
}
.cd-referenzdetail__stimmeRolle {
  display: block;
  margin-block-start: 2px;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}

/* Auf dunklem Grund — die Fallstudie kann das Band dort tragen. */
.cd-referenzdetail--fallstudie .cd-referenzdetail__stimme {
  background: var(--cd-flaeche-2);
}

@media (max-width: 700px) {
  /* Das Zeichen steht seit 01.09.2026 auf JEDER Breite ueber dem
     Zitat — hier bleibt nur die kleinere Groesse. */
  .cd-referenzdetail__stimmeZeichen { font-size: 58px; }
  .cd-referenzdetail__stimmeWer {
    flex-wrap: wrap;
    gap: var(--cd-a4);
  }
}


/* Zwischen Zitat und Galerie kein weisser Zwischenraum: Beide sind
   getoente Baender, und die 96 px Weiss dazwischen sahen aus wie ein
   vergessener Abschnitt. Der Abstand bleibt, wo die Galerie auf den
   Lesebereich folgt. */
.cd-referenzdetail__stimme + .cd-referenzdetail__galerieband {
  margin-block-start: 0;
}

/* --- Eigener Fotokopf ---------------------------------------
   Ein Kundenfoto ist kein Screenshot: Es soll als Szene lesbar
   bleiben und nicht unter dem starken Verlauf der normalen
   Fallstudienbuehne verschwinden. Die kompakte Tafel haelt den Text
   kontrastreich zusammen und laesst den groessten Teil des Motivs
   frei. Das Feld wird je Referenz im Backend gewaehlt. */
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__buehne::before {
  background: linear-gradient(180deg, rgba(13, 26, 33, .08), rgba(13, 26, 33, .3));
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__buehnenbild {
  object-position: center;
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopf {
  min-block-size: 36rem;
}
/* Ueber dem Foto braucht die Krume eine Platte — und mit der
   Platte die hellen Farben. Die kommen NICHT von .cd-auf-dunkel:
   Dunkel ist hier nicht die Bahn, sondern nur dieses Stueck
   Hintergrund unter dem Pfad. */
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume {
  align-self: flex-start;
  padding: var(--cd-a2) var(--cd-a3);
  background: rgba(13, 26, 33, .82);
  backdrop-filter: blur(8px);
}
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume ol,
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume a,
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume li:not(:last-child)::after {
  color: var(--cd-text-auf-dunkel-2);
}
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume a:hover { color: var(--cd-weiss); }
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume [aria-current="page"] { color: var(--cd-rot-auf-dunkel); }
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopftext {
  align-self: flex-end;
  inline-size: min(100%, 42rem);
  padding: clamp(var(--cd-a5), 4vw, var(--cd-a7));
  background: rgba(13, 26, 33, .9);
  border-inline-start: 4px solid var(--cd-rot);
  box-shadow: 0 24px 64px rgba(13, 26, 33, .24);
  backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
  .cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopf {
    min-block-size: 30rem;
  }
  .cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopftext {
    padding: var(--cd-a5);
  }
}


/* ============================================================
   Faktenbox und Technikband — Nachtrag
   ============================================================
   Steht am Ende, weil hier Regeln aus derselben Datei
   ueberschrieben werden (der Platz der Spalten ab Zeile 129, die
   Abstaende des Technikbandes ab Zeile 657). Bei gleicher
   Spezifitaet gewinnt die spaetere Regel — weiter oben eingefuegt
   waeren diese Zeilen still wirkungslos.
   ============================================================ */

/* ------------------------------------------------------------
   1. Der Platz der beiden Spalten
   ------------------------------------------------------------
   Die Faktenbox steht seit dem Umbau VOR der Erzaehlung im
   Dokument (siehe Kommentar in CdReferenzdetail.fluid.html). Am
   Rechner soll sie trotzdem rechts liegen — deshalb bekommen
   beide Spalten ihren Platz ausdruecklich zugewiesen. Im Raster
   entscheidet dann die Zuweisung und nicht die Reihenfolge im
   Dokument.

   Nicht bei den einspaltigen Fassungen: Dort gibt es keine zweite
   Spalte, und grid-column:2 wuerde eine dritte erfinden. Die Box
   ist dort ein Vorspann ueber dem Text — gesehen wie gelesen.
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .cd-referenzdetail:not(.cd-referenzdetail--bericht):not(.cd-referenzdetail--galerie):not(.cd-referenzdetail--zeitleiste):not(.cd-referenzdetail--wechsel):not(.cd-referenzdetail--magazin)
    .cd-referenzdetail__spalten > .cd-referenzdetail__text {
    grid-column: 1;
    grid-row: 1;
  }
  .cd-referenzdetail:not(.cd-referenzdetail--bericht):not(.cd-referenzdetail--galerie):not(.cd-referenzdetail--zeitleiste):not(.cd-referenzdetail--wechsel):not(.cd-referenzdetail--magazin)
    .cd-referenzdetail__spalten > .cd-referenzdetail__seite {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ------------------------------------------------------------
   2. Die Faktenbox unter 1024 px
   ------------------------------------------------------------
   Sie steht jetzt vorn und muss deshalb FLACH sein: Eine 655 px
   hohe Box vor der Erzaehlung waere schlimmer als eine hinter ihr.
   Gemessen bei 390 px waren es vier Datenzeilen untereinander, ein
   72 px hoher Logokasten und darunter zwei Knoepfe.

   Zwei Spalten Eckdaten, Marke und Wert untereinander statt
   nebeneinander: So passen vier Angaben in zwei Zeilen. Der Rest
   ist weniger Polster.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .cd-referenzdetail__seite { padding: var(--cd-a5); }

  .cd-referenzdetail__faktentitel {
    margin: calc(var(--cd-a5) * -1) calc(var(--cd-a5) * -1) var(--cd-a4);
    padding: var(--cd-a3) var(--cd-a5);
  }

  /* LOGO UND KUNDENNAME IN EINER ZEILE.
     Untereinander waren es 56 px Logokasten, 16 px Abstand, eine
     Namenszeile und noch einmal 24 px — vier Baender fuer zwei
     Angaben, die zusammengehoeren. Nebeneinander ist es EIN Band,
     so hoch wie das hoehere der beiden: gemessen 76 px bei einem
     einzeiligen Namen, 102 px bei einem zweizeiligen.

     Der Platz kommt aus dem Aussenabstand des Logos und NICHT aus
     `column-gap`: Faellt das Logo weg (das Feld ist freiwillig),
     bliebe von einer Fuge eine 16 px breite Einrueckung stehen, in
     der nichts steht. Die erste Spalte ist dann 0 breit und der
     Name beginnt an der Kante.

     Die Zuweisung der Spalten steht ausdruecklich an jedem Kind.
     Ohne sie wandern Kopfzeile, Datenblock und Knopf in die
     Restspalte, sobald ein Kind fehlt. */
  :is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__seite {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
  }
  :is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) :is(.cd-referenzdetail__faktentitel, .cd-referenzdetail__daten, .cd-referenzdetail__adresse, .cd-referenzdetail__nebenaktion) {
    grid-column: 1 / -1;
  }
  :is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__logo {
    grid-column: 1;
  }
  :is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__kunde {
    grid-column: 2;
  }

  /* `min-inline-size: 0` ist hier PFLICHT und keine Vorsichtsmassnahme.
     Ein Rasterkind hat als automatische Mindestbreite seine
     min-content-Breite — die angegebene `inline-size` ist damit nur
     ein Wunsch. Gemessen: bei zehn Projekten stand die Plakette auf
     104 px, bei /referenzen/projekt/gary-schmitz-… auf 152 px, weil
     dieses Logo breiter gezeichnet ist. Der Name daneben verlor die
     Breite und brach auf drei Zeilen. Ein Rasterwert, der von der
     Bilddatei abhaengt, ist kein Rasterwert.
     Siehe auch die Notiz zu `1fr` und Ueberlauf im Haus.

     6,5rem und nicht mehr: Bei 390 px bleiben dem Namen dann 190 px
     und er nimmt zwei Zeilen. Mit 9,5rem waren es 142 px und drei —
     der Gewinn der einen Zeile war damit wieder aufgezehrt.

     KEINE RUECKNAHME BEI 320 px. Das lag nahe (dem Namen bleiben
     dort nur 120 px und drei Zeilen), ist aber gemessen falsch:
     nebeneinander 694 px Boxhoehe, uebereinander 740. Die drei
     Zeilen des Namens sind immer noch flacher als Logo UND Name
     untereinander. */
  .cd-referenzdetail__logo {
    block-size: 56px;
    inline-size: 6.5rem;
    min-inline-size: 0;
    margin-block-end: var(--cd-a5);
    margin-inline-end: var(--cd-a4);
  }
  /* Der Name traegt den Abstand nach unten nicht mehr selbst — er
     steht in derselben Zeile wie das Logo, und zwei Abstaende in
     einer Zeile ergaeben eine Stufe. */
  .cd-referenzdetail__kunde { margin-block-end: var(--cd-a5); }

  /* 8rem und nicht 9: Bei 390 px bleiben in der Box 310 px. Mit
     9rem Mindestbreite und 24 px Fuge braeuchten zwei Spalten
     312 px — zwei Pixel zu viel, und auto-fit faellt still auf
     EINE Spalte zurueck. Gemessen: 276 px Datenblock statt 138.
     Ein Rasterwert, der um zwei Pixel kippt, ist kein Rasterwert. */
  .cd-referenzdetail__daten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    gap: 0 var(--cd-a4);
    margin-block-end: var(--cd-a5);
  }
  /* Marke ueber dem Wert. Nebeneinander bliebe in einer halben
     Spalte kaum Platz fuer den Wert, und lange Werte braechen
     dann mitten im Wort. */
  .cd-referenzdetail__datum {
    display: block;
    padding-block: var(--cd-a3);
  }
  /* Die Trennlinie der LETZTEN Zeile faellt weg — in zwei Spalten
     ist die letzte Zeile aber nicht mehr die letzte Kachel.
     Deshalb wird sie hier wieder angeschaltet und stattdessen
     unten am Block abgeraeumt. */
  .cd-referenzdetail__datum:last-child { border-block-end: 1px solid var(--cd-linie-2); }
  /* text-align:end kommt von der einzeiligen Fassung: Dort steht
     die Marke links und der Wert rechts am Rand, und dazwischen
     ist die ganze Spaltenbreite. Untereinander waere derselbe
     Wert an den rechten Rand geschoben und stuende unter nichts.
     In zwei Spalten beginnt er deshalb wieder links. */
  .cd-referenzdetail__datum dd {
    margin-block-start: 2px;
    text-align: start;
  }

  /* Die Handlungskarte legt sich flach: Am Rechner steht sie am
     Fuss einer klebenden Spalte und darf Platz nehmen. Am Handy
     steht sie jetzt VOR der Erzaehlung — dort ist sie eine Zeile
     und kein Block. */
  .cd-referenzdetail__nebenaktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cd-a3) var(--cd-a4);
  }
  .cd-referenzdetail__nebenaktionTitel { margin: 0; }
}

/* ------------------------------------------------------------
   3. Technikband
   ------------------------------------------------------------
   Zeichnung und Wort in einem Kasten. Die Zeichnung sagt die
   Gattung, das Wort den Namen — zusammen sind es zwei Merkmale
   und nicht zwei Aussagen.
   ------------------------------------------------------------ */
.cd-referenzdetail__technikListe li {
  gap: var(--cd-a3);
  padding-inline: var(--cd-a4);
}
.cd-referenzdetail__technikListe .cd-symbol {
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 auto;
  color: var(--cd-rot);
}

/* WENIG TECHNIK, WENIG BAND.
   Das Band stand auf einem Raster aus 30 zu 70 Teilen mit 64 px
   Polster oben und unten. Bei EINEM Begriff — und genau einen
   tragen die meisten Projekte — waren das 264 px Bahn fuer einen
   Kasten von 43 px, der Rest war Luft. Gemessen auf
   /referenzen/projekt/kmk-sensoren-und-geraetebau-gmbh.

   Ab drei Begriffen bleibt es beim Raster; darunter stehen
   Ueberschrift und Kaesten in einer Zeile. Die Abfrage sitzt am
   Band und nicht an der Liste: Nur so erreicht sie auch das
   Polster des Rasters darin. */
.cd-referenzdetail__technik:not(:has(.cd-referenzdetail__technikListe > li:nth-child(3))) .cd-referenzdetail__technikRaster {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cd-a6);
  padding-block: var(--cd-a7);
}
.cd-referenzdetail__technik:not(:has(.cd-referenzdetail__technikListe > li:nth-child(3))) .cd-referenzdetail__technikTitel {
  font-size: var(--cd-gr-h3);
  margin-block-start: var(--cd-a2);
}
.cd-referenzdetail__technik:not(:has(.cd-referenzdetail__technikListe > li:nth-child(3))) .cd-referenzdetail__technikListe {
  justify-content: flex-end;
}

/* Unter 900 px steht die Ueberschrift ohnehin ueber den Kaesten —
   dann darf die Reihe auch wieder links beginnen. */
@media (max-width: 900px) {
  .cd-referenzdetail__technik .cd-referenzdetail__technikRaster {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--cd-a5);
    padding-block: var(--cd-a7);
  }
  .cd-referenzdetail__technik .cd-referenzdetail__technikListe { justify-content: flex-start; }
}

/* ------------------------------------------------------------
   4. Chip mit Zeichnung
   ------------------------------------------------------------
   Nur dort, wo es das Technikband nicht gibt — sonst stuende
   dieselbe Angabe zweimal auf der Seite.
   ------------------------------------------------------------ */
.cd-chip--symbol .cd-symbol {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
  color: var(--cd-rot);
}


/* ============================================================
   Die Faktenbox steht zweimal im Dokument — der Umschalter
   ============================================================
   Die Vorlage gibt `Faktenbox` zweimal aus: "breit" in der
   Nebenspalte, "schmal" unter dem Galerieband. Sichtbar ist immer
   genau eine. Die Begruendung fuer zwei Ausgaben statt `order`
   steht in CdReferenzdetail.fluid.html an der ersten Aufrufstelle.

   Verborgen wird mit `display: none` und nichts anderem: Nur das
   nimmt den Zwilling aus dem Bedienbaum und aus der Tabfolge. Sonst
   stuenden die Fakten zweimal im Vorleseprogramm und die beiden
   Knoepfe darin waeren doppelt anspringbar.

   Am Rechner faellt die HUELLE weg und nicht nur die Box darin:
   Ein leeres `cd-bahn__inhalt` brauchte sonst niemand, brachte aber
   seine Abstaende mit.
   ============================================================ */
@media (min-width: 1024px) {
  .cd-referenzdetail__faktenschmal { display: none; }
}

@media (max-width: 1023px) {
  /* Zwei Klassen, weil die Regel gegen `.cd-referenzdetail--fallstudie
     .cd-referenzdetail__seite` bestehen muss. Eine Klasse hat hier
     schon einmal verloren — siehe der Block zum Stehenbleiben. */
  :is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__seite--breit {
    display: none;
  }

  /* Luft als INNENABSTAND und nicht als Aussenabstand. Diese Datei
     haelt es durchgehend so — "die Baender stossen auf Stoss
     aneinander, der Rhythmus entsteht aus Innenabstaenden und dem
     Farbwechsel". Ein Aussenabstand zwischen zwei Baendern faellt
     ausserdem unter die Regeln zum Zusammenfallen von Raendern;
     ein Innenabstand nie.

     Oben und unten gleich viel: Darueber endet das Galerieband mit
     seinem eigenen Fussabstand, darunter beginnt das naechste Band
     mit seinem Kopfabstand — die sichtbare Luft ist an beiden Kanten
     also ohnehin groesser als der Wert hier. */
  .cd-referenzdetail__faktenschmal {
    padding-block: var(--cd-a8);
  }
}


/* --- Fassungen der Lightbox ----------------------------------
   Die Fassung steht am PROJEKT (Feld lightbox_layout) und nicht
   an der Galerie: Dieselben Bilder koennen als Raster stehen und
   trotzdem in einer Karte mit Textspalte gross werden.

   "voll" ist der Ausgangszustand und braucht deshalb keine
   eigene Regel — ein leeres Feld aendert an keinem gepflegten
   Projekt etwas.

   Diese Regeln stehen ANS ENDE der Datei und nicht neben den
   Grundregeln: Sie muessen die Mobilfassung weiter oben
   ueberschreiben duerfen, und jede von ihnen bringt ihre eigene
   Mobilfassung mit.
   ------------------------------------------------------------ */

/* Vollbild mit Textleiste
   Die Bildunterschrift wird vom fluesternden Kleingedruckten zu
   einer eigenen Leiste unter dem Bild: linksbuendig, in der
   Lesetype und mit eigenem Grund. Sie sitzt IM figure und damit
   nicht unter den Pfeilen — die Leiste endet buendig mit dem
   Bildfeld, was sie als Teil des Bildes lesbar macht. */
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur img {
  padding: var(--cd-a5);
  align-self: center;
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption {
  min-block-size: 0;
  padding: var(--cd-a4) var(--cd-a5);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: color-mix(in srgb, var(--cd-weiss) 84%, transparent);
  font-family: inherit;
  font-size: var(--cd-gr-klein);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption:empty {
  display: none;
}

/* Vollbild mit Miniaturenstreifen
   Der Streifen ist ein Geschwister der Buehne und laeuft deshalb
   ueber die volle Breite des Kastens. Er scrollt waagerecht; die
   Bildlaufleiste bleibt sichtbar, damit die Bedienung nicht
   geraten werden muss.

   scroll-snap steht bewusst NICHT dabei: Das Skript holt den
   aktuellen Knopf mit scrollIntoView heran, und beides zusammen
   kaempft um dieselbe Position. */
.cd-referenzdetail__lightboxstreifen {
  display: flex;
  gap: var(--cd-a2);
  padding: var(--cd-a3) var(--cd-a5);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.cd-referenzdetail__lightboxstreifen:empty { display: none; }
.cd-referenzdetail__lightboxmini {
  flex: 0 0 auto;
  inline-size: 5.5rem;
  block-size: 3.75rem;
  padding: 0;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  opacity: .55;
  transition: opacity .18s ease, border-color .18s ease;
}
.cd-referenzdetail__lightboxmini img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.cd-referenzdetail__lightboxmini:hover,
.cd-referenzdetail__lightboxmini:focus-visible { opacity: 1; }
.cd-referenzdetail__lightboxmini--hier {
  opacity: 1;
  border-color: var(--cd-rot-auf-dunkel);
}

/* Karte mit Textspalte
   Bild und Beschreibung stehen nebeneinander. Der Kasten wird
   dafuer schmaler und heller: Es geht hier nicht mehr um das
   Bild allein, sondern um Bild UND Text — ein rein schwarzer
   Grund liest sich dafuer schlecht.

   Die Spalte hat eine Mindestbreite. Ohne sie wird sie bei
   langen Bildern zum senkrechten Buchstabenstapel. */
.cd-referenzdetail__lightbox--karte { inline-size: min(94vw, 84rem); }
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxkasten {
  background: #10141b;
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxbuehne {
  min-block-size: min(66vh, 44rem);
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .95fr);
  align-items: center;
  gap: var(--cd-a5);
  padding: var(--cd-a5);
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur img {
  max-block-size: 62vh;
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur figcaption {
  align-self: center;
  min-block-size: 0;
  padding-block-start: 0;
  padding-inline-start: var(--cd-a5);
  border-inline-start: 1px solid rgba(255, 255, 255, .16);
  color: color-mix(in srgb, var(--cd-weiss) 84%, transparent);
  font-family: inherit;
  font-size: var(--cd-gr-klein);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
}

@media (max-width: 899px) {
  /* Nebeneinander wird untereinander: Ab hier bliebe von der
     Textspalte sonst eine Handbreit uebrig. Die Trennlinie
     wandert mit — sie steht dann oben statt an der Seite. */
  .cd-referenzdetail__lightbox--karte { inline-size: min(96vw, 100rem); }
  .cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a4);
  }
  .cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur img {
    max-block-size: 52vh;
  }
  .cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur figcaption {
    padding-inline-start: 0;
    padding-block-start: var(--cd-a4);
    border-inline-start: 0;
    border-block-start: 1px solid rgba(255, 255, 255, .16);
  }
}

@media (max-width: 699px) {
  .cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur img {
    padding: var(--cd-a3);
  }
  .cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption {
    padding: var(--cd-a3);
  }
  .cd-referenzdetail__lightboxstreifen { padding: var(--cd-a2) var(--cd-a3); }
  .cd-referenzdetail__lightboxmini { inline-size: 4.25rem; block-size: 2.9rem; }
  .cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur {
    padding: var(--cd-a3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-referenzdetail__lightboxmini { transition: none; }
}


/* Bento — alle Bilder zugleich, das gewaehlte gross
   ------------------------------------------------------------
   Der Unterschied zu den anderen Fassungen: Hier gibt es keine
   Einzelansicht mit Vor und Zurueck, sondern EIN Raster. Die
   gewaehlte Kachel nimmt zwei Spalten und zwei Zeilen ein, die
   uebrigen ordnen sich darum.

   Die Buehne wird deshalb ausgeblendet — samt Pfeilen. Wer alles
   sieht, blaettert nicht. Tastatur und Zaehler arbeiten trotzdem
   weiter: Das Skript fuehrt denselben Stand, es zeigt ihn hier nur
   anders.

   grid-auto-flow: dense fuellt die Luecken, die die grosse Kachel
   hinterlaesst. Ohne dense bleibt neben ihr ein Loch stehen, sobald
   sie nicht die erste ist. */
.cd-referenzdetail__lightbox--bento .cd-referenzdetail__lightboxbuehne {
  display: none;
}
.cd-referenzdetail__lightboxbentokasten {
  padding: var(--cd-a5);
}
.cd-referenzdetail__lightboxbento {
  --cdBentoSpalten: 4;
  --cdBentoReihen: 2;
  display: grid;
  grid-template-columns: repeat(var(--cdBentoSpalten), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: dense;
  gap: var(--cd-a3);
  max-block-size: 72vh;
}
.cd-referenzdetail__lightboxkachel {
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  overflow: hidden;
  opacity: .62;
  transition: opacity .2s ease, border-color .2s ease;
}
.cd-referenzdetail__lightboxkachel img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.cd-referenzdetail__lightboxkachel:hover,
.cd-referenzdetail__lightboxkachel:focus-visible { opacity: 1; }

/* Die gewaehlte Kachel. object-fit wechselt auf contain: Gross
   gezeigt soll das Bild vollstaendig sein und nicht beschnitten. */
.cd-referenzdetail__lightboxkachel--gross {
  grid-column: span 2;
  grid-row: span var(--cdBentoReihen, 2);
  opacity: 1;
  border-color: var(--cd-rot-auf-dunkel);
}
.cd-referenzdetail__lightboxkachel--gross img {
  object-fit: contain;
  background: #05070a;
}

.cd-referenzdetail__lightboxbentotext {
  /* Ohne diese beiden Zeilen erbt der Absatz eine Lesebreite und
     zentriert innerhalb davon — also links statt unter der Mitte
     des Rasters. Gemessen: 449 px statt 1317 px. */
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 2rem;
  padding-block-start: var(--cd-a4);
  margin: 0;
  color: color-mix(in srgb, var(--cd-weiss) 78%, transparent);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.cd-referenzdetail__lightboxbentotext[hidden] { display: none; }

@media (max-width: 899px) {
  /* Vier Spalten werden zwei. Die grosse Kachel behaelt ihre zwei
     Spalten und fuellt damit die Breite — das ist gewollt: am
     kleinen Schirm zaehlt das gewaehlte Bild mehr als die Uebersicht. */
  .cd-referenzdetail__lightboxbento {
    --cdBentoSpalten: 2;
    --cdBentoReihen: 2;
    max-block-size: 64vh;
  }
}

@media (max-width: 699px) {
  .cd-referenzdetail__lightboxbentokasten { padding: var(--cd-a3); }
  .cd-referenzdetail__lightboxbento { gap: var(--cd-a2); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-referenzdetail__lightboxkachel { transition: none; }
}


/* Schaufenster — Anmutung der Galerie auf teamvahrenkamp.de
   ------------------------------------------------------------
   Drei Unterschiede zum Vollbild:
   1. Die Pfeile sitzen AM BILD und nicht in eigenen Spalten. Sie
      liegen als Knoepfe darueber, halbtransparent und mit
      Weichzeichner, damit sie auf hellen wie dunklen Motiven lesbar
      bleiben.
   2. Statt der Pfeilzeichen ← → steht der eckige Chevron.
   3. Unten im Bild liegt eine Pille mit Diashow-Knopf und Zaehler.
      Der Knopf laeuft von unten voll und ist damit zugleich der
      Fortschritt bis zum naechsten Bild.

   Die Knoepfe sind ECKIG (leicht gerundet) statt rund wie beim
   Vorbild — auf Wunsch ist das eine Zeile: border-radius: 50%. */

/* Chevron statt Pfeilzeichen */
.cd-referenzdetail__lightboxpfeilEckig { display: none; }
.cd-referenzdetail__lightboxpfeilEckig svg { display: block; inline-size: 1.6rem; block-size: 1.6rem; }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeilZeichen { display: none; }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeilEckig { display: block; }

/* Die Buehne wird einspaltig: das Bild fuellt sie, die Pfeile
   liegen darueber. Ohne das blieben links und rechts die 4rem
   breiten Pfeilspalten stehen und das Bild waere schmaler. */
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxbuehne {
  position: relative;
  display: block;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil {
  position: absolute;
  inset-block-start: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 4px;
  background: rgba(16, 16, 18, .42);
  backdrop-filter: blur(3px);
  opacity: .9;
  transform: translateY(-50%);
  transition: background .18s ease, opacity .18s ease;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:hover,
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:focus-visible {
  background: rgba(16, 16, 18, .68);
  color: var(--cd-weiss);
  opacity: 1;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil[disabled] {
  opacity: .28;
  cursor: default;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--zurueck { inset-inline-start: var(--cd-a4); }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--vor { inset-inline-end: var(--cd-a4); }

/* Pille mit Diashow und Zaehler */
.cd-referenzdetail__lightboxpille {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: var(--cd-a4);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgba(16, 16, 18, .5);
  backdrop-filter: blur(4px);
  transform: translateX(-50%);
}
.cd-referenzdetail__lightboxlauf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cd-rot-auf-dunkel);
  color: var(--cd-weiss);
  cursor: pointer;
  overflow: hidden;
}
.cd-referenzdetail__lightboxlauffuellung {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 0;
  background: rgba(255, 255, 255, .42);
  pointer-events: none;
}
.cd-referenzdetail__lightboxlauf svg {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}
/* Die Umschaltung MUSS die Regel `.cd-referenzdetail__lightboxlauf svg`
   ueberbieten (eine Klasse + ein Element). Eine einzelne Klasse
   verliert dagegen — der Knopf zeigte Abspielen und Anhalten
   nebeneinander. */
.cd-referenzdetail__lightboxlauf .cd-referenzdetail__lightboxlaufAus { display: none; }
.cd-referenzdetail__lightbox--laeuft .cd-referenzdetail__lightboxlauf .cd-referenzdetail__lightboxlaufAn { display: none; }
.cd-referenzdetail__lightbox--laeuft .cd-referenzdetail__lightboxlauf .cd-referenzdetail__lightboxlaufAus { display: block; }
.cd-referenzdetail__lightboxpillezaehler {
  color: color-mix(in srgb, var(--cd-weiss) 90%, transparent);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .06em;
}

/* Der Zaehler steht schon in der Pille — im Kopf waere er doppelt. */
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxzaehler { visibility: hidden; }

@media (max-width: 699px) {
  .cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }
  .cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--zurueck { inset-inline-start: var(--cd-a2); }
  .cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--vor { inset-inline-end: var(--cd-a2); }
  .cd-referenzdetail__lightboxpille { inset-block-end: var(--cd-a2); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-referenzdetail__lightboxpfeil,
  .cd-referenzdetail__lightboxlauffuellung { transition: none; }
}


/* Nachbesserung Schaufenster
   ------------------------------------------------------------
   Die figure wird zum Raster: Bild und Pille teilen sich die erste
   Zeile, die Bildunterschrift bekommt die zweite. Dadurch liegt die
   Pille ueber dem BILD und nicht ueber der Unterschrift — vorher
   verdeckte sie deren Mitte.

   Die Pfeilknoepfe wechseln von dunkel auf hell durchscheinend. Auf
   dem fast schwarzen Fenstergrund war ein dunkler Knopf schlicht
   nicht zu sehen. */
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxfigur {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxfigur img {
  grid-area: 1 / 1;
  align-self: center;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxfigur figcaption {
  grid-area: 2 / 1;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpille {
  position: static;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  margin-block-end: var(--cd-a4);
  transform: none;
}

.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12);
  opacity: 1;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:hover,
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:focus-visible {
  border-color: var(--cd-rot-auf-dunkel);
  background: rgba(255, 255, 255, .2);
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil[disabled] {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  opacity: 1;
}


/* Ohne Fensterrahmen
   ------------------------------------------------------------
   Der Kasten faellt weg: keine Flaeche, keine Linie, kein
   Schlagschatten, kein Kopfbalken mit Trennlinie. Das Bild steht
   frei auf dem abgedunkelten Grund.

   Der Schliessen-Knopf bleibt — er wandert nur nach oben rechts
   ueber das Bild. Ein Fenster ohne sichtbaren Weg hinaus ist eine
   Falle, auch wenn Escape funktioniert.

   Der Grund wird etwas dichter: Ohne Kasten trennt nichts mehr das
   Bild von der Seite dahinter. */
.cd-referenzdetail__lightbox--ohnekasten::backdrop {
  background: color-mix(in srgb, #05070a 96%, transparent);
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxkasten {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxkopf {
  border-block-end: 0;
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxstreifen {
  border-block-start: 0;
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxschliessen {
  padding-inline-end: 0;
}

/* In der Textleisten-Fassung traegt die Leiste selbst eine Flaeche.
   Ohne Kasten wirkt die wie ein vergessener Rest — sie wird zur
   reinen Schrift. */
.cd-referenzdetail__lightbox--ohnekasten.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption {
  border-block-start: 0;
  background: transparent;
}
.cd-referenzdetail__lightbox--ohnekasten.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxkasten {
  background: transparent;
}

/* ------------------------------------------------------------
   Hinweis „KI-generiert" auf der Detailseite
   ------------------------------------------------------------
   Das Bauteil steht in komponenten.css, hier nur seine Lage.
   Buehne und Galerieoeffner tragen ihren Bezugsrahmen schon; die
   uebrigen Kaesten bekommen ihn hier — ohne ihn sucht sich die
   Marke den naechsten positionierten Vorfahren und sitzt dann
   irgendwo in der Bahn.
   ------------------------------------------------------------ */
.cd-referenzdetail__kopfbild,
.cd-referenzdetail__bild,
.cd-referenzdetail__kapitelbild,
.cd-referenzdetail__galeriestueck figure {
  position: relative;
}

/* Auf der Buehne nach RECHTS: unten links steht der Kopftext. */
.cd-referenzdetail__buehne > .cd-kihinweis--marke {
  inset-inline: auto var(--cd-a5);
  inset-block-end: var(--cd-a5);
}

/* Im Galerieoeffner sitzt unten rechts der Hinweis „Vergroessern".
   Die Marke bleibt links und geht ihm damit aus dem Weg. */
.cd-referenzdetail__galerieoeffner > .cd-kihinweis--marke {
  inset-inline: var(--cd-a3) auto;
}

/* „Weitere Referenzen" sind Kacheln wie in der Uebersicht und
   bekommen dieselbe Marke unten rechts. Der Kasten braucht dafuer
   erst einen Bezugsrahmen. */
.cd-referenzdetail__weiteresBild {
  position: relative;
}
.cd-referenzdetail__weiteresBild > .cd-kihinweis--marke {
  inset-inline: auto var(--cd-a3);
  inset-block-end: var(--cd-a3);
}

/* ------------------------------------------------------------
   Der Weg zur passenden Leistung
   ------------------------------------------------------------
   Steht am Ende der Erzaehlung und soll dort auffallen, ohne den
   Text zu unterbrechen: eine Linie darueber statt eines Kastens.
   Ein eingefaerbter Kasten haette hier wie ein Werbeblock
   ausgesehen — der Absatz gehoert zur Fallstudie und nicht neben
   sie.
   ------------------------------------------------------------ */
.cd-referenzdetail__leistung {
  margin-block-start: var(--cd-a7);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cd-a3);
}

.cd-referenzdetail__leistungtext {
  color: var(--cd-text-2);
  max-inline-size: 58ch;
}

.cd-referenzdetail__leistungtext > :last-child {
  margin-block-end: 0;
}

/* Auf dunklem Grund traegt die Linie in --cd-linie nicht. */
.cd-auf-dunkel .cd-referenzdetail__leistung,
.cd-auf-rot .cd-referenzdetail__leistung {
  border-block-start-color: var(--cd-linie-auf-dunkel);
}
.cd-auf-dunkel .cd-referenzdetail__leistungtext,
.cd-auf-rot .cd-referenzdetail__leistungtext {
  color: var(--cd-text-auf-dunkel);
}

/* Die Zeichnung im Leistungsblock. Sie ist quer angelegt
   (1280 x 420) und braucht die volle Breite — in einer Spalte
   neben dem Text waere sie unleserlich klein. */
.cd-referenzdetail__leistungbild {
  margin: 0;
  inline-size: 100%;
}

.cd-referenzdetail__leistungbild img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

/* ------------------------------------------------------------
   Kundenplakette in den Kacheln „Weitere Projekte"
   ------------------------------------------------------------
   Sie fehlte dort ganz: Die Kachel zeigte Bild, Rubrik und Titel,
   aber nicht, um wen es geht. Dieselbe Bauform wie in der
   Uebersicht — weisser Kasten, der in das Bild ragt.

   Unten LINKS. Unten rechts sitzt seit dem 28.08. der Hinweis auf
   ein erzeugtes Bild; zwei Marken uebereinander waeren eine zu
   viel.
   ------------------------------------------------------------ */
/* Die Plakette sitzt auf der NAHT zwischen Bild und Text
   ------------------------------------------------------------
   Wie in der Uebersicht (.cd-referenzen__plakette): erstes Kind
   des Textblocks, von einem negativen Aussenabstand in Hoehe
   ihrer selbst nach oben auf die Bildkante gezogen. Gemessen
   haengt sie dort 11 px ueber die Kante — sie verbindet die
   beiden Haelften der Kachel, statt in einer von beiden zu
   schwimmen.

   Vorher stand sie absolut IM Bildkasten, 12 px ueber dessen
   Unterkante. Das sah auf jedem der drei Bilder anders aus, weil
   der Abstand mal auf Himmel, mal auf ein Werkstueck traf, und es
   war das einzige Vorkommen dieser Plakette im Haus, das nicht auf
   der Kante sitzt.

   Im Bildkasten KANN sie nicht bleiben: der schneidet ab
   (overflow: hidden fuer die Schwenkbewegung), eine Plakette auf
   der Kante waere dort zur Haelfte verschwunden. */
.cd-referenzdetail__weiteresLogo {
  position: relative;
  z-index: 1;
  /* Der Textblock ist ein Raster — ohne justify-self zoege die
     Plakette die ganze Spaltenbreite auf. Gemessen: 341 statt
     126 px, ein weisser Balken quer ueber die Kachel. */
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  /* NICHT die eigene Hoehe, sondern 12 px mehr — und dieser
     Unterschied zur Uebersicht ist gewollt:
     Dort haengt die Plakette 11 px in den Textteil, der aber WEISS
     ist wie sie selbst; man sieht den Ueberstand gar nicht, die
     Plakette scheint auf der Bildkante zu liegen. Hier ist der
     Textteil GETOENT. Mit demselben Zug standen 16 von 42 px des
     weissen Kastens auf Grau — das sah aus, als sei die Plakette
     heruntergerutscht (gemessen und im Bild verglichen, vier
     Fassungen: Y:/tmp/plak-v1..v4).
     Mit -54 px bleiben 38 px im Bild und 4 px darunter: Sie
     BERUEHRT die Naht, statt darueber hinauszuhaengen. */
  margin-block-start: -54px;
  margin-block-end: var(--cd-a3);
  padding: 7px 10px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  box-shadow: var(--cd-schatten-karte);
  /* Die Plakette gehoert zum Bild und nicht zur Bedienung: ein
     Klick soll den Verweis darunter treffen. */
  pointer-events: none;
}

.cd-referenzdetail__weiteresLogo img {
  display: block;
  block-size: 26px;
  inline-size: auto;
}

/* Diese Plakette liegt AUF dem Projektbild — der Grund darunter ist
   beliebig. Deshalb gibt es hier bewusst KEIN --ohne: „ohne Kasten"
   hiesse hier „Logo auf irgendeinem Foto". Die dunkle Fassung
   behaelt den Rahmen, nur heller, damit sie sich vom Bild abhebt. */
.cd-referenzdetail__weiteresLogo--weiss { background: var(--cd-weiss); }
.cd-referenzdetail__weiteresLogo--dunkel {
  background: var(--cd-dunkel);
  border-color: rgb(255 255 255 / 0.18);
}

/* Ohne Logo traegt sie den Namen als Wort. */
.cd-referenzdetail__weiteresLogo--wort {
  font-family: var(--cd-schrift-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cd-tinte);
}