/* ==========================================================================
   nils.plagemann — Bausteine des Bauplans

   Die Seite als Schnitt durch die Arbeit: oben das Team, darunter die
   Architektur, unten das Fundament im Code, und was davon nach außen geht.
   Dafür gibt es hier:

     1 Band          dunkle Fläche mit Blaupausen-Raster, in beiden Schemata
     2 Lichttisch    Licht unter den Rasterlinien, im Seitenkopf der Rollen
     3 Bemaßung      Abschnittskopf mit Maßlinie, auf Startseite mit Schicht
     4 Schicht       Abschnitt einer Rollenseite, Text links, Belege rechts
     5 Fakten        Schlüssel und Werte, wie im Kolophon
     6 Entscheidungsmatrix und Kennzeichnung
     7 Responsiv

   Eigene Datei neben site.css und eigene Klassennamen: hier wird nichts aus
   site.css überschrieben, und site.css weiß von diesen Bausteinen nichts.
   Die Markup-Seite steht als Nunjucks-Makro in src/_includes/bausteine/.

   Licht gibt es nur im Band, nur unter Linien und Zeichnung, nie unter
   Fließtext. Das ist die Ausnahme vom Markenhandbuch („keine Verläufe,
   keine Leuchteffekte"), und sie gilt genau so eng.
   ========================================================================== */

/* Lichtposition als echte Prozentwerte, damit sie sich animieren lässt. */
@property --lx { syntax: '<percentage>'; inherits: true; initial-value: 78%; }
@property --ly { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

:root {
  /* Feste Markenwerte: das Band ist auch im hellen Schema dunkel. */
  --band-grund: var(--ground-dark);
  --band-raster: #171E28;
  --band-raster-stark: #222B3A;
  --band-linie: var(--accent-dark);
  --band-label: var(--accent-dark-sm);
  --band-text: var(--ink-on-dark);
  --band-kopf: #FFFFFF;
  /* Leiser Text im Band: heller als --fg-3, weil er auch unter dem Schein
     der Taschenlampe über 4,5:1 bleiben muss (5,0:1 an der hellsten Stelle). */
  --band-leise: #9AA4B1;
  --band-rand: #374553;
  --band-schraffur: #2C3747;
  --licht-blau: 45, 114, 201;
  --licht-hell: 127, 177, 236;
}

/* ==========================================================================
   1 · Band
   ========================================================================== */
.band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color-scheme: dark;
  color: var(--band-text);
  background-color: var(--band-grund);
  /* Blaupause: 24-px-Raster, jede vierte Linie kräftiger. Die Linien liegen
     auf Pixel 23 jedes Feldes; taschenlampe.js rechnet mit demselben Versatz. */
  background-image:
    linear-gradient(var(--band-raster-stark) 1px, transparent 1px),
    linear-gradient(90deg, var(--band-raster-stark) 1px, transparent 1px),
    linear-gradient(var(--band-raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--band-raster) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border-bottom: 1px solid var(--band-raster-stark);

  /* Was im Band steht, liest die dunklen Werte — auch Knöpfe, Labels und
     Links aus site.css, die sonst dem gewählten Schema folgen. */
  --bg-1: #12171F; --bg-2: #171E28; --bg-3: #1B2230; --bg-4: #222B3A;
  --line-1: #1B2430; --line-2: #26303D; --line-3: #374553;
  --surface-page: var(--band-grund);
  --surface-card: #171E28;
  --surface-sunken: #1B2230;
  --surface-raised: #1B2230;
  --surface-hover: #1B2230;
  --surface-active: #222B3A;
  --surface-tint: #171E28;
  --text-heading: var(--band-kopf);
  --text-body: var(--band-text);
  --text-secondary: var(--band-text);
  --text-muted: var(--band-leise);
  --text-faint: #7B8A9D;
  --text-accent: var(--band-label);
  --text-accent-lg: var(--band-linie);
  --border-subtle: #1B2430;
  --border-default: #26303D;
  --border-strong: var(--band-rand);
  --border-accent: var(--band-linie);
  --accent-primary: var(--band-linie);
  --accent-primary-hover: #3A85E0;
  --accent-primary-dim: rgba(127, 177, 236, .14);
  --link: var(--band-label);
  --link-hover: #A8CBF2;
  --focus-ring: var(--band-label);
}
.band > .container { position: relative; z-index: 1; }
.band__licht { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Seitenkopf der Rollenseiten */
.band--kopf > .container { padding-top: var(--r-6); padding-bottom: var(--r-6); }
.band__label {
  margin: 0 0 var(--r-2);
  font-family: var(--font-core);
  font-size: var(--t-2xs);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--band-label);
}
.band__titel {
  font-size: var(--t-4xl);
  line-height: var(--lh-h1);
  color: var(--band-kopf);
  max-width: 22ch;
  margin: 0;
}
.band .lede { color: var(--band-text); max-width: 60ch; }
.band__text { display: grid; gap: var(--r-3); max-width: 680px; }
.band__text .actions { margin-top: 0; }

/* ==========================================================================
   2 · Lichttisch
   Licht unter dem Plan: ein Schein und darüber das Raster noch einmal in
   hell, beide nur dort, wo das Licht liegt. Es wandert so langsam wie früher
   die Drift des Glühgrunds, aber rechts, wo kein Text steht.
   ========================================================================== */
.lichttisch { --lx: 78%; --ly: 50%; animation: lichttisch-wandern 26s ease-in-out infinite alternate; }
@keyframes lichttisch-wandern {
  from { --lx: 72%; --ly: 38%; }
  to { --lx: 86%; --ly: 64%; }
}
.lichttisch__schein, .lichttisch__linien { position: absolute; inset: 0; }
.lichttisch__schein {
  background:
    radial-gradient(ellipse 560px 360px at var(--lx) var(--ly), rgba(var(--licht-blau), .48), rgba(var(--licht-blau), 0) 68%),
    radial-gradient(ellipse 240px 180px at var(--lx) var(--ly), rgba(var(--licht-hell), .12), rgba(var(--licht-hell), 0) 70%);
}
.lichttisch__linien {
  background-image:
    linear-gradient(rgba(var(--licht-hell), .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--licht-hell), .5) 1px, transparent 1px),
    linear-gradient(rgba(var(--licht-hell), .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--licht-hell), .22) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 400px 260px at var(--lx) var(--ly), #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 400px 260px at var(--lx) var(--ly), #000 0%, transparent 72%);
}

/* ==========================================================================
   3 · Bemaßung
   Maßlinie mit Endstrichen als Abschnittskopf. Auf der Startseite trägt sie
   die Nummer der Schicht, auf den Rollenseiten nur den Namen. Beim Scrollen
   zieht sich die Linie von links nach rechts — ohne Unterstützung oder bei
   reduzierter Bewegung steht sie fertig da.
   ========================================================================== */
.bemassung {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--r-3);
  font-family: var(--font-core);
  font-size: var(--t-2xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}
.bemassung::before, .bemassung::after {
  content: "";
  flex: none;
  width: 1px;
  height: 14px;
  background: var(--border-accent);
}
.bemassung__linie { flex: 1; min-width: 24px; height: 1px; background: var(--border-accent); transform-origin: left center; }
.bemassung__n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bemassung__linie {
      animation: bemassung-zeichnen linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes bemassung-zeichnen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ==========================================================================
   4 · Schicht — ein Abschnitt einer Rollenseite
   ========================================================================== */
.schichten { padding: var(--r-6) 0 var(--r-7); display: grid; gap: var(--r-7); }
.schicht { min-width: 0; scroll-margin-top: 84px; }
.schicht__titel {
  font-size: var(--t-2xl);
  line-height: var(--lh-h2);
  max-width: 28ch;
  margin: 0 0 var(--r-2);
}
.schicht__text { max-width: 64ch; }
.schicht__text + .schicht__text { margin-top: var(--space-4); }
.schicht__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--r-6);
  align-items: start;
}
.schicht__raster > * { min-width: 0; }
.schicht__seite { display: grid; gap: var(--r-4); align-content: start; }
.schicht__beleg { margin-top: var(--r-4); }
.schicht__mehr { margin-top: var(--r-3); }
.seiten-h {
  margin: 0 0 var(--r-1);
  font-family: var(--font-core);
  font-size: var(--t-2xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}
.leise { font-size: var(--t-sm); line-height: 1.6; color: var(--text-muted); }

/* Liste aus Zeilen mit Haarlinien, für Beiträge, Stationen, Grundsätze */
.zeilen { display: grid; border-top: 1px solid var(--border-default); }
.zeilen > * {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-default);
  color: inherit;
}
.zeilen__t { font-size: var(--t-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.4; color: var(--text-heading); }
.zeilen__m { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: .06em; line-height: 1.5; color: var(--text-muted); }
.zeilen__p { font-family: var(--font-prose); font-size: var(--t-sm); line-height: 1.6; color: var(--text-secondary); max-width: 60ch; }
a.zeilen__a { text-decoration: none; }
a.zeilen__a:hover .zeilen__t { color: var(--link-hover); }

/* Grundsätze: Titel in Mono, Satz darunter, Linie links */
.grundsaetze { display: grid; gap: var(--r-3); margin: 0; }
.grundsaetze > div { border-left: 2px solid var(--border-accent); padding-left: 16px; }
.grundsaetze dt { font-family: var(--font-core); font-size: var(--t-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.4; color: var(--text-heading); }
.grundsaetze dd { margin: 6px 0 0; font-family: var(--font-prose); font-size: var(--t-md); line-height: var(--lh-body); color: var(--text-secondary); max-width: 62ch; }

/* ==========================================================================
   5 · Fakten — Schlüssel und Werte
   ========================================================================== */
.fakten { display: grid; gap: 8px; margin: 0; font-family: var(--font-core); font-size: var(--t-xs); line-height: 1.55; }
.fakten > div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 14px; }
.fakten dt { color: var(--text-muted); }
.fakten dd { margin: 0; color: var(--text-body); }

/* ==========================================================================
   6 · Entscheidungsmatrix und Kennzeichnung
   ========================================================================== */
.matrix { width: 100%; margin: 0; }
.matrix td { vertical-align: top; line-height: 1.5; }
.matrix td:first-child { font-weight: var(--weight-bold); color: var(--text-heading); white-space: nowrap; }
.matrix-rahmen { overflow-x: auto; }

.kennzeichen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: var(--r-3) 0 0; padding: 0; }
.kennzeichen > li { padding: 16px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); display: grid; gap: 8px; align-content: start; }
.kennzeichen > li::before { content: none; }
.kennzeichen > li + li { margin-top: 0; }
.kennzeichen__name { font-family: var(--font-core); font-size: var(--t-xs); font-weight: var(--weight-bold); color: var(--text-accent); letter-spacing: .02em; }
.kennzeichen__klang { font-family: var(--font-prose); font-size: var(--t-md); line-height: 1.5; color: var(--text-body); }
.kennzeichen__wer { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: .04em; color: var(--text-muted); }

/* ==========================================================================
   7 · Responsiv — dieselben Kanten wie site.css: 1180, 1000, 900, 640
   ========================================================================== */
@media (max-width: 1000px) {
  .schicht__raster { grid-template-columns: minmax(0, 1fr); gap: var(--r-5); }
}
@media (max-width: 900px) {
  .band--kopf > .container { padding-top: var(--r-5); padding-bottom: var(--r-5); }
  .schichten { padding: var(--r-5) 0 var(--r-6); gap: var(--r-6); }
  .kennzeichen { grid-template-columns: minmax(0, 1fr); }
  /* Schmal steht der Text über die ganze Breite. Das Licht rückt deshalb
     nach unten rechts und lässt die hellen Linien weg — unter einer Zeile
     liegend, fiele der Kontrast sonst auf weniger als 3:1. */
  .lichttisch { animation-name: lichttisch-unten; }
  .lichttisch__linien { display: none; }
  .lichttisch__schein {
    background: radial-gradient(ellipse 360px 240px at var(--lx) var(--ly), rgba(var(--licht-blau), .34), rgba(var(--licht-blau), 0) 70%);
  }
}
@keyframes lichttisch-unten {
  from { --lx: 70%; --ly: 92%; }
  to { --lx: 94%; --ly: 104%; }
}

/* Unter 640 px wird aus der Matrix ein Stapel: jede Zeile eine Karte, jede
   Zelle trägt ihren Spaltennamen selbst. */
@media (max-width: 640px) {
  /* Der Kopf entfällt ganz; jede Zelle nennt ihre Spalte selbst, und das
     liest auch ein Screenreader vor (Inhalt aus ::before). */
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix td { display: block; }
  .matrix tr { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 14px; margin-bottom: 10px; }
  .matrix tbody tr:nth-child(even) td { background: none; }
  .matrix td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 10px; white-space: normal; }
  .matrix td::before {
    content: attr(data-spalte);
    font-family: var(--font-core);
    font-size: var(--t-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-accent);
    line-height: 1.8;
  }
  .fakten > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .lichttisch { animation: none; }
}

/* Gedruckt ist die Seite hell. Das Band wird zur Überschrift auf Weiß. */
@media print {
  .band {
    background: none;
    color: #1F2733;
    border-bottom-color: #DEE2E8;
    --text-heading: #15457A; --text-body: #1F2733; --text-secondary: #1F2733;
    --text-muted: #5A6573; --text-accent: #15457A;
  }
  .band__titel { color: #15457A; }
  .band__label { color: #15457A; }
  .band__licht { display: none; }
}

/* ==========================================================================
   8 · Datei — ADR, Code und Testlauf als Arbeitsstück
   Die Fläche sitzt heller als der Grund, wie der CodeBlock des Systems. Der
   Pfad bricht notfalls mitten im Wort um; der Text eines ADR darf umbrechen,
   Code dagegen scrollt in seinem Kasten.
   ========================================================================== */
.datei {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  overflow: hidden;
}
.datei__pfad {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-core);
  font-size: var(--t-2xs);
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.datei__text {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.datei__mark { background: var(--accent-primary-dim); color: var(--text-accent); border-radius: var(--radius-xs); padding: 0 3px; font-weight: var(--weight-bold); }

/* Schwerpunkte: Text links, offene Fragen rechts */
.schwerpunkte { display: grid; gap: var(--r-5); }
.schwerpunkt {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--r-6);
  align-items: start;
  padding-top: var(--r-4);
  border-top: 1px solid var(--border-default);
  scroll-margin-top: 84px;
}
.schwerpunkt h3 { font-size: var(--t-xl); line-height: var(--lh-h3); margin: 0 0 var(--r-2); max-width: 32ch; }
.schwerpunkt p { max-width: 64ch; }
.fragen { display: grid; gap: 10px; }
.fragen p { font-size: var(--t-sm); line-height: 1.6; color: var(--text-secondary); padding-left: 14px; border-left: 2px solid var(--border-default); }

.im-blick { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1000px) {
  .schwerpunkt { grid-template-columns: minmax(0, 1fr); gap: var(--r-3); }
}

/* Code und Testlauf: kein Umbruch, der Kasten scrollt. Kursiv gibt es in
   Mono nicht (Markenhandbuch), auch nicht für Kommentare. */
.datei__code {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 16px;
  overflow-x: auto;
  white-space: pre;
}
.datei__code:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.datei .tok-com { font-style: normal; }
.datei__lauf { border-top: 1px solid var(--border-default); }
.datei__ok { color: var(--syn-out-ok); font-weight: var(--weight-bold); }
.datei__unter { margin-top: 10px; max-width: 64ch; }

/* Übernommen von /stack: Kopf der Inhaltsspalte, und ein Schwerpunkt ohne
   eigene Trennlinie, wenn er allein unter seiner Bemaßung steht. */
.stack-toc__kopf { margin-bottom: 12px; }
.schwerpunkt--offen { border-top: 0; padding-top: 0; }

/* ==========================================================================
   9 · Folie — ein Vortrag als Karte
   Die Folie ist dunkel wie das Band, auch im hellen Schema: so sehen die
   Folien aus, die gezeigt werden.
   ========================================================================== */
.folien { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--r-3); }
.folie { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; }
.folie__bild {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  padding: 16px 18px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--band-raster-stark);
  overflow: hidden;
  background-color: var(--band-grund);
  background-image:
    linear-gradient(var(--band-raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--band-raster) 1px, transparent 1px);
  background-size: 16px 16px;
}
.folie__bild img { width: calc(100% + 36px); max-width: none; height: calc(100% + 32px); margin: -16px -18px; object-fit: cover; }
.folie__titel { font-family: var(--font-core); font-size: var(--t-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.3; color: var(--band-kopf); text-wrap: balance; }
.folie__fuss { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-core); font-size: var(--t-2xs); color: var(--band-leise); }
.folie__fuss b { font-weight: var(--weight-bold); color: var(--band-label); }
.folie__meta, .folie__wo { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: .04em; line-height: 1.5; color: var(--text-muted); }
.folie__t { font-family: var(--font-core); font-size: var(--t-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.35; color: var(--text-heading); }
.folie:hover .folie__t { color: var(--link-hover); }
.folie:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-md); }

/* Kurzbio zum Kopieren */
.kurzbio { padding: 18px 20px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); display: grid; gap: 14px; }
.kurzbio p { font-size: var(--t-md); }
.kurzbio__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* Themen, über die ich spreche */
.themen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-3) var(--r-5); }
.themen-liste > div { padding-top: 14px; border-top: 1px solid var(--border-default); display: grid; gap: 6px; align-content: start; }
.themen-liste h3 { font-size: var(--t-lg); line-height: 1.35; margin: 0; letter-spacing: var(--tracking-tight); }
.themen-liste p { font-size: var(--t-md); color: var(--text-secondary); }

/* Seite eines Vortrags */
.vortrag-links { display: flex; flex-wrap: wrap; gap: 12px; }
.vortrag-text { max-width: var(--measure-article); }
.vortrag-text > * + * { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .themen-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10 · Taschenlampe
   Ein Lichtkegel über einem Klassendiagramm, das taschenlampe.js zeichnet.
   Außerhalb des Kegels ist vom Diagramm nichts zu sehen. Links, wo breit
   der Text steht, leuchtet es nur gedämpft; schmal steht der Text überall,
   dort ist das Diagramm durchgehend gedämpft.
   ========================================================================== */
.taschenlampe { --lx: 76%; --ly: 45%; }
.taschenlampe__schein, .taschenlampe__plan { position: absolute; inset: 0; }
.taschenlampe__plan { display: block; width: 100%; height: 100%; }
.taschenlampe__schein {
  background: radial-gradient(circle 280px at var(--lx) var(--ly), rgba(var(--licht-blau), .34), rgba(var(--licht-blau), 0) 70%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0 46%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0 46%, #000 62%);
}
.taschenlampe__plan {
  -webkit-mask-image:
    radial-gradient(circle 210px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .55) 50%, transparent 86%),
    linear-gradient(90deg, rgba(0, 0, 0, .2) 0 46%, #000 62%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 210px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .55) 50%, transparent 86%),
    linear-gradient(90deg, rgba(0, 0, 0, .2) 0 46%, #000 62%);
  mask-composite: intersect;
}
@media (max-width: 1000px) {
  .taschenlampe { --lx: 82%; --ly: 86%; }
  /* Schmal liegt überall Text, auch leiser in #8A95A3. Bei .45 bleibt der
     auch mitten im Schein über 4,5:1. */
  .taschenlampe__schein {
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45));
    mask-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45));
  }
  .taschenlampe__plan {
    -webkit-mask-image:
      radial-gradient(circle 200px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .55) 50%, transparent 86%),
      linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25));
    mask-image:
      radial-gradient(circle 200px at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .55) 50%, transparent 86%),
      linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25));
  }
}

/* 404: Text links, rechts sucht die Lampe die fehlende Klasse. */
.band--404 > .container { padding-top: var(--r-7); padding-bottom: var(--r-7); }
.band--404 .band__text { max-width: 640px; }
.suche-404 { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.suche-404 .np-field { flex: 1 1 260px; }
@media (max-width: 900px) {
  .band--404 > .container { padding-top: var(--r-5); padding-bottom: var(--r-5); }
}

/* ==========================================================================
   11 · Startseite
   Hero: Text links, der Schnitt rechts; ab 1180 abwärts der Schnitt unter
   dem Text, unter 601 px als Liste. Die Schichten darunter sind gewöhnliche
   Abschnitte mit Bemaßung, auf der Startseite mit der Nummer der Schicht.
   ========================================================================== */
.band--start > .container { padding-top: var(--r-7); padding-bottom: var(--r-6); }
.start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--r-6);
  align-items: center;
}
.start > * { min-width: 0; }
.start__text { display: grid; gap: var(--r-3); max-width: 640px; }
.start__titel { max-width: 18ch; }
.start__hinweis { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: .06em; line-height: 1.6; color: var(--band-leise); }
.start .fakten { padding-top: var(--r-2); border-top: 1px solid var(--band-raster-stark); }

/* Der Schnitt */
.schnitt { margin: 0; justify-self: end; width: 100%; max-width: 600px; }
.schnitt__bild { display: block; width: 100%; height: auto; overflow: visible; }
.schnitt__bild text { font-family: var(--font-core); font-size: 13px; fill: var(--band-label); }
.schnitt__mass line { stroke: var(--band-rand); stroke-width: 1; }
.schnitt__mass text { fill: var(--band-leise); }
.schnitt__schicht { fill: var(--band-grund); stroke: var(--band-linie); stroke-width: 1.5; transition: fill var(--dur-1) var(--ease-out), stroke var(--dur-1) var(--ease-out); }
.schnitt__schicht--geschnitten { fill: url(#schnitt-schraffur); stroke: none; }
.schnitt__schicht--rahmen { fill: none; }
.schnitt__schraffur { stroke: var(--band-schraffur); stroke-width: 2.5; }
.schnitt__name { font-weight: var(--weight-bold); letter-spacing: .06em; }
.schnitt__zusatz { fill: var(--band-text); }
.schnitt__platte { fill: var(--band-grund); }
.schnitt__punkte circle { fill: var(--band-label); }
.schnitt__linie rect, .schnitt__linie line, .schnitt__linie polyline { fill: none; stroke: var(--band-linie); stroke-width: 1.5; }
.schnitt__contract { stroke-dasharray: 4 4; }
.schnitt__grund { stroke: var(--band-linie); stroke-width: 2.5; }
.schnitt__fang { fill: transparent; }
.schnitt__aussen { fill: var(--band-text); }
.schnitt__bild a { outline: none; cursor: pointer; text-decoration: none; }
.schnitt__bild a:hover .schnitt__schicht:not(.schnitt__schicht--geschnitten),
.schnitt__bild a:focus-visible .schnitt__schicht:not(.schnitt__schicht--geschnitten) { fill: #17253A; stroke: var(--band-label); }
.schnitt__bild a:focus-visible .schnitt__schicht--rahmen,
.schnitt__bild a:focus-visible .schnitt__fang { stroke: var(--band-kopf); stroke-width: 2.5; }
.schnitt__bild a:hover .schnitt__aussen, .schnitt__bild a:focus-visible .schnitt__aussen { fill: var(--band-kopf); }

.schnitt__liste { display: none; list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--band-raster-stark); }
.schnitt__liste > li { padding: 0; }
.schnitt__liste > li::before { content: none; }
.schnitt__liste > li + li { margin-top: 0; }
.schnitt__liste a {
  display: grid;
  grid-template-columns: 3ch auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  min-height: var(--hit-min);
  padding: 12px 0;
  border-bottom: 1px solid var(--band-raster-stark);
  font-family: var(--font-core);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--band-text);
  text-decoration: none;
}
.schnitt__n { color: var(--band-label); }
.schnitt__t { color: var(--band-kopf); font-weight: var(--weight-bold); }
.schnitt__d { color: var(--band-leise); text-align: right; }

/* Schichten der Startseite */
.startseite { padding: var(--r-6) 0 var(--r-7); display: grid; gap: var(--r-7); }
.startseite .schicht { scroll-margin-top: 84px; }
.schicht__eintrag { display: grid; gap: 4px; }
.schicht__eintrag a { font-family: var(--font-core); font-size: var(--t-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.weiter { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.anlaesse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-3); }
.anlaesse > a { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); color: inherit; text-decoration: none; }
.anlaesse > a:hover { border-color: var(--border-accent); }
.anlaesse__t { font-family: var(--font-core); font-size: var(--t-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.anlaesse__p { font-family: var(--font-prose); font-size: var(--t-sm); line-height: 1.6; color: var(--text-secondary); }
.anlaesse__mehr { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--link); }

@media (max-width: 1180px) {
  .start { grid-template-columns: minmax(0, 1fr); gap: var(--r-5); }
  .schnitt { justify-self: start; max-width: 560px; }
}
@media (max-width: 900px) {
  .band--start > .container { padding-top: var(--r-5); padding-bottom: var(--r-5); }
  .startseite { padding: var(--r-5) 0 var(--r-6); gap: var(--r-6); }
  .anlaesse { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .schnitt__bild { display: none; }
  .schnitt__liste { display: block; }
}

/* Blog ohne veröffentlichte Beiträge: derselbe Kasten wie der Filter-
   Leerzustand aus site.css, nur mit eigenem Text. */
.leerzustand__label { margin-bottom: var(--r-2); }

/* ==========================================================================
   12 · Lebenslauf
   Am Bildschirm eine ruhige Seite im Lesemaß, gedruckt A4 ohne Kopf- und
   Fußzeile: daraus entsteht lebenslauf.pdf. Weiß, wie alles Gedruckte.
   ========================================================================== */
.lebenslauf { padding-top: var(--r-5); padding-bottom: var(--r-7); display: grid; gap: var(--r-4); }
.lebenslauf__werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lebenslauf__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r-3); align-items: end; padding-bottom: var(--r-3); border-bottom: 2px solid var(--border-accent); }
.lebenslauf__name { font-size: var(--t-3xl); line-height: 1.1; letter-spacing: var(--tracking-logo); margin: 0; }
.lebenslauf__name .np-logo-given { font-weight: var(--weight-light); color: var(--logo-given); }
.lebenslauf__name .np-logo-family { color: var(--logo-family); margin-left: 0; }
.lebenslauf__rolle { margin-top: 8px; font-family: var(--font-core); font-size: var(--t-xs); letter-spacing: .04em; color: var(--text-secondary); }
.lebenslauf__teil { display: grid; gap: var(--r-2); }
.lebenslauf__teil h2 { font-size: var(--t-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); max-width: none; }
.lebenslauf__teil--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-4); }
.lebenslauf__teil--zwei > div { display: grid; gap: var(--r-2); align-content: start; }
.lebenslauf__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: none; }
.lebenslauf__liste > li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 16px; padding: 0; }
.lebenslauf__liste > li::marker { content: none; }
.lebenslauf__zeit { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: .04em; line-height: 1.9; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lebenslauf__liste h3 { font-size: var(--t-sm); line-height: 1.4; letter-spacing: var(--tracking-tight); margin: 0; max-width: none; }
.lebenslauf__org { font-family: var(--font-core); font-size: var(--t-2xs); letter-spacing: .02em; color: var(--text-muted); margin-top: 2px; }
.lebenslauf__liste p + p { margin-top: 6px; }
.lebenslauf__tags { font-family: var(--font-core); font-size: var(--t-xs); line-height: 1.7; hyphens: none; -webkit-hyphens: none; }

@media (max-width: 640px) {
  .lebenslauf__kopf, .lebenslauf__teil--zwei { grid-template-columns: minmax(0, 1fr); }
  .lebenslauf__liste > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media print {
  @page { size: A4; margin: 16mm 16mm 16mm 18mm; }
  .page:has(.lebenslauf) .site-footer, .lebenslauf__werkzeug { display: none !important; }
  .lebenslauf { padding: 0; gap: 14px; max-width: none; font-size: 10pt; }
  .lebenslauf p, .lebenslauf__liste p { font-size: 9.5pt; line-height: 1.45; max-width: none; }
  .lebenslauf__name { font-size: 24pt; }
  .lebenslauf__liste { gap: 9px; }
  .lebenslauf__liste > li { grid-template-columns: 38mm minmax(0, 1fr); gap: 10px; break-inside: avoid; }
  .lebenslauf__liste h3 { font-size: 10pt; }
  .lebenslauf__zeit, .lebenslauf__org, .lebenslauf .fakten { font-size: 8.5pt; }
  .lebenslauf__teil h2 { font-size: 8.5pt; break-after: avoid; }
}