/* site.css — Designrichtung B (WEB-002)
 *
 * Keine Farbwerte hier. Keine Rohmaße außer 0, 1fr, 100% und Prozenten,
 * die aus dem Raster folgen. Alles Übrige kommt aus tokens.css.
 *
 * Aufbau:
 *   1  Grundlage
 *   2  Blatt und Raster
 *   3  Blattkopf, Verzeichnis, Blattfuß
 *   4  Zeilen (die Sektionsstruktur)
 *   5  Typografie
 *   6  Szene (Spine-Slot)
 *   7  Angebot, Arbeiten, Logbuch
 *   8  Kontakt
 *   9  Nachfrage-Marken
 *  10  Fokus, Motion, Druck
 */

/* == 1 Grundlage ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  /* Millimeterpapier des Bogens: zwei Haarlinienraster, keine Bilddatei.
     Sehr schwach — es soll Untergrund sein, nicht Dekor. */
  background-image:
    linear-gradient(to right,  var(--border) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, var(--border) var(--rule), transparent var(--rule));
  background-size: var(--space-5) var(--space-5);
  background-position: center top;
}

/* Das Raster darf nie mit Text konkurrieren — deshalb liegt über dem Body
   ein Papierfeld, und nur die Ränder lassen das Raster durch. */
img, svg { display: block; max-width: 100%; }

.skip {
  position: absolute;
  left: var(--space-3);
  top: 0;
  transform: translateY(-120%);
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: var(--radius);
}
.skip:focus { transform: translateY(0); }

/* == 2 Blatt und Raster =================================================== */

.sheet {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--bg);
  border-left:  var(--rule) solid var(--border);
  border-right: var(--rule) solid var(--border);
}

/* Die tragende Idee des Layouts: eine feste Randspalte links, in der
   Blattnummer und Sektionsname stehen. Der Inhalt beginnt erst dahinter.
   Unter 768px klappt die Randspalte über den Inhalt. */
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-top: var(--rule) solid var(--border);
}

.row__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.row__label .num { color: var(--accent); }

.row__body { min-width: 0; }
.row__body > :first-child { margin-top: 0; }
.row__body > :last-child  { margin-bottom: 0; }

@media (min-width: 48em) {
  .row {
    grid-template-columns: var(--margin-col) minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-7) var(--space-5);
  }
  .row__label {
    /* klebt am oberen Rand der Zeile, solange die Zeile im Bild ist —
       die Beschriftung bleibt bei ihrem Abschnitt. Kein Effekt, eine Position. */
    position: sticky;
    top: var(--space-4);
    align-self: start;
    text-align: right;
    line-height: var(--lh-body);
  }
}

/* == 3 Blattkopf, Verzeichnis, Blattfuß =================================== */

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--rule-strong) solid var(--text);
}

.head__mark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.passer {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--accent);
  flex: none;
}

.head__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-display, 700);
  letter-spacing: var(--track-label);
  text-transform: lowercase;
}

.head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tag--warn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

.index {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule) solid var(--border);
  background: var(--bg-elevated);
}

.index__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.index__list a {
  display: inline-block;
  padding: var(--space-1) 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--rule-strong) solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.index__list a:hover { border-bottom-color: var(--accent); }
.index__list .num { color: var(--accent); margin-right: var(--space-1); }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: var(--rule-strong) solid var(--text);
}

.foot__mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
}

.foot__meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Sprachumschalter im Blattfuss — nur dort, wo beide Sprachen existieren.
   Kein JS, kein Toggle: einfache Links auf die andere statische Fassung
   (DECISIONS.md #12). */
.foot__lang {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.foot__lang-link {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: var(--rule) solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.foot__lang-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.foot__lang-link--active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.foot__lang-sep {
  color: var(--text-muted);
}

/* == 4 Zeilenvarianten ==================================================== */

.row--open { border-top: 0; }

.row--act { background: var(--bg-elevated); }

/* == 5 Typografie ========================================================= */

.claim {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--weight-display, 700);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

/* Der einzige Ort, an dem der Rotstift im Fließtext auftaucht:
   unterstrichen wie eine Korrektur, nicht farbig hervorgehoben. */
.claim em {
  font-style: normal;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-strong);
  text-underline-offset: var(--space-1);
}

.h-sec {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display, 700);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.lede {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: var(--lh-body);
}

.body, .foot-note {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

.foot-note {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Randnotiz: links vom Text durch eine Haarlinie abgesetzt. */
.aside {
  margin: 0;
  max-width: var(--measure);
  padding-left: var(--space-3);
  border-left: var(--rule-strong) solid var(--border);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* == 6 Szene (Spine-Slot, STACK.md §6) ==================================== */

.scene {
  margin: 0 0 var(--space-4);
}

/* Platz wird über aspect-ratio reserviert, bevor irgendetwas lädt.
   Damit gibt es keinen Layout-Shift, wenn die Szene später eintauscht. */
.scene__frame {
  aspect-ratio: var(--ratio-scene);
  width: 100%;
  background: var(--bg-elevated);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.scene__poster {
  width: 100%;
  height: 100%;
  color: var(--border);
}

.scene__cap {
  margin-top: var(--space-2);
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.scene__cap .tag { margin-right: var(--space-2); }

/* == 7 Angebot, Arbeiten, Logbuch ========================================= */

/* Angebot: Spezifikationsliste. Bezeichner links, Erklärung rechts,
   Haarlinie zwischen den Zeilen — die Anmutung eines Datenblatts. */
.spec { margin: 0; }

.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--rule) solid var(--border);
}

.spec__row:last-child { border-bottom: var(--rule) solid var(--border); }

.spec dt {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.spec dt .num {
  color: var(--accent);
  margin-right: var(--space-2);
}

.spec dd {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-muted);
}

@media (min-width: 40em) {
  .spec__row {
    grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* Arbeiten: ein Eintrag als vollwertiges Blatt, nicht als Kachel im Raster.
   Abbildung und Datenblock nebeneinander ab 48em. */
.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin-bottom: var(--space-4);
}

.work__plate {
  aspect-ratio: var(--ratio-plate);
  background: var(--bg);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.work__poster {
  width: 100%;
  height: 100%;
  color: var(--border);
}

.work__spec { min-width: 0; }

.work__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--lh-tight);
}

.work__line {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

.work__link { margin: var(--space-3) 0 0; }

.meta { margin: 0; }

.meta__row {
  display: grid;
  grid-template-columns: minmax(0, 12ch) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--rule) solid var(--border);
}

.meta dt {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.meta dd {
  margin: 0;
  font-size: var(--step--1);
}

@media (min-width: 48em) {
  .work {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-5);
    padding: var(--space-5);
  }
}

/* Logbuch: Datum in der Spalte, Eintrag daneben. Gleiches Raster wie
   die Randspalte des Blatts — das Logbuch ist kein Fremdkörper. */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.log__entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-top: var(--rule) solid var(--border);
}

.log__entry:last-child { border-bottom: var(--rule) solid var(--border); }

.log__date {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.log__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--lh-tight);
}

.log__text { min-width: 0; }
.log__text p { margin: 0; max-width: var(--measure); }

@media (min-width: 40em) {
  .log__entry {
    grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* == 8 Kontakt ============================================================ */

/* == 8a Redaktionsbereich (WEB-005) ========================================
 *
 * Der hintere Bereich nach DECISIONS.md #17: gleiches Blatt, gleiche Tokens,
 * drei eigene Muster — Avatar-Plätze, Marginalie, Beitragskörper.
 * Alles davon baut auf dem Zeilenraster auf; nichts davon hängt an der
 * Visitenkarte (Regel aus #11: Angebot, kein Weg).
 */

/* Avatar-Plätze: fünf reservierte Flächen nach dem Poster-Muster aus
   STACK.md §6 — Seitenverhältnis und Rahmen stehen, bevor ein Bild existiert.
   Keine Bilddatei, keine „coming soon"-Kachel: die Fläche sagt selbst,
   dass sie reserviert ist. */
.avatars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.avatars__slot { margin: 0; }

.avatars__frame {
  aspect-ratio: 1 / 1;
  background: var(--bg-elevated);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.avatars__poster {
  width: 100%;
  height: 100%;
  color: var(--border);
}

.avatars__cap {
  margin-top: var(--space-2);
  font-size: var(--step--2);
}

/* Belegter Platz: der ganze Slot ist ein Link auf das Profil. Der Avatar
   steht in --text (die Platzhalter-Poster stehen in --border — für ein
   belegtes Bild wäre das zu schwach). Hover ändert genau eine Eigenschaft:
   die Rahmenfarbe (DESIGN.md §3). */
.avatars__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.avatars__link .avatars__frame {
  transition: border-color var(--dur) var(--ease);
}

.avatars__link:hover .avatars__frame {
  border-color: var(--accent);
}

.avatars__frame--filled .avatars__poster {
  color: var(--text);
}

@media (min-width: 40em) {
  .avatars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .avatars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Marginalie: wer pflegt diesen Bereich, zuletzt wann. Dieselbe
   Monospace-Sprache wie die Abschnittsnummern (.num, --font-display,
   --track-label). Sie steht am Rand — leise, aber immer sichtbar. */
.margin {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: var(--rule) solid var(--border);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.margin__line { margin: 0; }
.margin__line .num { color: var(--accent); }

/* Beitragskörper: Datum und Ressort über der Überschrift, Text in
   --measure, Schlussvermerk klein. Kein Sidebar-Theater — ein Beitrag
   ist ein Blatt wie jedes andere. */
.post__head { margin-bottom: var(--space-4); }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.post__ressort { letter-spacing: var(--track-label); text-transform: uppercase; }

.post__body { max-width: var(--measure); }

/* Abbildung im Fließtext: Höhe über aspect-ratio reserviert, bevor das
   SVG rendert — kein Layout-Shift (DESIGN.md §4). Das SVG ist inline und
   erbt die Figur über currentColor aus --text; die Gesichts-Aussparungen
   liegen auf --bg, damit sie in jeder Variante sichtbar bleiben. */
.figure {
  margin: 0 0 var(--space-3);
}

.figure__frame {
  aspect-ratio: 1 / 1;
  width: min(var(--figure-width), 60%);
  margin: 0 auto;
  display: grid;
  place-items: center;
  color: var(--text);
}

.figure__frame svg {
  width: 100%;
  height: 100%;
}

.figure__cap {
  max-width: var(--measure);
  margin: var(--space-2) auto 0;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.post__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--rule) solid var(--border);
}

/* Übergang von der Visitenkarte: die Redaktionszeile sieht aus wie jede
   andere Zeile — sichtbar, aber nicht im Weg. Kein Band, kein Modal,
   kein erzwungener Sprung. */
.row--redaktion { border-top-style: double; }

/* == 8b Profilseite (WEB-012) ==============================================

   Ein Agenten-Profil: Avatar und Datenblock nebeneinander, gleiches Raster
   wie .work (5fr/6fr ab 48em). Die Seite ist die Vorlage für alle fünf
   Profile — austauschbar sind nur SVG, Name, Rolle, Ressort, Beitragsliste. */
.profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin-bottom: var(--space-4);
}

.profile__figure { margin: 0; }

.profile__spec { min-width: 0; }

/* Name und Rolle nutzen die vorhandenen Typo-Stufen; der Name steht eine
   Stufe unter dem Beitrags-claim, weil das Profil dem Ressort untergeordnet
   ist — kein neuer Token, nur eine kleinere Stufe desselben Musters. */
.claim--profile {
  font-size: var(--step-2);
  margin-bottom: var(--space-2);
}

.profile__role {
  margin-bottom: var(--space-3);
  font-size: var(--step-0);
  color: var(--text-muted);
}

.profile__body { max-width: var(--measure); }

@media (min-width: 48em) {
  .profile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-5);
    padding: var(--space-5);
    align-items: start;
  }
}

/* == 9 Nachfrage-Marken =================================================== */

.act {
  max-width: var(--measure);
  padding: var(--space-5);
  border: var(--rule-strong) solid var(--text);
  border-radius: var(--radius);
  background: var(--bg);
}

.act__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display, 700);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.act__line { margin: 0 0 var(--space-4); }

.act__do { margin: 0 0 var(--space-4); }

.act__ask {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--bg);
  border: var(--rule-strong) solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--weight-display, 700);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.button:hover {
  background: var(--bg);
  color: var(--accent);
}

.arrow {
  width: var(--space-3);
  height: var(--space-3);
  flex: none;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: var(--rule);
  text-underline-offset: var(--space-1);
  transition: text-decoration-thickness var(--dur) var(--ease);
}

.link:hover { text-decoration-thickness: var(--rule-strong); }

/* == 9 Nachfrage-Marken =================================================== */

/* Jede offene Stelle ist als offene Stelle gebaut, nicht als Blindtext, der
   live gehen könnte: Rotstift, gestrichelter Rahmen, Monospace. Wer das
   übersieht, liest die Seite nicht. */
.ask {
  display: inline-block;
  padding: 0 var(--space-1);
  border: var(--rule) dashed var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  background: var(--bg);
}

.ask--big {
  display: block;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-width: var(--rule-strong);
  font-size: var(--step--1);
}

/* == 10 Fokus, Motion, Druck ============================================== */

:focus-visible {
  outline: var(--rule-strong) solid var(--accent);
  outline-offset: var(--space-1);
}

/* Kein Element setzt outline: none. Der Fokusring ist Rotstift auf Papier
   und damit auf jedem Grund dieser Seite sichtbar (6.09:1 bzw. 5.13:1). */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Die Szene hält still statt zu loopen — DESIGN.md §3.
     Ohne Szene ist das Standbild bereits der Auslieferungszustand;
     scene.js beobachtet in diesem Fall gar nicht erst. */
}

@media print {
  body { background-image: none; }
  .index, .skip { display: none; }
  .sheet { border: 0; }
}