/* =========================================================================
   LICHT UND LAUF (jbtierfoto.de) : systeme de design « conduite d un tirage grand
   format », prefixe bln-.
   Vocabulaire : le procede, du vorsatz au bon a tirer. bildfeld (largeur utile
   du rouleau = conteneur), vorsatz (en-aufmacher), filmstreifen (navigation),
   titelbild (la surface qui porte l image = heros), graufilter (voile en dur),
   messreihe (la mesure de randnotiz = bandeau de trois reperes chiffres),
   platte (section numerotee), blende (le repere imprime en marge =
   surtitre), kontaktbogen (mosaique), abzug (carte-bloc), ausschnitt (format
   d image), bildtext (bloc de text compose), bildfolge (flux date), einzelbild
   (une entree du flux), zeitmarke (la date), bildkopf (l entree de la
   feuille = aufmacher d article), lesefeld (colonne de lecture), aufnahmedaten (aufnahmedaten de
   fabrication = fiche technique), warnlicht (encadre), abnahme
   (check-list), vergleichsreihe (tableau de donnees), uebergang (a lire
   ensuite), schnitt (separateur), wasserzeichen (ornement SVG), abspann
   (fuss de page), filmweg (fil d Ariane), vorlauf (lien d evitement),
   lichttisch (table de aufbau = conteneur des pages interieures), randstreifen
   (colonne de repere collante), nachweis (methode et sources).
   Palette : nuit de cyanotypie + cuivre de lampe + terracotta de
   sicherlicht. Une seule identite, SOMBRE. Aucun prefers-color-scheme,
   aucune police distante, aucun CDN, aucun degrade decoratif, aucun angle
   arrondi. Rhabillage du 06.09.2026 : palette, couple de polices, heros en
   deux colonnes, rubriques de l startseite en lignes a filets.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- 1. COULEURS · la chambre de cyanotypie, la lampe, le sicherlicht - */
  --dunkelkammer:  #182029;  /* fond de toutes les pages                  */
  --vorraum:      #212c38;  /* bandes en tief, sections alternees       */
  --vergroesserer:    #2b3947;  /* panneaux : aufnahmedaten, vergleichsreihe, warnlicht   */
  --baryt:  #e9e6dd;  /* encre du text courant                    */
  --baryt-matt:     #aab3b9;  /* notes, legendes, meta                     */
  --kupfer:    #c98a4b;  /* accent : liens, surtitres, chiffres       */
  --sicherlicht:    #c65b3a;  /* signal : filets, puces, jamais du text   */
  --filmkante:  #3d4d5c;  /* filet, jamais un text                    */

  /* Les six tonwerte de platte, une par rubrique. */
  --platte-1: #d9a441;  /* bewegung       */
  --platte-2: #6fae9c;  /* licht           */
  --platte-3: #c96a4a;  /* entfernung      */
  --platte-4: #9db06a;  /* arbeitshunde    */
  --platte-5: #b48ba8;  /* pferde          */
  --platte-6: #86a3c9;  /* nach-der-aufnahme */
  --tonwert: var(--kupfer);   /* tonwert courante, surchargee par page  */

  /* ---- 2. CARACTERES · piles systeme, rien ne part chercher dehors ----- */
  --schrift-titel: "Bookman Old Style", "Bookman", "URW Bookman L", Georgia, serif;
  --schrift-text: Seravek, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: Monaco, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;

  --staerke-titel: 600;
  --abstand-titel: -0.005em;
  --abstand-kapitaelchen: 0.16em;

  --groesse-text: clamp(1.02rem, 0.97rem + 0.22vw, 1.13rem);
  --zeilenabstand: 1.66;
  --groesse-h1: clamp(2.05rem, 1.32rem + 2.55vw, 3.5rem);
  --groesse-h2: clamp(1.42rem, 1.14rem + 1.05vw, 2.05rem);
  --groesse-h3: clamp(1.1rem, 1.02rem + 0.38vw, 1.34rem);
  --groesse-h4: 1.02rem;

  /* ---- 3. RYTHME -------------------------------------------------------- */
  --lesebreite: 56rem;              /* colonne de lecture                  */
  --ganze-breite: 1360px;
  --randverlust: clamp(1.05rem, 3.6vw, 3.4rem);
  --zwischenraum: clamp(0.85rem, 1.9vw, 1.7rem);
  --vorschub: clamp(2.1rem, 4.8vw, 4.2rem);
  --randstreifen-breite: 15.5rem;

  /* ---- 4. DETAILS ------------------------------------------------------- */
  --kante: 0;                          /* angles vifs partout                */
  --feine-linie: 1px solid var(--filmkante);
  --belichtungsdauer: 140ms ease;
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dunkelkammer);
  color: var(--baryt);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeilenabstand);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.bln-wasserzeichen { display: inline-block; vertical-align: -0.14em; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: var(--staerke-titel);
  letter-spacing: var(--abstand-titel);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--groesse-h1); }
h2 { font-size: var(--groesse-h2); }
h3 { font-size: var(--groesse-h3); }
h4 { font-size: var(--groesse-h4); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--kupfer);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: color var(--belichtungsdauer);
}
a:hover { color: #dca86f; }
:focus-visible { outline: 2px solid var(--kupfer); outline-offset: 3px; }
hr { border: 0; border-top: var(--feine-linie); margin: var(--vorschub) 0; }
::selection { background: var(--kupfer); color: var(--dunkelkammer); }

/* Les six tonwerte se posent sur une page entiere, un randstreifen ou une entree de
   flux. Elles ne changent que la variable, jamais une regle. */
.bln-t1 { --tonwert: var(--platte-1); }
.bln-t2 { --tonwert: var(--platte-2); }
.bln-t3 { --tonwert: var(--platte-3); }
.bln-t4 { --tonwert: var(--platte-4); }
.bln-t5 { --tonwert: var(--platte-5); }
.bln-t6 { --tonwert: var(--platte-6); }

/* Chiffres, dates, cotes et cellules en chasse tabulaire. */
.bln-vergleichsreihe, .bln-aufnahmedaten, .bln-messreihe, .bln-zeitmarke, .bln-randnotizen,
.bln-platte__nummer, .bln-abzug__vermerk, .bln-randstreifen__index {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   OSSATURE
   ========================================================================= */

.bln-vorlauf {
  position: absolute; left: -9999px; top: 0;
  background: var(--kupfer); color: var(--dunkelkammer);
  font-family: var(--schrift-titel);
  padding: 0.65rem 1.1rem; z-index: 60;
}
.bln-vorlauf:focus { left: 0.5rem; top: 0.5rem; }

/* La bildfeld : largeur utile de chaque zone de contenu. */
.bln-bildfeld {
  width: 100%;
  max-width: var(--ganze-breite);
  margin-inline: auto;
  padding-inline: var(--randverlust);
}

/* --- Le vorsatz : l en-aufmacher, ce qu on regle avant de tirer ---------------- */
.bln-vorsatz {
  background: var(--dunkelkammer);
  border-bottom: 1px solid var(--filmkante);
  padding-block: clamp(0.5rem, 1.1vw, 0.78rem);
}
.bln-vorsatz__zeile {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.5rem 1.8rem;
}
.bln-vorsatz__name { display: inline-block; text-decoration: none; }
.bln-vorsatz__siegel {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.62rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--baryt);
  transition: color var(--belichtungsdauer);
}
.bln-vorsatz__siegel::before {             /* le trait de ausschnitt, seul ornement du wordmark */
  content: "";
  width: 1.05rem; height: 1.05rem;
  border-left: 2px solid var(--kupfer);
  border-bottom: 2px solid var(--kupfer);
  flex: none;
}
.bln-vorsatz__name:hover .bln-vorsatz__siegel { color: #fff; }
.bln-vorsatz__unterzeile {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  color: var(--baryt-matt);
  margin-top: 0.18rem;
  padding-left: 1.65rem;
}
.bln-filmstreifen ul {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 1.15rem;
  list-style: none; margin: 0; padding: 0;
}
.bln-filmstreifen a {
  font-family: var(--schrift-titel);
  font-size: 0.83rem;
  letter-spacing: 0.055em;
  color: var(--baryt-matt);
  text-decoration: none;
  padding-block: 0.28rem;
  border-bottom: 2px solid transparent;
  transition: color var(--belichtungsdauer), border-color var(--belichtungsdauer);
}
.bln-filmstreifen a:hover { color: var(--baryt); border-bottom-color: var(--tonwert); }

/* --- Le filmweg : le fil d Ariane ---------------------------------------- */
.bln-filmweg { padding-block: clamp(0.75rem, 1.6vw, 1.15rem); }
.bln-filmweg ol {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  color: var(--baryt-matt);
}
.bln-filmweg li + li::before { content: "/"; margin-right: 0.5rem; color: var(--filmkante); }
.bln-filmweg a { color: var(--baryt-matt); text-decoration: none; }
.bln-filmweg a:hover { color: var(--kupfer); text-decoration: underline; }
.bln-filmweg [aria-current="page"] { color: var(--baryt); }

/* =========================================================================
   STARTSEITE · LE TITELBILD EN DEUX COLONNES (rhabillage 06.09.2026) :
   la bildfeld de texte a gauche sur fond de chambre, l image en colonne
   droite, le graufilter en raccord de lisibilite cote texte. Sur mobile,
   l ordre du DOM l emporte : image d abord, texte dessous.
   ========================================================================= */

.bln-titelbild {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-bottom: 1px solid var(--filmkante);
  background: var(--vorraum);
}
.bln-titelbild__lichtbild {
  grid-column: 2; grid-row: 1;
  width: 100%; height: 100%; min-height: 24rem;
  object-fit: cover;
  z-index: 0;
}
/* L graufilter : couleurs EN DUR par doctrine, jamais un var(). Il ne voile
   plus tout : il raccorde le bord gauche de l image au fond de la chambre. */
.bln-graufilter {
  grid-column: 2; grid-row: 1;
  background: linear-gradient(90deg, rgba(33, 44, 56, 0.96) 0%, rgba(33, 44, 56, 0.3) 34%, rgba(24, 32, 41, 0.12) 100%);
  z-index: 1;
}
.bln-titelbild__text {
  grid-column: 1; grid-row: 1;
  z-index: 2;
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.05rem, 2.2vw, 1.6rem);
  max-width: 60rem;
}
.bln-titelbild__text h1 {
  max-width: 22ch;
  color: #f4f1e9;
}
.bln-titelbild__anriss {
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.18rem);
  line-height: 1.5;
  max-width: 58ch;
  color: var(--baryt);
  margin: 0.8rem 0 0;
}

/* L messreihe : trois reperes chiffres, en pile etroite sous le anriss
   (le split laisse moins de largeur : la pile remplace la ligne). */
.bln-messreihe {
  display: grid;
  gap: 0.32rem 2.4rem;
  list-style: none;
  margin: 1.15rem 0 0; padding: 0.8rem 0 0;
  border-top: 2px solid var(--kupfer);
  max-width: 30rem;
}
.bln-messreihe li { display: flex; align-items: baseline; gap: 0.55rem; padding-block: 0.15rem; }
.bln-messreihe b {
  font-family: var(--schrift-zahl);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--kupfer);
  letter-spacing: -0.02em;
}
.bln-messreihe span {
  font-family: var(--schrift-titel);
  font-size: 0.72rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--baryt-matt);
}

/* =========================================================================
   LES FASCICULES · les sections de l startseite, numerotees
   ========================================================================= */

.bln-platte { padding-block: clamp(1.25rem, 2.6vw, 2.2rem); }
.bln-platte--tief { background: var(--vorraum); border-block: 1px solid var(--filmkante); }
.bln-platte__aufmacher {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.4rem 2rem;
  border-bottom: 2px solid var(--filmkante);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(0.95rem, 2vw, 1.5rem);
}
.bln-platte__nummer {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--kupfer);
  margin-bottom: 0.42rem;
}
.bln-platte__ueberschrift { font-size: var(--groesse-h2); }
.bln-platte__bildunterschrift {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  margin: 0;
  color: var(--baryt-matt);
  font-size: 0.9rem;
  max-width: 40ch;
}

/* Le schnitt : le pli qui separe deux grandes sections. */
.bln-schnitt {
  display: flex; justify-content: center;
  padding-block: clamp(0.3rem, 1vw, 0.9rem);
  color: var(--sicherlicht);
}

/* L blende : le repere imprime en marge, devenu surtitre. */
.bln-blende {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--schrift-titel);
  font-size: 0.71rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--tonwert);
  margin: 0 0 0.6rem;
}
.bln-blende::before {
  content: "";
  width: 1.5rem; height: 0;
  border-top: 2px solid currentColor;
  flex: none;
}

/* =========================================================================
   L KONTAKTBOGEN · la mosaique de typons (les cartes). Sur l startseite, la
   section des six bereiche (bln-platte--bereiche, posee par le generateur)
   ne l emploie PAS en mosaique : chaque abzug devient une ligne a filet,
   vignette a gauche, titre et description a droite. C est le levier de
   rhytme le plus visible du rhabillage.
   ========================================================================= */

.bln-kontaktbogen {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--zwischenraum);
  list-style: none; margin: 0; padding: 0;
}

.bln-platte--bereiche .bln-kontaktbogen { display: block; }
.bln-platte--bereiche .bln-abzug {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 0 clamp(1.1rem, 2.6vw, 2.4rem);
  align-items: center;
  padding-block: 0.95rem;
}
.bln-platte--bereiche .bln-abzug__ausschnitt { aspect-ratio: 4 / 3; align-self: center; }
.bln-platte--bereiche .bln-abzug__bildtext { padding-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.bln-platte--bereiche .bln-abzug__ueberschrift { font-size: clamp(1.16rem, 1.05rem + 0.5vw, 1.5rem); margin: 0; }
.bln-platte--bereiche .bln-abzug__bildunterschrift { flex-basis: 100%; max-width: 62ch; margin-top: 0.15rem; }
.bln-platte--bereiche .bln-abzug__vermerk { margin-top: 0; }
.bln-abzug {
  margin: 0;
  --tonwert: var(--kupfer);
  border-top: 3px solid var(--tonwert);
  padding-top: 0.85rem;
}
.bln-abzug--t1 { --tonwert: var(--platte-1); }
.bln-abzug--t2 { --tonwert: var(--platte-2); }
.bln-abzug--t3 { --tonwert: var(--platte-3); }
.bln-abzug--t4 { --tonwert: var(--platte-4); }
.bln-abzug--t5 { --tonwert: var(--platte-5); }
.bln-abzug--t6 { --tonwert: var(--platte-6); }
.bln-abzug--ganz { grid-column: span 12; }
.bln-abzug--drittel  { grid-column: span 4; }
.bln-abzug--viertel  { grid-column: span 3; }
.bln-abzug--halb   { grid-column: span 6; }

.bln-abzug__ausschnitt {
  position: relative;
  overflow: hidden;
  background: var(--vorraum);
  border: 1px solid var(--filmkante);
}
.bln-abzug__ausschnitt--quer { aspect-ratio: 4 / 3; }
.bln-abzug__ausschnitt--streifen   { aspect-ratio: 16 / 9; }
.bln-abzug__ausschnitt--quadrat   { aspect-ratio: 1 / 1; }
.bln-abzug__motiv {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--belichtungsdauer);
}
.bln-abzug:hover .bln-abzug__motiv { opacity: 0.86; }
.bln-abzug__bildtext { padding-top: 0.7rem; }
.bln-abzug__ueberschrift { margin: 0 0 0.32rem; }
.bln-abzug__lien {
  color: var(--baryt);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--belichtungsdauer), border-color var(--belichtungsdauer);
}
.bln-abzug__lien:hover { color: var(--tonwert); border-bottom-color: var(--tonwert); }
.bln-abzug__bildunterschrift { margin: 0; color: var(--baryt-matt); font-size: 0.92rem; line-height: 1.48; }
.bln-abzug__vermerk {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--schrift-zahl);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tonwert);
  border: 1px solid currentColor;
  padding: 0.1rem 0.45rem;
}

/* =========================================================================
   L BILDFOLGE · le flux date, liste dense a filets (une ligne par entree,
   zeitmarke a gauche en chasse fixe, vignette reduite, aucune lettrine)
   ========================================================================= */

.bln-bildfolge { list-style: none; margin: 0; padding: 0; border-top: var(--feine-linie); }
.bln-einzelbild {
  display: grid;
  grid-template-columns: 7.2rem 5.4rem 1fr;
  align-items: start;
  gap: 0 1.15rem;
  padding-block: 0.72rem;
  border-bottom: var(--feine-linie);
  margin: 0;
}
.bln-einzelbild:hover { background: var(--vorraum); }
.bln-zeitmarke {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: 0.78rem;
  color: var(--baryt-matt);
  padding-top: 0.18rem;
}
.bln-einzelbild__motiv {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--filmkante);
}
.bln-einzelbild h3 { margin: 0 0 0.2rem; font-size: 1.06rem; }
.bln-einzelbild h3 a { color: var(--baryt); text-decoration: none; }
.bln-einzelbild h3 a:hover { color: var(--kupfer); text-decoration: underline; }
.bln-einzelbild__bildunterschrift { margin: 0; color: var(--baryt-matt); font-size: 0.9rem; line-height: 1.46; }
.bln-einzelbild__bereich {
  font-family: var(--schrift-titel);
  font-size: 0.67rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--tonwert);
  margin-left: 0.6rem;
}

/* =========================================================================
   PAGES INTERIEURES · le lichttisch, le randstreifen collant, la lesebreite
   ========================================================================= */

.bln-lichttisch { display: block; padding-bottom: var(--vorschub); }
.bln-bildkopf { padding-block: clamp(0.3rem, 1.2vw, 0.9rem) clamp(1.15rem, 2.6vw, 1.9rem); max-width: 56rem; }
.bln-bildkopf h1 { max-width: 22ch; }
.bln-bildkopf__anriss {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem);
  line-height: 1.5;
  color: var(--baryt-matt);
  max-width: 58ch;
  margin: 0.85rem 0 0;
}
.bln-randnotizen {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  list-style: none; margin: 1rem 0 0; padding: 0.75rem 0 0;
  border-top: var(--feine-linie);
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
  color: var(--baryt-matt);
}
.bln-randnotizen a { color: var(--baryt-matt); }
.bln-randnotizen a:hover { color: var(--kupfer); }

/* La ausschnitt : le format d image. En aufmacher de page elle prend une streifen weit
   pour que le text suivant reste dans le premier ecran. */
.bln-ausschnitt { margin: 0; }
.bln-ausschnitt__motiv {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--filmkante);
}
.bln-ausschnitt--aufmacher .bln-ausschnitt__motiv { aspect-ratio: 21 / 9; max-height: 26rem; }
.bln-ausschnitt figcaption {
  margin-top: 0.5rem;
  font-size: 0.83rem;
  color: var(--baryt-matt);
  border-left: 3px solid var(--tonwert);
  padding-left: 0.7rem;
}

/* Le aufbau a deux colonnes : randstreifen collant a GAUCHE, lecture a droite. */
.bln-lichttisch__aufbau {
  display: grid;
  grid-template-columns: var(--randstreifen-breite) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3.4vw, 3.4rem);
  padding-block: clamp(1.3rem, 2.8vw, 2.2rem) 0;
  align-items: start;
}
.bln-randstreifen {
  position: sticky; top: 1.4rem;
  min-width: 0;
  border-top: 3px solid var(--tonwert);
  padding-top: 0.85rem;
  font-size: 0.86rem;
}
.bln-randstreifen__index {
  font-family: var(--schrift-zahl);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--tonwert);
  margin: 0 0 0.6rem;
}
.bln-randstreifen h2 {
  font-size: 0.72rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--baryt-matt);
  margin: 0 0 0.55rem;
}
.bln-randstreifen ul { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.bln-randstreifen li { padding-block: 0.22rem; border-bottom: var(--feine-linie); }
.bln-randstreifen li:last-child { border-bottom: 0; }
.bln-randstreifen a { color: var(--baryt-matt); text-decoration: none; }
.bln-randstreifen a:hover { color: var(--kupfer); text-decoration: underline; }

.bln-lesefeld { max-width: var(--lesebreite); min-width: 0; }
.bln-lesefeld > * + * { margin-top: 0.95em; }
.bln-lesefeld h2 {
  margin-top: 1.7em;
  padding-left: 0.75rem;
  border-left: 4px solid var(--tonwert);
}
.bln-lesefeld h3 { margin-top: 1.3em; color: var(--baryt); }
.bln-lesefeld ul, .bln-lesefeld ol { padding-left: 1.3rem; }
.bln-lesefeld li::marker { color: var(--sicherlicht); }
.bln-lesefeld li + li { margin-top: 0.42em; }
.bln-lesefeld strong { color: #fff; }
.bln-lesefeld--einzeln { max-width: 60ch; padding-block: clamp(1rem, 2.4vw, 1.9rem) 0; }
.bln-lesefeld--weit { max-width: none; padding-block: clamp(1.2rem, 2.6vw, 2rem) 0; }

/* La aufnahmedaten : la fiche technique en aufmacher d une fiche de support. */
.bln-aufnahmedaten {
  margin: 1.6em 0;
  background: var(--vergroesserer);
  border: 1px solid var(--filmkante);
  border-left: 4px solid var(--tonwert);
  padding: 1.05rem 1.2rem 1.15rem;
}
.bln-aufnahmedaten h2 {
  font-family: var(--schrift-titel);
  font-size: 0.74rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--tonwert);
  margin: 0 0 0.75rem;
  padding: 0; border: 0;
}
.bln-aufnahmedaten dl {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 0;
  margin: 0;
  font-size: 0.93rem;
}
.bln-aufnahmedaten dt {
  font-family: var(--schrift-titel);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--baryt-matt);
  padding: 0.42rem 0.8rem 0.42rem 0;
  border-top: var(--feine-linie);
}
.bln-aufnahmedaten dd {
  margin: 0;
  padding: 0.42rem 0;
  border-top: var(--feine-linie);
  color: var(--baryt);
}
.bln-aufnahmedaten dl > dt:first-child, .bln-aufnahmedaten dl > dt:first-child + dd { border-top: 0; }
.bln-aufnahmedaten dd:empty::after { content: "à compléter"; color: var(--filmkante); font-style: italic; }
.bln-aufnahmedaten__hinweis {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: var(--feine-linie);
  font-size: 0.85rem;
  color: var(--baryt-matt);
}

/* L warnlicht : le point de vigilance, perce dans la marge. */
.bln-warnlicht {
  background: var(--vorraum);
  border: 1px solid var(--filmkante);
  border-left: 4px solid var(--sicherlicht);
  padding: 0.95rem 1.15rem;
  font-size: 0.96em;
}
.bln-warnlicht p { margin: 0; }
.bln-warnlicht p + p { margin-top: 0.6rem; }

/* Le bon a tirer : la check-list avant de lancer. */
.bln-abnahme {
  list-style: none;
  background: var(--vergroesserer);
  border: 1px solid var(--filmkante);
  padding: 0.95rem 1.2rem 0.95rem 2.5rem;
  font-size: 0.96em;
}
.bln-lesefeld ul.bln-abnahme { padding-left: 2.5rem; }
.bln-abnahme li { position: relative; }
.bln-abnahme li::before {
  content: "";
  position: absolute; left: -1.35rem; top: 0.45em;
  width: 0.7rem; height: 0.7rem;
  border: 2px solid var(--tonwert);
}

/* La vergleichsreihe : le tableau du repertoire. Il defile DANS son
   conteneur ; la page ne defile jamais horizontalement. */
.bln-vergleichsreihe {
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--filmkante);
}
.bln-vergleichsreihe table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 86rem;
  font-size: 0.87rem;
  font-family: var(--schrift-text);
}
.bln-vergleichsreihe caption {
  caption-side: top;
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-family: var(--schrift-titel);
  font-size: 0.73rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--kupfer);
  background: var(--vorraum);
  border-bottom: 1px solid var(--filmkante);
}
.bln-vergleichsreihe th, .bln-vergleichsreihe td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--filmkante);
  vertical-align: top;
}
.bln-vergleichsreihe thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--vergroesserer);
  color: var(--baryt);
  font-family: var(--schrift-titel);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid var(--kupfer);
}
/* Les deux premieres colonnes restent visibles quand le reste defile. */
.bln-vergleichsreihe th:nth-child(1), .bln-vergleichsreihe td:nth-child(1) {
  position: sticky; left: 0; z-index: 2;
  background: var(--vorraum);
  width: 9.5rem; min-width: 9.5rem;
  border-right: 1px solid var(--filmkante);
}
.bln-vergleichsreihe th:nth-child(2), .bln-vergleichsreihe td:nth-child(2) {
  position: sticky; left: 9.5rem; z-index: 2;
  background: var(--vorraum);
  width: 6.5rem; min-width: 6.5rem;
  border-right: 1px solid var(--filmkante);
}
.bln-vergleichsreihe thead th:nth-child(1), .bln-vergleichsreihe thead th:nth-child(2) { z-index: 4; background: var(--vergroesserer); }
.bln-vergleichsreihe tbody tr:nth-child(even) td { background: rgba(38, 51, 46, 0.42); }
.bln-vergleichsreihe tbody tr:nth-child(even) td:nth-child(-n+2) { background: #223029; }
.bln-vergleichsreihe tbody td:empty::after { content: "à compléter"; color: var(--filmkante); font-style: italic; white-space: nowrap; }
.bln-vergleichsreihe tbody td { min-width: 8.5rem; }
.bln-vergleichsreihe--ganz { margin-inline: 0; }
.bln-vergleichsreihe tbody th a { color: var(--baryt); text-decoration: none; border-bottom: 1px solid var(--filmkante); }
.bln-vergleichsreihe tbody th a:hover { color: var(--kupfer); border-bottom-color: var(--kupfer); }
.bln-vergleichsreihe tbody th { font-weight: 600; font-family: var(--schrift-titel); }

/* Le uebergang : les deux les qui se rejoignent, donc a lire ensuite. */
.bln-uebergang {
  margin-top: 2.2em;
  padding-top: 1.1rem;
  border-top: 2px solid var(--tonwert);
}
.bln-uebergang h2 {
  font-family: var(--schrift-titel);
  font-size: 0.75rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--baryt-matt);
  margin: 0 0 0.6rem;
  padding: 0; border: 0;
}
.bln-uebergang ul { list-style: none; margin: 0; padding: 0; }
.bln-uebergang li { padding: 0.3rem 0; border-bottom: var(--feine-linie); }
.bln-uebergang li:last-child { border-bottom: 0; }

/* Le nachweis : methode, sources et signature en fuss d article. */
.bln-nachweis {
  margin-top: 2.2em;
  background: var(--vorraum);
  border: 1px solid var(--filmkante);
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  color: var(--baryt-matt);
}
.bln-nachweis h2 {
  font-family: var(--schrift-titel);
  font-size: 0.73rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--kupfer);
  margin: 0 0 0.5rem;
  padding: 0; border: 0;
}
.bln-nachweis p { margin: 0; }
.bln-nachweis p + p { margin-top: 0.5rem; }

/* =========================================================================
   LE ABSPANN · le fuss de page, la ou tout est rogne
   ========================================================================= */

.bln-abspann {
  margin-top: var(--vorschub);
  background: var(--vorraum);
  border-top: 3px solid var(--kupfer);
}
.bln-abspann__zeile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--zwischenraum) * 1.6);
  padding-block: clamp(1.7rem, 3.8vw, 2.7rem);
}
.bln-abspann h2 {
  font-family: var(--schrift-titel);
  font-size: 0.74rem;
  letter-spacing: var(--abstand-kapitaelchen);
  text-transform: uppercase;
  color: var(--kupfer);
  margin-bottom: 0.7rem;
}
.bln-abspann ul { list-style: none; margin: 0; padding: 0; }
.bln-abspann li { padding-block: 0.2rem; }
.bln-abspann a { color: var(--baryt-matt); text-decoration: none; }
.bln-abspann a:hover { color: var(--baryt); text-decoration: underline; }
.bln-abspann__fuss {
  border-top: 1px solid var(--filmkante);
  padding-block: 1rem;
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  color: var(--baryt-matt);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.9rem;
}
.bln-abspann__fuss .bln-wasserzeichen { color: var(--kupfer); }

/* =========================================================================
   ADAPTATION
   ========================================================================= */

@media (max-width: 1080px) {
  .bln-lichttisch__aufbau { grid-template-columns: minmax(0, 1fr); }
  .bln-randstreifen {
    position: static;
    display: flex; flex-wrap: wrap;
    gap: 0 2rem;
    margin-bottom: 1.4rem;
  }
  .bln-randstreifen ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-bottom: 0.5rem; }
  .bln-randstreifen li { border-bottom: 0; }
  .bln-abzug--drittel { grid-column: span 6; }
  .bln-abzug--viertel { grid-column: span 6; }
}

@media (max-width: 900px) {
  .bln-titelbild { grid-template-columns: minmax(0, 1fr); background: var(--dunkelkammer); }
  .bln-titelbild__lichtbild { grid-column: 1; grid-row: 1; min-height: 15rem; max-height: 22rem; }
  .bln-graufilter { grid-column: 1; grid-row: 1; background: linear-gradient(180deg, rgba(33, 44, 56, 0) 40%, rgba(24, 32, 41, 0.55) 100%); }
  .bln-titelbild__text { grid-column: 1; grid-row: 2; }
}

@media (max-width: 760px) {
  .bln-abzug--drittel, .bln-abzug--viertel, .bln-abzug--halb { grid-column: span 12; }
  .bln-abspann__zeile { grid-template-columns: 1fr; }
  .bln-platte__aufmacher { grid-template-columns: 1fr; align-items: start; }
  .bln-platte__bildunterschrift { grid-column: 1; justify-self: start; text-align: left; margin-top: 0.45rem; max-width: 60ch; }
  .bln-einzelbild { grid-template-columns: 4.8rem minmax(0, 1fr); column-gap: 0.9rem; }
  .bln-platte--bereiche .bln-abzug { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .bln-platte--bereiche .bln-abzug__ausschnitt { aspect-ratio: 16 / 9; }
  .bln-einzelbild__motiv { grid-column: 1; grid-row: 1 / span 2; }
  .bln-zeitmarke { grid-column: 2; grid-row: 1; }
  .bln-einzelbild > div { grid-column: 2; grid-row: 2; }
  .bln-aufnahmedaten dl { grid-template-columns: 1fr; }
  .bln-aufnahmedaten dd { border-top: 0; padding-top: 0; padding-bottom: 0.5rem; }
  .bln-messreihe { gap: 0 1.5rem; }
  .bln-titelbild__text { padding-block: 1.9rem 1.5rem; }
  .bln-vergleichsreihe table { min-width: 62rem; }
}

@media (max-width: 480px) {
  .bln-vorsatz__zeile { align-items: flex-start; }
  .bln-filmstreifen ul { gap: 0.25rem 0.85rem; }
  .bln-messreihe li { flex-basis: 100%; }
}

/* Courtoisie du mouvement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Impression : une bildfolge sur papier. */
@media print {
  .bln-vorsatz, .bln-abspann, .bln-vorlauf, .bln-filmweg, .bln-schnitt, .bln-randstreifen { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .bln-lesefeld { max-width: none; }
  .bln-aufnahmedaten, .bln-warnlicht, .bln-abnahme, .bln-nachweis { background: #fff; color: #000; border: 1pt solid #000; }
  .bln-graufilter { background: rgba(24, 32, 41, 0.94); }
}