/* ═══════════════════════════════════════════════════════════════════
   humect group — Entwurf 2026 · "Die goldene Naht"
   Self-contained. Kein Tailwind, keine CDN, keine Google-Fonts.
   Alle Pfade relativ. Cache-Bust über Dateinamen (styles-v1.css).

   Die CI stammt aus der PRIMÄRQUELLE — dem Print-Lockup
   variante-a-humect-group-lockup-ci.svg, dessen eigener Kommentar lautet:
       "CI: humect #1B3A2F / STAFFECT #1C3F60 / Divider #B8956A"
   Gold ist dort buchstäblich der DIVIDER. Es ist keine Akzentfarbe,
   die man irgendwo hinstreut — es ist das Element, das die zwei
   Marken verbindet. Deshalb erscheint es in dieser Seite AUSSCHLIESSLICH
   dort, wo etwas verbunden, getrennt oder überbrückt wird.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts: Geist, self-hosted. Pflicht (nicht Inter, nicht System). ── */
@font-face { font-family:"Geist"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/geist-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/geist-mono-latin-500-normal.woff2") format("woff2"); }

/* Metrisch angepasster Fallback gegen Layout-Shift beim Font-Swap.
   ascent/descent/line-gap = Geists echte Metriken (aus der woff2: 92/22/10 %)
   → die HÖHE ist plattformunabhängig fixiert, kein vertikaler Sprung.
   size-adjust 103.7 % = Geists Laufweite 0.539em gegen Arial/Liberation 0.5197em.
   Gemessen: CLS 0,0443 → 0,0004 (devtools, Median 3×), Falsifikation bestätigt. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("sans-serif");
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 10%;
  size-adjust: 103.7%;
}

:root {
  /* Die drei Marken-Farben, direkt aus dem Lockup-SVG */
  --forest: #1B3A2F;   /* humect GmbH — die Mutter */
  --navy:   #1C3F60;   /* STAFFECT — die Tochter */
  --gold:   #B8956A;   /* der Divider — die Naht */

  /* Gold auf Weiß trägt keinen Fließtext (Kontrast ~2.3:1).
     Für Text auf hellem Grund die abgedunkelte Lesefassung. */
  --gold-ink: #7A5F35;

  --paper:   #FAF7F2;   /* warmes Off-White (SSOT --hh-off-white), Seitengrund */
  --cream:   #F4EDE0;   /* Cream (SSOT --hh-cream): rhythmische Sektionsflächen */
  --surface: #FFFFFF;   /* Karten — Kontrast Karte↔Cream trägt die Wärme */
  --ink:     #1B2A24;   /* Text: forest-gebrochen, nicht schwarz */
  --muted:   #5C6660;
  --line:    #E3E5E1;
  /* Bedienelement-Ränder brauchen ≥3:1 (WCAG 1.4.11). #C3C8C2 ergab nur 1.64:1.
     Bei .reach a / .brand-go ist dieser Rahmen zudem der einzige nicht-farbliche
     Link-Hinweis (WCAG 1.4.1) — er MUSS sichtbar sein. #869084 → 3.20:1 (auf Weiß). */
  --line-strong: #869084;
  /* 🔴 Cream-Varianten: --line-strong #869084 fällt auf Cream #F4EDE0 auf 2.85:1
     (< 3:1, bricht WCAG 1.4.11). Nachgedunkelt: #727C71 → 3.73:1 auf Cream.
     --line (Hairlines) analog nachgedunkelt für den wärmeren Grund. */
  --line-strong-cream: #727C71;
  --line-cream: #DAD3C6;

  --step--1: clamp(.82rem, .80rem + .09vw, .87rem);
  --step-0:  clamp(1rem, .97rem + .17vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.18rem + .36vw, 1.47rem);
  --step-2:  clamp(1.56rem, 1.42rem + .70vw, 1.96rem);
  --step-3:  clamp(1.95rem, 1.68rem + 1.35vw, 2.61rem);
  --step-4:  clamp(2.44rem, 1.86rem + 2.90vw, 4rem);   /* max 64px — eine Holding schreit nicht */

  --gap: clamp(5rem, 10vh, 9rem);
  --pad: clamp(1.25rem, 4vw, 3rem);
  --shell: 72rem;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* die Kurve der Bestandsseite, richtig gewählt */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Forest und Navy sind BEIDE dunkel — im Dark-Mode können sie nicht
       "einfach dunkler" werden. Sie werden aufgehellt zu ihren erkennbaren
       Geschwistern; Gold bleibt Gold, denn die Naht bleibt die Naht. */
    --forest: #6FA88E;
    --navy:   #6E9CC4;
    --gold:   #D8B489;
    --gold-ink: #D8B489;

    --paper:   #0F1A14;   /* SSOT --hh-off-white (dark), Seitengrund */
    --cream:   #1A2620;   /* SSOT --hh-cream (dark): Sektionsflächen */
    --surface: #18201C;   /* Karten */
    --ink:     #E6EAE7;
    --muted:   #9AA49E;
    --line:    #2A332E;
    --line-strong: #5F6D64;   /* #46514A ergab nur 2.21:1 → 3.37:1 */
    /* 🔴 Dark-Cream #1A2620 ist HELLER als --paper #0F1A14 → --line-strong
       #5F6D64 fällt darauf auf 2.87:1 (< 3:1, bricht WCAG 1.4.11 im Dark-Mode
       genau wie im Light-Mode). Nachgehellt: #707E75 → 3.67:1 auf Dark-Cream.
       (Eigenrechnung Peter, Falsifikation: alten Wert zurück → Checker rot.) */
    --line-strong-cream: #707E75;
    --line-cream: #37413A;   /* Hairline: gegen #1A2620 sichtbar, dezent */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

h1 { font-size: var(--step-4); font-weight: 600; line-height: 1.04; letter-spacing: -.022em; }
h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.12; letter-spacing: -.018em; }
h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }

/* Mono = alles, was rechtlich exakt sein muss: Adressen, Rechtsformen,
   Registerangaben, Tarifwerk, Durchwahlen. Nie Deko. */
.mono {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--muted);
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.prose { max-width: 64ch; }
.lede  { max-width: 56ch; font-size: var(--step-1); line-height: 1.5; color: var(--muted); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 99; background: var(--ink); color: var(--paper);
  padding: .625rem 1rem; border-radius: .5rem; text-decoration: none;
}
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 2px;
}

/* ══ DIE NAHT ══ Das zentrale Gestaltungsmittel dieser Seite.
   Eine goldene Linie erscheint NUR dort, wo etwas verbunden wird:
   zwischen den zwei Marken, zwischen den Sektionen, zwischen
   Mutter und Tochter im Diagramm. Nirgends sonst. */
.seam { height: 1px; background: var(--gold); border: 0; margin: 0; opacity: .55; }

/* ── Sektions-Kopf: volle Trennlinie + Nummer. Kein Uppercase-Eyebrow. ── */
.sec { padding-block: var(--gap); }

/* ══ CREAM-FLÄCHE ══ Rhythmischer Flächenwechsel Cream↔Weiß trägt die Wärme,
   nicht mehr Farbe. Eine Cream-Sektion färbt ihren Grund UND schaltet die
   Hairline-/Rand-Tokens auf die nachgedunkelten Cream-Varianten um (WCAG
   1.4.11: --line-strong bräche auf Cream sonst auf 2.85:1). Karten bleiben
   --surface (Weiß) → der Kontrast Karte↔Cream IST die Wärme-Wahrnehmung.
   Full-bleed-Grund über negative Ränder, Inhalt bleibt in .shell zentriert. */
.sec-cream {
  --line: var(--line-cream);
  --line-strong: var(--line-strong-cream);
  background: var(--cream);
}
/* Der Cream-Grund läuft randlos: die Sektion selbst trägt die Fläche, die
   umgebenden .seam-Nähte grenzen sie oben/unten ab. */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 1.125rem; margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sec-head h2 { flex: 1 1 auto; }
/* Sektionsnummer als Gold-Ziffer in der Grotesk (nicht Mono): sie trägt den
   Naht-Rhythmus (Gold = das Verbindende der Seite) statt als Tech-Marker zu
   lesen. tabular-nums für gleiche Ziffernbreite, ohne Mono-Anmutung. */
.sec-idx {
  flex: 0 0 auto;
  font-weight: 600; font-size: var(--step-1);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--gold-ink);
}

/* ── Header ── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding-block: .75rem; }
.top .lockup { height: 30px; width: auto; }
.top nav { display: none; gap: 1.6rem; }
@media (min-width: 66rem) { .top nav { display: flex; } }
.top nav a { text-decoration: none; color: var(--muted); font-size: var(--step--1); transition: color 140ms var(--ease); }
.top nav a:hover { color: var(--ink); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  padding: .8125rem 1.375rem; border-radius: .75rem;
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
/* Zwei gleichrangige Marken-Einstiege: jeder trägt die Farbe seiner Marke. */
.btn-forest { background: var(--forest); color: #fff; }
.btn-navy   { background: var(--navy);   color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn-forest, .btn-navy { color: #101613; }
}
.btn-forest:hover, .btn-navy:hover { filter: none; opacity: .9; }
.btn-line { border-color: var(--line-strong); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }

/* ══ HERO ══ Kein Blob. Keine Stat-Kachel ohne Zahl.
   Statt dessen: das Lockup, der Claim, und das Organigramm. */
.hero { padding-block: clamp(3rem, 8vh, 5.5rem) var(--gap); position: relative; overflow: hidden; }

/* ══ ELEMENT B — HERO-FOTO-FADE ══ Der Trick aus dem Referenz-Entwurf, aber
   mit UNSEREM Cream und einem ECHTEN Gesicht (kein Stockbild): der
   GF-Freisteller (assets/team/tobias-kreiser) sitzt rechts und blendet nach
   LINKS weich in die Cream/Paper-Fläche aus. Das Foto belegt die H1 „Sie
   sprechen mit dem, der entscheidet." — es ist genau dieser Mensch.
   🔴 Freisteller (RGBA) → die Maske blendet die PERSON aus, kein Foto-Rechteck.
   Nur ab Desktop (66rem), sitzt rechts NEBEN dem Text → die Headline liegt
   links auf reinem --paper, kein Text auf dem Bild = kein Kontrastrisiko.
   Sehr dezent (opacity), damit die 4 Beweis-Gesichter die Hauptrolle behalten. */
.hero-photo {
  display: none;   /* mobil/tablet aus — dort trägt die Faces-Reihe allein */
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: max(0px, calc((100vw - var(--shell)) / 2 - 2rem));
  bottom: 0; width: clamp(20rem, 30vw, 30rem); height: auto;
  object-fit: contain; object-position: bottom right;
  opacity: .16;
  -webkit-mask-image: linear-gradient(105deg, transparent 8%, #000 62%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 8%, #000 62%, #000 100%);
}
@media (min-width: 66rem) { .hero-photo { display: block; } }
@media (prefers-color-scheme: dark) { .hero-photo { opacity: .11; } }
/* Text + Faces liegen ÜBER dem Fade. */
.hero-grid { position: relative; z-index: 1; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 66rem) { .hero-grid { grid-template-columns: 6fr 5fr; align-items: center; } }
.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { margin-bottom: 2.25rem; }

/* Der Claim — heute nur in zwei <meta>-Tags, hier zum ersten Mal sichtbar.
   Die Punkte zwischen den Wörtern sind golden: drei Begriffe, zwei Nähte. */
.claim {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 1.75rem;
}
.claim b { font-weight: 500; }
.claim i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); font-style: normal; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Die Durchwahl im Hero. Ein Dachauftritt, der seine Telefonnummer erst im
   Fußbereich nennt, meint „kurze Wege" nicht ernst. */
.hero-reach { margin-top: 1.5rem; }
.hero-reach a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.hero-reach a:hover { border-bottom-color: var(--ink); }
.hero-reach span { margin-inline: .5rem; color: var(--line-strong); }

/* ══ DIE GESICHTER IM HERO ══ Der Beweis, nicht die Illustration.
   Kein Kreis-Avatar (Template-Signatur), kein Gradient, keine Anzahl.
   `auto-fit` + `minmax` → der Wegfall eines Gesichts bricht nichts
   (§ 26 Abs. 2 BDSG, siehe Sektion 03). Farbe per data-brand an der PERSON. */
/* minmax(6rem …): bei 7.5rem brachen die Gesichter in der schmalen Hero-Spalte
   ab 1100px auf 3+1 um (real gemessen). `auto-fit` bleibt — der Wegfall eines
   Gesichts verteilt die restlichen weiterhin selbst. */
/* minmax(5rem) + gap .5rem: bei minmax(6rem) brachen die Gesichter auf 390px
   auf 3+1 (4×96+3×10=414px > 350px Grid). Nachgerechnet: 4×80+3×8=344px, 6px
   Puffer bei 390px. `auto-fit` bleibt — der Wegfall eines Gesichts (§26 BDSG)
   verteilt die restlichen selbst. */
.hero-faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: .5rem; }
.face { margin: 0; display: flex; flex-direction: column; }
/* Weicher/wärmer: der harte graue Kastenrahmen weicht einer warmen Tönung
   des Bild-Grunds; nur die goldene Unterkante (die Naht) bleibt als Akzent.
   So löst sich der Rahmen optisch, ohne die Fläche zu verlieren. */
.face picture {
  display: block; overflow: hidden;
  border-radius: .875rem; border-bottom: 1px solid var(--gold);
  background: color-mix(in srgb, var(--forest) 10%, var(--surface));
}
.face[data-brand="navy"] picture { background: color-mix(in srgb, var(--navy) 8%, var(--surface)); }
.face img { height: 150px; width: 100%; object-fit: contain; object-position: bottom; display: block; }
.face figcaption { padding-top: .625rem; line-height: 1.35; }
.face figcaption b { display: block; font-size: .8125rem; font-weight: 600; hyphens: auto; }
/* Rolle unter dem Hero-Gesicht = Personen-Rolle → Grotesk (konsistent mit
   .person-role in der Menschen-Sektion; ein Name mit Aufgabe ist Mensch). */
.face figcaption span {
  display: block; margin-top: .125rem;
  font-size: .6875rem; font-weight: 500; color: var(--muted);
  overflow-wrap: anywhere;   /* „People & Organisation" bricht sonst aus schmalen Spalten */
}
@media (max-width: 40rem) {
  .face img { height: 104px; }
  .face figcaption b { font-size: .75rem; }
  .face figcaption span { font-size: .5625rem; }
}
/* Kleinste Geräte (iPhone SE 320px): bei 80px-Spalten brach das 4er-Raster auf
   3+1 (4×80+3×8=344px > 280px Grid). 64px trägt vier Gesichter bis 320px.
   Gemessen: 320/360/375/390px alle eine Reihe, kein Overflow. */
@media (max-width: 24.99rem) {
  .hero-faces { grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); gap: .375rem; }
  .face img { height: 88px; }
}

/* Sektion 01: Text links, Organigramm rechts (vorher stand es im Hero). */
.gruppe-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 62rem) { .gruppe-grid { grid-template-columns: 6fr 5fr; align-items: start; } }

/* ══ DAS ORGANIGRAMM ══ Die einzige Grafik der Seite.
   Sie beantwortet die meistgestellte Frage (FAQ 1) visuell.
   Die goldene Linie IST die Gruppe. */
.org { border: 1px solid var(--line); border-radius: 1rem; padding: 1.75rem; background: var(--surface); }
.org figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 1.25rem; line-height: 1.6; }
.org-node {
  border-left: 3px solid var(--c, var(--line));
  padding: .75rem 0 .75rem 1rem; margin-bottom: .5rem;
}
.org-node.is-forest { --c: var(--forest); }
.org-node.is-navy   { --c: var(--navy); }
.org-node.is-gold   { --c: var(--gold); }
.org-name { font-weight: 600; font-size: 1rem; line-height: 1.3; }
/* Rolle im Organigramm = Beschreibung, kein Registereintrag → Grotesk. */
.org-role { font-size: .8125rem; color: var(--muted); margin-top: .1875rem; }
.org-tie {
  display: flex; align-items: center; gap: .625rem;
  margin: .125rem 0 .125rem 0; padding-left: 1rem;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: .6875rem; color: var(--gold-ink);
}
.org-tie::before { content: ""; width: 22px; height: 1px; background: var(--gold); flex: 0 0 auto; }

/* ══ MARKEN ══ Zwei volle Zeilen, ungleich hoch — die Asymmetrie ist wahr:
   nur STAFFECT trägt den GVP-Nachweis. Keine zwei gleichen Karten. */
.brand {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding-block: 2.5rem; border-top: 1px solid var(--line);
}
/* Die zweite Marke erbt ihre Oberkante von der goldenen Naht, nicht von --line —
   sonst lägen zwei Linien direkt übereinander. */
.brand-navy { border-top: 0; padding-top: 2.5rem; }
.seam-brands { margin-block: 0; }
@media (min-width: 62rem) { .brand { grid-template-columns: 4fr 6fr 3fr; gap: 3rem; align-items: start; } }

/* Wortmarke als Bild. Beide -ci.svg teilen viewBox 130 390 745 220 → maßgleich,
   dieselbe height ergibt automatisch dieselbe optische Größe. */
.brand-mark { height: 34px; width: auto; display: block; }
@media (max-width: 61.99rem) { .brand-mark { height: 30px; } }
/* Marken-Label = Beschreibung, kein Register → Grotesk, Groß-/Kleinschreibung
   statt geschrienem Uppercase. */
.brand-kind { font-size: .8125rem; font-weight: 500; color: var(--muted); margin-top: .375rem; }
.brand p { color: var(--muted); }
.brand-when { margin-top: 1rem; font-weight: 500; color: var(--ink); }
.brand-proof { border-top: 1px solid var(--gold); padding-top: .875rem; }
.brand-proof div { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--step--1); padding-block: .3125rem; color: var(--muted); }
.brand-proof img { margin-top: .875rem; height: 38px; width: auto; }
.brand-go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  font-size: var(--step--1); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
}
.brand-go:hover { border-bottom-color: currentColor; }

/* ══ DIE MENSCHEN ══ Gesichter, keine Kreis-Masken, kein Gradient.
   Freisteller auf Fläche. Wer wofür ans Telefon geht, steht dabei.

   🔴 WIDERRUFS-ROBUST (§ 26 Abs. 2 BDSG: Beschäftigtenfotos sind jederzeit
   widerruflich, egal was im Arbeitsvertrag steht). Die Sektion muss den
   Wegfall EINES Gesichts ohne Layout-Bruch überstehen. Zwei Konsequenzen:

   1) KEIN `gap:1px` auf einem `background`-Trick als Trennlinien-Ersatz —
      bei 3 Karten in einer 4-Spalten-Reihe bliebe die leere Zelle als
      graue Fläche stehen. Stattdessen: echte Rahmen je Karte.
   2) KEIN `:nth-child(even)` für die Markenfarbe — fällt Person 2 weg,
      kippt die Forest/Navy-Abwechslung aller folgenden. Die Farbe hängt
      an der PERSON (`data-brand`), nicht an ihrer Position.

   `auto-fit` + `minmax` sorgt dafür, dass 3 Karten die Breite selbst neu
   aufteilen. Eine Karte entfernen = ein <article> löschen, sonst nichts. */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.person {
  background: var(--surface); border: 1px solid var(--line); border-radius: .875rem;
  padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; overflow: hidden;
}
.person-pic {
  height: 220px; margin: 0 -1.5rem 1.25rem; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--forest) 8%, var(--surface));
  border-bottom: 1px solid var(--gold);
}
.person[data-brand="navy"] .person-pic { background: color-mix(in srgb, var(--navy) 8%, var(--surface)); }
.person-pic img { height: 220px; width: auto; max-width: none; object-fit: contain; }
.person-name { font-weight: 600; font-size: 1.0625rem; }
/* Ein Name mit Aufgabe ist Mensch, kein Datenfeld → Grotesk statt Mono. */
.person-role { font-size: .8125rem; font-weight: 500; color: var(--muted); margin-top: .25rem; line-height: 1.5; }
.person-for { margin-top: .875rem; font-size: var(--step--1); color: var(--muted); }

/* ══ BELEGE ══ drei Absätze statt sechs Wertekarten.
   Jeder Absatz endet mit einem prüfbaren Beleg in Mono. */
.proof { border-top: 1px solid var(--line); padding-block: 2rem; }
.proof:last-of-type { border-bottom: 1px solid var(--line); }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 62rem) { .proof-grid { grid-template-columns: 4fr 8fr; gap: 3rem; } }
.proof h3 { font-size: var(--step-1); }
.proof p { color: var(--muted); max-width: 62ch; }
.proof-ref {
  display: inline-block; margin-top: 1rem; padding-left: .875rem;
  border-left: 2px solid var(--gold);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--step--1); color: var(--gold-ink);
}

/* ══ ELEMENT C — BEWERTUNGEN ══ Zwei prüfbare Plattform-Karten, echte Werte
   mit offener Anzahl. Karten = Links → sichtbarer Fokus/Hover. Sterne sind
   dekorativ (aria-hidden), der Wert steht als Text daneben (WCAG). Gold-Sterne
   in der Lesefassung --gold-ink, damit sie auch als Deko sauber sichtbar sind. */
.ratings {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin-top: 2.25rem;
}
@media (min-width: 34rem) { .ratings { grid-template-columns: repeat(2, 1fr); max-width: 34rem; } }
.rating {
  display: flex; flex-direction: column; gap: .375rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: .875rem;
  padding: 1.25rem 1.375rem; text-decoration: none;
  transition: border-color 140ms var(--ease);
}
.rating:hover { border-color: var(--gold); }
.rating-plat { font-weight: 600; font-size: 1rem; color: var(--ink); }
.rating-score { display: flex; align-items: baseline; gap: .5rem; }
.rating-score b { font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.rating-stars { color: var(--gold-ink); font-size: 1rem; letter-spacing: .05em; }
.rating-count { font-size: var(--step--1); color: var(--muted); }
.ratings-note { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); max-width: 56ch; }

/* ══ ELEMENT A — DER ABLAUF ══ Vier Schritt-Karten auf Cream (weiße Karten →
   Karte↔Cream-Wärme). Enttecht: die Schrittziffer ist eine Gold-Naht-Ziffer in
   der Grotesk, nicht Mono. Kein Datenblatt-Look, kein Icon-Zoo. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 40rem)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem)  { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: .875rem;
  padding: 1.5rem 1.375rem 1.625rem;
  display: flex; flex-direction: column;
  border-top: 2px solid var(--gold);   /* die Naht sitzt oben auf jeder Karte */
}
/* Die Schrittziffer: Gold in der Grotesk (Naht-Rhythmus, kein Mono-Marker). */
.step-idx {
  font-weight: 600; font-size: var(--step-2);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--gold-ink); line-height: 1; margin-bottom: .875rem;
}
.step h3 { font-size: var(--step-1); line-height: 1.2; margin-bottom: .625rem; }
.step p { color: var(--muted); font-size: var(--step--1); }

/* ══ FAQ ══ Bleibt. Bestes Element der Bestandsseite. JS-frei, semantisch. ══ */
.faq { display: flex; flex-direction: column; gap: .625rem; }
.faq-item { border: 1px solid var(--line); border-radius: .875rem; background: var(--surface); overflow: hidden; transition: border-color 150ms var(--ease); }
.faq-item[open] { border-color: var(--gold); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .875rem;
  padding: 1.0625rem 1.25rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 500; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-chev { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--muted); transition: transform 180ms var(--ease); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 1.25rem 1.25rem; font-size: .9375rem; line-height: 1.75; color: var(--muted); max-width: 68ch; }

/* ══ KONTAKT ══ */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 62rem) { .contact { grid-template-columns: 5fr 7fr; } }
.reach { border-top: 1px solid var(--gold); }
.reach div { padding: 1.0625rem 0; border-bottom: 1px solid var(--line); }
.reach dt { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--step--1); color: var(--muted); margin-bottom: .3125rem; }
.reach dd { margin: 0; }
.reach a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.reach a:hover { border-bottom-color: var(--ink); }

/* ══ FOOTER ══ Register-Block. Der Anker ist Forest+Navy, gold genäht. ══ */
.foot { background: var(--forest); color: #EDF1EE; padding-block: 3rem 2.25rem; margin-top: var(--gap); position: relative; }
.foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gold); }
@media (prefers-color-scheme: dark) { .foot { background: #0B120E; color: #C9D2CC; } }
.foot .lockup { height: 26px; margin-bottom: 1.75rem; }
.foot-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 48rem) { .foot-cols { grid-template-columns: repeat(3, 1fr); } }
/* h3 statt h4: Sprung h2→h4 verletzt die Heading-Reihenfolge (axe heading-order). */
.foot .foot-h { font-family: "Geist Mono", ui-monospace, monospace; font-size: .6875rem; font-weight: 500;
           letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem; color: #D8B489; }
.foot p, .foot address { font-size: var(--step--1); line-height: 1.7; font-style: normal; color: #C6D0C9; margin: 0; }
@media (prefers-color-scheme: dark) { .foot p, .foot address { color: #9FAAA3; } }
.foot-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .14); display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center; }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-legal a { color: #C6D0C9; font-size: var(--step--1); text-decoration: none; }
.foot-legal a:hover { color: #fff; }
.foot-legal .mono { color: #A9B5AD; }
/* Der Fokus-Ring erbt sonst --gold-ink (#7A5F35) — auf dem Forest-Footer
   nur 2.08:1. Das helle Gold trägt hier: 6.39:1. */
.foot :where(a, button):focus-visible { outline-color: #D8B489; }
.draft-flag a:focus-visible { outline-color: #fff; }
@media (prefers-color-scheme: dark) { .foot-legal a, .foot-legal .mono { color: #9FAAA3; } }

/* ── Entwurfs-Banner (kein Teil des Designs) ── */
.draft-flag { background: #7c2d12; color: #fff; text-align: center;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: .75rem; padding: .5rem 1rem; }
.draft-flag a { color: #fff; }

/* ── Touch-Targets (WCAG 2.5.5) ── */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px; }
  .top nav a, .foot-legal a, .brand-go,
  .reach a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Reduced Motion: global. Die Bestandsseite hat das GAR NICHT (0 Treffer). ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}