/* Gemeinsame Komponenten für Portfolio und Integrity Architecture */

/* ════════════════════════════════════════════════════════════
   Vorlagen nach Frauke Brinkmanns WordPress-Seite (vermessen 24.10.2026).
   Was gleich aussieht, ist dieselbe Vorlage – nur die Hintergrundfarbe wechselt.
   Alle Texte in --color-text (#1F1421).
   ════════════════════════════════════════════════════════════ */

/* ── Schriftrollen ──────────────────────────────────────── */
/* H6: Abschnittstitel und Hero-Titel – Public Sans Light, Versalien, gesperrt */
.h6 {
  font-size: var(--text-h6);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-h6);
  line-height: var(--leading-title);
  text-transform: uppercase;
}
/* H5: zentrale Aussage in Versalien, z. B. „As AI accelerates …“ */
.h5 {
  font-size: var(--text-h5);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-h5);
  line-height: var(--leading-title);
  text-transform: uppercase;
}
/* Body 1: Unterzeile und Aufzählungen */
.body1 { font-size: var(--text-body1); line-height: var(--leading-body); }
/* Body 2: Fließtext */
.body2 { font-size: var(--text-body2); line-height: var(--leading-body); }
/* Statement: größer, gesperrt, normale Schreibweise */
.statement {
  text-align: center;   /* Statements zentriert [FESTLEGUNG 31.10.2026] */
  font-size: var(--text-statement);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-statement);
  line-height: var(--leading-statement);
}
/* Zitat: Spectral, überall gleich */
.quote {
  font-family: var(--font-quote);
  font-size: var(--text-quote);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--leading-quote);
  text-align: center;
}
/* Display: Special Gothic Condensed (fett) + Spectral */
.display-title {
  font-family: var(--font-display-title);
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.34;
  text-transform: uppercase;
}
.display-text {
  font-family: var(--font-display-text);
  font-size: var(--text-display-sub);
  font-weight: 400;
  line-height: var(--leading-display-sub);
}
.h5, .h6, .body1, .body2, .statement, .quote, .display-title, .display-text { margin: 0; }
/* Zeilen füllen wie in WordPress (kein Ausgleichen), damit die Textbreite der Vorlage genutzt wird */
.h5, .statement, .quote, .display-title, .display-text, .statement p, .quote p { text-wrap: wrap; }
.note { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ── Bänder: Abschnitte über die volle Breite ─────────────
   Mindesthöhe 400 px, Inhalt senkrecht mittig, oben und unten gleich viel Raum bis zur Schrift. */
.band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--band-min);
  padding-block: var(--band-pad);
  background: var(--band-bg, transparent);
}
.band > * { width: 100%; }
/* Gleicher Raum über der ersten und unter der letzten Schriftzeile (gemessen bis an die Buchstaben) */
.band > .container,
.banner > .container,
.site-footer > .container,
.band--action .text-block,
.profile > .text-block,
.entries > li:last-child { text-box: trim-end cap alphabetic; }
.band--white { --band-bg: var(--band-white); }
.band--paper { --band-bg: var(--band-paper); }
.band--ivory { --band-bg: var(--band-ivory); }
.band--fog { --band-bg: var(--band-fog); }
.band--grey { --band-bg: var(--band-grey); }
.band--silver { --band-bg: var(--band-silver); }
.band--mint { --band-bg: var(--band-mint); }
.band--blush { --band-bg: var(--band-blush); }
.band--cream { --band-bg: var(--band-cream); }
@media (max-width: 48rem) { br.br-wide { display: none; } }   /* Umbruch nur ab Tablet, auf dem Handy fließt der Titel [FESTLEGUNG 25.10.2026] */
/* Abschnitte mit Diagramm: Grund wie die Illustration, damit kein Rand entsteht */
.band--diagram { --band-bg: var(--band-diagram); }
.band--diagram-ivory { --band-bg: var(--band-diagram-ivory); }
/* Abschnitt endet höchstens 40 px unter dem Link „Read diagram as text“ [FESTLEGUNG 31.10.2026] */
.band:has(> .container > .diagram:last-child) { padding-bottom: 2.5rem; }
.band--center { text-align: center; }

/* ── Spalten ────────────────────────────────────────────── */
/* Textblock: beginnt bei 10 %, 50 % breit – immer einspaltig */
.container.text-block,
.container.column { max-width: none; padding-inline: var(--col-start) calc(100% - var(--col-start) - var(--col-width)); }
/* Mittig: Statement 50 %, Zitat / Display / zentrale Aussage 58 % */
.col-center { width: min(100%, var(--col-center)); margin-inline: auto; }
.statement.col-center { width: min(100%, var(--col-statement)); }
.col-wide { width: min(100%, var(--col-wide)); margin-inline: auto; }
.quote.col-wide { width: min(100%, var(--col-quote)); }
/* Kurzes Zitat in einer Zeile: ab Laptop ohne Umbruch, breiter als die Zitatspalte [FESTLEGUNG 31.10.2026] */
@media (min-width: 64.01rem) { .quote.quote--one-line { width: auto; white-space: nowrap; } }
/* Die Breiten beziehen sich auf die Fensterbreite, wie in WordPress */
.band > .container:has(> .col-center, > .col-wide),
.container.col-wide { max-width: none; }
.container.col-wide { width: min(100%, calc(var(--col-wide) + 2 * var(--gutter))); }
@media (max-width: 75rem) {
  :root { --col-start: 8%; --col-width: 70%; --col-center: 70vw; --col-statement: 76vw; --col-wide: 80vw; --col-quote: 80vw; }
}
@media (max-width: 48rem) {
  .container.text-block,
  .container.column { padding-inline: var(--gutter); }
  .col-center, .col-wide, .statement.col-center { width: 100%; }
}

/* ── Textblock: H6 → (Body 1) → Body 2 / Liste ─────────── */
.text-block > * { margin: 0; }
.text-block > :not(:first-child) { margin-top: var(--gap-block); }
.text-block > .h6 + .body1:not(.list) { margin-top: var(--gap-title); }
/* Teaser mit Button (band--action) und Seiteneinstieg (h1 + Unterzeile, wiederholt den Teaser):
   Titel → Text bleibt beim ursprünglichen, engeren Abstand [FESTLEGUNG 24.10.2026].
   Einzelne Textblöcke können ihn mit .text-block--tight ebenfalls nutzen [FESTLEGUNG 25.10.2026] */
.band--action .text-block > .h6 + .body1:not(.list),
.text-block > h1.h6 + .body1:not(.list),
.text-block--tight > .h6 + .body1:not(.list) { margin-top: var(--gap-heading); }
/* Titel dürfen über die Textspalte hinausragen, damit sie auf kleineren Laptops nicht umbrechen */
@media (min-width: 48.01rem) { .text-block > .h6 { width: max-content; max-width: 80vw; } }
/* Listenpunkte dürfen ebenfalls breiter laufen, damit kurze Punkte nicht umbrechen */
@media (min-width: 48.01rem) { .text-block > .list { width: max-content; max-width: 70vw; } }
/* Folgt auf den Titel direkt eine Liste, gilt der große Schritt – wie in WordPress */
.text-block > .body2 + .note, .text-block > .body1 + .note { margin-top: var(--gap-heading); }
/* Kurzer Text: Zeilen etwas kürzer (ca. 1,5 cm auf dem Laptop) [FESTLEGUNG 24.10.2026] */
/* Fließtext höchstens ca. 75 Zeichen pro Zeile (Lesbarkeit); Titel und Listen dürfen breiter laufen. */
.text-block > :is(.body1, .body2):not(.list) { max-width: 38em; }
@media (min-width: 48.01rem) { .measure-short { max-width: calc(100% - var(--measure-cut, 4.75rem)); } }
/* Absätze innerhalb eines Blocks ohne Leerzeile, wie in WordPress */
.body2 p + p, .statement p + p { margin-top: 0; }

/* ── Display-Block ──────────────────────────────────────── */
.display-block { text-align: center; }
.display-block .display-text { max-width: var(--col-center); margin-inline: auto; }  /* 50 % wie das Statement */
.display-title + .display-text { margin-top: var(--gap-display); }
/* Display-Titel nutzen auf dem Desktop bis zu 80 % der Breite, damit sie nicht umbrechen */
@media (min-width: 48.01rem) {
  .container.display-block.col-wide { width: min(100%, calc(80vw + 2 * var(--gutter))); }
}

/* ── Listen: Zeichen vor dem Text, ohne Einzug, ohne Zusatzabstand ── */
.list { margin: 0; padding: 0; list-style: none; }
.list--arrow li::before { content: "→\00a0"; color: var(--color-tuerkis); }   /* Marker (Pfeile, Punkte, Zahlen) türkis [FESTLEGUNG 25.10.2026] */
.list--dot li::before { content: "·\00a0"; color: var(--color-tuerkis); }
.list--numbered { counter-reset: item; }
.list--numbered li { counter-increment: item; }
.list--numbered li::before { content: counter(item, decimal-leading-zero) ".\00a0"; font-variant-numeric: tabular-nums; color: var(--color-tuerkis); }

/* ── Buttons ────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6em 1.85em;
  border: 0;
  border-radius: 0.5625rem;   /* 9 px – eckiger als die Pillen am Seitenende [FESTLEGUNG 24.10.2026] */
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 1px 2px 3px rgb(31 20 33 / 0.12);
  font: inherit;
  font-size: var(--text-button);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-button);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.button:hover { color: var(--color-text); background: var(--color-button-hover); }
/* Seitenende: zwei Pillen mittig – links E-Mail, rechts die nächste Seite */
.page-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.button--dark {
  min-height: 3.3rem;
  padding-inline: 2.6em;
  border-radius: 999px;
  background: var(--color-button-dark);
  color: var(--color-white);
  box-shadow: none;
  letter-spacing: 0.12em;
}
.button--dark:hover { color: var(--color-white); background: var(--color-ink); }
.band--end { min-height: 0; padding-block: 2.5rem; }

/* ── Abschnitt mit Button unten rechts (z. B. Teaser auf Home, „Request full paper“) ── */
.band--action { min-height: var(--band-min-action); justify-content: flex-start; padding-top: calc(var(--band-pad) + 1.4rem); padding-bottom: 1.75rem; }
.band--action > .action {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding: var(--gap-heading) clamp(1.25rem, 3.4vw, 3.6rem) 0;
}

/* Mehrere Bausteine im selben Abschnitt (z. B. Display-Block und Diagramm) */
.band > .container + .container { margin-top: var(--gap-block); }

/* ── Hero mit Bild ──────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(30rem, 95vh);
  padding: 0;
  place-items: start center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.hero__title { margin: 0 auto; padding-top: clamp(6rem, 22vh, 13rem); }
.hero__media,
.banner__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
/* Parallax beim Scrollen: Bild bewegt sich langsamer als der Inhalt (Wert setzt site.js) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-parallax] img { transform: translate3d(0, var(--parallax, 0px), 0) scale(1.15); will-change: transform; }
}

/* ── Bildbanner mit Display-Titel ───────────────────────── */
.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 54vw, 58.5rem);
  padding-block: var(--band-pad);
  overflow: hidden;
  isolation: isolate;
}
.banner__title {
  max-width: var(--banner-measure, 30vw);
  text-wrap: wrap;   /* Zeilen füllen wie in WordPress, nicht ausgleichen */
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-banner);
  font-weight: 700;
  letter-spacing: var(--tracking-banner);
  line-height: 1.34;
  text-transform: uppercase;
}

.banner > .container { max-width: none; padding-inline: 5%; }
/* Zwei Varianten aus WordPress: schmale Spalte unten (Design Systems), breite Spalte oben (Perspective) */
.banner--top { align-items: flex-start; --banner-measure: 45vw; }
@media (max-width: 75rem) { .banner { --banner-measure: 50vw; } .banner--top { --banner-measure: 70vw; } }
@media (max-width: 48rem) { .banner, .banner--top { --banner-measure: 100%; } }

/* ── Diagramm ───────────────────────────────────────────── */
.diagram { margin: 0; }
.diagram__zoom { display: block; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.diagram img { display: block; width: 100%; height: auto; background: var(--band-bg, var(--band-diagram)); }
/* Diagramme nicht herausziehen, markieren oder per langem Tippen sichern (siehe site.js). */
.diagram picture { display: block; }
.diagram, .lightbox__stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.diagram img, .diagram a, .lightbox img { -webkit-user-drag: none; }
/* Diagramme groß eingebaut: volle Breite bis 110rem, auch hohe Diagramme – die Lupe gibt es zusätzlich */
.band--diagram > .container, .band--diagram-ivory > .container, .band > .container:has(> .diagram) { max-width: 110rem; }
.diagram-band .diagram { width: min(100%, 76rem); margin-inline: auto; }

/* Diagramm als Text: aufklappbar unter dem Bild (details/summary, ohne JavaScript bedienbar).
   Ergänzt den kurzen Alt-Text; markier- und kopierbar, damit Vorlesen und Übersetzen funktionieren. */
.diagram__text {
  margin-top: 1.5rem;               /* 24 px unter dem Bild [FESTLEGUNG 31.10.2026] */
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
/* Link rechtsbündig am Bildrand, ohne Plus-Zeichen, kleinere Schrift [FESTLEGUNG 31.10.2026] */
.diagram__text summary {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 1.5rem;              /* Zielgröße mindestens 24 px (WCAG 2.2, 2.5.8) */
  margin-inline: auto 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
  list-style: none;
}
.diagram__text summary::-webkit-details-marker { display: none; }
.diagram__text summary:hover { text-decoration-thickness: 2px; }
.diagram__desc {
  max-width: 44rem;
  margin: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem) auto 0;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  background: var(--color-white);
  border-radius: var(--radius);
  font-size: var(--text-body2);
  line-height: var(--leading-body);
}
.diagram__desc > * + * { margin-top: 0.9em; }
.diagram__desc ul, .diagram__desc ol { margin-block: 0.9em 0; padding-left: 1.4em; }
.diagram__desc li + li { margin-top: 0.4em; }
.diagram__desc li::marker { color: var(--color-tuerkis); }
.diagram__desc strong { font-weight: 500; }

/* Großansicht für Diagramme: Tippen öffnet, Doppeltippen zoomt, nach unten ziehen schließt */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  background: var(--color-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.lightbox__stage {
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-3);
  touch-action: pan-x pan-y pinch-zoom;
}
.lightbox__stage img { max-width: min(100%, 110rem); max-height: 100%; height: auto; transition: transform 0.25s ease; }
.lightbox.is-zoomed .lightbox__stage { place-items: start; }
.lightbox.is-zoomed .lightbox__stage img { max-width: none; max-height: none; width: 250%; }
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__hint {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4em 1em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  background: color-mix(in srgb, var(--color-white) 90%, transparent);
  box-shadow: var(--shadow-card);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Profil (Perspective, erster Abschnitt) – nach WordPress vermessen ── */
/* Foto links bei 7 %, Text ab 49 % der Breite, Abschnitt 700 px hoch */
.band--profile { min-height: clamp(28rem, 40.5vw, 43.75rem); }
.profile { display: grid; gap: var(--space-5); align-items: center; }
.container.column.profile { padding-inline: 7% 7.4%; }
@media (min-width: 48rem) {
  .profile { grid-template-columns: 49% 1fr; gap: 0; }
  /* Foto etwas tiefer und etwas weiter rechts (halbe Verschiebung) [FESTLEGUNG 31.10.2026] */
  .profile__portrait { align-self: start; margin-top: calc(-0.5 * clamp(0rem, 3.4vw, 3.6rem)); margin-left: clamp(0rem, 2.5vw, 3rem); }
  .profile > .text-block { padding-left: 1rem; }   /* Text etwas eingerückt [FESTLEGUNG 25.10.2026] */
}
.profile .text-block > * { margin: 0; }
.profile .text-block > .h6 { margin-top: clamp(1rem, 1.6vw, 1.75rem); line-height: 1.53; width: auto; max-width: none; }
.profile .text-block > .h6 + .body2 { margin-top: clamp(1.125rem, 2.4vw, 2.6rem); }
.profile .text-block > .button { margin-top: clamp(1.5rem, 2.3vw, 2.5rem); }
.profile__portrait {
  width: clamp(10rem, 17.4vw, 18.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Publikationen und Fallstudien ──────────────────────── */
.entries {
  display: grid;
  gap: var(--gap-heading);
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry__title { display: block; }
.entry__meta { display: block; }
.entry__text { display: block; }
.entries { font-size: var(--text-body2); }
.entry__title { font-size: var(--text-body1); letter-spacing: 0.04em; line-height: 1.5; }
a.entry__title { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* Publikationen: Artikel links, Forschungsrichtungen rechts – wie in WordPress (11 % / 51 %) */
.container.pubs { max-width: none; display: grid; gap: var(--gap-block); padding-inline: 11.2% 10.5%; }
@media (min-width: 64rem) { .container.pubs { grid-template-columns: 1fr 1fr; column-gap: 3.5%; row-gap: 0; } }
@media (max-width: 48rem) { .container.pubs { padding-inline: var(--gutter); } }
.container.pubs--flow { display: block; }
.entries--flow { display: block; }
.entries--flow > li { break-inside: avoid; }
.entries--flow > li + li { margin-top: var(--gap-heading); }
@media (min-width: 64rem) { .entries--flow { columns: 2; column-gap: 3.5%; } .entries--flow > li { margin: 0 0 var(--gap-heading); } }
.entry__meta { letter-spacing: 0.04em; }

/* ── Fallstudien im Raster: Nummer / Schrägstrich / Rubrik, Titel, Untertitel / Pfeil
   nach Vorlage der Nutzerin, Akzent türkis statt rot [FESTLEGUNG 25.10.2026] ── */
.container.cases { max-width: none; padding-inline: var(--col-start) 6%; }
@media (max-width: 48rem) { .container.cases { padding-inline: var(--gutter); } }
.cases__title,
.pubs:has(.entries--lined) .pubs__heading {
  margin: 0;
  color: var(--color-tuerkis);
  font-size: var(--text-body1);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cases__lead { margin: 0.35em 0 0; font-size: var(--text-body1); line-height: 1.5; }
.cases__list { margin: clamp(1.5rem, 0.8rem + 2vw, 3.25rem) 0 0; padding: 0; list-style: none; }
.case {
  padding-block: clamp(1.25rem, 0.8rem + 1.2vw, 2.1rem);
  border-bottom: 1px solid var(--color-line);
}
.case:last-child { border-bottom: 0; }
/* Ganze Zeile ist ein Link: Anfrage der Fallstudie per E-Mail [FESTLEGUNG 26.10.2026] */
.case__link {
  display: grid;
  grid-template-columns: clamp(2.6rem, 1.9rem + 1.9vw, 3.9rem) 1.25rem 1fr auto;
  align-items: center;
  column-gap: clamp(0.6rem, 0.3rem + 0.6vw, 1.1rem);
  color: inherit;
  text-decoration: none;
}
.case__num {
  grid-column: 1;
  font-size: clamp(2rem, 1.4rem + 1.4vw, 2.875rem);
  font-weight: var(--weight-title);
  letter-spacing: -0.02em;
  line-height: 1;
}
.case__body { grid-column: 3; }
/* Schrägstrich als feine türkise Linie zwischen Nummer und Text */
.case__link::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 2px;
  height: clamp(2.4rem, 1.8rem + 1.6vw, 3.6rem);
  background: var(--color-tuerkis);
  transform: skewX(-14deg);
}
.case__body { display: grid; gap: 0.15em; min-width: 0; }
.case__kicker { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.6; text-transform: uppercase; }
.case__title { font-size: var(--text-body2); font-weight: 500; line-height: 1.45; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.case__meta { font-size: var(--text-body2); line-height: 1.5; }
.case__arrow { grid-column: 4; font-size: var(--text-body1); font-weight: 250; padding-left: 0.5em; color: var(--color-tuerkis); transition: transform 0.25s ease; }
/* Hover wie bei den Publikationen: Titel türkis, Pfeil rückt nach rechts */
.case__link:hover { color: inherit; }
.case__link:is(:hover, :focus-visible) .case__title { color: var(--color-tuerkis); text-decoration-color: var(--color-tuerkis); }
.case__link:is(:hover, :focus-visible) .case__arrow { transform: translateX(0.35em); }
@media (prefers-reduced-motion: reduce) { .case__arrow { transition: none; } }
/* Inhaltsverzeichnis (Architecture Paper): Kapitelnummern türkis in eigener Spalte, Titel bündig [FESTLEGUNG 26.10.2026] */
.list--toc li { display: grid; grid-template-columns: 2.6em 1fr; }
.list--toc .toc__num { color: var(--color-tuerkis); font-variant-numeric: tabular-nums; }
/* Publikationen im selben typografischen Stil wie die Fallstudien [FESTLEGUNG 25.10.2026] */
.entries--lined { gap: 0; }
@media (min-width: 48.01rem) { .container.pubs:has(.entries--lined) { padding-inline: var(--col-start) 6%; } }   /* bündig mit Text und Fallstudien */
.pubs:has(.entries--lined) .pubs__heading { margin-bottom: clamp(1.25rem, 0.8rem + 1.2vw, 2.1rem); }
.entries--lined > li { padding-block: clamp(1.25rem, 0.8rem + 1.2vw, 2.1rem); border-bottom: 1px solid var(--color-line); }
.entries--lined > li:first-child { padding-top: 0; }
.entries--lined > li:last-child { padding-bottom: 0; border-bottom: 0; }
.entries--lined .entry__title { font-size: var(--text-body2); font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.entries--lined .entry__text { margin-top: 0.15em; line-height: 1.5; }
/* Verlinkte Titel unterstrichen, Pfeil türkis; beim Hover rückt der Pfeil nach rechts und die Linie wird türkis */
.entries--lined a.entry__title { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-right: 0.4em; text-decoration: none; }
.entries--lined a.entry__title > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--color-ink); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.entries--lined a.entry__title::after { content: "→"; flex: none; color: var(--color-tuerkis); font-size: var(--text-body1); font-weight: 250; line-height: 1.2; transition: transform 0.25s ease; }
.entries--lined a.entry__title:hover { color: var(--color-text); }
/* Hover: Schrift und Linie türkis [FESTLEGUNG 26.10.2026] */
.entries--lined a.entry__title:is(:hover, :focus-visible) > span { color: var(--color-tuerkis); text-decoration-color: var(--color-tuerkis); }
.entries--lined a.entry__title:is(:hover, :focus-visible)::after { transform: translateX(0.35em); }
@media (prefers-reduced-motion: reduce) { .entries--lined a.entry__title::after { transition: none; } }
@media (min-width: 64rem) {
  .cases__list { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 3.5%; }
  .case:nth-child(3n) { border-bottom: 0; }
}
.pubs__heading { margin: 0 0 clamp(1.1rem, 0.5rem + 1.3vw, 1.9rem); font-size: var(--text-body1); letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; }
.entry__badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: var(--color-mint);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  vertical-align: 0.1em;
}



/* ── Rechtstexte ────────────────────────────────────────── */
/* Rechtstexte: Spectral wie in WordPress, Zeilen ohne Zusatzabstand, Zwischentitel halbfett */
.prose > h1 { margin-bottom: var(--gap-title); }
.prose > :not(h1) { font-family: var(--font-serif); font-size: var(--text-body1); font-weight: 400; line-height: var(--leading-body); }
.prose h2 { margin: 0; font-weight: 600; }
.prose--plain h2 { font-weight: 400; }   /* Privacy Policy: Zwischentitel normal, wie in WordPress */
.prose address { font-style: normal; }
.prose a { overflow-wrap: anywhere; }   /* lange URLs brechen bei 320 px um */
.prose p, .prose address { margin: 0; }
.prose a { color: inherit; }

/* ── Fußzeile (nur auf Perspective und den Rechtsseiten) ── */
.site-footer {
  padding-block: var(--space-7);
  background: var(--color-white);
}
.site-footer__grid { display: grid; gap: var(--space-4); max-width: none; padding-inline: var(--col-start); font-size: var(--text-body1); }
@media (max-width: 48rem) { .site-footer__grid { padding-inline: var(--gutter); } }
.site-footer__name { margin-bottom: 0; }
.site-footer__grid > div { max-width: 54vw; }
@media (max-width: 48rem) { .site-footer__grid > div { max-width: none; } }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) clamp(2.5rem, 5.8vw, 6.25rem); margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--color-text); }
.icon-link { display: inline-flex; width: 2.25rem; height: 2.25rem; color: var(--color-text); }
.icon-link svg { width: 100%; height: 100%; fill: currentColor; }

/* ── Menü: Burger oben rechts, Vollbild-Overlay ─────────── */
.menu-toggle {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(249 247 246 / 0.72);   /* Fallback ohne color-mix() */
  background: color-mix(in srgb, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 1.375rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s ease, background-color 0.2s ease;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before,
.menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-toggle[aria-expanded="true"] { background: transparent; color: var(--color-menu-text); }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"]:focus-visible { outline-color: var(--color-ink); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  align-content: center;
  padding-block: var(--space-6);
  background: rgb(255 255 255 / 0.96);   /* Fallback ohne color-mix(): sonst wäre das Menü durchsichtig */
  background: color-mix(in srgb, var(--color-white) var(--menu-opacity), transparent);   /* hell, invertiert [FESTLEGUNG 31.10.2026] */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--color-menu-text);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.menu-overlay.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s ease; }
.menu-overlay ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.menu-overlay a {
  display: block;
  padding: clamp(0.6rem, 1.6vh, 1.1rem) var(--space-4);
  color: inherit;
  text-decoration: none;
  font-size: var(--text-statement);   /* 26 px, kleiner als die Titel [FESTLEGUNG 24.10.2026] */
  letter-spacing: var(--tracking-h6);
  text-transform: uppercase;
  line-height: var(--leading-title);
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* Aktive Seite: unterstrichen [FESTLEGUNG 31.10.2026, statt der Punkte „·  HOME  ·“] */
.menu-overlay a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
/* Hover: Zeile invertiert */
.menu-overlay a:hover,
.menu-overlay a:focus-visible { background: var(--color-ink); color: var(--color-white); outline: none; }
/* Mail und LinkedIn mittig unter den Seiten [FESTLEGUNG 26.10.2026] */
.menu-overlay__social { display: flex; justify-content: center; gap: var(--space-3); margin-top: clamp(1rem, 3vh, 2rem) !important; }
.menu-overlay .menu-overlay__social a { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; }
.menu-overlay__social svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.menu-overlay__social svg.is-filled { width: 1.35rem; height: 1.35rem; fill: currentColor; stroke: none; }
/* Rechtliches klein unten rechts: normale Schreibweise, nur das Wort beim Überfahren unterstrichen [FESTLEGUNG 26.10.2026] */
.menu-overlay__legal {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(0.75rem, 2.5vh, 1.75rem);
  display: flex;
  gap: 1.5rem;
}
.menu-overlay .menu-overlay__legal a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.4;
}
.menu-overlay .menu-overlay__legal a:hover,
.menu-overlay .menu-overlay__legal a:focus-visible { background: none; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.menu-overlay .menu-overlay__legal a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
@media (max-height: 30rem) { .menu-overlay__legal { position: static; justify-content: center; margin-top: var(--space-3) !important; } }
/* Klick: Puls, dann öffnet sich die neue Seite */
.menu-overlay a.is-pulsing { animation: menu-pulse 0.45s ease-out; }
@keyframes menu-pulse {
  0% { box-shadow: inset 0 0 0 0 rgb(31 20 33 / 0); }
  35% { background: var(--color-ink); color: var(--color-white); transform: scale(1.03); }
  100% { background: var(--color-ink); color: var(--color-white); transform: scale(1); }
}
/* Parallax beim Öffnen: Einträge gleiten in Ebenen mit unterschiedlicher Verzögerung herein */
@media (prefers-reduced-motion: no-preference) {
  .menu-overlay li { transform: translateY(calc(1.5rem + var(--i, 0) * 0.9rem)); opacity: 0; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease; transition-delay: calc(0.08s + var(--i, 0) * 0.07s); }
  .menu-overlay.is-open li { transform: none; opacity: 1; }
}
body.menu-open,
body.lightbox-open { overflow: hidden; }
/* Ohne JavaScript: Menü als Liste oben auf der Seite */
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .menu-overlay { position: static; visibility: visible; opacity: 1; background: var(--color-white); }
html:not(.js) .menu-overlay li { opacity: 1; transform: none; }

/* Seitenwechsel: neue Seite blendet sanft ein (Browser mit View Transitions) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* ── Nach oben ──────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(31 20 33 / 0.7);
  background: color-mix(in srgb, var(--color-ink) 70%, transparent);
  color: var(--color-white);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;   /* unsichtbar = nicht per Tab erreichbar */
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease; }
.to-top:hover { color: var(--color-white); background: var(--color-ink); }

/* ── Platzhalter – deutlich erkennbar, für noch fehlende Inhalte ── */
.placeholder {
  display: block;
  border: 2px dashed var(--color-rosa);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--color-rosa) 7%, transparent) 10px 20px);
  color: var(--color-text);
  padding: var(--space-3);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body2);
}
.placeholder::before {
  content: "PLATZHALTER";
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-rosa);
  margin-bottom: var(--space-1);
}
span.placeholder { display: inline-block; padding: var(--space-1) var(--space-2); }

/* ── Sanftes Einblenden beim Scrollen (nur mit JS, respektiert reduzierte Bewegung) ── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ── Executive Architecture Case Studies (gemeinsame Komponente, Partial architecture-cases)
   Gestaltung wie architecturecases.fraukebrinkmann.com: Nummer, farbiger Punkt + Rubrik,
   Titel, Untertitel in Spectral kursiv, geschlossenes Schloss; Hover: feine Farbleiste links.
   Jede Zeile führt auf die passwortgeschützte Seite, darunter „Request access“ per E-Mail [VORSCHLAG 01.11.2026] ── */
.container.xcases { max-width: none; padding-inline: var(--col-start) 6%; }
@media (max-width: 48rem) { .container.xcases { padding-inline: var(--gutter); } }
.xcases__eyebrow { margin: 0 0 0.9em; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.28em; line-height: 1.5; text-transform: uppercase; }
.xcases__title { margin: 0; font-size: var(--text-h6); font-weight: 300; letter-spacing: 0.12em; line-height: 1.25; text-transform: uppercase; }
.xcases__lead { margin: 0.6em 0 0; font-family: var(--font-serif); font-size: var(--text-body1); font-style: italic; font-weight: 400; line-height: 1.5; }
.xcases__list { margin: clamp(2rem, 1rem + 3vw, 4.5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.xcase { --xcase-dot: var(--color-tuerkis-soft); border-bottom: 1px solid var(--color-line); }
.xcase--orchid { --xcase-dot: var(--color-orchid-soft); }
.xcase--plum { --xcase-dot: var(--color-plum-soft); }
.xcase--tuerkis { --xcase-dot: var(--color-tuerkis-soft); }
.xcase--sage { --xcase-dot: var(--color-sage-soft); }
.xcase__link {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3rem, 2rem + 3vw, 5.5rem) 1fr auto;
  align-items: center;
  column-gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  padding-block: clamp(1.4rem, 0.9rem + 1.4vw, 2.4rem);
  color: inherit;
  text-decoration: none;
}
.xcase__link:hover { color: inherit; }
/* Hover: feine Leiste links in der Farbe der Rubrik */
.xcase__link::before {
  content: "";
  position: absolute;
  left: clamp(-1.25rem, -0.4rem - 1vw, -0.75rem);
  top: clamp(1.4rem, 0.9rem + 1.4vw, 2.4rem);
  bottom: clamp(1.4rem, 0.9rem + 1.4vw, 2.4rem);
  width: 3px;
  border-radius: 2px;
  background: var(--xcase-dot);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.xcase__link:is(:hover, :focus-visible)::before { opacity: 1; }
.xcase__num { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); font-weight: 300; letter-spacing: 0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.xcase__body { display: grid; gap: 0.3em; min-width: 0; }
.xcase__kicker { display: flex; align-items: center; gap: 0.9em; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.22em; line-height: 1.5; text-transform: uppercase; }
.xcase__kicker::before { content: ""; flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--xcase-dot); }
.xcase__title { font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.4375rem); font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.xcase__meta { font-family: var(--font-serif); font-size: var(--text-body2); font-style: italic; font-weight: 400; line-height: 1.5; }
.xcase__lock { margin-left: 0.5em; width: 1.6rem; height: 1.6rem; transition: transform 0.25s ease; }   /* geschlossenes Schloss: passwortgeschützt [FESTLEGUNG Frauke Brinkmann 01.11.2026] */
.xcase__link:is(:hover, :focus-visible) .xcase__lock { transform: translateY(-0.12em); }
.xcases__access { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(1.75rem, 1rem + 2vw, 3rem); }
.xcases__note { margin: 0; font-family: var(--font-serif); font-size: var(--text-body2); font-style: italic; font-weight: 400; line-height: 1.5; }
@media (max-width: 48rem) {
  .xcase__link { grid-template-columns: 1fr auto; row-gap: 0.6em; }
  .xcase__num { grid-column: 1 / -1; font-size: 1.25rem; }
  .xcase__link::before { left: -0.6rem; }
  .xcases__title { letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) { .xcase__lock, .xcase__link::before { transition: none; } }
/* Beschreibungssatz unter dem Untertitel [FESTLEGUNG Frauke Brinkmann 01.11.2026] */
.xcase__text { margin-top: 0.35em; max-width: 46em; font-size: var(--text-body2); font-weight: var(--weight-light); line-height: 1.6; }
/* Integrity Architecture: Titel als normale Abschnittsüberschrift (h6), Fließtext unter der Unterzeile [FESTLEGUNG 01.11.2026] */
.xcases > .h6 { margin: 0; }
.xcases__intro { max-width: 38em; margin-top: var(--gap-title); }
.xcases__intro > p { margin: 0; }
.xcases__intro > p + p { margin-top: 1em; }
/* Liste ohne eigenen Kopf (Portfolio: Einleitung steht im Textblock darüber) [FESTLEGUNG 01.11.2026] */
.xcases > .xcases__list:first-child { margin-top: 0; }