/* ============================================================
   MSA® Ökosystem — Design System
   ============================================================ */

:root {
  /* Brand palette (emesa / permitto) */
  --ink: #1a3941;
  --ink-deep: #0e2429;
  --ink-soft: #2c525b;
  --coral: #e06245;
  --coral-deep: #c44e33;
  --cream: #fcf9f5;
  --sand: #e7e1d7;
  --sand-deep: #d8cfc1;
  --sage: #8fae9b;
  --sage-deep: #6d9080;
  --white: #ffffff;

  --text: #1a3941;
  --text-muted: #5c7076;
  --text-on-dark: #f4efe8;
  --text-on-dark-muted: #a9bcc0;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 2.2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 3vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 4.4vw, 3.5rem);
  --text-hero: clamp(2.6rem, 6.2vw, 5.25rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Eckradien. Welche Stufe wann gilt, entscheidet die Flaeche, nicht die
     Komponente: Ein Radius wirkt relativ zu dem, was er einfasst, deshalb
     bekommt die schmale Rasterkarte weniger als das ganzseitige Panel.
     Die Zuordnung steht in CLAUDE.md; ohne sie faellt das System binnen
     weniger Komponenten wieder auseinander. */
  --radius-sm: 6px;    /* Eingabefeld, Zeile im Klappmenue */
  --radius-ico: 12px;  /* Icon-Plaettchen, Mikrokachel */
  --radius: 14px;      /* Karte im Raster */
  --radius-lg: 24px;   /* Panel als Solitaer, Bildrahmen, Bildkachel */
  --radius-xl: 36px;   /* Hero */
  --radius-pill: 999px;/* Knopf, Chip, Badge */

  /* Kartenflaechen. Der Bestand kannte fuenf Rahmenstaerken fuer denselben
     Zweck; sie liegen jetzt auf einem Wert je Untergrund. */
  --card-line: rgba(26, 57, 65, 0.1);
  --card-line-dark: rgba(244, 239, 232, 0.16);
  --card-fill-dark: rgba(255, 255, 255, 0.06);

  --maxw: 1240px;
  --maxw-narrow: 760px;

  --shadow-sm: 0 1px 2px rgba(26, 57, 65, 0.06), 0 2px 8px rgba(26, 57, 65, 0.04);
  --shadow: 0 4px 12px rgba(26, 57, 65, 0.07), 0 16px 40px rgba(26, 57, 65, 0.07);
  --shadow-lg: 0 12px 32px rgba(26, 57, 65, 0.1), 0 40px 80px rgba(26, 57, 65, 0.1);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--coral); color: #fff; }

/* ---------- Typography helpers ---------- */
.display { font-family: var(--font-display); font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 40; }
.h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; }
.h2 { font-family: var(--font-display); font-size: var(--text-4xl); letter-spacing: -0.03em; line-height: 1.08; }
.h3 { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.2; }
.h4 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; font-family: var(--font-body); line-height: 1.35; }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  /* Kein Flex: Der Text kann ein <sup class="reg"> enthalten, das im
     Flex-Container zum eigenen Kind wuerde und den gap als Wortluecke
     mitten ins Wort setzt. Den Abstand traegt jetzt der Strich selbst. */
  display: block;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--coral);
  display: inline-block; vertical-align: middle; margin-right: var(--sp-3);
  /* align-items zentriert zur Zeilenmitte; die Versalien sitzen ohne
     Unterlaenge darueber, weshalb der Strich zu tief steht. 0.12em ist
     der Abstand beider Mitten, an mehreren Eyebrows nachgemessen. */
  position: relative;
  top: -0.12em;
}
.eyebrow.center { justify-content: center; }
.lead { font-size: var(--text-xl); line-height: 1.5; color: var(--ink-soft); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }

/* Der Markenname bricht nie am Bindestrich um: "Motivstruktur-" am Zeilenende
   und "Analyse" auf der naechsten liest sich als zwei Woerter und nicht als
   ein Name. Die Klasse fasst nur den Namen selbst ein, nicht das
   nachgestellte MSA(R) - sonst stuende auf schmalen Schirmen eine
   26 Zeichen lange, nicht umbrechbare Einheit in der Zeile. */
.marke { white-space: nowrap; }

/* Steht im Markup, aber nicht auf dem Schirm: fuer Vorleseprogramme da, wo
   die Beschriftung optisch schon anders getragen wird - etwa von einer
   Spaltenueberschrift ueber der Liste. Eine Hilfsklasse des Design-Systems
   und keine einer einzelnen Seite; genutzt von der Beratersuche und von der
   Teilnehmerliste des Anmeldeformulars. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-6); }
.narrow { max-width: var(--maxw-narrow); }
section { position: relative; }
.section { padding: var(--sp-32) 0; }
.section-sm { padding: var(--sp-24) 0; }
.grid { display: grid; gap: var(--sp-6); }
.center { text-align: center; }

.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sp-6); }
.section-head p { margin-top: var(--sp-6); }

/* ---------- Surfaces ---------- */
.bg-cream { background: var(--cream); }
.bg-sand { background: var(--sand); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink); color: var(--text-on-dark); }
.bg-ink .muted, .bg-ink .lead { color: var(--text-on-dark-muted); }
.bg-ink .eyebrow { color: #f0a893; }
.bg-ink .eyebrow::before { background: #f0a893; }

/* ---------- Buttons ---------- */
.btn {
  /* Kein gap: Der Knopf ist ein Flex-Container, jedes Element darin wird
     zum Flex-Kind - auch ein <sup class="reg"> mitten im Wort. Mit gap
     stuende dann eine Wortluecke zwischen "MSA" und dem Zeichen. Den
     Abstand zum Pfeil setzt deshalb .arw selbst. */
  display: inline-flex; align-items: center;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 18px rgba(224, 98, 69, 0.28); }
.btn-primary:hover { background: var(--coral-deep); box-shadow: 0 10px 26px rgba(224, 98, 69, 0.34); }
.btn-ghost { border-color: rgba(26, 57, 65, 0.22); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(26, 57, 65, 0.04); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--cream); }
.btn-outline-light { border-color: rgba(244, 239, 232, 0.35); color: var(--text-on-dark); }
.btn-outline-light:hover { border-color: var(--text-on-dark); background: rgba(255, 255, 255, 0.08); }
/* Ohne inline-flex sitzt das SVG auf der Grundlinie der Zeile und haengt
   damit ueber der Mitte des Knopfes. */
.btn .arw { display: inline-flex; align-items: center; margin-left: var(--sp-2); transition: transform 0.25s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--coral);
}
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Bausteine
   ------------------------------------------------------------
   Vier Formen wiederholen sich quer durch alle Seiten: das
   Icon-Plaettchen, der Nummernkreis, die Pille und das Anheben
   einer Karte beim Ueberfahren. Sie standen bisher in jeder
   Komponente neu und dabei jedes Mal etwas anders - das
   Plaettchen mit sechs verschiedenen Radien, das Anheben mit
   sechs verschiedenen Weiten. Hier stehen sie einmal; die
   Komponenten weiter unten setzen nur noch ihre Farben.
   ============================================================ */

/* Icon-Plaettchen: abgerundetes Quadrat mit zentriertem Symbol.
   Die Groesse variiert je Kontext, die Form nicht. */
.ico {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-ico);
  display: grid; place-items: center;
}

/* Nummernkreis und Haken: immer rund, immer zentriert. */
.berg-note .num,
.cert-step .n,
.fl .n,
.checks .ck,
.sci-chip {
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
}

/* Pille: Knopf, Chip, Badge, Marke.
   align-content zentriert den Text auch dann, wenn die Pille hoeher
   ausfaellt als ihr Inhalt - im Flex-Container streckt sie sich auf die
   Hoehe der hoechsten Pille ihrer Zeile, und der Text stuende sonst an
   der eigenen Oberkante statt in der Mitte. Bewusst nicht ueber Flex:
   Der Text kann ein <sup class="reg"> enthalten, das darin zum eigenen
   Kind wuerde und den Satz auseinanderrisse. */
.chip,
.chips-light span,
.pq-badge,
.hero-badge,
.person .tag,
.rproj .cat,
.qcard .badge {
  border-radius: var(--radius-pill);
  align-content: center;
}

/* Weite, um die sich eine Karte beim Ueberfahren hebt. Der Bestand kannte
   dafuer sechs Werte zwischen 2 und 6 Pixeln, ohne dass die Abstufung etwas
   bedeutet haette. Es bleiben zwei: die Rasterkarte bewegt sich knapp, die
   grossflaechige Bildkachel deutlicher. Welche Karte ueberhaupt reagiert,
   entscheidet weiterhin jede Komponente fuer sich. */
:root { --lift: -3px; --lift-lg: -6px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--ease);
  padding: var(--sp-4) 0;
}
.site-header.scrolled {
  background: rgba(252, 249, 245, 0.9);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(26, 57, 65, 0.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.logo { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.logo svg { flex: none; }
.logo-text { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; font-weight: 600; }
/* Haelt das <b> der Fusszeile auf demselben Wert: Ohne die Regel wuerde
   der Browser "bolder" gegen die 600 rechnen und auf 700 springen. */
.logo-text b { font-weight: 600; }
/* Ab hier steht im Logo nur noch das Kuerzel: Der ausgeschriebene Name
   braucht neben Aufruf und Menuezeichen mehr Platz, als eine schmale
   Kopfzeile hat, und bricht sonst um. */
@media (max-width: 700px) { .logo-text .lw { display: none; } }
@media (max-width: 430px) { .logo-text { font-size: 1rem; white-space: nowrap; } }
.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav a { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); position: relative; padding: 4px 0; white-space: nowrap; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--coral); transition: right 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }
.header-cta { display: flex; align-items: center; gap: var(--sp-3); }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }

.header-cta .btn { padding: 0.68rem 1.1rem; font-size: 0.88rem; }
@media (max-width: 1600px) {
  .nav { gap: var(--sp-3); }
  .nav a { font-size: 0.85rem; }
}
@media (max-width: 1380px) {
  .nav { gap: var(--sp-3); }
  .nav a { font-size: 0.82rem; }
  .header-cta .btn { padding: 0.6rem 1rem; font-size: 0.84rem; }
}

@media (max-width: 1200px) {
  .nav { display: none; }
  .burger { display: block; }
}
/* Erst hier wird es für den zweiten Aufruf eng: Zwischen Logo und Knöpfen
   bleiben bei 760 px noch rund 60 px Luft, darunter stoßen sie aneinander.
   Bis dahin bleibt „Kontakt aufnehmen" also in der Kopfzeile stehen, obwohl
   die Navigation längst im Menü steckt; darunter bietet ihn nur noch das
   Menü an. */
@media (max-width: 760px) {
  .header-cta .header-secondary { display: none; }
}
/* Auf sehr schmalen Geräten rückt der Aufruf enger zusammen, damit Logo,
   Button und Menüzeichen nebeneinander bleiben. */
@media (max-width: 430px) {
  .header-inner { gap: var(--sp-3); }
  .header-cta { gap: var(--sp-2); }
  .header-cta .btn { padding: 0.55rem 0.7rem; font-size: 0.76rem; }
  .burger { padding: 8px 0; }
}

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--text-on-dark);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; }
.mobile-nav a:hover { color: #f0a893; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: calc(var(--sp-32) + 40px) 0 var(--sp-16); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-16);
  align-items: center;
}
.hero-badge {
  display: inline-block;
  padding: 0.4rem 0.9rem 0.4rem 0.55rem;
  background: rgba(143, 174, 155, 0.2);
  border: 1px solid rgba(109, 144, 128, 0.3);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: var(--sp-8);
}
.hero-badge .dot { display: inline-block; vertical-align: middle; margin-right: 0.5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-deep); box-shadow: 0 0 0 3px rgba(109, 144, 128, 0.25); }
.hero h1 { margin-bottom: var(--sp-6); }
.hero h1 em { font-style: normal; color: var(--coral); }
.hero-sub { font-size: var(--text-xl); line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

.hero-media { position: relative; }
.hero-media .frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.3;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.trustbar {
  margin-top: var(--sp-24);
  border-top: 1px solid rgba(26, 57, 65, 0.12);
  padding-top: var(--sp-6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-8);
}
@media (max-width: 900px) { .trustbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trustbar { grid-template-columns: 1fr; } }
.trustbar .ti { display: flex; align-items: baseline; gap: 0.5rem; }
.trustbar .tv { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; }
.trustbar .tl { font-size: var(--text-sm); color: var(--text-muted); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-12); }
  .hero-sub { max-width: none; }
}

/* ============================================================
   Manifest
   ============================================================ */
.manifest { padding: var(--sp-32) 0; background: var(--ink); color: var(--text-on-dark); overflow: hidden; }
.manifest .big {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.9vw, 3.2rem);
  line-height: 1.14; letter-spacing: -0.03em;
  max-width: 22ch;
}
.manifest .big span { color: #f0a893; }
.manifest-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-16); align-items: start; }
.manifest-body { display: grid; gap: var(--sp-6); }
.manifest-body p { color: var(--text-on-dark-muted); font-size: var(--text-lg); line-height: 1.62; }
.manifest-body strong { color: var(--text-on-dark); font-weight: 500; }
@media (max-width: 900px) { .manifest-grid { grid-template-columns: 1fr; gap: var(--sp-8); } .manifest .big { max-width: none; } }

/* ============================================================
   Stats
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-16); }
.stat {
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.stat .v { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.stat .v small { font-size: 0.5em; letter-spacing: -0.01em; }
.stat .l { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.stat .src { margin-top: var(--sp-3); font-size: 0.7rem; color: rgba(92, 112, 118, 0.75); }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Iceberg / Motivebene
   ============================================================ */
.berg-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-16); align-items: center; }
.berg {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-line);
  background: var(--white);
  box-shadow: var(--shadow);
}
.berg-top { padding: var(--sp-8); background: linear-gradient(180deg, #ffffff 0%, #f6f2ec 100%); }
.berg-bot { padding: var(--sp-8); background: linear-gradient(180deg, #1a3941 0%, #0e2429 100%); color: var(--text-on-dark); }
.berg-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.berg-top .berg-label { color: var(--sage-deep); }
.berg-bot .berg-label { color: #f0a893; }
.berg-title { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: var(--sp-6); }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  font-size: var(--text-sm); padding: 0.38rem 0.85rem;
  border: 1px solid rgba(26, 57, 65, 0.16); color: var(--ink-soft); background: rgba(255,255,255,0.7);
}
.berg-bot .chip { border-color: rgba(244, 239, 232, 0.28); color: var(--text-on-dark); background: rgba(255, 255, 255, 0.07); }
.waterline {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-8); height: 46px;
  background: var(--sand);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.waterline .rule { flex: 1; height: 1px; background: rgba(26, 57, 65, 0.2); }

.berg-note { margin-top: var(--sp-8); display: grid; gap: var(--sp-4); }
.berg-note li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.berg-note .num {
  width: 30px; height: 30px;
  background: rgba(224, 98, 69, 0.12); color: var(--coral-deep);
  font-size: 0.8rem; font-weight: 700;
}
.berg-note p { font-size: var(--text-base); color: var(--ink-soft); }
.berg-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 940px) { .berg-grid { grid-template-columns: 1fr; gap: var(--sp-12); } }

/* Two-person example */
.persons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.person { border-radius: var(--radius); padding: var(--sp-8); border: 1px solid var(--card-line); background: var(--white); }
.person h4 { margin-bottom: var(--sp-4); }
.person .tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.6rem; margin-bottom: var(--sp-4); }
.person.a .tag { background: rgba(143, 174, 155, 0.25); color: var(--sage-deep); }
.person.b .tag { background: rgba(224, 98, 69, 0.14); color: var(--coral-deep); }
.person dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-6); margin: 0; }
.person dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.person dd { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.situation { margin-top: var(--sp-12); text-align: center; }
.situation .box {
  display: inline-block; padding: var(--sp-4) var(--sp-8); border-radius: var(--radius);
  background: var(--ink); color: var(--text-on-dark); font-family: var(--font-display); font-size: 1.05rem;
}
@media (max-width: 760px) { .persons { grid-template-columns: 1fr; } }


/* Three ecosystems */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.tri-card {
  padding: var(--sp-8); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--card-line-dark);
}
.tri-card .n { font-family: var(--font-display); font-size: 0.95rem; color: #f0a893; margin-bottom: var(--sp-4); }
.tri-card h4 { margin-bottom: var(--sp-3); }
.tri-card p { font-size: var(--text-sm); color: var(--text-on-dark-muted); }
@media (max-width: 840px) { .tri { grid-template-columns: 1fr; } }

/* ============================================================
   Reports
   ============================================================ */
.rep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-16); }
.rep {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--sp-6);
  padding: var(--sp-8);
  border-radius: var(--radius);
  background: var(--card-fill-dark);
  border: 1px solid var(--card-line-dark);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rep:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(244, 239, 232, 0.3); }
.rep h4 { margin-bottom: var(--sp-3); }
.rep p { font-size: var(--text-sm); color: var(--text-on-dark-muted); }
.rep .idx { font-family: var(--font-display); font-size: 1.1rem; color: rgba(240, 168, 147, 0.8); }
@media (max-width: 760px) { .rep-grid { grid-template-columns: 1fr; } }

.ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.ai-chat {
  background: rgba(255,255,255,0.05); border: 1px solid var(--card-line-dark);
  border-radius: var(--radius-lg); padding: var(--sp-8); display: grid; gap: var(--sp-4);
}
.bubble { padding: var(--sp-4) var(--sp-6); border-radius: var(--radius); font-size: var(--text-sm); line-height: 1.55; max-width: 88%; }
.bubble.ai { background: rgba(244, 239, 232, 0.1); border: 1px solid rgba(244,239,232,0.14); border-bottom-left-radius: 4px; }
.bubble.me { background: var(--coral); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.ai-chat .who { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(169,188,192,0.8); margin-bottom: 0.3rem; }
@media (max-width: 900px) { .ai-split { grid-template-columns: 1fr; gap: var(--sp-12); } }

/* ============================================================
   Impact
   ============================================================ */
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-16); }
.impact {
  padding: var(--sp-8); border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
  display: grid; gap: var(--sp-4);
}
.impact .ico { background: rgba(224, 98, 69, 0.1); color: var(--coral-deep); }
.impact p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.62; }
@media (max-width: 900px) { .impact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Quote / Stimmen
   ============================================================ */
.bigquote { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-16); align-items: center; }
.bigquote img { width: 100%; height: 100%; object-fit: cover; }
.bigquote blockquote { margin: 0; }
.bigquote q {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.28; letter-spacing: -0.025em;
  quotes: "„" "“" "‚" "‘";
  display: block;
}
@media (max-width: 900px) { .bigquote { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* Partner marquee */
.partners { border-top: 1px solid rgba(26,57,65,0.1); border-bottom: 1px solid rgba(26,57,65,0.1); padding: var(--sp-8) 0; overflow: hidden; }
.partner-track { display: flex; gap: var(--sp-12); align-items: center; width: max-content; animation: slide 44s linear infinite; }
.partners:hover .partner-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-track span {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--ink-soft); white-space: nowrap; opacity: 0.72;
}
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; flex-wrap: wrap; width: auto; } }

/* ============================================================
   Wege / CTA
   ============================================================ */
.finalcta { padding: var(--sp-32) 0; background: var(--ink); color: var(--text-on-dark); position: relative; overflow: hidden; }
.finalcta::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -180px; top: -220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(224,98,69,0.22) 0%, rgba(224,98,69,0) 68%);
  pointer-events: none;
}
.finalcta .inner { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto; }
.finalcta h2 { margin-bottom: var(--sp-6); }
.finalcta .lead { color: var(--text-on-dark-muted); margin-left: auto; margin-right: auto; }
.finalcta .eyebrow { color: var(--coral-light, #f0a893); }
.finalcta .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }
.finalcta .note { margin-top: var(--sp-8); font-size: var(--text-sm); color: var(--text-on-dark-muted); }

/* ============================================================
   Team / Science
   ============================================================ */
.sci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-16); }
.sci { padding: var(--sp-8); border-radius: var(--radius); background: rgba(255,255,255,0.6); border: 1px solid var(--card-line); }
.sci h4 { margin-bottom: var(--sp-3); }
.sci p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .sci-grid { grid-template-columns: 1fr; } }

.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.tm { padding: var(--sp-6); border-radius: var(--radius); border: 1px solid var(--card-line); }
.tm .n { font-weight: 600; font-size: var(--text-sm); }
.tm .r { font-size: var(--text-xs); color: var(--coral); margin-top: 3px; font-weight: 600; }
.tm .b { font-size: 0.78rem; color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.5; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink-deep); color: var(--text-on-dark); padding: var(--sp-24) 0 var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-12); }
.site-footer .logo { color: var(--text-on-dark); }
.site-footer .about { margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-on-dark-muted); max-width: 34ch; line-height: 1.6; }
.fcol h5 { margin: 0 0 var(--sp-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(169,188,192,0.8); }
.fcol a, .fcol li { font-size: var(--text-sm); color: var(--text-on-dark-muted); line-height: 2; }
.fcol a:hover { color: var(--text-on-dark); }
.footer-bottom {
  margin-top: var(--sp-16); padding-top: var(--sp-6);
  border-top: 1px solid rgba(244,239,232,0.14);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--text-xs); color: rgba(169,188,192,0.75);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   MSA®-Zertifizierung
   ============================================================ */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-16); }
.cert-step {
  position: relative;
  padding: var(--sp-8);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
}
.cert-step .n {
  display: inline-grid;
  width: 34px; height: 34px;
  background: rgba(224, 98, 69, 0.1); color: var(--coral);
  font-family: var(--font-display); font-size: 0.95rem;
  margin-bottom: var(--sp-4);
}
.cert-step h3 { margin-bottom: var(--sp-3); }
.cert-step p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.62; }
@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr; } }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
.lvl {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid rgba(26, 57, 65, 0.12);
  border-left: 3px solid var(--sage);
  background: rgba(255, 255, 255, 0.55);
}
.lvl:nth-child(2) { border-left-color: #b9885f; }
.lvl:nth-child(3) { border-left-color: var(--coral); }
.lvl .s { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.lvl .t { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; }
.lvl p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
@media (max-width: 780px) { .levels { grid-template-columns: 1fr; } }

.cert-who { margin-top: var(--sp-16); padding-top: var(--sp-8); border-top: 1px solid rgba(26, 57, 65, 0.12); }
.cert-who h4 { margin-bottom: var(--sp-4); }
.chips-light { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips-light span {
  font-size: var(--text-sm);
  padding: 0.42rem 0.85rem;
  border: 1px solid transparent;
}
/* Die Chips wechseln in Dreierfolge durch Koralle, Salbei und Sand, damit die
   Aufzaehlung als Gruppe auffaellt. Die Textfarben sind abgedunkelte Varianten
   der Palettentoene: Auf so hellem Grund erreichen die Originalfarben den
   Kontrast von 4,5:1 nicht, den kleine Schrift braucht. */
.chips-light span:nth-child(3n + 1) {
  color: #a83f28;
  background: rgba(224, 98, 69, 0.10); border-color: rgba(224, 98, 69, 0.32);
}
.chips-light span:nth-child(3n + 2) {
  color: #4c6d5e;
  background: rgba(143, 174, 155, 0.18); border-color: rgba(109, 144, 128, 0.38);
}
.chips-light span:nth-child(3n + 3) {
  color: var(--ink-soft);
  background: rgba(231, 225, 215, 0.85); border-color: var(--sand-deep);
}

/* ============================================================
   Berater*innen-Netzwerk
   ============================================================ */
.adv-split { display: grid; grid-template-columns: 1fr 0.92fr; gap: var(--sp-16); align-items: start; }
@media (max-width: 940px) { .adv-split { grid-template-columns: 1fr; gap: var(--sp-12); } }

.adv-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.adv-list li { display: flex; gap: var(--sp-4); }
.adv-list .ico {
  width: 34px; height: 34px;
  background: rgba(240, 168, 147, 0.14); color: #f0a893;
}
.adv-list b { display: block; font-weight: 500; color: var(--text-on-dark); }
.adv-list p { font-size: var(--text-sm); color: var(--text-on-dark-muted); line-height: 1.55; margin-top: 3px; }

.adv-card {
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--card-line-dark);
}
.adv-card .lbl { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #f0a893; }
.adv-card h3 { margin: var(--sp-4) 0 var(--sp-3); }
.adv-card p { font-size: var(--text-sm); color: var(--text-on-dark-muted); line-height: 1.6; }
.adv-goal { display: flex; gap: var(--sp-8); margin: var(--sp-8) 0; padding: var(--sp-6) 0; border-top: 1px solid rgba(244,239,232,0.14); border-bottom: 1px solid rgba(244,239,232,0.14); }
.adv-goal .v { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; }
.adv-goal .l { font-size: var(--text-xs); color: var(--text-on-dark-muted); margin-top: 3px; line-height: 1.4; }
.adv-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============================================================
   Referenzen & Kundenstimmen
   ============================================================ */
.rprojects { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.rproj {
  display: flex; flex-direction: column;
  padding: var(--sp-6);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
}
.rproj .cat {
  align-self: flex-start;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.24rem 0.55rem; margin-bottom: var(--sp-4);
  background: rgba(143, 174, 155, 0.2); color: #4d7060;
}
.rproj.bank .cat { background: rgba(224, 98, 69, 0.11); color: var(--coral); }
.rproj.sport .cat { background: rgba(26, 57, 65, 0.08); color: var(--ink); }
.rproj .org { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.25; letter-spacing: -0.015em; }
.rproj .sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.rproj ul { list-style: none; margin-top: var(--sp-4); display: grid; gap: 6px; }
.rproj li { hyphens: none; position: relative; padding-left: 14px; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; }
.rproj li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
@media (max-width: 1140px) { .rprojects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rprojects { grid-template-columns: 1fr; } }

.voices-head { margin-top: var(--sp-32); padding-top: var(--sp-12); border-top: 1px solid rgba(26, 57, 65, 0.14); }

/* ============================================================
   Zitatkarten
   ============================================================ */
.qcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.qcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-8);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
}
.qcard .mark {
  font-family: var(--font-display);
  font-size: 3rem; line-height: 0.7;
  color: var(--coral); opacity: 0.5;
  margin-bottom: var(--sp-4);
}
.qcard blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.45; letter-spacing: -0.015em;
  color: var(--ink);
  quotes: "„" "“" "‚" "‘";
}
.qcard blockquote q { display: block; }
.qcard .who { margin-top: auto; padding-top: var(--sp-6); }
.qcard .who .n { font-weight: 600; font-size: var(--text-base); color: var(--ink); }
.qcard .who .r { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.qcard .src { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; margin-top: var(--sp-4); }
.qcard .src a { color: var(--text-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.qcard .src a:hover { color: var(--coral); }

.qcard.pending {
  background: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(26, 57, 65, 0.28);
  box-shadow: none;
}
.qcard.pending .mark { color: var(--sage); opacity: 0.7; }
.qcard.pending blockquote { color: var(--text-muted); font-style: italic; }
.qcard .badge {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  background: rgba(143, 174, 155, 0.22); color: #4d7060;
}
@media (max-width: 1180px) { .qcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .qcards { grid-template-columns: 1fr; } }

/* ============================================================
   Regionale Ökosysteme — Stakeholder
   ============================================================ */
.stk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
.stk {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
}
.stk .ico { background: rgba(143, 174, 155, 0.2); color: #4d7060; margin-bottom: var(--sp-2); }
.stk .role { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-deep); }
.stk h4 { font-size: 1.02rem; line-height: 1.3; }
.stk p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.stk ul { list-style: none; display: grid; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); }
.stk ul li { position: relative; padding-left: 0.95rem; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; hyphens: none; }
.stk ul li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
@media (max-width: 1000px) { .stk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .stk-grid { grid-template-columns: 1fr; } }