/* Gundlach - components.css
 * Kanonische cmp-* Komponenten-Bibliothek
 * Extrahiert und bereinigt aus design-system/KomponentenSystem.html
 *
 * HARTE REGELN (erzwungen in jeder Komponente):
 * - B4 #2F728C NUR für .dot (Akzent-Punkt) + .cmp-topbar__logo (Wortmarke)
 * - W1 #FBFAF6 Page-BG. #FFFFFF NUR als Text auf dunkel.
 * - Alternierende Sektionen über .section--alt (G1), nie über Farbe.
 * - Font-Weights: 400/500/700/800 ausschliesslich.
 * - ALL CAPS + tracking-label NUR bei 11px-Section-Labels.
 * - Italic NUR für Pull-Quotes (.pull-quote).
 * - sg-* Klassen NICHT hier - das ist Style-Guide-Gerüst, kein Produktions-Code.
 *
 * Komponenten in dieser Datei:
 * 1. ATOME: .dot · .verbinder · .cmp-tag · .cmp-tag--dark · .cmp-pill · .cmp-pill--secondary
 *    .cmp-pill--primary-on-dark · .cmp-pill--secondary-on-dark · .cmp-star
 *    .cmp-glass · .cmp-glass--dark (Glas-Material für Karten auf Fotos)
 * 2. TOPBAR / NAV: .cmp-topbar · .cmp-topbar__logo · .cmp-nav · .cmp-nav__item
 * 3. HERO SHELL: .cmp-hero · .cmp-hero__label · .cmp-hero__display · .cmp-hero__sub
 *    .cmp-hero__ctas · .cmp-hero__strip · .cmp-hero__strip-item
 * 4. SERVICE-CARD + LOGO-STRIP: .cmp-section-headline-row · .cmp-section-num
 *    .cmp-section-title · .cmp-cards-grid · .cmp-card · .cmp-card--w1 · .cmp-card--g1
 *    .cmp-card__visual · .cmp-card__body · .cmp-card__tags · .cmp-card__title
 *    .cmp-card__caption · .cmp-card__cta-row · .cmp-logo-strip · .cmp-logo-card
 *    .cmp-logo-card__mark · .cmp-logo-card__name · .cmp-logo-card__sub
 * 5. DRAMA-CARD: .cmp-drama · .cmp-drama__col-text · .cmp-drama__label
 *    .cmp-drama__display · .cmp-drama__body · .cmp-drama__tags · .cmp-drama__cta-row
 *    .cmp-drama__col-visual · .cmp-drama__visual-caption
 * 6. TESTIMONIAL: .cmp-testi-section-row · .cmp-testi-stats · .cmp-testi-stat
 *    .cmp-testi-stat__num · .cmp-testi-stat__label · .cmp-testi-grid · .cmp-testi-col
 *    .cmp-testi-hero · .cmp-testi-hero__photo · .cmp-testi-hero__rating
 *    .cmp-testi-hero__tail · .cmp-testi-hero__quote · .cmp-testi-hero__person
 *    .cmp-testi-hero__name · .cmp-testi-hero__role · .cmp-testi-card
 *    .cmp-testi-card__rating · .cmp-testi-card__quote · .cmp-testi-card__person
 *    .cmp-testi-card__person-meta · .cmp-testi-card__name · .cmp-testi-card__role
 *    .cmp-avatar
 * 7. NUMERICAL-DISPLAY: .cmp-num-block · .cmp-num-display-col · .cmp-num-label
 *    .cmp-num-headline · .cmp-num-caption · .cmp-num-mega · .cmp-num-mega__value
 *    .cmp-num-mega__index · .cmp-num-mega__cap
 * 8. FOOTER (live): .foot · .foot__cta · .foot__cols · .foot__col · .foot__giant · .foot__bottom
 *    (Block am Dateiende; das alte .cmp-footer war tote .hr-Altlast, entfernt)
 */


/* ============================================================
   1. ATOME
   Die kleinsten wiederverwendbaren Einheiten. Keine Logik.
   ============================================================ */

/* Akzent-Punkt - 5–6px B4-Kreis. DAS wiederkehrende Atom.
   Erscheint in: Topbar-Logo, Nav-Aktiv-Marker, Section-Labels,
   Hero-Label, Pill-Detail, Footer-Wortmarke, Numerical-Index.
   B4 #2F728C ist der einzige Ort, wo diese Farbe erscheint. */
.dot {
  display: inline-block;
  width: var(--dot-size);          /* 6px */
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--color-b4);
  flex-shrink: 0;
}

.dot--sm {
  width: var(--dot-size-sm);       /* 5px */
  height: var(--dot-size-sm);
}

/* Verbinder - erbt die Farbe der Überschrift (schwarz auf hell, weiss auf dunkel).
   Früher grau (Two-Tone), auf Olivers Wunsch einfarbig. */
.verbinder {
  color: inherit;
}

/* Section-Label - 11px Versalien, Tracking 0.4px.
   Einziger erlaubter Ort für ALL CAPS + tracking-label. */
.section-label {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-g3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  line-height: var(--lh-label);
}

/* ── Tags ── */

/* Tag auf hell: G1-BG + 1px G2-Border + schwarzer Text */
.cmp-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--type-tag);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tag);
  color: var(--color-black);
  background: var(--color-w1);
  border: 1px solid var(--color-g2);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  line-height: 1.3;
}

/* Tag auf G1-Card: ohne Border (W1-BG = sichtbarer Kontrast zu G1-Card) */
.cmp-card--g1 .cmp-tag {
  background: var(--color-w1);
  border-color: transparent;
}

/* Tag auf dunkel: --color-pill-dark BG (#2A2A2A) + W1-Text */
.cmp-tag--dark {
  background: var(--color-pill-dark);
  color: var(--color-w1);
  border: 1px solid transparent;
}

/* ── Pills (Buttons) ── */

.cmp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-weight: var(--weight-medium);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
  transition: transform 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.cmp-pill:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.cmp-pill:active {
  transform: translateY(0);
}

/* Pill-Dot: 5px B4 (kleiner als Section-Dot 6px) */
.cmp-pill .dot {
  width: var(--dot-size-sm);
  height: var(--dot-size-sm);
  background: var(--color-b4);
}

/* Primär auf hell: Schwarz BG + W1-Text */
.cmp-pill--primary {
  background: var(--color-black);
  color: var(--color-w1);
  border-color: var(--color-black);
}

.cmp-pill--primary:hover {
  color: var(--color-w1);
}

/* Sekundär auf hell: transparent + Schwarz-Border + Schwarz-Text */
.cmp-pill--secondary {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}

.cmp-pill--secondary:hover {
  color: var(--color-black);
}

/* Primär auf dunkel: W1-BG + Schwarz-Text */
.cmp-pill--primary-on-dark {
  background: var(--color-w1);
  color: var(--color-black);
  border-color: var(--color-w1);
}

.cmp-pill--primary-on-dark:hover {
  color: var(--color-black);
}

/* Sekundär auf dunkel: transparent + W1-Border + W1-Text */
.cmp-pill--secondary-on-dark {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.cmp-pill--secondary-on-dark:hover {
  color: var(--color-white);
}

/* Stern-Atom - B4-Akzent, CSS clip-path, kein Icon-Font */
.cmp-star {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--color-b4);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  flex-shrink: 0;
}

/* ── Glas-Material - EIN Rezept für Karten/Kacheln AUF FOTOS ──
   2026-06-12 Material-Pass: vereinheitlicht Hero-Kacheln + Pakete-Karten.
   Tönung: hell (Default) / dunkel (--dark). Der FROST-GRAD bleibt pro
   Einsatzort justierbar (--glass-alpha / --glass-blur - Olivers abgenommene
   Grade unangetastet). Konstant im System: Border 0.14 · saturate 1.3 ·
   Token-Radius. (Die Topbar-Pille nutzt dasselbe Rezept eigenständig -
   wegen Intro-Morph + adaptiver Hell/Dunkel-Logik bewusst getrennt.) */
.cmp-glass {
  --glass-alpha: 0.10;
  --glass-blur: 6px;
  --glass-radius: var(--radius-card);
  background: rgba(255, 255, 255, var(--glass-alpha));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--glass-radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}

.cmp-glass--dark {
  background: rgba(22, 22, 24, var(--glass-alpha));
}


/* ============================================================
   2. TOPBAR / NAV
   Position sticky. Dotted-Border-Signatur (Etienne).
   NUTZUNG: <header class="cmp-topbar"> in <body>, vor <main>.
   ============================================================ */

.cmp-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;        /* schwebend: EINE kompakte Glas-Pille, mittig */
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;        /* Pille mittig statt über volle Breite */
  height: var(--topbar-h);

  /* Glas-Leiste - an EINER Stelle justierbar (analog --pak-* bei §03) */
  --bar-blur: 6px;                /* dezenter Frost */
  --bar-radius: 999px;            /* kompakte Pille */
  --bar-alpha-dark: 0.10;         /* Tönung über DUNKLEM Untergrund (Hero/Pakete/…) */
  --bar-alpha-light: 0.05;        /* Tönung über HELLEM Untergrund (Unterseiten/§02) */
}

/* Schwebende Glas-Leiste - fasst Logo + Nav zu EINER Fläche zusammen, damit das
   Logo nicht mehr "nackt" über der durchlaufenden Headline verschmiert.
   Der Frost liegt auf ::before (NICHT auf .cmp-topbar__bar selbst), sonst würde
   die bar zum containing-block für das position:fixed Mobile-Overlay
   (.cmp-nav--open) und das Menü säße falsch. */
.cmp-topbar__bar {
  position: relative;
  flex: 0 0 auto;                 /* nur so breit wie Inhalt → kompakte Pille, mittig */
  display: flex;
  align-items: center;
  gap: 22px;                      /* Abstand Logo ↔ Nav */
  padding: 6px 10px 6px 20px;     /* links: Logo-Luft · rechts: Nav-Pillen */
  border-radius: var(--bar-radius);
}
.cmp-topbar__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, var(--bar-alpha-light));     /* default = heller Untergrund */
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(var(--bar-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(1.3);
  transition: background 0.35s ease, border-color 0.35s ease;
  z-index: -1;
  pointer-events: none;
}

.cmp-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Wortmarke - B4 #2F728C. EINZIGER Ort für B4 außer .dot */
.cmp-topbar__logo {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);   /* 800 */
  font-size: 22px;
  letter-spacing: -0.6px;
  color: var(--color-b4);               /* B4 - NUR hier und beim dot */
  display: inline-flex;
  align-items: baseline;
  gap: var(--logo-dot-gap);   /* Logo-Lockup (tokens.css) - wie Intro-Wortmarke */
  text-decoration: none;
  line-height: 1;
}

.cmp-topbar__logo:hover {
  color: var(--color-b4);              /* Bleibt B4 beim Hover - kein Farbwechsel */
  text-decoration: none;
}

/* Logo-Dot - Lockup-Relation aus tokens.css (identisch zur Intro-Wortmarke) */
.cmp-topbar__logo .dot {
  width: var(--logo-dot-size);
  height: var(--logo-dot-size);
  transform: translateY(var(--logo-dot-y));
}

/* Nav-Items - Segmented-Control INNERHALB der Glas-Leiste (.cmp-topbar__bar).
   Kein eigenes Glas mehr: der Frost liegt jetzt gemeinsam auf der bar. */
.cmp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 999px;
}

/* Nav-Item - Pille im Capsule */
.cmp-nav__item {
  position: relative;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--type-body);         /* 15px */
  font-weight: var(--weight-medium);   /* 500 */
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.cmp-nav__item:hover {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

/* Aktiver Tab - gefüllte Pille (Segmented-Control). Monochrom, KEIN B4. */
.cmp-nav__item--active,
.cmp-nav__item--active:hover {
  background: var(--color-w1);
  color: var(--color-black);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

/* ── Adaptiver Header über DUNKLEM Untergrund (Hero/Pakete/Numerical/Footer) ──
   nav.js setzt .is-over-dark, wenn eine [data-topbar="dark"]-Zone hinter dem
   Header liegt. Heller Look: weiße Nav-Schrift, Glas-Capsule. */
.cmp-topbar.is-over-dark .cmp-topbar__bar::before {
  background: rgba(255, 255, 255, var(--bar-alpha-dark));
  border-color: rgba(255, 255, 255, 0.14);
}
.cmp-topbar.is-over-dark .cmp-nav__item {
  color: rgba(255, 255, 255, 0.82);
}
.cmp-topbar.is-over-dark .cmp-nav__item:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.14);
}
.cmp-topbar.is-over-dark .cmp-nav__item--active,
.cmp-topbar.is-over-dark .cmp-nav__item--active:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  box-shadow: none;
}

/* Hamburger adaptiv: weiße Linien über dunklem Untergrund */
.cmp-topbar.is-over-dark .cmp-topbar__toggle span {
  background: var(--color-white);
}

/* Logo auf dunklem Untergrund: dezenter Schatten für Lesbarkeit auf unruhigen
   Bildbereichen. Farbe bleibt B4 (Wortmarken-Regel unangetastet). */
.cmp-topbar.is-over-dark .cmp-topbar__logo {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

/* Hamburger-Toggle - 3 Linien, mobil sichtbar */
.cmp-topbar__toggle {
  width: 28px;
  height: 18px;
  display: none;               /* Desktop: versteckt. Mobile: flex via @media */
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.cmp-topbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Toggle-Aktiv-Zustand (via JS gesetzt: data-open="true") */
.cmp-topbar__toggle[data-open="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.cmp-topbar__toggle[data-open="true"] span:nth-child(2) {
  opacity: 0;
}
.cmp-topbar__toggle[data-open="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Nav-Overlay (via JS gesetzt: .cmp-nav--open) - immer W1/opak/eckig,
   überschreibt Desktop-Capsule + adaptiven Look (siehe @media 768 unten). */
.cmp-nav--open {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  background: var(--color-w1);
  border-radius: 0;
  border-bottom: var(--border-dotted);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-md) var(--container-pad-mobile);
  z-index: 99;
}

.cmp-nav--open .cmp-nav__item {
  font-size: var(--type-body-lg);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-dotted);
  width: 100%;
}

.cmp-nav--open .cmp-nav__item:last-child {
  border-bottom: none;
}


/* ============================================================
   3. HERO SHELL
   Nur Shell und Slots - KEIN konkreter Inhalt.
   Phase 1 füllt: BG-Bild, Two-Tone-Headlines, CTAs.
   ============================================================ */

.cmp-hero {
  padding: 96px var(--container-pad) 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}

/* Eyebrow-Label - 11px Versalien B4-Punkt */
.cmp-hero__label {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: var(--weight-regular);
  color: var(--color-g3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: var(--lh-label);
}

/* Display-Headline (Two-Tone fähig: .verbinder erhält G3-Farbe) */
.cmp-hero__display {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);  /* 800 */
  font-size: clamp(40px, 6vw, 72px);
  line-height: var(--lh-display-hero); /* 1.0 */
  letter-spacing: var(--tracking-display-hero); /* -1.5px */
  color: var(--color-black);
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Sub-Text */
.cmp-hero__sub {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-g3);
  max-width: 620px;
  margin: 0;
}

/* CTA-Zeile */
.cmp-hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--space-xs);
}

/* Service-Strip - dotted Top-Border (Etienne-Signatur), 4 Spalten */
.cmp-hero__strip {
  margin-top: var(--space-sm);
  border-top: var(--border-dotted);
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.cmp-hero__strip-item {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-g3);
  letter-spacing: 0.2px;
}

.cmp-hero__strip-item strong {
  display: block;
  color: var(--color-black);
  font-weight: var(--weight-bold);
  font-size: 14px;
  margin-bottom: 4px;
}


/* ============================================================
   4. SERVICE-CARD + LOGO-STRIP
   Zwei helle Karten-Varianten (W1-Standard, G1-leise) +
   Logo-Card-Strip (Platzhalter, Phase 1).
   ============================================================ */

/* Sektions-Header im Etienne-Look - Nummer rechts */
.cmp-section-headline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-md);
  padding: 56px var(--container-pad) 32px;
}

.cmp-section-num {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 36px;
  color: var(--color-g3);
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}

/* Section-Inner-Title (Display 800, Two-Tone fähig) */
.cmp-section-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);   /* 800 */
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-black);
  margin: 0;
}

.cmp-section-title .verbinder {
  color: inherit;
}

/* Section-Title mit kleinem Abstand zur Eyebrow darüber (ersetzt Inline-Style) */
.cmp-section-title--push { margin-top: var(--space-sm); }

/* Section-Title auf dunklem BG - W1 statt Black */
.cmp-section-title--on-dark {
  color: var(--color-white);
}

/* Card-Grid (2 Spalten Desktop) */
.cmp-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding: 40px var(--container-pad);
}

.cmp-cards-grid--single {
  grid-template-columns: 1fr;
}

/* Drei gleiche Spalten - für §03 Pakete und §08 Aktuelles (3 Cards) */
.cmp-cards-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .cmp-cards-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cmp-cards-grid--three {
    grid-template-columns: 1fr;
  }
}

/* Basis-Card */
.cmp-card {
  border-radius: var(--radius-card);    /* 20px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.cmp-card:hover {
  transform: translateY(-2px);
}

/* Card-Variante Standard: W1-BG + 1px G2-Border */
.cmp-card--w1 {
  background: var(--color-w1);
  border: var(--border-hair);
}

/* Card-Variante Leise: G1-BG, ohne Border */
.cmp-card--g1 {
  background: var(--color-g1);
  border: 1px solid transparent;
}

/* Visual-Slot - Gradient-Stub, Phase 1 ersetzt durch echte Bilder */
.cmp-card__visual {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,114,140,0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(91,149,168,0.14) 0%, transparent 55%),
    linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--space-sm);
  overflow: hidden;
}

/* Visual-Tag im Bild-Bereich */
.cmp-card__visual-tag {
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-g2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Card-Body */
.cmp-card__body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Tags-Reihe */
.cmp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

/* Card-Title - H2-Größe, Bold 700 */
.cmp-card__title {
  font-family: var(--font-sans);
  font-size: var(--type-h2);           /* 24px */
  font-weight: var(--weight-bold);     /* 700 */
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-black);
  margin: 0;
}

/* Card-Caption - Body-Text, G3 */
.cmp-card__caption {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--color-g3);
  margin: 0;
  flex: 1;
}

/* CTA-Reihe unten rechts */
.cmp-card__cta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--space-xs);
}

/* ── Logo-Strip ── */

/* 6-spaltig Desktop, greyscale/monochrom */
.cmp-logo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 0 40px 40px;
}

/* Logo-Card - quadratisch, zentriert */
.cmp-logo-card {
  background: var(--color-w1);
  border: var(--border-hair);
  border-radius: var(--radius-card-sm);
  aspect-ratio: 1 / 1;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

/* Logo-Placeholder-Marke - rund, Anthrazit-Verlauf */
.cmp-logo-card__mark {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-pill-dark), var(--color-drama));
  color: var(--color-w1);
  font-weight: var(--weight-display);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cmp-logo-card__name {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--color-black);
  line-height: 1.25;
  margin: 0;
}

.cmp-logo-card__sub {
  font-size: 10px;
  color: var(--color-g3);
  line-height: 1.3;
  margin: 0;
}


/* ============================================================
   5. DRAMA-CARD
   Anthrazit #1A1A1A BG + B4/B3R-Wash + Two-Tone auf Dunkel.
   AI-Verlauf-Slot rechts (Phase 2 ersetzt durch echtes Visual).
   Harte Regel: --color-drama (#1A1A1A) für BG, nicht #2A2A2A.
   ============================================================ */

.cmp-drama {
  position: relative;
  background:
    radial-gradient(circle at 18% 22%, rgba(47,114,140,0.22) 0%, transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(91,149,168,0.18) 0%, transparent 42%),
    linear-gradient(150deg, #0F0F0F 0%, var(--color-drama) 45%, #232323 100%);
  color: var(--color-w1);
  border-radius: var(--radius-card-lg);  /* 24px */
  padding: 56px 56px 48px;
  margin: var(--space-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.cmp-drama__col-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Label auf Drama-BG - G2 Text + B4-Punkt */
.cmp-drama__label {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-g2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: var(--lh-label);
}

/* Display auf Dunkel - W1-Wörter + G3-Verbinder (Two-Tone Dunkel) */
.cmp-drama__display {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);   /* 800 */
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-w1);
  margin: 0;
}

.cmp-drama__display .verbinder {
  color: inherit;
}

/* Optionaler B3R-Spotlight - nur auf Dunkel, sehr sparsam */
.cmp-drama__display .spotlight {
  color: var(--color-b3r);
}

/* Body auf Drama - G2 (lesbar auf #1A1A1A) */
.cmp-drama__body {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-g2);
  margin: 0;
  max-width: 540px;
}

.cmp-drama__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.cmp-drama__cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-xs);
}

/* AI-Verlauf-Slot - Gradient-Stub, Phase 2 ersetzt durch echtes AI-Visual */
.cmp-drama__col-visual {
  position: relative;
  border-radius: var(--radius-card);
  min-height: 320px;
  background:
    radial-gradient(circle at 30% 30%, rgba(91,149,168,0.55) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(47,114,140,0.4) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%),
    linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

/* Punkt-Streufeld als atmosphärischer Stub für AI-Visual */
.cmp-drama__col-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.65) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(47,114,140,0.8) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 2px);
  background-size: 240px 240px, 180px 180px, 90px 90px;
  background-position: 20% 35%, 70% 60%, 40% 80%;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

/* Visual-Caption */
.cmp-drama__visual-caption {
  position: relative;
  z-index: 1;
  font-size: var(--type-caption);
  color: var(--color-g2);
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}


/* ============================================================
   6. TESTIMONIAL
   Hero-Variante (Foto 4:5 + Drama-Tail) + Standard-Card.
   WICHTIG: NUR Platzhalter-Inhalte - vor Launch echte,
   freigegebene Stimmen einsetzen oder Sektion ausblenden (UWG).
   ============================================================ */

/* Section-Row: Stats links, Title rechts */
.cmp-testi-section-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  padding: 56px 40px 32px;
}

/* Stats-Spalte */
.cmp-testi-stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}

/* Einzelne Stat-Zeile mit Bottom-Border-Trenner */
.cmp-testi-stat {
  border-bottom: var(--border-hair);
  padding-bottom: 12px;
}

.cmp-testi-stat:last-child {
  border-bottom: none;
}

/* Stat-Zahl - 36px ExtraBold */
.cmp-testi-stat__num {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);  /* 800 */
  font-size: 36px;
  line-height: 1.0;
  letter-spacing: -0.6px;
  color: var(--color-black);
  margin: 0 0 4px;
}

/* Stat-Label - Caption G3 */
.cmp-testi-stat__label {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--color-g3);
  line-height: var(--lh-caption);
  margin: 0;
}

/* Testimonial-Grid: Hero links, 2 Standard-Cards rechts */
.cmp-testi-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-md);
  padding: 0 40px 40px;
  align-items: stretch;
}

/* Stacked Column (für 2 Standard-Cards rechts) */
.cmp-testi-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── Hero-Testimonial-Card ── */

/* G1-BG Wrapper */
.cmp-testi-hero {
  background: var(--color-g1);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Foto-Frame - aspect 4:5, Gradient-Stub */
.cmp-testi-hero__photo {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.4) 0%, transparent 35%),
    linear-gradient(170deg, #C9C9C7 0%, #9A9A98 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-sm);
  overflow: hidden;
}

/* Rating-Pill auf Foto */
.cmp-testi-hero__rating {
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Drama-Tail - Anthrazit #1A1A1A (gleicher Token wie Drama-Card) */
.cmp-testi-hero__tail {
  background: var(--color-drama);
  color: var(--color-w1);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Pull-Quote - 20px Regular (Italic erlaubt bei Pull-Quotes) */
.cmp-testi-hero__quote {
  font-family: var(--font-sans);
  font-size: var(--type-quote);
  line-height: 1.4;
  color: var(--color-w1);
  margin: 0;
  font-weight: var(--weight-regular);
}

.cmp-testi-hero__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmp-testi-hero__name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--color-w1);
  margin: 0;
}

.cmp-testi-hero__role {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-g2);
  margin: 0;
}

/* ── Standard-Testimonial-Card ── */

/* W1-BG + 1px G2-Border */
.cmp-testi-card {
  background: var(--color-w1);
  border: var(--border-hair);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.cmp-testi-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Quote - 17px Regular */
.cmp-testi-card__quote {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-black);
  margin: 0;
}

.cmp-testi-card__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

/* Avatar - 44px rund, Anthrazit-Verlauf, Initial-Fallback */
.cmp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pill-dark), var(--color-drama));
  color: var(--color-w1);
  font-weight: var(--weight-display);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cmp-testi-card__person-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cmp-testi-card__name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--color-black);
  margin: 0;
}

.cmp-testi-card__role {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-g3);
  margin: 0;
}


/* ============================================================
   7. NUMERICAL-DISPLAY
   Mega-Zahl rechts, Display-Headline + Caption links.
   B4-Index-Marker mit Ziffer als Akzent (der EINZIGE B4-Kreis
   der größer als 6px ist - 26px als Index-Badge).
   ============================================================ */

/* 3-Spalten-Grid mit dotted Top-Border (Etienne-Signatur) */
.cmp-num-block {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items: end;
  gap: var(--space-lg);
  padding: 64px 40px 56px;
  border-top: var(--border-dotted);
}

/* Text-Spalte */
.cmp-num-display-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Label - 11px Versalien B4-Punkt */
.cmp-num-label {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-g3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: var(--lh-label);
}

/* Inner Display-Headline (Two-Tone fähig) */
.cmp-num-headline {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);  /* 800 */
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-black);
  margin: 0;
}

.cmp-num-headline .verbinder {
  color: inherit;
}

/* Caption unter dem Headline */
.cmp-num-caption {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--color-g3);
  margin: 0;
  max-width: 360px;
}

/* Mega-Zahl-Container */
.cmp-num-mega {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 8px;
}

/* Mega-Zahl - ExtraBold 800, sehr groß */
.cmp-num-mega__value {
  font-family: var(--font-sans);
  font-weight: var(--weight-display);
  font-size: clamp(72px, 17vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--color-black);
  margin: 0;
  position: relative;
  white-space: nowrap;
}

/* Index-Marker - 26px B4-Badge mit weißer Ziffer */
.cmp-num-mega__index {
  position: absolute;
  top: 8px;
  right: -28px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-b4);   /* B4 - erlaubt hier als Index-Badge */
  color: var(--color-white);
  font-size: 13px;
  font-weight: var(--weight-display);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Unter-Zeile / Caption rechts */
.cmp-num-mega__cap {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--color-g3);
  margin-top: var(--space-xs);
  text-align: right;
  letter-spacing: 0.3px;
}




/* ============================================================
   §08 AKTUELLES - kleine Hilfs-Klassen (ersetzt Inline-Styles)
   ============================================================ */

/* Datum-Zeile unter Card-Caption */
.cmp-card__date {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--color-g3);
  margin: 0;
  line-height: var(--lh-caption);
}

/* "Alle Notizen"-CTA - Ausrichtung rechts mit Sektion-Padding */
.cmp-aktuelles__all-cta {
  display: flex;
  justify-content: flex-end;
  padding: 0 40px 56px;
  margin-top: -8px;
}

@media (max-width: 1024px) {
  .cmp-aktuelles__all-cta {
    padding: 0 28px 40px;
  }
}

@media (max-width: 768px) {
  .cmp-aktuelles__all-cta {
    padding: 0 20px 32px;
  }
}


/* ============================================================
   SLIDE-IN BASELINE (Phase 2a)
   Ruhige, JS-freie Entrance-Animation für alle Sektionen.
   Phase 2b überschreibt Hero + §04 mit GSAP ScrollTrigger.
   prefers-reduced-motion: Animation vollständig deaktiviert.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .slide-in {
    opacity: 0;
    transform: translateY(24px);
    animation: slideInUp 0.55s ease forwards;
  }

  /* Gestaffelte Delays für Cards innerhalb eines Grids */
  .slide-in-grid > *:nth-child(1) { animation-delay: 0.05s; }
  .slide-in-grid > *:nth-child(2) { animation-delay: 0.13s; }
  .slide-in-grid > *:nth-child(3) { animation-delay: 0.21s; }
  .slide-in-grid > *:nth-child(4) { animation-delay: 0.29s; }

  @keyframes slideInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Wenn JS nicht verfügbar: alles sichtbar (no-js-safe) */
.slide-in,
.slide-in-grid > * {
  /* Basis: sichtbar ohne JS/Animation. JS setzt class, CSS animiert dann. */
}


/* ============================================================
   RESPONSIVE - Breakpoints aus tokens.css
   ============================================================ */

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {

  /* Topbar */
  .cmp-topbar {
    padding: 20px 28px;
  }
  .cmp-nav {
    gap: 20px;
  }

  /* Hero */
  .cmp-hero {
    padding: 64px 28px 80px;
    gap: var(--space-md);
  }
  .cmp-hero__strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Service-Cards */
  .cmp-cards-grid {
    padding: 28px;
  }
  .cmp-section-headline-row {
    padding: 40px 28px 24px;
  }
  .cmp-logo-strip {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 28px 28px;
  }

  /* Drama-Card */
  .cmp-drama {
    grid-template-columns: 1fr;
    padding: 40px 36px 36px;
    margin: var(--space-md);
    gap: var(--space-lg);
  }
  .cmp-drama__col-visual {
    min-height: 220px;
  }

  /* Testimonial */
  .cmp-testi-section-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: 40px 28px 24px;
  }
  .cmp-testi-grid {
    padding: 0 28px 28px;
  }

  /* Numerical */
  .cmp-num-block {
    grid-template-columns: 1fr;
    padding: 48px 28px 40px;
    gap: var(--space-md);
    align-items: start;
  }
  .cmp-num-mega {
    justify-content: flex-start;
  }
}

/* ── MOBILE (≤ 768px) ── */
@media (max-width: 768px) {

  /* Topbar - Nav ausblenden, Toggle sichtbar */
  .cmp-topbar {
    padding: 16px 20px;
  }
  .cmp-nav {
    display: none;   /* JS zeigt .cmp-nav--open an */
  }
  .cmp-topbar__toggle {
    display: flex;
  }

  /* Mobile-Overlay: Schrift immer dunkel (W1-Grund), Pillen neutral -
     überschreibt den adaptiven Desktop-Look (.is-over-dark) im offenen Menü. */
  .cmp-topbar.is-over-dark .cmp-nav--open .cmp-nav__item,
  .cmp-nav--open .cmp-nav__item {
    color: var(--color-black);
    background: transparent;
  }
  .cmp-topbar.is-over-dark .cmp-nav--open .cmp-nav__item--active,
  .cmp-nav--open .cmp-nav__item--active {
    background: transparent;
    box-shadow: none;
  }

  /* Hero */
  .cmp-hero {
    padding: 48px 20px 64px;
    gap: var(--space-md);
  }
  .cmp-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cmp-hero__ctas .cmp-pill {
    justify-content: center;
  }
  .cmp-hero__strip {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Service-Cards */
  .cmp-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: 20px;
  }
  .cmp-section-headline-row {
    grid-template-columns: 1fr;
    padding: 28px 20px 16px;
    gap: var(--space-xs);
  }
  .cmp-section-num {
    font-size: 24px;
    text-align: right;
  }
  .cmp-logo-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px 20px;
  }

  /* Drama-Card */
  .cmp-drama {
    padding: 28px 24px 28px;
    margin: var(--space-sm);
    border-radius: var(--radius-card);
    gap: var(--space-md);
  }
  .cmp-drama__col-visual {
    min-height: 180px;
  }
  .cmp-drama__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cmp-drama__cta-row .cmp-pill {
    justify-content: center;
  }

  /* Testimonial */
  .cmp-testi-section-row {
    padding: 28px 20px 16px;
  }
  .cmp-testi-stats {
    gap: 12px;
  }
  .cmp-testi-stat__num {
    font-size: 28px;
  }
  .cmp-testi-grid {
    grid-template-columns: 1fr;
    padding: 0 20px 20px;
    gap: var(--space-sm);
  }
  .cmp-testi-hero__photo {
    aspect-ratio: 4 / 3;
  }
  .cmp-testi-hero__tail {
    padding: 22px 22px 20px;
  }
  .cmp-testi-card {
    padding: 22px;
  }

  /* Numerical */
  .cmp-num-block {
    padding: 40px 20px 32px;
  }
  .cmp-num-mega__index {
    right: -20px;
    top: 4px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* ============================================================
   FOOTER (.foot) - globaler dunkler Seiten-Footer
   Identisch auf index/ki/payroll/aktuelles. Vorher inline 4×
   dupliziert → hier als einzige Quelle der Wahrheit.
   ============================================================ */
.foot{background:#121214;color:var(--color-g2)}
.foot__cta{max-width:var(--container-max);margin:0 auto;padding:clamp(64px,9vh,104px) var(--container-pad) clamp(40px,5vh,64px);
  border-bottom:1px solid #2A2A2C;text-align:center}
.foot__cta-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--color-g3);display:inline-flex;align-items:center;gap:9px;margin:0 0 16px}
.foot__cta-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--color-b4);flex:none}
.foot__cta-h{font-family:var(--font-sans);font-weight:var(--weight-display);font-size:clamp(30px,4.2vw,52px);
  line-height:1.05;letter-spacing:-1.2px;color:var(--color-white);margin:0 0 28px;max-width:18ch;margin-inline:auto}
.foot__person{font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--lh-body);
  color:var(--color-g3);max-width:52ch;margin:26px auto 0}
.foot__person strong{color:var(--color-g2);font-weight:var(--weight-medium)}
.foot__person-links{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:10px}
.foot__person-links a{color:var(--color-g2);text-decoration:none;border-bottom:1px solid #3A3A3C;padding-bottom:1px}
.foot__person-links a:hover{color:var(--color-white);border-bottom-color:var(--color-g3)}
.foot__cols{max-width:var(--container-max);margin:0 auto;padding:clamp(40px,6vh,72px) var(--container-pad) 32px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.foot__col h3{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--color-g3);margin:0 0 16px;font-weight:var(--weight-regular)}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot__col a{font-family:var(--font-sans);font-size:var(--type-body);color:var(--color-g2);text-decoration:none}
.foot__col a:hover{color:var(--color-white)}
.foot__giant{font-family:var(--font-sans);font-weight:var(--weight-display);font-size:clamp(72px,18vw,260px);
  line-height:0.9;letter-spacing:-0.05em;color:var(--color-white);text-align:center;padding:clamp(40px,6vh,80px) var(--container-pad) clamp(32px,5vh,64px);
  display:flex;align-items:baseline;justify-content:center;gap:0.06em}
.foot__giant .dot{width:0.12em;height:0.12em;border-radius:50%;background:var(--color-b4);display:inline-block}
.foot__bottom{max-width:var(--container-max);margin:0 auto;padding:24px var(--container-pad) 48px;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;color:var(--color-g3)}
.foot__bottom a{color:var(--color-g3);text-decoration:none}
.foot__bottom a:hover{color:var(--color-white)}
@media(max-width:768px){ .foot__cols{grid-template-columns:1fr 1fr} }

/* ============================================================
   BLOCK (.block) - numerierte Inhalts-Block-Liste
   Identisch genutzt auf payroll + ki. Der .blocks-Container und
   ki-spezifisches .blocks__lead bleiben inline je Seite
   (Top-Padding/Lead variiert). Farbakzent via --zone (pro Seite).
   ============================================================ */
.block{padding:30px 0;border-top:1px solid var(--color-g2);display:flex;gap:22px;align-items:flex-start}
.block__n{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;color:var(--zone);min-width:34px;padding-top:5px}
.block__body{flex:1}
.block__t{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--type-h2);margin:0;color:var(--color-black)}
.block__d{color:var(--color-g3);font-size:var(--type-body);line-height:var(--lh-body);margin:7px 0 0;max-width:52ch}
.block__soon{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--color-g3);border:1px dashed var(--color-g2);padding:4px 10px;border-radius:999px;align-self:center;white-space:nowrap}