/* ---------------------------------------------------------------------------
   Projektarchiv: dokumentarische Gestaltung
   Ruhig, technisch, zurueckhaltend. Information vor Effekt.

   Farben und Schriften kommen aus base.css (gemeinsame Tokens).
   Hier stehen nur Layoutwerte und Komponenten des Archivs.
--------------------------------------------------------------------------- */

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-max: 1280px;
  --nav-height: 64px;
  --header-height: var(--nav-height);
  --panel-padding: 28px;
  /* Jahr-Spalte der Chronik. */
  --index-year: 140px;
  /* Marker vor dem Titel. */
  --marker-size: 12px;
  --marker-border: 1.5px;
  --marker-gap-title: 16px;
  --marker-gap-year: 20px;
  --marker-offset-y: 1.5px;
  /* Abstand zwischen zwei Eintraegen der Chronik. */
  --entry-gap: 80px;
  /* Feste Breite der Labelspalte in den Filterzeilen (ANSICHT / FILTER),
     damit die Inhalte rechts davon auf einer gemeinsamen Kante beginnen. */
  --filter-label: 5rem;
  /* Farbe des aktiven Fadens (wird aus der Technologiefarbe gesetzt). */
  --thread-color: var(--ink-soft);
  /* Rechts reservierte Panelspalte. */
  --panel-width: clamp(420px, 34vw, 520px);
  /* Luft zwischen Listenspalte und Panel fuer die Verbindungslinie. */
  --line-gap: 52px;
  /* Laenge des senkrechten Stuecks der Tech-Tag-Verbindungslinie. */
  --connector-drop: 10px;
  --transition: 160ms ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
address { font-style: normal; }
time { font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(1.15rem, 5vw, 2.5rem); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Textrollen -------------------------------------------------------------- */

/* Ruhiger Einleitungs-/Fließtext. Größe kommt jeweils von der Elementregel. */
.lead { font-weight: 300; color: var(--ink-soft); }
/* Beschreibender Fließtext. Größe und Farbe bleiben bei der Elementregel. */
.body { font-weight: 400; }

/* Section chrome ---------------------------------------------------------- */

.section { padding: var(--space-20) 0; border-top: 1px solid var(--line); }
/* Projektseite: enger Abstand von der Kopftrennlinie zur Filterzeile
   (zusammen mit dem 8px-Versatz des Archivs 56 bis 80px). */
.section.projects { padding-top: clamp(3rem, 5vw, 4.5rem); }
.section-head { max-width: 68ch; margin-bottom: var(--space-12); }
.section-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.section-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.section-lead { margin-top: var(--space-4); color: var(--ink-soft); }

/* Nav --------------------------------------------------------------------- */

.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 400; background: var(--bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.nav__logo { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.nav__logo:hover { color: var(--muted); }
.nav__menu { display: flex; gap: var(--space-8); }
.nav__link { font-size: 0.875rem; color: var(--muted); transition: color var(--transition); }
.nav__link:hover, .nav__link:focus { color: var(--ink); }
.nav__toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav__hamburger { position: relative; width: 20px; height: 1.5px; background: var(--ink); }
.nav__hamburger::before, .nav__hamburger::after { content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); transition: transform var(--transition); }
.nav__hamburger::before { top: -6px; }
.nav__hamburger::after { bottom: -6px; }
.nav__toggle[aria-expanded="true"] .nav__hamburger { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__hamburger::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__hamburger::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero -------------------------------------------------------------------- */

.hero { min-height: 74vh; display: flex; align-items: center; padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16); }
.hero__content { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.hero__title { font-size: clamp(2.25rem, 7vw, 3.75rem); font-weight: 500; line-height: 1.03; letter-spacing: -0.03em; }
.hero__tld { color: var(--muted); }
.hero__tagline { margin-top: var(--space-6); font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 400; line-height: 1.25; color: var(--ink); }
.hero__subtitle { margin-top: var(--space-3); font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ink-soft); }
.hero__intro { margin-top: var(--space-5); max-width: 46ch; font-size: clamp(0.95rem, 1.9vw, 1.0625rem); line-height: 1.6; }
.hero__meta { margin-top: var(--space-8); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.hero__focus { margin-top: var(--space-2); font-size: 0.875rem; color: var(--muted); }
.hero__jump { margin-top: var(--space-10); font-family: var(--font-mono); font-size: 0.8125rem; }
.hero__jump a { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color var(--transition), border-color var(--transition); }
.hero__jump a:hover { color: var(--ink); border-color: var(--ink); }

/* Projektarchiv: der Kopf ist nur Seitenüberschrift und Einordnung. Kein
   zweiter Einstieg; die Projektliste beginnt direkt darunter. Der Block sitzt
   optisch mittig zwischen Navigation und Trennlinie (oben = unten). */
.hero--compact { min-height: 0; padding: clamp(5rem, 8vw, 7rem) 0; }

/* Verknuepfte Begriffe ---------------------------------------------------- */

.terms { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.term {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.1;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  padding: 2px var(--space-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.term:hover { color: var(--ink); border-color: var(--line-strong); }
.term:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; }
.term--category { color: var(--muted); }
.term__icon { width: 12px; height: 12px; flex: none; fill: currentColor; }
/* Originalfarben-Modus: Icons zeigen ihre Markenfarbe, sofern hinterlegt. */
body.icons-color .term__icon.term__icon { color: var(--icon-color, currentColor); }
/* Sehr dunkle Markenfarben bleiben auf dunklem Grund lesbar: Textfarbe.
   Im hellen Standard zeigen sie ihre Markenfarbe. */
:root[data-theme="dark"] body.icons-color .term__icon--dark.term__icon { color: currentColor; }
/* Isadora: eigenes Marken-Icon mit Verlauf; im Monomodus konturierte Variante. */
.term__icon .isadora-color { display: none; }
body.icons-color .term__icon .isadora-mono { display: none; }
body.icons-color .term__icon .isadora-color { display: inline; }
/* Tasker: Zahnrad mit Blitz; im Monomodus konturierte Variante. */
.term__icon .tasker-color { display: none; }
body.icons-color .term__icon .tasker-mono { display: none; }
body.icons-color .term__icon .tasker-color { display: inline; }
/* Material-Icons (Lucide): immer grau, auch im Farbmodus und im aktiven
   Zustand. Der Schalter "Icons: Farbe" wirkt nur auf Marken-Icons. */
.term__icon--material,
body.icons-color .term__icon--material.term__icon,
.page-archive .pentry__term.is-active .term__icon--material.term__icon,
.archive__focus-term .term__icon--material.term__icon {
  color: var(--ink-soft);
}
/* Tech-Icons entsättigt; Markenfarbe erst beim Hovern der Position. In der
   Chronik entfaellt das (siehe .page-archive .pentry__term .term__icon). */
.pentry .term__icon,
.col__project .term__icon,
.node--term .term__icon {
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter .2s, opacity .2s;
}
.pentry__term:hover .term__icon,
.node--term:hover .term__icon {
  filter: none;
  opacity: 1;
}
.term__label { display: inline-block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Archiv: chronologische Spalte und wachsender Ast ------------------------ */

.archive { margin-top: var(--space-2); }

/* Archiv und Navigation teilen sich denselben Container (.wrap aus base.css):
   identische max-width und seitliche Paddings, damit die linken und rechten
   Kanten von Logo, Headline, Filterleiste und Projektliste deckungsgleich
   bleiben. Die Liste nutzt die volle Containerbreite. */

/* Steuerblock ueber der Statuszeile: Segment-Umschaltung der Ansicht.
   Kein Formular-Look, sondern dieselbe Meta-Typografie wie Filter und Faden. */
.archive__controls {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-6);
}
.archive__views-label {
  display: inline-block;
  min-width: var(--filter-label);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.segments {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-2);
  min-width: 0; max-width: 100%;
  flex: 1 1 auto;
}
.segment {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.2;
  color: var(--ink-soft);
  padding: 0; border: 0; background: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.segment:hover { color: var(--ink); }
.segment:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; }
/* Aktiv: volle Textfarbe plus 1px Unterstrich. */
.segment.is-active { color: var(--ink); border-bottom-color: currentColor; }
.segment__count { color: var(--muted); }
.segment.is-active .segment__count { color: var(--ink-soft); }
.segment__sep {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted);
  user-select: none;
}

.archive__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-strong);
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; min-height: 1.125rem; }
.crumb {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.2;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.crumb:hover { color: var(--ink); border-color: var(--line-strong); }
.crumb.is-current { color: var(--ink); }
.crumb__sep { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.crumb .term__icon { width: 11px; height: 11px; }

/* Einspaltige, lesbare Liste. Der Technik-Faden liegt als SVG darueber. */
.board {
  position: relative;
  display: block;
  padding-bottom: var(--space-8);
  scrollbar-width: none;
}

/* Version 2 (index.html/app.js): kein horizontales Scrollen. overflow-x:
   clip erzeugt im Unterschied zu hidden keinen Scroll-Container, daher kann
   scrollLeft nie ungleich 0 werden. Liste und Panel teilen sich den
   Inhaltsbereich ueber ein festes Raster, dessen Panelspalte immer reserviert
   ist – unabhaengig davon, ob ein Panel geoeffnet ist. */
html { overflow-x: clip; overscroll-behavior-x: none; }
.page-archive,
.page-archive main,
.page-archive .section.projects,
.page-archive .projects .wrap,
.page-archive .archive,
.page-archive .board,
.page-archive .board__step,
.page-archive .col--index,
.page-archive .index-list,
.page-archive .col__list {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.page-archive .board { scrollbar-width: none; }
.page-archive .board::-webkit-scrollbar { display: none; }

/* Layoutwerte der Archivseite (nur Version 2). Das breite Raster nutzt
   112px + minmax(0,1fr) + clamp(420px,31vw,460px) mit 40px Abstand; die
   Jahr-Spalte sitzt als erste Spur der .pentry-Grid-Zeile, sodass die
   berechneten Spaltenbreiten exakt dem Raster entsprechen. */
.page-archive {
  --index-year: 112px;
  --panel-width: clamp(420px, 31vw, 460px);
  --line-gap: 40px;
  --panel-padding: 24px;
}

/* Das Archiv ist eine einzelne, lesbare Listenspalte; Panel-Spalte und Raster
   der frueheren Version entfallen. Der Jahr-Body-Abstand bleibt als Gutter, in
   dem der Technik-Faden laeuft. */

/* Schmal (< 1440px): Die Chronik nimmt die volle Breite; das Panel liegt als
   feste Leiste rechts darueber (unter 700px als Bottom-Sheet). Es nimmt keinen
   Platz im Fluss ein, daher aendert sich die Listenbreite nie. */
@media (max-width: 1439px) {
  .page-archive .board { display: block; }
  .page-archive .board__step { margin: 0; }
  .page-archive .board__panel-slot,
  .page-archive .board__link { display: none; }
  .page-archive .col.col--doc,
  .page-archive .col.col--term {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(var(--panel-width), 92vw);
    max-width: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: var(--surface);
    padding: var(--panel-padding);
    border: 1px solid var(--line);
    border-right: 0;
    z-index: 300;
  }
  .page-archive .col--doc .col__head,
  .page-archive .col--term .col__head { grid-template-columns: minmax(0, 1fr) auto; padding-right: 0; }
  .page-archive .col--doc .col__title,
  .page-archive .col--term .col__title { grid-column: 1; grid-row: 1; }
  .page-archive .col--doc .col__meta,
  .page-archive .col--term .col__meta { grid-column: 1 / -1; grid-row: 2; }
  .page-archive .col--doc .col__close,
  .page-archive .col--term .col__close {
    position: sticky;
    top: calc(var(--header-height) + 8px);
    grid-column: 2; grid-row: 1;
    justify-self: end; align-self: start;
    margin: 0;
  }
}

/* Bottom-Sheet unterhalb von 700px. */
@media (max-width: 699px) {
  .page-archive .col.col--doc,
  .page-archive .col.col--term {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 82vh;
    border-bottom: 0;
  }
}

/* Feine Verbindungslinie: In der neuen Fassung der Technik-Faden
   (.board__thread), gesetzt in app.js. */

/* Eine geoeffnete Ebene samt Verbindungspfeil. --anchor ist die Y-Position des
   Ausgangsknotens, an der die Ebene beginnt. Die Luft fuer die Verbindungslinie
   liegt als margin-left vor der Ebene, nicht an der Liste. */
.board__step {
  flex: none;
  display: flex; align-items: flex-start;
  margin-top: var(--anchor, 0);
  margin-left: var(--line-gap);
}

.board__link {
  flex: none; align-self: flex-start;
  padding: var(--space-5) var(--space-4) 0;
  color: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem;
}
.board__link::before { content: '→'; }
/* Auf Desktop uebernimmt die gezeichnete Linie die Verbindung; der leere
   Pfeil-Platzhalter entfaellt, damit jede Ebene genau die Panelspalte breit ist
   und die Listenspalte unabhaengig vom Panelzustand gleich breit bleibt. */
@media (min-width: 769px) {
  .board__link { display: none; }
}

.col { position: relative; z-index: 1; flex: 0 0 252px; min-width: 0; padding-right: var(--space-5); }
/* Die Listenspalte ist flexibel und nimmt allen Platz bis zur reservierten
   Panelspalte ein. Sie hat keine fuer das Panel reservierte Breite, kein
   max-width und kein padding/margin, das vom Panelzustand abhaengt: ihre Breite
   ist mit geoeffnetem und geschlossenem Panel identisch. */
.col--index { flex: 1 1 auto; min-width: 0; max-width: none; padding-right: 0; }
/* Filter- und Projekt-Panel belegen dieselbe reservierte Spalte rechts. */
.col--term { flex: 0 0 var(--panel-width); min-width: 0; max-width: none; padding-right: 0; }
.col--doc {
  flex: 0 0 var(--panel-width);
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* Der Dokumentationsschritt ist die eigene, feste Panelspalte rechts; der
   Verbindungspfeil-Platzhalter entfaellt dort. Der Abstand davor ist die Luft
   fuer die Verbindungslinie. Beim Schliessen bleibt die Spalte ueber den
   Platzhalter reserviert, damit die Liste nie die Breite wechselt. */
.board__step--doc { flex: 0 0 var(--panel-width); min-width: 0; }
.board__step--doc > .board__link { display: none; }
.board__panel-slot { flex: 0 0 var(--panel-width); min-width: 0; margin-left: var(--line-gap); }
.col__head {
  display: grid; gap: 3px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-strong);
}
/* Schliessen: ausreichend grosse Klickflaeche, Icon bleibt klein. */
.col__head { position: relative; padding-right: 38px; }
.col__close {
  position: absolute; top: -4px; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  color: var(--ink-soft); background: none; border: 0; cursor: pointer;
  transition: color var(--transition);
}
.col__close:hover, .col__close:focus-visible { color: var(--ink); }
.col__close:focus-visible { outline: 1px solid var(--ink-soft); outline-offset: 2px; }
.col__close svg { display: block; width: 15px; height: 15px; }
.col__title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
}
.col__title .term__icon { width: 15px; height: 15px; flex: none; }
.col__title.is-source { color: var(--ink); }
.col__year, .col__meta { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.col__doc {
  justify-self: start;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.col__doc:hover { color: var(--ink); border-color: var(--ink); }

.col__list { display: grid; gap: 0; }
/* Die Archivlisten sind Navigation, nicht Text zum Markieren. */
.index-list, .col__head, .col__list, .col__note, .board__link, .crumbs, .detail__tech {
  -webkit-user-select: none;
  user-select: none;
}
.node {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  transition: color var(--transition), border-color var(--transition);
}
.node:hover { color: var(--ink); border-color: var(--line-strong); }
.node:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; color: var(--ink); }
.node--term { align-items: center; justify-content: flex-start; }
.node--term .term__icon { width: 13px; height: 13px; flex: none; margin-right: 7px; }
.node--project { align-items: baseline; justify-content: flex-start; }
/* Auf der klassischen Indexseite sind Projektnamen immer weiss. */
.page-index .node--project { color: var(--ink); }
.node--project .node__bullet {
  flex: none; align-self: center;
  width: 5px; height: 5px; margin-right: var(--space-2);
  border: 1px solid var(--muted); border-radius: 50%;
  transition: border-color var(--transition), background-color var(--transition);
}
.node--project:hover .node__bullet { border-color: var(--ink); background: var(--ink); }
/* Aktive Quelle: das Element, das die sichtbare Ebene geoeffnet hat. */
.node--project.is-source,
.node--project.is-selected { color: var(--ink); }
.node--project.is-source .node__bullet,
.node--project.is-selected .node__bullet { border-color: var(--ink); background: var(--ink); }
.node--project .node__year { margin-left: auto; }
.node.is-visited { color: var(--muted); border-bottom-style: dashed; cursor: default; }
.node.is-visited:hover { color: var(--muted); border-color: var(--line-soft); }
.node__title { font-size: 0.875rem; line-height: 1.35; }
.node__year { flex: none; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.node__flag { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted); }

.col__row { display: flex; align-items: stretch; gap: var(--space-1); border-bottom: 1px solid var(--line-soft); }
.col__row .node { flex: 1 1 auto; min-width: 0; border-bottom: none; }
.node__doc {
  flex: none; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted);
  opacity: 0.5;
  transition: opacity var(--transition), color var(--transition);
}
.col__row:hover .node__doc { opacity: 1; }
.node__doc:hover, .node__doc:focus-visible { color: var(--ink); opacity: 1; }
.col__empty { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); padding: var(--space-2) 0; }
.col__note { padding: var(--space-3) 0 0; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }

/* Projektzeile in einer Technologie-Spalte: Projektname (oeffnet die Doku) und
   darunter die anklickbaren Technologien des Projekts. */
.col__project { display: grid; gap: 3px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
.col__project .node--project { border-bottom: none; padding: 0; }
.col__project-tech { font-size: 0.75rem; line-height: 1.8; }
.col__project-tech .pentry__term { font-size: 0.75rem; }
.col__project-tech .term__icon { width: 11px; height: 11px; }
.pentry__term.is-visited { color: var(--muted); cursor: default; }
.pentry__term.is-visited:hover { color: var(--muted); }

/* Chronik (erste Spalte) -------------------------------------------------- */

.index-list { display: grid; gap: var(--entry-gap); overflow-anchor: none; }

/* Jahr, Projektname, Doku und Technologien stehen als vollstaendiger,
   lesbarer Eintrag nebeneinander. Die Technologiezeile bricht natuerlich um. */
.pentry {
  display: grid;
  grid-template-columns: var(--index-year) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
}
.pentry__year {
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5;
  color: var(--muted); white-space: nowrap; padding-top: 3px;
}
.pentry__body { display: grid; gap: var(--space-2); min-width: 0; width: 100%; max-width: none; }
.pentry__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.pentry__title {
  min-width: 0; text-align: left;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--ink);
  transition: color var(--transition);
}
.pentry__title:hover { color: var(--ink-soft); }
.pentry__title:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 3px; }
.pentry__doc {
  flex: none; align-self: baseline;
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.pentry__doc:hover { color: var(--ink); border-color: var(--line); }

/* Technologien: zurueckhaltender als der Projektname, einzeln anklickbar. Der
   Abstand kommt aus gap statt aus Text-Trennpunkten, damit beim Umbruch kein
   Punkt am Zeilenende haengt. Der zusaetzliche margin-top trennt die
   Icon-Ebene sichtbar von der Beschreibung (8px Rasterabstand + 16px = 24px). */
.pentry__tech {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1.1rem; row-gap: 0.4rem;
  margin-top: var(--space-4);
  width: 100%; max-width: none;
  color: var(--muted);
}
/* Version 2: Jahr | Marker-Spalte | Inhalt. Der Marker liegt in einer eigenen
   schmalen Spalte zwischen Jahreszahl und Inhalt; Jahr und Titel teilen sich
   ueber die Grundlinienausrichtung dieselbe optische Mitte. */
.page-archive .pentry {
  grid-template-columns: var(--index-year) calc(var(--marker-gap-year) + var(--marker-size) + var(--marker-gap-title)) minmax(0, 1fr);
  column-gap: 0;
  align-items: baseline;
}
/* Das Jahr sitzt ohne zusaetzlichen Versatz auf der Titelgrundlinie. */
.page-archive .pentry__year { padding-top: 0; }
.page-archive .pentry__rail { position: relative; align-self: start; }
/* Der Marker wird rein per CSS an Schriftgroesse und Zeilenhoehe des Titels
   gekoppelt (nicht an feste Pixel-Offsets) und sitzt so auch bei umbrechendem
   Titel auf der Mitte der ersten Zeile. */
.page-archive .pentry__node {
  position: absolute;
  left: var(--marker-gap-year);
  top: calc((1.0625rem * 1.3 - var(--marker-size)) / 2 + var(--marker-offset-y));
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  border: var(--marker-border) solid var(--ink-soft);
  background: var(--bg);
  transition: background-color .3s ease, border-color .3s ease;
}
/* Aktiver Faden: der Knoten ist in der Technologiefarbe gefuellt. */
.page-archive .pentry.is-related .pentry__node {
  border-color: var(--thread-color, var(--ink-soft));
  background: var(--thread-color, var(--ink-soft));
}
/* Geoefneter Eintrag: der Knoten ist gefuellt. */
.page-archive .pentry.is-open .pentry__node {
  border-color: var(--ink);
  background: var(--ink);
}
/* Ruhige Einblendung der verbleibenden Projekte: Fade + 6px nach oben. */
.page-archive .pentry { animation: pentry-fade .5s ease both; }
.page-archive .pentry__body { animation: pentry-lift .5s ease both; }
@keyframes pentry-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pentry-lift { from { transform: translateY(6px); } to { transform: none; } }

/* Chronik-Tag-Zeile: ca. 20px zwischen den Eintraegen, 6px Zeilenabstand. */
.page-archive .index-list .pentry__tech { column-gap: 1.25rem; row-gap: 0.375rem; }
.pentry__term {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5;
  color: var(--ink-soft); padding: 0; border: 0; background: none;
  --term-text: var(--muted);
  white-space: nowrap;
  transition: color var(--transition);
}
.pentry__term .term__icon {
  width: 14px; height: 14px; fill: currentColor;
  vertical-align: -0.17em; margin-right: 6px;
}
/* Nur die Beschriftung traegt die ruhigere Textfarbe; die Icons folgen weiter
   der Tag-Farbe (currentColor) und bleiben damit unveraendert. */
.pentry__term-label { display: inline; color: var(--term-text); }
.pentry__term:hover { color: var(--ink); --term-text: var(--ink); }
.pentry__term:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; }

/* Chronik-Technologien: Icon 18px + Name in 14px, klar lesbar. In der Chronik
   folgt das Icon der Textfarbe statt einer Graustufe. */
.page-archive .pentry__term {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px;
}
.page-archive .pentry__term .term__icon {
  width: 18px; height: 18px; margin-right: 0; vertical-align: middle;
  filter: none; opacity: 1;
}
/* Aktive Technologie: volle Textfarbe, Icon und 1px-Unterstrich in der
   Technologiefarbe. Der Schalter "Icons: Farbe/Grau" faerbt zusaetzlich. */
.page-archive .pentry__term.is-active { color: var(--ink); --term-text: var(--ink); }
.page-archive .pentry__term.is-active .pentry__term-label {
  border-bottom: 1px solid var(--icon-color, currentColor);
  padding-bottom: 1px;
}
.page-archive .pentry__term.is-active .term__icon { color: var(--icon-color, currentColor); }
/* Sehr dunkle Markenfarben bleiben auf dunklem Grund lesbar. */
:root[data-theme="dark"] .page-archive .pentry__term.is-active .term__icon.term__icon--dark { color: currentColor; }

/* Eintrag: Titel mit Aufklapp-Pfeil, Auftraggeber rechts, Kurztext darunter. */
.pentry__title-h { min-width: 0; display: flex; }
.pentry__title { display: inline-flex; align-items: center; gap: 8px; }
.pentry__chevron {
  flex: none; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--transition), border-color var(--transition);
}
.pentry__title:hover .pentry__chevron { border-color: var(--ink-soft); }
.pentry__title[aria-expanded="true"] .pentry__chevron { transform: rotate(225deg); margin-top: 3px; }
.pentry__client {
  flex: none; align-self: baseline;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5;
  color: var(--muted); text-align: right;
}
.pentry__desc { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; hyphens: none; text-wrap: pretty; }

/* Credits: kompakte Zeile (Jahr · Produktion · Ensemble · Rolle) ohne
   Aufklappen und ohne Technologie-Chips. */
.page-archive .pentry--credit .pentry__node {
  /* Marker an die kleinere Credit-Titelhoehe koppeln. */
  top: calc((0.9375rem * 1.3 - var(--marker-size)) / 2 + var(--marker-offset-y));
}
.pentry--credit .pentry__title-text { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.pentry--credit .pentry__desc { font-size: 0.875rem; line-height: 1.6; }

/* Inline-Dokumentation: nur auf Wunsch, klar vom Eintrag abgesetzt. */
.pentry__details {
  display: grid; gap: var(--space-5);
  margin-top: var(--space-2); padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  max-width: 68ch;
}
.pentry__details[hidden] { display: none; }
/* Im Eintrag liefert bereits .pentry__details die obere Trennlinie; die
   zusaetzliche Kante des Meta-Blocks waere die zweite Linie im Abstand. */
.pentry__details .detail__meta { margin-top: 0; border-top: 0; }
.pentry__details .detail__meta-row { grid-template-columns: 8rem minmax(0, 1fr); }
.pentry__details .detail__block { margin-top: 0; }
.pentry__details .detail__links li:last-child,
.pentry__details .detail__media figure:last-child { margin-bottom: 0; }

/* Der Faden: eine senkrechte 1px-Linie in der Faden-Spalte, vom ersten bis zum
   letzten sichtbaren Knoten. Farbe = Technologiefarbe bei ca. 55% Deckkraft,
   Hoehe wird von app.js gesetzt und animiert. */
.board__thread {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 0;
  background: var(--thread-color, var(--line-strong));
  opacity: 0.55;
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 0;
}
.index-list { position: relative; z-index: 1; }

/* Fokus-Leiste: Hinweis oder aktiver Faden mit Zaehler und Zuruecksetzen. */
.archive__bar { min-height: 1.5rem; }
.archive__hint { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.archive__hint--touch { display: none; }
@media (hover: none) {
  .archive__hint--pointer { display: none; }
  .archive__hint--touch { display: inline; }
}
.archive__focus { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 0.6875rem; }
.archive__focus-label { display: inline-block; min-width: var(--filter-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.archive__focus-term { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.archive__focus-term .term__icon { width: 14px; height: 14px; color: var(--thread-color, currentColor); }
.archive__focus-count { color: var(--muted); }
.archive__clear {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.archive__clear:hover { color: var(--ink); border-color: var(--ink); }

/* Aktiver Faden: nur die zugehoerigen Projekte bleiben sichtbar; alle anderen
   werden ausgeblendet (der Faden verbindet die verbleibenden Eintraege).
   Die Spezifitaet (.page-archive .pentry.is-filtered-out) muss das mobile
   `.page-archive .pentry { display: grid }` uebertrumpfen, sonst bleiben die
   Eintraege auf dem Handy sichtbar. */
.page-archive .pentry.is-filtered-out { display: none; }

/* Panel: nur Flaeche plus neutraler Haarstrich. Kein eigenes Scrollen, kein
   Abschneiden. Gleiches Innenpadding an allen vier Seiten. */
.col--doc {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  margin-left: auto;   /* rechte Kante am Inhaltsrand ausrichten */
  padding: var(--panel-padding);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  /* Fliesstext bricht ohne Silbentrennung; lange Woerter brechen nur wenn noetig. */
  overflow-wrap: break-word;
  hyphens: none;
}

/* Version 2: Doku- und Tag-Panel teilen Flaeche und Typografie. Die vertikale
   Position folgt dem ausloesenden Eintrag (board__step --anchor), die
   horizontale kommt allein aus der reservierten Panelspalte. */
.page-archive .col--doc,
.page-archive .col--term {
  padding: var(--panel-padding);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  /* Panel-Typografie: ruhiger Fliesstext ohne Silbentrennung. */
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
  hyphens: none;
}
.page-archive .col--doc { position: static; margin-left: 0; }

/* Abstand unten kommt nur aus dem Padding, nicht aus Kind-Margins. */
.col--doc > :last-child,
.col--doc > :last-child > :last-child { margin-bottom: 0; }
.col--doc .detail__links li:last-child,
.col--doc .detail__media figure:last-child { margin-bottom: 0; }

/* About ------------------------------------------------------------------- */

.about__body { max-width: 68ch; }
.about__body > p { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft); }
.about__focus { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }
.about__focus-label { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.about__focus-list { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.9; }

/* Werdegang --------------------------------------------------------------- */

.cv-list { border-top: 1px solid var(--line-soft); }
.cv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--line-soft); }
.cv__period { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); padding-top: 4px; }
.cv__role { font-size: 1rem; font-weight: 500; }
.cv__context { font-size: 0.9375rem; color: var(--ink-soft); margin-top: var(--space-1); }
.cv__note { font-size: 0.875rem; color: var(--muted); margin-top: var(--space-2); max-width: 72ch; }
.cv__line { margin-top: var(--space-4); }
.cv__line-role { font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); }
.cv__link { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: border-color var(--transition), color var(--transition); }
.cv__link:hover { color: var(--ink); border-color: var(--ink); }

/* Footer ------------------------------------------------------------------ */

.footer { border-top: 1px solid var(--line); padding: var(--space-16) 0 var(--space-8); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-10); }
.footer__title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: var(--space-4); }
.footer__name { font-size: 0.9375rem; }
.footer__name-sub { margin-top: 2px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.footer__mail { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.8125rem; }
.footer__mail a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color var(--transition); }
.footer__mail a:hover { border-color: var(--ink); }
.footer__address { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.8; }
.footer__note { margin-top: var(--space-3); font-size: 0.75rem; color: var(--muted); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }

/* Detailbausteine (Inline-Dokumentation) ---------------------------------- */

/* Detailfelder: ein gemeinsames Muster fuer alle Felder. Label links in fester
   Spalte, Wert rechts an derselben Textlinie; auf schmalen Viewports stehen
   Label und Wert untereinander (Label darueber). Die Mono-Labels folgen den
   uebrigen Auszeichnungen (SCHWERPUNKTE, 01 / ARCHIV). */
.detail__meta { margin-top: var(--space-8); border-top: 1px solid var(--line-soft); }
.detail__meta-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.detail__meta-row > * { min-width: 0; }
.detail__field-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); padding-top: 2px; }
.detail__field-value { font-size: 0.9375rem; font-weight: 400; line-height: 1.7; color: var(--ink-soft); }

.detail__block { margin-top: var(--space-8); }
.detail__block-title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: var(--space-4); }
.detail__list li { position: relative; padding-left: var(--space-5); margin-bottom: var(--space-2); font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.7; }
.detail__list li::before { content: '·'; position: absolute; left: 0; color: var(--muted); }
.detail__text { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.7; }
.detail__links li { margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 0.8125rem; }
.detail__links a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.detail__links a:hover { border-color: var(--ink); }

/* Weblink zum Projekt als Feldwert: Mono-Schrift und Unterstrich bleiben,
   Groesse folgt dem uebrigen Feldwert. */
.detail__field-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: inherit; color: var(--ink-soft);
  transition: color var(--transition);
}
.detail__field-link span { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color var(--transition); }
.detail__field-link:hover { color: var(--ink); }
.detail__field-link:hover span { border-color: var(--ink); }
.detail__field-link:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; }
.detail__field-link svg { flex: none; width: 13px; height: 13px; }
.detail__media figure { margin-bottom: var(--space-5); }
.detail__media img { border: 1px solid var(--line); }
.detail__media figcaption { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }

/* Reveal ------------------------------------------------------------------ */

[data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --index-year: 80px; }
  .nav__toggle { display: flex; }
  .nav__menu { position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all var(--transition); }
  .nav__menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .board { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
  .board__step { flex-direction: column; width: 100%; margin-top: 0; margin-left: 0; }
  .board__panel-slot { display: none; }
  .col, .col--index, .col--term { flex: none; width: 100%; min-width: 0; max-width: none; padding-right: 0; }
  .col:not(.col--index) { padding-top: var(--space-6); border-top: 1px solid var(--line-soft); }
  /* Panel behaelt sein gleichmaessiges Innenpadding auf schmalen Viewports. */
  .col.col--doc { padding: var(--panel-padding); }
  .board__link { align-self: flex-start; padding: 0 0 var(--space-2) 2px; }
  .board__link::before { content: '↓'; }
  .cv { grid-template-columns: 1fr; gap: var(--space-2); }
  .cv__period { padding-top: 0; }
  .modal { padding: 0; }
  .modal__content { border: none; min-height: 100%; }
  .modal__body { padding: var(--space-6); padding-top: var(--space-12); }
  .detail__meta-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (max-width: 480px) {
  :root { --nav-height: 58px; }
  .container { padding: 0 var(--space-4); }
  .nav__inner { padding: 0 var(--space-4); }
  .hero__content { padding: 0 var(--space-4); }
  .detail__meta-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Einspaltige Eintraege auf schmalen Viewports. Reihenfolge: Meta-Zeile
   (Jahr links, Auftraggeber rechts) -> Titel -> Beschreibung -> Tags -> Doku.
   Alle Aenderungen liegen bewusst nur in dieser Media Query; ab 641px und
   insbesondere ab 1024px bleibt das Desktop-Layout unveraendert. */
@media (max-width: 640px) {
  /* Kreis-Marker und Technik-Faden bleiben auch auf dem Handy sichtbar. Der
     Marker sitzt in einem schmalen Gutter links auf der Jahr-Zeile, der Faden
     verbindet die gefilterten Eintraege wie auf dem Desktop. */
  .page-archive { --mobile-marker-gutter: 24px; }

  /* Zwei Spuren nur fuer die Meta-Zeile: Jahr (max-content) und Auftraggeber
     (flexibel). Alle weiteren Zeilen spannen ueber die volle Breite. Der
     Gutter links traegt den Kreis-Marker, ohne die Spalten zu belegen. */
  .page-archive .pentry {
    position: relative;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    align-items: start;
    padding-left: var(--mobile-marker-gutter);
  }

  /* Marker-Spalte absolut im Gutter; der Marker sitzt auf der Jahr-Zeile.
     Der Faden wird von app.js ueber die Marker-Rects gezeichnet. */
  .page-archive .pentry__rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--mobile-marker-gutter);
    display: block;
  }
  .page-archive .pentry__node,
  .page-archive .pentry--credit .pentry__node {
    left: calc((var(--mobile-marker-gutter) - var(--marker-size)) / 2);
    top: calc((0.6875rem * 1.5 - var(--marker-size)) / 2 + var(--marker-offset-y));
  }
  .pentry { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }

  /* Body und Kopf aufloesen, damit Jahr, Auftraggeber, Titel, Beschreibung und
     Tags zu direkten Rasterzeilen des Eintrags werden und per order gestapelt
     werden koennen. */
  .page-archive .pentry__body,
  .page-archive .pentry__head { display: contents; }

  .page-archive .pentry__year { order: 1; padding-top: 0; }
  .page-archive .pentry__client {
    order: 2;
    grid-column: 2;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .page-archive .pentry__title-h { order: 3; grid-column: 1 / -1; min-width: 0; }
  .page-archive .pentry__desc { order: 4; grid-column: 1 / -1; max-width: none; }
  .page-archive .pentry__tech { order: 5; grid-column: 1 / -1; max-width: 100%; }
  .page-archive .pentry__details { order: 6; grid-column: 1 / -1; max-width: none; }

  /* Kein horizontaler Ueberlauf: alle Raster-/Flex-Kinder duerfen schrumpfen. */
  .page-archive .pentry > *,
  .page-archive .pentry__body > *,
  .page-archive .pentry__head > *,
  .page-archive .pentry__tech > * { min-width: 0; }
  .page-archive .pentry__title,
  .page-archive .pentry__title-text,
  .page-archive .pentry__desc { overflow-wrap: anywhere; word-break: break-word; }

  /* Mobil-Typografie: Titel 18-20px, Beschreibung 15-16px. Gewicht und Farbe
     bleiben unveraendert. */
  .page-archive .pentry__title { font-size: 1.1875rem; max-width: 100%; min-height: 44px; }
  .page-archive .pentry--credit .pentry__title-text { font-size: 1.0625rem; }
  .page-archive .pentry__desc { font-size: 0.9375rem; }

  /* Doku-Felder einspaltig: Label und Wert untereinander, fuer alle Felder
     mit demselben Abstand. */
  .page-archive .pentry__details .detail__meta-row { grid-template-columns: 1fr; gap: var(--space-1); }

  /* Filterzeile: Label und Hinweistext untereinander statt nebeneinander. */
  .archive__focus { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}