/* arrow.css */
/* Pfeil — geteiltes Primitive für Button UND Link. EIN SVG-Asset, Richtung via Rotation. */
.ob-arrow {
  flex: none;
  transition: transform .3s ease-out;
  transform: rotate(var(--ob-arrow-rot, 0deg));
}
.ob-arrow--down     { --ob-arrow-rot: 90deg; }
.ob-arrow--up-right { --ob-arrow-rot: -45deg; }


/* badge.css */
/* Badge — kleines Label-Chip. Varianten aus dem Entwurf: default (Soft-Tag, A),
   --label (uppercase, B), --ondark (dunkle Sektionen, C). Kein Orange (nicht im Entwurf).
   Typo auf unserer Skala (fs-eyebrow) statt der 9px des Entwurfs. */
.ob-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--ob-font);
  font-size: var(--ob-fs-badge); /* einziger Größen-Regler — Padding/Gap skalieren via em mit */
  font-weight: var(--ob-weight-semibold);
  line-height: 1;
  padding: 0.6em 0.9em;
  border-radius: var(--ob-radius-pill);
  border: 1px solid transparent;
  background: var(--ob-magenta-bg);
  color: var(--ob-magenta-deep); /* 9,39:1 auf magenta-bg — AA ✓ */
}

/* Label — UPPERCASE + Tracking (Kategorie-/Themen-Label) */
.ob-badge--label {
  text-transform: uppercase;
  letter-spacing: var(--ob-tracking-eyebrow);
}

/* On-Dark — für dunkle Sektionen: transluzenter Tint + Rose + Rose-Border (Rose 7,6:1 ✓) */
.ob-badge--ondark {
  background: color-mix(in srgb, var(--ob-scheme-label, var(--ob-rose)) 15%, transparent);
  border-color: color-mix(in srgb, var(--ob-scheme-label, var(--ob-rose)) 35%, transparent);
  color: var(--ob-scheme-label, var(--ob-rose));
}


/* button.css */
/* Button — Pill. Varianten aus dem ChatGPT-Entwurf abgeleitet, Token-basiert.
   primary = Gradient (neu), solid = einfarbig (Alt-Primär), outline/light = Navy. */

.ob-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-2);
  font-family: var(--ob-font);
  font-size: var(--ob-fs-body);
  font-weight: var(--ob-weight-semibold);
  line-height: 1.2;
  padding: var(--ob-space-4) var(--ob-space-6);
  border-radius: var(--ob-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.ob-btn:focus-visible { outline: 3px solid var(--ob-color-primary); outline-offset: 2px; }
/* auf gefülltem Magenta hebt sich Navy besser ab (AA: Fokus ≥ 3:1) */
.ob-btn--primary:focus-visible, .ob-btn--solid:focus-visible { outline-color: var(--ob-navy); }
.ob-btn[disabled], .ob-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ob-btn:hover { transform: translateY(-1px); } /* alle Varianten heben wie der Primary */

/* Primär — Gradient-Fill (Entwurf), magenta-getönter Schatten */
.ob-btn--primary {
  position: relative;
  overflow: hidden; /* Spotlight auf die Pill clippen */
  isolation: isolate;
  background: var(--ob-gradient-primary);
  background-origin: border-box; /* NACH dem Shorthand → konsistent mit clip:border-box, kein Rand-Bleed */
  color: var(--ob-color-inverse);
  border-color: transparent;
  box-shadow: var(--ob-shadow-button);
}
.ob-btn--primary:hover { box-shadow: var(--ob-shadow-md); color: var(--ob-color-inverse); } /* Text weiss halten (schlaegt Consumer-a:hover) */

/* Cursor-folgender Spotlight — Overlay unter dem Text (z-index -1), erst beim Hover sichtbar.
   Position via --ob-spot-x/y, gesetzt vom Behavior spotlight.js (~60fps, rAF). */
.ob-btn--primary:not(.ob-btn--icon)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Highlight in der Magenta-Familie (Rose), KEIN Weiß → belebt statt umfärbt.
     Position via --ob-spot-x/y (plain Custom Props, erben ins ::before). */
  background: radial-gradient(circle at var(--ob-spot-x, 50%) var(--ob-spot-y, 50%),
              color-mix(in srgb, var(--ob-rose) 60%, transparent), transparent 50%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ob-btn--primary:not(.ob-btn--icon):hover::before { opacity: 1; }

/* Solid — einfarbiges Magenta, Hover invertiert (Bestands-CI) */
.ob-btn--solid {
  background: var(--ob-color-primary);
  color: var(--ob-color-inverse);
  border-color: var(--ob-color-primary);
  box-shadow: var(--ob-shadow-button);
}
.ob-btn--solid:hover { background: transparent; color: var(--ob-color-primary); box-shadow: none; }

/* Outline — Navy Text+Border, transluzenter Grund (Entwurf) */
.ob-btn--outline {
  background: rgba(255, 255, 255, .58);
  color: var(--ob-color-ink);
  border-color: rgba(16, 42, 67, .42);
}
.ob-btn--outline:hover { border-color: var(--ob-color-primary); }

/* Light — auf Farbe/dunkel: weißer Fill, Navy Text (Entwurf) */
.ob-btn--light {
  background: var(--ob-scheme-btn-bg, var(--ob-white));
  color: var(--ob-scheme-btn-fg, var(--ob-color-ink));
  border-color: var(--ob-scheme-btn-bg, var(--ob-white));
}
.ob-btn--light:hover {
  background: transparent;
  color: var(--ob-scheme-btn-bg, var(--ob-white));
  border-color: var(--ob-scheme-btn-bg, var(--ob-white));
}

/* Kompakt (Entwurf: "Alle Produkte", ~h44 / 13px) */
.ob-btn--sm {
  font-size: var(--ob-fs-eyebrow);
  font-weight: var(--ob-weight-semibold);
  padding: var(--ob-space-2) var(--ob-space-5);
}

/* Icon — runder Pfeil-Button (Entwurf: Produktfinder-Float). Mit --primary/--solid kombinieren. */
.ob-btn--icon {
  padding: 0;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--ob-radius-pill);
  justify-content: center;
}
.ob-btn--icon .ob-arrow { width: 22px; height: 22px; }
/* Pfeil-Primitive: siehe arrow.css (.ob-arrow, geteilt mit ob-link). */


/* card.css */
/* Card (Molekül) — geteilte Karten-Grundfigur für Produkt-, Wissens- und Team-Karten
   (Entwurf W5 / W7 / W8). Aufbau: Media-Bereich oben (eigenes Seitenverhältnis, overflow) +
   Body (Eyebrow + Titel + Text) + optionaler Footer. Reuse im Body/Footer: ob-eyebrow,
   ob-badge (Tag-Pills), ob-btn--icon (Produkt-CTA). Design-exakt aus dem Entwurf gemessen.
   Varianten:
     --product : quadratischeres Media + getönter Media-Grund + Orbit-Deko (rechts unten,
                 gleiches Behavior wie link-card über [data-ob-orbit]);
     --tint    : heller Karten-Grund + grauer Rand (Team-Karten);
   Footer: Inhalt bestimmt den Look (ob-link / ob-btn--icon / ob-badge); --divider = Trennlinie oben. */
.ob-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 25px;
  border: 1px solid var(--ob-card-border, color-mix(in srgb, var(--ob-color-primary) 8%, transparent));
  background: var(--ob-card-bg, var(--ob-white));
  font-family: var(--ob-font);
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
a.ob-card:hover { box-shadow: var(--ob-shadow-lg); transform: translateY(-3px); }
a.ob-card:focus-visible { outline: 3px solid var(--ob-color-primary); outline-offset: 2px; }

/* --tint — hellerer Karten-Grund + grauer Rand (Team) */
.ob-card--tint {
  --ob-card-bg: color-mix(in srgb, var(--ob-tint-1) 45%, var(--ob-white));
  --ob-card-border: color-mix(in srgb, var(--ob-navy) 12%, transparent);
}

/* Media */
.ob-card__media {
  position: relative;
  width: 100%;                 /* needed: with only absolutely positioned children WebKit derives the width from the ratio and collapses to 0x0 */
  aspect-ratio: var(--ob-card-ratio, 16 / 10);
  overflow: hidden;
}
.ob-card__media > img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-card--product { --ob-card-ratio: 5 / 4; }             /* quadratischer als die anderen */
.ob-card--product .ob-card__media { background: var(--ob-card-media-bg, var(--ob-tint-1)); display: grid; place-items: center; }
.ob-card--product .ob-card__body { padding-bottom: 21px; }   /* Bottom-Part bündiger — Icon-Button wirkt sonst unten schwerer */
/* Produktbild: kleiner + über dem Grund zentriert, leichter Zoom on hover */
.ob-card--product .ob-card__media > img {
  position: relative; inset: auto;           /* zurueck in den Grid-Fluss (place-items zentriert) */
  width: auto; height: auto;
  max-width: 69%; max-height: 80.5%;        /* beide Deckel gemeinsam skaliert, damit das Bild unabhaengig von seinem Format gleich waechst */
  object-fit: contain;
  transform: translateY(4%);                 /* leicht nach unten → optisch mittig trotz Badge oben */
  transition: transform .5s ease;
}
@media (hover: hover) { a.ob-card--product:hover .ob-card__media > img { transform: translateY(4%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .ob-card--product .ob-card__media > img { transition: none; }
  a.ob-card--product:hover .ob-card__media > img { transform: translateY(4%); }
}

/* Media-Overlays: Chip (W5) bzw. schlichtes Label/Nummer (W7) */
.ob-card__tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 8px 12px;
  border-radius: var(--ob-radius-pill);
  background: rgba(255, 255, 255, .82);
  color: var(--ob-color-primary);
  font-size: 0.75625rem; font-weight: var(--ob-weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ob-card__tag--plain { background: none; padding: 0; font-size: 0.858rem; }     /* Nummer ohne Chip, ~13% größer (W7-2) */
.ob-card__tag--ondark { color: rgba(255, 255, 255, .82); }

/* Nacktes Label (kein Chip/Grund/Border) mit leicht transparenter Textfarbe — pro Karte
   wählbar je nach Helligkeit des Hintergrundbilds. Die Transparenz gibt den glasigen Look
   (das Bild scheint durch die Glyphen); light = heller Text (dunkle Bilder), dark = dunkler. */
.ob-card__tag--plain-light,
.ob-card__tag--plain-dark { background: none; padding: 0; }
.ob-card__tag--plain-light { color: color-mix(in srgb, var(--ob-white) 88%, transparent); }
.ob-card__tag--plain-dark  { color: color-mix(in srgb, #333333 88%, transparent); }  /* dunkelgrau (bewusst, dunkler als --ob-text) */

/* Body */
.ob-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 27px 27px 29px;
}
.ob-card__body .ob-eyebrow { font-size: 0.78rem; letter-spacing: 0.11em; }   /* Card-Eyebrow kleiner (Entwurf 9–11px) */
.ob-card__title {
  margin: var(--ob-space-2) 0 0;
  font-size: 1.5625rem;              /* 25px */
  font-weight: var(--ob-weight-semibold);
  line-height: var(--ob-lh-tight);
  color: var(--ob-navy);
}
.ob-card__text {
  margin: var(--ob-space-2) 0 0;
  font-size: 1rem;              /* 16px (+14%) */
  line-height: 1.55;
  color: var(--ob-grey);
}

/* Footer — an den Boden der gestreckten Karte; Look ergibt sich aus dem Inhalt.
   Mindestabstand zum Content oben (auch bei mehrzeiligem Text), Footer bleibt via auto unten. */
.ob-card__body:has(.ob-card__footer) .ob-card__text { margin-bottom: 28px; }
/* Kompakter bei Label-/Link-Footern (W7); Produkt-Footer (--divider) behält den größeren Abstand */
.ob-card__body:has(.ob-card__footer:not(.ob-card__footer--divider)) .ob-card__text { margin-bottom: var(--ob-space-4); }
.ob-card__footer {
  margin-top: auto;                 /* Footer/Badges immer am Kartenboden (bündig über alle Karten) */
  padding-top: var(--ob-space-3);
  display: flex;
  align-items: center;
  gap: var(--ob-space-2);
  flex-wrap: wrap;
}
/* Tag-Pills in der Card klein wie im Entwurf (9px; Badge-Padding skaliert per em mit) */
.ob-card__footer .ob-badge { font-size: var(--ob-fs-badge); }
.ob-card__footer--divider {
  padding-top: 17px;
  border-top: 1px solid color-mix(in srgb, var(--ob-navy) 12%, transparent);
  justify-content: space-between;
  flex-wrap: nowrap;
}
/* Card-Text-Link (navy, Pfeil, ohne Unterstrich — Entwurf W5/W7-2) */
.ob-card__link {
  display: inline-flex; align-items: center; gap: var(--ob-space-2);
  font-size: var(--ob-fs-eyebrow);             /* 13px */
  font-weight: var(--ob-weight-bold);
  color: var(--ob-navy);
  text-decoration: none;
}
.ob-card__link .ob-arrow { width: 14px; height: 14px; }
/* Icon-Button (Produkt-CTA) in der Card ~30% kleiner als der Atom-Default (3rem) */
.ob-card .ob-btn--icon { inline-size: 2.1rem; block-size: 2.1rem; box-shadow: none; }
.ob-card .ob-btn--icon .ob-arrow { width: 15px; height: 15px; }
@media (hover: hover) {
  a.ob-card:hover .ob-card__link .ob-arrow { transform: translateX(3px); }
}

/* Orbit-Deko (Produkt) — Ring + Blase RECHTS UNTEN (link-card-Mechanik, generisch über
   [data-ob-orbit]/[data-ob-orbit-spin]; das Behavior rotiert nur, Position ist reines CSS). */
.ob-card__decor {
  position: absolute;
  right: -38px; bottom: -40px;
  width: 175px; height: 175px;
  border: 1px solid color-mix(in srgb, var(--ob-color-primary) 30%, transparent);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.ob-card__orbit { position: absolute; inset: 0; transform: rotate(0deg); }
.ob-card__bubble {
  position: absolute; top: 40px; left: 20px;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
}

/* Grid — drei gleich hohe Spalten (Entwurf), stapelt responsiv */
.ob-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-space-4);
  align-items: stretch;
}
@media (max-width: 1024px) { .ob-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ob-card-grid { grid-template-columns: 1fr; } }

/* Produkt-Karten im Grid: 6-Farb-Tint-Zyklus des Media-Grunds per Position (wie link-card) */
.ob-card-grid .ob-card--product:nth-child(6n+1) { --ob-card-media-bg: var(--ob-tint-1); }
.ob-card-grid .ob-card--product:nth-child(6n+2) { --ob-card-media-bg: var(--ob-tint-2); }
.ob-card-grid .ob-card--product:nth-child(6n+3) { --ob-card-media-bg: var(--ob-tint-3); }
.ob-card-grid .ob-card--product:nth-child(6n+4) { --ob-card-media-bg: var(--ob-tint-4); }
.ob-card-grid .ob-card--product:nth-child(6n+5) { --ob-card-media-bg: var(--ob-tint-5); }
.ob-card-grid .ob-card--product:nth-child(6n+6) { --ob-card-media-bg: var(--ob-tint-6); }


/* eyebrow.css */
/* Eyebrow / Kicker — UPPERCASE, Tracking, Magenta (Entwurf). Über der Headline.
   Farbe schema-fähig (auf dunkel = Scheme-Akzent). */
.ob-eyebrow {
  display: inline-block;
  font-family: var(--ob-font);
  font-size: var(--ob-fs-eyebrow);
  font-weight: var(--ob-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--ob-tracking-eyebrow);
  color: var(--ob-scheme-accent, var(--ob-color-primary));
  margin: 0;
}
/* Auf dunklem Bild/Foto: helleres Rosa für AA-Kontrast (statt Magenta) */
.ob-eyebrow--ondark { color: var(--ob-scheme-label, var(--ob-rose)); }


/* facts.css */
/* Facts (Molekül) — Kennzahlen-Grid: große Zahl + Titel + Subtitel, Hairline-Trenner.
   Aus dem Entwurf gemessen (W4-2): Zahl rose 26px, Titel weiß 14px/700, Subtitel gedämpft 11px,
   Trenner 1px @15%, 2 Spalten. Farben über lokale Variablen → Default (on-dark) und --light.
   Anders als ob-steps: große Zahl, 2-spaltig, KEIN Auto-Zähler (Zahlen sind eigene Werte). */
.ob-facts {
  --ob-facts-line:  color-mix(in srgb, var(--ob-scheme-fg, var(--ob-white)) 15%, transparent);
  --ob-facts-num:   var(--ob-scheme-label, var(--ob-rose));
  --ob-facts-title: var(--ob-scheme-heading, var(--ob-white));
  --ob-facts-sub:   var(--ob-scheme-muted, color-mix(in srgb, var(--ob-white) 66%, transparent));
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ob-facts-line);
  font-family: var(--ob-font);
}
.ob-facts__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: var(--ob-space-3);
  padding: var(--ob-space-4) var(--ob-space-4) var(--ob-space-4) 0;
  border-bottom: 1px solid var(--ob-facts-line);
}
/* vertikale Trennlinie in der Mitte: Border rechts an den linken (odd) Zellen */
.ob-facts__item:nth-child(odd)  { border-right: 1px solid var(--ob-facts-line); }
.ob-facts__item:nth-child(even) { padding-left: var(--ob-space-4); }
.ob-facts__num {
  font-size: 1.75rem;                /* 28px */
  font-weight: var(--ob-weight-bold);
  line-height: 1;
  color: var(--ob-facts-num);
}
.ob-facts__body { display: flex; flex-direction: column; gap: 2px; }
.ob-facts__title {
  font-size: var(--ob-fs-small);     /* 15px */
  font-weight: var(--ob-weight-bold);
  line-height: var(--ob-lh-tight);
  color: var(--ob-facts-title);
}
.ob-facts__sub {
  font-size: var(--ob-fs-badge);     /* 12px */
  line-height: 1.4;
  color: var(--ob-facts-sub);
}
@media (max-width: 767px) {
  .ob-facts { grid-template-columns: 1fr; }
  .ob-facts__item:nth-child(odd)  { border-right: 0; }
  .ob-facts__item:nth-child(even) { padding-left: 0; }
}

/* --light — auf hellem Grund: Magenta-Zahl, Navy-Titel, grauer Subtitel, dunkle Trenner */
.ob-facts--light {
  --ob-facts-line:  color-mix(in srgb, var(--ob-navy) 15%, transparent);
  --ob-facts-num:   var(--ob-color-primary);
  --ob-facts-title: var(--ob-navy);
  --ob-facts-sub:   var(--ob-color-text);
}


/* feature-card.css */
/* Feature-Card (Atom) — dunkle Glas-Karte: Icon-Frame + Nummer + Titel + Text.
   Glassmorphism: transluzente Fläche + Hairline + Backdrop-Blur + oberes Kanten-Highlight
   (bewusste Abweichung vom flach-transluzenten Entwurf). Vorerst nur dunkle Ausprägung.
   Aus dem Entwurf gemessen: radius 18px, Icon-Frame 52px (Cyan-Hairline), Titel 19px/700, Text 12px.
   Nummer: leer → Auto-Zähler übers Grid (01,02,…); mit Text → Custom; --no-number → aus. */
.ob-feature-card {
  counter-increment: ob-fc;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;            /* DS hat kein globales border-box */
  padding: var(--ob-space-5) var(--ob-space-5) var(--ob-space-4);  /* 24 / 24 / 16 — unten knapper */
  border-radius: 18px;               /* Entwurf-exakt (zwischen --ob-radius-sm 12 und --ob-radius-card 24) */
  border: 1px solid var(--ob-scheme-card-border, color-mix(in srgb, var(--ob-white) 14%, transparent));
  background: var(--ob-scheme-card, color-mix(in srgb, var(--ob-white) 5%, transparent));
  -webkit-backdrop-filter: blur(var(--ob-scheme-card-blur, 14px)) saturate(1.3);
  backdrop-filter: blur(var(--ob-scheme-card-blur, 14px)) saturate(1.3);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ob-white) 10%, transparent); /* Glas-Kante oben */
  color: var(--ob-scheme-card-ink, var(--ob-white));
  font-family: var(--ob-font);
}
.ob-feature-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ob-radius-pill);
  border: 1px solid color-mix(in srgb, var(--ob-scheme-card-accent, var(--ob-color-dark-accent)) 33%, transparent);
  color: var(--ob-scheme-card-accent, var(--ob-color-dark-accent));        /* Akzent-Glyph */
  margin-bottom: var(--ob-space-6);          /* 32px (Entwurf 30) */
}
.ob-feature-card__icon svg { width: 22px; height: 22px; display: block; }
.ob-feature-card__num {
  position: absolute;
  top: var(--ob-space-4);
  right: var(--ob-space-4);
  font-size: 0.75rem;                /* 12px (+20%) */
  font-weight: var(--ob-weight-regular);
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--ob-scheme-card-ink, var(--ob-white)) 40%, transparent);
}
.ob-feature-card__num:empty::before { content: counter(ob-fc, decimal-leading-zero); }
.ob-feature-card--no-number .ob-feature-card__num::before,
.ob-feature-card-grid--no-number .ob-feature-card__num::before { content: none; }
.ob-feature-card__title {
  margin-top: 0;                     /* Titel startet direkt unter dem fix hohen Icon -> alle Titel auf gleicher Hoehe */
  margin-bottom: var(--ob-space-3);  /* 12px */
  font-size: 1.375rem;               /* 22px */
  font-weight: var(--ob-weight-bold);
  line-height: var(--ob-lh-tight);
  color: var(--ob-scheme-card-ink, var(--ob-white));
}
.ob-feature-card__text {
  font-size: var(--ob-fs-small);     /* 15px */
  line-height: 1.45;
  color: color-mix(in srgb, var(--ob-scheme-card-ink, var(--ob-white)) 72%, transparent);
}

/* Feature-Card-Grid (Molekül) — 3 gleiche Spalten, gleiche Höhe (gestreckt),
   liefert den Auto-Zähler (counter-reset) für die Nummerierung. Wie link-card-grid. */
.ob-feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-space-3);            /* 12px (Entwurf 10) */
  counter-reset: ob-fc;
}
@media (max-width: 768px) { .ob-feature-card-grid { grid-template-columns: 1fr; } }

.ob-feature-card { transition: border-color .3s ease, background-color .3s ease, box-shadow .35s ease; }

/* Hover: dezenter Cyan-Glow (immer) + sanfte Schwebeanimation (nur bei erlaubter Bewegung) */
@media (hover: hover) {
  .ob-feature-card:hover {
    border-color: color-mix(in srgb, var(--ob-scheme-card-accent, var(--ob-color-dark-accent)) 45%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--ob-white) 12%, transparent),
      0 0 22px 0 color-mix(in srgb, var(--ob-scheme-card-accent, var(--ob-color-dark-accent)) 30%, transparent),
      0 0 55px 4px color-mix(in srgb, var(--ob-scheme-card-accent, var(--ob-color-dark-accent)) 14%, transparent);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ob-feature-card:hover { animation: ob-fc-float 3s ease-in-out infinite; }
}
@keyframes ob-fc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}


/* filter.css */
/* Filter (Molekül) — Themen-Filter für ein Grid (W5 Produkte). Button-Gruppe mit
   aria-pressed — KEIN Tab/Panel: es wird dasselbe Grid gefiltert, keine Panels tauschen.
   Responsiv: Pill-Reihe ab Tablet, gestyltes <select> (.ob-select-Atom) auf schmal.
   Beide liegen immer im DOM; das Behavior filter.js hält sie synchron und filtert das
   Ziel-Grid. Filter-Logik ist REFERENZ — pro Consumer re-implementieren. */
.ob-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ob-space-2);                 /* 8px (Entwurf) */
}

/* Pill = zurückgenommener Chip; inaktiv muted Text + Line-Hairline (Entwurf), nicht .ob-btn */
.ob-filter__pill {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;                   /* WCAG Zielgröße */
  padding: 0 18px;                        /* Entwurf (bewusst, kein Token) */
  font-family: var(--ob-font);
  font-size: var(--ob-fs-eyebrow);        /* 13 */
  font-weight: var(--ob-weight-semibold);
  color: var(--ob-color-muted);
  background: var(--ob-white);
  border: 1px solid var(--ob-color-line);
  border-radius: var(--ob-radius-pill);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ob-filter__pill:hover { color: var(--ob-color-ink); border-color: var(--ob-color-primary); }
.ob-filter__pill:focus-visible { outline: 3px solid var(--ob-color-primary); outline-offset: 2px; }
.ob-filter__pill[aria-pressed="true"] {
  color: var(--ob-color-inverse);
  background: var(--ob-color-primary);
  border-color: var(--ob-color-primary);
}

/* Schmal: Pills weg, Select rein */
.ob-filter__select { display: none; }
.ob-filter__select .ob-select { inline-size: 100%; font-size: var(--ob-fs-eyebrow); }

@media (max-width: 768px) {
  .ob-filter__pills { display: none; }
  .ob-filter__select { display: block; }
}


/* heading.css */
/* Headings — Section-Headlines groß & leicht (Entwurf): display/h1/h2 = Weight 480, navy, eng.
   h3/h4 = kleinere Titel (semibold, z.B. Card-Titel). Farbe navy, schema-fähig (Fallback --ob-color-heading). */
.ob-display, .ob-h1, .ob-h2, .ob-h3, .ob-h4 {
  font-family: var(--ob-font);
  color: var(--ob-scheme-heading, var(--ob-color-heading));
  margin: 0;
  text-wrap: balance;
}
.ob-display {
  font-size: var(--ob-fs-display);
  font-weight: var(--ob-weight-heading);
  line-height: var(--ob-lh-display);
  letter-spacing: var(--ob-tracking-heading);
}
.ob-h1 {
  font-size: var(--ob-fs-h1);
  font-weight: var(--ob-weight-heading);
  line-height: var(--ob-lh-display);
  letter-spacing: var(--ob-tracking-heading);
}
.ob-h2 {
  font-size: var(--ob-fs-h2);
  font-weight: var(--ob-weight-heading);
  line-height: var(--ob-lh-display);
  letter-spacing: var(--ob-tracking-heading);
}
.ob-h3 {
  font-size: var(--ob-fs-h3);
  font-weight: var(--ob-weight-semibold);
  line-height: var(--ob-lh-heading);
  letter-spacing: -0.01em;
}
.ob-h4 {
  font-size: var(--ob-fs-h4);
  font-weight: var(--ob-weight-semibold);
  line-height: var(--ob-lh-heading);
}


/* input.css */
/* Input (Atom) — Text/E-Mail-Feld im Underline-Stil: transparent + Bodenlinie (Navy),
   Fokus verstärkt die Linie in Magenta. Zusammen mit .ob-select das Form-Control-Set.
   Standalone trägt der Input selbst die Linie; in einem Feld-Wrapper mit eigener Linie
   (Newsletter: Input + Inline-Submit unter EINER Linie) wird border-bottom überschrieben. */
.ob-input {
  inline-size: 100%;
  font-family: var(--ob-font);
  font-size: var(--ob-fs-body);
  font-weight: var(--ob-weight-regular);
  line-height: 1.3;
  color: var(--ob-color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ob-color-ink);
  border-radius: 0;
  padding: var(--ob-space-4) 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ob-input::placeholder { color: var(--ob-color-muted); opacity: 1; }
/* Sichtbarer Fokus ohne Box: Bodenlinie wird magenta + verdickt (≥3:1 auf hell) */
.ob-input:focus-visible {
  outline: none;
  border-bottom-color: var(--ob-color-primary);
  box-shadow: 0 1px 0 0 var(--ob-color-primary);
}
.ob-input[disabled] { opacity: .5; cursor: not-allowed; }


/* link-card.css */
/* Link-Card — halbhohe Themen-Karte ohne Bild, GANZE Karte = Link.
   Steht einzeln ODER im Grid (Grid = eigene Story-Variante).
   Maße/Abstände/Fonts sind design-exakt (aus dem Entwurf gemessen). */

.ob-link-card {
  counter-increment: ob-lc;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px;          /* Entwurf */
  border: 1px solid rgba(182, 24, 92, .08);
  border-radius: 25px;    /* Entwurf */
  background: var(--ob-lc-bg, var(--ob-tint-1)); /* Grid setzt --ob-lc-bg; Varianten überschreiben background direkt */
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ob-link-card:hover { box-shadow: var(--ob-shadow-lg); transform: translateY(-3px); } /* --ob-shadow-lg = 0 24px 60px rgba(74,17,45,.14), wie Entwurf */
.ob-link-card:focus-visible { outline: 3px solid var(--ob-color-primary); outline-offset: 2px; }

/* Ton-Modifier (für die Einzelkarte); im Grid werden die Töne automatisch per Position vergeben */
.ob-link-card--t1 { background: var(--ob-tint-1); }
.ob-link-card--t2 { background: var(--ob-tint-2); }
.ob-link-card--t3 { background: var(--ob-tint-3); }
.ob-link-card--t4 { background: var(--ob-tint-4); }
.ob-link-card--t5 { background: var(--ob-tint-5); }
.ob-link-card--t6 { background: var(--ob-tint-6); }

/* Sonder-Varianten außerhalb des 6-Farben-Musters (überschreiben background → gewinnen auch im Grid) */
.ob-link-card--white { background: var(--ob-white); border-color: rgba(182, 24, 92, .22); } /* Umriss auf hellem Grund sichtbar */

.ob-link-card--magenta {
  background: var(--ob-color-primary);
  border-color: transparent;
}
.ob-link-card--magenta .ob-link-card__num,
.ob-link-card--magenta .ob-link-card__title,
.ob-link-card--magenta .ob-link-card__link { color: var(--ob-white); }
.ob-link-card--magenta .ob-link-card__text { color: rgba(255, 255, 255, .88); }
.ob-link-card--magenta .ob-link-card__decor { border-color: var(--ob-white); }

/* Weiß: Bubble rosa + magenta Border, damit sie auf Weiß sichtbar ist */
.ob-link-card--white .ob-link-card__bubble {
  background: rgba(255, 145, 190, .08); /* Füllung sehr transparent */
  border-color: rgba(182, 24, 92, .22);
}

/* Deko ganz ausblenden (kombinierbar mit jeder Variante) */
.ob-link-card--no-decor .ob-link-card__decor { display: none; }

/* Nummer — leer → Auto-Zähler (01,02,…); mit Text → Custom-Text; --no-number → aus */
.ob-link-card__num {
  position: relative;
  z-index: 1;
  margin: 0 0 70px; /* Entwurf: Nummer → Titel */
  font-family: var(--ob-font);
  font-size: var(--ob-fs-badge); /* 12px */
  font-weight: var(--ob-weight-bold);
  line-height: 1;
  color: var(--ob-color-primary);
}
.ob-link-card__num:empty::before { content: counter(ob-lc, decimal-leading-zero); }
.ob-link-card--no-number .ob-link-card__num::before,
.ob-link-card-grid--no-number .ob-link-card__num::before { content: none; }

.ob-link-card__title {
  position: relative;
  z-index: 1;
  margin: 0 0 7px; /* Entwurf: Titel → Text */
  font-family: var(--ob-font);
  font-size: 25px; /* Entwurf (design-exakt) */
  font-weight: var(--ob-weight-bold);
  line-height: 1.2;
  color: var(--ob-navy);
}
.ob-link-card__text {
  position: relative;
  z-index: 1;
  margin: 0 0 19px; /* Entwurf: Text → Link */
  font-family: var(--ob-font);
  font-size: 1rem;   /* 16px (+14%) */
  line-height: 1.55; /* Entwurf (21.7/14) */
  color: var(--ob-grey);
}
.ob-link-card__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-2);
  font-family: var(--ob-font);
  font-size: 14px; /* Entwurf 13 + eine Spur größer */
  font-weight: var(--ob-weight-bold);
  color: var(--ob-color-primary);
}
.ob-link-card__link .ob-arrow { margin-top: 1.5px; } /* optische Zentrierung zum Text */
.ob-link-card:hover .ob-link-card__link .ob-arrow { transform: translateX(3px); }

/* Deko — blasser Ring oben-rechts (angeschnitten durch overflow:hidden).
   Blase startet am Entwurf-Punkt und orbitiert beim Hover LANGSAM gegen den Uhrzeigersinn
   auf ihrem (kleineren) Design-Radius. Kein Punkt. */
.ob-link-card__decor {
  position: absolute;
  top: -40px;
  right: -38px;
  width: 175px;
  height: 175px;
  border: 1px solid rgba(182, 24, 92, .32);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.ob-link-card__orbit {
  position: absolute;
  inset: 0;
  transform: rotate(0deg); /* Ruhe = Startpunkt (Design). Bewegung via behaviors/link-card-orbit.js */
}
.ob-link-card__bubble {
  position: absolute;
  top: 40px;  /* Entwurf-Startpunkt */
  left: 20px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .34);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
}
/* Grid — eigene Variante: gleiche Kartenhöhe pro Reihe (Titel oben, Link unten bündig).
   Farbe + Nummer AUTO per Position, feste 6er-Reihenfolge, ab der 7. zyklisch. */
.ob-link-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-space-4); /* 16px wie Entwurf */
  align-items: stretch;
  counter-reset: ob-lc;
}
@media (max-width: 1024px) { .ob-link-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ob-link-card-grid { grid-template-columns: 1fr; } }

/* im Grid: Link an den Boden der (gestreckten) Karte → Reihen-weise bündig */
.ob-link-card-grid .ob-link-card__link { margin-top: auto; }

.ob-link-card-grid .ob-link-card:nth-child(6n+1) { --ob-lc-bg: var(--ob-tint-1); }
.ob-link-card-grid .ob-link-card:nth-child(6n+2) { --ob-lc-bg: var(--ob-tint-2); }
.ob-link-card-grid .ob-link-card:nth-child(6n+3) { --ob-lc-bg: var(--ob-tint-3); }
.ob-link-card-grid .ob-link-card:nth-child(6n+4) { --ob-lc-bg: var(--ob-tint-4); }
.ob-link-card-grid .ob-link-card:nth-child(6n+5) { --ob-lc-bg: var(--ob-tint-5); }
.ob-link-card-grid .ob-link-card:nth-child(6n+6) { --ob-lc-bg: var(--ob-tint-6); }


/* link.css */
/* Text-Link — inline, Pfeil, Akzentfarbe aus Schema (Magenta hell / Rose·Cyan dunkel).
   Immer unterstrichen (Label-Span, damit der Pfeil unterstrichfrei bleibt). Pfeil = ob-arrow. */
.ob-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-2);
  font-family: var(--ob-font);
  font-size: var(--ob-fs-small);
  font-weight: var(--ob-weight-semibold);
  line-height: 1.3;
  color: var(--ob-scheme-accent, var(--ob-color-primary));
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 0.6em; /* konstant — Box-Höhe ändert sich beim Hover NICHT */
}
/* durchgehende Linie unter Text UND Pfeil, als ::after (bewegt sich, ohne die Höhe zu ändern) */
.ob-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
}
.ob-link .ob-arrow { width: 16px; height: 16px; }
.ob-link:hover .ob-arrow { transform: rotate(var(--ob-arrow-rot, 0deg)) translateX(3px); }
.ob-link:focus-visible {
  outline: 3px solid currentColor; /* = Akzent, schema-adaptiv (Magenta/Cyan/Rose), ≥3:1 AA */
  outline-offset: 2px;
  border-radius: var(--ob-radius-xs);
}
/* Auf dunkel: Rose statt Schema-Akzent (Entwurf W4-3-Link) */
.ob-link--ondark { color: var(--ob-scheme-label, var(--ob-rose)); }


/* media-card.css */
/* Media-Card (Molekül) — Foto-Karte mit Text-Overlay: Bild (cover) + abdunkelnder
   Verlauf (für AA-Lesbarkeit) + Label (eyebrow--ondark) + Titel + Notiz unten-links.
   Aus dem Entwurf gemessen: radius ~27px, Verlauf transparent→dark-magenta .86.
   Höhe kommt aus dem Kontext (z. B. .ob-media-grid); als Link (<a>) oder <figure> nutzbar. */
.ob-media-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ob-radius-card);
  text-decoration: none;
  isolation: isolate;
}
.ob-media-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;   /* Bild zoomt beim Hover, Karte bleibt starr */
}
/* Abdunkelnder Verlauf — sichert Weiß-/Hell-Text ≥ AA über dem Foto (Entwurf-Werte) */
.ob-media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, rgba(47, 5, 28, .86));
  pointer-events: none;
}
.ob-media-card__body {
  position: absolute;
  inset: auto var(--ob-space-5) var(--ob-space-5) var(--ob-space-5);   /* unten-links, ~24px */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ob-space-1);
}
.ob-media-card .ob-eyebrow {
  font-size: 0.625rem;             /* 10px — kleiner als Standard-Eyebrow (Entwurf 9px) */
  letter-spacing: 0.17em;
  margin-bottom: 2px;
}
.ob-media-card__title {
  font-family: var(--ob-font);
  font-size: var(--ob-fs-h3);      /* ~29px im Entwurf */
  font-weight: var(--ob-weight-semibold);
  line-height: var(--ob-lh-tight);
  color: var(--ob-white);
}
.ob-media-card__note {
  font-family: var(--ob-font);
  font-size: var(--ob-fs-badge);   /* 12px */
  color: rgba(255, 255, 255, .82);
}
.ob-media-card:focus-visible {
  outline: 3px solid var(--ob-color-primary);
  outline-offset: 3px;
}
@media (hover: hover) {
  .ob-media-card:hover .ob-media-card__img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ob-media-card__img { transition: none; }
  .ob-media-card:hover .ob-media-card__img { transform: none; }
}
/* Mobil: stärkeres Overlay (früher + dunkler) → Text bleibt gut lesbar */
@media (max-width: 768px) {
  .ob-media-card::after {
    background: linear-gradient(transparent 20%, rgba(47, 5, 28, .92));
  }
}


/* media-grid.css */
/* Media-Grid (Molekül) — Bento-Layout für .ob-media-card: 1 große Karte links (über
   volle Höhe) + 2 gestapelt rechts. Aus dem Entwurf: Spalten ~1.17:1, Reihen ~290px, gap 16px.
   Mobil (<=768) stapeln alle untereinander. Erwartet genau 3 Karten. */
.ob-media-grid {
  display: grid;
  grid-template-columns: 1.17fr 1fr;
  grid-auto-rows: clamp(200px, 22vw, 290px);
  gap: var(--ob-space-4);
}
.ob-media-grid > .ob-media-card:first-child { grid-column: 1; grid-row: 1 / 3; }
.ob-media-grid > .ob-media-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.ob-media-grid > .ob-media-card:nth-child(3) { grid-column: 2; grid-row: 2; }

@media (max-width: 768px) {
  .ob-media-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(220px, 60vw, 340px);
  }
  .ob-media-grid > .ob-media-card:first-child,
  .ob-media-grid > .ob-media-card:nth-child(2),
  .ob-media-grid > .ob-media-card:nth-child(3) { grid-column: 1; grid-row: auto; }
}


/* rating.css */
/* Rating — Sterne-Bewertung. Aus dem Entwurf: Rose, auf dunklem Grund (Testimonials).
   Gefüllt = Rose (currentColor), leer = derselbe Ton stark ausgedünnt → funktioniert hell & dunkel. */
.ob-rating {
  display: inline-flex;
  gap: 2px;
  color: var(--ob-rose);
}
.ob-rating svg { width: 16px; height: 16px; display: block; }
.ob-rating__empty { color: color-mix(in srgb, currentColor 22%, transparent); }


/* schemes.css */
/* Scheme (Farbschema-Kontrakt) — geschlossener Satz semantischer Rollen-Tokens fuer
   dunkle/getoente Organismen. Erweitert die --ob-scheme-*-Mechanik aus section.css:
   heading/fg/muted/accent werden WIEDERVERWENDET; ground/label/card/glow/btn kommen hinzu.
   Ein Organismus liest NUR diese Rollen; ein Schema setzt das Buendel, kein Element-Override.
   Anwenden auf den Organismus-Wrapper: `.ob-scheme` (= navy) plus optional ein Modifier,
   z.B. `class="ob-scheme ob-scheme--magenta"` oder `class="ob-scheme ob-scheme--light ob-scheme--tint-3"`. */

/* Basis = navy (Default-Schema) */
.ob-scheme {
  --ob-scheme-ground-from: var(--ob-navy);
  --ob-scheme-ground-to:   var(--ob-navy-deep);
  --ob-scheme-bg:          var(--ob-scheme-ground-from);   /* fuer flaches .ob-section, falls kombiniert */
  --ob-scheme-heading:     var(--ob-color-inverse);
  --ob-scheme-fg:          var(--ob-color-inverse);
  --ob-scheme-muted:       rgba(255, 255, 255, .72);
  --ob-scheme-label:       var(--ob-rose);                 /* warmer Klein-Caps-Akzent: eyebrow/meta/cite */
  --ob-scheme-card:        color-mix(in srgb, var(--ob-white) 5%, transparent);  /* Glas-Flaeche */
  --ob-scheme-card-border: color-mix(in srgb, var(--ob-white) 14%, transparent);
  --ob-scheme-card-blur:   14px;
  --ob-scheme-card-ink:    var(--ob-scheme-heading);       /* Text AUF der Card (kann != Panel-Text sein) */
  --ob-scheme-card-accent: var(--ob-scheme-accent);        /* Icon AUF der Card */
  --ob-scheme-accent:      var(--ob-color-dark-accent);    /* Funktions-Akzent: Icon-Frame, Hover-Glow */
  --ob-scheme-btn-bg:      var(--ob-white);                /* .ob-btn--light auf dem Schema */
  --ob-scheme-btn-fg:      var(--ob-color-ink);
  --ob-scheme-glow-1:      var(--ob-magenta-bright);       /* Radial-Spot primaer */
  --ob-scheme-glow-2:      var(--ob-color-dark-accent);    /* sekundaer (Testimonials: cyan); nur wo ein 2. Spot gezeichnet wird */
}

/* Magenta (= Produktfinder-CTA, erstes Nicht-Navy-Schema) */
.ob-scheme--magenta {
  --ob-scheme-ground-from: var(--ob-magenta-deep);
  --ob-scheme-ground-to:   color-mix(in srgb, var(--ob-magenta-100), var(--ob-magenta-bright) 15%);  /* Verlauf kraeftiger: helles Ende Richtung magenta-bright */
  --ob-scheme-muted:       var(--ob-magenta-20);
  --ob-scheme-label:       var(--ob-magenta-20);           /* blasses Rosa — ob-rose reicht auf Magenta nicht fuer AA */
  --ob-scheme-card:        var(--ob-white);                /* solide Card statt Glas (Entscheidung: kein Glas auf Magenta) */
  --ob-scheme-card-border: color-mix(in srgb, var(--ob-navy) 12%, transparent);
  --ob-scheme-card-blur:   0px;
  --ob-scheme-card-ink:    var(--ob-navy);                 /* dunkler Text auf der weissen Card */
  --ob-scheme-card-accent: var(--ob-magenta-100);          /* Magenta-Icon auf der weissen Card */
  --ob-scheme-accent:      color-mix(in srgb, var(--ob-rose) 55%, var(--ob-white));
  --ob-scheme-glow-1:      var(--ob-rose);
  --ob-scheme-glow-2:      var(--ob-color-dark-accent);    /* Cyan-Gegenpol (Testimonials 2. Spot) */
  --ob-scheme-glow-strength: 32%;                          /* Rose auf Magenta braucht mehr, um zu lesen */
}

/* Helles Buendel (Polaritaetswechsel) — von allen 6 Tints geteilt, EINMAL definiert.
   Glas-Flaeche = dezenter Solid (Entscheidung A). btn folgt dem Akzent. */
.ob-scheme--light {
  --ob-scheme-ground-from: var(--ob-tint-1);
  --ob-scheme-ground-to:   color-mix(in srgb, var(--ob-scheme-ground-from), var(--ob-scheme-accent) 15%);  /* sichtbare, gleich-tonige Diagonale */
  --ob-scheme-heading:     var(--ob-navy);
  --ob-scheme-fg:          var(--ob-navy);
  --ob-scheme-muted:       color-mix(in srgb, var(--ob-navy) 66%, transparent);
  --ob-scheme-label:       var(--ob-magenta-100);
  --ob-scheme-card:        var(--ob-white);
  --ob-scheme-card-border: color-mix(in srgb, var(--ob-navy) 12%, transparent);
  --ob-scheme-card-blur:   0px;
  --ob-scheme-accent:      var(--ob-magenta-100);
  --ob-scheme-btn-bg:      var(--ob-scheme-accent);        /* CTA = Akzent-Farbe */
  --ob-scheme-btn-fg:      var(--ob-white);
  --ob-scheme-glow-1:      var(--ob-scheme-accent);        /* solider Akzent-Spot; Staerke steuert glow-strength */
  --ob-scheme-glow-strength: 24%;
  --ob-scheme-glow-2:      var(--ob-navy);                 /* kuehler Navy-Gegenpol auf hellem Grund (Testimonials 2. Spot) */
}

/* Tint-Schemata 1-4 (5/6 als Schema entfallen, Kundenwunsch): NUR Grund + abgeleiteter
   dunkler Akzent (paarige --ob-tint-N-ink-Skala). Nur innerhalb von .ob-scheme--light gueltig. */
.ob-scheme--light.ob-scheme--tint-1 { --ob-scheme-ground-from: var(--ob-tint-1); --ob-scheme-label: var(--ob-tint-1-ink); --ob-scheme-accent: var(--ob-tint-1-ink); }
.ob-scheme--light.ob-scheme--tint-2 { --ob-scheme-ground-from: var(--ob-tint-2); --ob-scheme-label: var(--ob-tint-2-ink); --ob-scheme-accent: var(--ob-tint-2-ink); }
.ob-scheme--light.ob-scheme--tint-3 { --ob-scheme-ground-from: var(--ob-tint-3); --ob-scheme-label: var(--ob-tint-3-ink); --ob-scheme-accent: var(--ob-tint-3-ink); }
.ob-scheme--light.ob-scheme--tint-4 { --ob-scheme-ground-from: var(--ob-tint-4); --ob-scheme-label: var(--ob-tint-4-ink); --ob-scheme-accent: var(--ob-tint-4-ink); }


/* seal.css */
/* Seal (Atom) — rundes Siegel/Medaillon: kleine Ober-Zeile + große Mitte + Notiz.
   Kommt im Entwurf mehrfach vor (VIENNA WORLD / EVIDENCE LEADER / MIKRO BIOM).
   Alle Größen (Schrift, Zeilenabstand, Innenluft) sind an --ob-seal-size gekoppelt →
   das Siegel skaliert als Ganzes über eine einzige Variable. Drei Füllungen:
   on-dark (Default, Rose-Border) / --solid (Magenta) / --light (weiß, Magenta-Border). */
.ob-seal {
  --ob-seal-size: 160px;
  --ob-seal-mid: 0.1625;             /* Schriftgrad der Mitte, Anteil an --ob-seal-size */
  --ob-seal-mid-tracking: 0.015em;   /* Laufweite der Mitte */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ob-seal-size) * 0.055);
  box-sizing: border-box;
  width: var(--ob-seal-size);
  height: var(--ob-seal-size);
  padding: calc(var(--ob-seal-size) * 0.1);
  border-radius: var(--ob-radius-pill);
  text-align: center;
  line-height: 1.05;
  font-family: var(--ob-font);
  text-transform: uppercase;
  /* Default (on-dark): tiefes Wein-Magenta transluzent + Rose-Border (Entwurf) */
  background: color-mix(in srgb, color-mix(in srgb, var(--ob-magenta-deep) 62%, #000) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ob-rose) 60%, transparent);
  color: var(--ob-white);
}
.ob-seal__top {
  font-size: calc(var(--ob-seal-size) * 0.081);
  letter-spacing: 0.18em;
  line-height: 1.2;                  /* mehrzeilige Labels sauber umbrechen (Content kurz halten = Consumer) */
  font-weight: var(--ob-weight-regular);
  color: var(--ob-rose);
}
.ob-seal__mid {
  /* Kalibriert auf die laengste real vorkommende Mitte (MIKROBIOM, neun Zeichen): 0.1625
     Schriftgrad plus 0.015em Laufweite fuellen das Medaillon bis ~8px an den Ring. Der
     Entwurfswert 0.19 mit 0.04em passte nur bis rund sechs Zeichen. Beide Werte sind
     ueberschreibbar, aber nur AM Siegel selbst (die Deklaration hier gewinnt gegen einen
     geerbten Wert), also z.B. `.mein-panel .ob-seal { --ob-seal-mid: .19 }`. */
  font-size: calc(var(--ob-seal-size) * var(--ob-seal-mid, 0.1625));
  font-weight: var(--ob-weight-bold);
  letter-spacing: var(--ob-seal-mid-tracking, 0.015em);
  line-height: 1;
  /* Die Mitte sitzt auf der Hoehe, auf der der Kreis am breitesten ist, und darf deshalb
     die Innenluft seitlich aufheben. Bei kurzen Mitten ohne Wirkung. */
  width: calc(100% + var(--ob-seal-size) * 0.2);
  margin-inline: calc(-1 * var(--ob-seal-size) * 0.1);
}
.ob-seal__note {
  font-size: calc(var(--ob-seal-size) * 0.070);
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-weight: var(--ob-weight-regular);
  color: color-mix(in srgb, var(--ob-white) 75%, transparent);
}

/* --solid — volle Magenta-Füllung (Entwurf VIENNA WORLD) */
.ob-seal--solid {
  background: var(--ob-color-primary);
  border-color: color-mix(in srgb, var(--ob-white) 45%, transparent);
}
.ob-seal--solid .ob-seal__top  { color: color-mix(in srgb, var(--ob-white) 82%, var(--ob-rose)); }
.ob-seal--solid .ob-seal__note { color: color-mix(in srgb, var(--ob-white) 80%, transparent); }

/* --light — helle Füllung, dunkles Magenta in der Mitte, Magenta-Border (Entwurf EVIDENCE LEADER) */
.ob-seal--light {
  background: color-mix(in srgb, var(--ob-white) 88%, transparent);
  border-color: color-mix(in srgb, var(--ob-color-primary) 48%, transparent);
  color: var(--ob-navy);
}
.ob-seal--light .ob-seal__top  { color: var(--ob-color-primary); }
.ob-seal--light .ob-seal__mid  { color: var(--ob-magenta-deep); }
.ob-seal--light .ob-seal__note { color: var(--ob-navy); }


/* section-head.css */
/* Section-Head (Molekül) — Kicker + Headline (+ optionale Lead). Kommt 14× im Entwurf vor.
   Setzt sich aus den Atomen eyebrow + heading + text(lead) zusammen.
   Default: 2-spaltig (Heading-Block links, Lead rechts, unten-bündig) — Entwurf.
   --center: einspaltig, zentriert, Lead unter dem Heading. Lead immer optional. */
.ob-section-head {
  display: grid;
  /* Breit: Ratio 1.85:1 (Lead ~35%, Entwurf 829:447). Schmaler → Lead floored auf min,
     wird dadurch ein größerer Anteil (Heading gibt nach, da es fluid kleiner wird). */
  grid-template-columns: minmax(0, 1.85fr) minmax(min(100%, 380px), 1fr);
  gap: var(--ob-space-8);           /* 64px (Entwurf) */
  align-items: end;                 /* Lead an der Grundlinie des Headings */
}
.ob-section-head__group > * + * { margin-top: var(--ob-space-4); } /* Eyebrow → Headline */
.ob-section-head__lead { max-width: 46ch; }

/* Optische Randkompensation: große Glyphen haben eine linke Seitenkerbe (~0.045em),
   sonst wirkt der Headline-Anfang gegenüber Eyebrow/Lead eingerückt. Nur links-bündig
   (bei --center würde das die Zentrierung verschieben). */
.ob-section-head:not(.ob-section-head--center) .ob-section-head__group
  > :is(.ob-display, .ob-h1, .ob-h2, .ob-h3, .ob-h4) {
  margin-inline-start: -0.045em;
}

/* Ohne Lead → Heading-Block volle Breite */
.ob-section-head:not(:has(.ob-section-head__lead)) { grid-template-columns: 1fr; }

/* Stacked — einspaltig, links, Lead direkt unter dem Heading (Hero-Kopf).
   Nutzt intern eine große Headline (.ob-display) und eine engere Lead. */
.ob-section-head--stacked {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--ob-space-5);           /* 24px Heading → Lead (statt 64px 2-spaltig) */
}
.ob-section-head--stacked .ob-section-head__lead { max-width: 52ch; }

/* Centered — einspaltig, zentriert, Lead unter dem Heading */
.ob-section-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.ob-section-head--center .ob-section-head__lead { margin-inline: auto; }

@media (max-width: 900px) {
  .ob-section-head { grid-template-columns: 1fr; gap: var(--ob-space-5); align-items: start; }
}


/* section.css */
/* Section-Wrapper — spiegelt die .obcs-Farbschema-Mechanik: setzt Schema-Variablen,
   die die Atome (Heading/Text/Eyebrow/Card) erben. Für erste Widgets optional. */
.ob-section {
  --ob-scheme-bg:      var(--ob-color-bg);
  --ob-scheme-surface: var(--ob-color-surface);
  --ob-scheme-fg:      var(--ob-color-text);
  --ob-scheme-heading: var(--ob-color-heading);
  --ob-scheme-muted:   var(--ob-grey);
  --ob-scheme-accent:  var(--ob-color-primary);
  background: var(--ob-scheme-bg);
  color: var(--ob-scheme-fg);
  padding-block: var(--ob-section-y);
}

/* Schema: Magenta */
.ob-section--magenta {
  --ob-scheme-bg:      var(--ob-color-primary);
  --ob-scheme-surface: var(--ob-white);
  --ob-scheme-fg:      var(--ob-color-inverse);
  --ob-scheme-heading: var(--ob-color-inverse);
  --ob-scheme-muted:   var(--ob-magenta-20);
  --ob-scheme-accent:  var(--ob-color-inverse);
}

/* Schema: Dunkel (Navy) */
.ob-section--dark {
  --ob-scheme-bg:      var(--ob-color-dark);
  --ob-scheme-surface: var(--ob-color-dark-deep);
  --ob-scheme-fg:      var(--ob-color-inverse);
  --ob-scheme-heading: var(--ob-color-inverse);
  --ob-scheme-muted:   rgba(255, 255, 255, .7);
  --ob-scheme-accent:  var(--ob-color-dark-accent);
}

.ob-section__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--ob-space-5);
}

@media (max-width: 1024px) { .ob-section { --ob-section-y: 80px; } }
@media (max-width: 768px)  { .ob-section { --ob-section-y: 64px; } }


/* select.css */
/* Select (Atom) — natives <select> im OB-Stil: appearance:none + Custom-Pfeil (SVG),
   Pill-Feld, Line-Border, magenta Fokus. Wiederverwendbar (Filter mobil, Formulare).
   Der Pfeil ist als background-image gesetzt (Navy fest — im background nicht token-fähig). */
.ob-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--ob-font);
  font-size: var(--ob-fs-body);
  font-weight: var(--ob-weight-semibold);
  line-height: 1.2;
  color: var(--ob-color-ink);
  background-color: var(--ob-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23102A43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ob-space-4) center;
  background-size: 16px;
  min-block-size: 44px;                                    /* WCAG Zielgröße */
  padding: var(--ob-space-2) calc(var(--ob-space-5) + 16px) var(--ob-space-2) var(--ob-space-5);
  border: 1px solid var(--ob-color-line);
  border-radius: var(--ob-radius-pill);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ob-select:hover { border-color: var(--ob-color-primary); }
.ob-select:focus-visible { outline: 3px solid var(--ob-color-primary); outline-offset: 2px; }
.ob-select::-ms-expand { display: none; }
.ob-select[disabled] { opacity: .5; cursor: not-allowed; }


/* stat.css */
/* Stat (Atom) — Kennzahl: Zahl-Pill + Label (+ optionale Notiz).
   Aus dem Entwurf gemessen: Pill 55px, Label navy 700, Notiz klein/gedämpft.
   Zwei Pill-Ausprägungen: getönt (Default) und solid (Akzent, erste Kennzahl im Entwurf).
   Gruppierung via .ob-stat-row (neutral) bzw. .ob-stat-row--band (Trust-Band-Look). */
.ob-stat {
  display: flex;
  align-items: center;
  gap: var(--ob-space-4);           /* 16px (Entwurf ~18px) */
  font-family: var(--ob-font);
}
.ob-stat__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: var(--ob-radius-pill);
  font-size: calc(var(--ob-fs-eyebrow) * 1.32); /* 13px +32% (Kunden-Wunsch: Zahl größer) */
  font-weight: var(--ob-weight-bold);
  line-height: 1;
  /* Default: getönt */
  background: var(--ob-tint-1);
  color: var(--ob-color-primary);
  border: 1px solid color-mix(in srgb, var(--ob-color-primary) 20%, transparent);
}
.ob-stat__num--solid {
  background: var(--ob-color-primary);
  color: var(--ob-white);
  border-color: var(--ob-color-primary);
}
.ob-stat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-stat__label {
  font-size: var(--ob-fs-body);     /* ~17px im Entwurf → 18px Token */
  font-weight: var(--ob-weight-bold);
  color: var(--ob-color-heading);   /* navy */
  line-height: var(--ob-lh-tight);
}
.ob-stat__note {
  font-size: var(--ob-fs-badge);    /* 12px */
  font-weight: var(--ob-weight-regular);
  color: var(--ob-color-text);
}

/* Featured — hervorgehobene Kennzahl auf getöntem Block (Entwurf: erste Kennzahl
   links, kombiniert mit solider Pill __num--solid). Nur der Hintergrund; im Row
   füllt der Block die Zelle voll bis zum Trenner. */
.ob-stat--featured {
  background: var(--ob-tint-1);
  padding: var(--ob-space-5) var(--ob-space-6);   /* Innen-Padding; Block bleibt randbündig */
}

/* On-Dark — Rose-Pill auf dunklen Sektionen (Entwurf: Trust-Chips) */
.ob-stat--ondark .ob-stat__num {
  background: color-mix(in srgb, var(--ob-scheme-label, var(--ob-rose)) 18%, transparent);
  border-color: color-mix(in srgb, var(--ob-scheme-label, var(--ob-rose)) 38%, transparent);
  color: var(--ob-scheme-label, var(--ob-rose));
}
.ob-stat--ondark .ob-stat__label { color: color-mix(in srgb, var(--ob-scheme-fg, var(--ob-white)) 85%, transparent); }
.ob-stat--ondark .ob-stat__note  { color: color-mix(in srgb, var(--ob-scheme-fg, var(--ob-white)) 66%, transparent); }

/* Kompakt — dezenteres, kleineres Label (Chip-Charakter statt prominenter Kennzahl) */
.ob-stat--compact .ob-stat__label {
  font-size: var(--ob-fs-small);    /* 15px statt 18 */
  font-weight: var(--ob-weight-regular);
}

/* Stat-Row (Molekül) — NEUTRALE Gruppe: mehrere Kennzahlen nebeneinander, gleich hoch,
   Inhalt je Zelle zentriert; stapelt mobil (<=600). Ohne Deko-Linien.
   Trust-Band-Look (rosa Trenner/Kanten, Zwischenstufe) via Modifier .ob-stat-row--band. */
.ob-stat-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;             /* gleiche Höhe */
  margin: 0;
  padding: 0;                       /* kein Außenabstand — das ist Sache des Consumers */
}
.ob-stat-row > .ob-stat {
  padding-inline: var(--ob-space-6);        /* 32px (Entwurf ~28px) */
  justify-content: center;                  /* Inhalt je Zelle zentriert */
}
@media (max-width: 600px) {
  .ob-stat-row { grid-auto-flow: row; grid-auto-columns: auto; }
  .ob-stat-row > .ob-stat { justify-content: flex-start; padding: var(--ob-space-4) var(--ob-space-5); }
}

/* --band — Trust-Band-Look: rosa vertikale Trenner + Ober-/Unterkante, bündige Außenkanten,
   Zwischenstufe (Featured in eigener Zeile → dann zwei nebeneinander → gestapelt).
   Für neutrale Kontexte die Basis ohne --band verwenden. */
.ob-stat-row--band {
  border-block: 1px solid color-mix(in srgb, var(--ob-color-primary) 15%, transparent);
}
.ob-stat-row--band > .ob-stat + .ob-stat {
  border-left: 1px solid color-mix(in srgb, var(--ob-color-primary) 15%, transparent);
}
/* Äußere Kanten bündig — kein Rand-Gutter (Featured behält sein Innen-Padding) */
.ob-stat-row--band > .ob-stat:first-child:not(.ob-stat--featured) { padding-inline-start: 0; }
.ob-stat-row--band > .ob-stat:last-child:not(.ob-stat--featured)  { padding-inline-end: 0; }

/* Zwischenstufe: Featured (rosa) in eigener Zeile, die anderen zwei nebeneinander */
@media (max-width: 1024px) {
  .ob-stat-row--band {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
  }
  .ob-stat-row--band > .ob-stat {
    justify-content: flex-start;                 /* gestapelt links, nicht zentriert */
    padding: var(--ob-space-4) var(--ob-space-5); /* L/R-Padding: Inhalt klebt nicht am Rand */
    border-left: 0;
  }
  .ob-stat-row--band > .ob-stat:first-child:not(.ob-stat--featured),
  .ob-stat-row--band > .ob-stat:last-child:not(.ob-stat--featured) { padding-inline: var(--ob-space-5); }
  .ob-stat-row--band > .ob-stat--featured { grid-column: 1 / -1; }   /* Featured volle Breite */
  .ob-stat-row--band > .ob-stat:nth-child(2) { border-top: 1px solid color-mix(in srgb, var(--ob-color-primary) 15%, transparent); }
  .ob-stat-row--band > .ob-stat:nth-child(3) {
    border-top: 1px solid color-mix(in srgb, var(--ob-color-primary) 15%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--ob-color-primary) 15%, transparent);
  }
}
/* Mobil: alle untereinander */
@media (max-width: 600px) {
  .ob-stat-row--band { grid-template-columns: 1fr; }
  .ob-stat-row--band > .ob-stat:nth-child(3) { border-left: 0; }   /* gestapelt kein vertikaler Trenner */
}


/* steps.css */
/* Steps (Molekül) — nummerierte Prozess-/Schritt-Liste: Nummer + Titel + Subtitel,
   Hairline-Trenner zwischen den Zeilen. Aus dem Entwurf gemessen (W4-1): Nummer rose 11px/bold,
   Titel weiß 15px/700, Subtitel gedämpft 12px, Trenner 1px @14%.
   Farben über lokale Variablen → Default (on-dark) und --light (auf hellem Grund).
   Nummer: leer → Auto-Zähler (01,02,…); mit Text → Custom; --no-number → aus. */
.ob-steps {
  --ob-steps-line:  color-mix(in srgb, var(--ob-scheme-fg, var(--ob-white)) 14%, transparent);
  --ob-steps-num:   var(--ob-scheme-label, var(--ob-rose));
  --ob-steps-title: var(--ob-scheme-heading, var(--ob-white));
  --ob-steps-sub:   var(--ob-scheme-muted, color-mix(in srgb, var(--ob-white) 66%, transparent));
  counter-reset: ob-steps;
  border-top: 1px solid var(--ob-steps-line);
  font-family: var(--ob-font);
}
.ob-steps__item {
  counter-increment: ob-steps;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: center;
  gap: var(--ob-space-3);            /* 12px (Entwurf) */
  padding: var(--ob-space-4) 0;      /* 16px (Entwurf ~15) */
  border-bottom: 1px solid var(--ob-steps-line);
}
.ob-steps__num {
  font-size: 0.8125rem;              /* 13px */
  font-weight: var(--ob-weight-bold);
  letter-spacing: 0.02em;
  color: var(--ob-steps-num);
}
.ob-steps__num:empty::before { content: counter(ob-steps, decimal-leading-zero); }
.ob-steps--no-number .ob-steps__num::before { content: none; }
.ob-steps--no-number .ob-steps__item { grid-template-columns: 1fr; }
.ob-steps--no-number .ob-steps__num { display: none; }
.ob-steps__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-steps__title {
  font-size: 1rem;                   /* 16px */
  font-weight: var(--ob-weight-bold);
  line-height: var(--ob-lh-tight);
  color: var(--ob-steps-title);
}
.ob-steps__sub {
  font-size: var(--ob-fs-eyebrow);              /* 13px */
  color: var(--ob-steps-sub);
}

/* --light — auf hellem Grund: Magenta-Nummer, Navy-Titel, grauer Subtitel, dunkle Trenner */
.ob-steps--light {
  --ob-steps-line:  color-mix(in srgb, var(--ob-navy) 14%, transparent);
  --ob-steps-num:   var(--ob-color-primary);
  --ob-steps-title: var(--ob-navy);
  --ob-steps-sub:   var(--ob-color-text);
}


/* testimonial.css */
/* Testimonial (Molekül) — Glas-Karte für Kundenstimmen: Sterne (ob-rating) + Zitat + Autor.
   Aus dem Entwurf gemessen (W9): Glas weiß@7% + blur(10px) + Hairline, radius 22, padding 23.
   Variante --accent (hervorgehoben): Magenta-Tint + Rose-Border. Das Anheben der Karte
   (translateY) im 3er-Grid ist Layout/Komposition, nicht Teil des Moleküls. */
.ob-testimonial {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--ob-space-5);        /* 24px (Entwurf 23) */
  border-radius: 22px;
  border: 1px solid var(--ob-scheme-card-border, color-mix(in srgb, var(--ob-white) 17%, transparent));
  background: var(--ob-scheme-card, color-mix(in srgb, var(--ob-white) 7%, transparent));
  -webkit-backdrop-filter: blur(var(--ob-scheme-card-blur, 10px));
  backdrop-filter: blur(var(--ob-scheme-card-blur, 10px));
  color: var(--ob-scheme-card-ink, var(--ob-white));
  font-family: var(--ob-font);
}
.ob-testimonial .ob-rating { align-self: start; }   /* Sterne immer linksbündig, nie gestreckt/zentriert */
.ob-testimonial .ob-rating svg { width: 14px; height: 14px; }
.ob-testimonial__quote {
  margin: var(--ob-space-6) 0 var(--ob-space-5);   /* 32 / 0 / 24 (Entwurf 34/20) */
  font-size: 1.0625rem;              /* 17px */
  font-weight: 500;                  /* Entwurf ~530 */
  line-height: 1.35;
  color: var(--ob-scheme-card-ink, var(--ob-white));
}
.ob-testimonial__author {
  margin-top: auto;                  /* Autor an den Boden der (gestreckten) Karte */
  font-size: 0.625rem;               /* 10px */
  font-weight: var(--ob-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ob-scheme-card-ink, var(--ob-white)) 68%, transparent);
}

/* --accent — hervorgehoben: Card-Flaeche Richtung Label getoent (warm auf dunkel, solide-getoent auf hell) */
.ob-testimonial--accent {
  background: color-mix(in srgb, var(--ob-scheme-card, color-mix(in srgb, var(--ob-white) 7%, transparent)), var(--ob-scheme-label, var(--ob-color-primary)) 18%);
  border-color: color-mix(in srgb, var(--ob-scheme-label, var(--ob-rose)) 40%, transparent);
}


/* text.css */
/* Text — Lead / Body / Small. Größen aus dem Entwurf, schema-fähig.
   Lead = ruhiges Intro (grau), Body = Fließtext, Small = Meta/Fußnote. */
.ob-lead {
  font-family: var(--ob-font);
  font-size: var(--ob-fs-lead);
  font-weight: var(--ob-weight-regular);
  line-height: var(--ob-lh-body);
  color: var(--ob-scheme-muted, var(--ob-grey));
  margin: 0;
  max-width: 46ch;
}
.ob-body {
  font-family: var(--ob-font);
  font-size: var(--ob-fs-body);
  font-weight: var(--ob-weight-regular);
  line-height: var(--ob-lh-body);
  color: var(--ob-scheme-fg, var(--ob-color-text));
  margin: 0;
  max-width: 68ch;
}
.ob-small {
  font-family: var(--ob-font);
  font-size: var(--ob-fs-small);
  line-height: var(--ob-lh-body);
  color: var(--ob-scheme-muted, var(--ob-grey));
  margin: 0;
}