/* ============================================================
   MICHAEL HARTMANN — Systems for Eternity
   Website stylesheet · Visual System v3 (2026-07-31)
   Fonts: Cormorant Garamond (display/statements) + Montserrat (text)
   Self-hosted — see assets/fonts.css

   Retained from v2: colour system, typography pairing, layout widths,
   "line instead of box", accessibility foundations.
   New in v3: page archetypes, framework visual language, editorial
   (essay) mode, offer-page components, subnav, persistent CTA.
   ============================================================ */

:root {
  /* --- Colour tokens --- */
  --black:            #000000;
  --white:            #ffffff;
  --reading:          #cfcfcf;   /* body text (Reading Grey) */
  --reading-strong:   #e6e6e6;   /* long-form reading (essays) */
  --label:            #8a8a8a;   /* labels, meta (Label Grey) */
  --whisper:          #7a7a7a;   /* least prominent (Whisper Grey) — raised from
                                    #5f5f5f to clear WCAG AA 4.5:1 on black at
                                    the small sizes used for legal links and the
                                    language switch (Audit §13.1) */
  --surface:          #0c0c0c;
  --line:             rgba(255, 255, 255, 0.16);
  --line-strong:      rgba(255, 255, 255, 0.30);
  --line-active:      rgba(255, 255, 255, 0.58);
  --focus:            #ffffff;

  /* --- Typography --- */
  --serif:            "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:             "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* --- Layout widths --- */
  --content:          640px;    /* Focus / reading measure */
  --document:         960px;    /* Reading Mode  */
  --system:           1280px;   /* System Mode   */

  /* --- Rhythm --- */
  --gutter:           clamp(1.25rem, 4vw, 3.5rem);
  --section-space:    clamp(5rem, 10vw, 8rem);
  --header-height:    76px;
}

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

html {
  scroll-behavior: smooth;
  background: var(--black);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

::selection { background: var(--white); color: var(--black); }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  transform: translateY(-180%);
  padding: .7rem 1rem;
  border: 1px solid var(--white);
  background: var(--black);
  color: var(--white);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.skip-link:focus { transform: translateY(0); }

/* ---------- Shell / layout ---------- */
.shell {
  width: min(calc(100% - 2 * var(--gutter)), var(--system));
  margin-inline: auto;
}

.shell--document {
  width: min(calc(100% - 2 * var(--gutter)), var(--document));
  margin-inline: auto;
}

.shell--focus {
  width: min(calc(100% - 2 * var(--gutter)), var(--content));
  margin-inline: auto;
}

.text-column { max-width: var(--content); }

.section {
  padding-block: var(--section-space);
  border-bottom: .5px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.section--compact { padding-block: clamp(3.25rem, 7vw, 5rem); }
.section--flush   { border-bottom: none; }
.section:last-of-type { border-bottom: none; }

/* ---------- Typography ---------- */
.section-label,
.eyebrow {
  margin: 0 0 1rem;
  color: var(--label);
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .38em;
  text-transform: uppercase;
}

h1, h2, h3, h4, p, blockquote { margin-top: 0; }

h1, h2, h3, h4 {
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
}

h1 {
  max-width: 1040px;
  margin-bottom: 2rem;
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  line-height: 1.0;
  letter-spacing: -.025em;
}

h2 {
  max-width: 900px;
  margin-bottom: 1.5rem;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}

h3 {
  margin-bottom: .75rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}

h4 {
  margin-bottom: .6rem;
  font-family: var(--sans);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Fließtext: 17px Desktop, 16px mobil.
   Gewicht 400 statt der im Visual System spezifizierten 300 — bewusste
   Web-Ausnahme. Die 300 stammen aus der Print- und Proposal-Spezifikation
   bei 13–14pt; auf schwarzem Grund verliert Montserrat 300 auf
   Nicht-Retina-Displays sichtbar Strichstärke. Dokumente und Druck
   bleiben unverändert bei 300. */
p {
  max-width: var(--content);
  color: var(--reading);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.85;
}

p + p { margin-top: 1rem; }

strong { color: var(--white); font-weight: 600; }
em { font-style: italic; }

.lead {
  max-width: 760px;
  color: var(--reading);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-style: italic;
  line-height: 1.5;
}

.small { color: var(--label); font-size: .82rem; line-height: 1.7; }
.muted { color: var(--label); }
.statement {
  max-width: 900px;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-style: normal;
  line-height: 1.35;
}

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: var(--header-height);
  border-bottom: .5px solid var(--line);
  background: rgba(0, 0, 0, .94);
  backdrop-filter: blur(12px);
}

.navigation {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  flex: 0 1 auto;
  margin-right: auto;      /* Navigation und CTA rücken nach rechts */
  color: var(--white);
  text-decoration: none;
  line-height: 1.2;
}

/* Kontakt-Button liegt außerhalb der Klappnavigation, damit er auf
   Mobilgeräten auch bei geschlossenem Menü sichtbar bleibt. */
.nav-cta {
  order: 3;
  flex: 0 0 auto;
  min-height: 38px;
  padding: .5rem 1.05rem;
  font-size: .6rem;
  letter-spacing: .2em;
}

.wordmark__name {
  display: block;
  font-size: .69rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.wordmark__claim {
  display: block;
  margin-top: .18rem;
  color: var(--reading);
  font-family: var(--serif);
  font-size: .78rem;
  line-height: 1.15;
  letter-spacing: .14em;
}

/* Wortmarke als SVG: Signet links, Schriftzug rechts, beides im selben Link
   zurück auf die Startseite. Gleiche Höhe für beide Motive — im gelieferten
   Kombi-SVG steht das Signet über dem Schriftzug und ist dort kleiner; neben-
   einander gesetzt trägt die gemeinsame Höhe die Zeile ruhiger.

   32px entspricht der optischen Höhe des früheren Textsatzes. max-width und
   object-fit sind die Sicherung: Wird der Flex-Platz eng, verkleinern sich
   die Motive proportional, statt zu überlaufen oder sich zu verzerren.

   Unterhalb von 960px entfällt der Schriftzug und das Signet bleibt allein:
   Der Kopf teilt sich die Zeile dort mit Kontakt-Button und Menü-Schalter und
   lässt dem Schriftzug (6,5:1) nur rund 63px Breite — zu wenig. Das Signet
   (0,7:1) kommt mit 24px aus. */
.wordmark--logo {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.wordmark--logo img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.wordmark__mark { flex: 0 0 auto; }

.nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after  { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.9rem);
}

.nav-links a:not(.button) {
  color: var(--reading);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.nav-links a:not(.button):hover,
.nav-links a:not(.button):focus-visible {
  color: var(--white);
  border-bottom-color: var(--line-active);
}

.nav-links a[aria-current="page"],
.nav-links a[data-section="true"] {
  color: var(--white);
  border-bottom-color: var(--line-strong);
}

.nav-links .button {
  min-height: 38px;
  padding: .5rem 1.05rem;
  font-size: .6rem;
  letter-spacing: .2em;
}

.nav-links .lang {
  color: var(--whisper);
  border-left: 1px solid var(--line);
  padding-left: 1rem;
}

.nav-links .lang:hover { color: var(--white); }

/* Home and the Work-With-Me sub-items only appear in the mobile menu. */
.nav-home,
.nav-links .nav-sub { display: none; }

/* ---------- Section subnav (Work With Me) ---------- */
.subnav {
  border-bottom: .5px solid var(--line);
  background: var(--black);
}

.subnav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 2rem;
  padding-block: 1rem;
}

.subnav a {
  color: var(--label);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.subnav a:hover,
.subnav a:focus-visible { color: var(--white); border-bottom-color: var(--line-active); }
.subnav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--line-strong); }

/* ---------- Buttons & links ---------- */
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.4rem;
  border: .5px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button:hover,
.button:focus-visible {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.text-link {
  display: inline-block;
  padding-block: .45rem;
  color: var(--reading);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-decoration: none;
  text-underline-offset: .35rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  transition: color .2s ease, border-color .2s ease;
}

.text-link:hover,
.text-link:focus-visible { color: var(--white); border-bottom-color: var(--white); }
.text-link + .text-link { margin-left: 1.75rem; }

.inline-link {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .2s ease;
}

.inline-link:hover, .inline-link:focus-visible { border-bottom-color: var(--white); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: 2rem;
}

/* ---------- Hero (home) ---------- */
.hero {
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: flex-end;
  padding-block: clamp(6rem, 11vw, 10rem) clamp(5rem, 9vw, 8rem);
  border-bottom: .5px solid var(--line);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .32fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: end;
}

.hero-copy { max-width: 1060px; }
.hero-copy h1 { margin-bottom: 1rem; }
.hero-copy .brandline { margin-bottom: 1.5rem; color: var(--reading); }
.hero-copy .lead { margin-bottom: 1.5rem; }

/* Startseite ohne Porträt: einspaltig. Das Textmaß entspricht der früheren
   linken Hero-Spalte (bei 1280px Schale rund 885px), damit die Überschrift
   an denselben Stellen umbricht wie zuvor. Rechts bleibt Weißraum — gewollt,
   nicht übersehen. */
.hero-single .hero-copy { max-width: 885px; }

/* Druckmomente als kompakte Zeile unter der Copy — ersetzt die frühere
   Hero-Seitenspalte, die dem Porträt weichen musste. */
.hero-terms {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: .5px solid var(--line);
}

.hero-terms .section-label { margin-bottom: .75rem; }

.portrait-frame--hero {
  min-height: 480px;
  border-bottom: 0;
  border-left: .5px solid var(--line);
}

.portrait-frame--hero img {
  min-height: 480px;
  object-position: center 18%;
}

.brandline {
  margin: 0 0 1.6rem;
  color: var(--reading);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  letter-spacing: .06em;
  line-height: 1.3;
  max-width: none;
}

/* ---------- Page hero (secondary pages) ---------- */
.page-hero {
  padding-block: clamp(5rem, 10vw, 8rem) clamp(3.5rem, 7vw, 5rem);
  border-bottom: .5px solid var(--line);
}

.page-hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  line-height: 1.02;
}

.page-hero .lead { margin-top: 1.5rem; }

/* ---------- Proposition block ---------- */
.proposition {
  padding-block: clamp(5rem, 11vw, 9rem);
  border-bottom: .5px solid var(--line);
}

.proposition blockquote {
  max-width: 1100px;
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.08;
}

.proposition cite {
  display: block;
  margin-top: 2rem;
  color: var(--label);
  font-family: var(--sans);
  font-size: .64rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ---------- List blocks (signals, offers, evidence, modes) ---------- */
.signals,
.offers,
.evidence,
.paths,
.modes,
.entries {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: .5px solid var(--line);
}

.signal,
.offer,
.evidence-item,
.path,
.mode,
.entry {
  display: grid;
  grid-template-columns: 70px minmax(240px, .55fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: .5px solid var(--line);
  align-items: baseline;
}

.index {
  color: var(--label);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
}

.signal h3,
.offer h3,
.evidence-item h3,
.path h3,
.mode h3,
.entry h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); }

.signal p,
.offer p,
.evidence-item p,
.path p,
.mode p,
.entry p { margin: 0; }

.offer__meta,
.path__meta,
.mode__meta {
  margin-top: 1rem !important;
  color: var(--label) !important;
  font-size: .78rem !important;
}

.mode h3 a,
.entry h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.mode h3 a:hover,
.mode h3 a:focus-visible,
.entry h3 a:hover,
.entry h3 a:focus-visible { border-bottom-color: var(--line-active); }

.mode__kicker {
  display: block;
  margin-bottom: .5rem;
  color: var(--label);
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.evidence-fact {
  display: block;
  margin-bottom: .5rem;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

/* ---------- Thinking entries ---------- */
.entry__meta {
  margin-bottom: .9rem;
  color: var(--label);
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.2rem;
}

/* ---------- Framework visual language ----------
   One shared grammar for all diagrams: hairline frame, numbered node,
   uppercase label, arrow between nodes, horizontal scroll on small screens. */
.model-wrap,
.delivery-track,
.chain-wrap {
  margin-top: clamp(3rem, 6vw, 5rem);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--whisper) var(--black);
}

.model-track,
.delivery-track__inner,
.chain-track {
  border-top: .5px solid var(--line-strong);
  border-bottom: .5px solid var(--line-strong);
  display: grid;
}

.model-track       { min-width: 1060px; grid-template-columns: repeat(8, minmax(125px, 1fr)); }
.delivery-track__inner { min-width: 840px;  grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.chain-track       { min-width: 980px;  grid-template-columns: repeat(7, minmax(128px, 1fr)); }

.model-step {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem 1.6rem 1.2rem 1rem;
  border-right: .5px solid var(--line);
  color: var(--white);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.model-step::before {
  content: attr(data-index);
  position: absolute;
  top: .9rem;
  left: 1rem;
  color: var(--whisper);
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0;
}

.model-step::after {
  content: "\2192";
  position: absolute;
  top: .85rem;
  right: .5rem;
  color: var(--whisper);
  font-family: var(--serif);
  font-size: 1.25rem;
}

.model-step:last-child { border-right: 0; }
.model-step:last-child::after { content: ""; }

.delivery-track__inner .model-step,
.chain-track .model-step { min-height: 130px; }

.model-caption {
  margin-top: 1.1rem;
  color: var(--label);
  font-size: .74rem;
  max-width: 760px;
}

/* ---------- Triptych (Orientation → Insights → Implementation) ---------- */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: .5px solid var(--line-strong);
  border-bottom: .5px solid var(--line-strong);
}

.triptych__part {
  position: relative;
  padding: 2rem 2rem 2.2rem 0;
  border-right: .5px solid var(--line);
}

.triptych__part:last-child { border-right: 0; }
.triptych__part:not(:first-child) { padding-left: 2rem; }

.triptych__part h3 {
  margin-bottom: .9rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.triptych__part p { margin: 0; font-size: .86rem; }

.triptych__index {
  display: block;
  margin-bottom: .8rem;
  color: var(--whisper);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}

/* ---------- Vorher / Nachher (Was sich ändert) ---------- */
.shift { margin-top: clamp(3rem, 6vw, 5rem); }

.shift__pair {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: .5px solid var(--line);
}

.shift__pair:last-child { border-bottom: .5px solid var(--line); }

.shift__from { color: var(--label); }
.shift__to { color: var(--white); margin-top: .7rem; }

.shift + .statement { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Sektions-Rhythmus ----------
   Wechsel zwischen --black und --surface. Der Unterschied ist bewusst kaum
   wahrnehmbar: Er erzeugt Takt, keine Aufmerksamkeit. Keine Akzentfarbe. */
.section--raised {
  background: var(--surface);
  border-bottom-color: transparent;
}

/* ---------- Callout ---------- */
.callout {
  max-width: 760px;
  margin-top: 2.5rem;
  padding: 1.5rem 1.7rem;
  border: .5px solid var(--line-strong);
}

.callout .section-label { margin-bottom: .65rem; }
.callout p { margin: 0; font-size: .82rem; }
.callout p + p { margin-top: .8rem; }

/* ---------- Process (numbered steps) ---------- */
.process {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: .5px solid var(--line);
}

.process-step {
  display: grid;
  grid-template-columns: 70px minmax(220px, .45fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.4rem;
  border-bottom: .5px solid var(--line);
  align-items: baseline;
}

.process-step__title {
  color: var(--white);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.process-step p { margin: 0; font-size: .82rem; }

/* ---------- Spec list (relevant when / formats / outcome) ---------- */
.spec {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: .5px solid var(--line);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.35rem;
  border-bottom: .5px solid var(--line);
  align-items: baseline;
}

.spec__key {
  margin: 0;
  color: var(--label);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.spec__value { margin: 0; max-width: 740px; font-size: .88rem; }

/* ---------- Plain list ---------- */
.tick-list {
  max-width: 740px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: .5px solid var(--line);
}

.tick-list li {
  padding-block: .85rem;
  border-bottom: .5px solid var(--line);
  color: var(--reading);
  font-size: .88rem;
  line-height: 1.7;
}

.tick-list li strong { display: block; }

.term-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.term-list li {
  color: var(--label);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Portrait + About grid ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(260px, .36fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.portrait-frame {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border-bottom: .5px solid var(--line-strong);
}

.portrait-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}

.portrait-frame--compact,
.portrait-frame--compact img { min-height: 420px; }

.about-copy p:not(.section-label):not(.small) {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.5;
}

.about-copy p + p { margin-top: 1.25rem; }

.about-meta {
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.about-meta > div { padding-top: 1rem; border-top: .5px solid var(--line); }

.about-meta strong {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: .6rem;
}

.about-meta span { color: var(--label); font-size: .82rem; font-family: var(--sans); }

/* ---------- Principles list ---------- */
.principles { margin-top: 2rem; border-top: .5px solid var(--line); }

.principles p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  max-width: 900px;
  padding-block: 1.1rem;
  border-bottom: .5px solid var(--line);
  margin: 0;
}

/* ---------- Conviction blocks (Philosophy) ---------- */
.convictions { margin-top: clamp(3rem, 6vw, 5rem); border-top: .5px solid var(--line); }

.conviction {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: .5px solid var(--line);
}

.conviction h3 {
  max-width: 900px;
  margin-bottom: 1.1rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
}

.conviction p { max-width: 720px; }

/* ---------- Editorial / essay mode ---------- */
.essay { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.essay p,
.essay li { color: var(--reading-strong); font-size: 1rem; line-height: 1.95; }

.essay p { max-width: var(--content); }

.essay h2 {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: 1.2rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.essay h3 {
  margin-top: 2.5rem;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.essay > :first-child { margin-top: 0; }

.essay blockquote {
  max-width: var(--content);
  margin: 2.5rem 0;
  padding-left: 1.6rem;
  border-left: .5px solid var(--line-strong);
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-style: normal;
  line-height: 1.4;
}

.essay ul { max-width: var(--content); padding-left: 1.1rem; }
.essay li { margin-bottom: .5rem; }

.essay__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  color: var(--label);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.essay__standfirst {
  max-width: 760px;
  margin-bottom: 2.5rem;
  color: var(--reading);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .32fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.contact-action { padding-left: 1.5rem; border-left: .5px solid var(--line); }

.contact-lane { padding-block: clamp(2rem, 4vw, 3rem); border-top: .5px solid var(--line); }
.contact-lane:last-of-type { border-bottom: .5px solid var(--line); }
.contact-lane h3 { margin-bottom: .5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.contact-lane p { margin-bottom: 1rem; }
.contact-lane .actions { margin-top: 1.25rem; }

.route-list {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: .5px solid var(--line);
}

.route {
  display: grid;
  grid-template-columns: minmax(200px, .32fr) minmax(0, 1fr) auto;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: 1.35rem;
  border-bottom: .5px solid var(--line);
}

.route__name {
  margin: 0;
  color: var(--white);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.route p { margin: 0; font-size: .86rem; }

/* ---------- Papers / downloads ---------- */
.papers { margin-top: clamp(2rem, 5vw, 4rem); border-top: .5px solid var(--line); }
.paper { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: .5px solid var(--line); }

.paper .meta {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: .8rem;
  font-family: var(--sans);
}

.paper h3 { margin-bottom: .8rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.paper p { margin-bottom: 1.4rem; }
.paper .dl-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.2rem; }

.dl-link {
  display: inline-block;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--reading);
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.dl-link:hover,
.dl-link:focus-visible { color: var(--white); border-bottom-color: var(--white); }
.dl-link--plain { border-bottom: none; padding: 0; }

/* ---------- Legal ---------- */
.legal-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2.5rem; margin-bottom: .8rem; }
.legal-body h3 { font-size: 1.1rem; margin-top: 1.8rem; margin-bottom: .5rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; }
.legal-body h4 { font-size: 1rem; margin-top: 1.5rem; margin-bottom: .4rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; }
.legal-body h5 { font-size: .94rem; margin-top: 1.3rem; margin-bottom: .35rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--reading); }
.legal-body p { max-width: var(--content); }
.legal-body p + p { margin-top: 1rem; }
.legal-body ul { max-width: var(--content); color: var(--reading); font-size: .94rem; line-height: 1.9; padding-left: 1.1rem; }
.legal-body a { color: var(--white); border-bottom: 1px solid var(--line-active); text-decoration: none; overflow-wrap: anywhere; transition: border-color .2s ease; }
.legal-body a:hover,
.legal-body a:focus-visible { border-bottom-color: var(--white); }

.placeholder {
  color: var(--white);
  border-bottom: 1px dashed var(--line-active);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 4rem 3rem;
  text-align: center;
  border-top: .5px solid var(--line);
}

.footer-quote {
  max-width: 650px;
  margin: 0 auto 2.5rem;
  color: var(--reading);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.55;
}

.footer-wordmark { display: inline-block; margin: 0 auto; }
.footer-wordmark .wordmark__name { font-size: .78rem; }
.footer-wordmark .wordmark__claim { margin-top: .35rem; font-size: .82rem; }

/* Fußzeile trägt die Fassung mit Signet. Bei 56px Gesamthöhe steht der
   Schriftzug-Anteil auf rund 31px und damit auf derselben Höhe wie im
   Kopf der Seite. */
.footer-wordmark--logo { display: block; }
.footer-wordmark--logo img {
  display: block;
  width: auto;
  height: 56px;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.75rem;
  margin-top: 2.25rem;
}

.footer-nav a {
  color: var(--reading);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.footer-nav a:hover, .footer-nav a:focus-visible { border-bottom-color: var(--line-active); }

.footer-contact {
  /* p has max-width: var(--content); without resetting it the block sits
     left inside the centred footer instead of being centred itself. */
  max-width: none;
  margin-inline: auto;
  margin-top: 1.5rem;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--whisper);
  text-align: center;
}

.footer-contact a {
  color: var(--reading);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--white); border-bottom-color: var(--white); }

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.5rem;
  margin-top: 1.8rem;
}

.legal-links a {
  color: var(--whisper);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}

.legal-links a:hover, .legal-links a:focus-visible { color: var(--reading); }

/* ---------- Page archetypes (subtle rhythm differences) ---------- */
.page--philosophy .page-hero { padding-block: clamp(6rem, 12vw, 10rem) clamp(4rem, 8vw, 6rem); }
.page--philosophy .page-hero h1 { font-size: clamp(3rem, 6.5vw, 5.6rem); }
.page--thinking .page-hero { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(3rem, 6vw, 4rem); }
.page--thinking .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.page--offer .section { padding-block: clamp(4rem, 8vw, 6.5rem); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .triptych { grid-template-columns: 1fr; }
  .triptych__part { padding: 1.8rem 0; border-right: 0; border-bottom: .5px solid var(--line); }
  .triptych__part:last-child { border-bottom: 0; }
  .triptych__part:not(:first-child) { padding-left: 0; }
}

@media (max-width: 960px) {
  :root { --header-height: 68px; }

  .nav-toggle { display: block; order: 4; }
  .nav-home { display: block; }

  .wordmark--logo .wordmark__wide { display: none; }
  .wordmark--logo .wordmark__mark { height: 34px; }
  .footer-wordmark--logo img { height: 48px; }

  .nav-cta {
    order: 2;
    margin-right: .75rem;
    min-height: 40px;
    padding: 9px 14px;
  }

  .nav-links {
    position: absolute;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.5rem;
    border-bottom: .5px solid var(--line);
    background: var(--black);
    max-height: calc(100svh - var(--header-height));
    overflow-y: auto;
  }

  .nav-links[data-open="true"] { display: flex; }

  .nav-links a:not(.button) {
    padding-block: 1rem;
    border-bottom: .5px solid var(--line);
  }

  .nav-links a[aria-current="page"] { border-bottom-color: var(--line-active); }
  .nav-links .nav-sub { display: block; padding-left: 1.25rem; font-size: .62rem; color: var(--label); }
  .nav-links .lang { border-left: 0; padding-left: 0; margin-left: 0; }
  .nav-links .button { margin-top: 1rem; }

  .hero-grid,
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .contact-action {
    max-width: var(--content);
    padding-top: 1.5rem;
    padding-left: 0;
    border-top: .5px solid var(--line);
    border-left: 0;
  }

  .portrait-frame--hero {
    order: 2;
    min-height: 360px;
    border-left: 0;
    border-top: .5px solid var(--line);
  }

  .portrait-frame--hero img { min-height: 360px; }

  .signal,
  .offer,
  .evidence-item,
  .path,
  .mode,
  .entry,
  .process-step { grid-template-columns: 54px minmax(0, 1fr); }

  .signal p,
  .offer > div:last-child,
  .evidence-item > div:last-child,
  .path > div:last-child,
  .mode > div:last-child,
  .entry > div:last-child,
  .process-step p { grid-column: 2; }

  .shift__pair { grid-template-columns: 54px minmax(0, 1fr); }

  .spec__row,
  .route { grid-template-columns: 1fr; }
  .route { align-items: start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  p    { font-size: 1rem; }   /* 16px — Mindestmaß aus dem Digital Application Guide */

  h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); }

  .hero { min-height: auto; padding-top: 6rem; }

  .actions { align-items: flex-start; flex-direction: column; }

  .about-meta { grid-template-columns: 1fr; }

  .portrait-frame,
  .portrait-frame img { min-height: 420px; }

  .signal,
  .offer,
  .evidence-item,
  .path,
  .mode,
  .entry,
  .conviction,
  .process-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .8rem 1rem;
  }

  .index { font-size: 1.3rem; }

  .text-link + .text-link { margin-left: 0; margin-top: 1rem; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .site-header,
  .subnav,
  .actions,
  .contact-action,
  .legal-links { display: none !important; }

  body { background: #000; color: #fff; }

  .section, .hero, .proposition { page-break-inside: avoid; }
}