/* ==========================================================================
   NEEK — Design Tokens
   Einzige Quelle für Farbe, Typografie, Raster, Abstand und Bewegung.
   Spezifikation §5 (Farbe, Typografie, Layout), §21 (Bewegung).

   Das System ist bewusst neutral-monochrom. Kein Gold, kein Blau, kein
   Verlauf, kein Schatten. Die Wirkung entsteht aus Kontrast, Rhythmus,
   Haarlinien und Schriftgröße — nicht aus Farbe.
   ========================================================================== */

:root {
  /* --- Flächen (§5) ------------------------------------------------------ */
  --nk-black:      #000000;   /* Hero, dunkle Kapitel, Footer               */
  --nk-ink:        #0A0A0A;   /* Fließtext auf hell, zweite dunkle Ebene    */
  --nk-anthracite: #171717;   /* Bildgrund, dunkle Karten, Formularfelder   */
  --nk-graphite:   #3A3A3A;   /* Sekundärtext auf hell                      */
  --nk-mid:        #737373;   /* NUR dekorativ und für Großdisplay          */
  --nk-line:       #D6D6D6;   /* Haarlinien auf hell                        */
  --nk-soft:       #ECECE8;   /* eingesenkte helle Flächen                  */
  --nk-off-white:  #F5F5F1;   /* Standard-Seitengrund                       */
  --nk-white:      #FFFFFF;

  /* --- Text auf hell -----------------------------------------------------
     Geprüft gegen die dunkelste helle Fläche im Einsatz (--nk-soft #ECECE8),
     nicht nur gegen den Seitengrund. Deshalb steht Sekundärtext auf
     Graphite und nicht auf Mid Grey: #737373 erreicht auf Off-White nur
     4,26:1 und fällt damit unter 4,5:1. Mid Grey bleibt Dekoration.        */
  --nk-text:       var(--nk-ink);
  --nk-text-2:     var(--nk-graphite);
  --nk-text-meta:  var(--nk-graphite);

  /* --- Text auf dunkel --------------------------------------------------- */
  --nk-on-dark:     #F5F5F1;
  --nk-on-dark-2:   rgba(245, 245, 241, 0.72);
  --nk-on-dark-3:   rgba(245, 245, 241, 0.56);
  --nk-rule-dark:   rgba(245, 245, 241, 0.16);
  --nk-rule-light:  rgba(10, 10, 10, 0.14);

  /* --- Fokus ------------------------------------------------------------- */
  --nk-focus-light: var(--nk-ink);
  --nk-focus-dark:  var(--nk-on-dark);

  /* --- Status (§5: nur funktional, nie allein durch Farbe codiert) ------- */
  --nk-error:       #8E1F1F;   /* auf hell:  7,1:1                          */
  --nk-error-dark:  #FF9E9E;   /* auf dunkel                                */
  --nk-success:     #1F5C34;   /* auf hell:  7,0:1                          */
  --nk-success-dark:#8FD9A8;

  /* --- Schrift (§6) ------------------------------------------------------
     Eine Grotesk für alles, dazu eine Monospace als zweite Stimme für
     Kapitelnummern, Kategorien und Kleinlabels. Kein dritter Schnitt.     */
  --nk-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Helvetica, Arial, sans-serif;
  --nk-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
             Consolas, monospace;

  /* Fluide Skala. Bezug: 375 px bis 1440 px.                               */
  --nk-t-display:  clamp(2.75rem, 1.35rem + 5.95vw, 6.25rem);  /* Hero-H1   */
  --nk-t-h1:       clamp(2.25rem, 1.25rem + 4.25vw, 4.5rem);   /* Seiten-H1 */
  --nk-t-h2:       clamp(1.875rem, 1.15rem + 3.1vw, 3.5rem);   /* Kapitel   */
  --nk-t-h3:       clamp(1.375rem, 1.05rem + 1.35vw, 2rem);
  --nk-t-h4:       clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --nk-t-lead:     clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --nk-t-body:     clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem);
  --nk-t-small:    0.9375rem;
  --nk-t-label:    0.75rem;

  --nk-lh-display: 0.96;
  --nk-lh-head:    1.06;
  --nk-lh-lead:    1.5;
  --nk-lh-body:    1.65;

  --nk-ls-display: -0.035em;
  --nk-ls-head:    -0.025em;
  --nk-ls-label:   0.16em;

  --nk-measure:      68ch;   /* Fließtext, Desktop  ~60–75 Zeichen          */
  --nk-measure-lead: 46ch;   /* Vorspann, größer gesetzt                    */

  /* --- Raster (§5) ------------------------------------------------------- */
  --nk-max:     1520px;   /* äußere Begrenzung des Satzspiegels             */
  --nk-gutter:  clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
  --nk-margin:  clamp(1.25rem, 0.35rem + 3.9vw, 5.5rem);
  --nk-rail:    0px;      /* Index Rail: mobil eingeklappt, Desktop unten  */

  /* --- Vertikaler Rhythmus ----------------------------------------------- */
  --nk-sp-1:  0.5rem;
  --nk-sp-2:  0.75rem;
  --nk-sp-3:  1rem;
  --nk-sp-4:  1.5rem;
  --nk-sp-5:  2rem;
  --nk-sp-6:  3rem;
  --nk-sp-7:  4rem;
  --nk-sp-8:  6rem;
  --nk-section: clamp(4.5rem, 2rem + 8vw, 10rem);

  --nk-header-h: 76px;

  /* --- Bewegung (§21) ---------------------------------------------------- */
  --nk-dur-micro: 180ms;
  --nk-dur-mid:   280ms;
  --nk-dur-max:   400ms;
  --nk-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 640px) {
  :root { --nk-header-h: 64px; }
}

/* Die Index Rail — das NEEK-Signaturelement — steht erst ab Tablet quer
   neben dem Text. Darunter klappt sie über den Absatz. (§5)              */
@media (min-width: 900px)  { :root { --nk-rail: 88px;  } }
@media (min-width: 1280px) { :root { --nk-rail: 112px; } }

/* ==========================================================================
   NEEK — Grundlagen
   Reset, Grundtypografie, Fokus, Bewegungsvorbehalt.
   ========================================================================== */

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

html {
  /* Die Seite hat eine feste Anmutung: helle Flächen bleiben hell, dunkle
     dunkel. Ohne diese Angabe zeichnet der Browser im Dunkelmodus des
     Betriebssystems die Formularfelder dunkel — mitten im hellen Kapitel. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anker landen nicht unter dem festen Kopf. */
  scroll-padding-top: calc(var(--nk-header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--nk-off-white);
  color: var(--nk-text);
  font-family: var(--nk-font);
  font-size: var(--nk-t-body);
  line-height: var(--nk-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* Sicherung: keine horizontale Scrollbar (§20) */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--nk-ls-head);
  line-height: var(--nk-lh-head);
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

strong, b { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--nk-rule-light);
  margin: 0;
}

::selection { background: var(--nk-ink); color: var(--nk-off-white); }

/* Das hidden-Attribut wirkt im Browser nur auf HTML-Elemente, nicht auf
   eingebettetes SVG. Für die umschaltbaren Symbole der Diashow braucht es
   deshalb eine eigene Regel. */
[hidden] { display: none !important; }

/* --- Fokus (§20) ---------------------------------------------------------
   Sichtbar auf jedem Grund, nie entfernt. Auf dunklen Flächen kehrt sich
   die Farbe über .on-dark um.                                             */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--nk-focus-light);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.site-footer :focus-visible,
.site-header[data-tone="over-media"] :focus-visible {
  outline-color: var(--nk-focus-dark);
}

/* --- Skip-Link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  padding: 0.85rem 1.25rem;
  background: var(--nk-ink);
  color: var(--nk-off-white);
  font-size: var(--nk-t-small);
  font-weight: 500;
  transition: top var(--nk-dur-micro) var(--nk-ease);
}
/* Der Skip-Link ist ausschließlich über die Tastatur erreichbar; er wird
   deshalb bei jedem Fokus sichtbar, nicht nur bei :focus-visible. */
.skip-link:focus { top: 0.75rem; outline: 2px solid var(--nk-off-white); outline-offset: 2px; }

/* --- Nur für Screenreader ------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Bewegungsvorbehalt (§21) -------------------------------------------
   Wer im System „Bewegung reduzieren" gewählt hat, bekommt jeden Inhalt
   sofort und vollständig — nichts wartet auf eine Animation.              */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   NEEK — Raster und Seitenaufbau
   12 Spalten, großzügige Ränder, alternierende Flächen (§5).
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--nk-max);
  margin-inline: auto;
  padding-inline: var(--nk-margin);
}

/* Zwölf Spalten. Kinder setzen sich über --span / --start.                 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--nk-gutter);
}
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-12 { grid-column: 1 / -1;  }
@media (max-width: 900px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: 1 / -1; }
}

/* --- Kapitelflächen ------------------------------------------------------ */
.section {
  position: relative;
  padding-block: var(--nk-section);
}
.section--tight { padding-block: clamp(3rem, 1.5rem + 5vw, 6rem); }
.section--flush-top { padding-top: 0; }
.section--light  { background: var(--nk-off-white); color: var(--nk-text); }
.section--white  { background: var(--nk-white);     color: var(--nk-text); }
.section--soft   { background: var(--nk-soft);      color: var(--nk-text); }
.section--dark   { background: var(--nk-black);     color: var(--nk-on-dark); }
.section--ink    { background: var(--nk-ink);       color: var(--nk-on-dark); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--ink  h1, .section--ink  h2, .section--ink  h3 { color: var(--nk-on-dark); }

/* Haarlinie als Kapitelgrenze auf hellen Flächen. */
.section--rule-top { border-top: 1px solid var(--nk-rule-light); }
.section--dark.section--rule-top,
.section--ink.section--rule-top { border-top-color: var(--nk-rule-dark); }

/* Vollbreite Bildzäsur zwischen zwei Kapiteln (§5). */
.full-bleed {
  width: 100%;
  margin-inline: 0;
}

main { display: block; }

/* --- Abstandshilfen -------------------------------------------------------
   Bewusst wenige: vertikaler Rhythmus kommt aus den Komponenten, diese
   Klassen setzen nur einzelne Absätze weiter.                            */
.mt-3 { margin-top: var(--nk-sp-3); }
.mt-4 { margin-top: var(--nk-sp-4); }
.mt-5 { margin-top: var(--nk-sp-5); }
.mt-6 { margin-top: var(--nk-sp-6); }
.mt-7 { margin-top: var(--nk-sp-7); }
.measure-wide { max-width: 62ch; }
.fill-black { width: 100%; height: 100%; background: var(--nk-black); }

/* ==========================================================================
   NEEK — Komponenten
   Typografie-Rollen, Index Rail, Navigation, Medien, Buttons, Footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Typografische Rollen (§6)
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--nk-t-display);
  line-height: var(--nk-lh-display);
  letter-spacing: var(--nk-ls-display);
  font-weight: 500;
}
.h1 { font-size: var(--nk-t-h1); line-height: 1.02; letter-spacing: var(--nk-ls-display); }
.h2 { font-size: var(--nk-t-h2); }
.h3 { font-size: var(--nk-t-h3); }
.h4 { font-size: var(--nk-t-h4); font-weight: 600; letter-spacing: -0.015em; }

.lead {
  font-size: var(--nk-t-lead);
  line-height: var(--nk-lh-lead);
  max-width: var(--nk-measure-lead);
  color: var(--nk-text-2);
}
.section--dark .lead, .section--ink .lead, .on-dark .lead { color: var(--nk-on-dark-2); }

.body-text { max-width: var(--nk-measure); color: var(--nk-text-2); }
/* Aufeinanderfolgende Absätze brauchen Abstand — sonst laufen Biografien und
   mehrteilige Einleitungen zu einem Block zusammen. */
.body-text + .body-text,
.lead + .lead,
.body-text + .lead,
.lead + .body-text { margin-top: var(--nk-sp-4); }
.section--dark .body-text, .section--ink .body-text, .on-dark .body-text { color: var(--nk-on-dark-2); }

/* Monospace-Label: Kategorien, Kapitelbezeichnungen, Kleinüberschriften. */
.label {
  font-family: var(--nk-mono);
  font-size: var(--nk-t-label);
  font-weight: 500;
  letter-spacing: var(--nk-ls-label);
  text-transform: uppercase;
  color: var(--nk-text-meta);
}
.section--dark .label, .section--ink .label, .on-dark .label { color: var(--nk-on-dark-2); }

.meta {
  font-family: var(--nk-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--nk-text-meta);
}
.section--dark .meta, .section--ink .meta, .on-dark .meta { color: var(--nk-on-dark-2); }

/* Fließtextblock mit Abständen — für Artikel und längere Passagen. */
.prose { max-width: var(--nk-measure); }
.prose > * + * { margin-top: var(--nk-sp-4); }
.prose p { color: var(--nk-text-2); }
.prose h2 {
  font-size: var(--nk-t-h3);
  margin-top: var(--nk-sp-7);
  color: var(--nk-text);
}
.prose h3 {
  font-size: var(--nk-t-h4);
  margin-top: var(--nk-sp-6);
  color: var(--nk-text);
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  color: var(--nk-text);
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul { margin-top: var(--nk-sp-4); }
.prose li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--nk-text-2);
}
.prose li + li { margin-top: var(--nk-sp-2); }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.75rem;
  height: 1px;
  background: var(--nk-mid);
}

/* --------------------------------------------------------------------------
   2 — Index Rail: das NEEK-Signaturelement (§5)
   Dünne Haarlinie, Kapitelnummer, Monospace-Label, große Aussage.
   Ab 900 px steht die Linie links neben dem Inhalt und läuft über die
   volle Kapitelhöhe; darunter klappt sie als Zeile darüber.
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nk-sp-4);
}
@media (min-width: 900px) {
  .rail {
    grid-template-columns: var(--nk-rail) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
}

.rail__index {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .rail__index {
    display: block;
    border-left: 1px solid var(--nk-rule-light);
    padding-left: 1.25rem;
    padding-top: 0.45rem;
  }
  .section--dark .rail__index,
  .section--ink .rail__index,
  .on-dark .rail__index { border-left-color: var(--nk-rule-dark); }
}

.rail__num {
  font-family: var(--nk-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nk-text-meta);
  font-variant-numeric: tabular-nums;
}
.section--dark .rail__num,
.section--ink .rail__num,
.on-dark .rail__num { color: var(--nk-on-dark-2); }

/* Auf Mobil ersetzt ein kurzer Strich die vertikale Linie. */
.rail__tick {
  flex: 0 0 2.5rem;
  height: 1px;
  background: var(--nk-mid);
}
@media (min-width: 900px) { .rail__tick { display: none; } }

.rail__body { min-width: 0; }
@media (min-width: 900px) { .rail__body { padding-left: clamp(1.5rem, 3vw, 3.5rem); } }

.rail__label { margin-bottom: var(--nk-sp-4); }
.rail__title { max-width: 18ch; }
/* Kontrollierte Umbrüche: jede Zeile der Aussage steht für sich (§6). */
.rail__title span, .statement span, .hero__title span { display: block; }

/* Zweispaltiger Kapitelkopf ab großem Bildschirm. */
.rail__body--split { display: grid; gap: var(--nk-sp-5); }
@media (min-width: 1100px) {
  .rail__body--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }
  .rail__body--split .rail__rest { grid-column: 1 / -1; margin-top: var(--nk-sp-5); }
}
.rail__body--split .rail__title { max-width: 20ch; }
.rail__aside > * + * { margin-top: var(--nk-sp-4); }
.rail__title--wide { max-width: 26ch; }
.rail__lead { margin-top: var(--nk-sp-5); }

/* --------------------------------------------------------------------------
   3 — Buttons und Textlinks (§5: rechteckig, keine Schatten)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: var(--nk-t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--nk-dur-micro) var(--nk-ease),
              color var(--nk-dur-micro) var(--nk-ease);
}
.btn__arrow { transition: transform var(--nk-dur-micro) var(--nk-ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--solid       { background: var(--nk-ink);      color: var(--nk-off-white); border-color: var(--nk-ink); }
.btn--solid:hover { background: var(--nk-graphite); border-color: var(--nk-graphite); }

.btn--outline       { color: var(--nk-ink); }
.btn--outline:hover { background: var(--nk-ink); color: var(--nk-off-white); }

.btn--solid-light       { background: var(--nk-off-white); color: var(--nk-ink); border-color: var(--nk-off-white); }
.btn--solid-light:hover { background: var(--nk-white); border-color: var(--nk-white); }

.btn--outline-light       { color: var(--nk-on-dark); border-color: var(--nk-rule-dark); }
.btn--outline-light:hover { background: var(--nk-off-white); color: var(--nk-ink); border-color: var(--nk-off-white); }

/* Textlink mit Pfeil und Unterstrich — die häufigste CTA-Form. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-size: var(--nk-t-small);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  transition: gap var(--nk-dur-micro) var(--nk-ease);
}
.arrow-link:hover { gap: 1rem; }

/* Schlichter Textlink im Fließtext. */
.text-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   4 — Medien (§6, §20)
   Feste Seitenverhältnisse, anthrazitfarbener Grund, Focal Point.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--nk-anthracite);
  aspect-ratio: var(--media-ratio, 3 / 2);
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-focal, 50% 50%);
}
.media--portrait { --media-ratio: 3 / 4; }
.media--square   { --media-ratio: 1 / 1; }
.media--wide     { --media-ratio: 16 / 9; }
.media--pano     { --media-ratio: 21 / 9; }

.media__caption {
  margin-top: var(--nk-sp-3);
  font-family: var(--nk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--nk-text-meta);
}

/* Portraits: entsättigt (§14). */
.media--portrait img { filter: grayscale(1) contrast(1.04); }

/* Platzhaltermarkierung, solange kein finales Motiv vorliegt. */
.media__flag {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.72);
  color: var(--nk-on-dark);
  font-family: var(--nk-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5 — Kopfbereich
   Über dem Hero transparent, beim Scrollen ruhiger Wechsel auf Schwarz (§7).
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nk-header-h);
  color: var(--nk-on-dark);
  background: var(--nk-black);
  border-bottom: 1px solid var(--nk-rule-dark);
  transition: background-color var(--nk-dur-mid) var(--nk-ease),
              border-color var(--nk-dur-mid) var(--nk-ease);
}
.site-header[data-tone="over-media"] {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-sp-4);
}

/* Logo-Platzhalter: ein einziger Pfad, später austauschbar (§1). */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
}
/* Anzeigehöhen des Logos. Das Lockup steht zweizeilig — Wortmarke über der
   Unterzeile, Verhältnis 3,4:1 — und braucht deshalb mehr Höhe als eine reine
   Wortmarke; unter etwa 34 px wird die Unterzeile zum bloßen Strich. */
.brand__logo { height: 40px; width: auto; }
@media (max-width: 1100px) { .brand__logo { height: 34px; } }
@media (max-width: 640px)  { .brand__logo { height: 28px; } }
.brand--footer .brand__logo { height: 56px; }
@media (max-width: 640px)  { .brand--footer .brand__logo { height: 44px; } }
.brand__fallback {
  font-family: var(--nk-mono);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.28em;
}

.nav { display: none; }
@media (min-width: 1100px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.6vw, 2rem);
  }
}
.nav__list { display: contents; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--nk-on-dark-2);
  transition: color var(--nk-dur-micro) var(--nk-ease);
}
.nav__link:hover { color: var(--nk-on-dark); }
.nav__link[aria-current="page"],
.nav__link[data-active="true"] {
  color: var(--nk-on-dark);
  box-shadow: inset 0 -1px 0 0 currentColor;
}

/* Untermenü: öffnet über Klick oder Tastatur, zusätzlich über Hover.
   Nichts hängt allein am Zeiger (§7). */
.nav__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--nk-on-dark-2);
  cursor: pointer;
}
.nav__disclosure svg { transition: transform var(--nk-dur-micro) var(--nk-ease); }
.nav__disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: -1rem;
  min-width: 300px;
  padding: 0.6rem 0;
  background: var(--nk-ink);
  border: 1px solid var(--nk-rule-dark);
  display: none;
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel a {
  display: block;
  padding: 0.7rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--nk-on-dark-2);
  transition: background-color var(--nk-dur-micro) var(--nk-ease),
              color var(--nk-dur-micro) var(--nk-ease);
}
.nav__panel a:hover { background: var(--nk-anthracite); color: var(--nk-on-dark); }

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
}

.lang-switch {
  display: flex;
  align-items: center;
  font-family: var(--nk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.lang-switch a, .lang-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--nk-on-dark-3);
}
.lang-switch a:hover { color: var(--nk-on-dark); }
.lang-switch [aria-current="true"] { color: var(--nk-on-dark); }
.lang-switch__sep { color: var(--nk-on-dark-3); min-width: 0 !important; }

.header__cta { display: none; }
@media (min-width: 1100px) { .header__cta { display: inline-flex; } }

/* Menü-Schalter für schmale Bildschirme — mit Text, nicht nur Symbol (§7). */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--nk-rule-dark);
  background: transparent;
  color: var(--nk-on-dark);
  font-size: 0.8125rem;
  font-family: var(--nk-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 1100px) { .menu-toggle { display: none; } }

/* --------------------------------------------------------------------------
   6 — Mobilmenü
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--nk-black);
  color: var(--nk-on-dark);
  padding-top: var(--nk-header-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu__inner { padding-block: var(--nk-sp-6) var(--nk-sp-8); }
.mobile-menu__group + .mobile-menu__group {
  margin-top: var(--nk-sp-5);
  padding-top: var(--nk-sp-5);
  border-top: 1px solid var(--nk-rule-dark);
}
.mobile-menu__link {
  display: block;
  padding: 0.7rem 0;
  min-height: 48px;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--nk-on-dark);
}
.mobile-menu__sub {
  display: block;
  padding: 0.55rem 0;
  min-height: 44px;
  font-size: 1rem;
  color: var(--nk-on-dark-2);
}
.mobile-menu__label { margin-bottom: var(--nk-sp-2); }
.mobile-menu__foot {
  margin-top: var(--nk-sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nk-sp-4);
}

body[data-menu-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   7 — Fuß
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--nk-black);
  color: var(--nk-on-dark);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) var(--nk-sp-6);
}
.site-footer a { color: var(--nk-on-dark-2); }
.site-footer a:hover { color: var(--nk-on-dark); }

.footer__top {
  display: grid;
  gap: var(--nk-sp-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: var(--nk-sp-5); }
}
.footer__claim {
  margin-top: var(--nk-sp-4);
  font-size: var(--nk-t-h4);
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.footer__col-title { margin-bottom: var(--nk-sp-4); }
.footer__list a {
  display: block;
  padding: 0.4rem 0;
  min-height: 44px;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
}
.footer__bottom {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: var(--nk-sp-4);
  border-top: 1px solid var(--nk-rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-sp-3) var(--nk-sp-5);
  align-items: center;
  justify-content: space-between;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-sp-3) var(--nk-sp-5);
  align-items: center;
}
.footer__legal a { font-size: 0.8125rem; min-height: 44px; display: inline-flex; align-items: center; }
.footer__note { font-size: 0.75rem; color: var(--nk-on-dark-3); max-width: 62ch; }
.footer__note + .footer__note { margin-top: 0.75rem; }
.footer__note--first { margin-top: var(--nk-sp-4); }

/* Navigation ohne JavaScript: ersetzt Menüschalter und Untermenüs. */
.nav-noscript {
  padding-top: calc(var(--nk-header-h) + 1rem);
  padding-bottom: 1rem;
  background: var(--nk-black);
  color: var(--nk-on-dark);
}
.nav-noscript ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.nav-noscript a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; color: var(--nk-on-dark-2);
}
@media (min-width: 1100px) { .nav-noscript { display: none; } }

/* --------------------------------------------------------------------------
   8 — Einblenden beim Scrollen (§21)
   Nur transform und opacity. Ohne JavaScript bleibt alles sichtbar.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--nk-dur-max) var(--nk-ease),
              transform var(--nk-dur-max) var(--nk-ease);
}
.js [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}
/* Die Rail-Linie zeichnet sich ein statt zu springen. */
@media (min-width: 900px) {
  .js .rail__index { transform-origin: top; }
  .js [data-reveal] .rail__index { clip-path: inset(0 0 100% 0); transition: clip-path var(--nk-dur-max) var(--nk-ease); }
  .js [data-reveal][data-revealed="true"] .rail__index { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   NEEK — Kapitel und Seitenbausteine
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Hero (§8.1)
   Fast bildschirmfüllend, dunkles Bewegtbild, keine Karten, keine Kennzahlen.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  background: var(--nk-black);
  color: var(--nk-on-dark);
  padding-top: calc(var(--nk-header-h) + 3rem);
  padding-bottom: clamp(5.5rem, 4rem + 5vw, 8rem);
  overflow: hidden;
}
@supports not (min-height: 92svh) { .hero { min-height: 92vh; } }

.hero__media { position: absolute; inset: 0; }

/* --- Diashow ------------------------------------------------------------
   Die Motive liegen übereinander und werden überblendet. Nur das aktive
   Bild ist sichtbar; alle anderen bleiben transparent und damit auch für
   die Bildschirmausgabe wirkungslos.

   Alle Aufnahmen sind entsättigt. Zwölf Fotografien aus zwölf Städten,
   von zwölf verschiedenen Urhebern, ergeben in Farbe keine gemeinsame
   Bildsprache — in Schwarzweiß schon. Wer sie farbig möchte, entfernt
   die filter-Zeile.                                                       */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--nk-ease);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.06) brightness(0.96);
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Kontrolliertes Overlay: der Text muss auf jedem der zwölf Motive lesbar
   bleiben — deshalb nach unten und nach links deutlich dichter (§8.1). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.58) 46%, rgba(0,0,0,0.34) 100%),
    linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.1) 100%);
}

.hero__inner { position: relative; z-index: 3; width: 100%; }
.hero__title { max-width: 15ch; }
.hero__lead {
  margin-top: var(--nk-sp-5);
  max-width: 54ch;
  color: var(--nk-on-dark-2);
  font-size: var(--nk-t-lead);
  line-height: var(--nk-lh-lead);
}
.hero__actions {
  margin-top: var(--nk-sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-sp-3);
}

/* --- Bedienung der Diashow ---------------------------------------------- */
.hero__controls {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-sp-4);
  flex-wrap: wrap;
}
.hero__city {
  font-family: var(--nk-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nk-on-dark-2);
  margin: 0;
}
.hero__buttons { display: flex; align-items: center; gap: 0.25rem; }
.hero__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nk-on-dark-2);
  cursor: pointer;
  transition: color var(--nk-dur-micro) var(--nk-ease),
              border-color var(--nk-dur-micro) var(--nk-ease);
}
.hero__ctrl:hover { color: var(--nk-on-dark); border-color: var(--nk-rule-dark); }
.hero__counter {
  font-family: var(--nk-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--nk-on-dark-2);
  min-width: 4.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Auf schmalen Bildschirmen steht die Bedienleiste nicht mehr über dem
   Bild, sondern unter den Schaltflächen — sonst überlagert sie sie. */
@media (max-width: 560px) {
  .hero {
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(2rem, 1rem + 4vw, 3rem);
  }
  .hero__inner, .hero__controls { width: 100%; }
  .hero__controls {
    position: static;
    margin-top: var(--nk-sp-6);
    justify-content: space-between;
    gap: var(--nk-sp-3);
  }
  .hero__city { flex: 1 1 100%; }
}

/* Ohne JavaScript hat die Bedienung keine Wirkung — dann wird sie auch
   nicht angeboten. */
html:not(.js) .hero__controls { display: none; }

/* Kopfbereich einfacher Seiten: Bild optional, immer eine H1. */
.page-head {
  background: var(--nk-black);
  color: var(--nk-on-dark);
  padding-top: calc(var(--nk-header-h) + clamp(3.5rem, 2rem + 6vw, 8rem));
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
  position: relative;
  overflow: hidden;
}
.page-head--full { min-height: 100svh; display: flex; align-items: center; }
@supports not (min-height: 100svh) { .page-head--full { min-height: 100vh; } }
.page-head--media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 10%, rgba(0,0,0,0.62) 60%, rgba(0,0,0,0.5) 100%);
}
.page-head__media { position: absolute; inset: 0; }
.page-head__media picture { display: block; width: 100%; height: 100%; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--media-focal, 50% 50%); }
.page-head__inner { position: relative; z-index: 2; }
.page-head__title { max-width: 20ch; }
.page-head__lead { margin-top: var(--nk-sp-5); max-width: 56ch; color: var(--nk-on-dark-2); font-size: var(--nk-t-lead); line-height: var(--nk-lh-lead); }

/* Brotkrume — klein, mono, nur eine Ebene tief. */
.crumb { margin-bottom: var(--nk-sp-4); }
.crumb a { border-bottom: 1px solid var(--nk-rule-dark); padding-bottom: 2px; }

/* --------------------------------------------------------------------------
   2 — Nummerierte Kernkompetenzen (§8.3)
   Große Editorial-Zeilen mit Haarlinien. Keine Kacheln, keine Icons.
   -------------------------------------------------------------------------- */
.numbered { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); border-top: 1px solid var(--nk-rule-light); }
.section--dark .numbered, .section--ink .numbered, .on-dark .numbered { border-top-color: var(--nk-rule-dark); }

.numbered__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nk-sp-3);
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-bottom: 1px solid var(--nk-rule-light);
}
.section--dark .numbered__row, .section--ink .numbered__row, .on-dark .numbered__row { border-bottom-color: var(--nk-rule-dark); }
@media (min-width: 900px) {
  .numbered__row {
    grid-template-columns: var(--nk-rail) minmax(0, 1.05fr) minmax(0, 1.35fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
  }
}
.numbered__num {
  font-family: var(--nk-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nk-text-meta);
  font-variant-numeric: tabular-nums;
}
.section--dark .numbered__num, .section--ink .numbered__num, .on-dark .numbered__num { color: var(--nk-on-dark-2); }
.numbered__title { font-size: var(--nk-t-h3); letter-spacing: -0.025em; }
.numbered__text { color: var(--nk-text-2); max-width: 62ch; }
.section--dark .numbered__text, .section--ink .numbered__text, .on-dark .numbered__text { color: var(--nk-on-dark-2); }
.numbered__more { margin-top: var(--nk-sp-4); }

/* Ganze Zeile klickbar, ohne verschachtelte Links: Overlay auf dem Titellink. */
.numbered__row--link { position: relative; transition: background-color var(--nk-dur-micro) var(--nk-ease); }
.numbered__row--link:hover { background: rgba(10, 10, 10, 0.03); }
.section--dark .numbered__row--link:hover,
.section--ink .numbered__row--link:hover { background: rgba(245, 245, 241, 0.04); }
.numbered__link::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   3 — Prinzipien, Merkmale, Aufzählungen
   -------------------------------------------------------------------------- */
.principles {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  display: grid;
  gap: var(--nk-sp-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); } }
.principle { padding-top: var(--nk-sp-4); border-top: 1px solid var(--nk-rule-light); }
.section--dark .principle, .section--ink .principle, .on-dark .principle { border-top-color: var(--nk-rule-dark); }
.principle__title { font-size: var(--nk-t-h4); margin-block: var(--nk-sp-3) var(--nk-sp-3); }
.principle__text { color: var(--nk-text-2); font-size: var(--nk-t-small); line-height: 1.6; }
.section--dark .principle__text, .section--ink .principle__text, .on-dark .principle__text { color: var(--nk-on-dark-2); }

/* Zweispaltige Leistungsliste mit Haarlinien statt Häkchen. */
.spec-list {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--nk-rule-light);
}
@media (min-width: 760px) { .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3.5rem); } }
.section--dark .spec-list, .section--ink .spec-list, .on-dark .spec-list { border-top-color: var(--nk-rule-dark); }
.spec-list li {
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--nk-rule-light);
  font-size: var(--nk-t-small);
  color: var(--nk-text-2);
  display: flex;
  gap: 0.85rem;
}
.section--dark .spec-list li, .section--ink .spec-list li, .on-dark .spec-list li {
  border-bottom-color: var(--nk-rule-dark);
  color: var(--nk-on-dark-2);
}
.spec-list li::before {
  content: attr(data-index);
  font-family: var(--nk-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--nk-mid);
  padding-top: 0.28rem;
  flex: 0 0 1.75rem;
  font-variant-numeric: tabular-nums;
}

/* Schlagwortreihe (Assetklassen, Kompetenzfelder). */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--nk-sp-5); }
.tag {
  border: 1px solid var(--nk-rule-light);
  padding: 0.5rem 0.85rem;
  font-family: var(--nk-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--nk-text-2);
}
.section--dark .tag, .section--ink .tag, .on-dark .tag { border-color: var(--nk-rule-dark); color: var(--nk-on-dark-2); }

/* --------------------------------------------------------------------------
   4 — Text-Bild-Kapitel, asymmetrisch (§5)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-text { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--wide-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .split--media-first .split__media { order: -1; }
}

/* Großes Statement, freistehend. */
.statement {
  font-size: var(--nk-t-h2);
  line-height: 1.08;
  letter-spacing: var(--nk-ls-head);
  font-weight: 500;
  max-width: 22ch;
}
.statement span { display: block; }

/* --------------------------------------------------------------------------
   5 — Transaktionsprozess (§8.8)
   -------------------------------------------------------------------------- */
.process { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px)  { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 4rem); } }
@media (min-width: 1200px) { .process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.process__step { padding-block: var(--nk-sp-5); border-top: 1px solid var(--nk-rule-dark); }
.process__num { font-family: var(--nk-mono); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--nk-on-dark-2); font-variant-numeric: tabular-nums; }
.process__title { font-size: var(--nk-t-h4); margin-block: var(--nk-sp-3) var(--nk-sp-2); }
.process__text { color: var(--nk-on-dark-2); font-size: var(--nk-t-small); line-height: 1.6; }

/* --------------------------------------------------------------------------
   6 — Sektoren und Insights: redaktionelle Blöcke, keine Portalkacheln
   -------------------------------------------------------------------------- */
.editorial { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); grid-template-columns: minmax(0, 1fr); margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
@media (min-width: 900px) { .editorial--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 3rem); } }
@media (min-width: 760px) { .editorial--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); } }

.entry { display: block; position: relative; }
.entry .media { margin-bottom: var(--nk-sp-4); }
.entry .media img { transition: transform var(--nk-dur-max) var(--nk-ease); }
.entry:hover .media img { transform: scale(1.02); }
.entry__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--nk-sp-3); }
.entry__title { font-size: var(--nk-t-h4); letter-spacing: -0.02em; }
.entry__text { margin-top: var(--nk-sp-3); color: var(--nk-text-2); font-size: var(--nk-t-small); line-height: 1.6; max-width: 46ch; }
.section--dark .entry__text, .section--ink .entry__text, .on-dark .entry__text { color: var(--nk-on-dark-2); }
.entry__more { margin-top: var(--nk-sp-4); }

/* Liste aller Insights: Zeilen mit Haarlinien, Bild klein rechts. */
.entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nk-sp-4);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--nk-rule-light);
  position: relative;
}
@media (min-width: 760px) {
  .entry-row { grid-template-columns: 8rem minmax(0, 1fr) 14rem; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
}
.entry-row:hover { background: rgba(10, 10, 10, 0.03); }
.entry-row__link::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   7 — Menschen (§14)
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
@media (min-width: 760px)  { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person__name { font-size: var(--nk-t-h3); margin-top: var(--nk-sp-4); letter-spacing: -0.025em; }
.person__role { margin-top: var(--nk-sp-2); }
.person__expertise { margin-top: var(--nk-sp-3); color: var(--nk-text-2); font-size: var(--nk-t-small); }
.person__contact { margin-top: var(--nk-sp-4); display: flex; flex-direction: column; gap: 0.25rem; }
.person__contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--nk-t-small); border-bottom: 1px solid transparent; }
.person__contact a:hover { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   8 — Artikel (§12)
   -------------------------------------------------------------------------- */
.article__head { max-width: 24ch; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: var(--nk-sp-4); }
.article__lead { margin-top: var(--nk-sp-5); font-size: var(--nk-t-lead); line-height: var(--nk-lh-lead); color: var(--nk-on-dark-2); max-width: 56ch; }
.article__body { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.article__sidebar { display: none; }
@media (min-width: 900px) { .article__sidebar { display: block; } }
.article__aside { position: sticky; top: calc(var(--nk-header-h) + 2rem); }
.article__aside .label { display: block; margin-bottom: var(--nk-sp-3); }
.article__toc a { display: block; padding: 0.4rem 0; font-size: var(--nk-t-small); color: var(--nk-text-2); border-left: 1px solid var(--nk-rule-light); padding-left: 0.85rem; }
.article__toc a:hover { color: var(--nk-text); border-left-color: var(--nk-ink); }
.article__note {
  margin-top: var(--nk-sp-7);
  padding: var(--nk-sp-4);
  background: var(--nk-soft);
  font-size: var(--nk-t-small);
  color: var(--nk-text-2);
  max-width: var(--nk-measure);
}

/* --------------------------------------------------------------------------
   9 — Abschluss-CTA und Kontakt (§8.11, §15)
   -------------------------------------------------------------------------- */
.cta-band__title { max-width: 16ch; }
.cta-band__text { margin-top: var(--nk-sp-5); max-width: 56ch; color: var(--nk-on-dark-2); font-size: var(--nk-t-lead); line-height: var(--nk-lh-lead); }
.cta-band__actions { margin-top: var(--nk-sp-6); display: flex; flex-wrap: wrap; gap: var(--nk-sp-3); }

.contact-details { display: grid; gap: var(--nk-sp-5); }
.contact-details__item { border-top: 1px solid var(--nk-rule-light); padding-top: var(--nk-sp-3); }
.section--dark .contact-details__item, .on-dark .contact-details__item { border-top-color: var(--nk-rule-dark); }
.contact-details__value { margin-top: var(--nk-sp-2); font-size: var(--nk-t-h4); letter-spacing: -0.015em; }
.contact-details__value a { border-bottom: 1px solid var(--nk-rule-light); padding-bottom: 2px; }
.contact-details__value a:hover { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   10 — Formular (§15, §20)
   Sichtbare Labels, Fehler am Feld, Status über aria-live.
   -------------------------------------------------------------------------- */
.form { margin-top: var(--nk-sp-5); }
.form__grid { display: grid; gap: var(--nk-sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-family: var(--nk-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nk-text-2); }
.field__req { color: var(--nk-text-2); }
.field__control {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--nk-white);
  /* Bedienelemente brauchen 3:1 gegen ihren Grund (WCAG 1.4.11). Line Grey
     erreicht nur 1,45:1 und bleibt deshalb den dekorativen Trennlinien
     vorbehalten. */
  border: 1px solid var(--nk-mid);
  border-radius: 0;
  font-size: var(--nk-t-small);
  color: var(--nk-text);
  transition: border-color var(--nk-dur-micro) var(--nk-ease);
}
.field__control:hover { border-color: var(--nk-graphite); }
.field__control:focus-visible { border-color: var(--nk-ink); outline: 2px solid var(--nk-ink); outline-offset: 1px; }
textarea.field__control { min-height: 160px; resize: vertical; line-height: 1.55; }
select.field__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nk-graphite) 50%), linear-gradient(135deg, var(--nk-graphite) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field__control[aria-invalid="true"] { border-color: var(--nk-error); border-width: 2px; }
.field__error { font-size: 0.8125rem; color: var(--nk-error); display: none; }
.field__error::before { content: "! "; font-weight: 700; }
.field__control[aria-invalid="true"] ~ .field__error { display: block; }

/* Honeypot — für Menschen unsichtbar, für Screenreader ausgeblendet. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { margin-top: var(--nk-sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nk-sp-4); }
.form__hint { font-size: 0.8125rem; color: var(--nk-text-2); max-width: 46ch; }
.btn[data-busy="true"] { opacity: 0.7; pointer-events: none; }

.form__status { margin-top: var(--nk-sp-4); font-size: var(--nk-t-small); padding: var(--nk-sp-3) var(--nk-sp-4); display: none; }
.form__status[data-state="ok"]    { display: block; background: var(--nk-soft); color: var(--nk-success); border-left: 3px solid var(--nk-success); }
.form__status[data-state="error"] { display: block; background: var(--nk-soft); color: var(--nk-error);   border-left: 3px solid var(--nk-error); }

/* --------------------------------------------------------------------------
   11 — Hinweisblock für offene Rechtsangaben (§18)
   -------------------------------------------------------------------------- */
.notice {
  border: 1px solid var(--nk-line);
  border-left: 3px solid var(--nk-ink);
  padding: var(--nk-sp-4);
  background: var(--nk-white);
  max-width: var(--nk-measure);
}
.notice__title { font-family: var(--nk-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--nk-sp-3); }
.notice ul { margin-top: var(--nk-sp-3); }
.notice li { padding-left: 1.25rem; position: relative; font-size: var(--nk-t-small); color: var(--nk-text-2); }
.notice li + li { margin-top: 0.35rem; }
.notice li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.6rem; height: 1px; background: var(--nk-mid); }

.pending {
  font-family: var(--nk-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  background: var(--nk-soft);
  border-bottom: 1px solid var(--nk-graphite);
  color: var(--nk-text);
}

/* --------------------------------------------------------------------------
   12 — Bildnachweise
   -------------------------------------------------------------------------- */
.credits { border-top: 1px solid var(--nk-rule-light); max-width: 88ch; }
.credit {
  padding-block: var(--nk-sp-3);
  border-bottom: 1px solid var(--nk-rule-light);
  display: grid;
  gap: 0.2rem;
}
@media (min-width: 800px) {
  .credit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--nk-sp-4); align-items: baseline; }
}
.credit__slot { font-size: var(--nk-t-small); }
.credit__meta { font-family: var(--nk-mono); font-size: 0.75rem; line-height: 1.6; color: var(--nk-text-2); }