/* ============================================================
   LACUNE — assets/css/lacune.css
   Das einzige Stylesheet. Werte oben, alles andere folgt daraus.

   Quellen im Vault:
     02 Identity/Colour Archive.md          → Farbwerte, Kontraste
     02 Identity/Typography & Marks.md      → Satzregeln, Verbote
     02 Identity/Visual Language.md         → Bildhaltung
     07 Release/Webshop, Shipping & Stack.md → Struktur
   ============================================================ */

/* ---------- 1 · Werte ------------------------------------- */

:root {
  /* Colour Archive — Digitalwerte. Nur für Bildschirme, nie für Stoff. */
  --noir:    #1A1A18;   /* NOIR LAVÉ    Typo, Grund der Website */
  --fumee:   #2C2E2D;   /* FUMÉE        Sekundärflächen */
  --ardoise: #454A4C;   /* ARDOISE      Linien, Rahmen */
  --cendre:  #8C8A85;   /* CENDRE       Sekundärtext */
  --pierre:  #A9A196;   /* PIERRE       Linien und Trenner, Mark-Grund */
  --os:      #E5DFD1;   /* OS           Text auf dunkel, Papierflächen */
  --blanc:   #EFEDE7;   /* BLANC CASSÉ  Heller Grund */
  --terre:   #6E6459;   /* TERRE MORTE  Akzent */

  /* ---- NACHT — Vorgabe, gilt auch ohne JavaScript --------
     Grund NOIR LAVÉ, Typo OS. Colour Archive, Digitalwerte. */
  --ground:  var(--noir);
  --ink:     var(--os);      /* 13,1 : 1 */
  --ink-2:   var(--cendre);  /*  5,1 : 1 */
  --rule:    var(--ardoise);
  --plate:   var(--fumee);   /* Grund einer Bildfläche, bis das Bild da ist */
  --ph:      var(--pierre);  /* Platzhalterfelder in den Rechtstexten */

  /* ---- SWAP-PUNKT ----------------------------------------
     Hier und nur hier werden die lizenzierten Schnitte
     eingetragen, sobald sie da sind. Zwei Familien. Nie drei.
     -------------------------------------------------------- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --grotesque: "Helvetica Neue", Helvetica, Arial, system-ui,
               -apple-system, "Segoe UI", sans-serif;

  --measure: 58ch;                              /* 45–60 Zeichen */
  --gut:  clamp(1.25rem, 4vw, 2.5rem);
  --step: clamp(3.25rem, 8vw, 6rem);
  --hair: 1px solid var(--rule);

  color-scheme: dark;
}

/* ---- TAG — 07:30 bis 20:00 Ortszeit ----------------------
   Umgeschaltet von assets/js/theme.js, ohne Schalter für den
   Besucher. Grund BLANC CASSÉ („Heller Grund"), Typo NOIR LAVÉ,
   Linien PIERRE — die Zuordnung steht so im Colour Archive und
   in Typography & Marks, Abschnitt „Colour of the graphic system".
   Gemessene Kontraste auf BLANC CASSÉ:
     NOIR LAVÉ   14,9 : 1
     TERRE MORTE  4,9 : 1   Sekundärtext, über der AA-Schwelle
     PIERRE       2,2 : 1   nur Linien, nie Text                 */
html.day {
  --ground:  var(--blanc);
  --ink:     var(--noir);
  --ink-2:   var(--terre);
  --rule:    var(--pierre);
  --plate:   var(--pierre);
  --ph:      var(--terre);

  color-scheme: light;
}

/* ---------- 1b · Der Loader ------------------------------- */
/* Die Patte d'Oie näht sich selbst — 26 Sehnen, von aussen nach
   innen. Grund und Faden folgen dem Farbschema, der Loader ist
   also bei Tag hell und bei Nacht dunkel.

   Er steht im HTML, wird aber ausschliesslich über die Klasse
   `is-loading` sichtbar, und die setzt assets/js/theme.js.
   Ohne JavaScript erscheint er nie — statt für immer zu bleiben.
   Gezeigt wird er nur, wenn wirklich etwas zu laden ist.        */

#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ground);
}

.is-loading #loader { display: flex; }
.is-loading { overflow: hidden; }

#loader.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 560ms linear;
}

#loader svg {
  width: clamp(64px, 13vw, 96px);
  height: auto;
}

#loader line {
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linecap: round;
}

/* ---------- 2 · Grundlagen -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  /* Wechselt die Ortszeit über 09:00 oder 21:00, während jemand
     die Seite offen hat, gleitet die Farbe hinüber statt zu springen. */
  transition: background-color 900ms ease, color 900ms ease;
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;   /* Ziffern im Text: mediäval */
  overflow-x: hidden;
}

/* Emphasis ist kursiv. Fett ist Schreien. */
b, strong, th { font-weight: 400; }
em, i, strong, b { font-style: italic; }

h1, h2, h3, h4 {
  font-weight: 400;
  font-size: inherit;
  margin: 0;
  line-height: 1.25;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

a.u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule);
}
a.u:hover { text-decoration-color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

hr {
  border: 0;
  border-top: var(--hair);
  margin: var(--step) 0;
}

::selection { background: var(--ink); color: var(--ground); }

/* ---------- 3 · Satz-Bausteine ---------------------------- */

/* Grotesk. Nur Zahlen, Größen, technische Angaben. Nichts sonst. */
.g {
  font-family: var(--grotesque);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

.g--plain { text-transform: none; letter-spacing: 0.05em; }

.meta { color: var(--ink-2); }

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.45;
}

/* Fragmente. Zeilenumbruch trägt mehr als ein Punkt. */
.frag {
  max-width: 34ch;
  line-height: 1.5;
}

.quiet { color: var(--ink-2); }

.page-title {
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 0.12em;
  line-height: 1;
}

/* Nur für Screenreader. Kein display:none — das würde sie verbergen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 4 · Gerüst ------------------------------------ */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap--narrow { max-width: 780px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ground);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- 5 · Kopf -------------------------------------- */

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 7vw, 5rem);
}

/* Wortmarke: Serif, Versalien, getrackt, kein Zeichen daneben. */
.wordmark {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1;
  white-space: nowrap;
}

/* Untergrenze bewusst niedrig: die Wortmarke ist nowrap und getrackt,
   sie muss auch auf einem 320-px-Gerät mit einer breiteren Ersatzserife
   in den Satzspiegel passen. */
.wordmark--large {
  font-size: clamp(2.35rem, 13vw, 6.5rem);
  letter-spacing: 0.14em;
}

/* Das ✳ ist kein Icon, sondern die Fußnote des Namens.
   Als Inline-SVG gesetzt, damit es auf keiner Plattform
   zum Emoji wird. */
.ast {
  width: 0.42em;
  height: 0.42em;
  display: inline-block;
  vertical-align: 0.55em;
  margin-left: 0.06em;
  fill: var(--ink-2);
}
.wordmark--large .ast { vertical-align: 0.9em; width: 0.3em; height: 0.3em; }

.nav {
  display: flex;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  align-items: baseline;
}

.nav a { color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* ---------- 6 · Bildplatten ------------------------------- */

.plate {
  display: block;
  background: var(--plate);
  overflow: hidden;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plate--45 { aspect-ratio: 4 / 5; }

/* ---------- 7 · Startseite -------------------------------- */
/* ein Bild. ein Wort. ein Mailfeld. */

.opening {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  padding-block: clamp(1.5rem, 5vw, 3rem) var(--step);
}

.opening__word { display: block; }

.opening__entry {
  margin-top: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
}

.opening__entry .num {
  font-size: 1.05rem;
  letter-spacing: 0.2em;
}

/* Der zweite Eingang. Die Startseite trägt bewusst keine Kopfzeile,
   damit fehlt ihr auch deren Weg ins Archiv. Er steht deshalb direkt
   unter dem Chapter — kleiner, in genau der Behandlung, die der
   Archiv-Link in der Kopfzeile jeder anderen Seite hat. */
.opening__archive {
  margin: 0.6rem 0 0;
  color: var(--ink-2);
}

.opening__archive a:hover { color: var(--ink); }

@media (min-width: 900px) {
  .opening {
    /* Die Wortspalte etwas breiter als die Bildspalte: die Wortmarke ist
       nowrap und getrackt und muss in jeder Ersatzserife Platz haben. */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    min-height: 100svh;
    gap: clamp(3rem, 7vw, 6rem);
  }
  /* An die Spalte gebunden, nicht ans Fenster — sonst wächst die Marke
     über 1200 px weiter, während die Spalte stehen bleibt. */
  .wordmark--large { font-size: min(5.5rem, 7.2vw); }
  /* Das Bild bleibt vollständig sichtbar. Die Box behält das
     Seitenverhältnis der Aufnahme (4:5) und wird nur in der Höhe
     begrenzt, damit der Eingang und das Mailfeld über der Falz
     bleiben — dabei schrumpft die Breite mit, statt zu beschneiden.
     Ist das Bild dadurch schmaler als seine Spalte, steht es mittig. */
  .opening__image .plate {
    max-height: 74svh;
    margin-inline: auto;
  }
}

/* ---------- 8 · Mailfeld ---------------------------------- */
/* ein Feld. Kein Popup, kein Anreiz, kein Rabatt. */

.mail {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  max-width: 26rem;
}

.mail__row {
  display: flex;
  align-items: stretch;
  border-bottom: var(--hair);
}

.mail input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--grotesque);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.25rem;
}

.mail input::placeholder { color: var(--ink-2); opacity: 1; }
.mail input:focus { outline: none; }
.mail__row:focus-within { border-bottom-color: var(--ink); }

.mail button {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.65rem 0 0.65rem 1rem;
}
.mail button:hover { color: var(--ink); }

/* ---------- 9 · Chapter ----------------------------------- */

.chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.1rem;
  border-bottom: var(--hair);
  margin-bottom: var(--step);
}

.chapter-head .num {
  font-size: clamp(2rem, 8vw, 3.25rem);
  letter-spacing: 0.1em;
  line-height: 1;
}

.pieces {
  display: grid;
  gap: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: var(--step);
}

/* Drei nebeneinander, sobald Platz ist — das Chapter ist ein Look aus
   drei Teilen und soll als Kontaktbogen lesbar sein. Darunter gestapelt. */
@media (min-width: 700px) {
  .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.piece__name {
  margin-top: 1.15rem;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.piece__lines {
  margin-top: 0.55rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.piece__price {
  margin-top: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.piece a:hover .plate img { opacity: 0.86; }
.plate img { transition: opacity 120ms linear; }

/* ---------- 10 · Produktseite ----------------------------- */
/* Eine Spalte, mittig. Die Bilder tragen die Seite, alles andere
   steht darunter und ist linksbündig — Satzregel aus
   02 Identity/Typography & Marks.md.                          */

.pdp {
  max-width: 40rem;
  margin-inline: auto;
  padding-bottom: var(--step);
}

/* Ohne min-width:0 zwingt die Mindestbreite der Maßtabelle die
   Spalte auf, und die Seite scrollt horizontal statt der Tabelle. */
.pdp > *, .measures__scroll { min-width: 0; }

/* Eine Aufnahme steht groß, die übrigen darunter klein. Ein Klick
   tauscht die Bilder zwischen den Kästen — die Kästen selbst bleiben
   stehen, wo sie sind.

   Das ist der Punkt: würden die Kästen umsortiert, verschiebt sich
   das angeklickte Element um die Höhe des großen Bildes, und der
   Browser rechnet diese Verschiebung per Scroll Anchoring aus dem
   Scrollstand heraus. Man landet dann schlagartig woanders auf der
   Seite. Weil hier nichts umzieht, gibt es nichts zu korrigieren.  */
.pdp__gallery {
  display: grid;
  gap: clamp(0.4rem, 1.2vw, 0.75rem);
  overflow-anchor: none;
}

.pdp__main { margin: 0; }

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.2vw, 0.75rem);
}

.shot {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: opacity 120ms linear;
}

.shot:hover { opacity: 0.78; }

.pdp__head { margin-top: clamp(2rem, 5vw, 3rem); }

/* Der Produktname ist die einzige fette Stelle der ganzen Seite.
   Ausdrücklich gewünscht, bewusst gegen die Regel „never bold".
   Zurück zur Doktrin: font-weight auf 400 setzen.               */
.pdp__name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.05;
}

.pdp__kind {
  margin-top: 0.6rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* Die Farbe. Nicht fett — der Gegensatz zum Namen ist die Aussage. */
.pdp__colour {
  margin-top: 0.2rem;
  font-weight: 400;
  font-size: 1.05rem;
}

.pdp__edition { margin-top: 1.15rem; }

/* Der Zweizeiler. Präzise, nicht kryptisch. Steht direkt vor dem
   Kauf und ist das Einzige auf der Seite, das nicht misst.       */
.pdp__line {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.5;
  max-width: 46ch;
}

/* ---------- 10b · Aufklappen ------------------------------ */
/* <details> statt Skript: funktioniert auch ohne JavaScript. */

.disclose {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: var(--hair);
  border-bottom: var(--hair);
}

.disclose summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  color: var(--ink-2);
  font-family: var(--grotesque);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 120ms linear;
}

.disclose summary::-webkit-details-marker { display: none; }
.disclose summary::after { content: "+"; font-size: 1.1em; line-height: 1; }
.disclose[open] summary::after { content: "\2212"; }
.disclose summary:hover { color: var(--ink); }
.disclose__body { padding-bottom: 1.75rem; }
.disclose__body > * + * { margin-top: 1.9rem; }

/* Fakten im Aufklapper. Keine Gefühle. */
.facts { line-height: 1.6; max-width: 42ch; }
.facts p { margin-top: 1.1rem; margin-bottom: 0; }

/* ---------- 11 · Maßtabelle ------------------------------- */
/* reine Zahlen, keine Empfehlung */

.measures__scroll {
  overflow-x: auto;
  margin-top: 1.1rem;
  -webkit-overflow-scrolling: touch;
}

table.m {
  border-collapse: collapse;
  width: 100%;
  min-width: 20rem;
  font-family: var(--grotesque);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

table.m th, table.m td {
  text-align: right;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

table.m th:first-child, table.m td:first-child {
  text-align: left;
  padding-left: 0;
  white-space: normal;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0;
}

table.m td:last-child, table.m th:last-child { padding-right: 0; }

table.m thead th {
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  padding-bottom: 0.7rem;
}

table.m caption {
  caption-side: bottom;
  text-align: left;
  color: var(--ink-2);
  font-size: 0.82rem;
  padding-top: 0.9rem;
}

/* ---------- 12 · Größen und Button ------------------------ */

.sizes {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  border: 0;
  padding: 0;
  margin-inline: 0;
}

.sizes legend {
  padding: 0;
  color: var(--ink-2);
  font-family: var(--grotesque);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sizes__row {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sizes input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.sizes label {
  cursor: pointer;
  border: var(--hair);
  padding: 0.65rem 1.15rem;
  font-family: var(--grotesque);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  min-width: 4.75rem;
  text-align: center;
  transition: color 120ms linear, border-color 120ms linear;
}

.sizes label:hover { color: var(--ink); border-color: var(--cendre); }

.sizes input:checked + label {
  color: var(--ground);
  background: var(--ink);
  border-color: var(--ink);
}

.sizes input:focus-visible + label { outline: 1px solid var(--ink); outline-offset: 3px; }

/* .buy-block trägt Preis und Button im Shop.
   .record ist dieselbe Zeile in der Werkfassung unter /archive/ —
   dort steht nur der Preis, ohne Größenwahl und ohne Button. */
.buy-block,
.record {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding-top: 1.6rem;
  border-top: var(--hair);
}

.price {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

/* ein Button */
.buy {
  margin-top: 1.1rem;
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: var(--hair);
  border-color: var(--cendre);
  padding: 1.05rem 1.5rem;
  font-family: var(--grotesque);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}

.buy:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* Vor der Größenwahl ist der Button da, aber tot — sichtbar tot,
   nicht heimlich. Freigeschaltet wird er in assets/js/lacune.js. */
.buy[disabled] {
  color: var(--ink-2);
  border-color: var(--rule);
  cursor: not-allowed;
}

.buy[disabled]:hover {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--rule);
}

/* Rückmeldung für alles, was noch nicht angeschlossen ist. */
.notice {
  margin-top: 0.85rem;
  min-height: 1.4em;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.shipping-note {
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---------- 13 · OPEN / CLOSED ---------------------------- */
/* Beide Zustände stehen im HTML. Umgeschaltet wird in
   assets/js/state.js — dort und nirgends sonst.            */

.state-closed { display: none; }
.is-closed .state-open { display: none; }
.is-closed .state-closed { display: block; }
.is-closed .state-closed.inline { display: inline; }

/* Ein Wort. Es steht dort, wo sonst der Button steht — der Preis
   darüber bleibt sichtbar. 07 Release/Webshop, Shipping & Stack.md */
.closed-word {
  margin-top: 1.15rem;
  font-family: var(--grotesque);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- 14 · Archiv ----------------------------------- */
/* Ein Chapter, ein Bild — in derselben Spaltenbreite wie die
   Piece-Seite, damit beide Seiten dieselbe Kante haben.
   Die Nummer sitzt bündig an der linken Bildkante, der Status
   bündig an der rechten.                                      */

.archive {
  max-width: 40rem;
  margin-inline: auto;
  padding-bottom: var(--step);   /* Luft bis zur Fußzeile, wie auf den anderen Seiten */
}

.chapters {
  display: grid;
  gap: var(--step);
}

.chapter-card { position: relative; }

/* Nummer und Status auf einer Zeile, an den beiden Bildkanten.
   Grundlinien-Ausrichtung, damit die unterschiedlichen Schriftgrade
   auf derselben Linie sitzen und nicht auf derselben Oberkante. */
.chapter-card__row {
  margin-top: 1.2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.chapter-card__num {
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 120ms linear;
}

/* Der Anker liegt sichtbar auf der Nummer, klickbar ist die ganze
   Karte samt Bild — ein Link, nicht zwei auf dasselbe Ziel. */
.chapter-card__num::after {
  content: "";
  position: absolute;
  inset: 0;
}

.chapter-card:hover .plate img { opacity: 0.86; }
.chapter-card:hover .chapter-card__num,
.chapter-card__num:focus-visible { text-decoration-color: var(--ink); }

/* Status. Wechselt mit assets/js/state.js von selbst mit.
   max-width zurücksetzen: sonst greift die Zeilenlängen-Regel für
   Fließtext und die Zeile endet vor der Bildkante. */
.chapter-card__state {
  margin: 0;
  max-width: none;
  text-align: right;
  color: var(--ink-2);
}


.register { border-top: var(--hair); }

.register__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding-block: 1.35rem;
  border-bottom: var(--hair);
}

.register__row .num { font-size: 1.05rem; letter-spacing: 0.2em; }
.register__row .desc { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.95rem; }

@media (min-width: 640px) {
  .register__row { grid-template-columns: 7rem 1fr auto; }
  .register__row .desc { grid-column: auto; }
}

/* ---------- 15 · Fließtext (Recht) ------------------------ */

/* Deutsche Rechtstexte enthalten sehr lange Komposita. In einer schmalen
   Spalte müssen sie trennen dürfen, sonst schieben sie die Seite auf. */
.prose {
  padding-bottom: var(--step);
  hyphens: auto;
  overflow-wrap: break-word;
}

.prose h1 {
  font-size: clamp(1.35rem, 4.5vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 1.1rem;
  border-bottom: var(--hair);
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  hyphens: manual;
  overflow-wrap: break-word;
}

.prose h2 {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: 0.85rem;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}

.prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-style: italic;
  color: var(--ink-2);
}

.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2em; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.4em; }

.prose dl { max-width: var(--measure); margin: 0 0 1.15em; }
.prose dt { color: var(--ink-2); font-style: italic; }
.prose dd { margin: 0 0 0.85em; }

/* Platzhalterfelder sichtbar machen, damit keins übersehen wird. */
.ph {
  color: var(--ph);
  font-family: var(--grotesque);
  font-size: 0.88em;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
}

.warn {
  border: var(--hair);
  border-left: 2px solid var(--ph);
  padding: 1.1rem 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: var(--measure);
}

.warn strong { color: var(--ink); font-style: normal; }

.formular {
  border: var(--hair);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: 1.5rem;
  max-width: var(--measure);
  font-size: 0.95rem;
}

/* ---------- 16 · Fuß ------------------------------------- */

.foot {
  border-top: var(--hair);
  padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(3rem, 7vw, 4.5rem);
  margin-top: auto;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  color: var(--ink-2);
}

.foot__links a:hover { color: var(--ink); }

.foot__dash { color: var(--rule); }

.foot__end {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  justify-content: center;
}

/* Die Mark. Allein, klein, am Ende. Nie neben dem Namen. */
.foot__end svg { width: 13px; height: 13px; fill: var(--rule); }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* ---------- 17 · Bewegung -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 18 · Druck ----------------------------------- */

@media print {
  html, body { background: #fff; color: #000; }
  .nav, .buy, .mail, .foot__end, .sizes { display: none; }
  a { text-decoration: underline; }
}