/* =============================================================================
   sections.css — Die einzelnen Seitenabschnitte
   ========================================================================== */

/* ===========================================================================
   01 · HERO
   Nahezu bildschirmfüllend. Name als typografisches Hauptmotiv,
   darunter Rolle und Positionierung, am unteren Rand eine Telemetriezeile.
   ======================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block-start: var(--header-h);

  /*
   * Kürzeres Zeitbudget als im Rest der Seite.
   *
   * Grund: Der Hero enthält das LCP-Element. Solange dessen Deckkraft unter
   * 1 liegt, zählt der Browser den Largest Contentful Paint nicht — jede
   * Millisekunde Einblendung geht direkt in diesen Messwert. Gemessen lag
   * der LCP mit den globalen Werten (900 ms Dauer, bis 540 ms Versatz) bei
   * rund 1,8 s; mit diesen Werten unter 1 s.
   *
   * Weiter unten auf der Seite spielt das keine Rolle — dort darf die
   * Einblendung ruhig langsamer und großzügiger sein.
   */
  --d-reveal: 620ms;
  --d-cinema: 900ms;
}

/* Lesbarkeitsschleier.
   Die Topologie ist bewusst nach rechts verschoben, trotzdem laufen einzelne
   Pfade hinter die Typografie. Ein weicher Verlauf von links nimmt genau dort
   Kontrast heraus, wo Text steht, und lässt die Grafik rechts unangetastet.
   Liegt in der Stapelebene von .site-main, also über dem Canvas und unter
   dem Text. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Schmale Viewports: Text und Grafik liegen zwangsläufig übereinander,
     weil kein Platz nebeneinander ist. Deshalb hier ein flächiger Schleier
     statt eines seitlichen Verlaufs. */
  background: linear-gradient(
    180deg,
    rgb(5 7 10 / 0.55) 0%,
    rgb(5 7 10 / 0.78) 30%,
    rgb(5 7 10 / 0.78) 72%,
    rgb(5 7 10 / 0.5) 100%
  );
}

/* Breite Viewports: Die Topologie steht rechts neben der Typografie.
   Der Schleier nimmt nur links Kontrast heraus und lässt die Grafik frei. */
@media (min-width: 64rem) {
  .hero::before {
    background: linear-gradient(
      98deg,
      rgb(5 7 10 / 0.86) 0%,
      rgb(5 7 10 / 0.62) 26%,
      rgb(5 7 10 / 0.18) 48%,
      transparent 64%
    );
  }
}

.hero__inner {
  position: relative;   /* Anker für den Scroll-Hinweis */
  grid-row: 1;
  align-self: center;
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--s-8);
  display: grid;
  gap: var(--s-5);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.hero__eyebrow-sep {
  width: 1.5rem;
  height: 1px;
  background-color: var(--c-line-strong);
}

/* Der Name. Größtes Element der Seite. */
.hero__name {
  font-size: var(--t-display);
  font-weight: var(--fw-semi);
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  margin-block: clamp(var(--s-2), 1.4vh, var(--s-4));
  /* Kein text-wrap: balance — die Zeilen sind bewusst manuell gesetzt */
  text-wrap: nowrap;
}

.hero__name-line { display: block; }

/* Zweite Zeile mit leichtem Helligkeitsverlauf: erzeugt Tiefe ohne Effekt.
   Der Verlauf wird erst gesetzt, wenn background-clip: text unterstützt wird —
   sonst bliebe bei color: transparent der Name unsichtbar. */
.hero__name-line--2 { color: var(--c-text); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__name-line--2 {
    color: transparent;
    background-image: linear-gradient(96deg, var(--c-text) 8%, var(--c-text-muted) 96%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* Qualifikation — die formale Berufsbezeichnung.
   Bewusst in der Grundschrift und in Satzschreibung gesetzt, nicht im
   Monospace-Versalstil der Rollenzeile darunter: So entsteht eine klare
   Rangfolge (Name → Qualifikation → aktuelle Rolle), statt dass zwei
   gleich aussehende Zeilen miteinander konkurrieren. */
.hero__credential {
  display: grid;
  gap: 0.12em;
  max-width: 30ch;
  font-size: var(--t-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
}

/* Zweite Zeile: der Schwerpunkt. Eine Stufe leiser als die Berufsbezeichnung —
   dadurch liest sich der Block als Titel mit Zusatz, ohne dass ein
   Trennzeichen nötig wäre, das am Zeilenumbruch in der Luft hängt. */
.hero__credential-focus {
  font-size: var(--t-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  color: var(--c-text-muted);
}

.hero__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-block-start: var(--s-1);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.68rem + 0.32vw, 0.9375rem);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--c-accent-soft);
}

.hero__role-sep { color: var(--c-text-faint); }

.hero__lede {
  max-width: 46ch;
  margin-block-start: var(--s-3);
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

.hero__lede strong {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
}

/* --- Telemetriezeile am unteren Rand ------------------------------------- */
.hero__telemetry {
  grid-row: 2;
  border-block-start: var(--b-hair);
  background: linear-gradient(to top, rgb(5 7 10 / 0.7), transparent);
}

.hero__telemetry-inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: var(--s-4) var(--space-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) clamp(var(--s-5), 4vw, var(--s-9));
  align-items: center;
}

@media (min-width: 1200px) {
  .hero__telemetry-inner { padding-inline-start: max(var(--space-gutter), clamp(3.5rem, 4.4vw, 5rem)); }
}

.telemetry {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

.telemetry__key { color: var(--c-text-faint); }
.telemetry__val { color: var(--c-text-muted); }

/* Auf sehr schmalen Geräten nur die zwei wichtigsten Werte zeigen */
@media (max-width: 30rem) {
  .telemetry[data-priority="low"] { display: none; }
}

/* Scroll-Hinweis: eine Linie, die einmal pro Zyklus nach unten läuft.
   Sitzt am rechten unteren Rand des Hero-Inhalts. */
.hero__scroll-hint {
  position: absolute;
  inset-inline-end: var(--space-gutter);
  inset-block-end: var(--s-6);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

@media (min-width: 56rem) and (min-height: 44rem) {
  .hero__scroll-hint { display: flex; }
}

.hero__scroll-hint .mono { writing-mode: vertical-rl; }

.hero__scroll-track {
  position: relative;
  width: 1px;
  height: 3.5rem;
  background-color: var(--c-line-strong);
  overflow: hidden;
}

.hero__scroll-track::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--c-accent));
}

.js.motion .hero__scroll-track::after {
  animation: scroll-run 2.6s var(--e-in-out) infinite;
}

@keyframes scroll-run {
  0%        { transform: translateY(-100%); opacity: 0; }
  25%, 65%  { opacity: 1; }
  100%      { transform: translateY(250%); opacity: 0; }
}

/* ===========================================================================
   02 · PROFIL
   ======================================================================== */
.profile__statement {
  max-width: 24ch;
  font-size: var(--t-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin-block-end: clamp(var(--s-7), 5vw, var(--s-10));
}

.profile__statement em {
  font-style: normal;
  color: var(--c-accent-soft);
}

.profile__body {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: start;
}

@media (min-width: 52rem) {
  .profile__body { grid-template-columns: minmax(10rem, 13.5rem) minmax(0, 1fr); }
}

.profile__prose {
  display: grid;
  gap: var(--s-5);
  max-width: 62ch;
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
}

.profile__prose strong { color: var(--c-text); font-weight: var(--fw-medium); }

/* --- Portrait: technisch gerahmt, monochrom-kühl -------------------------
   Die Vorlage hat nur 315 × 505 px. Die Anzeigebreite ist deshalb bewusst
   knapp gehalten, damit das Bild auf hochauflösenden Displays nicht
   sichtbar hochskaliert wird. */
.portrait {
  position: relative;
  isolation: isolate;   /* eigener Stapelkontext für die Blendmodi */
  width: min(100%, 13.5rem);
  aspect-ratio: 315 / 505;
}

.portrait__img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;   /* Kopf leicht nach oben, weniger Oberkörper */
  border-radius: var(--r-xs);
  /* Kräftiger Kontrast als Basis für die Duotone-Schicht darüber */
  filter: grayscale(1) contrast(1.28) brightness(0.82);
}

/* Kühler Lichtanteil: macht aus dem Graustufenbild ein Duotone,
   das zur Farbwelt der Seite gehört statt daneben zu stehen. */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-xs);
  background:
    linear-gradient(188deg, rgb(61 123 250 / 0.42) 0%, rgb(34 199 224 / 0.14) 46%, transparent 74%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Unterkante läuft in den Seitengrund aus — das Bild sitzt dadurch im
   Layout, statt als Rechteck aufgeklebt zu wirken. */
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r-xs);
  background: linear-gradient(
    to top,
    var(--c-bg) 0%,
    rgb(5 7 10 / 0.72) 12%,
    rgb(5 7 10 / 0.10) 34%,
    transparent 52%
  );
  pointer-events: none;
}

/* Eckmarkierungen — Messmarken statt Rahmen */
.portrait__ticks {
  position: absolute;
  inset: calc(-1 * var(--s-3));
  z-index: 3;
  pointer-events: none;
  color: var(--c-line-accent);
}

.portrait__ticks span {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
}

.portrait__ticks span:nth-child(1) { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.portrait__ticks span:nth-child(2) { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; }
.portrait__ticks span:nth-child(3) { bottom: 0; left: 0;    border-right: 0; border-top: 0; }
.portrait__ticks span:nth-child(4) { bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

.portrait__caption {
  margin-block-start: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
  line-height: 1.8;
}

/* ===========================================================================
   03 · WERDEGANG
   Vertikale Achse mit Knoten. Jeder Knoten "verbindet sich", sobald er
   in den Viewport kommt.
   ======================================================================== */
.journey {
  --journey-spine: 0.5rem;
  position: relative;
}

@media (min-width: 48rem) { .journey { --journey-spine: 7.5rem; } }
@media (min-width: 72rem) { .journey { --journey-spine: 9.5rem; } }

/* Die Achse selbst */
.journey::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-start: var(--journey-spine);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--c-line-strong) 6%,
    var(--c-line-strong) 88%,
    transparent 100%
  );
}

/* Fortschrittsanteil der Achse: wächst mit dem Scrollen mit */
.journey__progress {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: var(--journey-spine);
  width: 1px;
  height: calc(var(--journey-progress, 0) * (100% - 1.5rem));
  background: linear-gradient(to bottom, var(--c-accent), var(--c-signal));
  box-shadow: 0 0 14px 0 rgb(61 123 250 / 0.55);
}

html:not(.js) .journey__progress { display: none; }

.journey__item {
  position: relative;
  padding-inline-start: calc(var(--journey-spine) + clamp(var(--s-5), 3vw, var(--s-8)));
  padding-block: clamp(var(--s-5), 3vw, var(--s-7));
}

.journey__item + .journey__item { border-block-start: var(--b-hair); }

/* Knoten auf der Achse */
.journey__item::before {
  content: "";
  position: absolute;
  inset-block-start: calc(clamp(var(--s-5), 3vw, var(--s-7)) + 0.55em);
  inset-inline-start: var(--journey-spine);
  width: 7px;
  height: 7px;
  margin-inline-start: -3px;
  border-radius: var(--r-pill);
  background-color: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  transition: background-color var(--d-slow) var(--e-out),
              border-color     var(--d-slow) var(--e-out),
              box-shadow       var(--d-slow) var(--e-out);
}

.journey__item.is-revealed::before {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgb(61 123 250 / 0.16), 0 0 16px 0 rgb(61 123 250 / 0.7);
}

/* Ohne JS: alle Knoten aktiv darstellen */
html:not(.js) .journey__item::before {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

/* Jahresangabe */
.journey__year {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  color: var(--c-accent-soft);
  display: block;
  margin-block-end: var(--s-2);
}

@media (min-width: 48rem) {
  .journey__year {
    position: absolute;
    inset-block-start: calc(clamp(var(--s-5), 3vw, var(--s-7)) + 0.15em);
    inset-inline-start: 0;
    width: calc(var(--journey-spine) - var(--s-5));
    margin: 0;
    text-align: right;
  }
}

.journey__title {
  font-size: var(--t-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
}

.journey__org {
  margin-block-start: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.journey__org .link { color: var(--c-text-muted); }

.journey__desc {
  margin-block-start: var(--s-4);
  max-width: 58ch;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}

/* ===========================================================================
   04 · TECHNOLOGIE
   Bewusst kein Kartenraster: durchgehende Bänder, nur durch Haarlinien
   getrennt. Beim Zeigen/Fokussieren hebt sich das Band und der zugehörige
   Cluster in der WebGL-Szene an.
   ======================================================================== */
.domains { border-block-start: var(--b-hair); }

.domain {
  position: relative;
  border-block-end: var(--b-hair);
  transition: background-color var(--d-base) var(--e-out);
}

.domain:hover,
.domain:focus-within { background-color: var(--c-hover); }

/* Akzentlinie, die beim Hover von links einläuft */
.domain::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--c-accent), var(--c-signal) 60%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}

.domain:hover::before,
.domain:focus-within::before { transform: scaleX(1); }

/* Zeilenraster.
   Schmal: Nummer + Inhalt.
   Breit:  Nummer | Bezeichnung | Beschreibung | Stichworte.
   Die vierte Spalte verhindert, dass rechts eine tote Fläche entsteht, und
   lässt die Zeile wie ein technisches Datenblatt lesen. */
.domain__inner {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-block: clamp(var(--s-5), 3vw, var(--s-7));
  align-items: start;
}

@media (min-width: 60rem) {
  .domain__inner {
    grid-template-columns: 3.5rem minmax(10rem, 15rem) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: baseline;
  }
}

@media (min-width: 78rem) {
  .domain__inner {
    grid-template-columns: 3.5rem minmax(10rem, 15rem) minmax(0, 1fr) minmax(8rem, 12rem);
  }
}

/* --- Rasterplätze: überall explizit, nie über Auto-Placement ------------- */

/* Schmal (2 Spalten): Nummer links, alles andere rechts untereinander */
.domain__num  { grid-column: 1; grid-row: 1; }
.domain__name { grid-column: 2; grid-row: 1; }
.domain__desc { grid-column: 2; grid-row: 2; }
.domain__tags { grid-column: 2; grid-row: 3; }

@media (min-width: 60rem) {
  .domain__name { grid-column: 2; grid-row: 1; }
  .domain__desc { grid-column: 3; grid-row: 1; }
  .domain__tags { grid-column: 3; grid-row: 2; }
}

@media (min-width: 78rem) {
  .domain__tags { grid-column: 4; grid-row: 1; }
}

/* --- Darstellung der einzelnen Zellen ------------------------------------ */

.domain__num {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  transition: color var(--d-base) var(--e-out);
  padding-block-start: 0.35em;
}

.domain:hover .domain__num,
.domain:focus-within .domain__num { color: var(--c-accent); }

.domain__name {
  font-size: var(--t-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.domain__desc {
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}

/* Stichworte: schmal als umbrechende Zeile … */
.domain__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-block-start: var(--s-4);
}

@media (min-width: 60rem) {
  .domain__tags { margin-block-start: var(--s-3); }
}

/* … breit als eigene, rechtsbündige Spalte am Zeilenende */
@media (min-width: 78rem) {
  .domain__tags {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
    margin-block-start: 0.4em;
    text-align: right;
  }
}

.domain__tag {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.domain__tag::before {
  content: "· ";
  color: var(--c-line-accent);
}

/* ===========================================================================
   05 · MANDAT (aktuelle Tätigkeit)
   ======================================================================== */
.mandate__grid {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-10));
  align-items: start;
}

@media (min-width: 60rem) {
  .mandate__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.mandate__statement {
  font-size: var(--t-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  /* Breit genug für drei Zeilen — bei 20ch blieb "einer" allein stehen. */
  max-width: 26ch;
  margin-block-end: var(--s-6);
  text-wrap: balance;
}

.mandate__prose {
  display: grid;
  gap: var(--s-5);
  max-width: 58ch;
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
}

.mandate__aside { display: grid; gap: var(--s-6); }

/* ===========================================================================
   05 · IT-EMPFEHLUNGEN

   Wieder ein eigenes Layoutmuster: zweispaltige Liste mit Haarlinien.
   Nicht die Bänder aus "Technologie" und nicht das Raster aus "Abseits" —
   jeder Abschnitt soll seine eigene Ordnung haben.
   Die Spaltenzahl ist so gewählt, dass die Liste auch bei doppelt so vielen
   Einträgen noch überschaubar bleibt.
   ======================================================================== */
/* Breite Tabellen dürfen notfalls in sich scrollen — die Seite selbst nie. */
.picks { overflow-x: auto; }

.picks__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/* --- Kopfzeile: benennt die Spalten und macht die Ordnung sichtbar ------- */
.picks__table thead th {
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--c-line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
}

.picks__table tbody tr {
  border-block-end: var(--b-hair);
  transition: background-color var(--d-base) var(--e-out);
}

.picks__table tbody tr:hover { background-color: var(--c-hover); }

.picks__table td,
.picks__table tbody th {
  padding-block: clamp(var(--s-4), 2.2vw, var(--s-5));
  vertical-align: baseline;
  font-weight: var(--fw-regular);
}

/* Spaltenbreiten: die beiden linken Spalten fest genug für sauberen
   senkrechten Abgleich, die Beschreibung nimmt den Rest. */
.picks__field {
  width: 12rem;
  padding-inline-end: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
  transition: color var(--d-base) var(--e-out);
}

.picks__table tbody tr:hover .picks__field { color: var(--c-accent-soft); }

.picks__name {
  width: 22rem;
  padding-inline-end: var(--s-6);
  font-size: var(--t-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
}

.picks__note {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}

/* --- Schmale Viewports: Tabelle in gestapelte Blöcke auflösen ------------
   Nebeneinander wären drei Spalten hier nicht mehr lesbar. Die Kopfzeile
   entfällt, weil jede Zeile für sich steht. */
@media (max-width: 56rem) {
  .picks { overflow-x: visible; }

  .picks__table,
  .picks__table tbody,
  .picks__table tr,
  .picks__table td,
  .picks__table tbody th { display: block; width: auto; }

  .picks__table thead { display: none; }

  .picks__table tbody tr {
    padding-block: var(--s-5);
    border-block-end: var(--b-hair);
  }

  .picks__table tbody tr:first-child { border-block-start: var(--b-hair); }

  .picks__table td,
  .picks__table tbody th {
    padding: 0;
    padding-inline-end: 0;
  }

  .picks__name { margin-block: var(--s-2) var(--s-2); }
}

/* ===========================================================================
   06 · ABSEITS DES BERUFS
   Spezifikationsraster: Zellen nur durch Linien getrennt, keine Flächen.
   ======================================================================== */
.offduty__grid {
  display: grid;
  gap: 1px;
  background-color: var(--c-line);
  border: var(--b-hair);
  border-radius: var(--r-xs);
  overflow: hidden;
}

@media (min-width: 40rem) { .offduty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .offduty__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.offduty__cell {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background-color: var(--c-bg);
  transition: background-color var(--d-base) var(--e-out);
}

.offduty__cell:hover { background-color: var(--c-bg-panel); }

.offduty__index {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  color: var(--c-accent-soft);
}

.offduty__name {
  font-size: var(--t-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
}

.offduty__text {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}

.offduty__closing {
  margin-block-start: clamp(var(--s-6), 4vw, var(--s-8));
  max-width: 52ch;
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

/* ===========================================================================
   07 · KONTAKT
   ======================================================================== */
.contact__lead {
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
  max-width: 44ch;
  margin-block-end: clamp(var(--s-7), 4vw, var(--s-9));
}

/* Der wichtigste Kontaktweg ist die eigentliche Handlung dieser Sektion und
   deshalb typografisch das größte Element darin. */
.contact__primary {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--s-3), 1.5vw, var(--s-5));
  max-width: 100%;
  font-size: clamp(1.5rem, 0.7rem + 3.6vw, 3.75rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
  color: var(--c-text);
  /* Telefonnummern nie mitten in der Ziffernfolge umbrechen */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--e-out);
}

.contact__primary:hover,
.contact__primary:focus-visible { color: var(--c-accent-soft); }

.contact__primary-arrow {
  flex: none;
  width: 0.58em;
  height: 0.58em;
  color: var(--c-accent);
  transition: transform var(--d-base) var(--e-out);
}

.contact__primary:hover .contact__primary-arrow { transform: translate(0.14em, -0.14em); }

/* Zweiter Weg direkt unter der Nummer — greift den Satz darüber auf */
.contact__secondary { margin-block-start: var(--s-5); }

.contact__underline {
  height: 1px;
  margin-block: var(--s-6) clamp(var(--s-7), 5vw, var(--s-9));
  background: linear-gradient(to right, var(--c-accent), var(--c-line-strong) 45%, transparent);
}

.contact__channels {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
}

@media (min-width: 52rem) {
  .contact__channels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.contact__channels-title { margin-block-end: var(--s-4); }

/* Kanalzeilen: Zeile spannt die volle Breite, Pfeil rechts */
.channel-list { border-block-start: var(--b-hair); }

.channel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: var(--b-hair);
  color: var(--c-text-muted);
  transition: color var(--d-fast) var(--e-out), padding-inline-start var(--d-base) var(--e-out);
}

a.channel:hover,
a.channel:focus-visible {
  color: var(--c-text);
  padding-inline-start: var(--s-3);
}

.channel__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
  flex: none;
}

.channel__value {
  font-size: var(--t-sm);
  text-align: right;
  word-break: break-word;
}

a.channel:hover .channel__value,
a.channel:focus-visible .channel__value { color: var(--c-accent-soft); }