/* ══════════════════════════════════════════════════════════════════════════
   mindbastion — Seitengrammatik (Layout-Ebene)

   css/styles.css  = das Design-System (Tokens + Komponentenklassen).
                     Unveraendert aus legacy/ uebernommen, wird hier NICHT
                     angefasst.
   css/site.css    = diese Datei. Sie loest die Inline-Styles auf, die auf den
                     Legacy-Seiten in jedem style-Attribut wiederholt standen:
                     Sektionsrhythmus, Typo-Rollen, Raster, Nav, Footer.

   Jede Regel ist 1:1 aus den bestehenden Seiten extrahiert. Belegstellen:
   GL-003 §3 (Typo), §4 (Spacing/Grid), §8 (Layout- und Komponentenmuster).
   Reihenfolge im <head>: styles.css zuerst, site.css danach — site.css
   ueberschreibt bewusst .nav aus dem System.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Seitenbasis (stand vorher im <style>-Block jeder Seite) ────────────── */
body { margin: 0; text-wrap: pretty; }
/* Linkfarben stehen jetzt in styles.css (GL-003 §2.1.1):
   Ruhe --color-accent-700, Hover --color-accent-800. Der fruehere Override
   auf -600 im Hover war mit 3.80:1 schlechter als der Ruhezustand. */
html { scroll-behavior: smooth; }
/* Der Offset haelt das Sprungziel unter der klebenden Leiste. 96 px stammen
   aus dem Legacy-Stand mit einer 61 px hohen Leiste; seit der Ausbau auf neun
   Eintraege sie bei schmalen Fenstern umbrechen laesst, ist sie dort 101 px
   (ab 375 px) bzw. 131 px (bis 360 px) hoch — gemessen. Der alte Wert liess
   das Sektionslabel bei 320 px drei Pixel hinter der Leiste verschwinden
   (Vera, G-1). Grosszuegig gerundet, ein zu grosser Offset kostet nichts. */
[id] { scroll-margin-top: 96px; }
@media (max-width: 767px) { [id] { scroll-margin-top: 140px; } }

/* ── Bewegung (GL-003 §8.6) ────────────────────────────────────────────────
   Die Hover-Uebergaenge. Der Scroll-Reveal liegt in js/effects.js und steigt
   bei prefers-reduced-motion VOR dem Setzen von opacity:0 aus — beide Wege
   sind noetig, sonst bleiben Inhalte unsichtbar. */
.blueprint,
.blueprint > .corner {
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.blueprint:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
a.blueprint:hover > .corner { color: var(--color-accent); }
.duotone::after { transition: opacity .4s ease; }
.duotone:hover::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blueprint,
  .blueprint > .corner,
  .duotone::after { transition: none; }
}

/* ── Container (GL-003 §4.2) ───────────────────────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
/* main.container bekommt beim Sprung den Fokus (tabindex="-1"). Der Ring
   waere eine 1160px breite Umrandung ohne Informationswert — der sichtbare
   Zielnachweis ist der Scroll plus der Fokusring des naechsten Tabhalts. */
main.container:focus { outline: none; }

/* ── Sprungmarke (WCAG 2.4.1) ──────────────────────────────────────────── */
/* Setzt nur Position und Sichtbarkeit. Farbe, Rahmen, Typografie und die
   Zustaende kommen unveraendert aus .btn/.btn-primary (GL-003 §8.4) —
   deshalb gibt es hier keinen einzigen Farbwert.
   Nicht display:none und nicht visibility:hidden: beide nehmen das Element
   aus der Tabfolge, dann waere der Link nie erreichbar. */
.skip-link {
  position: fixed;
  left: clamp(20px, 4vw, 48px);
  top: 0;
  z-index: 100;            /* ueber der Sticky-Nav (z-index: 50) */
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus-visible {
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ── Navigation (GL-003 §4.2, §7.1) ────────────────────────────────────────
   Ueberschreibt .nav aus styles.css (dort padding/space-Tokens, border:none). */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  flex-wrap: wrap;
  row-gap: 8px;
  border-bottom: 1px solid var(--color-divider);
  padding: 14px clamp(20px, 4vw, 48px);
}
.nav-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.nav-lockup img { height: 32px; width: auto; }
.nav .nav-brand {
  margin-right: 0;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav .btn { white-space: nowrap; }

/* ── Navigationsgruppe „Branchen" (Entscheidung 19.09.2026, WS-007 Phase 4) ──
   Natives <details>/<summary>. Kein Menu-Pattern, kein ARIA-Nachbau: Rolle,
   Zustand und Tastaturbedienung kommen vom Browser. Diese Regeln setzen
   ausschliesslich Position, Flaeche und Rahmen — Farbe und Groesse der
   Beschriftung folgen den Navlink-Regeln aus styles.css (GL-003 §0.1 R1).
   Kein neues Token: Flaeche --color-bg, Rahmen --color-divider, Tiefe
   --shadow-md (dieselbe Elevation wie die gehoverte Blueprint-Karte, §2.5). */
.nav-group { position: relative; }
.nav-group-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  list-style: none;                 /* Standarddreieck des Browsers */
  -webkit-user-select: none;
  user-select: none;
}
.nav-group-head::-webkit-details-marker { display: none; }
/* Zustandsmarke: rein dekorativ, die Beschriftung traegt die Bedeutung.
   Faerbt sich ueber currentColor mit, hat also nie einen eigenen Farbwert. */
.nav-group-head::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-group[open] > .nav-group-head::after { transform: translateY(1px) rotate(225deg); }
/* aria-current steht auf dem Schaltpunkt, wenn eine Branchenseite offen ist.
   Es war bis zum QA-Gate ein data-Attribut und damit ein reiner CSS-Haken:
   Der eigentliche aria-current="page" sitzt am Panel-Link, und der liegt im
   geschlossenen <details> ausserhalb des Zugaenglichkeitsbaums — auf genau
   den fuenf Seiten mit bezahltem Traffic meldete die Navigation gar nichts
   mehr (Vera, M-1; WCAG 1.3.1 und 1.4.1). aria-current ist ein globales
   ARIA-Attribut und an <summary> zulaessig. */
.nav-group-head:hover,
.nav-group-head[aria-current] { color: var(--color-accent-700); }
.nav-group-panel {
  position: absolute;
  top: calc(100% + 11px);           /* 11px = Nav-Padding unten + Trennlinie */
  left: -14px;
  z-index: 60;                      /* ueber der Sticky-Nav (50) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: max-content;
  padding: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
/* Schmale Ansicht: die Gruppe gibt ihren Positionierungskontext ab, das Feld
   spannt zwischen den Innenraendern der Leiste. Damit kann es unabhaengig
   davon, wo der Schaltpunkt gerade umgebrochen ist, nicht ueberlaufen. */
@media (max-width: 560px) {
  .nav-group { position: static; }
  .nav-group-panel {
    left: clamp(20px, 4vw, 48px);
    right: clamp(20px, 4vw, 48px);
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-group-head::after { transition: none; }
}

/* ── Footer (GL-003 §4.2, §8.5) ────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-divider);
  margin-top: 48px;
  padding: 32px clamp(20px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: baseline;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.site-footer .footer-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-footer .footer-pledge { margin-left: auto; }

/* ── Sektionsrhythmus (GL-003 §4.2) ────────────────────────────────────── */
.section          { padding: clamp(32px, 5vw, 56px) 0; }           /* Grundtakt */
.section-hero     { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 64px); }
.section-hero-sub { padding: clamp(48px, 8vw, 88px) 0 clamp(32px, 5vw, 48px); }
.section-cta      { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); }
.section-utility  { padding: clamp(56px, 10vw, 120px) 0; }

/* ── Sektionskopf: Label → Trennlinie (GL-003 §8.1) ─────────────────────── */
/* Vollstaendig deklariert, nichts geerbt (GL-003 §3.3). Das ist keine
   Kosmetik: sobald das Label nach §8.1 eine <h2> ist, greift die Basisregel
   h1-h6 aus styles.css und zieht --font-heading, line-height 1.12 und
   letter-spacing -0.015em mit. Faehlt hier ein Wert, aendert der Umbau von
   <span> auf <h2> das Aussehen, ohne dass jemand das entschieden haette. */
.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 10px;
}
/* Der Abstand unter der Linie kodiert, was folgt (GL-003 §8.1). */
.rule { height: 1px; border: 0; background: var(--color-divider); margin: 0 0 24px; }
.rule--to-heading   { margin-bottom: 18px; }
.rule--to-text      { margin-bottom: 24px; }
.rule--to-grid      { margin-bottom: 32px; }
.rule--to-grid-wide { margin-bottom: 36px; }

/* ── Ueberschriften-Skala (GL-003 §3.2) ─────────────────────────────────── */
.h-page,
.h-page-sub,
.h-page-utility,
.h-section,
.h-cta { text-transform: uppercase; letter-spacing: 0.01em; }

.h-page         { font-size: clamp(46px, 6.5vw, 84px); line-height: 1.04; margin: 0 0 24px; margin-left: -0.05em; }
.h-page-sub     { font-size: clamp(38px, 5.5vw, 68px); line-height: 1.05; margin: 0 0 20px; margin-left: -0.05em; max-width: 22ch; }
.h-page-utility { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08; margin: 0 0 16px; }
.h-section      { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin: 0 0 16px; }
.h-cta          { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin: 0 0 12px; }

/* Karten- und Kachelueberschriften.
   Jede Klasse mit text-transform: uppercase setzt letter-spacing selbst
   (GL-003 §3.4). Die Basis h1-h6 traegt -0.015em, einen Gemischtsatzwert —
   fuer Versalien in Barlow Condensed der ungueltige Fall. */
.h-card     { font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 12px; }
.h-card-sm  { font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 10px; }
.h-step     { font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 10px; }
.h-tile     { font-size: 20px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 8px; }
.h-tile-sm  { font-size: 18px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 8px; }
.h-block    { font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.h-legal    { font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 10px; }

/* Titelzeile innerhalb einer Blueprint-Karte — Headline-Schrift ohne Versalien */
.card-title-lg { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 1.15; }
.card-title-md { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.2; }

/* ── Fliesstext-Rollen (GL-003 §3.2) ───────────────────────────────────── */
.lead { font-size: 18px; line-height: 1.6; max-width: 60ch; margin: 0 0 28px; }
.lead:last-child { margin-bottom: 0; }

.body-text { font-size: 16px; line-height: 1.65; max-width: 56ch; margin: 0 0 12px; }
.body-text:last-child { margin-bottom: 0; }

.card-text { font-size: 15px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.tile-text { font-size: 14px; line-height: 1.55; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.note      { font-size: 15px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.footnote  { font-size: 12.5px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.caption   { font-size: 13.5px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* Textbreiten (GL-003 §3.4 — kein Absatz laeuft ueber die volle Breite) */
.measure-38 { max-width: 38ch; }
.measure-56 { max-width: 56ch; }
.measure-58 { max-width: 58ch; }
.measure-60 { max-width: 60ch; }
.measure-64 { max-width: 64ch; }
.measure-70 { max-width: 70ch; }

/* ── Kapitaelchen-Rollen (GL-003 §3.3) ─────────────────────────────────── */
.card-label,
.role-label,
.step-label {
  font-weight: 600;
  color: var(--color-accent-700);
}
/* Karten- und Rollen-Label werden typografisch in Versalien gesetzt. */
.card-label { font-family: var(--font-body); font-size: 11px; line-height: 1.55; letter-spacing: 0.1em; text-transform: uppercase; }
.role-label { font-family: var(--font-body); font-size: 12px; line-height: 1.55; letter-spacing: 0.08em; text-transform: uppercase; }
/* Schritt-Label. Bis 18.09.2026 stand der Text in Versalien im Markup und die
   Klasse hatte deshalb kein text-transform — so beschrieb es GL-003 §3.3 und so
   war es im Legacy-Stand. Iris hat den Widerspruch zu §1 zugunsten von §1
   aufgeloest: Versalien entstehen im CSS, nie im Text. Grund ist Zugaenglichkeit,
   nicht Stil — mehrere Screenreader buchstabieren durchgehend grossgeschriebene
   Woerter ("S-C-H-R-I-T-T"), und Kopieren/Suchen/Uebersetzen liefert sonst
   "SCHRITT" statt "Schritt". Visuell identisch. */
.step-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* Quellenzeile am Fuss einer Blueprint-Karte */
.source-line {
  font-size: 12.5px;
  line-height: 1.6;
  border-top: 1px solid var(--color-divider);
  padding-top: 10px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── Raster (GL-003 §4.3) ──────────────────────────────────────────────── */
.grid-hero,
.grid-split,
.grid-cards,
.grid-cards-sm,
.grid-cards-xs,
.grid-tiles,
.grid-tiles-sm,
.grid-form,
.grid-legal { display: grid; }

.grid-hero     { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px clamp(32px, 5vw, 80px); align-items: center; }
.grid-split    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 36px clamp(32px, 5vw, 80px); align-items: center; }
.grid-cards    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(24px, 3vw, 48px); }
.grid-cards-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 48px); }
.grid-cards-xs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3vw, 48px); }
.grid-tiles    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 3vw, 40px); }
.grid-tiles-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.grid-form     { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.grid-legal    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 48px); }

/* ── Kachel mit Akzent-Auftakt (GL-003 §8.5) ───────────────────────────── */
.tile     { border-top: 2px solid var(--color-accent); padding-top: 14px; }
.tile--lg { padding-top: 18px; }

/* Regelwerk-Zeile: Kachel-Auftakt + zweispaltiges Raster (sicherheit-compliance) */
.rule-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px clamp(24px, 4vw, 56px);
  border-top: 2px solid var(--color-accent);
  padding-top: 18px;
}
.rule-block h3 { font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 6px; }
.rule-block .rule-block-meta { font-size: 14px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
/* grid-column: 1 / -1 statt span 2 (QA-Gate, Ueberlauf 324 px): das auto-fit-Raster
   erzeugt bei 320 px nur EINE Spur, span 2 erzwang eine zweite, implizite Spalte.
   1 / -1 spannt ueber den gesamten expliziten Grid, egal wie viele Spuren entstehen —
   genau das war die Absicht. min-width war nicht die Ursache, gegengetestet. */
.rule-block .rule-block-text { font-size: 15px; line-height: 1.65; margin: 0; grid-column: 1 / -1; min-width: min(100%, 280px); }
.rule-stack { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }

/* ── Buttons (GL-003 §8.4) — Groessen-Overrides auf Seitenebene ────────── */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-lg  { font-size: 16px; padding: 10px 20px; }
.btn-xl  { font-size: 16px; padding: 12px 24px; }

/* ── Schluss-CTA-Block (GL-003 §8.2/§8.4) ──────────────────────────────── */
.cta-block {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(32px, 5vw, 64px);
  align-items: center;
  justify-content: space-between;
}
.cta-block-text { max-width: 60ch; }
.cta-block-text p { font-size: 16px; line-height: 1.6; margin: 0; }

/* ── Blueprint-Karten: belegte Paddings (GL-003 §8.2) ──────────────────── */
.bp-quote { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }  /* kleine Zitatkarte */
.bp-note  { padding: 20px 22px; }                                                    /* dieselbe Groesse, ohne Flex */
.bp-proof { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }  /* Beleg-/Wissensbaustein-Karte */
.bp-step  { padding: 24px; }
.bp-card  { padding: 28px; }
.bp-tile  { padding: 22px; }
.bp-panel { padding: clamp(28px, 4vw, 48px); max-width: 720px; }
/* Verlinkte Karte — traegt den Hover-Zustand (GL-003 §8.2). */
.bp-link  { display: block; text-decoration: none; color: inherit; }
/* Abschlusszeile einer verlinkten Karte („Mehr fuer … →"). Loest den
   Inline-Style ab, der dafuer bisher auf index.html stand. */
.card-more { display: block; font-size: 14px; font-weight: 600; color: var(--color-accent-700); }

/* ── „Blatt"-Variante: technischer Kopfbalken + Tabelle (GL-003 §8.2) ───── */
.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--color-divider);
}
.sheet-head > span {
  padding: 12px 24px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.sheet-head > span:first-child { flex: 1; min-width: 16ch; }
.sheet-head > span + span {
  border-left: 1px solid var(--color-divider);
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.sheet-table { table-layout: auto; }
.sheet-table td { padding: 12px 24px 12px 0; }
.sheet-table .sheet-no { width: 64px; padding: 12px 0 12px 24px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-700); }
.sheet-table .sheet-label { font-size: 15px; }
.sheet-table .sheet-value { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; white-space: nowrap; }
.sheet-table .sheet-note { font-size: 14px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.sheet-table tr:last-child .sheet-note { border-bottom: 0; }

/* Ueberlauf 386 px bei 320 UND 375 px (QA-Gate Befund 1). Ursache sind drei Regeln
   zusammen: white-space: nowrap auf .sheet-value, die Zellpaddings und die feste
   Breite von .sheet-no — die Min-Content-Breite der vierspaltigen Tabelle liegt bei
   365 px. Unterhalb von 560 px wird das Blatt deshalb gestapelt statt gestaucht:
   das erhaelt den Blatt-Charakter (GL-003 §8.2), waehrend blosses Umbrechen die
   Typografie zusammendrueckt. 375 px ist iPhone SE/8, kein Randgeraet. */
@media (max-width: 560px) {
  .sheet-table,
  .sheet-table tbody,
  .sheet-table tr,
  .sheet-table td { display: block; width: auto; }
  .sheet-table tr { padding: 12px 20px; border-bottom: 1px solid var(--color-divider); }
  .sheet-table td { padding: 2px 0; border: 0; }
  .sheet-table .sheet-no { width: auto; padding: 0; }
  .sheet-table .sheet-value { white-space: normal; }
  .sheet-table tr:last-child { border-bottom: 0; }
}
.sheet-foot {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── Team-Karte (ueber-uns) ────────────────────────────────────────────── */
.person-card { padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.person-portrait { width: 112px; height: 112px; }
.person-portrait img { width: 112px; height: 112px; object-fit: cover; }
.person-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.person-bio { font-size: 14px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* ── Formular (GL-003 §8.5) ────────────────────────────────────────────── */
.contact-form { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
/* Formular ohne Kontaktspalte daneben (Branchen- und Produktseiten). Die
   Breite folgt .bp-panel, damit Feld- und Textzeilen lesbar bleiben. */
.contact-form-solo { max-width: 720px; }
.honeypot { position: absolute; left: -9999px; top: auto; }
/* Einzige Off-Token-Farbe im Projekt — bestehender SSOT-Bruch, GL-003 §9 L2.

   Die Sichtbarkeit haengt seit dem QA-Gate NICHT mehr an JavaScript (Vera,
   B-2). Vorher trug jede Meldung das hidden-Attribut, und entfernt hat es
   ausschliesslich js/formular.js — faellt das Skript aus, sah der Besucher
   nach dem Absenden dieselbe Seite wie vorher, ohne einen einzigen Hinweis.
   Betroffen waren ausgerechnet die beiden Zustaende, die nicht an der
   Browser-Pruefung haengen: die Drosselung und der geklemmte Versand, also
   der Rettungsanker fuer bezahlte Klicks. kontakt.php leitet jetzt auf
   #form-fehler-1|2|3 um; :target zeigt die Meldung ohne eine Zeile Skript,
   und der Browser springt von selbst hin. data-sichtbar ist der Weg fuer den
   Sonderfall, den es ohne Skript nicht gibt: ein unbekannter Code faellt auf
   die erste Meldung zurueck. */
.form-error {
  display: none;
  border: 1px solid #a33d3d;
  padding: 12px 16px;
  color: #7c2d2d;
}
.form-error:target,
.form-error[data-sichtbar] { display: block; }
.form-error p { margin: 0; font-size: 15px; line-height: 1.6; }
.form-error p + p { margin-top: 10px; }
.contact-hint { margin: 0; font-size: 12.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* ── Bildbehandlung (GL-003 §5, §8.3) ──────────────────────────────────── */
.photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
