/* Portfolio: nur seitenspezifische Ergänzungen. Alles Gemeinsame liegt in foundation/.
   Gestaltung rein typografisch [FESTLEGUNG 30.10.2026]: Textfarbe #1F1421, Weiß, warme Grautöne,
   Schatten der hellen Buttons für Kacheln. Farbe kommt nur aus Bildern und Vorschaubildern. */
:root {
  /* Akzentfarbe Portfolio: dunkles Altrosa #C57272; die Cases-Listen bleiben türkis [Frauke Brinkmann 31.10.2026] */
  --color-accent: var(--color-rosewood);
  --color-accent-2: var(--color-rosewood);
  --portfolio-line: color-mix(in srgb, var(--color-button-dark) 35%, transparent);
}

/* Listenzeichen grau-braun statt türkis */
/* Listenmarker in der Akzentfarbe (Altrosa) */
.list li::before { color: var(--color-accent); }

/* ── Kapitel: große Nummer in Special Gothic, feine Linie darüber ── */
.chapter { border-top: 1px solid var(--portfolio-line); }
.chapter__num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--band-silver);
}
.text-block > .chapter__num + .h6,
.text-block > .chapter__num + .body2 { margin-top: var(--gap-heading); }
.profile .text-block > .chapter__num { margin-bottom: var(--gap-heading); }
.chapter__aside { margin-top: var(--gap-title); }

/* ── Kacheln zu den Projekten ── */
.container.tiles,
.container.previews {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  margin-top: var(--gap-title);
  padding-inline: var(--col-start) var(--gutter);
  max-width: none;
}
@media (min-width: 48.01rem) {
  .container.tiles, .container.previews { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline-end: 10%; }
}
@media (max-width: 48rem) {
  .container.tiles, .container.previews { padding-inline: var(--gutter); }
}
.tile {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  border-radius: 0.5625rem;
  background: var(--color-white);
  box-shadow: 1px 2px 3px rgb(31 20 33 / 0.12);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
a.tile:is(:hover, :focus-visible) { background: var(--color-button-hover); color: var(--color-text); }
.tile__kicker {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-button-dark);
}
.tile__title {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-h6);
  line-height: 1.4;
  text-transform: uppercase;
}
.tile__text { font-size: var(--text-body2); line-height: 1.6; }
.tile__meta { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--color-button-dark); }
.tile--pending { box-shadow: none; border: 1px solid var(--portfolio-line); background: transparent; }

.link-out { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.link-out:hover { color: var(--color-accent); }

/* Platzhalter im Portfolio grau-braun statt rosa, Bildplatzhalter im Querformat */
.placeholder {
  border-color: var(--color-button-dark);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--color-button-dark) 6%, transparent) 10px 20px);
}
.placeholder--image { aspect-ratio: 16 / 7; display: grid; place-items: center; text-align: center; }
.previews .placeholder--image { aspect-ratio: 4 / 3; }
.placeholder::before { color: var(--color-button-dark); }
/* Kapitel 2: vier Kacheln, 2 × 2 auf Tablets, eine Reihe ab Laptop */
@media (min-width: 48.01rem) { .container.tiles--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75.01rem) { .container.tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Kapitel 1 nach Skizze von Frauke Brinkmann (31.10.2026): nur Design-System-Größen ── */
/* Versalzeile in Body-2-Größe (Fokuszeile, Untertitel der Dimensionen) */
.text-caps { text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--weight-light); }
/* Kleine Einleitung über dem Titel: Spectral kursiv wie die Erläuterungen in den Diagrammen */
.lead-serif { font-family: var(--font-serif); font-style: italic; font-size: var(--text-body2); line-height: 1.6; }
.text-block > .lead-serif + .h6 { margin-top: var(--gap-title); } /* wie Focus Areas [Frauke Brinkmann 31.10.2026] */
/* Dimensionen: Titel → erster Punkt großer Titelabstand, Punkt-Titel → Text eng, Punkte untereinander mittlerer Abstand */
.text-block.dimensions > .h6 + .text-caps { margin-top: var(--gap-title); }
.text-block.dimensions > .text-caps + .body2, .text-block.dimensions > .h6 + .text-caps + .body2 { margin-top: var(--gap-heading); }
.text-block.dimensions > .body2:not(.text-caps) + .text-caps { margin-top: var(--gap-title); }
/* Versalzeile direkt unter dem Titel, danach Fließtext mit Titelabstand */
.text-block > .h6 + .text-caps { margin-top: var(--gap-title); } /* wie Focus Areas [Frauke Brinkmann 31.10.2026] */
.text-block > .h6 + .text-caps + .body2 { margin-top: var(--gap-title); }
/* Versalzeile darf wie Listen breiter laufen (bis 70vw) [Frauke Brinkmann 31.10.2026] */
@media (min-width: 48.01rem) { .text-block > .body2.text-caps { width: max-content; max-width: 70vw; } }
.text-caps__item { white-space: nowrap; } /* Begriffe nicht trennen */
@media (max-width: 30rem) { .text-caps__item { white-space: normal; } } /* schmale Bildschirme: lange Begriffe dürfen umbrechen, sonst läuft die Zeile über */
/* Fließtext in den Kapiteln läuft breiter als die üblichen 38em [Frauke Brinkmann 31.10.2026] */
@media (min-width: 48.01rem) { .text-block--prose > :is(.body1, .body2):not(.text-caps):not(.list) { width: max-content; max-width: min(46em, 70vw); } }
/* Kapitel 2 (Skizze Frauke Brinkmann 31.10.2026): Versalzeile → Serifenzeile großer Schritt, Serifenzeile → Text eng,
   Titel → Text mit dem Focus-Areas-Abstand, Liste → Schlusssatz mit Titelabstand */
.text-block--prose > .text-caps + .lead-serif { margin-top: var(--gap-block); }
.text-block--prose > .lead-serif + .body2 { margin-top: var(--gap-heading); }
.text-block--prose > .h6 + :is(.body1, .body2):not(.text-caps):not(.list) { margin-top: var(--gap-title); }
.text-block--prose > .list + .body2 { margin-top: var(--gap-title); }
/* Punktliste mit hängendem Einzug wie in der Skizze */
.text-block--prose > .list--dot li { padding-left: 1.25em; }
.text-block--prose > .list--dot li::before { display: inline-block; width: 1.25em; margin-left: -1.25em; text-align: center; }
/* Kapitel 03: Kicker über dem Kapiteltitel, Hervorhebungen aus Frauke Brinkmanns Text etwas kräftiger als der Fließtext */
.text-block > .text-kicker + .h6 { margin-top: var(--gap-heading); }
.text-block--prose strong { font-weight: 450; }
.text-block--prose.dimensions > .text-caps:first-child { margin-top: 0; }
/* Kapitel 05: Einleitungssatz → erster Versal-Titel mit Titelabstand */
.text-block--prose.dimensions > .body1 + .text-caps { margin-top: var(--gap-title); }

/* ── Einheitliche Kapitel nach Frauke Brinkmann (31.10.2026) ──
   Aufzählungen mit Titel und Text im Raster der Architecture Case Studies (Perspective), ohne Link */
.band > .text-block + .container.cases { margin-top: var(--gap-title); }
.band > .container.cases + .text-block { margin-top: var(--gap-title); }
.case__row {
  display: grid;
  grid-template-columns: clamp(2.6rem, 1.9rem + 1.9vw, 3.9rem) 1.25rem 1fr;
  align-items: center;
  column-gap: clamp(0.6rem, 0.3rem + 0.6vw, 1.1rem);
}
.case__row::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__row .case__num { grid-row: 1; }
.case__row .case__body { grid-row: 1; }
.cases--static .case__title { text-decoration: none; }
.cases--static .case__meta + .case__meta { margin-top: 0.5em; }
.cases--static .case__body { max-width: 38em; }
@media (min-width: 64rem) {
  .cases__list.cases--static { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .cases--static .case:nth-child(3n) { border-bottom: 1px solid var(--color-line); }
  .cases--static .case:last-child,
  .cases--static .case:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
/* "soon" wie bei den Research Directions auf Perspective, in Titelnähe etwas größer */
.h6 .entry__badge.soon { font-size: var(--text-body2); letter-spacing: 0.06em; text-transform: none; padding: 0.15em 0.8em; vertical-align: middle; }
.cases__list.cases--static { margin-top: 0; }
/* Raster untereinander (eine Spalte) [Frauke Brinkmann 31.10.2026] */
@media (min-width: 64rem) {
  .cases__list.cases--stack { grid-template-columns: 1fr; }
  .cases--stack .case:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--color-line); }
}
/* Menü des Portfolios: Spectral, keine Versalien [Frauke Brinkmann 31.10.2026] */
.menu-overlay a { font-family: var(--font-serif); text-transform: none; letter-spacing: 0.01em; }
/* Einleitungssatz vor Aufzählungen in der Spectral [Frauke Brinkmann 31.10.2026] */
.text-block--prose > .body1.intro-serif { font-family: var(--font-serif); font-style: italic; }
/* Ohne Nummern und türkise Striche [Frauke Brinkmann 31.10.2026] */
.case__row { display: block; }
.case__row::before { content: none; }
/* Die sechs Architecture Case Studies wie auf Integrity Architecture: Nummer 3.1–3.6, türkiser Strich, Rubrik [Frauke Brinkmann 31.10.2026] */
.cases--numbered .case__row { display: grid; }
.cases--numbered .case__row::before { content: ""; }
@media (min-width: 64rem) {
  .cases__list.cases--numbered { grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 1fr; }
  .cases--numbered .case:nth-child(3n) { border-bottom: 0; }
  .cases--numbered .case:nth-child(5) { border-bottom: 1px solid var(--color-line); }
}
/* Menü ohne Kapitelpunkte, nur Mail, LinkedIn und Rechtliches [Frauke Brinkmann 31.10.2026] */
.menu-overlay > ul:not(:has(li)) { display: none; }
/* Drei Dimensionen von Shared Reality als Kacheln [Frauke Brinkmann 31.10.2026] */
.tiles--dimensions { margin-bottom: 0; list-style: none; }
.tiles--dimensions .tile__title, .tiles--dimensions .tile__text { margin: 0; }
.band > .container.tiles + .text-block { margin-top: var(--gap-title); }
.band > .text-block + .container.tiles { margin-top: var(--gap-title); }
/* ── Kapiteleingänge nach Entwurf von Frauke Brinkmann (31.10.2026):
   große Nummer in der Special Gothic, Titel, Unterzeile in der Spectral, dann die Themenzeile ── */
.chapter-num { font-family: var(--font-display); font-size: var(--text-banner); line-height: 1; letter-spacing: 0.02em; }
.text-block > .chapter-num + .chapter-title { margin-top: var(--gap-title); }
.text-block > .chapter-title + .chapter-sub { margin-top: 0.5rem; font-family: var(--font-serif); font-size: var(--text-body2); line-height: 1.5; }
.text-block > .chapter-sub + .text-caps { margin-top: calc(2 * var(--gap-title)); font-size: var(--text-body1); font-weight: 400; }
.text-block > .chapter-sub + .text-caps + .lead-serif,
.text-block > .chapter-sub + .text-caps + .body2 { margin-top: calc(2 * var(--gap-title)); }
.h6.chapter-title { font-weight: 400; }   /* kräftiger als die Abschnittstitel, wie im Entwurf */
/* Zwischenfarbe, wenn Weiß auf Weiß folgen würde: #F6F2F1 statt Ivory [Frauke Brinkmann 31.10.2026] */
:root { --portfolio-band-between: #f6f2f1; }
.band--ivory { --band-bg: var(--portfolio-band-between); }
/* Shared-Reality-Vorschau: Bild mit milchigem Schleier, Button in der Mitte.
   Hover/Fokus: Schleier wird klarer, Button kräftiger [Frauke Brinkmann 31.10.2026] */
.container.showcase { max-width: none; padding-inline: var(--col-start) 6%; }
@media (max-width: 48rem) { .container.showcase { padding-inline: var(--gutter); } }
.showcase__frame { position: relative; margin: 0; overflow: hidden; border-radius: 0.5625rem; box-shadow: 1px 2px 3px rgb(31 20 33 / 0.12); }
.showcase__frame img { display: block; width: 100%; height: auto; }
/* Kein milchiger Schleier mehr; beim Hover zoomt das Bild leicht [Frauke Brinkmann 31.10.2026] */

.showcase__frame img { transition: transform 0.6s ease; }
.showcase__frame:is(:hover, :focus-within) img { transform: scale(1.02); }
/* Button unten rechts, 24 px Abstand, mit Pfeil nach rechts [Frauke Brinkmann 31.10.2026] */
.showcase__button { position: absolute; right: 24px; bottom: 24px; gap: 0.6em; padding-right: 1.4em; background: var(--color-white); transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.showcase__arrow { flex: none; transition: transform 0.25s ease; }
.showcase__frame:is(:hover, :focus-within) .showcase__arrow { transform: translateX(0.2em); }
@media (max-width: 30rem) { .showcase__button { right: 12px; bottom: 12px; } }
.showcase__frame:is(:hover, :focus-within) .showcase__button { background: var(--color-white); box-shadow: 2px 4px 12px rgb(31 20 33 / 0.22); }
/* ganze Bildfläche klickbar */
.showcase__frame .showcase__button::before { content: ""; position: absolute; inset: -100vmax; }
@media (prefers-reduced-motion: reduce) { .showcase__frame img, .showcase__button, .showcase__arrow { transition: none; transform: none; } }
/* Menü-Hintergrund im neuen Grau (color-fog #EFEFEF) [Frauke Brinkmann 31.10.2026] */
.menu-overlay { background: var(--color-white); }   /* deckend weiß (vorher #EFEFEF) [Frauke Brinkmann 31.10.2026] */

/* Menü-Symbol: drei Punkte senkrecht, Kreis wie bei Integrity Architecture; kein Header [Frauke Brinkmann 31.10.2026] */
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { width: 5px; height: 5px; border-radius: 50%; }
.menu-toggle span::before { top: -9px; left: 0; }
.menu-toggle span::after { top: 9px; left: 0; }
.menu-toggle[aria-expanded="true"] span::before,
.menu-toggle[aria-expanded="true"] span::after { width: 1.375rem; height: 1.5px; border-radius: 0; top: 2px; left: -8.5px; }
.menu-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* Kapitelname hochkant am rechten Rand, mittig in jedem Abschnitt, halb so groß wie der Fließtext [Frauke Brinkmann 31.10.2026]
   Nur Orientierung fürs Auge (die Kapitel haben echte Überschriften), daher für Screenreader stumm. */
.band[data-chapter] { position: relative; }
.band[data-chapter]::after {
  content: attr(data-chapter) / "";
  position: absolute; top: 50%; right: calc(var(--gutter) / 2); transform: translate(50%, -50%);
  writing-mode: vertical-rl;
  font-size: max(0.625rem, calc(var(--text-body2) / 2)); font-weight: var(--weight-light);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; line-height: 1;
  color: var(--color-text); pointer-events: none;
}
/* Auf dem Handy ist der Rand zu schmal, dort entfällt die Angabe */
@media (max-width: 47.99rem) { .band[data-chapter]::after { content: none; } }
@media (min-width: 48rem) { .band[data-chapter]::after { right: 1.5rem; } }

/* Gelbliches Beige wie hinter „Publications“ auf Integrity Architecture (#F8F8F5, color-ivory) [Frauke Brinkmann 31.10.2026] */
.band--publications { --band-bg: var(--color-ivory); }

/* Überleitungssatz auf Desktop in einer Zeile [Frauke Brinkmann 31.10.2026] */
@media (min-width: 75rem) {
  .text-block .text-oneline { max-width: none; white-space: nowrap; }
  .text-block:has(> .text-oneline) { max-width: none; }
}

/* Themenzeilen: auf breiten Bildschirmen zwei Begriffe pro Zeile (Zeile darf breiter als der Textblock sein),
   darunter normaler Fluss mit Mittelpunkt zwischen allen Begriffen [Frauke Brinkmann 31.10.2026] */
@media (min-width: 85rem) {
  .text-block > .text-caps { width: max-content; max-width: 80vw; }
  .text-caps__break { display: block; height: 0; overflow: hidden; }
}

/* Button zu den Case Studies auf Integrity Architecture [Frauke Brinkmann 31.10.2026] */
/* Button unten rechts wie die Teaser-Abschnitte auf Integrity Architecture [Frauke Brinkmann 31.10.2026] */
.band > .action { display: flex; justify-content: flex-end; padding: var(--gap-heading) clamp(1.25rem, 3.4vw, 3.6rem) 0; }
/* Linien-Icons in den Kacheln, Akzentfarbe [Vorschlag 31.10.2026] */
.tile__icon { display: block; color: var(--color-accent); margin-bottom: 0.75rem; }

/* Menü nach Frauke Brinkmanns Beispiel (31.10.2026): große Nummer in der Special Gothic, darunter das Kapitel in der Spectral,
   feine Linie unter jedem Eintrag; Hover: Schrift in der Akzentfarbe (dunkles Altrosa #C57272); aktives Kapitel: Nummer unterstrichen */
.menu-overlay > ul:first-child { display: grid; justify-items: center; }
.menu-overlay > ul:first-child li { width: min(28rem, 100% - 2 * var(--gutter)); border-bottom: 1px solid var(--color-text); }
.menu-overlay > ul:first-child a {
  display: grid; justify-items: center; gap: 0.6em;
  padding: clamp(0.5rem, 1.6vh, 1.1rem) 0;
  background: none; color: var(--color-text);
}
.menu-overlay .menu-num { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vh, 2.75rem); line-height: 1; letter-spacing: 0.02em; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
.menu-overlay .menu-label { font-size: var(--text-body1); line-height: 1.3; }
.menu-overlay > ul:first-child a:is(:hover, :focus-visible) { background: none; color: var(--color-accent); }
.menu-overlay > ul:first-child a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.menu-overlay > ul:first-child a[aria-current] { text-decoration: none; }
.menu-overlay > ul:first-child a[aria-current] :is(.menu-num, .menu-label) { text-decoration-line: underline; }
.menu-overlay .menu-label { text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* Fußzeile kompakter: weniger Luft oben/unten und zwischen den Rechtslinks [Frauke Brinkmann 31.10.2026] */
.site-footer { padding-block: var(--space-6); }
.site-footer__grid { gap: var(--space-3); }
.site-footer__links { column-gap: 2rem; }
/* Architecture Case Studies als Mail-Anfrage wie auf Integrity Architecture [Frauke Brinkmann 31.10.2026] */
.cases--numbered .case__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* Abschnitt mit Button unten rechts: Abstand unten wie bei den Teasern auf Integrity Architecture (28px) [Frauke Brinkmann 31.10.2026] */
.band:has(> .action) { padding-bottom: 1.75rem; }

/* Klick im Menü: Puls in Grau #E6E6E6 statt Schwarz, Schrift bleibt dunkel [Frauke Brinkmann 31.10.2026] */
.menu-overlay a.is-pulsing { animation-name: menu-pulse-grey; }
@keyframes menu-pulse-grey {
  0% { background: transparent; }
  35% { background: var(--color-grey); color: var(--color-ink); transform: scale(1.03); }
  100% { background: var(--color-grey); color: var(--color-ink); transform: scale(1); }
}
/* Kapitel 02: Themenzeile auf Desktop nur halb so breit [Frauke Brinkmann 31.10.2026] */
@media (min-width: 48.01rem) { .text-block > .text-caps.text-caps--half { max-width: 50vw; } }
/* Kapitel 04: Fähigkeiten untereinander, je ein Linien-Icon im Kreis davor [Frauke Brinkmann 31.10.2026] */
.cases--icons .case__row { display: flex; align-items: center; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); }
.case__icon { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); }
.case__icon svg { width: 1.75rem; height: 1.75rem; }
@media (min-width: 64rem) {
  .cases__list.cases--icons { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .cases--icons .case { border-bottom: 1px solid var(--color-line); }
  .cases--icons .case:last-child { border-bottom: 0; }
}
/* Nachweise („Karteikarte“) im Stil der Diagramme von Frauke Brinkmann: helle Fläche, weiße Karten mit
   asymmetrisch gerundeten Ecken, Icon-Kreise in den hellen Markentönen, Titel in Special Gothic, Erklärung in Spectral [31.10.2026] */
.container.proof-wrap { max-width: none; padding-inline: var(--col-start) 10%; margin-top: var(--gap-block); }
@media (max-width: 48rem) { .container.proof-wrap { padding-inline: var(--gutter); } }
.proof-board { background: var(--color-paper); border-radius: 0.375rem; padding: clamp(2rem, 1.2rem + 3vw, 3.75rem) clamp(1.25rem, 0.5rem + 3vw, 3.5rem); text-align: center; }
.proof-board__title { margin: 0; font-size: var(--text-body1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.proof-board__sub { margin: 0.5rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--text-body2); }
.proof-board__list { list-style: none; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; padding: 0; display: grid; gap: clamp(2.75rem, 2rem + 2vw, 3.5rem) clamp(1rem, 0.5rem + 1.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .proof-board__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .proof-board__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof { position: relative; display: grid; justify-items: center; align-content: start; }
.proof__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: -1.75rem; border-radius: 50%; background: var(--proof-tint, var(--color-rosa-soft)); color: var(--color-ink); box-shadow: 0 0 0 4px var(--color-paper); }
.proof__icon svg { width: 1.6rem; height: 1.6rem; }
.proof--1 { --proof-tint: var(--color-rosa-soft); }
.proof--2 { --proof-tint: var(--color-plum-soft); }
.proof--3 { --proof-tint: var(--color-mint); }
.proof--4 { --proof-tint: var(--color-orchid-soft); }
.proof--5 { --proof-tint: var(--color-ocean-soft); }
.proof--6 { --proof-tint: var(--color-sage-soft); }
.proof--7 { --proof-tint: var(--color-amber-soft); }
.proof--8 { --proof-tint: var(--color-gold-soft); }
.proof--9 { --proof-tint: var(--color-rosewood-soft); }
.proof__card { box-sizing: border-box; width: 100%; min-height: 10.5rem; display: grid; align-content: center; justify-items: center; gap: 0.5rem; padding: 2.5rem 1.25rem 1.5rem; background: var(--color-white); border-radius: 0.375rem 2.25rem 0.375rem 2.25rem; box-shadow: 1px 3px 6px rgb(31 20 33 / 0.12); }
.proof__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem); line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; }
.proof__title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.proof__title a:hover { color: var(--color-accent); }
.proof__context { font-size: 0.875rem; letter-spacing: 0.04em; }
.proof__card .entry__badge.soon { margin: 0; font-size: 0.8125rem; }
.proof__text { max-width: 22em; margin: 1.1rem 0 0; font-family: var(--font-serif); font-size: var(--text-body2); line-height: 1.6; letter-spacing: 0.02em; }
/* Nachweise als eigener Abschnitt in der Hintergrundfarbe der Diagramme [Frauke Brinkmann 31.10.2026] */
.band--proof .container.proof-wrap { margin-top: 0; }
.band--proof .proof-board { background: none; padding-inline: 0; }
.band--proof .proof__icon { box-shadow: 0 0 0 4px var(--band-bg); }
/* Fußzeile im Zitat-Rosa von Integrity Architecture #F6EBE8, rechts „Say Hello“ wie auf Integrity Architecture [Frauke Brinkmann 31.10.2026] */
.site-footer { background: var(--band-blush); }
.site-footer a.site-footer__hello, .site-footer a.site-footer__hello:hover { color: var(--color-white); }
/* Vorschaubilder: leicht dunkleres Ink-Overlay beim Überfahren, damit klar ist, dass sie klickbar sind [Frauke Brinkmann 31.10.2026] */
.showcase__frame::after { content: ""; position: absolute; inset: 0; background: rgb(31 20 33 / 0); pointer-events: none; transition: background-color 0.35s ease; }
.showcase__frame:is(:hover, :focus-within)::after { background: rgb(31 20 33 / 0.14); }
.showcase__button { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .showcase__frame::after { transition: none; } }
/* Drei Dimensionen wie Frauke Brinkmanns Kartenvorlage (Bild 31.10.2026), in Altrosa:
   feine Kontur, große Rundung, Nummernkreis oben rechts mit Ring und Schatten, Titel Special Gothic, Text Spectral */
.container.tiles.tiles--dimensions { --dim-line: color-mix(in srgb, var(--color-rosewood) 35%, white); --dim-fill: color-mix(in srgb, var(--color-rosewood) 28%, white); padding-top: 1rem; gap: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.tiles--dimensions .tile { position: relative; gap: 1.1rem; padding: clamp(3.75rem, 3.25rem + 1.5vw, 4.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(2rem, 1.5rem + 1.5vw, 3rem); border: 2px solid var(--dim-line); border-radius: 1.75rem; box-shadow: none; background: var(--color-white); }
.tiles--dimensions .tile__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem); letter-spacing: 0.08em; line-height: 1.25; }
.tiles--dimensions .tile__text { font-family: var(--font-serif); letter-spacing: 0.02em; }
.tiles--dimensions .tile__badge { position: absolute; top: -0.5rem; right: -0.5rem; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border: 2px solid var(--dim-line); border-radius: 50%; background: var(--color-white); color: var(--color-accent); }
/* Übergang und vier Fähigkeiten passend zu den Dimensionskacheln, nach Frauke Brinkmanns Diagramm (Kreis-Pfeile, gepunktete Linien, Karten mit Linie unter dem Titel) [31.10.2026] */
.band > .container.tiles.dim-arrows { margin-top: 1.5rem; gap: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); color: var(--color-accent); }
.dim-arrows span { display: flex; justify-content: center; }
.band > .container.dim-bridge { max-width: none; margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); padding-inline: var(--col-start) 10%; display: flex; align-items: center; gap: 1.5rem; }
.container.dim-bridge::before, .container.dim-bridge::after { content: ""; flex: 1 1 3rem; border-top: 2px dotted color-mix(in srgb, var(--color-rosewood) 55%, white); }
.dim-bridge__text { flex: 0 1 auto; max-width: 40em; margin: 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: var(--text-body1); line-height: 1.6; }
.band > .container.dim-bridge + .container.cases { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.container.cases.cases--cards-wrap { padding-inline: var(--col-start) 10%; }
.cases__list.cases--cards { display: grid; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: clamp(1.75rem, 1rem + 2vw, 3rem) clamp(2.5rem, 1.5rem + 2.5vw, 4rem); margin-top: 0; }
@media (min-width: 64rem) { .cases__list.cases--cards { grid-template-columns: 1fr 1fr; } }
.cases__list.cases--cards .case:nth-child(n):nth-last-child(n) { border: 2px solid color-mix(in srgb, var(--color-rosewood) 35%, white); border-radius: 1.75rem; background: var(--color-white); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.cases--cards .case__row { padding: 0; }
.cases--cards .case__kicker { color: var(--color-text); } /* Textfarbe statt Rosé [Frauke Brinkmann 31.10.2026] */
.cases--cards .case__title { display: block; margin-top: 0.4rem; padding-bottom: 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--color-rosewood) 35%, white); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.cases--cards .case__meta { margin-top: 1rem; font-family: var(--font-serif); font-size: var(--text-body2); letter-spacing: 0.02em; line-height: 1.6; }
.cases--cards .case__body { max-width: none; }
@media (max-width: 48rem) {
  .container.tiles.dim-arrows { display: none; }
  .container.dim-bridge, .container.cases.cases--cards-wrap { padding-inline: var(--gutter); }
  .container.dim-bridge::before, .container.dim-bridge::after { display: none; }
  .band > .container.dim-bridge { margin-top: 2.5rem; }
}
/* LinkedIn als runder Icon-Button im Schokobraun wie „Say Hello“; beide nebeneinander über dem Text [Frauke Brinkmann 31.10.2026] */
.site-footer__grid { grid-template-columns: auto auto 1fr; align-items: center; column-gap: 0.75rem; }
.site-footer__grid > div, .site-footer__links { grid-column: 1 / -1; }
.site-footer .icon-link { grid-row: 2; grid-column: 1; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--color-button-dark); color: var(--color-white); transition: background-color 0.25s ease; }
.site-footer .icon-link svg { width: 1.25rem; height: 1.25rem; }
.site-footer .icon-link:hover { background: var(--color-ink); color: var(--color-white); }
.site-footer__hello { grid-row: 2; grid-column: 2; justify-self: start; }
.site-footer__grid > div { grid-row: 1; }
.site-footer__links { grid-row: 3; }
.site-footer .icon-link, .site-footer__hello { margin-block: 0.5rem; }
/* Name in der Fußzeile wie die Publications-Überschrift auf Integrity Architecture (Body1 20px, Versalien, 0.06em) [Frauke Brinkmann 31.10.2026] */
.site-footer__name { margin-bottom: 0.3rem; line-height: 1.5; font-size: var(--text-body1); font-weight: var(--weight-light); letter-spacing: 0.06em; text-transform: uppercase; }
/* Menü: Trennlinien dünner und im Silbergrau #DDDDDD [Frauke Brinkmann 31.10.2026] */
.menu-overlay > ul:first-child li { border-bottom: 0.5px solid var(--band-silver); }
/* Rechtslinks im Footer so klein wie im Menü (15px, Spectral, Abstand 1.5rem) [Frauke Brinkmann 31.10.2026] */
.site-footer__links { column-gap: 1.5rem; }
.site-footer__links a { font-family: var(--font-serif); font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1.4; }
/* Die vier Karten: ohne Rahmenlinie, gefüllt in #F6F2F1, Eckenradius 4px [Frauke Brinkmann 31.10.2026] */
.cases__list.cases--cards .case:nth-child(n):nth-last-child(n) { border: 0; border-radius: 4px; background: var(--portfolio-band-between); }
/* Seitenhintergrund weiß statt #F9F7F6 [Frauke Brinkmann 31.10.2026] */
body { background: var(--color-white); }
/* Hintergrund wie bei den Diagrammen (#F9F7F6), ohne die Diagramm-Containerbreite [Frauke Brinkmann 31.10.2026] */
.band.band--diagram-tone { --band-bg: var(--band-diagram); }
/* Drei Dimensionen (Kapitel 01) als Kacheln wie die vier Karten, aber weiß mit weichem Schatten; ab 64rem drei nebeneinander [Frauke Brinkmann 31.10.2026] */
.cases__list.cases--cards.cases--white .case:nth-child(n):nth-last-child(n) { background: var(--color-white); box-shadow: var(--shadow-card); }
@media (min-width: 64rem) { .cases__list.cases--cards.cases--white { grid-template-columns: repeat(3, 1fr); } }
.band > .container.text-block + .container.cases.cases--cards-wrap { margin-top: var(--gap-title); }
/* Kapitel 04 und 05 (soon): leicht grau-weiß diagonal schraffiert [Frauke Brinkmann 31.10.2026] */
#experience-cases.band, #one-shared-reality.band { background: repeating-linear-gradient(135deg, var(--color-white) 0 14px, #f9f9f9 14px 28px); }
/* Name im Footer in der Schriftgröße des Menüs von Integrity Architecture (26px, Laufweite wie H6) [Frauke Brinkmann 31.10.2026] */
.site-footer__name { font-size: var(--text-statement); letter-spacing: var(--tracking-h6); line-height: var(--leading-title); margin-bottom: 0.6rem; }
/* Drei Dimensionen: Titel wie der Name im Footer (Public Sans 26px, Versalien), keine Trennlinie, Text in der Fließtextschrift [Frauke Brinkmann 31.10.2026] */
@media (min-width: 64rem) { .cases__list.cases--cards.cases--white { grid-template-columns: repeat(3, 1fr); } } /* doch drei nebeneinander [Frauke Brinkmann 31.10.2026] */
.cases--cards.cases--white .case__title { margin-top: 0; padding-bottom: 0; border-bottom: 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-statement); letter-spacing: var(--tracking-h6); line-height: var(--leading-title); }
.cases--cards.cases--white .case__meta { margin-top: 0.75rem; font-family: var(--font-body); font-size: var(--text-body2); font-weight: var(--weight-light); letter-spacing: normal; line-height: var(--leading-body); }
.cases__list.cases--cards.cases--white { row-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem); }
/* Footer: LinkedIn und Say Hello unter die Rechtslinks [Frauke Brinkmann 31.10.2026] */
.site-footer__links { grid-row: 2; }
.site-footer .icon-link, .site-footer__hello { grid-row: 3; }
.site-footer__name { margin-bottom: 1.25rem; } /* mehr Abstand unter dem Namen (vorher 0.6rem) [Frauke Brinkmann 31.10.2026] */
/* soon-Hinweise auch im Menü (Kapitel 04 und 05) [Frauke Brinkmann 01.11.2026] */
.menu-overlay .menu-label .entry__badge { margin-left: 0.4em; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.06em; vertical-align: 0.15em; }

/* Kontextzeile in kleiner Schrift unter der Einleitung der Case Studies [FESTLEGUNG Frauke Brinkmann 01.11.2026] */
.text-block > .context-line { margin-top: var(--gap-title); font-size: 0.875rem; letter-spacing: 0.04em; line-height: 1.7; }
/* Kontextzeile: etwas weniger Abstand zur Case-Studies-Linie, nicht eingerückt [FESTLEGUNG Frauke Brinkmann 01.11.2026] */
.text-block:has(> .context-line) + .xcases { margin-top: calc(var(--gap-block) * 0.6); }
/* Perspectives & Publications: kompakter Teaser mit Button zu Medium [FESTLEGUNG 01.11.2026] */
#publications .text-block > .h6 + .lead-serif { margin-top: var(--gap-title); }
#publications.band--action { min-height: clamp(26rem, 38vw, 38rem); } /* höher, mehr Luft zwischen Text und Button [Frauke Brinkmann 01.11.2026] */

/* LinkedIn und Say Hello unter der Fußzeile, zentriert auf Weiß; Schokolade wie zuvor [Frauke Brinkmann 01.11.2026] */
.site-footer { padding-bottom: 0; }
.site-footer__grid { padding-bottom: var(--space-6); }
.site-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; padding-block: var(--space-5); background: var(--color-white); }
.site-footer .site-footer__actions .icon-link { grid-row: auto; margin: 0; }
.site-footer .site-footer__actions .site-footer__hello { grid-row: auto; margin: 0; }